/* ===================================================================
   Municipalidad de San Justo — sitio público
   Paleta OFICIAL de marca (flyer institucional · confirmada por la Muni):
     · Azul marino #1a2a56  base y color PRIORITARIO
     · Amarillo    #f5b301  acento de marca (botones, subrayados, activo)
     · Blanco + gris para separar secciones y dar aire
   Sobrio, cuadrado, prolijo, con transiciones ágiles.
   =================================================================== */
:root{
  --azul:#1a2a56;          /* azul marino institucional (prioritario) */
  --azul-osc:#121d3d;      /* azul profundo (footer, énfasis) */
  --azul-viv:#2c437e;      /* azul medio (hover suave) */
  --azul-claro:#eaedf6;    /* tinte azul muy suave para íconos/fondos */
  --oro:#f5b301;           /* AMARILLO de marca: acento principal */
  --oro-osc:#d99e00;       /* amarillo hover */
  --acento-claro:#ffc93d;  /* amarillo claro: acento SOBRE fondo oscuro */
  --calido:#f5b301;        /* mismo amarillo para detalles chicos */
  --texto:#1c2430;
  --muted:#5b6675;
  --linea:#d6dce6;         /* bordes definidos */
  --gris:#eef1f6;          /* gris muy claro (UI chica: buscador) */
  --gris-medio:#dde3ec;    /* gris medio para separar secciones */
  --gris-2:#eef1f6;
  --radio:2px;             /* esquinas casi rectas */
  --sombra:0 1px 2px rgba(26,42,86,.07);
  --sombra-h:0 8px 22px rgba(26,42,86,.16);
  --t:.12s;                /* transición ágil */
  --f-tit:'Montserrat','Segoe UI',Arial,sans-serif;
  --f-txt:'Inter','Segoe UI',Arial,sans-serif;
}
*{box-sizing:border-box}
html,body{overflow-x:hidden;max-width:100%}
body{font-family:var(--f-txt);color:var(--texto);background:#fff;font-size:15px;line-height:1.6}
img,svg{max-width:100%}
a{text-decoration:none}
h1,h2,h3,h4{font-family:var(--f-tit);letter-spacing:-.01em;font-weight:700}
.container{max-width:1180px}
/* Fondo gris medio para separar secciones alternadas (3er color) */
.bg-light{background-color:var(--gris-medio) !important}
.seccion-gris{background-color:var(--gris-medio)}

/* Cinta DEMO */
.demo-flag{position:fixed;top:15px;right:-48px;transform:rotate(45deg);background:var(--azul-osc);color:#fff;
  font-size:11px;font-weight:600;letter-spacing:1.5px;padding:6px 60px;z-index:1080}

/* WhatsApp fijo */
.wa-fijo{position:fixed;left:22px;bottom:22px;width:54px;height:54px;border-radius:50%;background:var(--azul);color:#fff;
  display:grid;place-items:center;font-size:24px;z-index:1080;box-shadow:var(--sombra-h);transition:var(--t)}
.wa-fijo:hover{background:var(--azul-osc);color:#fff;transform:scale(1.06)}

/* ===== Barra superior ===== */
.topbar{background:var(--azul-osc);color:#d6e2ff;font-size:13px}
.topbar .container{min-height:40px;gap:14px;flex-wrap:wrap}
.tb-links{gap:22px}
.topbar a{color:#d6e2ff;transition:var(--t)}
.topbar a:hover{color:#fff}
.tb-social{display:flex;gap:6px}
.tb-social a{width:30px;height:30px;display:grid;place-items:center;font-size:14px;color:#d6e2ff;border-radius:var(--radio);transition:var(--t)}
.tb-social a:hover{background:rgba(255,255,255,.15);color:#fff}

/* ===== Header ===== */
header{background:#fff;border-bottom:1px solid var(--linea)}
.logo-mark{height:52px;width:auto;display:block}
.logo-pie{height:46px;background:#fff;padding:3px;border-radius:var(--radio)}
.logo-name{font-family:var(--f-tit);font-size:19px;color:var(--azul);line-height:1.05;display:block;font-weight:700}
.logo-sub{font-style:normal;font-size:10.5px;color:var(--muted);text-transform:uppercase;letter-spacing:2px}

/* Buscador */
.buscador{align-items:center;background:var(--gris);border:1px solid var(--linea);border-radius:var(--radio);padding:9px 14px;min-width:300px;transition:var(--t)}
.buscador:focus-within{border-color:var(--azul)}
.buscador i{color:var(--muted)}
.buscador input{font-size:14px}
.buscador input::placeholder{color:#97a1af}

.btn-wa{background:var(--azul);color:#fff;font-weight:600;font-size:13px;border-radius:var(--radio);padding:11px 18px;transition:var(--t)}
.btn-wa:hover{background:var(--azul-osc);color:#fff}

/* ===== Navbar ===== */
.navbar-muni{background:var(--azul);padding:0}
.navbar-muni .nav-link{color:#eaf1ff;font-family:var(--f-tit);font-weight:500;font-size:14px;letter-spacing:.2px;
  padding:16px 18px;transition:var(--t);border-bottom:3px solid transparent}
.navbar-muni .nav-link:hover{color:#fff;background:rgba(255,255,255,.08);border-bottom-color:var(--acento-claro)}
.navbar-muni .nav-link.active{color:#fff;border-bottom-color:var(--acento-claro);background:rgba(255,255,255,.10)}
.navbar-muni .nav-item.dropdown{position:relative}
.navbar-muni .dropdown-menu{position:absolute;top:100%;left:0;display:none;min-width:210px;border:1px solid var(--linea);border-top:3px solid var(--oro);
  border-radius:0 0 var(--radio) var(--radio);box-shadow:var(--sombra-h);padding:6px 0;margin-top:0}
.navbar-muni .dropdown-menu.show{display:block}
.navbar-muni .dropdown-item{font-size:14px;padding:9px 18px;color:var(--texto);transition:var(--t)}
.navbar-muni .dropdown-item:hover{background:var(--azul-claro);color:var(--azul)}

/* Etiqueta "administrable" */
.badge-adm{display:inline-flex;align-items:center;font-size:11px;background:rgba(255,255,255,.14);color:#fff;
  font-weight:600;border-radius:var(--radio);padding:5px 11px;border:1px solid rgba(255,255,255,.25)}

/* ===== Hero (azul fuerte) ===== */
.hero{position:relative;color:#fff;overflow:hidden;padding:52px 0 30px;
  background:linear-gradient(120deg,var(--azul) 0%,var(--azul-osc) 100%)}
.hero::after{content:"";position:absolute;right:-120px;top:-120px;width:420px;height:420px;border-radius:50%;
  background:radial-gradient(circle,rgba(245,179,1,.28),transparent 68%)}
.hero .container{position:relative;z-index:2}
.hero-title{font-size:46px;font-weight:800;line-height:1.08;margin:.2em 0}
.hero-title span{color:var(--acento-claro);border-bottom:4px solid var(--acento-claro);padding-bottom:2px}
.hero-text{font-size:16.5px;color:#d6e2ff;max-width:540px}
.btn-amar{background:var(--oro);color:var(--azul);font-weight:700;border-radius:var(--radio);padding:12px 24px;font-family:var(--f-tit);font-size:14px;transition:var(--t)}
.btn-amar:hover{background:var(--oro-osc);color:var(--azul)}
.hero .btn-outline-light{border-radius:var(--radio);font-weight:600;font-family:var(--f-tit);font-size:14px;--bs-btn-border-width:1px}
.hero-media{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);border-radius:var(--radio);
  aspect-ratio:16/10;display:grid;place-items:center;color:#cddcff;padding:20px}
.hero-media .play{width:62px;height:62px;border-radius:50%;background:#fff;color:var(--azul);
  display:grid;place-items:center;font-size:30px;margin:0 auto 12px}

/* ===== Títulos de sección ===== */
.s-title{display:flex;align-items:center;gap:12px;margin-bottom:6px}
.s-title h2{font-size:25px;color:var(--azul);font-weight:700;margin:0}
.s-title .line{height:4px;width:38px;background:var(--oro)}
.s-sub{color:var(--muted);margin-bottom:30px;font-size:15px}

/* ===== Accesos ===== */
.mosaico{display:flex;flex-direction:column;align-items:center;text-align:center;background:#fff;border:1px solid var(--linea);
  border-radius:var(--radio);padding:26px 14px;transition:var(--t);height:100%}
.mosaico:hover{border-color:var(--azul);transform:translateY(-2px);box-shadow:var(--sombra-h)}
.mosaico .ic{width:52px;height:52px;border-radius:var(--radio);margin-bottom:14px;display:grid;place-items:center;
  background:var(--azul-claro);color:var(--azul);font-size:24px;transition:var(--t)}
.mosaico:hover .ic{background:var(--azul);color:#fff}
.mosaico b{color:var(--texto);font-size:14px;font-family:var(--f-tit);font-weight:600}
.mosaico small{color:var(--muted);font-size:12.5px}

/* ===== Noticias ===== */
.card-noti{background:#fff;border:1px solid var(--linea);border-radius:var(--radio);overflow:hidden;transition:var(--t);height:100%}
.card-noti:hover{border-color:var(--azul);box-shadow:var(--sombra-h);transform:translateY(-2px)}
.noti-img{height:158px;background:linear-gradient(135deg,var(--azul-claro),#dbe6fb);position:relative;display:grid;place-items:center;color:#a9beea;font-size:34px;border-bottom:1px solid var(--linea)}
.noti-cat{position:absolute;left:12px;top:12px;background:var(--azul);color:#fff;font-size:11px;font-weight:600;padding:4px 11px;border-radius:var(--radio)}
.noti-body{padding:20px}
.noti-fecha{color:var(--muted);font-size:12.5px;font-weight:500}
.noti-body h3{margin:8px 0;font-size:17.5px;color:var(--azul);line-height:1.3}
.noti-body p{color:var(--muted);font-size:14px;margin-bottom:14px}
.ver{color:var(--azul);font-weight:600;font-size:13.5px;font-family:var(--f-tit);transition:var(--t)}
.ver:hover{color:var(--oro-osc)}

/* ===== Cultura ===== */
.cul-head{background:linear-gradient(120deg,var(--azul),var(--azul-osc));border-radius:var(--radio);color:#fff;padding:40px;position:relative;overflow:hidden;margin-bottom:30px;border-left:5px solid var(--acento-claro)}
.cul-head h2{font-size:29px;font-weight:800;margin:10px 0 8px}
.cul-head p{color:#d6e2ff;max-width:660px;margin:0}
.card-cul{display:block;background:#fff;border:1px solid var(--linea);border-radius:var(--radio);padding:26px;transition:var(--t);height:100%}
.card-cul:hover{border-color:var(--azul);box-shadow:var(--sombra-h);transform:translateY(-2px)}
.cul-ic{width:54px;height:54px;border-radius:var(--radio);display:grid;place-items:center;background:var(--azul-claro);color:var(--azul);font-size:26px;margin-bottom:16px;transition:var(--t)}
.card-cul:hover .cul-ic{background:var(--azul);color:#fff}
.card-cul h3{font-size:18px;color:var(--azul);margin:0 0 8px}
.card-cul p{color:var(--muted);font-size:14px;margin-bottom:14px}

/* ===== Emergencias ===== */
.emerg{background:var(--azul-osc)}
.emerg .num{font-family:var(--f-tit);font-size:24px;font-weight:700;color:var(--calido);min-width:52px}
.etel{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);border-radius:var(--radio);padding:15px 16px;
  display:flex;align-items:center;gap:14px;height:100%;transition:var(--t)}
.etel:hover{background:rgba(255,255,255,.12)}
.etel b{display:block;font-size:14px;color:#fff;font-weight:600}
.etel small{color:#a9beea;font-size:12px}

/* ===== Footer ===== */
.footer-muni{background:var(--azul-osc);color:#b6c7ea;padding:54px 0 24px}
.footer-muni h4{color:#fff;font-family:var(--f-tit);font-size:13px;text-transform:uppercase;letter-spacing:1.5px;margin-bottom:16px}
.footer-muni a{color:#b6c7ea;transition:var(--t)}
.footer-muni li{margin-bottom:10px;font-size:14px}
.footer-muni li a:hover{color:#fff}
.foot-social{display:flex;gap:8px}
.foot-social a{width:38px;height:38px;border-radius:var(--radio);background:rgba(255,255,255,.08);display:grid;place-items:center;font-size:16px;transition:var(--t)}
.foot-social a:hover{background:var(--oro);color:var(--azul)}
.app-badge{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);
  border-radius:var(--radio);padding:10px 14px;font-size:13px;color:#fff;transition:var(--t)}
.app-badge:hover{background:rgba(255,255,255,.15)}
.foot-bottom{border-top:1px solid rgba(255,255,255,.12);margin-top:34px;padding-top:20px;text-align:center;font-size:13px;color:#8ba0c9}

/* ===== Banner de página interna ===== */
.pagehead{background:linear-gradient(120deg,var(--azul),var(--azul-osc));color:#fff;padding:44px 0;border-bottom:4px solid var(--acento-claro)}
.pagehead .crumb{font-size:13px;color:#cdd9f5;margin-bottom:10px}
.pagehead .crumb a{color:#cdd9f5}
.pagehead .crumb a:hover{color:#fff}
.pagehead .crumb i{font-size:10px;margin:0 4px}
.pagehead h1{font-size:33px;font-weight:800;margin:0}
.pagehead p{color:#d6e2ff;margin:8px 0 0;max-width:720px}

/* ===== Bloques internos genéricos ===== */
.panel{background:#fff;border:1px solid var(--linea);border-radius:var(--radio);padding:26px}
.panel h2{font-size:20px;color:var(--azul);margin:0 0 4px}
.ficha{display:flex;align-items:flex-start;gap:14px;background:#fff;border:1px solid var(--linea);border-radius:var(--radio);padding:18px 20px;height:100%;transition:var(--t)}
.ficha:hover{border-color:var(--azul);box-shadow:var(--sombra-h)}
.ficha .fic-ic{width:44px;height:44px;flex:0 0 auto;border-radius:var(--radio);background:var(--azul-claro);color:var(--azul);display:grid;place-items:center;font-size:20px}
.ficha h3{font-size:16px;color:var(--azul);margin:0 0 4px}
.ficha p{margin:0;color:var(--muted);font-size:13.5px;line-height:1.5}
.ficha a{color:var(--azul);font-weight:600}
.evento{display:flex;gap:18px;background:#fff;border:1px solid var(--linea);border-radius:var(--radio);padding:18px 20px;align-items:center;height:100%;transition:var(--t)}
.evento:hover{border-color:var(--azul);box-shadow:var(--sombra-h)}
.evento .fecha{flex:0 0 auto;width:66px;text-align:center;background:var(--azul);color:#fff;border-radius:var(--radio);padding:10px 6px;font-family:var(--f-tit);font-weight:700;line-height:1.1}
.evento .fecha span{display:block;font-size:11px;color:var(--calido);font-weight:600}
.evento h3{font-size:16.5px;color:var(--azul);margin:0 0 3px}
.evento p{margin:0;color:var(--muted);font-size:13.5px}
.evento .lugar{font-size:12.5px;color:var(--azul);font-weight:600}
.btn-wa-line{display:inline-flex;align-items:center;gap:8px;background:#25d366;color:#fff;font-weight:600;font-size:13.5px;
  border-radius:var(--radio);padding:9px 16px;transition:var(--t)}
.btn-wa-line:hover{background:#1eb457;color:#fff}
.tel-list{list-style:none;margin:0;padding:0}
.tel-list li{display:flex;justify-content:space-between;gap:12px;padding:11px 2px;border-bottom:1px solid var(--linea);font-size:14px}
.tel-list li:last-child{border-bottom:0}
.tel-list .n{font-family:var(--f-tit);font-weight:700;color:var(--azul)}
.autoridad{background:#fff;border:1px solid var(--linea);border-radius:var(--radio);padding:24px;text-align:center;height:100%;transition:var(--t)}
.autoridad:hover{border-color:var(--azul);box-shadow:var(--sombra-h)}
.autoridad .av{width:84px;height:84px;border-radius:50%;background:var(--azul-claro);color:var(--azul);display:grid;place-items:center;font-size:38px;margin:0 auto 14px}
.autoridad .cargo{font-family:var(--f-tit);font-weight:700;color:var(--azul);font-size:15px}
.autoridad .nombre{color:var(--muted);font-size:14px}
.form-muni .form-control,.form-muni .form-select{border-radius:var(--radio);border:1px solid var(--linea);padding:11px 14px;font-size:14px}
.form-muni .form-control:focus,.form-muni .form-select:focus{border-color:var(--azul);box-shadow:none}
.form-muni label{font-size:13.5px;font-weight:600;color:var(--texto);margin-bottom:5px}
.redir{background:var(--azul-claro);border:1px solid var(--linea);border-left:4px solid var(--azul);border-radius:var(--radio);padding:26px 28px}
.redir h2{color:var(--azul);font-size:21px;margin:0 0 6px}
.redir p{color:var(--muted);margin:0 0 16px}

/* Buscador dentro del menú móvil */
.buscador-movil{min-width:0;width:100%;margin:6px 0 4px}

/* ===== Responsive ===== */
@media(max-width:991px){
  /* Menú vertical: quitar subrayado inferior, usar realce lateral */
  .navbar-muni{padding:4px 0}
  .navbar-muni .nav-link{padding:11px 8px;border-bottom:0;border-left:3px solid transparent}
  .navbar-muni .nav-link:hover,.navbar-muni .nav-link.active{border-bottom-color:transparent;border-left-color:var(--acento-claro);background:rgba(255,255,255,.10)}
  /* Desplegables integrados al menú azul (no bloque blanco flotante) */
  .navbar-muni .dropdown-menu{position:static !important;transform:none !important;float:none;
    background:rgba(255,255,255,.06);border:0;box-shadow:none;border-radius:0;margin:0;padding:2px 0 2px 12px}
  .navbar-muni .dropdown-item{color:#dfe8fb}
  .navbar-muni .dropdown-item:hover{background:rgba(255,255,255,.12);color:#fff}
  .navbar-toggler{border-color:rgba(255,255,255,.4)}
  #menuTop{display:none}
  #menuTop.show{display:block !important}   /* garantiza que el menú abra en celular */
  .hero{padding:38px 0 22px}
  .hero-title{font-size:32px}
  .pagehead{padding:34px 0}
  .pagehead h1{font-size:26px}
}
@media(max-width:575px){
  .demo-flag{display:none}                 /* la cinta tapaba/ desbordaba en celular */
  /* Evitar desborde de la grilla en pantallas chicas */
  .container{padding-left:14px;padding-right:14px;max-width:100%}
  .row{margin-left:0;margin-right:0}
  .row > [class*="col-"]{padding-left:7px;padding-right:7px}
  .mosaico{padding:20px 10px}
  .mosaico b{font-size:13px}
  .mosaico small{font-size:11.5px;word-break:break-word}
  section{padding-top:2.3rem !important;padding-bottom:2.3rem !important}
  .hero{padding:30px 0 18px}
  .hero-title{font-size:26px}
  .hero-text{font-size:14.5px}
  .cul-head{padding:24px}
  .cul-head h2{font-size:22px}
  .cul-head p{font-size:14px}
  .panel{padding:20px}
  .s-title h2{font-size:20px}
  .pagehead h1{font-size:23px}
  .wa-fijo{width:50px;height:50px;font-size:22px;left:16px;bottom:16px}
  .btn-amar,.hero .btn-outline-light{width:100%;justify-content:center}  /* botones full-width apilados */
  .evento{flex-direction:column;align-items:flex-start;gap:12px}
  .evento .fecha{width:auto;padding:6px 14px}
}

/* ===================================================================
   CONTENIDO REAL (imágenes desde la base: noticias, slider, eventos)
   Las rutas vienen tal cual de la base; acá solo se resuelve la estética.
   =================================================================== */

/* --- Foto dentro de la tarjeta de noticia --- */
.noti-img{display:block;overflow:hidden;padding:0}
.noti-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .35s ease}
.card-noti:hover .noti-img img{transform:scale(1.04)}
.noti-body h3 a{color:inherit;text-decoration:none}
.noti-body h3 a:hover{color:var(--oro-osc)}
.noti-audio{position:absolute;right:12px;top:12px;background:var(--calido);color:#fff;
  width:28px;height:28px;border-radius:var(--radio);display:grid;place-items:center;font-size:14px}

/* --- Slider de la home --- */
.hero-slider{border:1px solid rgba(255,255,255,.2);border-radius:var(--radio);overflow:hidden;background:rgba(255,255,255,.06)}
.hero-slider .carousel-item img{width:100%;height:auto;aspect-ratio:3/1;object-fit:contain;display:block;background:#0e1832}
.hero-slider .carousel-indicators{margin-bottom:.6rem}
.hero-slider .carousel-indicators [data-bs-target]{width:9px;height:9px;border-radius:50%;border:0;background:#fff;opacity:.45}
.hero-slider .carousel-indicators .active{background:var(--acento-claro);opacity:1}

/* --- Filtro de categorías (chips) --- */
.filtro-cats{display:flex;flex-wrap:wrap;gap:8px}
.chip{border:1px solid var(--linea);border-radius:var(--radio);padding:7px 14px;font-size:13px;font-weight:600;
  font-family:var(--f-tit);color:var(--azul);background:#fff;text-decoration:none;transition:var(--t)}
.chip:hover{border-color:var(--azul);background:var(--azul-claro);color:var(--azul)}
.chip.activo{background:var(--azul);border-color:var(--azul);color:#fff}

/* --- Paginado --- */
.paginado{display:flex;flex-wrap:wrap;align-items:center;gap:6px;justify-content:center}
.pg{border:1px solid var(--linea);border-radius:var(--radio);padding:8px 14px;font-size:13.5px;font-weight:600;
  font-family:var(--f-tit);color:var(--azul);background:#fff;text-decoration:none;transition:var(--t)}
.pg:hover{border-color:var(--azul);background:var(--azul-claro)}
.pg.activo{background:var(--azul);border-color:var(--azul);color:#fff}
.pg-info{color:var(--muted);font-size:12.5px;margin-left:10px}

/* --- Detalle de noticia --- */
.noticia-detalle .crumb a{color:var(--azul);text-decoration:none}
.noti-cat.estatica{position:static;display:inline-block;margin-bottom:12px}
.nd-titulo{font-family:var(--f-tit);font-weight:800;font-size:31px;color:var(--azul);line-height:1.2;margin:0 0 10px}
.nd-fecha{color:var(--muted);font-size:13.5px;margin-bottom:22px}
.nd-foto{margin:0 0 24px;border:1px solid var(--linea);border-radius:var(--radio);overflow:hidden}
.nd-foto img{width:100%;display:block}
.nd-audio{background:var(--gris);border:1px solid var(--linea);border-radius:var(--radio);padding:16px;margin-bottom:24px}
.nd-audio b{display:block;font-family:var(--f-tit);font-size:13.5px;color:var(--azul);margin-bottom:9px}
.nd-audio audio{width:100%}
.nd-texto{font-size:16px;line-height:1.75;color:var(--texto)}
.nd-texto img{max-width:100%;height:auto;border-radius:var(--radio);margin:14px 0}
.nd-texto p{margin-bottom:1.05em}
.nd-texto a{color:var(--azul);text-decoration:underline}
.nd-sub{font-family:var(--f-tit);font-size:19px;font-weight:700;color:var(--azul);margin:34px 0 16px}
.nd-galeria img{width:100%;aspect-ratio:4/3;object-fit:cover;border:1px solid var(--linea);border-radius:var(--radio);transition:var(--t)}
.nd-galeria a:hover img{border-color:var(--azul);box-shadow:var(--sombra-h)}
.nd-rel{display:flex;gap:12px;align-items:center;text-decoration:none;border:1px solid var(--linea);
  border-radius:var(--radio);padding:9px;background:#fff;transition:var(--t)}
.nd-rel:hover{border-color:var(--azul);box-shadow:var(--sombra)}
.nd-rel img{width:82px;height:62px;object-fit:cover;flex:none;border-radius:var(--radio)}
.nd-rel small{display:block;color:var(--muted);font-size:11.5px}
.nd-rel b{font-family:var(--f-tit);font-size:13.5px;color:var(--azul);line-height:1.3}

/* --- Eventos con foto (Cultura) --- */
.card-evento{background:#fff;border:1px solid var(--linea);border-radius:var(--radio);overflow:hidden;height:100%;
  display:flex;flex-direction:column;transition:var(--t)}
.card-evento:hover{border-color:var(--azul);box-shadow:var(--sombra-h);transform:translateY(-2px)}
.ev-img{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--azul-claro)}
.ev-img img{width:100%;height:100%;object-fit:cover;display:block}
.ev-fecha{position:absolute;left:12px;top:12px;background:var(--azul);color:#fff;text-align:center;
  padding:7px 12px;border-radius:var(--radio);font-family:var(--f-tit);line-height:1.05}
.ev-fecha .d{display:block;font-size:20px;font-weight:800}
.ev-fecha .m{display:block;font-size:10.5px;text-transform:uppercase;letter-spacing:1px;color:var(--calido)}
.ev-body{padding:18px;display:flex;flex-direction:column;gap:8px;flex:1}
.ev-body h3{font-family:var(--f-tit);font-size:16.5px;color:var(--azul);margin:0;line-height:1.32}
.ev-body p{color:var(--muted);font-size:13.5px;margin:0}
.ev-hora{color:var(--muted);font-size:12.5px;font-weight:600}
.ev-body .btn-sub{margin-top:auto;align-self:flex-start;background:var(--oro);color:var(--azul-osc);
  font-family:var(--f-tit);font-weight:700;font-size:13px;padding:8px 15px;border-radius:var(--radio);text-decoration:none}
.ev-body .btn-sub:hover{background:var(--oro-osc)}

/* --- Autoridades / Concejales --- */
.card-persona{background:#fff;border:1px solid var(--linea);border-radius:var(--radio);padding:20px;height:100%;transition:var(--t)}
.card-persona:hover{border-color:var(--azul);box-shadow:var(--sombra)}
.card-persona .rol{font-size:11.5px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:var(--oro-osc)}
.card-persona .nom{font-family:var(--f-tit);font-size:17px;font-weight:700;color:var(--azul);margin:6px 0 4px;line-height:1.3}
.card-persona .dato{color:var(--muted);font-size:13px;margin:0}
.card-persona .bloque{display:inline-block;margin-top:9px;background:var(--azul-claro);color:var(--azul);
  font-size:11.5px;font-weight:600;padding:4px 10px;border-radius:var(--radio)}

@media (max-width:576px){
  .nd-titulo{font-size:23px}
  .nd-texto{font-size:15px}
  .pg{padding:7px 11px;font-size:13px}
}

/* --- Foto real en la ficha de autoridad --- */
.autoridad .av{overflow:hidden}
.autoridad .av img{width:100%;height:100%;object-fit:cover;display:block}

/* --- Tabla de ordenanzas --- */
.tabla-ord{border:1px solid var(--linea);background:#fff;margin:0}
.tabla-ord thead th{background:var(--azul);color:#fff;font-family:var(--f-tit);font-size:12.5px;
  text-transform:uppercase;letter-spacing:.6px;font-weight:600;border:0;padding:12px 14px}
.tabla-ord td{font-size:14px;color:var(--texto);padding:12px 14px;vertical-align:middle}
.tabla-ord tbody tr:hover{background:var(--gris)}

/* ===== Portal de accesos (accesos.php) ===== */
.acc-card{display:flex;gap:15px;align-items:flex-start;background:#fff;border:1px solid var(--linea);
  border-radius:var(--radio);padding:20px;height:100%;text-decoration:none;transition:var(--t)}
.acc-card:hover{border-color:var(--tono,var(--azul));box-shadow:var(--sombra-h);transform:translateY(-2px)}
.acc-card.interno{border-left:4px solid var(--tono,var(--oro))}
.acc-ic{width:48px;height:48px;flex:none;border-radius:var(--radio);display:grid;place-items:center;
  background:var(--tono-suave,var(--azul-claro));color:var(--tono,var(--azul));font-size:22px;transition:var(--t)}
.acc-card:hover .acc-ic{background:var(--tono,var(--azul));color:#fff}
.acc-card h3{font-family:var(--f-tit);font-size:16px;font-weight:700;color:var(--azul);margin:0 0 5px;line-height:1.3;display:flex;align-items:center;gap:7px}
.acc-card h3 .chico{font-size:11px;color:var(--muted);vertical-align:middle}
.acc-card p{color:var(--muted);font-size:13.5px;margin:0;line-height:1.5}
.acc-card code{background:var(--gris);padding:1px 5px;border-radius:var(--radio);font-size:12px;color:var(--azul)}
.acc-quien{display:inline-block;margin-top:9px;background:var(--gris);color:var(--muted);font-size:11.5px;
  font-weight:600;padding:3px 10px;border-radius:var(--radio)}
.acc-redes{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:6px}
.acc-redes a{display:flex;flex-direction:column;align-items:center;gap:7px;background:#fff;border:1px solid var(--linea);
  border-radius:var(--radio);padding:18px 26px;color:var(--azul);text-decoration:none;transition:var(--t);min-width:110px}
.acc-redes a:hover{border-color:var(--tono,var(--azul));background:var(--tono,var(--azul));color:#fff;box-shadow:var(--sombra-h)}
.acc-redes i{font-size:26px}
.acc-redes span{font-family:var(--f-tit);font-size:12.5px;font-weight:600}

/* ===================================================================
   TONOS DE COLOR — accesos rápidos y bloques de cultura
   El azul mar sigue siendo la base del sitio; estos tonos aparecen solo
   en los íconos y en la línea superior de cada tarjeta, para dar vida
   sin romper la identidad institucional.
   =================================================================== */
.mosaico,.card-cul{position:relative;overflow:hidden}
/* Línea de color arriba de cada tarjeta: aparece al pasar el mouse */
.mosaico::before,.card-cul::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;
  background:var(--tono,var(--azul));transform:scaleX(0);transform-origin:left;transition:transform .18s ease}
.mosaico:hover::before,.card-cul:hover::before{transform:scaleX(1)}
.mosaico:hover,.card-cul:hover{border-color:var(--tono,var(--azul))}
/* El ícono toma el color del tono y se invierte al pasar el mouse */
.mosaico .ic,.card-cul .cul-ic{background:var(--tono-suave,var(--azul-claro));color:var(--tono,var(--azul))}
.mosaico:hover .ic,.card-cul:hover .cul-ic{background:var(--tono,var(--azul));color:#fff}

.tono-azul     {--tono:#1a2a56; --tono-suave:#eaedf6}
.tono-verde    {--tono:#1f7a4d; --tono-suave:#e4f2ea}
.tono-turquesa {--tono:#0e7c86; --tono-suave:#e0f1f3}
.tono-celeste  {--tono:#2b6cb0; --tono-suave:#e6eefa}
.tono-violeta  {--tono:#5b4b9a; --tono-suave:#eeebf7}
.tono-naranja  {--tono:#b45309; --tono-suave:#fbeee0}
.tono-bordo    {--tono:#9b2c3f; --tono-suave:#f8e8ea}
.tono-lima     {--tono:#4d7c15; --tono-suave:#eef5e2}
.tono-ocre     {--tono:#8a6d1f; --tono-suave:#f6f1e0}

/* Tarjetas de acceso: línea de color arriba, igual que los mosaicos */
.acc-card{position:relative;overflow:hidden}
.acc-card::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;
  background:var(--tono,var(--azul));transform:scaleX(0);transform-origin:left;transition:transform .18s ease}
.acc-card:hover::before{transform:scaleX(1)}
.acc-card.interno::before{display:none}   /* ya tiene la barra lateral */
/* Etiqueta "PDF" */
.acc-etq{display:inline-block;margin-top:9px;background:var(--tono-suave,var(--azul-claro));
  color:var(--tono,var(--azul));font-size:10.5px;font-weight:800;letter-spacing:.8px;
  padding:3px 9px;border-radius:var(--radio)}
.acc-redes i{color:var(--tono,var(--azul));transition:var(--t)}
.acc-redes a:hover i{color:#fff}

/* ===================================================================
   PAGINADOR ÚNICO (includes/paginador.php)
   El mismo componente y la misma estética en todo el proyecto.
   =================================================================== */
.pgn{display:flex;flex-direction:column;align-items:center;gap:10px;margin-top:34px;padding-top:24px;
  border-top:1px solid var(--linea)}
.pgn-info{margin:0;color:var(--muted);font-size:13.5px}
.pgn-info b{color:var(--texto);font-weight:600}
.pgn-botones{display:flex;flex-wrap:wrap;gap:5px;justify-content:center}
.pgn-b{min-width:38px;height:38px;padding:0 12px;display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--linea);background:#fff;color:var(--azul);border-radius:var(--radio);
  font-family:var(--f-tit);font-weight:600;font-size:13.5px;text-decoration:none;transition:var(--t)}
a.pgn-b:hover{border-color:var(--azul);background:var(--azul-claro);color:var(--azul)}
.pgn-b.act{background:var(--azul);border-color:var(--azul);color:#fff;cursor:default}
.pgn-b.inactivo{color:#b9c2d0;background:var(--gris);cursor:not-allowed}
.pgn-puntos{display:inline-flex;align-items:center;padding:0 4px;color:var(--muted)}
.pgn-pag{margin:0;color:var(--muted);font-size:12.5px}
@media (max-width:576px){
  .pgn-b{min-width:34px;height:34px;padding:0 9px;font-size:12.5px}
}

/* ===== Buscador de ordenanzas ===== */
.buscador-ord{display:flex;flex-wrap:wrap;gap:14px;align-items:flex-end;background:#fff;
  border:1px solid var(--linea);border-radius:var(--radio);padding:18px}
.buscador-ord label{display:flex;flex-direction:column;gap:5px;font-size:11.5px;font-weight:700;
  color:var(--muted);text-transform:uppercase;letter-spacing:.5px;flex:1 1 170px}
.buscador-ord input,.buscador-ord select{border:1px solid var(--linea);border-radius:var(--radio);
  padding:9px 12px;font-family:var(--f-txt);font-size:14px;color:var(--texto);background:#fff}
.buscador-ord input:focus,.buscador-ord select:focus{outline:2px solid var(--azul);outline-offset:-1px}
.buscador-ord .bo-btn{display:flex;gap:8px}
@media (max-width:576px){ .buscador-ord label{flex:1 1 100%} .buscador-ord .bo-btn{width:100%} }

/* ===== Consulta de estado de reclamo ===== */
.consulta-form label{display:block;font-size:11.5px;font-weight:700;color:var(--muted);
  text-transform:uppercase;letter-spacing:.5px;margin-bottom:6px}
.cf-fila{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:8px}
.cf-fila input{flex:1 1 260px;border:1px solid var(--linea);border-radius:var(--radio);padding:12px 14px;
  font-family:var(--f-txt);font-size:15px;text-transform:uppercase}
.cf-fila input:focus{outline:2px solid var(--azul);outline-offset:-1px}
.cr-cab{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;flex-wrap:wrap;
  padding-bottom:20px;border-bottom:1px solid var(--linea);margin-bottom:22px}
.cr-cod{display:inline-block;background:var(--azul-claro);color:var(--azul);font-family:var(--f-tit);
  font-weight:700;font-size:12px;letter-spacing:1px;padding:4px 11px;border-radius:var(--radio);margin-bottom:8px}
.cr-cab h2{font-size:21px;color:var(--azul);margin:0 0 4px}
.estado-grande{font-family:var(--f-tit);font-weight:700;font-size:13px;padding:8px 16px;border-radius:var(--radio)}
.estado-grande.ok{background:#e4f4ec;color:#1c7c4a}
.estado-grande.pend{background:#fdf3dd;color:#9a6400}
.estado-grande.medio{background:#e8eefb;color:#2c6fb5}
.cr-pasos{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:8px}
.cr-paso{flex:1 1 160px;text-align:center;border:1px solid var(--linea);border-radius:var(--radio);padding:16px 10px;
  background:var(--gris)}
.cr-paso .pico{width:42px;height:42px;margin:0 auto 9px;border-radius:50%;display:grid;place-items:center;
  background:#fff;border:1px solid var(--linea);color:#b9c2d0;font-size:18px}
.cr-paso b{display:block;font-family:var(--f-tit);font-size:13.5px;color:var(--muted)}
.cr-paso small{color:var(--muted);font-size:12px}
.cr-paso.hecho{background:#fff;border-color:var(--azul)}
.cr-paso.hecho .pico{background:var(--azul);border-color:var(--azul);color:#fff}
.cr-paso.hecho b{color:var(--azul)}
.cr-sub{font-family:var(--f-tit);font-size:13px;font-weight:700;color:var(--azul);text-transform:uppercase;
  letter-spacing:.7px;margin:26px 0 10px}
.cr-texto{background:var(--gris);border:1px solid var(--linea);border-radius:var(--radio);padding:15px;
  font-size:14.5px;line-height:1.65}
.cr-texto.respuesta{background:#eaf3ff;border-color:#c9dcf7}

/* ===== Buscador grande ===== */
.buscador-grande{display:flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--linea);
  border-radius:var(--radio);padding:10px 16px}
.buscador-grande i{color:var(--muted);font-size:18px}
.buscador-grande input{flex:1;border:0;outline:0;font-family:var(--f-txt);font-size:16px;padding:8px 0}

/* ===== Galería del Concejo (fotos guardadas en la base) ===== */
.foto-hcm{display:block;position:relative;border:1px solid var(--linea);border-radius:var(--radio);
  overflow:hidden;background:var(--gris);transition:var(--t)}
.foto-hcm:hover{border-color:var(--azul);box-shadow:var(--sombra-h)}
.foto-hcm img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block}
.foto-hcm span{position:absolute;left:0;right:0;bottom:0;background:linear-gradient(transparent,rgba(18,29,61,.9));
  color:#fff;font-size:11.5px;font-weight:600;padding:22px 10px 9px;line-height:1.3}

/* ===== Franja del slider institucional =====
   Los banners son 1200x400. El marco respeta esa proporción para que se vean
   completos; `contain` sobre fondo azul asegura que nunca se recorte nada,
   aunque algún banner venga con otra medida. */
.franja-slider{background:var(--azul-osc);padding:0 0 26px}
.franja-slider .hero-slider{border:0;border-radius:var(--radio);overflow:hidden;
  box-shadow:0 12px 34px rgba(0,0,0,.32);background:#0e1832}
.franja-slider .carousel-control-prev,
.franja-slider .carousel-control-next{width:7%;opacity:.65}
.franja-slider .carousel-control-prev:hover,
.franja-slider .carousel-control-next:hover{opacity:1}
.franja-slider .carousel-indicators{margin-bottom:.5rem}
@media (max-width:576px){ .franja-slider{padding-bottom:22px} }

/* ===================================================================
   CABECERA CENTRADA
   El escudo va al centro y el menú también. Los laterales de la
   cabecera ocupan el mismo ancho, así el centro es el centro real
   aunque el buscador y el botón midan distinto.
   =================================================================== */
.cab-fila{display:flex;align-items:center;gap:16px}
.cab-lado{flex:1 1 0;min-width:0;display:flex;align-items:center}
.cab-lado.der{justify-content:flex-end}
.cab-centro{flex:0 0 auto;display:flex;align-items:center;justify-content:center;gap:10px}
/* El logo de gestión ya incluye el nombre, así que va solo y centrado.
   Se le da algo más de alto porque ahora carga también el texto. */
.cab-centro .logo-mark{height:60px}
.cab-fila .buscador{min-width:0;width:100%;max-width:330px}

/* Menú centrado */
.navbar-muni .navbar-nav{margin-left:auto;margin-right:auto}

@media (max-width:991px){
  /* El buscador ya está oculto por Bootstrap, pero el lado izquierdo SIGUE
     ocupando su mitad: si no, el escudo se corre hacia la izquierda. */
  .cab-fila{gap:10px}
}
@media (max-width:575px){
  /* Acá ya no hay botón ni buscador: el escudo se centra por sí solo */
  .cab-fila{flex-wrap:wrap;justify-content:center}
  .cab-lado{flex:0 0 auto}
  .cab-centro{justify-content:center}
}

/* ===================================================================
   CABECERA estilo sitio actual:
   barra azul con el menú centrado + redes · línea dorada ·
   banda blanca con el escudo centrado.
   =================================================================== */
.cab-muni{box-shadow:0 2px 10px rgba(26,42,86,.12)}

/* --- Barra azul con el menú --- */
.navbar-muni .container{position:relative}
.navbar-muni .navbar-collapse{display:flex;align-items:center}
.navbar-muni .navbar-nav{margin-left:auto;margin-right:auto}   /* menú centrado */
.nav-redes{display:flex;gap:4px;align-items:center;position:absolute;right:12px}
.nav-redes a{width:32px;height:32px;display:grid;place-items:center;color:#c9d5ee;
  font-size:15px;border-radius:var(--radio);transition:var(--t)}
.nav-redes a:hover{background:rgba(255,255,255,.14);color:#fff}

/* --- Línea dorada + banda blanca del escudo --- */
.cab-marca{background:#fff;border-top:3px solid var(--oro);border-bottom:1px solid var(--linea);
  transition:max-height .22s ease, opacity .18s ease}
.cab-marca .cab-fila{padding-top:14px;padding-bottom:14px}

/* --- Escudo chico dentro de la barra azul (aparece al hacer scroll) --- */
.logo-mini{display:none;align-items:center;margin-right:10px}
.logo-mini img{height:34px;width:auto;background:#fff;padding:2px;border-radius:var(--radio)}

/* Cabecera compacta: al bajar, la banda blanca se pliega y el escudo
   pasa a la barra azul, para no comerse la pantalla. */
.cab-muni.compacta .cab-marca{max-height:0;opacity:0;overflow:hidden;border-top-width:0;border-bottom-width:0}
.cab-muni.compacta .logo-mini{display:flex}
.cab-muni.compacta .navbar-muni{border-bottom:3px solid var(--oro)}

@media (max-width:991px){
  /* En pantallas chicas el menú es desplegable: nada centrado ni absoluto */
  .navbar-muni .navbar-collapse{display:none;flex-direction:column;align-items:stretch}
  .navbar-muni .navbar-collapse.show{display:flex}
  .navbar-muni .navbar-nav{margin:0}
  .nav-redes{position:static;justify-content:center;padding:10px 0 6px;
    border-top:1px solid rgba(255,255,255,.14);margin-top:8px}
  .logo-mini{display:flex;margin-right:0}
  .cab-muni.compacta .logo-mini{display:flex}
  .navbar-muni .container{justify-content:space-between}
}

/* ===================================================================
   BANDA DE INICIO: slogan + slider en un solo bloque
   El texto ocupa una columna angosta a la izquierda y el banner el resto,
   igual que en el sitio actual. Así no queda azul vacío al costado.
   La tipografía es más chica que en un hero suelto, justamente para que
   el texto entre en la misma altura que el banner (3:1).
   =================================================================== */
.banda-inicio{background:linear-gradient(120deg,var(--azul) 0%,var(--azul-osc) 100%);color:#fff;
  padding:26px 0 30px;position:relative;overflow:hidden}
.banda-inicio::after{content:"";position:absolute;right:-140px;top:-140px;width:420px;height:420px;
  border-radius:50%;background:radial-gradient(circle,rgba(245,179,1,.22),transparent 68%)}
.banda-inicio .container{position:relative;z-index:2}

.ini-grid{display:grid;grid-template-columns:minmax(270px,35%) 1fr;gap:0;align-items:stretch;
  border-radius:var(--radio);overflow:hidden;box-shadow:0 12px 34px rgba(0,0,0,.28)}
.ini-grid.sin-slider{grid-template-columns:1fr}

/* Panel de texto */
.ini-texto{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-right:0;
  padding:18px 20px;display:flex;flex-direction:column;justify-content:center}
.ini-grid.sin-slider .ini-texto{border-right:1px solid rgba(255,255,255,.14)}
.ini-texto .hero-title{font-size:24px;line-height:1.1;margin:.1em 0 .3em}
.ini-texto .hero-text{font-size:12.5px;line-height:1.5;max-width:none;margin-bottom:0}
.ini-texto .badge-adm{align-self:flex-start;font-size:10px;padding:4px 9px}
.ini-botones{display:flex;gap:7px;flex-wrap:wrap;margin-top:13px}
.ini-botones .btn{padding:8px 13px;font-size:12.5px}

/* Columna del banner: se ve entero, nunca recortado */
.ini-slider{display:flex;align-items:center;background:#0e1832}
.ini-slider .hero-slider{width:100%;border:0;border-radius:0;background:#0e1832}
.ini-slider .carousel-item img{width:100%;height:auto;aspect-ratio:3/1;object-fit:contain;display:block}
.ini-slider .carousel-indicators{margin-bottom:.4rem}
.ini-slider .carousel-control-prev,.ini-slider .carousel-control-next{width:8%;opacity:.6}
.ini-slider .carousel-control-prev:hover,.ini-slider .carousel-control-next:hover{opacity:1}

@media (max-width:1199px){
  /* Apilado: primero el texto, después el banner a todo el ancho.
     Se apila antes de los 1200px porque en columnas más angostas el texto
     crece de alto y deja aire al costado del banner. */
  .ini-grid{grid-template-columns:1fr}
  .ini-texto{border-right:1px solid rgba(255,255,255,.14);border-bottom:0}
  .ini-texto .hero-title{font-size:26px}
}
@media (max-width:576px){
  .banda-inicio{padding:18px 0 22px}
  .ini-texto{padding:18px}
  .ini-texto .hero-title{font-size:23px}
  .ini-texto .hero-text{font-size:13px}
  .ini-botones .btn{width:100%;justify-content:center}
}

/* ===== Bloques de contenido editable ===== */
.texto-editable{font-size:15.5px;line-height:1.75;color:var(--texto)}
.texto-editable p{margin-bottom:1.05em}
.texto-editable p:last-child{margin-bottom:0}
.img-editable{width:100%;height:auto;border:1px solid var(--linea);border-radius:var(--radio);display:block}

/* ===== Botón "Editar" sobre el propio sitio =====
   Sólo lo ve un administrador con la sesión abierta (ver boton_editar()). */
.btn-editar{display:inline-flex;align-items:center;gap:7px;margin-bottom:12px;
  background:rgba(255,255,255,.14);color:#fff;border:1px solid rgba(255,255,255,.3);
  border-radius:var(--radio);padding:6px 12px;font-family:var(--f-tit);
  font-weight:600;font-size:11.5px;transition:var(--t);text-decoration:none}
.btn-editar:hover{background:var(--oro);border-color:var(--oro);color:var(--azul-osc)}
.btn-editar i{font-size:12.5px}
/* Sobre fondo claro (páginas internas) se invierte */
.texto-editable + .btn-editar,
section:not(.banda-inicio):not(.hero) .btn-editar{background:var(--azul-claro);color:var(--azul);
  border-color:var(--linea)}
section:not(.banda-inicio):not(.hero) .btn-editar:hover{background:var(--oro);border-color:var(--oro);
  color:var(--azul-osc)}
/* Aviso que sólo ve el administrador cuando una sección está vacía */
.aviso-vacio{background:#fff8e6;border:1px dashed var(--oro);color:#7a5c00;
  border-radius:var(--radio);padding:12px 15px;font-size:13.5px;margin:12px 0 0}

/* ===================================================================
   EDICIÓN SOBRE LAS TARJETAS
   Todo esto sólo aparece cuando hay un administrador con sesión abierta.
   =================================================================== */

/* Barra flotante abajo */
.ed-barra{position:fixed;left:50%;bottom:20px;transform:translateX(-50%);z-index:1090;
  display:flex;align-items:center;gap:12px;background:var(--azul-osc);color:#fff;
  border-radius:var(--radio);padding:10px 14px;box-shadow:0 10px 30px rgba(0,0,0,.35);
  font-family:var(--f-tit);font-size:13px}
.ed-barra.activa{background:var(--oro);color:var(--azul-osc)}
.ed-texto{font-weight:600}
.ed-barra button{border:0;border-radius:var(--radio);padding:8px 14px;cursor:pointer;
  font-family:var(--f-tit);font-weight:700;font-size:12.5px;
  background:var(--oro);color:var(--azul-osc);transition:var(--t)}
.ed-barra.activa button{background:var(--azul-osc);color:#fff}
.ed-barra button:hover{filter:brightness(1.08)}

/* Tarjeta en modo edición */
.ed-activa{position:relative;outline:2px dashed var(--oro);outline-offset:3px}
.ed-activa [data-campo]{cursor:text;border-radius:var(--radio)}
.ed-activa [data-campo]:hover{outline:1px dashed var(--oro);outline-offset:3px}
.ed-activa [data-campo]:focus{outline:2px solid var(--oro);outline-offset:3px}
/* Confirmación de guardado: un contorno verde, no un fondo. Un fondo
   claro sobre la banda azul dejaba el texto blanco ilegible. */
.ed-ok{outline:2px solid #1c7c4a !important;outline-offset:3px}
.ed-guardando{opacity:.55;pointer-events:none}

/* Foto: al pasar por encima invita a cambiarla */
.ed-foto{cursor:pointer;position:relative}
.ed-foto::after{content:"\F4CA";font-family:"bootstrap-icons";position:absolute;inset:0;
  display:grid;place-items:center;background:rgba(26,42,86,.65);color:#fff;font-size:24px;
  border-radius:50%;opacity:0;transition:var(--t)}
.ed-foto:hover::after{opacity:1}

/* Botón para quitar una tarjeta */
.ed-quitar{position:absolute;top:-10px;right:-10px;width:26px;height:26px;border-radius:50%;
  border:0;background:#b3261e;color:#fff;cursor:pointer;font-size:11px;line-height:1;
  box-shadow:0 2px 6px rgba(0,0,0,.25);z-index:3}
.ed-quitar:hover{background:#8f1e18}

/* Avisos */
.ed-aviso{position:fixed;right:20px;bottom:20px;z-index:1100;background:var(--azul-osc);color:#fff;
  border-radius:var(--radio);padding:12px 16px;font-size:13.5px;box-shadow:0 8px 24px rgba(0,0,0,.3);
  transition:opacity .4s, transform .4s}
.ed-aviso.malo{background:#b3261e}
.ed-aviso.ir{opacity:0;transform:translateY(10px)}

/* Botón "Agregar" de cada zona editable */
.ed-agregar-zona{display:inline-flex;align-items:center;gap:7px;margin-bottom:16px;
  background:var(--oro);color:var(--azul-osc);border:0;border-radius:var(--radio);
  padding:8px 15px;font-family:var(--f-tit);font-weight:700;font-size:12.5px;cursor:pointer;
  transition:var(--t)}
.ed-agregar-zona:hover{background:var(--oro-osc)}
/* Las tarjetas del Concejo necesitan posición para la ✕ */
.card-persona{position:relative}
/* Campos vacíos en modo edición: se ven para poder escribir */
.ed-activa [data-campo]:empty::before{content:"Escribí acá…";color:#b9c2d0;font-style:italic}

/* ============================================================
   MODO ADMINISTRADOR · textos e imágenes editables en la página
   ============================================================ */

/* Un texto editable se marca con un contorno punteado al pasar por encima.
   Sin fondo: un fondo claro sobre la banda azul tapaba el texto blanco.
   Fuera del modo edición no se nota nada. */
ed-txt{display:inline}   /* envoltorio del editor: no cambia nada de la página */
.ed-modo .ed-editable,
.ed-modo .ed-linea{border-radius:var(--radio);cursor:text}
.ed-modo .ed-editable:hover{outline:1px dashed var(--oro);outline-offset:3px}
.ed-modo .ed-editable:focus{outline:2px solid var(--oro);outline-offset:3px}
.ed-modo .ed-linea:hover{outline:1px dashed var(--oro);outline-offset:1px}
.ed-modo .ed-linea:focus{outline:2px solid var(--oro);outline-offset:1px}
.ed-modo .ed-editable:empty::before{content:"Escribí acá el texto…";color:#9aa5b5;font-style:italic}


/* Imagen: se cambia con un clic. */
.ed-modo .ed-imagen{cursor:pointer;position:relative;outline:2px dashed var(--oro);outline-offset:3px}
.ed-modo .ed-imagen:hover{filter:brightness(.82)}

/* Hueco para una sección que todavía no tiene imagen. Sólo lo ve el admin. */
.ed-hueco{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  min-height:190px;padding:24px;cursor:pointer;color:var(--azul);
  border:2px dashed var(--linea);border-radius:var(--radio);background:#fbfcfe;
  font-size:14px;font-weight:600;text-align:center}
.ed-hueco i{font-size:30px;color:var(--oro-osc)}
.ed-hueco:hover{border-color:var(--oro);background:#fffaf0}

/* Atajos de la barra flotante: ir al panel y cerrar sesión.
   El de salir hace falta porque, al pasar del panel al sitio, no había
   forma de desconectarse sin volver atrás. */
.ed-panel,
.ed-salir{display:inline-flex;align-items:center;justify-content:center;gap:6px;
  height:34px;border-radius:var(--radio);background:rgba(255,255,255,.16);
  color:#fff !important;text-decoration:none;font-size:13px;font-weight:600}
.ed-panel{width:34px}
.ed-salir{padding:0 12px}
.ed-barra.activa .ed-panel,
.ed-barra.activa .ed-salir{background:rgba(0,0,0,.14);color:var(--azul-osc) !important}
.ed-panel:hover,
.ed-salir:hover{filter:brightness(1.15)}

/* Campos que están vacíos: se dibujan igual para que el administrador tenga
   dónde hacer clic, pero recién aparecen al encender el modo edición. Así la
   página se ve idéntica a la del vecino mientras no se esté editando. */
/* Se nombra con el contenedor porque .card-persona .bloque ya fija un
   display y le ganaría en especificidad. */
.ed-vacio,
.card-persona .ed-vacio{display:none}
.ed-modo .ed-vacio{display:inline-block}
.ed-modo p.ed-vacio,
.ed-modo div.ed-vacio,
.ed-modo section.ed-vacio{display:block}
.ed-modo .ed-hueco{display:flex}

/* ============================================================
   RESIDUOS · placas de horarios y láminas informativas
   Son imágenes altas y con mucho texto adentro: se muestran
   completas (nunca recortadas) y se pueden abrir en grande.
   ============================================================ */
.res-placa{text-align:center}
.res-placa img,
.res-placa .ed-hueco{display:inline-block;width:100%;max-width:820px;height:auto;
  border:1px solid var(--linea);border-radius:var(--radio);background:#fff}

.res-lamina{border:1px solid var(--linea);border-radius:var(--radio);background:#fff;
  padding:10px;height:100%;display:flex;align-items:center;justify-content:center}
.res-lamina img{width:100%;height:auto;display:block;border-radius:var(--radio)}
.res-lamina a{display:block;width:100%}

/* Logo de gestión en el pie: lo carga el administrador desde la propia
   página. Mientras no haya ninguno, el vecino no ve nada. */
.pie-gestion{max-width:230px;width:100%;height:auto;display:block;margin-top:14px}

/* ============================================================
   EVENTOS · detalle, galería y carga de imágenes y videos
   ============================================================ */

/* Encabezado del detalle: la fecha grande al costado del título */
.ev-det-cab{display:flex;align-items:flex-start;gap:18px;flex-wrap:wrap}
.ev-det-cab h1{font-family:var(--f-tit);color:var(--azul);margin:0 0 6px;font-size:30px;line-height:1.15}
.ev-det-meta{color:var(--muted);font-size:14px;margin:0}
.ev-det-meta .sep{margin:0 8px;opacity:.5}
.ev-fecha.grande{position:static;flex:0 0 auto;min-width:74px;padding:10px 6px}
.ev-fecha.grande .d{font-size:30px;line-height:1}
.ev-fecha.grande .m{font-size:12px}

.ev-det-img{width:100%;height:auto;display:block;border-radius:var(--radio);
  border:1px solid var(--linea);margin-bottom:20px}
.ev-det-texto{font-size:16px;line-height:1.7;color:var(--texto)}
.ev-det-texto p{margin:0 0 14px}

.btn-fb{background:var(--azul);border-color:var(--azul);color:#fff}
.btn-fb:hover{background:var(--azul-osc);color:#fff}

/* Galería de imágenes y videos */
.ev-medio{position:relative;margin:0;border:1px solid var(--linea);border-radius:var(--radio);
  overflow:hidden;background:#fff;height:100%}
.ev-medio img{width:100%;height:210px;object-fit:cover;display:block}
.ev-medio figcaption{padding:9px 12px;font-size:13px;color:var(--muted);border-top:1px solid var(--linea)}

/* El video mantiene su proporción en cualquier pantalla */
.ev-video{position:relative;aspect-ratio:16/9;background:#000}
.ev-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.ev-video-archivo{width:100%;aspect-ratio:16/9;display:block;background:#000}

.ev-quitar{position:absolute;top:8px;right:8px;z-index:2}
.ev-quitar button{width:28px;height:28px;border:0;border-radius:50%;cursor:pointer;
  background:#b3261e;color:#fff;font-size:12px;line-height:1;box-shadow:0 1px 4px rgba(0,0,0,.35)}
.ev-quitar button:hover{background:#8f1e18}

/* Chapita en la tarjeta cuando el evento tiene fotos o videos de más */
.ev-galeria{position:absolute;right:10px;bottom:10px;display:inline-flex;align-items:center;gap:5px;
  background:rgba(18,29,61,.85);color:#fff;font-size:12px;font-weight:600;
  padding:4px 9px;border-radius:var(--radio)}

.ev-acciones{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:10px}
.ev-ver{font-weight:600;font-size:13.5px;color:var(--azul);text-decoration:none;white-space:nowrap}
.ev-ver:hover{color:var(--oro-osc)}
.card-evento h3 a{color:inherit;text-decoration:none}
.card-evento h3 a:hover{color:var(--azul)}

/* Panel para cargar, sólo visible en modo edición */
.ev-cargar{margin-top:20px;padding:18px;border:2px dashed var(--linea);
  border-radius:var(--radio);background:#fbfcfe}
.ev-cargar h3{font-family:var(--f-tit);font-size:16px;color:var(--azul);margin:0 0 14px}
.ev-carg-fila{display:flex;gap:14px;flex-wrap:wrap}
.ev-carg-fila label{display:flex;flex-direction:column;gap:5px;flex:1 1 210px;min-width:0}
.ev-carg-fila span{font-size:12.5px;font-weight:600;color:var(--muted)}
.ev-carg-fila input,.ev-carg-fila select{padding:8px 10px;border:1px solid var(--linea);
  border-radius:var(--radio);font:inherit;font-size:14px;background:#fff;min-width:0}

.ev-aviso{display:inline-flex;align-items:center;padding:9px 14px;border-radius:var(--radio);
  font-size:14px;font-weight:600;margin-bottom:14px}
.ev-aviso.ok{background:#e4f4ec;color:#1c7c4a;border:1px solid #bfe3ce}
.ev-aviso.mal{background:#fbe9e8;color:#b3261e;border:1px solid #f3c9c6}

@media (max-width:600px){
  .ev-det-cab h1{font-size:23px}
  .ev-medio img{height:170px}
}