:root {
    --color-primario: #1d4ed8;
    --color-primario-oscuro: #1e3a8a;
    --color-secundario: #64748b;
    --color-peligro: #dc2626;
    --color-exito: #15803d;
    --color-fondo: #f1f5f9;
    --color-panel: #ffffff;
    --color-borde: #cbd5e1;
    --color-texto: #0f172a;
    --radio: 8px;
    --sombra: 0 1px 3px rgba(15, 23, 42, .18);
}

html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    overflow-wrap: break-word;
    background: var(--color-fondo);
    color: var(--color-texto);
    font-family: "Segoe UI", Roboto, Arial, sans-serif;
    font-size: 15px;
    line-height: 1.45;
}

a { color: var(--color-primario); text-decoration: none; }
a:hover { text-decoration: underline; }
h1 { font-size: 1.35rem; margin: 0 0 .8rem; display: flex; align-items: center; gap: .4rem; }
/* ---------------------------------------------------------- iconografia */
/* Font Awesome esta empaquetado en /src/css/vendor con sus fuentes en
   /src/webfonts: el sistema no depende de ninguna red externa. */
.boton i.fa-solid, button i.fa-solid, .menu-opcion i.fa-solid { font-size: .9em; }
.boton.con-icono i.fa-solid, button.con-icono i.fa-solid { margin-right: .35rem; }
.menu-opcion i.fa-solid {
    width: 1.1rem;
    text-align: center;
    margin-right: .9em;
    opacity: .9;
    font-size: 1.5em;
}
.aviso i.fa-solid { margin-right: .4rem; }
.grilla-derecha { position: relative; display: flex; align-items: center; gap: .35rem; }
.icono-filtro { color: var(--color-secundario); font-size: .85rem; }
table.grilla th.ordenable i.fa-solid { margin-left: .25rem; font-size: .8em; }

/* Botones de accion: discos 3D redondos de solo icono (modelo ".btn-3d" del
   usuario; ver research/readme.md). El texto viaja en title y aria-label.
   Las clases "boton redondo" y "button.redondo" que ya usa TODO el sistema
   (ver Ui.convertirRedondo en ui.js) llevan este mismo estilo, asi que no
   hace falta tocar cada pantalla: la variante de color sale de la clase que
   ya tenia el boton (sin clase = primario azul; .secundario = gris pizarra;
   .peligro = rojo). Tambien se puede usar directo como
   <button class="btn-3d pri"> / "btn-3d bad". El tamano sale de "--d"
   (2em: crece con el font-size del contexto, como los discos anteriores). */
