/* ==========================================================================
   Esquel LAB — panel de evaluación
   Registro de herramienta: densidad y escaneabilidad antes que expresión.
   Hereda los tokens de style.css.
   ========================================================================== */

.admin-body { background: var(--paper-2); }

/* ---------- login ---------- */
.login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; }
.login-card { width: 100%; max-width: 390px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 38px 34px; box-shadow: var(--shadow-lg); text-align: center; }
.login-logo { height: 54px; width: auto; margin: 0 auto 18px; }
.login-card h1 { font-size: 23px; margin-bottom: 4px; }
.login-sub { font-size: 14.5px; color: var(--ink-3); margin-bottom: 24px; }
.login-card .field { text-align: left; }
.login-back { display: inline-block; margin-top: 18px; font-size: 14px; color: var(--ink-3); text-decoration: none; }
.login-back:hover { color: var(--berry-ink); }

/* ---------- header ---------- */
.admin-header { background: var(--surface); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 40; }
.admin-header-inner { max-width: 1400px; margin: 0 auto; padding: 0 24px; height: 66px; display: flex; align-items: center; gap: 28px; }
.admin-brand img { height: 40px; width: auto; }
.admin-nav { display: flex; gap: 20px; }
.admin-nav a { color: var(--ink-2); text-decoration: none; font-size: 15px; font-weight: 700; padding: 6px 0; border-bottom: 2px solid transparent; }
.admin-nav a:hover, .admin-nav a.is-active { color: var(--ink); border-color: var(--berry); }
.admin-user { margin-left: auto; display: flex; align-items: center; gap: 16px; font-size: 13.5px; color: var(--ink-3); }
.admin-user a { color: var(--ink-2); text-decoration: none; font-weight: 700; }
.admin-user a:hover { color: var(--berry-ink); }
.admin-user .admin-logout { color: var(--danger); }

@media (max-width: 760px) {
  .admin-header-inner { height: auto; flex-wrap: wrap; padding: 12px 16px; gap: 12px; }
  .admin-user { width: 100%; margin-left: 0; }
}

.admin-main { max-width: 1400px; margin: 0 auto; }
.admin-topbar { padding: 26px 24px 0; display: flex; align-items: baseline; gap: 14px; }
.admin-topbar h1 { font-size: 26px; margin: 0; }
.admin-count { color: var(--ink-3); font-size: 14px; }
.admin-content { padding: 22px 24px 70px; }

/* ---------- métricas ---------- */
.stats { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin-bottom: 22px; }
@media (max-width: 900px) { .stats { grid-template-columns: repeat(2, 1fr); } }
/* El color de la métrica va en un punto junto al rótulo, no en una franja al
   costado de la tarjeta. La franja de color es la marca de fábrica de las
   interfaces hechas a las apuradas, y además era redundante: el rótulo ya dice
   "Acelera" o "Raíz". El punto es el mismo recurso que usa .chip en el resto
   del panel, así que además unifica el lenguaje. */
.stat { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 14px 18px; display: flex; flex-direction: column; }
.stat .k { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); font-weight: 700; display: flex; align-items: center; gap: 7px; }
.stat .v { font-family: var(--font-display); font-size: 27px; font-weight: 700; }
.stat.acelera .k::before, .stat.raiz .k::before, .stat.ok .k::before, .stat.alerta .k::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--c, var(--line-2)); flex: none;
}
.stat.acelera { --c: var(--berry); }
.stat.raiz, .stat.ok { --c: var(--green); }
.stat.alerta { --c: var(--berry); background: var(--berry-soft); border-color: rgba(171,39,89,.28); }
.stat.alerta .v { color: var(--berry-ink); }
/* Las métricas que además filtran son enlaces: tienen que verse pulsables. */
a.stat { text-decoration: none; color: inherit; transition: border-color .15s, box-shadow .15s, transform .1s; }
a.stat:hover { border-color: var(--borde-control); box-shadow: var(--shadow); transform: translateY(-1px); }

/* ---------- filtros ---------- */
.filters { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 18px; }
/* width:auto contra el 100% que style.css le pone a todo campo de formulario:
   acá los filtros van uno al lado del otro, no uno abajo del otro. */
.filters select, .filters input[type=search] { font-family: var(--font-body); font-size: 14px; padding: 9px 12px; border: 1.5px solid var(--borde-control); border-radius: var(--r-sm); background: var(--surface); color: var(--ink); width: auto; min-width: 0; }
.filters select { max-width: 190px; }
.filters input[type=search] { min-width: 210px; flex: 1 1 210px; max-width: 320px; }
@media (max-width: 640px) {
  .filters select, .filters input[type=search] { width: 100%; max-width: none; flex-basis: auto; }
  .filters .grow { display: none; }
}
.filters .clear { font-size: 13.5px; color: var(--ink-3); text-decoration: none; }
.filters .grow { flex: 1; }
.view-toggle { display: flex; border: 1.5px solid var(--line-2); border-radius: 999px; overflow: hidden; }
.view-toggle button { border: 0; background: none; padding: 8px 16px; font-family: var(--font-body); font-size: 13.5px; font-weight: 700; color: var(--ink-2); cursor: pointer; }
.view-toggle button.is-active { background: var(--berry); color: #fff; }

/* ---------- panel / tabla ---------- */
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 22px 24px; }
.panel-title { font-size: 17px; margin-bottom: 16px; }
/* Cada panel dice de qué período habla. Dos de ellos no cambian nunca con el
   selector de arriba —el del día en curso y el de la convocatoria entera— y
   sin decirlo parecían rotos. */
.panel-periodo { display: inline-block; vertical-align: middle; margin-left: 8px; font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: .02em; text-transform: none; color: var(--berry-ink); background: var(--berry-soft); border-radius: 999px; padding: 3px 9px; }
.panel-periodo.es-fijo { color: var(--ink-2); background: var(--paper-2); }
.cols-2 { display: grid; grid-template-columns: 1.7fr 1fr; gap: 20px; align-items: start; }
@media (max-width: 960px) { .cols-2 { grid-template-columns: 1fr; } }

.table-scroll { overflow-x: auto; }
.crm-table { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 780px; }
.crm-table th, .crm-table td { text-align: left; padding: 13px 18px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.crm-table thead th { font-size: 11.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); background: var(--paper-2); font-weight: 700; }
.crm-table tbody tr:last-child td { border-bottom: none; }
.crm-table tbody tr:hover { background: rgba(171,39,89,.035); }
.crm-table .sub { font-size: 12.5px; color: var(--ink-3); }
.crm-table .right { text-align: right; }
.crm-table .nowrap { white-space: nowrap; }
.crm-table .score { font-family: var(--font-mono); font-weight: 700; font-size: 15px; }

.chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 11px 3px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 700; background: color-mix(in srgb, var(--c) 13%, transparent); color: var(--c); white-space: nowrap; }
.chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--c); flex: none; }

.inline { display: inline-flex; margin-right: 6px; }
.btn.danger { color: var(--danger); border-color: rgba(155,44,44,.35); }
.btn.danger:hover { background: var(--danger-soft); border-color: var(--danger); color: var(--danger); }

.empty-state { background: var(--surface); border: 1px dashed var(--line-2); border-radius: var(--r); padding: 56px 20px; text-align: center; color: var(--ink-3); }

/* ---------- kanban ---------- */
.kanban { display: flex; gap: 14px; overflow-x: auto; padding-bottom: 10px; }
.kcol { flex: 0 0 258px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.kcol-head { display: flex; justify-content: space-between; align-items: center; padding: 11px 14px; font-size: 12.5px; font-weight: 700; color: var(--c); background: color-mix(in srgb, var(--c) 9%, transparent); border-bottom: 1px solid var(--line); }
.kcol-head .n { background: var(--surface); border-radius: 999px; padding: 1px 9px; font-size: 11px; }
.kcol-body { padding: 10px; display: flex; flex-direction: column; gap: 8px; max-height: 66vh; overflow-y: auto; }
/* flex: none, o las tarjetas se aplastan.
   La columna es un contenedor flex con altura tope, y en un flex los hijos
   achican por defecto para entrar. Con doce postulaciones en una columna, cada
   tarjeta pedía 96 px y quedaba en 39: se veía el principio del título y nada
   más —ni la línea, ni el responsable, ni el puntaje—. Con flex none cada una
   mide lo que tiene que medir y la columna scrollea, que es para lo que tiene
   el overflow. */
.kcol-body > * { flex: 0 0 auto; }
.kcard { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; width: 100%; text-align: left; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 12px 14px; cursor: pointer; font-family: var(--font-body); transition: border-color .15s, transform .1s; }
.kcard:hover { border-color: var(--berry); transform: translateY(-1px); }
.kcard-f { font-size: 11.5px; color: var(--ink-3); font-family: var(--font-mono); }
.kempty { text-align: center; color: var(--ink-3); padding: 18px 0; font-size: 13px; }

/* ---------- drawer de evaluación ---------- */
.drawer-backdrop { position: fixed; inset: 0; background: rgba(31,29,27,.42); z-index: 90; }
.drawer {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(620px, 100%);
  background: var(--surface); border-left: 1px solid var(--line); z-index: 91;
  display: flex; flex-direction: column; box-shadow: var(--shadow-lg);
}
/* Estos display le ganan al display:none del atributo hidden, y el panel se
   quedaba abierto para siempre. style.css ya lo resuelve en general, pero
   acá va explícito para que no dependa del orden de carga ni del caché. */
.drawer[hidden], .drawer-backdrop[hidden] { display: none; }
.drawer-head { display: flex; align-items: flex-start; gap: 16px; padding: 22px 26px 18px; border-bottom: 1px solid var(--line); }
.drawer-head h2 { font-size: 22px; margin: 0 0 4px; }
.drawer-head .sub { font-size: 13.5px; color: var(--ink-3); margin: 0; }
.drawer-close { margin-left: auto; background: none; border: 1px solid var(--line-2); border-radius: var(--r-sm); width: 34px; height: 34px; font-size: 19px; line-height: 1; cursor: pointer; color: var(--ink-2); flex: none; }
.drawer-close:hover { border-color: var(--berry); color: var(--berry-ink); }
.drawer-body { padding: 24px 26px 40px; overflow-y: auto; flex: 1; }

.d-section { margin-bottom: 28px; }
.d-section h3 { font-size: 12.5px; text-transform: uppercase; letter-spacing: .07em; color: var(--berry-ink); font-family: var(--font-body); font-weight: 700; margin-bottom: 12px; }
.d-answer { margin-bottom: 16px; }
.d-answer .q { font-size: 12.5px; font-weight: 700; color: var(--ink-3); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 3px; }
.d-answer .a { font-size: 14.5px; white-space: pre-wrap; }
.d-answer .a.empty { color: var(--ink-3); font-style: italic; }
.d-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 20px; }
@media (max-width: 560px) { .d-grid { grid-template-columns: 1fr; } }

.crit { margin-bottom: 16px; }
.crit-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 5px; }
.crit-head .name { font-size: 14px; font-weight: 700; }
.crit-head .peso { font-size: 11.5px; color: var(--ink-3); font-family: var(--font-mono); }
.crit-head .val { font-family: var(--font-mono); font-weight: 700; font-size: 16px; color: var(--berry-ink); }
.crit .ayuda { font-size: 12.5px; color: var(--ink-3); margin: 0 0 7px; }
.crit input[type=range] { width: 100%; accent-color: var(--berry); }

.score-box { background: var(--berry-soft); border: 1px solid rgba(171,39,89,.25); border-radius: var(--r); padding: 16px 20px; display: flex; justify-content: space-between; align-items: center; margin-bottom: 22px; }
.score-box .lbl { font-size: 13px; font-weight: 700; color: var(--berry-ink); }
.score-box .num { font-family: var(--font-display); font-size: 30px; font-weight: 700; color: var(--berry-ink); }

.hist { display: flex; flex-direction: column; gap: 8px; }
.hist-row { display: flex; align-items: center; gap: 10px; font-size: 12.5px; color: var(--ink-3); }

.drawer-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; padding-top: 18px; border-top: 1px solid var(--line); background: var(--surface); }
/* Zona de borrado: se distingue del resto para que no se confunda con las
   acciones de todos los días. */
