/* Call Center: diseño "Municipio" (ver DESIGN.md). Misma familia que Masivos: barra azul con el escudo, Montserrat y Public Sans.
   Formas: 12 px paneles, 10 px botones y campos. Movimiento solo donde avisa algo: presionar, elegir y el total que cambia. */
@font-face { font-family: Montserrat; font-weight: 700; src: url(../fonts/montserrat-700.woff2) format("woff2"); font-display: swap; }
@font-face { font-family: Montserrat; font-weight: 800; src: url(../fonts/montserrat-800.woff2) format("woff2"); font-display: swap; }
@font-face { font-family: "Public Sans"; font-weight: 400; src: url(../fonts/public-sans-400.woff2) format("woff2"); font-display: swap; }
@font-face { font-family: "Public Sans"; font-weight: 600; src: url(../fonts/public-sans-600.woff2) format("woff2"); font-display: swap; }
@font-face { font-family: "Public Sans"; font-weight: 700; src: url(../fonts/public-sans-700.woff2) format("woff2"); font-display: swap; }

:root {
  --azul: #0a2340; --azul-2: #143a66; --fondo: #f3f5f9; --panel: #fff; --tinta: #0b1f38; --suave: #566175; --linea: #d9dfea; --tenue: #eaeef5;
  --oro: #d7a64a; --boton: #0a2340; --sobre: #fff; --ok: #17663f; --okf: #e3f1ea; --rev: #7a4b00; --revf: #fbefd6; --error: #a32316; --errorf: #fbe9e6;
  --sombra: 0 1px 2px rgb(10 35 64 / .06), 0 8px 24px -12px rgb(10 35 64 / .18); --r: 12px; --rc: 10px; --sal: cubic-bezier(.2, .8, .2, 1);
}
@media (prefers-color-scheme: dark) {
  :root {
    --fondo: #0c1118; --panel: #151c27; --tinta: #eef1f6; --suave: #a3adbd; --linea: #273142; --tenue: #1c2534; --azul-2: #2a5a94;
    --boton: #d7a64a; --sobre: #1a1203; --ok: #6fd3a0; --okf: #12261c; --rev: #f0c070; --revf: #2c2210; --error: #ff9b8f; --errorf: #2c1512;
    --sombra: 0 1px 2px rgb(0 0 0 / .4);
  }
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; background: var(--fondo); color: var(--tinta); font: 16px/1.5 "Public Sans", system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; -webkit-tap-highlight-color: transparent; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--oro); outline-offset: 2px; }
h1, h2 { font-family: Montserrat, "Public Sans", sans-serif; }
h1 { margin: 0 0 4px; font-size: 28px; font-weight: 800; line-height: 1.15; letter-spacing: -.01em; overflow-wrap: anywhere; }
h2 { margin: 0; font-size: 17px; font-weight: 700; }
.bajada { margin: 0 0 24px; color: var(--suave); }
.suave { color: var(--suave); }
.num { font-variant-numeric: tabular-nums; }
.solo-lector { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---------- Marco con sesión ---------- */
.app { display: grid; grid-template-columns: 232px 1fr; min-height: 100dvh; }
.lado { background: var(--azul); color: #fff; padding: 24px 14px; display: flex; flex-direction: column; gap: 2px; position: sticky; top: 0; height: 100dvh; }
.lado img { width: 148px; height: auto; margin-left: 6px; }
.lado-sistema { font: 700 16px Montserrat, sans-serif; margin: 12px 6px 18px; padding-bottom: 16px; border-bottom: 1px solid rgb(255 255 255 / .16); }
.lado nav { display: flex; flex-direction: column; gap: 2px; }
.lado nav a { padding: 10px 12px; border-radius: var(--rc); color: rgb(255 255 255 / .78); text-decoration: none; font-weight: 600; transition: background .15s, color .15s; }
@media (hover: hover) { .lado nav a:hover { background: rgb(255 255 255 / .07); color: #fff; } }
.lado nav a[aria-current] { background: rgb(255 255 255 / .14); color: #fff; }
.lado-pie { margin: auto 6px 0; font-size: 14px; display: grid; gap: 8px; }
.lado-pie b { display: block; overflow-wrap: anywhere; }
.lado-pie span { color: rgb(255 255 255 / .65); }
.lado-salir { border: 1px solid rgb(255 255 255 / .3); background: none; color: #fff; border-radius: var(--rc); height: 36px; padding: 0 14px; font-weight: 600; transition: background .15s; }
@media (hover: hover) { .lado-salir:hover { background: rgb(255 255 255 / .1); } }
.principal { padding: 32px 36px 48px; min-width: 0; max-width: 1320px; }
.cab { display: flex; align-items: flex-start; gap: 16px; flex-wrap: wrap; margin-bottom: 24px; }
.cab > div { margin-right: auto; min-width: 0; }
.cab .bajada { margin: 0; }
.migas { margin: 0 0 6px; font-size: 14px; color: var(--suave); }
.migas a { text-underline-offset: 3px; }

/* ---------- Marco sin sesión ---------- */
.entrada-pagina { min-height: 100dvh; display: grid; place-items: center; padding: 24px 16px; }
.entrada-caja { width: 100%; max-width: 400px; background: var(--panel); border-radius: var(--r); box-shadow: var(--sombra); overflow: hidden; }
.entrada-marca { background: var(--azul); color: #fff; padding: 24px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.entrada-marca img { width: 140px; height: auto; }
.entrada-marca span { font: 700 16px Montserrat, sans-serif; }
.entrada-cuerpo { padding: 24px; }
.entrada-cuerpo h1 { font-size: 22px; margin-bottom: 16px; }

/* ---------- Piezas ---------- */
.tarjeta { background: var(--panel); border-radius: var(--r); padding: 24px; box-shadow: var(--sombra); }
.tarjeta + .tarjeta { margin-top: 24px; }
.tarjeta.sin-relleno { padding: 0; }
.enc { display: flex; align-items: center; gap: 12px 16px; flex-wrap: wrap; margin-bottom: 18px; }
.enc h2 { margin-right: auto; }
.sin-relleno > .enc { padding: 18px 24px; margin: 0; border-bottom: 1px solid var(--linea); }
.dos { display: grid; grid-template-columns: 1fr 316px; gap: 24px; align-items: start; }
.dos > * { min-width: 0; }

.boton { display: inline-flex; align-items: center; justify-content: center; height: 48px; padding: 0 22px; border: 0; border-radius: var(--rc); background: var(--boton); color: var(--sobre); font-weight: 700; text-decoration: none; white-space: nowrap; box-shadow: 0 3px 0 rgb(0 0 0 / .28); transition: transform .1s var(--sal), box-shadow .1s, opacity .15s; }
.boton:active { transform: translateY(3px); box-shadow: 0 0 0 rgb(0 0 0 / .28); }
.boton:disabled { opacity: .4; cursor: not-allowed; }
.boton-bloque { width: 100%; }
.boton-chico { height: 38px; padding: 0 16px; font-size: 15px; box-shadow: 0 2px 0 rgb(0 0 0 / .28); }
.boton-chico:active { transform: translateY(2px); }
.boton-secundario { background: var(--panel); color: var(--tinta); border: 1px solid var(--linea); box-shadow: 0 2px 0 var(--linea); }
.boton-secundario:active { transform: translateY(2px); box-shadow: 0 0 0 var(--linea); }
.acciones { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }

.campo { display: grid; gap: 6px; margin-bottom: 16px; max-width: 420px; }
.etiqueta { font-weight: 600; font-size: 15px; }
.entrada { height: 46px; padding: 0 12px; border: 1px solid var(--linea); border-radius: var(--rc); background: var(--fondo); width: 100%; transition: border-color .15s; }
.entrada:hover { border-color: var(--suave); }
.entrada-chica { height: 40px; width: 220px; }
.ayuda, .mensaje { font-size: 14px; color: var(--suave); }
.mensaje { color: var(--error); }
.casilla { display: flex; align-items: center; gap: 8px; font-size: 15px; color: var(--suave); }
.casilla input { width: 18px; height: 18px; accent-color: var(--azul-2); }
.entrada-cuerpo .casilla { margin-bottom: 16px; }

.aviso { margin: 0 0 20px; padding: 12px 16px; border-radius: var(--rc); font-weight: 600; }
.aviso-ok { background: var(--okf); color: var(--ok); }
.aviso-error { background: var(--errorf); color: var(--error); }
.aviso-info { background: var(--tenue); font-weight: 400; }
.validation-summary-valid { display: none; }
.validation-summary-errors ul { margin: 0; padding: 0; list-style: none; }

.sello { display: inline-block; padding: 1px 8px; border-radius: 99px; font-size: 12px; font-weight: 700; white-space: nowrap; vertical-align: 2px; }
.sello-ok { background: var(--okf); color: var(--ok); }
.sello-rev { background: var(--revf); color: var(--rev); }
.sello-gris { background: var(--tenue); color: var(--suave); }

.filtros { display: inline-flex; padding: 4px; border-radius: var(--rc); background: var(--tenue); }
.filtros a { border-radius: 7px; padding: 6px 14px; font-weight: 600; font-size: 15px; color: var(--suave); text-decoration: none; white-space: nowrap; transition: background .15s, color .15s; }
.filtros a[aria-current] { background: var(--panel); color: var(--tinta); box-shadow: 0 1px 2px rgb(10 35 64 / .16); }
.buscador { display: flex; gap: 8px; flex-wrap: wrap; }

/* ---------- Listas ---------- */
.lista { list-style: none; margin: 0; padding: 0 24px; }
.lista > li { display: grid; grid-template-columns: 1fr auto auto; gap: 4px 24px; align-items: center; padding: 16px 0; }
.lista > li + li { border-top: 1px solid var(--linea); }
.lista .n { font-weight: 700; overflow-wrap: anywhere; }
.lista a.n { text-underline-offset: 3px; }
.lista .d { color: var(--suave); font-size: 14px; overflow-wrap: anywhere; }
.lista .t { font-weight: 600; font-size: 17px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.lista .t.sin { font-weight: 400; font-size: 15px; color: var(--suave); white-space: normal; max-width: 220px; text-align: right; overflow-wrap: anywhere; }
.lista .n + .sello { margin-left: 8px; }
.vacio { margin: 0; padding: 32px 24px; color: var(--suave); }
.vacio b { display: block; color: var(--tinta); font-size: 17px; margin-bottom: 4px; }
.pie-lista { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding: 14px 24px; border-top: 1px solid var(--linea); font-size: 15px; color: var(--suave); }

.cifras { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 16px; margin: 0 0 24px; }
.cifras div { background: var(--panel); border-radius: var(--r); padding: 16px 20px; box-shadow: var(--sombra); }
.cifras dt { color: var(--suave); font-size: 14px; }
.cifras dd { margin: 0; font: 800 28px/1.2 Montserrat, sans-serif; font-variant-numeric: tabular-nums; }

.tabla { width: 100%; border-collapse: collapse; }
.tabla th { text-align: left; font-size: 13px; font-weight: 600; color: var(--suave); padding: 10px 12px; border-bottom: 1px solid var(--linea); }
.tabla td { padding: 10px 12px; border-bottom: 1px solid var(--linea); }
.tabla tr:last-child td { border-bottom: 0; }
.tabla th:first-child, .tabla td:first-child { padding-left: 24px; }
.tabla th:last-child, .tabla td:last-child { padding-right: 24px; }
.tabla .der { text-align: right; font-variant-numeric: tabular-nums; }

/* ---------- Selector de secciones ---------- */
.secciones { display: grid; grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: 10px; }
.sec { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 1px; padding: 12px 14px; border: 1px solid var(--linea); border-radius: var(--rc); background: var(--panel); cursor: pointer; user-select: none;
  box-shadow: 0 2px 0 var(--linea); transition: transform .12s var(--sal), background .15s, border-color .15s, box-shadow .12s, color .15s; }
.sec input { position: absolute; opacity: 0; width: 0; height: 0; }
.sec b { font: 700 19px/1.2 Montserrat, sans-serif; font-variant-numeric: tabular-nums; }
.sec span { font-size: 13px; color: var(--suave); transition: color .15s; overflow-wrap: anywhere; }
@media (hover: hover) { .sec:not(.ocupada):hover { border-color: var(--azul-2); transform: translateY(-1px); box-shadow: 0 3px 0 var(--linea); } }
.sec:not(.ocupada):active { transform: translateY(2px); box-shadow: 0 0 0 var(--linea); }
.sec:has(input:focus-visible) { outline: 3px solid var(--oro); outline-offset: 2px; }
.sec:has(input:checked) { background: var(--azul); border-color: var(--azul); color: #fff; box-shadow: 0 2px 0 var(--oro); }
.sec:has(input:checked) span { color: rgb(255 255 255 / .78); }
@media (hover: hover) { .sec:has(input:checked):hover { background: var(--azul-2); border-color: var(--azul-2); box-shadow: 0 3px 0 var(--oro); } }
.sec::after { content: ""; position: absolute; top: 13px; right: 14px; width: 6px; height: 11px; border: solid var(--oro); border-width: 0 2.5px 2.5px 0; transform: rotate(45deg) scale(0); opacity: 0; transition: transform .18s var(--sal), opacity .12s; }
.sec:has(input:checked)::after { transform: rotate(45deg) scale(1); opacity: 1; }
.sec.ocupada { cursor: not-allowed; box-shadow: none; border-style: dashed; background: repeating-linear-gradient(135deg, transparent 0 7px, var(--tenue) 7px 8px); }
.sec.ocupada b { color: var(--suave); }
.secciones-nada { margin: 0; padding: 24px 0; color: var(--suave); }

.resumen { position: sticky; top: 24px; }
.resumen .quien { margin: 0 0 2px; color: var(--suave); font-size: 14px; overflow-wrap: anywhere; }
.resumen .total { margin: 0; font: 800 44px/1 Montserrat, sans-serif; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.resumen .total.cambio { animation: salto .22s var(--sal); }
@keyframes salto { from { transform: translateY(4px); opacity: .5; } }
.resumen .de { margin: 6px 0 18px; color: var(--suave); font-size: 15px; }
.fichas { list-style: none; margin: 0 0 20px; padding: 16px 0 0; border-top: 1px solid var(--linea); display: flex; flex-wrap: wrap; gap: 6px; min-height: 52px; max-height: 240px; overflow: auto; }
.fichas button, .ficha { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 8px 0 10px; border: 0; border-radius: 99px; background: var(--tenue); font-weight: 600; font-size: 14px; font-variant-numeric: tabular-nums; transition: background .15s, transform .1s; }
.ficha { padding: 0 10px; }
.fichas button i { font-style: normal; color: var(--suave); font-size: 16px; line-height: 1; }
@media (hover: hover) { .fichas button:hover { background: var(--linea); } }
.fichas button:active { transform: scale(.95); }
.fichas .nada { color: var(--suave); font-size: 15px; }

@media (prefers-reduced-motion: reduce) { *, *::after { transition: none !important; animation: none !important; } }

@media (max-width: 900px) {
  .app { grid-template-columns: 1fr; }
  .lado { position: static; height: auto; flex-direction: row; align-items: center; padding: 8px 10px; gap: 8px; }
  .lado img, .lado-sistema, .lado-pie div { display: none; }
  .lado nav { flex-direction: row; overflow-x: auto; min-width: 0; }
  .lado nav a { white-space: nowrap; }
  .lado-pie { margin: 0 0 0 auto; }
  .principal { padding: 20px 16px 32px; }
  h1 { font-size: 24px; }
  .dos { grid-template-columns: 1fr; }
  .resumen { position: static; }
  .tarjeta { padding: 18px; }
  .sin-relleno > .enc { padding: 16px 18px; }
  .entrada-chica { width: 100%; }
  .buscador { width: 100%; }
  .secciones { grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); }
  .lista { padding: 0 18px; }
  .lista > li { grid-template-columns: 1fr auto; }
  .lista .t { grid-column: 1; }
  .lista .t.sin { text-align: left; }
  .lista > li > .boton, .lista > li > .acciones { grid-row: 1 / span 2; grid-column: 2; }
  .tabla th:first-child, .tabla td:first-child { padding-left: 18px; }
  .tabla th:last-child, .tabla td:last-child { padding-right: 18px; }
  .ocultar-movil { display: none; }
}

/* ---------- Regresar ---------- */
.volver { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 14px 0 12px; margin: 0 0 16px; border: 1px solid var(--linea); border-radius: var(--rc); background: var(--panel); color: var(--tinta); font-weight: 600; font-size: 15px; text-decoration: none; box-shadow: 0 2px 0 var(--linea); transition: transform .1s var(--sal), box-shadow .1s; }
.volver::before { content: ""; width: 8px; height: 8px; border: solid currentColor; border-width: 0 0 2.5px 2.5px; transform: rotate(45deg); margin-left: 2px; }
.volver:active { transform: translateY(2px); box-shadow: 0 0 0 var(--linea); }

/* ---------- Secciones como filtro de la lista ---------- */
.secciones-filtro { margin: 0 0 16px; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); scroll-margin-top: 16px; }
a.sec { text-decoration: none; color: inherit; }
.sec b small { font: 600 13px "Public Sans", sans-serif; color: var(--suave); margin-right: 2px; }
.sec[aria-current] { background: var(--azul); border-color: var(--azul); color: #fff; box-shadow: 0 2px 0 var(--oro); }
.sec[aria-current] span, .sec[aria-current] b small { color: rgb(255 255 255 / .78); }
.sec[aria-current]::after { display: none; }

/* ---------- Páginas ---------- */
.paginas { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 24px; font-size: 15px; color: var(--suave); background: var(--tenue); }
.paginas b { color: var(--tinta); }
.paginas-pie { background: none; border-top: 1px solid var(--linea); padding-block: 16px; }
.paginador { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.paginador a { display: inline-flex; align-items: center; justify-content: center; min-width: 36px; height: 36px; padding: 0 12px; border-radius: 8px; background: var(--panel); border: 1px solid var(--linea); color: var(--tinta); font-weight: 600; text-decoration: none; font-variant-numeric: tabular-nums; }
@media (hover: hover) { .paginador a:hover { border-color: var(--azul-2); } }
.paginador a[aria-current] { background: var(--azul); border-color: var(--azul); color: #fff; }
.lista > li.grupo { display: block; padding: 20px 0 6px; font: 700 14px Montserrat, sans-serif; color: var(--suave); border-top: 0; }
.lista > li.grupo + li { border-top: 0; }
@media (max-width: 900px) { .paginas { padding-inline: 18px; } .secciones-filtro { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); } }

/* ---------- Pantalla de llamada ----------
   En PC ocupa el alto de la ventana y la página no se desplaza: la lista de personas tiene su propio desplazamiento y la encuesta cabe a la vista.
   La encuesta es una sola tarjeta que termina en su botón de guardar: todo lo de la persona queda junto, arriba, y nada flota lejos. */
.principal-llamada { padding: 0; max-width: none; height: 100dvh; display: grid; grid-template-columns: 320px minmax(0, 1fr); overflow: hidden; }
.principal-llamada > * { min-height: 0; min-width: 0; }

.cola { display: flex; flex-direction: column; background: var(--panel); border-right: 1px solid var(--linea); }
.cola-cab { padding: 20px 20px 14px; }
.cola-cab .volver { margin-bottom: 14px; }
.cola-cab h1 { font-size: 22px; margin: 0 0 10px; }
.barra-avance { height: 8px; border-radius: 99px; background: var(--tenue); overflow: hidden; }
.barra-avance i { display: block; height: 100%; border-radius: 99px; background: var(--ok); }
.cola-cab p { margin: 8px 0 0; font-size: 14px; color: var(--suave); }
.cola-cab p b { color: var(--tinta); font-variant-numeric: tabular-nums; }
.cola-lista { flex: 1; overflow-y: auto; padding: 0 10px 12px; display: grid; gap: 2px; align-content: start; scroll-padding-block: 80px; }
.pers { display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 0 12px; align-items: center; border-radius: var(--rc); padding: 9px 10px; text-decoration: none; color: inherit; transition: background .15s; scroll-margin-block: 80px; }
@media (hover: hover) { .pers:hover { background: var(--tenue); } }
.avatar { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: var(--tenue); font: 700 13px Montserrat, sans-serif; color: var(--suave); }
.pers .avatar { grid-row: 1 / span 2; }
.pers .n { font-weight: 600; font-size: 15px; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pers .d { font-size: 13px; color: var(--suave); font-variant-numeric: tabular-nums; }
.pers.hecha .n { font-weight: 400; color: var(--suave); }
.pers.contesto .avatar { background: var(--okf); color: var(--ok); } .pers.contesto .d { color: var(--ok); }
.pers.colgo .avatar { background: var(--revf); color: var(--rev); } .pers.colgo .d { color: var(--rev); }
.pers.llamada, .pers.llamada:hover { background: var(--azul); color: #fff; }
.pers.llamada .n { font-weight: 700; color: #fff; }
.pers.llamada .avatar { background: var(--oro); color: #1a1203; } .pers.llamada .d { color: rgb(255 255 255 / .8); }

.llamada-panel { overflow-y: auto; }
.llamada-ancho { max-width: 1120px; margin: 0 auto; padding: 22px 32px 28px; display: grid; gap: 14px; }
.llamada-ancho .aviso { margin: 0; }
.llamada-fin { text-align: center; padding: 56px 24px; display: grid; gap: 10px; justify-items: center; margin-top: 40px; }
.llamada-fin h2 { font-size: 22px; } .llamada-fin p { margin: 0 0 10px; max-width: 46ch; }

header.quien { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; gap: 2px 16px; align-items: center; }
header.quien .avatar { grid-row: 1 / span 2; width: 52px; height: 52px; font-size: 17px; background: var(--oro); color: #1a1203; }
header.quien h2 { font-size: 24px; font-weight: 800; line-height: 1.2; overflow-wrap: anywhere; }
header.quien .d { grid-column: 2; font-size: 15px; color: var(--suave); overflow-wrap: anywhere; }
header.quien .tel { grid-row: 1 / span 2; grid-column: 3; display: inline-flex; align-items: center; height: 50px; padding: 0 22px; border-radius: 99px; background: var(--panel); box-shadow: var(--sombra); font: 800 23px Montserrat, sans-serif; font-variant-numeric: tabular-nums; text-decoration: none; white-space: nowrap; }
.quien-datos { display: flex; flex-wrap: wrap; gap: 6px 28px; margin: 0; padding: 10px 16px; border-radius: var(--rc); background: var(--tenue); }
.quien-datos div { display: flex; gap: 8px; align-items: baseline; min-width: 0; }
.quien-datos dt { font-size: 13px; color: var(--suave); white-space: nowrap; }
.quien-datos dd { margin: 0; font-weight: 600; font-size: 14px; overflow-wrap: anywhere; }

.encuesta { display: grid; gap: 14px; }
.encuesta fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.sit { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.sit-op { position: relative; display: block; border: 1px solid var(--linea); border-radius: var(--rc); background: var(--panel); padding: 10px 14px; cursor: pointer; user-select: none; box-shadow: 0 2px 0 var(--linea); transition: transform .1s var(--sal), background .15s, color .15s, border-color .15s, box-shadow .1s; }
.sit-op input, .chip input { position: absolute; opacity: 0; width: 0; height: 0; }
.sit-op b { display: block; } .sit-op small { display: block; font-size: 13px; color: var(--suave); }
.sit-op:active { transform: translateY(2px); box-shadow: 0 0 0 var(--linea); }
.sit-op:has(input:checked) { background: var(--azul); border-color: var(--azul); color: #fff; box-shadow: 0 2px 0 var(--oro); }
.sit-op:has(input:checked) small { color: rgb(255 255 255 / .8); }
.sit-op:has(input:focus-visible), .chip:has(input:focus-visible) { outline: 3px solid var(--oro); outline-offset: 2px; }

.encuesta-caja .nota { display: none; margin: 0; padding: 44px 24px; text-align: center; color: var(--suave); }
.encuesta-caja .nota b { display: block; font: 700 18px Montserrat, sans-serif; color: var(--tinta); margin-bottom: 4px; }
.encuesta:not(:has(input[name=Situacion]:checked)) .nota-elige { display: block; }
.encuesta:has(#s-COLGO:checked) .nota-nada, .encuesta:has(#s-EQUIVOCADO:checked) .nota-nada { display: block; }
.preguntas { display: none; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.encuesta:has(#s-CONTESTO:checked) .preguntas { display: grid; }
.preguntas .col { display: flex; flex-direction: column; padding: 6px 24px; }
.preguntas .col-escribe { border-right: 1px solid var(--linea); }
.q { display: grid; gap: 8px; padding: 14px 0; }
.q + .q { border-top: 1px solid var(--linea); }
.q > span, .q > legend { padding: 0; font-weight: 600; font-size: 15px; line-height: 1.35; }
.q > legend { float: left; width: 100%; margin-bottom: 8px; } .q > legend + * { clear: both; }
/* Las tres de escribir se reparten el alto de la columna: así las dos columnas terminan parejas. */
.col-escribe .q { flex: 1; grid-template-rows: auto 1fr; }
.q textarea { width: 100%; min-height: 58px; height: 100%; padding: 9px 12px; border: 1px solid var(--linea); border-radius: var(--rc); background: var(--fondo); font: inherit; color: inherit; resize: none; transition: border-color .15s; }
.q textarea:hover { border-color: var(--suave); }
.q.linea { grid-template-columns: minmax(0, 1fr) auto; gap: 16px; align-items: center; }
.q.linea > legend { float: none; width: auto; margin: 0; display: contents; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.q.linea .chips { flex-wrap: nowrap; }
.chip { position: relative; display: inline-flex; align-items: center; justify-content: center; min-height: 38px; padding: 6px 16px; border: 1px solid var(--linea); border-radius: 99px; background: var(--panel); font-weight: 600; font-size: 15px; line-height: 1.2; text-align: center; cursor: pointer; user-select: none; box-shadow: 0 2px 0 var(--linea); transition: transform .1s var(--sal), background .15s, color .15s, border-color .15s, box-shadow .1s; }
.chip:active { transform: translateY(2px); box-shadow: 0 0 0 var(--linea); }
.chip:has(input:checked) { background: var(--azul); border-color: var(--azul); color: #fff; box-shadow: 0 2px 0 var(--oro); }
.chips.escala { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 6px; }
.chips.escala .chip { padding: 0; border-radius: var(--rc); font-variant-numeric: tabular-nums; }
.chips.rumbo { display: grid; grid-template-columns: 1fr 1fr; }
.chips.rumbo .chip { border-radius: var(--rc); min-height: 44px; }
.encuesta-pie { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 24px; border-top: 1px solid var(--linea); background: var(--tenue); border-radius: 0 0 var(--r) var(--r); }
.encuesta-pie span { font-size: 15px; color: var(--suave); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.encuesta-pie span b { color: var(--tinta); }

/* Pantallas de ancho medio (laptop de 1280 a 1500): la lista se angosta y la columna de elegir gana espacio. */
@media (max-width: 1500px) and (min-width: 1001px) {
  .principal-llamada { grid-template-columns: 272px minmax(0, 1fr); }
  .llamada-ancho { padding-inline: 24px; } .preguntas { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); } .preguntas .col { padding-inline: 20px; }
  .q > span { font-size: 14.5px; } .chip { padding-inline: 13px; } .quien-datos div:nth-child(3) { display: none; } .quien-datos div:nth-child(2):last-child { display: flex; }
}

/* Pantallas bajas (laptop de 768 de alto): se aprieta lo de arriba para que la encuesta siga cabiendo. */
@media (max-height: 820px) and (min-width: 1001px) {
  .llamada-ancho { padding-top: 16px; gap: 10px; } .encuesta { gap: 10px; }
  .sit-op { padding: 9px 14px; } .sit-op small { display: none; }
  header.quien .avatar { width: 44px; height: 44px; } header.quien .tel { height: 44px; font-size: 21px; } header.quien h2 { font-size: 21px; }
  .quien-datos { padding: 6px 14px; } .q { padding: 8px 0; gap: 5px; } .q textarea { min-height: 48px; padding-block: 6px; } .encuesta-pie { padding-block: 8px; } .llamada-ancho { padding-bottom: 12px; } .preguntas .col { padding-block: 2px; }
  .chip { min-height: 32px; } .chips.rumbo .chip { min-height: 38px; } .encuesta-pie .boton { height: 42px; }
}

@media (max-width: 1000px) {
  .principal-llamada { display: block; height: auto; overflow: visible; }
  .cola { border-right: 0; border-bottom: 1px solid var(--linea); } .cola-cab { padding: 16px 16px 12px; } .cola-lista { max-height: 200px; }
  .llamada-panel { overflow: visible; } .llamada-ancho { padding: 16px; }
  header.quien { grid-template-columns: 44px minmax(0, 1fr); } header.quien .avatar { width: 44px; height: 44px; } header.quien h2 { font-size: 20px; }
  header.quien .tel { grid-row: auto; grid-column: 1 / -1; justify-content: center; margin-top: 8px; }
  .sit { grid-template-columns: 1fr; } .preguntas { grid-template-columns: 1fr; }
  .encuesta:has(#s-CONTESTO:checked) .preguntas { display: block; }
  .preguntas .col { padding: 0 18px; } .preguntas .col-escribe { border-right: 0; border-bottom: 1px solid var(--linea); }
  .q.linea { grid-template-columns: 1fr; } .q.linea .chips { flex-wrap: wrap; }
  .chips.escala { grid-template-columns: repeat(5, 1fr); } .chips.rumbo { grid-template-columns: 1fr; }
  .encuesta-pie { position: sticky; bottom: 0; padding: 12px 18px; } .encuesta-pie span { display: none; } .encuesta-pie .boton { width: 100%; }
}


/* La persona elegida en la lista no lleva el contorno dorado: ya se distingue por su fondo azul. Con teclado se marca con un borde azul claro. */
.pers:focus { outline: none; }
.pers:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--azul-2); }
.pers.llamada:focus-visible { box-shadow: inset 0 0 0 2px rgb(255 255 255 / .6); }

.lista .sello.estado { font-size: 13px; padding: 3px 12px; min-width: 132px; text-align: center; }

/* ---------- Inicio del operador: secciones y minidash en dos mitades iguales y de la misma altura ---------- */
.inicio-op { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; align-items: stretch; margin-bottom: 32px; }
.mis-secciones { display: flex; flex-direction: column; }
.mis-secciones .lista { flex: 1; display: flex; flex-direction: column; justify-content: space-evenly; }
.mis-secciones .lista > li { grid-template-columns: 1fr auto; }
.minidash { display: grid; gap: 16px; align-content: start; }
.minidash h2 { font-size: 17px; }
.minidash h3 { margin: 0 0 8px; font-size: 14px; color: var(--suave); font-weight: 600; }
.minidash-cab { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; font-size: 14px; }
.minidash-total { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.minidash-total b { font: 800 44px/1 Montserrat, sans-serif; font-variant-numeric: tabular-nums; }
.minidash-total span { color: var(--suave); }
.minidash-cifras { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0; }
.minidash-cifras div { background: var(--tenue); border-radius: var(--rc); padding: 10px 14px; }
.minidash-cifras dt { font-size: 13px; color: var(--suave); }
.minidash-cifras dd { margin: 0; font: 800 24px/1.2 Montserrat, sans-serif; font-variant-numeric: tabular-nums; }
.reparto { display: flex; height: 10px; border-radius: 99px; overflow: hidden; background: var(--tenue); margin-bottom: 12px; gap: 2px; }
.reparto i { min-width: 0; } .reparto .ok { background: var(--ok); } .reparto .rev { background: #d99a2b; } .reparto .gris { background: var(--suave); } .reparto .vacio { flex: 1; }
.minidash-resultados dl { margin: 0; display: grid; gap: 8px; }
.minidash-resultados dl div { display: flex; justify-content: space-between; align-items: center; }
.minidash-resultados dd { margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; }
.minidash-resultados dd small { font-weight: 400; color: var(--suave); margin-left: 6px; display: inline-block; min-width: 38px; text-align: right; }
.minidash-pie { margin: 0; padding-top: 14px; border-top: 1px solid var(--linea); display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.minidash-pie dt { font-size: 13px; color: var(--suave); }
.minidash-pie dd { margin: 0; font-weight: 700; font-size: 18px; font-variant-numeric: tabular-nums; }
@media (max-width: 1000px) { .inicio-op { grid-template-columns: 1fr; } .minidash-cifras { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.inicio-op > .tarjeta { margin-top: 0; }
/* En pantallas anchas el contenido queda centrado en vez de pegado a la izquierda. */
.principal { margin-inline: auto; width: 100%; }

.nota-tabla { margin: 0; padding: 12px 24px 16px; border-top: 1px solid var(--linea); font-size: 14px; color: var(--suave); }

/* ---------- Panel del supervisor ----------
   Colores de resultados validados (validate_palette.js) en claro y oscuro: verde contestó, ámbar colgó, azul número equivocado.
   El color nunca va solo: cada barra lleva tooltip con nombre y cifra, y hay leyenda. */
:root { --g-ok: #1f7a4d; --g-rev: #b07514; --g-azul: #4a6fb5; --g-barra: #143a66; }
@media (prefers-color-scheme: dark) { :root { --g-ok: #3aa874; --g-rev: #bd8424; --g-azul: #6f8fd2; --g-barra: #6f8fd2; } }
.tip { position: fixed; z-index: 10; pointer-events: none; background: var(--tinta); color: var(--fondo); font-size: 13px; line-height: 1.35; padding: 7px 10px; border-radius: 8px; box-shadow: var(--sombra); max-width: 260px; }
[data-tip-t]:focus-visible { outline: 2px solid var(--oro); outline-offset: 2px; }

.kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin: 0 0 24px; }
.kpi { background: var(--panel); border-radius: var(--r); box-shadow: var(--sombra); padding: 18px 20px; display: flex; flex-direction: column; }
.kpi dt { font-size: 14px; color: var(--suave); font-weight: 600; }
.kpi dd { margin: 6px 0 0; font: 800 34px/1.1 Montserrat, sans-serif; font-variant-numeric: tabular-nums; }
.kpi dd span { font: 600 16px "Public Sans", sans-serif; color: var(--suave); margin-left: 4px; }
.kpi small { display: block; margin-top: auto; padding-top: 8px; font-size: 13px; color: var(--suave); line-height: 1.35; }
.calif-escala { display: grid; grid-template-columns: repeat(10, 1fr); gap: 3px; margin-top: 10px; }
.calif-escala i { height: 8px; border-radius: 2px; background: var(--tenue); }
.calif-escala i.lleno { background: var(--g-ok); }

.panel-medio { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 24px; margin-bottom: 24px; }
.panel-medio-par { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.panel-medio > .tarjeta { margin-top: 0; }
.t-titulo { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.t-titulo h2 { font-size: 16px; } .t-titulo span { font-size: 14px; color: var(--suave); }

.avance-g { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 20px; align-items: center; margin-bottom: 18px; }
.anillo-num { font: 800 28px Montserrat, sans-serif; fill: var(--tinta); }
.leyenda { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 14px; color: var(--suave); }
.leyenda li { display: flex; align-items: center; gap: 8px; } .leyenda i { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.leyenda-col { flex-direction: column; gap: 10px; }
.leyenda-col b { margin-left: auto; padding-left: 12px; color: var(--tinta); font-variant-numeric: tabular-nums; }
.reparto { display: flex; gap: 2px; border-radius: 99px; overflow: hidden; background: var(--tenue); }
.reparto i { min-width: 0; }

.barras { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 2px; align-items: end; height: calc(var(--alto) + 22px); }
.barra-col { display: flex; flex-direction: column; justify-content: flex-end; height: 100%; gap: 6px; min-width: 0; }
.barra-col i { display: block; background: var(--g-barra); border-radius: 4px 4px 0 0; opacity: .75; transition: opacity .15s; max-height: var(--alto); }
.barra-col.resalta i, .barra-col:hover i { opacity: 1; }
.barra-col span { font-size: 11px; color: var(--suave); text-align: center; white-space: nowrap; overflow: hidden; height: 16px; }

.sinos { display: grid; gap: 20px; }
.sino p { margin: 0 0 8px; font-weight: 600; font-size: 14px; }
.sino-barra { display: flex; gap: 2px; height: 12px; border-radius: 99px; overflow: hidden; background: var(--tenue); }
.sino-barra .si { background: var(--g-ok); } .sino-barra .no { background: var(--linea); }
.sino-pie { display: flex; justify-content: space-between; font-size: 13px; color: var(--suave); margin-top: 6px; } .sino-pie b { color: var(--tinta); }

.filas { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.filas li { display: grid; grid-template-columns: minmax(0, 14rem) 1fr 44px; gap: 12px; align-items: center; font-size: 14px; }
.f-etq { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.f-barra { height: 10px; } .f-barra i { display: block; height: 100%; background: var(--g-barra); border-radius: 0 4px 4px 0; opacity: .8; }
.filas b { text-align: right; font-variant-numeric: tabular-nums; }

.tabla-ops td { vertical-align: middle; }
.tabla-ops .op { display: flex; align-items: center; gap: 10px; text-decoration: none; color: inherit; }
.tabla-ops .op b { display: inline; } .tabla-ops .op small { display: block; font-size: 13px; color: var(--suave); }
.tabla-ops .op .sello { margin-left: 6px; }
@media (hover: hover) { .tabla-ops .op:hover b { text-decoration: underline; text-underline-offset: 3px; } }
.tabla-ops .reparto { width: 160px; }
.avatar-ch { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--tenue); font: 700 12px Montserrat, sans-serif; color: var(--suave); flex: none; }
.barra-av { height: 8px; width: 110px; border-radius: 99px; background: var(--tenue); overflow: hidden; display: inline-block; vertical-align: middle; margin-right: 8px; }
.barra-av i { display: block; height: 100%; background: var(--g-ok); border-radius: 99px; }

@media (max-width: 1100px) { .kpis { grid-template-columns: 1fr 1fr; } .panel-medio, .panel-medio-par { grid-template-columns: 1fr; } }
@media (max-width: 600px) { .kpis { grid-template-columns: 1fr; } .filas li { grid-template-columns: minmax(0, 8rem) 1fr 40px; } .barra-av { width: 60px; } }