.btn-3d, .boton.redondo, button.redondo, .volver-atras {
    --d: 2em; --s: calc(var(--d) / 30);
    --a: #94a3b8; --b: #475569; --c: #1e293b; --anillo: #0f172a;
    width: var(--d); height: var(--d); min-width: var(--d); max-width: var(--d);
    padding: 0; margin: 0; border: none; border-radius: 50%;
    position: relative; cursor: pointer; flex: 0 0 auto; box-sizing: border-box;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 1rem; line-height: 1; text-decoration: none; color: #fff;
    background: var(--anillo);
    box-shadow: inset calc(var(--s) * 1.3) calc(var(--s) * 1.3) calc(var(--s) * 3) rgba(0,0,0,.8),
                inset calc(var(--s) * -1.3) calc(var(--s) * -1.3) calc(var(--s) * 3) rgba(255,255,255,.4),
                0 calc(var(--s) * 3) calc(var(--s) * 6) rgba(0,0,0,.15);
    transition: all .3s cubic-bezier(.25,.8,.25,1);
}
.btn-3d.pri, .boton.redondo {
    --a: #3b82f6; --b: #1d4ed8; --c: #0b1f5c; --anillo: #0b1f5c;
}
.boton.secundario.redondo, button.redondo:not(.boton), .volver-atras {
    --a: #94a3b8; --b: #475569; --c: #1e293b; --anillo: #0f172a;
}
.btn-3d.bad, .boton.peligro.redondo {
    --a: #e11d48; --b: #9f1239; --c: #6b0000; --anillo: #450a0a;
}
.boton.redondo, .boton.secundario.redondo, .boton.peligro.redondo,
.boton.redondo:hover, .boton.redondo:focus, .boton.secundario.redondo:hover,
.boton.peligro.redondo:hover { background: var(--anillo); color: #fff; }
.btn-3d::before, .boton.redondo::before, button.redondo::before, .volver-atras::before {
    content: ""; position: absolute; inset: 13%; border-radius: 50%; z-index: 1;
    background: linear-gradient(135deg, var(--a) 0%, var(--b) 45%, var(--c) 100%);
    box-shadow: var(--s) var(--s) calc(var(--s) * 2) rgba(0,0,0,.4),
                calc(var(--s) * -1.3) calc(var(--s) * -1.3) calc(var(--s) * 2.6) rgba(255,255,255,.85);
    transition: all .3s cubic-bezier(.25,.8,.25,1);
}
.btn-3d i, .boton.redondo i.fa-solid, button.redondo i.fa-solid, .volver-atras i.fa-solid {
    position: relative; z-index: 2; margin: 0; padding: 0; line-height: 1; display: block;
    font-size: calc(var(--d) * .462); color: #fff;
    filter: drop-shadow(1px 1px 1px rgba(0,0,0,.75)); transition: transform .3s ease;
}
.btn-3d:hover:not(:disabled), .boton.redondo:hover, button.redondo:hover:not(:disabled),
.boton.redondo:focus, button.redondo:focus, .volver-atras:hover {
    transform: scale(.95); text-decoration: none; color: #fff;
    box-shadow: inset calc(var(--s) * 2) calc(var(--s) * 2) calc(var(--s) * 4) rgba(0,0,0,.9),
                inset calc(var(--s) * -.7) calc(var(--s) * -.7) calc(var(--s) * 2) rgba(255,255,255,.2),
                0 calc(var(--s) * 1.3) calc(var(--s) * 2.6) rgba(0,0,0,.1);
}
.btn-3d:hover:not(:disabled)::before, .boton.redondo:hover::before, button.redondo:hover:not(:disabled)::before,
.boton.redondo:focus::before, button.redondo:focus::before, .volver-atras:hover::before {
    box-shadow: inset calc(var(--s) * 1.3) calc(var(--s) * 1.3) calc(var(--s) * 2.6) rgba(0,0,0,.6),
                inset calc(var(--s) * -1) calc(var(--s) * -1) calc(var(--s) * 2) rgba(255,255,255,.5),
                0 0 0 rgba(0,0,0,0);
}
.btn-3d:hover:not(:disabled) i, .boton.redondo:hover i, button.redondo:hover:not(:disabled) i,
.volver-atras:hover i { transform: scale(.95); }
.btn-3d:active:not(:disabled), .boton.redondo:active, button.redondo:active, .volver-atras:active { transform: scale(.92); }
.btn-3d:disabled, button.redondo:disabled { opacity: .4; cursor: default; filter: grayscale(.5); }

/* Chevron de regreso, a la izquierda del titulo: mismo disco 3D (ver arriba). */
.volver-atras { --d: 2rem; font-size: 1rem; }
@media (max-width: 480px) { .volver-atras { --d: 1.8rem; } }
h2 { font-size: 1.1rem; margin: 1.2rem 0 .6rem; }
h3 { font-size: 1rem; margin: .8rem 0 .4rem; }
small { font-size: .8em; color: var(--color-secundario); }

.cabecera {
    /* Fija (no solo "sticky") para que quede SIEMPRE visible al hacer scroll,
       tanto en escritorio como en movil: con "sticky" alcanzaba en la
       mayoria de pantallas, pero cualquier pantalla cuyo contenido use su
       propio scroll interno (en vez de que la pagina entera se desplace)
       rompe el "sticky". Al sacarla del flujo normal, ".cuerpo" compensa
       con un padding-top del mismo alto (ver mas abajo). */
    position: fixed; top: 0; left: 0; right: 0; width: 100%; z-index: 30; max-width: 100%;
    display: flex; align-items: center; gap: .6rem;
    padding: .55rem .8rem;
    background: var(--color-primario); color: #fff; box-shadow: var(--sombra);
    /* CAUSA RAIZ real del corte del boton "Salir" (en escritorio Y en
       movil, en CUALQUIER ancho de pantalla): sin "box-sizing: border-box",
       el navegador usa "content-box" por defecto, asi que "width: 100%" se
       calcula SIN contar el padding horizontal (.8rem a cada lado) y le
       suma ese padding por fuera -- la cabecera terminaba ~24px MAS ANCHA
       que la pantalla, siempre, sin importar el contenido. Ese sobrante de
       24px es justo lo que "overflow: hidden" recortaba del lado derecho,
       que es donde esta el boton "Salir". Con "border-box", el padding
       queda DENTRO del 100%, y la cabecera mide exactamente el ancho de la
       pantalla, ni un pixel mas. */
    box-sizing: border-box;
    /* Red de seguridad: si aun asi algo forzara mas ancho del disponible
       (por ejemplo el <select> de la encuesta activa, ver mas abajo), se
       recorta dentro de la propia cabecera en vez de salirse de la
       pantalla u ocultar el boton de menu/usuario/salir. */
    overflow: hidden;
}
.marca { color: #fff; display: flex; align-items: center; flex: 0 0 auto; line-height: 0; }
.marca i.fa-solid { font-size: 1.5rem; line-height: 1; }
/* "flex: 0 1 20%" (no "0 0 20%"): el 20% es solo el punto de partida, pero
   se le permite ENCOGER (shrink: 1) si la cabecera no tiene sitio para eso
   mas el resto (usuario + boton Salir) -- antes, con shrink: 0, esta caja
   se quedaba fija en 20% del ancho pasara lo que pasara, y era lo que le
   quitaba espacio al boton Salir en ventanas angostas de escritorio. */
.encuesta-activa { display: flex; align-items: center; gap: .35rem; flex: 0 1 20%; max-width: 20%; min-width: 0; }
.encuesta-activa select {
    background: rgba(255, 255, 255, .15); color: #fff; border: 1px solid rgba(255, 255, 255, .45);
    font-size: .8rem; padding: .25rem .35rem; max-width: 100%; min-width: 0;
    /* Un <select> no siempre respeta max-width/min-width en flexbox y puede
       forzar su ancho al de la opcion mas larga (el nombre de la encuesta),
       empujando el resto de la cabecera fuera de la pantalla. Se recorta
       con puntos suspensivos siempre, no solo en movil. */
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.encuesta-activa select option { color: #0f172a; }
.rotulo-activa { font-size: .7rem; color: #dbeafe; text-transform: uppercase; letter-spacing: .02em; flex: 0 0 auto; }
.marca:hover { text-decoration: none; }
/* IMPORTANTE: ".barra-usuario" ya NO usa "flex-shrink: 0". Con esa regla el
   grupo completo (icono + nombre + boton Salir) se negaba a encoger, asi que
   cuando no alcanzaba el espacio, el "overflow: hidden" de ".cabecera"
   recortaba el grupo entero por su borde derecho -- justo donde esta el
   boton Salir -- en vez de dejarlo siempre visible. Ahora ".barra-usuario"
   SI puede encoger como grupo (flex: 1 1 auto; min-width: 0), pero dentro de
   el, quien realmente cede espacio es el nombre de usuario (ver
   ".usuario-nombre" mas abajo, con flex: 1 1 auto y min-width: 0, que se
   trunca con puntos suspensivos), mientras que el icono y el boton Salir se
   marcan flex: 0 0 auto para que NUNCA se encojan ni se corten: lo unico que
   se sacrifica primero es el nombre del usuario, nunca el boton de salir. */
.barra-usuario { display: flex; align-items: center; gap: .5rem; font-size: .8rem; flex: 1 1 auto; min-width: 0; margin-left: auto; justify-content: flex-end; }
.barra-usuario small { color: #dbeafe; }
/* Silueta a la izquierda del usuario y boton Salir redondo, solo icono. */
/* La silueta del usuario usa el mismo tamano que el icono de Salir. */
.icono-usuario { font-size: 1.5rem; margin-right: .3rem; opacity: .95; flex: 0 0 auto; }
/* .75em del tamano base del documento: disco de 2em = 24 px. */
.barra-usuario .boton-salir.redondo {
    font-size: .75rem;
    flex: 0 0 auto;
}
/* El usuario activo va siempre junto al boton Salir, al extremo derecho.
   Es el elemento que CEDE espacio dentro de ".barra-usuario" (flex: 1 1
   auto; min-width: 0) para que el boton Salir, a su derecha, nunca se
   quede sin sitio: cuando no alcanza el ancho, el nombre se trunca con
   puntos suspensivos antes que recortar cualquier otra cosa. */
.usuario-nombre { display: inline-flex; align-items: baseline; gap: .25rem; white-space: nowrap;
                  flex: 1 1 auto; min-width: 0; max-width: 9rem; overflow: hidden; text-overflow: ellipsis; }

.boton-icono {
    background: transparent; border: 0; color: inherit;
    font-size: 1.35rem; cursor: pointer; padding: .1rem .35rem; line-height: 1;
}

.cuerpo { display: flex; min-height: calc(100vh - 48px); width: 100%; max-width: 100%; padding-top: 48px; }

/* "Caja" del menu lateral: es quien se posiciona y se desliza (fija en
   telefono y tableta, pegajosa en escritorio). Contiene el menu con su
   desplazamiento propio (".lateral") y la pestana de colapsar
   (".lateral-pestana"), que por ser HIJA de la caja se mueve siempre junto
   con el menu: ".lateral" tiene overflow-y: auto y recortaria la pestana, por
   eso va en la caja y no dentro de ".lateral". */
:root { --ancho-menu: min(230px, 78vw); }
.lateral-caja {
    position: fixed; top: 48px; left: 0; bottom: 0; width: var(--ancho-menu);
    transform: translateX(-100%); transition: transform .2s ease; z-index: 25;
}
.lateral-caja.abierto { transform: translateX(0); }
.lateral {
    height: 100%; box-sizing: border-box; overflow-y: auto;
    background: #fff; border-right: 1px solid var(--color-borde);
}
/* Pestana de 30 x 100 px pegada al borde derecho del menu (left: 100% de la
   caja): doble clic (o doble toque) o arrastrarla hacia los lados colapsa o
   expande el menu; arrastrarla hacia arriba o abajo solo la mueve a lo largo
   del borde -- sin afectar al menu -- y la posicion se recuerda
   (--pestana-top, ver Ui.enlazarPestanaMenu en ui.js). */
.lateral-pestana {
    position: absolute; top: var(--pestana-top, 0px); left: 100%; width: 30px; height: 100px; z-index: 1;
    display: none; align-items: center; justify-content: center;
    border-radius: 0 12px 12px 0; cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none;
    background: linear-gradient(135deg, #475569 0%, #1e293b 100%); color: #fff;
    box-shadow: 2px 2px 6px rgba(15, 23, 42, .35), inset 1px 1px 2px rgba(255, 255, 255, .35);
    transition: background .2s ease;
}
.lateral-pestana:hover { background: linear-gradient(135deg, #3b82f6 0%, #0b1f5c 100%); }
.lateral-pestana:active { cursor: grabbing; }
.lateral-pestana i { font-size: 1rem; pointer-events: none; transition: transform .2s ease; }
.lateral-caja:not(.abierto) .lateral-pestana i { transform: rotate(180deg); }
/* Solo hay pestana (y reserva de espacio) con sesion iniciada: Ui.pintarMenu
   marca el documento con "con-menu". Sin sesion y en la pagina publica no. */
body.con-menu .lateral-pestana { display: flex; }
.menu { display: flex; flex-direction: column; padding: .6rem; gap: .25rem; }
.menu-opcion {
    padding: .6rem .7rem; border-radius: var(--radio); color: var(--color-texto);
    background-color: #fff; transition: background-color 1s ease, color 1s ease;
}
.menu-opcion:hover { background: #e2e8f0; text-decoration: none; transition-duration: 0s; }
.menu-opcion.activo { background: var(--color-primario); color: #fff; }
/* Ultima opcion del menu (Salir del sistema): separada del resto con un
   borde superior y en el color de peligro, para distinguirla como accion. */
.menu-opcion.menu-salir { margin-top: .5rem; border-top: 1px solid var(--color-borde); color: var(--color-peligro); }
.menu-opcion.menu-salir:hover { background: #fee2e2; }

.contenido { flex: 1 1 auto; min-width: 0; max-width: 100%; padding: .8rem; }

.boton {
    display: inline-block; padding: .5rem .9rem; border: 0; border-radius: var(--radio);
    background: var(--color-primario); color: #fff; cursor: pointer;
    font-size: .9rem; text-align: center;
    transition: background-color .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.boton:hover, .boton:focus { background: #fff; text-decoration: none; color: var(--color-primario); }
.boton.secundario { background: var(--color-secundario); }
.boton.secundario:not(.redondo):hover, .boton.secundario:not(.redondo):focus {
    background: #fff; color: var(--color-secundario);
}
.boton.peligro { background: var(--color-peligro); }
.boton.peligro:not(.redondo):hover, .boton.peligro:not(.redondo):focus {
    background: #fff; color: var(--color-peligro);
}
.boton.pequeno { padding: .3rem .55rem; font-size: .8rem; }
.acciones { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin: .8rem 0; }
.acciones-menu { display: flex; flex-wrap: wrap; flex-direction: row; gap: .75rem; align-items: center; }
/* Discos de la columna acciones de las grillas: mas pequenos que los del
   tablero, con el icono a 1em. */
td.col-acciones { white-space: nowrap; }
td.col-acciones .boton.redondo { font-size: 1rem; margin-right: .25rem; }
td.col-acciones .boton.redondo:last-child { margin-right: 0; }
/* Los discos son siempre circulares: ni el flex ni el relleno de las
   variantes los deforman. */
.boton.redondo, button.redondo {
    width: var(--d); height: var(--d); min-width: var(--d); max-width: var(--d); flex: 0 0 auto;
}
.paginacion .boton.redondo { font-size: 1rem; }
/* Navegacion de reportes y barra de filtro: mismos discos, icono a 1em. */
/* Los discos fuera del panel Acciones del tablero van a 1rem: 32 px con el
   icono a 1em. Los del tablero conservan su tamano mayor. */
/* Los discos del panel Acciones del tablero son los mas grandes. */
#p-acciones .boton.redondo, #p-acciones .boton.secundario.redondo { font-size: 1.5rem; }
.nav-reportes .boton.inhabilitado.redondo { opacity: .45; }
.acciones .boton.redondo, .formulario .boton.redondo { flex: 0 0 auto; }


.acciones-registro { min-height: 3.5rem; padding-right: 0; }
.acciones-registro .boton-grabar {
    position: fixed; right: 1rem; bottom: 1rem; z-index: 45;
    font-size: 2.25em; padding: .625rem 1.125rem;
    box-shadow: 0 4px 12px rgba(15, 23, 42, .28);
}

/* Boton flotante y movible "Registrar respuesta" (rol usuario, solo en el
   tablero - ver Ui.pintarBotonFlotante en ui.js): lleva las mismas clases
   "boton redondo" que el resto de los discos del sistema (ver .boton.redondo
   mas arriba), asi que se ve identico al boton "Guardar registro"
   (.boton-grabar, mismo disco 3D gris con icono, mismo font-size 2.25em) —
   la clase .boton-flotante solo agrega lo propio de ser flotante y
   arrastrable: posicion fija por defecto abajo a la derecha (mismo offset
   que .boton-grabar), que se puede arrastrar a cualquier parte de la
   pantalla y cuya posicion elegida se recuerda en el dispositivo. z-index
   por encima de .boton-grabar para que, en la pantalla de registro, no
   quede tapado.
   OJO: tanto el tamano (font-size) como el mostrar/ocultar (display) van
   por el id (#boton-flotante-registrar), no por las clases .boton-flotante
   / .visible: ".boton.redondo" (dos clases, ver mas arriba) ya trae su
   propio "display: inline-flex" y "font-size: 1rem", y una regla de una
   sola clase como ".boton-flotante { display: none }" pierde SIEMPRE ese
   empate de especificidad, sin importar el orden en la hoja de estilos ni
   si se agrega o no la clase .visible — por eso el boton no se ocultaba de
   verdad en las demas pantallas (quedaba con display: inline-flex de
   .boton.redondo pase lo que pase con .visible). El id, al ser mas
   especifico que cualquier combinacion de clases, siempre se impone. */
.boton-flotante {
    position: fixed; right: 1rem; bottom: 1rem; z-index: 46;
    cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none;
}
#boton-flotante-registrar { display: none; font-size: 2.25em; }
#boton-flotante-registrar.visible { display: inline-flex; }
.boton-flotante:active { cursor: grabbing; }
@media (max-width: 640px) {
    .boton-flotante { right: .7rem; bottom: .7rem; }
}

.formulario { background: var(--color-panel); padding: .8rem; border-radius: var(--radio); box-shadow: var(--sombra); max-width: 100%; }
.formulario.en-linea { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
/* Filtro de los reportes: una sola fila con desplazamiento lateral si no cabe. */
.formulario.en-linea.fila-unica {
    flex-wrap: nowrap; overflow: visible;
    gap: .4rem; padding-bottom: .2rem;
}
.formulario.en-linea.fila-unica > * { flex: 0 0 auto; }
.formulario.en-linea.fila-unica select,
.formulario.en-linea.fila-unica input[type="date"] { width: auto; margin: 0; font-size: .85rem; }
.formulario.en-linea.fila-unica #rg-estado { white-space: nowrap; }

/* La barra deslizante debe verse como tal: barra de desplazamiento siempre
   visible y un degradado en el borde derecho que anuncia que hay mas controles
   (Play e intervalo) a la derecha. */
.barra-filtro {
    position: relative; overflow-x: auto; overflow-y: hidden;
    -webkit-overflow-scrolling: touch; scrollbar-width: thin; scrollbar-color: #94a3b8 #e2e8f0;
}
/* Antes esta clase forzaba una grilla de exactamente 6 columnas (un ancho
   fijo por control): servia mientras el filtro tenia 6 controles, pero en
   cuanto se agregaron sexo/NSE/Otros (9 controles en total) la grilla los
   seguia repartiendo en solo 6 columnas y el resto caia a una segunda fila
   -- justo lo que ".fila-unica" (arriba) existe para evitar. Se quita el
   grid: con .fila-unica alcanza (flex sin ajuste de linea + desplazamiento
   horizontal en .barra-filtro), para cualquier cantidad de controles. */
.estado-reproduccion { display: block; position: sticky; left: 0; width: max-content; }
/* El filtro de "Reportes graficos" (Reportes.htmlFiltro, vistas-graficos.js)
   ya no muestra el chevron derecho que anuncia mas controles deslizables
   -- se quita solo ahi, con esta clase, sin afectar las demas barras
   deslizantes del sistema (Seguimiento, Invitados, Peticiones). */
.barra-filtro.sin-flecha-derecha::after { display: none; }
/* El filtro "Otros" ocupa un 20% del ancho DE LA PANTALLA (no del 20% del
   contenedor de filtros, que puede ser mas angosto que la pantalla por el
   menu lateral o mas ancho por el scroll horizontal de ".barra-filtro"):
   se usa "vw" en vez de "%" para que el limite sea siempre el ancho real
   del viewport, sin importar cuanto midan los demas controles de la fila.
   Aplica tanto al campo "Otros" del filtro comun (#rg-otros) como a los de
   cada set de filtros duplicado del reporte 11 (#rg11-otros-<id>, ver
   Reportes.htmlGrupoFiltro11 en vistas-graficos.js) -- ambos comparten la
   clase .campo-otros. */
.campo-otros { flex: 0 0 20vw; width: 20vw; max-width: 20vw; }
/* Selector de pregunta de los reportes 4 y 8 (ver Reportes.htmlFiltro):
   va en la misma fila unica de filtros, al 30% del ancho. Reutiliza
   .filtro-pregunta (label + select en linea) pero sin el margen superior
   que tenia cuando iba debajo del grafico. */
#rg-pregunta-fila.filtro-pregunta-fila {
    flex: 0 0 30%; width: 30%; margin-top: 0; flex-wrap: nowrap;
}
#rg-pregunta-fila.filtro-pregunta-fila select { flex: 1 1 auto; min-width: 0; }

/* Reporte 11 ("Total de registros por pregunta"): puede tener varios sets
   de filtros independientes, uno debajo del otro (ver Reportes.
   pintarReporte11 en vistas-graficos.js). El signo "+" (solo en el primer
   set) y la "x" para quitar (en los siguientes) van fijos a la izquierda
   de cada barra de filtros deslizable, fuera del area que se desplaza. */
.grupo-filtro-11 {
    display: flex; align-items: center; gap: .5rem; margin-bottom: .5rem;
}
.grupo-filtro-11 > .boton.redondo { flex: 0 0 auto; }
.grupo-filtro-11 > .barra-filtro { flex: 1 1 auto; min-width: 0; }

/* Los graficos de cada set van uno debajo del otro, cada uno ocupando en
   partes iguales la altura total disponible (ver "altoCada" en
   Reportes.pintarReporte11: 420px repartidos entre la cantidad de sets). */
.grupo-grafico-11 + .grupo-grafico-11 {
    margin-top: .9rem; padding-top: .9rem; border-top: 1px solid var(--color-borde);
}
.grupo11-rotulo { font-weight: 600; margin-bottom: .3rem; }

.barra-filtro::after {
    content: '\276F'; position: absolute; top: 0; right: 0; bottom: 0; width: 2.2rem;
    pointer-events: none; border-radius: 0 var(--radio) var(--radio) 0;
    background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,.98) 55%);
    display: flex; align-items: center; justify-content: flex-end;
    padding-right: .15rem; color: var(--color-primario); font-size: 1rem; font-weight: bold;
    opacity: 1; transition: opacity .2s;
}
.barra-filtro::before {
    content: '\276E'; position: absolute; top: 0; left: 0; bottom: 0; width: 2.2rem; z-index: 1;
    pointer-events: none; border-radius: var(--radio) 0 0 var(--radio);
    background: linear-gradient(to left, rgba(255,255,255,0) 0%, rgba(255,255,255,.98) 55%);
    display: flex; align-items: center; padding-left: .15rem;
    color: var(--color-primario); font-size: 1rem; font-weight: bold;
    opacity: 0; transition: opacity .2s;
}
.barra-filtro.desplazada::before { opacity: 1; }
.barra-filtro.sin-desplazamiento::after,
.barra-filtro.al-final::after { opacity: 0; }
.barra-filtro.sin-desplazamiento::before { opacity: 0; }
.barra-filtro { scroll-snap-type: x proximity; }
.formulario.en-linea.fila-unica > * { scroll-snap-align: start; }
/* Barra de scroll un poco mas gruesa y oscura que el "thin" por defecto,
   para que sea evidente que la fila se puede deslizar (antes, en Chrome/
   Edge con "overlay scrollbars" del sistema operativo, quedaba casi
   invisible hasta pasar el mouse por encima). */
.barra-filtro::-webkit-scrollbar { height: 9px; }
.barra-filtro::-webkit-scrollbar-track { background: #e2e8f0; border-radius: 5px; }
.barra-filtro::-webkit-scrollbar-thumb { background: #64748b; border-radius: 5px; }
.barra-filtro::-webkit-scrollbar-thumb:hover { background: #475569; }

@media (max-width: 700px) {
    /* En telefono se compactan los controles para que quepan mas de un vistazo. */
    .formulario.en-linea.fila-unica { gap: .3rem; padding-bottom: .45rem; }
    .formulario.en-linea.fila-unica select,
    .formulario.en-linea.fila-unica input[type="date"] { font-size: .8rem; padding: .35rem .3rem; }
    .formulario.en-linea.fila-unica .boton.pequeno { padding: .35rem .5rem; font-size: .75rem; }
    .formulario.en-linea.fila-unica #rg-estado { font-size: .72rem; }

    /* El menu lateral, en telefono, muestra solo los iconos (sin el texto de
       cada opcion) para ahorrar espacio; el nombre de cada opcion sigue
       disponible en el atributo title (y para lectores de pantalla, en el
       texto del enlace, que no se quita del DOM). */
    :root { --ancho-menu: 3.6rem; }
    .menu-opcion { display: flex; align-items: center; justify-content: center; padding: .6rem .3rem; }
    .menu-opcion i.fa-solid { margin: 0; }
    .menu-opcion-texto { display: none; }

    /* La cabecera completa (incluido el boton "Salir") debe quedar siempre
       dentro del 100% del ancho en telefono. El culpable de que "Salir"
       quedara cortado a la mitad era el selector de encuesta activa
       (#encuesta-activa select): un <select> no siempre respeta
       min-width:0/max-width en flexbox y puede forzar su ancho al de la
       opcion mas larga (el nombre de la encuesta), empujando el resto de
       la cabecera fuera de la pantalla. Ese recorte con puntos
       suspensivos y el "overflow: hidden"/"flex-shrink: 0" de seguridad
       ahora son SIEMPRE activos (ver ".cabecera", ".encuesta-activa
       select" y ".barra-usuario" mas arriba, fuera de este media query),
       tanto en movil como en escritorio. Aqui solo queda lo que es
       especifico de pantallas angostas: un ancho FIJO mas chico para el
       selector (en vez del 20% de escritorio) y ocultar la etiqueta
       "Encuesta activa" para dejarle mas sitio al nombre. */
    .encuesta-activa { flex: 0 1 auto; max-width: 40%; }
    .encuesta-activa select { width: 6.5rem; max-width: 6.5rem; }
    .rotulo-activa { display: none; }

    /* El nombre de usuario tambien se trunca dentro de este MISMO punto de
       quiebre (antes usaba uno propio a 480px, mas angosto que el resto de
       estos ajustes de cabecera a 700px): en un telefono con un ancho de
       pantalla intermedio -- entre 480px y 700px de CSS -- el selector de
       encuesta ya se truncaba pero el nombre de usuario todavia no, y esa
       diferencia era justo lo que le quitaba a "Salir" el espacio que le
       faltaba (por eso se veia cortado a la mitad en vez de verse completo
       o de desaparecer del todo: el nuevo "overflow: hidden" de la
       cabecera recortaba el sobrante justo por la mitad del boton). */
    .usuario-nombre { max-width: 5.5rem; }
    .usuario-nombre small { display: none; }
}
/* Los totales y resumenes van debajo del grafico. */
.resumen-reporte { margin-top: .9rem; }
.resumen-reporte:empty { margin-top: 0; }
.formulario.en-linea input[type="text"] { flex: 1 1 160px; min-width: 0; }
.campo { display: flex; flex-direction: column; margin-bottom: .7rem; }
.campo label { font-size: .8rem; color: var(--color-secundario); margin-bottom: .2rem; }
.encuesta-cabecera-scroll { max-width: 100%; overflow-x: auto; }
.encuesta-cabecera-fila {
    display: grid;
    grid-template-columns: 50% 20% 10% 10%;
    justify-content: space-between;
    min-width: 760px;
    align-items: end;
}
.encuesta-cabecera-fila > .campo { min-width: 0; }
.encuesta-cabecera-fila input,
.encuesta-cabecera-fila select { width: 100%; min-width: 0; box-sizing: border-box; }
input, select, textarea {
    box-sizing: border-box; max-width: 100%; padding: .5rem; border: 1px solid var(--color-borde); border-radius: var(--radio);
    font-size: .95rem; font-family: inherit; background: #fff; color: inherit; width: 100%;
}
textarea { resize: vertical; font-family: Consolas, "Courier New", monospace; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--color-primario); outline-offset: 1px; }
.rejilla-2 { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 .8rem; }
.coordenadas { font-size: .8rem; color: var(--color-secundario); }
.ayuda { font-size: .82rem; color: var(--color-secundario); }

.grilla-barra { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: space-between; align-items: center; margin-bottom: .5rem; }
.grilla-izquierda, .grilla-derecha { display: flex; gap: .5rem; align-items: center; min-width: 0; }
.grilla-derecha { flex: 1 1 160px; }
.grilla-total { font-size: .8rem; color: var(--color-secundario); }
.filtro { min-width: 0; width: 100%; }

.grilla-desplazable {
    overflow: auto; max-height: 65vh; width: 100%; max-width: 100%; -webkit-overflow-scrolling: touch; background: var(--color-panel);
    border: 1px solid var(--color-borde); border-radius: var(--radio); box-shadow: var(--sombra);
}
table.grilla { border-collapse: collapse; width: 100%; min-width: max-content; font-size: .85rem; }
table.grilla th, table.grilla td {
    border-bottom: 1px solid var(--color-borde); padding: .45rem .55rem;
    text-align: left; white-space: nowrap; max-width: 62vw; overflow: hidden; text-overflow: ellipsis;
}
table.grilla thead th {
    position: sticky; top: 0; background: #e2e8f0; z-index: 2; font-size: .78rem; text-transform: lowercase;
}
table.grilla th.ordenable { cursor: pointer; user-select: none; }
table.grilla tbody tr:nth-child(even) { background: #f8fafc; }
td.numero, th.numero { text-align: right; }
.col-acciones { white-space: nowrap; }
table.grilla th.col-acciones, table.grilla td.col-acciones {
    max-width: none; overflow: visible; text-overflow: clip;
}
table.grilla td.col-acciones .boton { margin-bottom: 2px; }
.vacio { color: var(--color-secundario); text-align: center; padding: .8rem; }

.paginacion { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; margin-top: .5rem; }
.pag-items { display: flex; align-items: center; gap: .3rem; font-size: .8rem; color: var(--color-secundario); }
.pag-items input { width: 70px; }
.pag-select { width: auto; min-width: 100px; max-width: 45vw; }

.tablero { display: grid; grid-template-columns: minmax(0, 1fr); gap: .8rem; }
.panel {
    background: var(--color-panel); border-radius: var(--radio); box-shadow: var(--sombra); padding: .8rem; min-width: 0; max-width: 100%; overflow: hidden;
    transition: background-color .4s ease;
}
.panel h2 { margin-top: 0; }
/* Aviso visual de mensaje de chat nuevo (panel "Chat" del tablero, tanto el
   de administrador -- #p-chat -- como el del usuario -- #u-chat --, ver
   Admin.chatPanel()/Usuario.enlazarChat()): mientras llega un mensaje nuevo
   de otra persona y nadie hizo clic todavia sobre el panel, se pinta de un
   rosado suave para llamar la atencion; al hacer clic en cualquier parte
   del panel vuelve a su color blanco/normal (ver el "click" delegado que
   quita esta clase en Usuario.enlazarChat, vistas-usuario.js). */
.panel.chat-nuevo-mensaje { background-color: #fde2e7; }
.tarjetas { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: .7rem; margin: .7rem 0; }
.tarjeta { background: var(--color-panel); border-radius: var(--radio); box-shadow: var(--sombra); padding: .8rem; text-align: center; }
.tarjeta .valor { display: block; font-size: 1.7rem; font-weight: 700; color: var(--color-primario); }
.tarjeta .rotulo { font-size: .78rem; color: var(--color-secundario); }

.etiqueta { padding: .1rem .45rem; border-radius: 999px; font-size: .75rem; background: #e2e8f0; }
.etiqueta.activo { background: #dcfce7; color: var(--color-exito); }
.etiqueta.inactivo { background: #fee2e2; color: var(--color-peligro); }
.etiqueta.pendiente { background: #fef3c7; color: #92400e; }

.calendario { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.dia {
    position: relative; border: 1px solid var(--color-borde); border-radius: 5px;
    min-height: 42px; padding: 2px 4px; cursor: pointer; font-size: .75rem; background: #fff;
}
.dia.con-evento { background: #eeffff; border-color: var(--color-primario); }
.dia .punto {
    position: absolute; right: 3px; bottom: 3px; color: #fff;
    border-radius: 999px; font-size: .65rem; padding: 0 .3rem;
}
/* Color del punto por prioridad (una sola clase por dia, ver calendario() en
   vistas-admin.js): importante > pendiente > normal. */
.dia .punto.importante { background: #ff0000; }
.dia .punto.pendiente { background: #b137a0; }
.dia .punto.normal { background: #0080ff; }
.lista-fechas { list-style: none; padding: 0; margin: 0; max-height: 240px; overflow: auto; }
.lista-fechas li { display: flex; justify-content: space-between; border-bottom: 1px solid var(--color-borde); padding: .25rem 0; }
.lista { padding-left: 1.1rem; }
.lista li { margin-bottom: .4rem; }
.agenda-lista { list-style: none; padding: 0; }
.agenda-recordatorio {
    display: flex; align-items: center; justify-content: space-between; gap: .6rem;
    padding: .45rem 0; border-bottom: 1px solid var(--color-borde);
}
.agenda-recordatorio.importante, .agenda-recordatorio.importante strong { color: var(--color-peligro); }
.agenda-recordatorio.hecho .agenda-contenido { opacity: .6; text-decoration: line-through; }
.agenda-contenido { min-width: 0; flex: 1 1 auto; }
.agenda-contenido strong, .agenda-contenido span { display: block; overflow-wrap: anywhere; }
.agenda-acciones { display: flex; align-items: center; gap: .45rem; flex: 0 0 auto; }
.agenda-acciones label { display: inline-flex; align-items: center; gap: .2rem; cursor: pointer; font-size: .75rem; }
.agenda-acciones input { width: auto; margin: 0; }
.agenda-acciones i { font-size: 1rem; }
.agenda-acciones label:has(input[data-agenda="importante"]:checked) { color: var(--color-peligro); }
.agenda-alta-estados { display: flex; flex-wrap: wrap; gap: 1rem; margin: .35rem 0; }
.agenda-alta-estados label { display: inline-flex; align-items: center; gap: .3rem; cursor: pointer; }
.agenda-alta-estados input { width: auto; margin: 0; }
.agenda-alta-estados label:first-child { color: var(--color-peligro); }

@media (max-width: 560px) {
    .agenda-recordatorio { align-items: flex-start; flex-direction: column; }
    .agenda-acciones { width: 100%; justify-content: flex-end; }
}

.chat { max-height: 240px; overflow-y: auto; display: flex; flex-direction: column; gap: .35rem; }
.chat.grande { max-height: 55vh; background: var(--color-panel); padding: .6rem; border-radius: var(--radio); box-shadow: var(--sombra); }
/* Selector "Enviar a" del chat (solo administrador): reutiliza el mismo
   componente de seleccion multiple (Ui.htmlSelectorMultiple, ver .selector-multiple*
   mas abajo) que los filtros de Seguimiento y de "Reportes graficos".
   Ver Usuario.chat() en vistas-usuario.js. */

/* Utilidad generica para ocultar cualquier elemento con JS (toggle de
   paneles, menus, etc.) sin tener que definir una regla por pantalla. */
.oculto { display: none !important; }
.mensaje { background: #e2e8f0; border-radius: var(--radio); padding: .35rem .5rem; font-size: .82rem; max-width: 85%; overflow-wrap: break-word; }
.mensaje.propio { background: #dbeafe; align-self: flex-end; }
.mensaje .de { display: block; font-weight: 600; font-size: .72rem; color: var(--color-secundario); }
.mensaje .hora { display: block; font-size: .68rem; color: var(--color-secundario); text-align: right; }

.pregunta { border: 1px solid var(--color-borde); border-radius: var(--radio); margin: .6rem 0; padding: .6rem; background: #fff; }
.pregunta legend { font-weight: 600; padding: 0 .3rem; }
.respuestas { list-style: none; margin: 0; padding: 0; }
.respuestas li { display: flex; align-items: center; gap: .45rem; padding: .25rem 0; flex-wrap: wrap; }
.respuestas input[type="radio"], .respuestas input[type="checkbox"] { width: auto; }
.respuestas label { flex: 1; min-width: 120px; }
.respuestas .otros { flex-basis: 100%; }

.archivo-oculto { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.foto-archivos { display: flex; gap: .5rem; align-items: center; position: relative; }
.enlace-encuesta { word-break: break-all; font-size: .8rem; }
.foto-editor { background: var(--color-panel); border-radius: var(--radio); padding: .7rem; box-shadow: var(--sombra); outline: none; }
img, video { max-width: 100%; height: auto; }
.foto-editor canvas { width: 100%; max-width: 320px; border: 1px dashed var(--color-borde); border-radius: var(--radio); touch-action: none; cursor: grab; }
.foto-controles { display: flex; flex-wrap: wrap; gap: .3rem; margin: .5rem 0; }
.foto-archivos { display: flex; flex-direction: row; justify-content: center; align-items: center; gap: .5rem; flex-wrap: nowrap; }
.foto-archivos .foto-principal { font-size: 1rem; padding: .375rem .6875rem; flex: 0 0 auto; }
.foto-ayuda, .foto-estado { font-size: .78rem; color: var(--color-secundario); margin: .3rem 0; }

.ingreso { width: 100%; max-width: 380px; margin: 4vh auto; }
.ingreso .boton i.fa-solid,
.ingreso button i.fa-solid,
.ingreso .menu-opcion i.fa-solid {
    font-size: 1.75em;
    padding-right: .5em;
}
.ingreso #f-clave .acciones { justify-content: flex-end; }
.ingreso #f-clave .boton.redondo {
    --d: 3rem;
    font-size: 1rem;
}
/* Botones redondos mas grandes, solo en la pantalla de ingreso (#/ingreso). */
.ingreso .boton.pequeno.redondo, .ingreso button.pequeno.redondo,
.ingreso .boton.redondo, .ingreso button.redondo {
    --d: 3rem;
    padding: 0;
    box-sizing: border-box;
}

.aviso {
    position: fixed; left: 50%; bottom: -80px; transform: translateX(-50%);
    background: #0f172a; color: #fff; padding: .6rem 1rem; border-radius: var(--radio);
    transition: bottom .25s ease; z-index: 60; max-width: 92vw; font-size: .87rem;
}
.aviso.visible { bottom: 18px; }
.aviso.error { background: var(--color-peligro); }
.aviso.exito { background: var(--color-exito); }
.aviso-linea { padding: .5rem; border-radius: var(--radio); background: #fee2e2; color: var(--color-peligro); }

.cargando { display: none; position: fixed; inset: 0; background: rgba(15, 23, 42, .25); z-index: 55; }
.cargando.visible { display: flex; align-items: center; justify-content: center; }
.rueda {
    width: 42px; height: 42px; border: 4px solid #fff; border-top-color: var(--color-primario);
    border-radius: 50%; animation: girar .8s linear infinite;
}
@keyframes girar { to { transform: rotate(360deg); } }

.modal { display: none; position: fixed; inset: 0; background: rgba(15, 23, 42, .45); z-index: 50; }
.modal.visible { display: flex; align-items: flex-start; justify-content: center; overflow-y: auto; padding: .6rem; }
.modal-caja { background: var(--color-panel); border-radius: var(--radio); width: 100%; max-width: 640px; box-shadow: 0 10px 30px rgba(15,23,42,.3); }
.modal-cabecera { display: flex; align-items: center; justify-content: space-between; padding: .6rem .8rem; border-bottom: 1px solid var(--color-borde); }
.modal-cabecera h2 { margin: 0; font-size: 1rem; }
.modal-cabecera .btn-3d { --d: 2rem; flex: 0 0 auto; }
.modal-cuerpo { padding: .8rem; max-height: 75vh; overflow-y: auto; }
.modal-caja:has(.detalle-encuesta-scroll) { max-width: 640px; }
.modal-caja:has(.detalle-encuesta-scroll) .modal-cabecera { padding: 2px 4px; min-height: 20px; }
.modal-caja:has(.detalle-encuesta-scroll) .modal-cabecera h2 { font-size: 10px; line-height: 1.1; }
.modal-caja:has(.detalle-encuesta-scroll) .modal-cabecera .boton-icono { font-size: 12px; padding: 0 2px; }
.modal-caja:has(.detalle-encuesta-scroll) .modal-cuerpo { padding: 2px; max-height: 80vh; overflow: hidden; }
.modal-caja.modal-interactiva {
    position: fixed; left: 50%; top: .6rem; transform: translateX(-50%);
    display: flex; flex-direction: column; width: min(640px, calc(100vw - 1.2rem));
    min-width: 300px; min-height: 180px; max-width: calc(100vw - .5rem);
    max-height: calc(100vh - .5rem); resize: both; overflow: hidden;
}
.modal-caja.modal-interactiva .modal-cabecera {
    flex: 0 0 auto; cursor: move; touch-action: none; user-select: none;
}
.modal-caja.modal-interactiva .modal-cuerpo { flex: 1 1 auto; min-height: 0; }
.modal-caja.modal-interactiva .detalle-encuesta-scroll { height: 100%; max-height: none; }
.modal-caja.modal-interactiva.modal-seguimiento {
    width: 30vw; height: 30vh; max-width: calc(100vw - .5rem); max-height: calc(100vh - .5rem);
}

@media (max-width: 600px) {
    /* Antes anclaba left+right (ancho fijo, "auto") y solo permitia
       resize:vertical, asi que en el movil el popup de seguimiento
       (.modal-seguimiento) solo se podia agrandar/achicar en alto: el
       ancho quedaba fijo al ancho de pantalla y el asa de resize (esquina
       inferior derecha) no tenia margen para mover el borde derecho.
       Ahora se ancla solo por la izquierda (como en escritorio, pero mas
       cerca del borde) y se deja un ancho inicial explicito, para que
       resize:both permita agrandar o achicar tanto el ancho como el alto
       arrastrando la esquina, igual que en escritorio. */
    .modal-caja.modal-interactiva {
        left: .25rem; right: auto; top: .25rem; transform: none;
        width: calc(100vw - .5rem); min-width: 220px; max-width: calc(100vw - .5rem);
        max-height: calc(100vh - .5rem);
        resize: both;
    }
    .modal-caja.modal-interactiva.modal-seguimiento {
        width: calc(100vw - .5rem); height: 45vh;
    }
}

.filtro-control {
    display: grid; grid-template-rows: auto auto; align-items: start; gap: .18rem;
    min-width: 9rem; margin: 0; font-size: .78rem; white-space: nowrap;
}
.filtro-control > span { display: block; line-height: 1.15; }
.filtro-control select { width: 100%; min-height: 2.35rem; margin: 0; }
.selector-multiple { position: relative; }
.selector-multiple-etiqueta { display: block; }
/* Oculta visualmente un texto sin quitarlo del accesible (lectores de
   pantalla lo siguen leyendo): la usa Ui.htmlSelectorMultiple() cuando se
   pide ocultarEtiqueta, por ejemplo el "Enviar a" del chat, para que el
   selector quede a la misma altura que el campo de texto de al lado. */
.oculto-visual {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.selector-multiple-boton {
    box-sizing: border-box; width: 100%; min-width: 100px; min-height: 2.35rem; padding: .5rem .65rem;
    display: inline-flex; align-items: center; justify-content: space-between; gap: .75rem;
    border: 2px solid #64748b; border-radius: var(--radio);
    background: #e5f0fb; color: var(--color-texto); font-size: .9rem; font-family: inherit;
    cursor: pointer; text-align: left;
}
.selector-multiple-boton:hover { border-color: #94a3b8; background: #dbeafe; color: var(--color-texto); }
.selector-multiple-boton:focus { outline: 2px solid var(--color-primario); outline-offset: 1px; }
.selector-multiple-boton i { margin-left: auto; color: var(--color-texto); }
.selector-multiple-panel {
    position: fixed; z-index: 80; margin-top: 0; min-width: 290px;
    background: #fff; border: 1px solid #64748b; border-radius: 2px;
    box-shadow: 0 6px 14px rgba(15,23,42,.22); padding: 0;
}
.selector-multiple-acciones { display: flex; flex-direction: column; gap: 0; margin: 0; padding: 0; }
.selector-multiple-accion {
    display: flex; align-items: center; gap: .45rem; width: 100%; min-height: 32px; padding: .25rem .45rem;
    border-bottom: 1px solid var(--color-borde); font-weight: 600; text-align: left; cursor: pointer;
    color: var(--color-primario); font-size: .85rem;
}
.selector-multiple-accion:hover { background: #f1f5f9; }
.selector-multiple-accion input { width: auto; margin: 0; accent-color: #1677ff; }
.selector-multiple-lista { max-height: 225px; overflow-y: auto; display: flex; flex-direction: column; gap: 0; }
/* Fila sin marcar: blanco, con la casilla nativa visible; marcada: fondo
   azul, texto blanco y una marca de verificacion en vez de la casilla
   (mismo "modelo" pedido para reutilizar en todas las selecciones
   multiples). */
.selector-multiple-item {
    display: flex; align-items: center; gap: .45rem; min-height: 32px; padding: .2rem .45rem;
    background: #fff; color: var(--color-texto); font-size: .85rem; font-weight: 400; white-space: nowrap;
    cursor: pointer;
}
.selector-multiple-item:hover { background: #f1f5f9; }
.selector-multiple-item input { width: auto; margin: 0; accent-color: #1677ff; }
.selector-multiple-item .selector-multiple-marca { display: none; color: #fff; width: 1em; text-align: center; }
.selector-multiple-item.marcado {
    background: #2676d2; color: #fff; font-weight: 600;
}
.selector-multiple-item.marcado:hover { background: #165eaf; }
.selector-multiple-item.marcado input { display: none; }
.selector-multiple-item.marcado .selector-multiple-marca { display: inline-block; }

.seguimiento-filtro {
    display: grid !important; grid-template-columns: 30fr 30fr 25fr 15fr;
    width: 100%; min-width: 760px; box-sizing: border-box;
    column-gap: .7rem; row-gap: .4rem; align-items: end;
}
.seguimiento-filtro > * { width: 100%; min-width: 0; max-width: none; margin: 0; }
.seguimiento-filtro #rg-usuarios { min-width: 100px; }
.seguimiento-filtro > button {
    width: 100%; min-width: 0; min-height: 2.35rem; margin: 0; align-self: end;
}
.seguimiento-filtro > button.redondo {
    width: 2em; min-width: 2em; max-width: 2em; min-height: 2em;
    justify-self: center;
}

.participaciones-filtro {
    display: grid !important; grid-template-columns: 24fr 17fr 14fr 12fr 12fr 13fr 8fr;
    width: 100%; min-width: 1080px; box-sizing: border-box; align-items: center;
}
.participaciones-filtro > * { width: 100% !important; min-width: 0 !important; max-width: none !important; margin: 0; }
.participaciones-filtro > button { height: 100%; }
.participaciones-filtro > button.redondo {
    width: 2em !important; min-width: 2em !important; max-width: 2em !important;
    height: 2em; justify-self: center;
}

.detalle-encuesta-scroll { max-height: 76vh; overflow: hidden; padding: 0; font-size: 10px; line-height: 1.1; box-sizing: border-box; }
.detalle-encuesta-scroll.con-foto {
    display: grid; grid-template-columns: minmax(0, 70%) minmax(0, 30%); height: 100%;
}
.detalle-encuesta-scroll.sin-foto { height: 100%; overflow-y: auto; }
.detalle-encuesta-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; }
.detalle-encuesta-scroll.con-foto .detalle-encuesta-grid { overflow-y: auto; align-content: start; min-height: 0; }
.detalle-encuesta-campo {
    min-width: 0; padding: 2px 3px; border: 1px solid var(--color-borde);
    border-radius: 0; background: #f8fafc;
}
.detalle-encuesta-campo strong, .detalle-encuesta-campo span { display: block; }
.detalle-encuesta-campo strong { margin: 0; font-size: 10px; line-height: 1.05; color: var(--color-secundario); }
.detalle-encuesta-campo span { overflow-wrap: anywhere; }
.detalle-encuesta-foto { width: 100%; height: 100%; min-width: 0; min-height: 0; margin: 0; overflow: hidden; }
.detalle-encuesta-foto img {
    display: block; width: 100%; height: 100%; object-fit: contain; border-radius: 0;
}

@media (max-width: 560px) {
    .detalle-encuesta-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; }
    .detalle-encuesta-campo { padding: 2px 3px; }
}

.bitacora {
    background: #0f172a; color: #e2e8f0; padding: .7rem; border-radius: var(--radio);
    font-size: .78rem; max-height: 65vh; overflow: auto; white-space: pre-wrap; word-break: break-word;
}

@media (max-width: 480px) {
    body { font-size: 14px; }
    .rotulo-activa { display: none; }
    .contenido { padding: .6rem; }
    h1 { font-size: 1.15rem; }
    .boton { padding: .45rem .7rem; }
    .acciones .boton, .acciones-menu .boton { flex: 1 1 auto; }
    .acciones .boton.redondo, .acciones-menu .boton.redondo { flex: 0 0 auto; }
    table.grilla th, table.grilla td { max-width: 55vw; padding: .4rem .45rem; }
    table.grilla th.col-acciones, table.grilla td.col-acciones { max-width: none; }
    .grilla-desplazable { max-height: 58vh; }
    .paginacion { justify-content: center; }
    .pag-items input { width: 60px; }
}

@media (min-width: 700px) {
    .rejilla-2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .tablero { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .acciones-menu { flex-direction: row; flex-wrap: wrap; }
}

@media (min-width: 1000px) {
    :root { --ancho-menu: 230px; }
    .lateral-caja {
        position: sticky; top: 48px; transform: none; height: calc(100vh - 48px);
        width: 230px; flex: 0 0 230px; transition: flex-basis .2s ease, width .2s ease;
    }
    .lateral { position: absolute; top: 0; left: 0; width: 230px; transition: transform .2s ease; }
    /* Colapsado: la caja se encoge a 0 de ancho (sin dejar hueco) y el menu se
       desliza hacia la izquierda; como la pestana es hija de la caja y esta
       pegada a su borde derecho (left: 100%), acompana al menu y queda como
       unica parte visible, pegada al borde izquierdo. Sirve tanto al boton de
       la cabecera como a la pestana. */
    body.menu-oculto .lateral-caja { flex-basis: 0; width: 0; }
    body.menu-oculto .lateral { transform: translateX(-100%); visibility: hidden; transition: transform .2s ease, visibility 0s .2s; }
    .lateral-caja:not(.abierto) .lateral-pestana i { transform: none; }
    body.menu-oculto .lateral-caja .lateral-pestana i { transform: rotate(180deg); }
    .contenido { padding: 1.2rem 1.6rem; }
}

/* Domingos del calendario, con fondo rojo al 10 %. */
.calendario .dia.domingo { background: rgba(220, 38, 38, .1); }
.calendario .dia.domingo.hoy { background: rgba(220, 38, 38, .18); }
.calendario .dia-rotulo.domingo { color: #b91c1c; }

.pestanas { display: flex; gap: .3rem; margin-bottom: .6rem; }
.pestana {
    flex: 1; padding: .55rem .6rem; border: 1px solid var(--color-borde); background: #fff;
    border-radius: var(--radio); cursor: pointer; font-size: .9rem; color: var(--color-secundario);
}
.pestana.activa { background: var(--color-primario); border-color: var(--color-primario); color: #fff; }
.panel-pestana { margin-top: .4rem; }
.campo-linea { display: flex; align-items: center; gap: .4rem; font-size: .85rem; margin: .4rem 0; }
.campo-linea input { width: auto; }

.patron { display: flex; flex-direction: column; align-items: center; }
.patron-matriz {
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .5rem;
    width: 100%; max-width: min(260px, 80vw); touch-action: none; user-select: none;
}
.patron-punto {
    aspect-ratio: 1 / 1; border: 2px solid var(--color-borde); background: #fff;
    border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center;
    font-size: .85rem; font-weight: 700; color: transparent; padding: 0;
}
.patron-punto.marcado { background: var(--color-primario); border-color: var(--color-primario-oscuro); color: #fff; }
.patron-punto span { pointer-events: none; }
.patron-estado { font-size: .78rem; color: var(--color-secundario); margin: .5rem 0 0; text-align: center; }

.barra-offline {
    display: flex; flex-wrap: wrap; gap: .5rem; align-items: center;
    background: var(--color-panel); border-radius: var(--radio); box-shadow: var(--sombra);
    padding: .5rem .6rem; margin: .6rem 0; font-size: .8rem;
}
.estado-red { padding: .1rem .5rem; border-radius: 999px; font-weight: 600; }
.estado-red.en-linea { background: #dcfce7; color: var(--color-exito); }
.estado-red.sin-linea { background: #fee2e2; color: var(--color-peligro); }

/* Icono compacto (sin texto largo) que avisa "sin conexion" junto al titulo
   del tablero: circulo rojo sobre fondo rosado, igual paleta que .estado-red
   pero sin ocupar una linea de texto entera. */
.icono-sin-conexion {
    display: inline-flex; align-items: center; justify-content: center;
    width: 1.8rem; height: 1.8rem; border-radius: 50%;
    background: #fee2e2; color: var(--color-peligro);
    font-size: 1rem; vertical-align: middle; margin-left: .5rem;
}
.barra-offline .pendientes { flex: 1 1 auto; color: var(--color-secundario); min-width: 0; }

.respuesta-imagen { display: block; flex: 1 1 auto; min-width: 0; }
.respuesta-imagen img {
    max-width: 100%; max-height: 160px; border-radius: var(--radio);
    border: 1px solid var(--color-borde); display: block; background: #fff;
}
.respuestas li:has(.respuesta-imagen) { align-items: flex-start; }

.tablero.graficos { grid-template-columns: minmax(0, 1fr); align-items: start; }
.panel.ancho-completo { grid-column: 1 / -1; }
.grafico-caja { position: relative; width: 100%; min-width: 0; }


.mapa {
    position: relative; width: 100%; height: 380px; overflow: hidden;
    border-radius: var(--radio); border: 1px solid var(--color-borde);
    background: #dfe6ee; cursor: grab; touch-action: none; user-select: none;
}
.mapa.arrastrando { cursor: grabbing; }
.mapa-tiles, .mapa-calor, .mapa-marcas { position: absolute; inset: 0; }
.mapa-tiles img { position: absolute; width: 256px; height: 256px; pointer-events: none; }
.mapa-tiles img.sin-tile { background: #e2e8f0; }
.mapa-calor { pointer-events: none; }
.mapa-marcas { pointer-events: none; }
.mapa-marca { position: absolute; transform: translate(-50%, -50%); text-align: center; }
.mapa-marca.clicable { cursor: pointer; pointer-events: auto; }
/* Marcas "escaladas" en diagonal cuando dos o mas caen en el mismo sitio
   (Mapa.dibujarMarcas, mapa.js): un borde blanco fino y sombra propia para
   que se note que hay varias apiladas, y cada una encima de la anterior
   para poder hacer clic en cualquiera. */
.mapa-marca-escalada { z-index: 1; filter: drop-shadow(0 1px 3px rgba(15, 23, 42, .55)); }
.mapa-marca-escalada .mapa-punto, .mapa-marca-escalada .mapa-icono { outline: 2px solid #fff; outline-offset: 1px; border-radius: 50%; }
.mapa-punto {
    display: block; width: 14px; height: 14px; border-radius: 50%;
    background: var(--marca); border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(15,23,42,.35); margin: 0 auto;
}
.mapa-icono {
    display: block; color: var(--marca); font-size: 1.3rem; text-shadow: 0 0 0 1px #fff, 0 1px 2px rgba(15,23,42,.5);
    -webkit-text-stroke: 3px #fff; paint-order: stroke fill;
}
.mapa-etiqueta {
    display: inline-block; margin-top: 2px; background: rgba(255,255,255,.9);
    border-radius: 4px; padding: 0 .25rem; font-size: .68rem; white-space: nowrap;
}
.mapa-trazo { position: absolute; inset: 0; pointer-events: none; }
.mapa-controles { position: absolute; top: 8px; right: 8px; display: flex; flex-direction: column; gap: 4px; z-index: 5; }
.mapa-controles .boton { width: 32px; }
.mapa-controles .boton.redondo { width: 2em; height: 2em; }
.mapa-atribucion {
    position: absolute; right: 0; bottom: 0; background: rgba(255,255,255,.85);
    font-size: .65rem; padding: 1px .35rem; border-top-left-radius: 4px;
}
.punto-color { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: .35rem; }

.calendario-cabecera { display: flex; align-items: center; justify-content: space-between; gap: .4rem; margin-bottom: .4rem; }
.calendario-cabecera h2 { margin: 0; font-size: 1rem; text-align: center; flex: 1 1 auto; }
.calendario-cabecera .boton-icono { color: var(--color-primario); font-size: 1.5rem; }
.dia-rotulo { text-align: center; font-size: .68rem; color: var(--color-secundario); font-weight: 600; }
.dia.vacio-dia { border: 0; background: transparent; cursor: default; }
.dia.hoy { outline: 2px solid var(--color-primario); }
.dia.seleccionado { outline: 2px solid #b137a0; outline-offset: -2px; }
#cal-ayuda p { margin: 0 0 .1rem; line-height: 1.2; }
#cal-ayuda .cal-eventos { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0; }
/* Columna de iconos de ancho fijo: el texto de cada evento empieza
   siempre en la misma posicion, tenga estrella (importante), check
   (hecho), los dos o ninguno. Color por estado: importante en rojo
   (aunque ademas este hecho), pendiente (ni importante ni hecho) en
   negro para distinguirlo de uno ya resuelto, y hecho conserva el gris
   de ".ayuda" (heredado, sin regla propia). */
#cal-ayuda .cal-eventos li {
    padding: 0; line-height: 1.25; display: flex; align-items: baseline; gap: .3rem;
}
#cal-ayuda .cal-evento-iconos { flex: 0 0 2.4em; text-align: right; }
#cal-ayuda .cal-evento-texto { flex: 1 1 auto; }
#cal-ayuda .cal-eventos li.importante { color: #dc2626; }
#cal-ayuda .cal-eventos li.pendiente { color: var(--color-texto); }

@media (min-width: 900px) {
    .tablero.graficos { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .mapa { height: 460px; }
}

tr.fila-seleccionable { cursor: pointer; }
tr.fila-seleccionable:hover td { background: #dbeafe; }

#g8-grafico { display: grid; grid-template-columns: minmax(0, 1fr); gap: .6rem; }
@media (min-width: 620px) { #g8-grafico { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }

.nav-reportes { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-bottom: .7rem; }
.nav-reportes select { flex: 1 1 200px; min-width: 0; }
.boton.inhabilitado { opacity: .45; pointer-events: none; }
.boton.enlace {
    background: none; color: var(--color-primario); padding: 0; font-size: .8rem; text-decoration: underline;
}
.boton.enlace:hover { background: none; color: var(--color-primario-oscuro); }
.bloque-pregunta { border-top: 1px solid var(--color-borde); padding-top: .6rem; margin-top: .9rem; }
.bloque-pregunta:first-child { border-top: 0; margin-top: 0; padding-top: 0; }
.bloque-pregunta h3 { margin: 0 0 .1rem; }
.bloque-pregunta .ayuda { margin: 0 0 .3rem; }

/* Pagina publica de participacion: sin menu, contenido centrado y angosto. */
.titulo-publico { font-size: .95rem; font-weight: 600; letter-spacing: .01em; }
body.publica .cuerpo { display: block; }
body.publica .contenido { max-width: 46rem; margin: 0 auto; width: 100%; }
.enlace-participacion { word-break: break-all; }

/* Las filas editables avisan que el doble clic abre la edicion. */
table.grilla tr.fila-editable { cursor: pointer; }
table.grilla tr.fila-editable:hover { background: #f1f5f9; }
.separador-filtro { width: 1px; align-self: stretch; background: var(--color-borde); margin: 0 .2rem; }
#rg-estado { font-variant-numeric: tabular-nums; min-width: 0; }
/* El boton de reproduccion es un disco: su ancho lo fija la regla .redondo. */

/* Filtro de pregunta debajo del grafico de evolucion (reporte 4). */
.filtro-pregunta {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-top: .75rem;
    flex-wrap: wrap;
}
.filtro-pregunta label { font-weight: 600; font-size: .9rem; }
.filtro-pregunta select { flex: 1 1 260px; max-width: 100%; }

.foto-camara-panel {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(0,0,0,.72);
}
.foto-camara-dialogo {
    width: min(720px, 100%);
    max-height: 95vh;
    overflow: auto;
    background: #fff;
    border-radius: 12px;
    padding: 16px;
    box-sizing: border-box;
}
.foto-camara-video {
    display: block;
    width: 100%;
    max-height: 60vh;
    object-fit: contain;
    background: #111;
    border-radius: 8px;
}
/* Fila de botones para elegir camara (izquierda a derecha, en vez del
   <select> de antes - ver Foto.prototype.abrirCamaraPanel en foto.js). La
   camara activa se marca con la clase "activa". */
.foto-camara-selector {
    display: flex; flex-wrap: wrap; gap: 8px;
    width: 100%;
    margin: 12px 0;
}
.foto-camara-boton { flex: 1 1 auto; }
.foto-camara-boton.activa {
    background: var(--color-primario-oscuro); color: #fff;
    box-shadow: inset 0 0 0 2px #fff, 0 0 0 2px var(--color-primario-oscuro);
}
.foto-camara-acciones {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    flex-wrap: wrap;
}

.invitados-masivo { margin-bottom: .8rem; }
.invitados-masivo .campo { margin-bottom: .4rem; }
.invitados-masivo textarea { width: 100%; box-sizing: border-box; resize: vertical; }
.invitados-masivo .acciones { margin-top: .4rem; }
.invitados-filtros {
    display: flex;
    align-items: center;
    gap: .5rem;
    overflow-x: auto;
    padding-bottom: .4rem;
    margin-bottom: .8rem;
}
.invitados-filtros input[type="search"] { flex: 1 0 240px; }
.invitados-filtros select,
.invitados-filtros .boton { flex: 0 0 auto; }
.invitados-columnas {
    display: grid;
    grid-template-columns: minmax(540px, 1fr) minmax(540px, 1fr);
    gap: .8rem;
    max-width: 100%;
    overflow-x: auto;
    align-items: start;
    padding-bottom: .5rem;
}
.invitados-columna { min-width: 0; }
.invitados-columna h2 { margin-top: 0; }
.invitados-grilla-barra { gap: .5rem; flex-wrap: wrap; }
.invitados-marcas { margin: 0; gap: .3rem; }
.invitados-columna .paginacion { flex-wrap: nowrap; width: 100%; }
.invitados-columna .paginacion select[data-inv-selector-pagina] {
    flex: 0 0 20%;
    width: 20%;
    min-width: 20%;
    max-width: 20%;
}
.invitados-columna .paginacion .pag-items { flex: 1 1 auto; min-width: 0; }
.invitados-columna .paginacion .pag-items input { min-width: 45px; }
.invitados-grilla th:first-child,
.invitados-grilla td:first-child { width: 3rem; text-align: center; }
.invitados-grilla input[type="checkbox"] { width: auto; }
.invitados-grilla td:nth-child(2) { word-break: break-all; }

@media (max-width: 480px) {
    /* input/select/textarea normales del formulario, pero nunca casillas ni
       radios -- forzarlas a width:100% las estira para llenar toda la fila
       (por ejemplo, dentro de .selector-multiple-accion/.selector-multiple-item
       en el panel del selector multiple) y empuja su texto lejos hacia la
       derecha, pegado al borde. */
    .formulario input:not([type="checkbox"]):not([type="radio"]), .formulario select, .formulario textarea {
        width: 100%; max-width: 100%; box-sizing: border-box;
    }
    .foto-archivos { width: 100%; }
    .foto-archivos .foto-principal { min-width: 0; }
    .acciones-registro { padding-bottom: 4.5rem; }
    .acciones-registro .boton-grabar { right: .7rem; bottom: .7rem; }
    .invitados-masivo .acciones { flex-wrap: nowrap; overflow-x: auto; padding-bottom: .35rem; }
}
@media (max-width: 768px) {
    .invitados-columnas {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: .35rem;
        overflow-x: visible;
    }
    .invitados-columna { padding: .4rem; overflow: hidden; }
    .invitados-columna .grilla-desplazable { overflow-x: auto; }
    .invitados-columna .paginacion { overflow-x: auto; padding-bottom: .25rem; }
    .invitados-columna h2 { font-size: .9rem; overflow-wrap: anywhere; }
}

/* Con el menu colapsado el contenido usa TODO el ancho de la pantalla (ya no
   se reserva una franja a la izquierda para la pestana): la pestana (30 x 100
   px) flota sobre el borde del contenido y se puede arrastrar hacia arriba o
   abajo (ver Ui.enlazarPestanaMenu) para dejar libre lo que tape. */

/* Panel "Graficos" del tablero del administrador (fila 2, columna 2): version
   a escala de "Reportes graficos" (ver Reportes.tableroPanel en
   vistas-graficos.js). Textos, tarjetas y mapa mas chicos para que quepa en
   media pantalla; los graficos tienen un tope de 250 px de alto. */
#p-graficos h2 { margin: 0 0 .4rem; }
#p-graficos .nav-reportes { gap: .3rem; margin-bottom: .4rem; }
#p-graficos .nav-reportes select { flex: 1 1 120px; font-size: .8rem; }
#p-graficos .ayuda { margin: .2rem 0 .4rem; font-size: .75rem; }
#p-graficos .formulario { padding: .4rem; box-shadow: none; background: transparent; }
#p-graficos .tarjetas { grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); gap: .4rem; margin: .4rem 0; }
#p-graficos .tarjeta { padding: .35rem; }
#p-graficos .tarjeta .valor { font-size: 1.1rem; }
#p-graficos .mapa { height: 250px; }
#p-graficos .resumen-reporte { margin-top: .4rem; }
/* Alto reservado: al cambiar de reporte (o mientras carga) el panel no debe
   encogerse ni crecer, porque arrastraria el alto de toda la fila del
   tablero y parecería que se refresca toda la pantalla. */
#p-graficos .ayuda#pg-ayuda { min-height: 2.6em; }
#p-graficos #rep-cuerpo { min-height: 262px; }
#p-graficos .resumen-reporte { min-height: 62px; }

/* ----------------------------------------------- tablero redimensionable */
/* Zonas del tablero separadas por divisores arrastrables (ver
   Ui.tableroRedimensionable en ui.js): cada fila lleva su propio divisor
   vertical (variable --c = % de ancho de su primera zona) y un divisor
   horizontal separa las dos filas (cuando se arrastra, ambas filas pasan a
   alto fijo, clase ".fija", y sus zonas se desplazan por dentro). En telefono
   (< 700px) todo vuelve a apilarse en una columna y los divisores se ocultan. */
.tablero-divisor { position: relative; flex: 0 0 14px; touch-action: none; user-select: none; -webkit-user-select: none; }
.tablero-divisor::after {
    content: ""; position: absolute; border-radius: 4px; background: #cbd5e1; transition: background .2s ease;
}
.tablero-divisor:hover::after, .tablero-divisor:active::after { background: var(--color-primario); }
.tablero-divisor.vertical { cursor: col-resize; }
.tablero-divisor.vertical::after { top: 8%; bottom: 8%; left: 5px; width: 4px; }
.tablero-divisor.horizontal { cursor: row-resize; height: 14px; flex: none; }
.tablero-divisor.horizontal::after { left: 8%; right: 8%; top: 5px; height: 4px; }
.tablero.redimensionable { display: flex; flex-direction: column; gap: 0; }
.tablero-fila { display: flex; align-items: stretch; min-width: 0; }
.tablero-fila > .panel:first-child { flex: 0 0 calc(var(--c, 50) * 1% - 7px); min-width: 0; }
.tablero-fila > .panel:last-child { flex: 1 1 0; min-width: 0; }
.tablero-fila.fija > .panel { display: flex; flex-direction: column; overflow: auto; }
.tablero-fila.fija > .panel > * { flex-shrink: 0; }
.tablero-fila.fija .chat { flex: 1 1 auto; min-height: 80px; max-height: none; }
@media (max-width: 699px) {
    .tablero.redimensionable { display: grid; gap: .8rem; }
    .tablero-fila { display: contents; }
    .tablero-divisor { display: none; }
    .tablero-fila.fija > .panel { display: block; overflow: hidden; }
}