.d-peligro { border: 1px solid rgba(155,44,44,.3); background: var(--danger-soft); border-radius: var(--r); padding: 18px 20px; }
.d-peligro h3 { color: var(--danger); }
.d-peligro .ayuda { margin-top: 0; }
.btn-peligro { background: var(--danger); color: #fff; }
.btn-peligro:hover:not(:disabled) { background: #7F2323; }

.drawer-msg { font-size: 13.5px; font-weight: 700; margin-left: 10px; }
.drawer-msg.ok { color: var(--green-ink); }
.drawer-msg.error { color: var(--danger); }

/* ---------- el jurado ----------
   El sello dice, en todas las vistas y con el mismo formato, cuántos jurados
   votaron sobre cuántos hay. El color no es el único aviso: el número está
   siempre escrito, porque "3/5" se entiende sin distinguir verde de ámbar. */
.jurado-sello { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 12px; font-weight: 700; padding: 3px 9px; border-radius: 999px; border: 1.5px solid; white-space: nowrap; }
.jurado-sello::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.jurado-sello.is-completo { color: var(--green-ink); border-color: rgba(35,111,76,.4); background: var(--green-soft); }
.jurado-sello.is-parcial { color: #7A4E06; border-color: rgba(166,101,14,.4); background: rgba(166,101,14,.09); }
.jurado-sello.is-vacio { color: var(--ink-3); border-color: var(--line-2); background: var(--paper-2); }
.tag-disenso { display: inline-block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--danger); background: var(--danger-soft); border-radius: var(--r-sm); padding: 2px 7px; }
.crm-table tr.sin-mi-voto td:first-child { box-shadow: inset 3px 0 0 var(--berry); }

/* ---------- ranking ---------- */
.ranking { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; }
.rank-row { display: grid; grid-template-columns: 44px minmax(0, 1.5fr) minmax(90px, 1fr) 62px; gap: 14px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line); }
.rank-row:last-child { border-bottom: 0; }
.rank-pos { font-family: var(--font-display); font-size: 20px; font-weight: 700; color: var(--ink-3); text-align: right; font-variant-numeric: tabular-nums; }
.rank-main { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; background: none; border: 0; padding: 4px 6px; margin-left: -6px; border-radius: var(--r-sm); cursor: pointer; text-align: left; font-family: var(--font-body); min-width: 0; width: 100%; }
.rank-main:hover { background: var(--paper-2); }
.rank-nombre { font-weight: 700; font-size: 14.5px; }
.rank-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.rank-barra { background: var(--paper-2); border-radius: 999px; height: 9px; overflow: hidden; }
.rank-barra span { display: block; height: 100%; background: var(--berry); border-radius: 999px; }
.rank-num { font-family: var(--font-mono); font-weight: 700; font-size: 15px; text-align: right; font-variant-numeric: tabular-nums; }
.rank-row.is-sin-votos { opacity: .6; }
@media (max-width: 700px) {
  .rank-row { grid-template-columns: 34px minmax(0, 1fr) 56px; gap: 10px; }
  .rank-barra { display: none; }
}

/* ---------- tablero arrastrable ---------- */
.kcard { position: relative; padding: 0; gap: 0; overflow: hidden; }
.kcard[draggable="true"] { cursor: grab; }
.kcard[draggable="true"]:active { cursor: grabbing; }
.kcard-abrir { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; width: 100%; text-align: left; background: none; border: 0; padding: 13px 14px; cursor: pointer; font-family: var(--font-body); color: var(--ink); }
/* El título manda: primero, más grande y con el peso más alto de la tarjeta.
   Se corta a dos líneas para que una razón social larga no empuje el resto
   fuera de la vista; el nombre entero está en el title del botón. */
.kcard-t { font-size: 15px; font-weight: 700; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.kcard-s { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; font-size: 12.5px; color: var(--ink-3); }
.kcard-linea { display: inline-flex; align-items: center; gap: 5px; font-weight: 700; color: var(--c); }
.kcard-linea::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--c); flex: none; }
.kcard-resp { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kcard-resp::before { content: "· "; }
.kcard-f { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 1px; }
.kcard-pts { font-family: var(--font-mono); font-size: 12px; font-weight: 700; color: var(--ink-2); }
.kcard-mover { display: block; border-top: 1px solid var(--line); }
.kcard-mover select { width: 100%; border: 0; background: var(--paper-2); font-family: var(--font-body); font-size: 12px; font-weight: 700; color: var(--ink-2); padding: 8px 12px; cursor: pointer; }
.kcard-mover select:focus-visible { outline: 2px solid var(--berry); outline-offset: -2px; }
.kcard.arrastrando { opacity: .45; }
.kcard.guardando { border-color: var(--berry); }
.kcol-body.encima { background: var(--berry-soft); outline: 2px dashed var(--berry); outline-offset: -4px; border-radius: var(--r-sm); }
.kanban-ayuda { margin-top: 14px; max-width: 72ch; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------- drawer: pestañas ---------- */
.drawer-tabs { display: flex; gap: 2px; padding: 0 26px; border-bottom: 1px solid var(--line); background: var(--surface); }
.drawer-tabs button { background: none; border: 0; border-bottom: 2px solid transparent; padding: 12px 14px; font-family: var(--font-body); font-size: 14px; font-weight: 700; color: var(--ink-3); cursor: pointer; }
.drawer-tabs button:hover { color: var(--ink); }
.drawer-tabs button.is-active { color: var(--berry-ink); border-bottom-color: var(--berry); }

/* ---------- drawer: consolidado ---------- */
/* El estado del jurado se lee en el fondo y en el texto de al lado, que lo dice
   con todas las letras. No hace falta además una franja de color al costado. */
.consolidado { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--r); padding: 18px 22px; margin-bottom: 24px; }
.consolidado.is-completo { background: var(--green-soft); border-color: rgba(35,111,76,.28); }
.consolidado.is-sin-votos { background: var(--surface); border-style: dashed; border-color: var(--line-2); }
.cons-sub { font-size: 13px; color: var(--ink-3); }
.cons-num { display: flex; flex-direction: column; }
.cons-num .n { font-family: var(--font-display); font-size: 40px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.cons-de { font-size: 12.5px; color: var(--ink-3); font-weight: 700; margin-top: 4px; }
.cons-estado { display: flex; flex-direction: column; gap: 5px; flex: 1; min-width: 200px; }
.je { font-size: 13px; font-weight: 700; }
.je-ok { color: var(--green-ink); }
.je-falta { color: #7A4E06; }
.je-vacio, .je-disenso { color: var(--danger); }
.je-disenso { font-weight: 400; font-size: 12.5px; }

.crit-prom { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.crit-prom li { display: grid; grid-template-columns: minmax(0, 1.4fr) 1fr 34px; gap: 12px; align-items: center; font-size: 13.5px; }
.cp-n { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cp-n .peso { font-family: var(--font-mono); font-size: 11px; color: var(--ink-3); }
.cp-barra { background: var(--paper-2); border-radius: 999px; height: 8px; overflow: hidden; }
.cp-barra span { display: block; height: 100%; background: var(--berry); border-radius: 999px; }
.cp-v { font-family: var(--font-mono); font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }

/* ---------- drawer: mi voto ---------- */
.mi-voto { border: 1.5px solid var(--berry); border-radius: var(--r); padding: 20px 22px; background: var(--surface); }
.mi-voto.ya-vote { border-color: var(--line); }
.mi-voto .pend { display: inline-block; font-size: 11px; letter-spacing: .05em; background: var(--berry); color: #fff; border-radius: var(--r-sm); padding: 2px 7px; margin-left: 6px; vertical-align: middle; }
/* La abstención apaga los deslizadores: si no puntuás, el puntaje no existe. */
.mi-voto-cuerpo[data-apagado] { opacity: .4; pointer-events: none; }
.check-abst { display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; margin-top: 6px; cursor: pointer; }
.check-abst input { margin-top: 3px; width: 17px; height: 17px; accent-color: var(--berry); flex: none; }
.check-abst em { display: block; font-style: normal; font-size: 12.5px; color: var(--ink-3); margin-top: 3px; }

/* ---------- drawer: los votos del resto ---------- */
.voto { border: 1px solid var(--line); border-radius: var(--r-sm); padding: 14px 16px; margin-bottom: 10px; background: var(--surface); }
.voto-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.voto-quien { font-weight: 700; font-size: 14px; }
.voto-baja { font-weight: 400; font-size: 11.5px; color: var(--ink-3); font-style: italic; }
.voto-num { font-family: var(--font-mono); font-weight: 700; font-size: 17px; color: var(--berry-ink); font-variant-numeric: tabular-nums; }
.voto-num.voto-abst { font-size: 12.5px; color: var(--ink-3); font-family: var(--font-body); }
.voto-crit { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.voto-crit li { display: flex; align-items: center; gap: 6px; font-size: 11.5px; background: var(--paper-2); border-radius: var(--r-sm); padding: 3px 9px; color: var(--ink-2); }
.voto-crit b { font-family: var(--font-mono); color: var(--ink); }
/* Esta raya sí se queda. El detector de estilo la marca como franja de acento,
   pero no está al costado de una tarjeta: marca una cita, que es lo que es —el
   comentario textual de otra persona— y así se citan los textos desde antes de
   que existieran las pantallas. */
.voto-com { font-size: 13.5px; white-space: pre-wrap; margin: 11px 0 0; padding-left: 12px; border-left: 2px solid var(--line-2); }
.voto-com.voto-sin { color: var(--ink-3); font-style: italic; border-left-color: var(--line); }
.voto-fecha { font-size: 11.5px; color: var(--ink-3); font-family: var(--font-mono); margin: 10px 0 0; }
.voto-abstencion { background: var(--paper-2); }
.voto-pendiente { border-style: dashed; background: none; }
.voto-falta { font-size: 12.5px; color: var(--ink-3); font-style: italic; }
.estado-fijo { margin: 0 0 8px; }

/* ---------- voto secreto ---------- */
.voto-secreto { border: 1px dashed var(--line-2); border-radius: var(--r-sm); padding: 15px 17px; background: var(--paper); }
.voto-secreto p { margin: 0; font-size: 13.5px; }
.voto-secreto .ayuda { margin-top: 8px; }

/* ---------- comentario del jurado ---------- */
.mi-comentario .req { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; background: var(--berry); color: #fff; border-radius: var(--r-sm); padding: 2px 7px; margin-left: 6px; vertical-align: 1px; }
/* Las pistas están a la vista mientras se escribe, no escondidas en un
   desplegable: un disparador que hay que ir a buscar no dispara nada. */
.pistas { margin: 0 0 10px; padding: 12px 14px 12px 30px; background: var(--paper-2); border-radius: var(--r-sm); font-size: 12.5px; color: var(--ink-2); }
.pistas li { margin-bottom: 4px; }
.pistas li:last-child { margin-bottom: 0; }
.contador { font-family: var(--font-mono); font-size: 12px; font-weight: 700; margin: 6px 0 0; }
.contador.es-corto { color: #7A4E06; }
.contador.es-ok { color: var(--green-ink); }
.btn:disabled { opacity: .45; cursor: not-allowed; transform: none; box-shadow: none; }

/* ---------- respuestas que ya no se preguntan ---------- */
.d-answer.es-vieja .q { color: var(--ink-3); }
.tag-vieja { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-2); background: var(--paper-2); border-radius: var(--r-sm); padding: 2px 6px; letter-spacing: .04em; }
.completar { display: flex; gap: 8px; margin-top: 7px; flex-wrap: wrap; }
.completar input { flex: 1 1 180px; width: auto; font-size: 14.5px; padding: 9px 12px; min-height: 40px; }

/* ---------- analítica: el rango ---------- */
.admin-topbar-analitica { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; flex-wrap: wrap; }
.periodo-activo { margin: 4px 0 0; font-size: 13.5px; color: var(--ink-2); }
.periodo-activo strong { color: var(--ink); }
/* Con pocos días de datos, 7 / 30 / 90 devuelven lo mismo y parece que los
   botones no hacen nada. Este aviso dice desde cuándo hay registros. */
.periodo-aviso { display: block; font-size: 12.5px; color: var(--ink-3); }
/* El fondo del panel ya es --paper-2, así que el riel del selector tenía que
   ser otra cosa: sobre el mismo color no se veía que fuera un control. */
.rango { display: flex; gap: 3px; background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 4px; flex-wrap: wrap; }
.rango a, .rango .rango-custom { padding: 8px 15px; border-radius: 999px; font-size: 13.5px; font-weight: 700; color: var(--ink-2); text-decoration: none; border: 0; background: none; font-family: var(--font-body); cursor: pointer; white-space: nowrap; }
.rango a:hover, .rango .rango-custom:hover { background: var(--paper-2); color: var(--ink); }
.rango a.is-active, .rango .rango-custom.is-active { background: var(--berry); color: #fff; }
.rango a.is-active:hover, .rango .rango-custom.is-active:hover { background: var(--berry-ink); color: #fff; }
.rango-form { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; max-width: 1400px; margin: 12px auto 0; padding: 16px 24px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); }
.rango-form label { display: flex; flex-direction: column; gap: 5px; font-size: 12.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-3); }
.rango-form input[type=date] { width: auto; font-family: var(--font-body); font-size: 15px; padding: 10px 12px; min-height: 44px; border: 1.5px solid var(--borde-control); border-radius: var(--r-sm); background: var(--surface); color: var(--ink); }

/* ---------- los gráficos ----------
   Sin preserveAspectRatio="none": estirar el SVG estira también los círculos
   —que salen ovalados— y las etiquetas. Con el viewBox solo, escala entero y
   se mantiene proporcionado a cualquier ancho de panel. */
.g-wrap { overflow-x: auto; margin-top: 6px; }
.g-svg { width: 100%; height: auto; display: block; overflow: visible; }
/* En un celular, un gráfico de 720 de ancho escalado a 350 deja las etiquetas
   en cinco píxeles. Antes que achicar todo hasta lo ilegible, el gráfico
   conserva un ancho mínimo y se desliza dentro de su propio recuadro: la
   página no se mueve, el gráfico sí. */
@media (max-width: 640px) {
  .g-svg { min-width: 520px; }
}
.g-grid { stroke: var(--line); stroke-width: 1; }
.g-eje, .g-x { font-family: var(--font-mono); font-size: 11px; fill: var(--ink-3); }
.g-ahora { stroke: var(--berry); stroke-width: 1; stroke-dasharray: 3 3; opacity: .5; }
.g-area { opacity: .1; stroke: none; }
.g-linea { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.g-punto { stroke: var(--surface); stroke-width: 1.5; }
.g-dot { fill: var(--berry); stroke: var(--surface); stroke-width: 1.2; opacity: .8; }
.g-dot.tt-activo { opacity: 1; stroke-width: 2; }
.g-hit { fill: transparent; cursor: crosshair; }
.g-cruz { stroke: var(--berry); stroke-width: 1; stroke-dasharray: 2 3; opacity: .6; pointer-events: none; }
.g-punto.es-foco { r: 5.5; stroke-width: 2; }

/* ---------- el cuadro flotante ---------- */
.tt {
  position: fixed; top: 0; left: 0; z-index: 200; pointer-events: none;
  max-width: 280px; background: var(--ink); color: #fff;
  border-radius: var(--r-sm); padding: 10px 13px; box-shadow: var(--shadow-lg);
  font-size: 13px; line-height: 1.45; display: flex; flex-direction: column; gap: 2px;
}
.tt[hidden] { display: none; }
.tt-t { font-weight: 700; font-size: 13.5px; }
/* La primera línea es el dato; las de abajo son la lectura de ese dato, y por
   eso van más apagadas: se distinguen de un vistazo sin leerlas. */
.tt-l { color: rgba(255,255,255,.72); font-size: 12.5px; }
.tt-l:first-of-type { color: #fff; font-family: var(--font-mono); font-size: 13px; }
.heat-c[data-tt] { cursor: pointer; }
.heat-c.tt-activo { outline: 2px solid var(--ink); outline-offset: 1px; }
.cal-dia[data-tt] { cursor: pointer; }
.cal-dia.tt-activo .cal-barra { outline: 2px solid var(--ink); outline-offset: 2px; }
.lista-barras li[data-tt], .paginas li[data-tt] { cursor: pointer; }
.lista-barras li.tt-activo, .paginas li.tt-activo { background: var(--paper-2); border-radius: var(--r-sm); }
.g-franja { fill: var(--paper); }
.g-serie { font-family: var(--font-body); font-size: 12px; font-weight: 700; fill: var(--ink); }
.g-serie-n { font-weight: 400; fill: var(--ink-3); font-size: 11px; }

/* ---------- mapa de calor ---------- */
.heat { overflow-x: auto; }
.heat-grid { display: grid; grid-template-columns: 34px repeat(24, minmax(9px, 1fr)); gap: 2px; align-items: center; min-width: 320px; }
.heat-esq { display: block; }
.heat-hora, .heat-dia { font-family: var(--font-mono); font-size: 10px; color: var(--ink-3); }
.heat-dia { text-align: right; padding-right: 6px; }
.heat-c { display: block; aspect-ratio: 1; border-radius: 2px; background: var(--paper-2); min-height: 9px; }
/* Una sola tinta, de clara a oscura: lo que codifica es cantidad, no identidad. */
.heat-c.n1 { background: #F0D3DE; }
.heat-c.n2 { background: #E0A7BE; }
.heat-c.n3 { background: #CD7A9C; }
.heat-c.n4 { background: #BC4E7B; }
.heat-c.n5 { background: #8A1E47; }
.heat-ref { display: flex; align-items: center; gap: 4px; margin-top: 12px; font-size: 11.5px; color: var(--ink-3); }
.heat-ref .heat-c { width: 13px; height: 13px; min-height: 0; }
.heat-ref span:first-child { margin-right: 4px; }
.heat-ref span:last-child { margin-left: 4px; }

/* ---------- roles ---------- */
.roles-lista { margin: 0; display: flex; flex-direction: column; gap: 12px; }
.roles-lista dt { font-size: 14px; font-weight: 700; display: flex; align-items: center; gap: 8px; }
.roles-lista dd { margin: 2px 0 0; font-size: 13px; color: var(--ink-2); }
.rol-vota { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; background: var(--green-soft); color: var(--green-ink); border-radius: var(--r-sm); padding: 2px 7px; }

/* ---------- actividad de usuarios ---------- */
.actividad { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; }
.act-card { border: 1px solid var(--line); border-radius: var(--r-sm); padding: 15px 17px; background: var(--paper); }
.act-card header { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; }
.act-punto { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.act-nombre { font-weight: 700; font-size: 15px; }
.act-rol { font-size: 11.5px; color: var(--ink-3); }
.act-datos { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; margin: 0; }
.act-datos dt { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-3); font-weight: 700; }
.act-datos dd { margin: 1px 0 0; font-family: var(--font-mono); font-weight: 700; font-size: 16px; }
.act-pie { font-size: 12px; color: var(--ink-3); margin: 13px 0 0; padding-top: 11px; border-top: 1px solid var(--line); }
.act-fallidos { display: block; color: var(--danger); font-weight: 700; margin-top: 3px; }

/* ---------- analítica ---------- */

/* Gráfico de barras en CSS: no vale la pena cargar una librería para esto. */
.grafico { display: flex; align-items: flex-end; justify-content: flex-start; gap: 3px; height: 190px; margin-top: 8px; }
/* max-width: con pocos días una sola barra ocupaba todo el ancho y parecía
   un bloque de color, no un gráfico. */
.barra { flex: 1 1 0; max-width: 56px; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; height: 100%; min-width: 0; }
.barra .col { width: 100%; background: var(--berry); border-radius: 3px 3px 0 0; opacity: .85; transition: opacity .15s; }
.barra:hover .col { opacity: 1; }
.barra .fecha { font-size: 10px; color: var(--ink-3); margin-top: 6px; white-space: nowrap; transform: rotate(-45deg); transform-origin: center; }

.lista-barras { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.lista-barras li { display: grid; grid-template-columns: minmax(90px, 1.1fr) 2fr auto; gap: 12px; align-items: center; font-size: 14px; }
.lb-n { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-barra { background: var(--paper-2); border-radius: 999px; height: 9px; overflow: hidden; }
.lb-barra span { display: block; height: 100%; background: var(--berry); border-radius: 999px; }
.lb-barra span.ok { background: var(--green); }
.lb-v { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.caida { color: var(--danger); font-style: normal; font-size: 12px; font-weight: 700; }

/* ---------- tablero de indicadores ----------
   El color no viaja solo: cada tarjeta dice con letras cómo viene, y el borde
   cambia de grosor además de tono. Una de cada doce personas con ojos de varón
   no separa el verde del rojo, y un tablero que sólo cambia de color no le
   dice nada. */
.bloque-t { font-size: 20px; margin: 4px 0 14px; }
.luces { display: grid; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); gap: 12px; }
.luz { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 15px 17px; cursor: pointer; }
.luz header { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 9px; }
.luz-t { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-3); }
.luz-e { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; border-radius: 999px; padding: 3px 9px; white-space: nowrap; display: inline-flex; align-items: center; gap: 5px; }
.luz-e::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.luz-v { font-family: var(--font-display); font-size: 30px; font-weight: 700; line-height: 1.05; margin: 0; font-variant-numeric: tabular-nums; }
.luz-v .u { font-family: var(--font-body); font-size: 14px; font-weight: 700; color: var(--ink-3); margin-left: 3px; }
.luz-l { font-size: 12.5px; color: var(--ink-2); margin: 7px 0 0; }
.luz-r { font-size: 11.5px; color: var(--ink-3); margin: 6px 0 0; padding-top: 6px; border-top: 1px solid var(--line); }

.luz-ok { border-color: rgba(35,111,76,.4); }
.luz-ok .luz-e { color: var(--green-ink); background: var(--green-soft); }
.luz-ok .luz-v { color: var(--green-ink); }
.luz-alerta { border-color: rgba(166,101,14,.45); }
.luz-alerta .luz-e { color: #7A4E06; background: rgba(166,101,14,.11); }
.luz-alerta .luz-v { color: #7A4E06; }
.luz-mal { border-color: rgba(155,44,44,.45); border-width: 1.5px; }
.luz-mal .luz-e { color: var(--danger); background: var(--danger-soft); }
.luz-mal .luz-v { color: var(--danger); }
.luz-neutro .luz-e { color: var(--ink-3); background: var(--paper-2); }
.luz-neutro .luz-v { color: var(--ink-3); }
.luz.tt-activo { box-shadow: var(--shadow); }
.luces-pie { margin: 14px 0 26px; max-width: 80ch; }
.luces-pie code { background: var(--paper-2); border-radius: 4px; padding: 2px 6px; font-size: 12px; }

/* ---------- la tasa sola ---------- */
/* La fina es el dato crudo y la gruesa la tendencia. La diferencia de grosor
   hace el trabajo: son la misma tinta, así que no hay dos cosas que aprender. */
.g-tasa-dia { fill: none; stroke-width: 1.2; opacity: .45; vector-effect: non-scaling-stroke; }
.g-tasa-media { fill: none; stroke-width: 2.6; stroke-linecap: round; vector-effect: non-scaling-stroke; }
/* Estos dos son muestras de línea, no acentos: reproducen el grosor exacto con
   el que se dibuja cada trazo en el gráfico. El detector de estilo los marca
   como borde de acento porque no puede saber que la raya *es* el dato. */
.cal-leyenda i.ref-fina { width: 18px; height: 0; border-top: 1.5px solid #B5651D; opacity: .5; border-radius: 0; }
.cal-leyenda i.ref-gruesa { width: 18px; height: 0; border-top: 3px solid #B5651D; border-radius: 0; }

/* ---------- embudo de conversión ---------- */
.embudo { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; counter-reset: paso; }
.emb-paso { padding: 12px 14px; border-radius: var(--r-sm); cursor: pointer; }
.emb-paso.tt-activo { background: var(--paper-2); }
.emb-cab { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; margin-bottom: 7px; }
.emb-n { font-size: 14.5px; font-weight: 700; counter-increment: paso; }
.emb-n::before { content: counter(paso) ". "; color: var(--ink-3); font-family: var(--font-mono); font-size: 12.5px; }
.emb-v { font-family: var(--font-mono); font-weight: 700; font-size: 18px; font-variant-numeric: tabular-nums; }
.emb-barra { background: var(--paper-2); border-radius: var(--r-sm); height: 22px; overflow: hidden; }
.emb-barra span { display: block; height: 100%; background: var(--berry); border-radius: var(--r-sm); min-width: 2px;
  /* Sin animación de entrada: el ancho es el dato, y verlo crecer no lo explica
     mejor — sólo obliga a esperar para leerlo. */ }
.emb-pie { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-top: 6px; font-size: 12.5px; }
.emb-pasan { font-weight: 700; color: var(--green-ink); }
.emb-cae { color: #7A4E06; }
/* Una caída de más de la mitad no es un matiz del embudo, es el problema. */
.emb-cae.es-fuerte { color: var(--danger); font-weight: 700; }
.emb-base, .emb-nota { color: var(--ink-3); }
.emb-nota { margin-left: auto; }
@media (max-width: 560px) { .emb-nota { margin-left: 0; width: 100%; } }

.g-fin { font-family: var(--font-body); font-size: 11px; font-weight: 700; }

/* ---------- el día de hoy ---------- */
.hoy-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 22px; flex-wrap: wrap; margin-bottom: 12px; }
.hoy-cifras { display: flex; gap: 26px; flex-wrap: wrap; }
.hc { display: flex; flex-direction: column; }
.hc .k { font-size: 11.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); font-weight: 700; }
.hc .v { font-family: var(--font-display); font-size: 28px; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
.hc .v .u { font-family: var(--font-body); font-size: 13px; font-weight: 700; color: var(--ink-3); margin-left: 5px; }
.hc .d { font-size: 12px; color: var(--ink-3); font-weight: 700; }
.hc .d.sube { color: var(--green-ink); }
.hc .d.baja { color: var(--danger); }

.curva { width: 100%; height: 190px; display: block; margin-top: 4px; }
.curva .g-linea { stroke: var(--line); stroke-width: 1; }
.curva .g-eje, .curva .g-hora { font-family: var(--font-mono); font-size: 10px; fill: var(--ink-3); }
.curva .g-ahora { stroke: var(--berry); stroke-width: 1; stroke-dasharray: 3 3; opacity: .55; }
.curva .g-area { fill: var(--berry); opacity: .1; stroke: none; }
.curva .g-linea-datos { fill: none; stroke: var(--berry); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round;
  /* preserveAspectRatio="none" estira el SVG, y con él el grosor del trazo.
     vector-effect lo mantiene en 2px reales a cualquier ancho de panel. */
  vector-effect: non-scaling-stroke; }
.curva .g-punto { fill: var(--berry); stroke: var(--surface); stroke-width: 1.5; vector-effect: non-scaling-stroke; }

/* ---------- postulaciones por día ---------- */
.calendario { display: grid; grid-template-columns: repeat(var(--dias), minmax(0, 1fr)); gap: 3px; height: 170px; align-items: end; margin-top: 10px; }
.cal-dia { display: flex; flex-direction: column; justify-content: flex-end; align-items: center; height: 100%; min-width: 0; }
.cal-barra { position: relative; width: 100%; height: 100%; display: flex; flex-direction: column-reverse; justify-content: flex-start;
  border-radius: 3px 3px 0 0; overflow: hidden; background: linear-gradient(var(--paper-2), var(--paper-2)) bottom / 100% 3px no-repeat; }
.cal-seg { display: block; width: 100%; min-height: 3px; }
.cal-acelera { background: var(--berry); }
/* Raíz lleva trama además de color.
   Medido con el validador de paletas: el berry y el verde del programa se
   separan 26 puntos para la vista normal y apenas 2,4 bajo deuteranopia, el
   daltonismo más común. Para esa persona las dos líneas son el mismo color.
   Cambiarle el color a Raíz arreglaba la medición y rompía la identidad —en
   todo el resto del sitio es verde—, así que la diferencia la carga la trama,
   que se ve igual sin distinguir ningún color. */
.cal-raiz { background: repeating-linear-gradient(45deg, var(--green) 0 5px, #1A5539 5px 10px); }
.cal-n { position: absolute; left: 0; right: 0; bottom: 3px; text-align: center; font-family: var(--font-mono); font-size: 10px; font-weight: 700; color: #fff; }
.cal-fecha { font-size: 9.5px; color: var(--ink-3); margin-top: 6px; white-space: nowrap; font-family: var(--font-mono); }
/* El día de hoy no se distingue sólo por color: lleva su propia caja. */
.cal-dia.es-hoy .cal-barra { outline: 1.5px solid var(--berry); outline-offset: 1px; border-radius: 3px; }
.cal-dia.es-hoy .cal-fecha { color: var(--berry-ink); font-weight: 700; }
.cal-dia.es-futuro { opacity: .5; }
.cal-leyenda { display: flex; gap: 18px; flex-wrap: wrap; align-items: center; margin-top: 16px; font-size: 12.5px; color: var(--ink-3); }
.cal-leyenda i { display: inline-block; width: 11px; height: 11px; border-radius: 3px; vertical-align: -1px; margin-right: 5px; }
.cal-leyenda i.cal-acelera { background: var(--berry); }
.cal-leyenda i.cal-raiz { background: repeating-linear-gradient(45deg, var(--green) 0 3px, #1A5539 3px 6px); }
.cal-hoy-ref::before { content: ""; display: inline-block; width: 11px; height: 11px; border: 1.5px solid var(--berry); border-radius: 3px; vertical-align: -1px; margin-right: 5px; }

@media (max-width: 700px) {
  /* Igual que los SVG: antes que espichar veintiséis días en trescientos
     píxeles, el calendario mantiene tres píxeles por día y se desliza. */
  .cal-scroll { overflow-x: auto; }
  .calendario { height: 140px; gap: 2px; min-width: calc(var(--dias) * 14px); }
  .cal-n { display: none; }
  .cal-fecha { font-size: 8.5px; }
}

/* ---------- qué se mira ---------- */
.paginas { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 13px; }
.paginas li { display: grid; grid-template-columns: minmax(0, 1.5fr) 1fr auto; grid-template-areas: "ruta barra v" "detalle detalle detalle"; gap: 4px 12px; align-items: center; font-size: 14px; }
.pg-ruta { grid-area: ruta; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pg-barra { grid-area: barra; background: var(--paper-2); border-radius: 999px; height: 8px; overflow: hidden; }
.pg-barra span { display: block; height: 100%; background: var(--berry); border-radius: 999px; }
.pg-v { grid-area: v; font-family: var(--font-mono); font-weight: 700; font-variant-numeric: tabular-nums; }
.pg-detalle { grid-area: detalle; font-size: 12px; color: var(--ink-3); }
@media (max-width: 560px) {
  .paginas li { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "ruta v" "barra barra" "detalle detalle"; }
}

/* ---------- el panel en un celular ----------
   No es una pantalla de escritorio con menos ancho: es la que se usa parada en
   una reunión. Los controles suben a 44px, que es el mínimo con el que un dedo
   acierta (WCAG 2.5.5). */
@media (max-width: 760px) {
  .admin-nav a { padding: 12px 0; }
  .admin-user { gap: 20px; }
  .admin-user a { padding: 11px 0; }
  .filters select, .filters input[type=search], .filters .btn { min-height: 44px; }
  .view-toggle button { min-height: 44px; padding: 8px 18px; }
  .kcard-mover select { min-height: 44px; }
  .drawer-tabs button { min-height: 46px; }
  .drawer-tabs { padding: 0 16px; }
  .drawer-head, .drawer-body { padding-left: 16px; padding-right: 16px; }
  .mi-voto { padding: 16px 14px; }
  .consolidado { padding: 15px 16px; gap: 12px; }
  .cons-num .n { font-size: 34px; }
  /* El deslizador con el dedo: el pulgar tiene que encontrar el control. */
  .crit input[type=range] { height: 34px; }
  .admin-topbar-analitica { flex-direction: column; align-items: stretch; }
  .rango-form { margin: 12px 16px 0; padding: 14px 16px; }
  .rango-form label, .rango-form input[type=date], .rango-form .btn { width: 100%; }
}

/* La tabla de usuarios en un celular se apila.
   Con cinco columnas el scroll horizontal deja a la vista sólo el nombre, que
   es justo el dato que ya sabías. Cada fila pasa a ser una ficha y el nombre de
   la columna viaja en data-col. */
@media (max-width: 720px) {
  .tabla-usuarios, .tabla-usuarios thead, .tabla-usuarios tbody,
  .tabla-usuarios tr, .tabla-usuarios td { display: block; width: auto; min-width: 0; }
  .tabla-usuarios thead { display: none; }
  .tabla-usuarios tr { border: 1px solid var(--line); border-radius: var(--r-sm); padding: 12px 14px; margin-bottom: 10px; background: var(--surface); }
  .tabla-usuarios td { border: 0; padding: 5px 0; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
  .tabla-usuarios td::before { content: attr(data-col); font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-3); font-weight: 700; flex: none; }
  .tabla-usuarios td:first-child::before { content: none; }
  .tabla-usuarios td.right { justify-content: flex-start; flex-wrap: wrap; padding-top: 10px; }
  .tabla-usuarios select { width: auto; min-height: 44px; }
}

/* El selector de rol tiene que entrar entero: "Administrador" salía cortado. */
.tabla-usuarios select { min-width: 150px; }

/* ---------- Historial de las evaluaciones ----------
   Un jurado puede rehacer su evaluación cuantas veces quiera. Acá se ve qué
   cambió en cada guardado.

   Lo tachado y lo subrayado no son adorno: hacen que el cambio se lea sin
   depender del color. Alguien que no distingue rojo de verde —y es una de cada
   doce personas con cromosoma Y— tiene que poder leer esto igual, y en una
   impresión en blanco y negro también. El color acompaña, la forma informa. */
.vers { list-style: none; margin: 0; padding: 0; }
.ver {
  border: 1px solid var(--line); border-radius: var(--r-sm);
  padding: 13px 15px; margin-bottom: 10px; background: var(--surface);
}
.ver-actual { border-color: var(--berry); box-shadow: 0 0 0 1px var(--berry); }
.ver-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.ver-n { font-weight: 700; font-size: 14px; }
.ver-n em { font-style: normal; font-weight: 400; color: var(--berry-ink); font-size: 12.5px; }
.ver-pts { font-family: var(--font-mono); font-size: 15px; font-weight: 700; }
.ver-fecha { font-size: 12.5px; color: var(--ink-3); margin: 3px 0 9px; }
.ver-com {
  font-size: 13.5px; white-space: pre-wrap; margin: 0 0 10px;
  padding-left: 11px; border-left: 2px solid var(--line-2); color: var(--ink-2);
}
.ver-primera, .ver-nota { font-size: 13px; color: var(--ink-3); margin: 0 0 8px; font-style: italic; }
.ver-resumen { font-size: 13px; margin: 0 0 8px; }
.vers-jurado h3 { display: flex; align-items: baseline; gap: 9px; }
.vers-cuenta { font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--ink-3); font-size: 12px; }

/* Cómo se movió cada puntaje. La flecha dice la dirección sin el color. */
.ver-pts-lista { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 4px; }
.ver-pts-lista li { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; }
.ver-pts-lista span { color: var(--ink-2); }
.ver-pts-lista b { font-family: var(--font-mono); white-space: nowrap; }
.ver-pts-lista .delta { font-size: 12px; }
.ver-pts-lista .sube { color: var(--green-ink); }
.ver-pts-lista .baja { color: var(--danger); }

/* El texto con las diferencias. */
.ver-diff {
  font-size: 13.5px; line-height: 1.65; white-space: pre-wrap;
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--r-sm); padding: 11px 13px; max-height: 320px; overflow-y: auto;
}
.ver-diff ins, .ver-resumen ins, .d-section .ayuda ins {
  background: #DFF0E4; color: #14532D; text-decoration: underline;
  text-decoration-thickness: 2px; text-underline-offset: 2px; padding: 0 1px;
}
.ver-diff del, .ver-resumen del, .d-section .ayuda del {
  background: #FBE3E3; color: #7F1D1D; text-decoration: line-through;
  text-decoration-thickness: 2px; padding: 0 1px;
}

/* ---------- Promedio todavía no liberado ----------
   Mientras falte votar alguien, un evaluador no ve el número general. Los tres
   puntos no son un error ni un "no hay datos": dicen que el número existe y
   todavía no se muestra. Una raya se lee como "no la evaluó nadie", que es
   otra cosa completamente distinta. */
.score-reservado { color: var(--ink-3); letter-spacing: .12em; cursor: help; }
.consolidado.is-reservado { border-color: var(--line-2); background: var(--paper); }
.consolidado .n-reservado { color: var(--ink-3); letter-spacing: .08em; }

/* ---------- Contraseña recién generada ----------
   Se muestra una sola vez. No es un aviso que se lee y se va: hay que poder
   copiarla antes de salir de la pantalla, así que va destacada y con su botón,
   y no como una línea más del mensaje de arriba. */
.clave-nueva {
  background: var(--surface); border: 2px solid var(--berry);
  border-radius: var(--r); padding: 20px 22px; margin-bottom: 22px;
}
.clave-nueva h2 { font-size: 17px; margin: 0 0 6px; }
.clave-aviso { font-size: 14px; color: var(--ink-2); margin: 0 0 14px; }
.clave-caja {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  background: var(--paper); border: 1px solid var(--line-2);
  border-radius: var(--r-sm); padding: 12px 14px;
}
.clave-caja code {
  font-family: var(--font-mono); font-size: 19px; font-weight: 700;
  letter-spacing: .01em; color: var(--ink); user-select: all; word-break: break-all;
}
.clave-wa { margin-top: 14px; }
.clave-wa summary { font-size: 14px; font-weight: 700; cursor: pointer; color: var(--berry-ink); }
.clave-wa textarea {
  width: 100%; margin-top: 10px; font-size: 14px; font-family: var(--font-body);
  border: 1px solid var(--line-2); border-radius: var(--r-sm); padding: 10px 12px; resize: vertical;
}
.clave-pie { font-size: 13.5px; color: var(--ink-3); margin: 14px 0 0; }
.btn.ok { background: var(--green-soft); color: var(--green-ink); border-color: var(--green); }

/* Lo que contó cada interesado: puede ser un párrafo, así que no estira la
   tabla a lo ancho ni la deja ilegible. */
.celda-cuenta { max-width: 380px; white-space: normal; font-size: 14px; }