/* Panel de La Pachanguera 95.1 FM
 * Pragmatic Business Solutions — Johnny Gonzalez <info@pragmaticsolutions.app>
 *
 * Tipografía del sistema a propósito: el panel carga con una CSP estricta que
 * no permite recursos de terceros, y una cabina de radio con internet flojo no
 * debería esperar a una fuente para poder escribir un aviso de tránsito.
 */
:root{
  --azul:#00418B; --azul-vivo:#0078FF; --azul-campo:#00489C;
  --amarillo:#FFF100; --rosa:#FF3C77;
  --tinta:#0B1B33; --suave:#5A6B85; --linea:#D8E2F0;
  --fondo:#F1F5FB; --papel:#fff;
  --ok:#0F7A43; --mal:#C81E1E;
  --sombra:0 1px 2px rgba(11,27,51,.06), 0 8px 24px rgba(11,27,51,.07);
  --radio:12px;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0; font-family:var(--sans); font-size:16px; line-height:1.5;
  color:var(--tinta); background:var(--fondo);
  padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px)}
img{max-width:100%}
[hidden]{display:none!important}
h1,h2,h3{line-height:1.2; margin:0}
button,input,select,textarea{font:inherit; color:inherit}

/* Foco visible en todo. Se edita mucho con el teclado. */
:focus-visible{outline:3px solid var(--azul-vivo); outline-offset:2px; border-radius:4px}

.saltar{position:absolute; left:-9999px; top:0; background:var(--amarillo);
  color:var(--azul); padding:12px 18px; font-weight:700; z-index:99}
.saltar:focus{left:8px; top:8px}

/* ------------------------------------------------------------- botones -- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:42px; padding:9px 16px; border:1px solid var(--linea); border-radius:10px;
  white-space:nowrap;
  background:var(--papel); color:var(--tinta); font-weight:600; cursor:pointer;
  text-decoration:none; transition:background .12s, border-color .12s, transform .06s}
.btn:hover{background:#F7FAFF; border-color:#B9CCE6}
.btn:active{transform:translateY(1px)}
.btn[disabled]{opacity:.55; cursor:not-allowed; transform:none}
.btn-primario{background:var(--azul); border-color:var(--azul); color:#fff}
.btn-primario:hover{background:#003573; border-color:#003573}
.btn-peligro{background:var(--mal); border-color:var(--mal); color:#fff}
.btn-peligro:hover{background:#A81919; border-color:#A81919}
.btn-fantasma{background:transparent; border-color:rgba(255,255,255,.4); color:#fff}
.btn-fantasma:hover{background:rgba(255,255,255,.14); border-color:rgba(255,255,255,.7)}
.btn-chico{min-height:34px; padding:5px 11px; font-size:14px; border-radius:8px}

/* -------------------------------------------------------------- entrar -- */
.entrar{min-height:100svh; display:grid; place-items:center; padding:24px 16px;
  background:linear-gradient(160deg,var(--azul-campo),#00234F 70%)}
.entrar-caja{width:100%; max-width:400px; background:var(--papel); border-radius:18px;
  padding:32px 26px; box-shadow:0 30px 70px rgba(0,16,48,.4); text-align:center}
.entrar-logo{margin:0 auto 12px; display:block; width:88px; height:auto}
.entrar h1{font-size:22px; margin-bottom:6px}
.entrar-sub{margin:0 0 22px; color:var(--suave); font-size:15px}
.entrar .campo{text-align:left}
.entrar .btn{width:100%; margin-top:6px}
.entrar-pie{margin:18px 0 0; font-size:13px; color:var(--suave)}

/* --------------------------------------------------------------- barra -- */
.barra{position:sticky; top:env(safe-area-inset-top,0px); z-index:20;
  display:flex; align-items:center; gap:12px; padding:10px 24px;
  background:var(--azul-campo); color:#fff; box-shadow:0 2px 14px rgba(0,20,60,.28)}
.barra-logo{border-radius:8px; background:#fff; padding:2px}
.barra-titulo{font-size:16px; font-weight:400}
.barra-titulo b{font-weight:700}
.barra-der{margin-left:auto; display:flex; align-items:center; gap:10px}
.barra-yo{font-size:14px; opacity:.9; max-width:24ch; overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap}
.btn-menu{display:none; background:transparent; border:1px solid rgba(255,255,255,.4);
  border-radius:9px; color:#fff; width:40px; height:40px; cursor:pointer}

/* --------------------------------------------------------------- marco -- */
/* El panel es una herramienta de trabajo, no un artículo que se lee: cuanta
   más tabla y más ficha quepan de un vistazo, menos desplazamiento. Se deja
   respirar hasta 1760 px y el menú se ensancha un poco con la pantalla. */
.marco{display:grid; grid-template-columns:clamp(238px,17vw,300px) minmax(0,1fr);
  align-items:start; max-width:1760px; margin:0 auto; gap:24px; padding:22px 24px 64px}
.lateral{position:sticky; top:84px; background:var(--papel); border-radius:var(--radio);
  box-shadow:var(--sombra); padding:10px; overflow:hidden}
.lateral ul{list-style:none; margin:0; padding:0}
.lateral button{display:flex; width:100%; align-items:center; justify-content:space-between;
  gap:8px; padding:10px 12px; border:0; background:transparent; border-radius:9px;
  text-align:left; font-weight:600; cursor:pointer}
.lateral button:hover{background:#EEF4FF}
.lateral button[aria-current="true"]{background:var(--azul); color:#fff}
.lateral .cuenta{font-size:12px; font-weight:700; padding:1px 8px; border-radius:99px;
  background:#E7EEFA; color:var(--suave)}
.lateral button[aria-current="true"] .cuenta{background:rgba(255,255,255,.25); color:#fff}
.lateral hr{border:0; border-top:1px solid var(--linea); margin:8px 4px}
.lateral-pie{margin:10px 6px 4px; font-size:12.5px; color:var(--suave); line-height:1.4}

.principal{min-width:0}
.principal:focus{outline:none}

/* ------------------------------------------------------------- tarjeta -- */
.cab{display:flex; flex-wrap:wrap; align-items:flex-end; gap:12px; margin:0 0 18px}
.cab h1{font-size:26px}
.cab p{margin:4px 0 0; color:var(--suave); font-size:15px; max-width:62ch}
.cab-acciones{margin-left:auto; display:flex; gap:8px; flex-wrap:wrap}

.tarjeta{background:var(--papel); border-radius:var(--radio); box-shadow:var(--sombra);
  padding:20px; margin:0 0 18px}
.tarjeta > h2{font-size:17px; margin:0 0 4px}
.tarjeta > .pista{margin:0 0 16px; color:var(--suave); font-size:14px; max-width:70ch}

.rejilla{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:14px}
.ancho{grid-column:1/-1}

/* -------------------------------------------------------------- campos -- */
.campo{display:block; margin:0 0 14px}
.campo > span{display:block; font-size:13.5px; font-weight:600; margin:0 0 5px}
.campo .ayuda{display:block; font-weight:400; color:var(--suave); font-size:12.5px;
  margin-top:2px}
.campo input[type=text],.campo input[type=email],.campo input[type=password],
.campo input[type=date],.campo input[type=time],.campo input[type=number],
.campo select,.campo textarea{
  width:100%; padding:10px 12px; border:1px solid #C6D4E8; border-radius:10px;
  background:#fff; min-height:42px}
.campo textarea{resize:vertical; min-height:92px; line-height:1.5}
.campo input:hover,.campo select:hover,.campo textarea:hover{border-color:#9EB8DA}
.campo .cuenta-car{float:right; font-weight:400; color:var(--suave); font-size:12px}
.campo-mal input,.campo-mal textarea,.campo-mal select{border-color:var(--mal);
  background:#FFF6F6}

.check{display:flex; align-items:flex-start; gap:9px; margin:0 0 12px; cursor:pointer}
.check input{width:20px; height:20px; margin:1px 0 0; flex:0 0 auto; accent-color:var(--azul)}
.check span{font-size:14.5px; font-weight:600}
.check .ayuda{display:block; font-weight:400; color:var(--suave); font-size:12.5px}

.dias{display:flex; flex-wrap:wrap; gap:6px; margin:0 0 4px}
.dias label{display:inline-flex; align-items:center; gap:6px; padding:7px 11px;
  border:1px solid #C6D4E8; border-radius:99px; cursor:pointer; font-size:14px;
  font-weight:600; background:#fff}
.dias input{accent-color:var(--azul); width:16px; height:16px}
.dias label:has(input:checked){background:var(--azul); border-color:var(--azul); color:#fff}

/* ------------------------------------------------------------- imagen --- */
.img-campo{display:flex; gap:12px; align-items:center; flex-wrap:wrap}
.img-vista{width:96px; height:72px; border-radius:9px; object-fit:cover;
  background:#E7EEFA; border:1px solid var(--linea); flex:0 0 auto}
.img-vacia{display:grid; place-items:center; font-size:12px; color:var(--suave);
  text-align:center; padding:4px}

/* ------------------------------------------------------------- repetir -- */
.item{border:1px solid var(--linea); border-radius:var(--radio); padding:16px;
  margin:0 0 12px; background:#FBFDFF}
.item-cab{display:flex; align-items:center; gap:8px; margin:0 0 12px}
.item-n{font-weight:700; font-size:14px; color:var(--suave); min-width:2.2em}
.item-t{font-weight:700; font-size:15px; overflow:hidden; text-overflow:ellipsis;
  white-space:nowrap}
.item-acc{margin-left:auto; display:flex; gap:6px}
.item-acc button{width:34px; height:34px; padding:0; border-radius:8px; font-size:15px}
.vacio{border:2px dashed var(--linea); border-radius:var(--radio); padding:28px 20px;
  text-align:center; color:var(--suave)}
.vacio p{margin:0 0 12px}
.sub{border-left:3px solid var(--linea); padding-left:12px; margin:0 0 12px}
.sub > h4{margin:0 0 8px; font-size:13.5px; color:var(--suave); text-transform:uppercase;
  letter-spacing:.04em}
.fila-sub{display:grid; grid-template-columns:1fr 1fr auto; gap:8px; margin:0 0 8px;
  align-items:start}
.fila-sub input{width:100%; padding:8px 10px; border:1px solid #C6D4E8; border-radius:8px}
.fila-sub button{width:38px; height:38px; padding:0}

/* ------------------------------------------------------------- avisos --- */
.aviso{padding:11px 14px; border-radius:10px; font-size:14.5px; margin:0 0 14px}
.aviso-mal{background:#FDECEC; color:#8B1212; border:1px solid #F3C2C2}
.aviso-ok{background:#E9F7EF; color:#0B5E34; border:1px solid #BFE5CE}
.aviso-ojo{background:#FFF8DC; color:#6B5300; border:1px solid #F0E0A0}
.aviso-flotante{position:fixed; left:50%; bottom:24px; transform:translateX(-50%);
  z-index:60; background:var(--tinta); color:#fff; padding:13px 20px; border-radius:99px;
  box-shadow:0 14px 40px rgba(0,10,30,.35); font-weight:600; max-width:calc(100vw - 32px);
  text-align:center}
.aviso-flotante.mal{background:var(--mal)}

/* La barra de guardar es su propia tarjeta, no el pie de otra: los márgenes
 * negativos que tenía la hacían 32 px más ancha que el formulario y sacaban
 * una barra de desplazamiento horizontal en celular. */
.pegado{position:sticky; bottom:0; z-index:15; display:flex; align-items:center; gap:12px;
  flex-wrap:wrap; background:var(--papel); border:1px solid var(--linea);
  border-radius:var(--radio); padding:14px 20px; margin:18px 0 0;
  box-shadow:0 -8px 22px rgba(11,27,51,.07)}
.pegado .estado{font-size:14px; color:var(--suave)}

/* -------------------------------------------------------------- tablas -- */
/* position:relative para que cualquier hijo posicionado en absoluto (una
 * etiqueta solo para lectores de pantalla, por ejemplo) quede dentro del área
 * que se recorta, y no ensanche la página entera desde dentro de la tabla. */
.tabla-caja{overflow-x:auto; -webkit-overflow-scrolling:touch; position:relative}
table{width:100%; border-collapse:collapse; font-size:14.5px; min-width:520px}
th,td{text-align:left; padding:10px 12px; border-bottom:1px solid var(--linea);
  vertical-align:middle}
th{font-size:12.5px; text-transform:uppercase; letter-spacing:.04em; color:var(--suave)}
tbody tr:last-child td{border-bottom:0}
.pastilla{display:inline-block; padding:2px 9px; border-radius:99px; font-size:12.5px;
  font-weight:700; background:#E7EEFA; color:var(--azul)}
.pastilla-mal{background:#FDECEC; color:#8B1212}
.pastilla-ok{background:#E9F7EF; color:#0B5E34}

/* -------------------------------------------------------------- diálogo - */
.dlg{border:0; border-radius:16px; padding:24px; max-width:860px; width:calc(100vw - 32px);
  box-shadow:0 40px 90px rgba(0,10,40,.4); color:var(--tinta)}
.dlg::backdrop{background:rgba(3,16,40,.6)}
.dlg-chico{max-width:440px}
.dlg h2{font-size:19px; margin:0 0 12px}
.dlg-x{position:absolute; top:12px; right:12px; margin:0}
.dlg-x button{width:36px; height:36px; border-radius:9px; border:1px solid var(--linea);
  background:#fff; cursor:pointer; font-size:15px}
.dlg-pie{display:flex; gap:10px; justify-content:flex-end; margin-top:18px;
  flex-wrap:wrap}
.subir{display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin:0 0 16px}
.btn-subir{cursor:pointer}
.subir-nota{font-size:13px; color:var(--suave)}
.galeria{display:grid; grid-template-columns:repeat(auto-fill,minmax(132px,1fr)); gap:10px;
  max-height:52vh; overflow-y:auto; padding:2px}
.galeria figure{margin:0; position:relative}
.galeria button.pick{display:block; width:100%; padding:0; border:2px solid var(--linea);
  border-radius:10px; overflow:hidden; background:#fff; cursor:pointer}
.galeria button.pick:hover{border-color:var(--azul-vivo)}
.galeria button.pick[aria-pressed="true"]{border-color:var(--azul); box-shadow:0 0 0 3px #CFE0F7}
.galeria img{display:block; width:100%; aspect-ratio:4/3; object-fit:cover}
.galeria figcaption{font-size:11.5px; color:var(--suave); padding:4px 2px 0;
  word-break:break-all; line-height:1.3}
.galeria .borrar{position:absolute; top:5px; right:5px; width:26px; height:26px; padding:0;
  border-radius:7px; font-size:13px; background:rgba(255,255,255,.94)}

/* ------------------------------------------------------------ pantallas - */
@media (max-width:900px){
  .marco{grid-template-columns:minmax(0,1fr); gap:14px; padding:14px 12px 72px}
  .btn-menu{display:grid; place-items:center}
  /* El menú en celular es un panel flotante, no un bloque al principio de la
     página. Antes era `position:static`, así que al abrirlo aparecía arriba
     del todo: si habías bajado a editar un evento, tocabas el botón y no veías
     nada, porque el menú se había desplegado fuera de la pantalla. Ahora va
     fijo, justo debajo de la barra (el JS le pone el `top` exacto). */
  .lateral{position:static; display:none}
  .lateral.abierto{display:block; position:fixed; left:12px; right:12px;
    z-index:40; max-height:75vh; max-height:75dvh; overflow-y:auto;
    box-shadow:0 26px 64px rgba(0,16,48,.45)}
  .tapa:not([hidden]){position:fixed; inset:0; z-index:35;
    background:rgba(3,16,40,.45)}
  .barra-yo{display:none}
  .fila-sub{grid-template-columns:1fr auto}
}
@media (max-width:560px){
  /* En la barra superior gana la acción, no el rótulo. A 320 px no caben el
     menú, el logo, el título, «Aviso de tráfico», «Ver el sitio» y «Salir»:
     se queda lo que se usa. El sitio se abre desde el propio sitio. */
  .barra-titulo{display:none}
  #ver-sitio{display:none}
  .barra{gap:8px; padding:9px 12px}
  .barra-der{margin-left:8px; gap:8px}
}
@media (max-width:380px){
  .barra-logo{display:none}
}
@media (max-width:520px){
  .cab-acciones{margin-left:0; width:100%}
  .pegado{margin:14px 0 0; padding:12px 16px}
  .tarjeta{padding:16px}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none!important; animation:none!important}
}

/* ---------------------------------------------------- utilidades sueltas --
 * El panel va con una CSP estricta (style-src 'self'), que bloquea cualquier
 * atributo style="". Todo lo que antes era un estilo suelto en el JavaScript
 * vive acá como clase: si no, el navegador lo descarta en silencio y el panel
 * se ve mal sin decir por qué. */
.campo-grupo{border:0; padding:0; margin:0 0 14px; min-width:0}
.campo-leyenda{font-size:13.5px; font-weight:600; margin:0 0 5px; padding:0}
.item-sub{font-weight:400; color:var(--suave)}
.cargando{color:var(--suave)}
.tenue{color:var(--suave)}
.nowrap{white-space:nowrap}
.empuja{margin-left:auto}
.acciones-fila{white-space:nowrap; display:flex; gap:6px; flex-wrap:wrap}
.noscript-aviso{margin:24px}
/* Visible para lectores de pantalla, invisible en pantalla. */
.visualmente-oculto{position:absolute!important; width:1px; height:1px; padding:0;
  margin:-1px; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%);
  white-space:nowrap; border:0}

/* Republicar a mano. Guardar ya publica; esto es para cuando alguien tocó los
 * JSON por SSH o una publicación quedó a medias. */
.lateral-btn{width:calc(100% - 12px); margin:0 6px 6px}
.lateral-pie.mal{color:var(--mal); font-weight:600}

/* ------------------------------------------------------------ ubicación -- */
/* El diálogo del mapa es alto por naturaleza (dos buscadores, resultados, mapa
 * y acciones) y en un celular de 568 px el botón «Usar este punto» quedaba a
 * 860 px del borde: había que adivinar que el diálogo se desplazaba por dentro.
 * Ahora el diálogo nunca pasa del alto de la pantalla, el mapa es la parte que
 * cede, y las acciones van pegadas abajo, siempre a la vista. */
.dlg-mapa{max-width:720px; max-height:100vh; max-height:calc(100dvh - 16px);
  display:flex; flex-direction:column; gap:0}
.dlg-mapa > *{flex:0 0 auto}
.mp-fila{margin:0 0 10px}
.mp-fila .campo{margin:0 0 5px}
.mp-caja{display:flex; gap:8px}
.mp-caja input{flex:1 1 auto; min-width:0; padding:10px 12px; border:1px solid #C6D4E8;
  border-radius:10px; min-height:42px}
.mp-caja .btn{flex:0 0 auto}
.mp-resultados{list-style:none; margin:0 0 10px; padding:0; max-height:150px;
  overflow-y:auto}
.mp-resultados:empty{display:none}
.mp-resultados li{margin:0 0 4px}
.mp-resultados button{display:block; width:100%; text-align:left; padding:9px 12px;
  border:1px solid var(--linea); border-radius:9px; background:#fff; cursor:pointer;
  font-size:14px; line-height:1.35}
.mp-resultados button:hover{background:#EEF4FF; border-color:#B9CCE6}
.mp-resultados b{display:block; font-size:14.5px}
.mp-resultados small{color:var(--suave)}
/* flex-basis auto, no un número: así el mapa vale lo que dice `height` cuando
   hay sitio, y se encoge hasta 150 px cuando la pantalla es corta. */
.mp-mapa{flex:1 1 auto; min-height:150px; height:min(44vh,340px);
  border-radius:12px; border:1px solid var(--linea); overflow:hidden; background:#E7EEFA}
.mp-resultados{flex:0 1 auto}
.mp-estado{margin:8px 0 0; font-size:13.5px; color:var(--suave); min-height:1.2em}
.mp-estado.mal{color:var(--mal); font-weight:600}
/* Sin márgenes negativos. Tirar de un elemento hacia afuera de su contenedor
   para que «sangre» hasta el borde es lo que descuadró la barra de guardar, y
   acá volvía a dejar los botones fuera del diálogo en 320 px. El borde superior
   basta para separarlo del mapa. */
.mp-pie{align-items:center; position:sticky; bottom:0; background:var(--papel);
  margin:14px 0 0; padding:14px 0 0; border-top:1px solid var(--linea)}
.mp-coords{font-size:13.5px; color:var(--suave); margin-right:auto;
  font-variant-numeric:tabular-nums}

/* En pantalla chica, las acciones en rejilla explícita.
 *
 * Dos detalles que costaron un rato: `.dlg-pie` trae justify-content:flex-end,
 * y en una rejilla eso hace que lo que no cabe se desborde por la IZQUIERDA —
 * los botones se salían del diálogo por el lado de afuera. Y `1fr` no baja del
 * min-content de su contenido, así que un botón con white-space:nowrap ensancha
 * su columna por encima del ancho disponible. De ahí minmax(0,1fr) y dejar que
 * el texto de estos botones sí pueda partirse en dos líneas. */
@media (max-width:560px){
  .mp-pie{display:grid; justify-content:stretch; gap:8px;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .mp-pie .btn{white-space:normal; line-height:1.2; width:100%}
  .mp-coords{grid-area:1/1/2/-1; margin:0; text-align:center}
  #mp-usar{grid-area:2/1/3/-1}          /* lo principal, ancho completo y arriba */
  #mp-yo{grid-area:3/1/4/2}
  #mp-cancelar{grid-area:3/2/4/3}
  .dlg-mapa .pista{display:none}
  .dlg-mapa h2{font-size:17px}
  .mp-fila .ayuda{display:none}
}

/* El punto dentro del formulario */
.punto{display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  border:1px solid var(--linea); border-radius:10px; padding:10px 12px; background:#FBFDFF}
.punto-txt{font-size:14px; font-variant-numeric:tabular-nums}
.punto-txt b{display:block; font-size:13px; color:var(--suave); font-weight:600}
.punto-vacio{color:var(--suave)}
.punto .btn{margin-left:auto}
.punto-manual{display:flex; gap:8px; margin:8px 0 0; width:100%}
.punto-manual label{flex:1 1 0; min-width:0; font-size:12.5px; color:var(--suave)}
.punto-manual input{width:100%; padding:7px 9px; border:1px solid #C6D4E8;
  border-radius:8px; font-size:14px}

/* Lo mismo que en el sitio: una palabra sin espacios no debe estirar el panel.
   Se hereda, así que con ponerlo en body basta. */
body{overflow-wrap:anywhere}

/* --------------------------------------------------------------- resumen -- */
.fichas{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px}
.ficha{border:1px solid var(--linea); border-radius:12px; padding:14px 16px;
  background:#FBFDFF; min-width:0}
.ficha b{display:block; font-size:clamp(20px,3.2vw,27px); line-height:1.15;
  font-weight:700; letter-spacing:-.01em; overflow-wrap:anywhere}
.ficha span{display:block; margin-top:3px; font-size:13.5px; color:var(--suave);
  font-weight:600}
.ficha em{display:block; margin-top:2px; font-size:12.5px; color:var(--suave);
  font-style:normal}

.grafico{margin:18px 0 0}
.grafico figcaption{font-size:13.5px; font-weight:600; margin:0 0 8px}
.g-svg{display:block; width:100%; height:150px; border-bottom:1px solid var(--linea)}
/* Los rótulos del eje: una rejilla con tantas columnas como barras, para que
   cada uno caiga justo debajo de la suya. Las clases van hasta 31 (un mes). */
.g-ejes{display:grid; grid-auto-flow:column; grid-auto-columns:1fr; margin-top:5px}
/* overflow visible: el rótulo es más ancho que su columna (24 columnas en un
   móvil son 13 px cada una) y recortarlo dejaba «12 a» y «3 pn». Como solo se
   rotula una de cada cuatro, hay sitio de sobra para que se salga de la suya. */
.g-ejes span{font-size:11px; color:var(--suave); text-align:center;
  white-space:nowrap; overflow:visible; min-width:0}
.g-ejes .g-alto{color:var(--tinta); font-weight:700}
.g-nota{margin:6px 0 0; font-size:13px; color:var(--suave)}
@media (max-width:560px){ .g-ejes span{font-size:9.5px} .g-svg{height:120px} }
@media (max-width:560px){
  .fichas{grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:10px}
  .ficha{padding:11px 12px}
  .g-eje{font-size:4.6px}
}

/* Contador de caracteres: discreto hasta que falta poco. */
.cuenta-car{float:right; font-weight:400; color:var(--suave); font-size:12px;
  font-variant-numeric:tabular-nums; margin-left:8px}
.cuenta-car.cerca{color:#B4600A; font-weight:700}

/* ------------------------------------------------- publicidad y redes ---- */
.sub-t{font-size:15px; margin:20px 0 8px}
.nuevo-anuncio{margin:0 0 16px}
.nuevo-anuncio summary{display:inline-flex; list-style:none; cursor:pointer}
.nuevo-anuncio summary::-webkit-details-marker{display:none}
.form-anuncio{border:1px solid var(--linea); border-radius:12px; padding:16px;
  margin:12px 0 0; background:#FBFDFF}
.canal{border:1px solid var(--linea); border-radius:12px; margin:0 0 10px;
  background:#FBFDFF; overflow:hidden}
.canal > summary{display:flex; align-items:center; gap:10px; padding:13px 16px;
  cursor:pointer; font-weight:700; list-style:none}
.canal > summary::-webkit-details-marker{display:none}
.canal[open] > summary{border-bottom:1px solid var(--linea)}
.canal-n{flex:1 1 auto}
.pasos{margin:14px 16px 0; padding-left:22px; font-size:14px; line-height:1.55;
  color:var(--tinta)}
.pasos li{margin:0 0 7px}
.form-canal{padding:14px 16px 16px}
.dias label.apagado{opacity:.55; cursor:not-allowed}

/* ======================================================= resumen moderno ==
   La portada del panel. Antes eran cuatro cajas iguales una detrás de otra;
   ahora hay jerarquía: primero qué está pasando al aire, después la audiencia,
   y al final lo que se puede ir a editar. Las fichas con destino son botones y
   se nota que lo son. */
.portada-res{display:flex; flex-wrap:wrap; align-items:center; gap:18px;
  padding:20px 22px; margin:0 0 18px; border-radius:16px; color:#fff;
  background:linear-gradient(135deg, #00418B 0%, #0060C8 55%, #0078FF 100%);
  box-shadow:0 14px 34px rgba(0,40,110,.26)}
.portada-fecha{margin:0; font-size:12.5px; text-transform:uppercase;
  letter-spacing:.09em; opacity:.8}
.portada-res h1{font-size:clamp(21px,3vw,28px); margin:3px 0 2px; color:#fff}
.portada-sub{margin:0; font-size:14.5px; opacity:.9; max-width:46ch}
.portada-vivo{margin-left:auto; display:flex; align-items:center; gap:14px;
  background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.26);
  border-radius:13px; padding:11px 16px; backdrop-filter:blur(3px)}
.portada-vivo b{display:block; font-size:15px; line-height:1.25; max-width:22ch;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.portada-vivo span{display:block; font-size:12px; opacity:.85}
.vivo-punto{width:10px; height:10px; border-radius:50%; background:#FFF100;
  box-shadow:0 0 0 0 rgba(255,241,0,.7); animation:latido 2s infinite}
@keyframes latido{70%{box-shadow:0 0 0 9px rgba(255,241,0,0)}
                  100%{box-shadow:0 0 0 0 rgba(255,241,0,0)}}
.vivo-n{padding-left:14px; border-left:1px solid rgba(255,255,255,.28); text-align:center}
.vivo-n b{font-size:22px; font-variant-numeric:tabular-nums}

.rejilla-res{display:grid; grid-template-columns:1.55fr 1fr; gap:18px; align-items:start}
/* Con pantalla ancha, la audiencia y el ranking no tienen por qué estirarse:
   se le da una tercera columna a lo que hay publicado. */
@media (min-width:1500px){
  .rejilla-res{grid-template-columns:1.5fr 1fr}
  .fichas{grid-template-columns:repeat(auto-fit,minmax(168px,1fr))}
}
.tarjeta-cab{display:flex; align-items:baseline; gap:10px; margin:0 0 14px;
  flex-wrap:wrap}
.tarjeta-cab h2{margin:0}
.tarjeta-cab .pista{margin:0; margin-left:auto; font-size:12.5px}

.ficha-ir{display:block; width:100%; text-align:left; cursor:pointer; position:relative;
  font:inherit; color:inherit; transition:transform .1s, box-shadow .12s, border-color .12s}
.ficha-ir:hover{transform:translateY(-2px); border-color:#9EB8DA;
  box-shadow:0 8px 20px rgba(11,27,51,.1)}
.ficha-ir:active{transform:none}
.ficha-flecha{position:absolute; top:12px; right:12px; color:var(--suave); opacity:0;
  transition:opacity .12s, transform .12s}
.ficha-ir:hover .ficha-flecha, .ficha-ir:focus-visible .ficha-flecha{opacity:1;
  transform:translateX(2px)}
.ficha-destacada{background:linear-gradient(140deg,#EAF3FF,#FBFDFF);
  border-color:#BFD7F5}
.ficha-destacada b{color:var(--azul)}
.ficha-ojo{background:#FFFBEA; border-color:#F0E0A0}

.ranking{list-style:none; margin:0; padding:0}
.ranking li{display:flex; align-items:center; gap:12px; padding:11px 0;
  border-bottom:1px solid var(--linea)}
.ranking li:last-child{border-bottom:0}
.rank-n{flex:0 0 26px; height:26px; border-radius:50%; display:grid; place-items:center;
  background:var(--azul); color:#fff; font-size:13px; font-weight:700}
.ranking li:first-child .rank-n{background:var(--rosa)}
.rank-t{flex:1 1 auto; min-width:0}
.rank-t b{display:block; font-size:14.5px; overflow:hidden; text-overflow:ellipsis;
  white-space:nowrap}
.rank-t em{font-style:normal; font-size:12.5px; color:var(--suave)}
.rank-v{flex:0 0 auto; text-align:right}
.rank-v b{display:block; font-size:16px; font-variant-numeric:tabular-nums}
.rank-v em{font-style:normal; font-size:11px; color:var(--suave)}

/* --------------------------------------------------------------- buzón --- */
.buzon{list-style:none; margin:0; padding:0}
.msj{border:1px solid var(--linea); border-radius:12px; padding:14px 16px;
  margin:0 0 10px; background:#fff}
.msj-nuevo{border-left:4px solid var(--azul-vivo); background:#F7FBFF}
.msj-cab{display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin:0 0 7px}
.msj-fecha{margin-left:auto; font-size:12.5px; color:var(--suave)}
.msj-txt{margin:0 0 11px; font-size:14.5px; line-height:1.55; white-space:pre-wrap}
.msj-pie{display:flex; gap:7px; flex-wrap:wrap}
.msj-resp{margin:11px 0 0; padding:9px 12px; border-radius:9px; background:#E9F7EF;
  font-size:13.5px; color:#0B5E34}

@media (max-width:980px){ .rejilla-res{grid-template-columns:minmax(0,1fr)} }
@media (max-width:560px){
  .portada-res{padding:16px; gap:12px}
  .portada-vivo{margin-left:0; width:100%; justify-content:space-between}
  .msj-fecha{margin-left:0; width:100%}
}

/* Botón de aviso rápido en la barra. Amarillo de la marca: es la acción que
   más se usa y tiene que encontrarse sin buscar. */
.btn-aviso{margin-left:auto; background:var(--amarillo); border-color:var(--amarillo);
  color:#04306F; font-weight:700}
.btn-aviso:hover{background:#FFF755; border-color:#FFF755}
.barra-der{margin-left:14px}
#dlg-aviso .punto{margin:4px 0 0}
@media (max-width:700px){ .btn-aviso-txt{display:none} .btn-aviso{padding:9px 12px} }

/* Las coordenadas a mano quedan plegadas: el 99 % de las veces se elige en el
   mapa, y dos casillas de números en cada ficha eran mucho ruido. */
.punto-manual-caja{width:100%; margin:8px 0 0}
.punto-manual-caja summary{font-size:12.5px; color:var(--suave); cursor:pointer}
.punto-manual-caja .punto-manual{margin-top:8px}
.campo-leyenda .btn{margin-left:6px; vertical-align:middle}

/* Un parpadeo corto cuando el número cambia: si no, un dato que se actualiza
   solo pasa desapercibido y parece congelado. */
.vivo-n b.cambia{animation:destello .7s ease-out}
@keyframes destello{0%{color:var(--amarillo); transform:scale(1.18)}
                    100%{color:inherit; transform:none}}
@media (prefers-reduced-motion:reduce){ .vivo-n b.cambia{animation:none} }