/* La cola de revisión. Mismo stack que `maqueta/static` y `panel/static`:
 * CSS plano, sin build y sin framework.
 *
 * Lo que esta hoja tiene que lograr, y por qué:
 *
 * - **Que la discrepancia salte.** El 82,8 % de los casos son unánimes, así
 *   que lo interesante es la excepción. La banda minoritaria lleva color y
 *   borde; la mayoritaria es gris. Si las dos se vieran igual, lo
 *   interesante se perdería entre lo obvio.
 * - **Que los cuatro estados se distingan a ojo**, no solo en el texto:
 *   cuatro colores, cuatro rótulos.
 * - **Que «familia desconocida» no se parezca a «de afuera».** Son tres
 *   chips con tres colores; el desconocido es el único punteado, porque
 *   «no se sabe» no es un valor más, es la ausencia de uno.
 * - **Que el texto crudo se lea como texto crudo.** `white-space:
 *   pre-wrap` conserva los saltos del modelo y el `\-` o el `**` se ven
 *   literales, que es la forma visual de «aquí no pasó ningún renderer».
 */

:root {
  --tinta: #16202b;
  --tinta-suave: #5a6b7c;
  --papel: #ffffff;
  --fondo: #f4f6f8;
  --linea: #dde3e9;
  --azul: #1f4e79;
  --rojo: #b3261e;
  --ambar: #8a6100;
  --verde: #1b6b3a;
  --gris: #7d8b99; /* lo aún sin juzgar: ≥ 3:1 contra el blanco */
  --violeta: #5b3a8a;
}

* { box-sizing: border-box; }

/* `hidden` TIENE que ocultar. La hoja del navegador trae
   `[hidden]{display:none}`, pero es de ORIGEN UA: pierde contra cualquier
   regla de autor que declare `display` sobre el mismo elemento. Sin esta
   línea, `.login{display:flex}` de más abajo le gana y el gate de login
   queda pintado sobre la pantalla con el atributo `hidden` puesto —que es
   exactamente lo que pasaba: quien llegaba con sesión viva de Google veía
   `caja.hidden = true` en el DOM y la tarjeta igual tapándolo todo, sin
   botón, sin mensaje y con `position:fixed; inset:0; z-index:10` comiéndose
   los clics—.

   Va GLOBAL y no en `.login[hidden]`: el defecto no es de ese elemento, es
   de cualquiera que combine `hidden` con una clase o un id que traiga
   `display`. Hoy en esta hoja el único expuesto es `.login`, pero el front
   oculta tres elementos con `hidden` (`#login`, `#login-btn`, `#banner`) y
   el de al lado —la maqueta, de donde viene esta hoja— ya tiene un
   `.login-caja #login-btn{display:flex}` esperando a que alguien lo copie.
   Un arreglo por caso deja vivo el próximo.

   Y va con `!important` porque sin eso no alcanza: una `[hidden]` pelada
   es (0,1,0) y pierde contra `.login-caja #login-btn` (1,1,0) o contra
   cualquier id. Con `!important` gana sin depender del orden ni de la
   especificidad.

   Mismo arreglo, palabra por palabra, que `maqueta/static/styles.css` y
   `panel/static/styles.css`. Esta hoja nació de la de la maqueta y se
   quedó sin esta línea. */
[hidden] { display: none !important; }

body {
  margin: 0;
  font: 15px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
        Helvetica, Arial, sans-serif;
  color: var(--tinta);
  background: var(--fondo);
}

code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .92em; }

/* --- cabecera, navegación y pestañas: ver «El rediseño» al final --- */

main { padding: 0 20px 48px; }
.loading, .vacio { color: var(--tinta-suave); }
.resumen { max-width: 70ch; }
.nota { color: var(--tinta-suave); font-size: 13px; max-width: 70ch; }

/* --- avisos ------------------------------------------------------------ */

.aviso {
  margin: 10px 0; padding: 10px 12px; border-radius: 6px;
  background: #fff7e6; border-left: 4px solid var(--ambar);
  max-width: 78ch;
}
.aviso.error { background: #fdeceb; border-left-color: var(--rojo); }
.aviso.hecho { background: #eaf5ee; border-left-color: var(--verde); }

/* --- fichas ------------------------------------------------------------ */

.forma { font-weight: 600; color: var(--azul); }
.meta { color: var(--tinta-suave); font-size: 13px; }

.chip {
  display: inline-block; padding: 1px 8px; border-radius: 999px;
  font-size: 12px; line-height: 18px; border: 1px solid transparent;
}

/* --- el reparto de veredictos ------------------------------------------ */

.jueces { margin: 12px 0; }
.reparto-cab { display: flex; align-items: baseline; gap: 10px; }
.reparto-cifra { font-size: 26px; font-weight: 700; letter-spacing: .5px; }
.reparto-de { color: var(--tinta-suave); font-size: 13px; }
.partido-por-familia {
  background: #efe7fa; color: var(--violeta); border-color: #cbb6e8;
  font-weight: 600;
}

.sin-juez-de-la-casa {
  background: #fff1f4; color: #8a2342; border-color: #e8b2c2; font-weight: 600;
}
.polaridad-consenso { background: #eef1f4; color: #4a5a68; border-color: #d3dae1; }

/* Una decisión humana puesta: los veredictos pasan a ser contexto. Van
 * atenuados y con su rótulo, no escondidos — son el porqué de que hiciera
 * falta una persona. */
.decidida {
  margin: 10px 0; padding: 10px 12px; border-radius: 6px; border: 1px solid;
}
.decidida-tit { display: block; }
.decidida-nota, .decidida-polaridad, .decidida-eliminada {
  margin: 6px 0 0; font-size: 13px; max-width: 78ch;
}
.decidida-eliminada { font-weight: 600; }
.jueces.superados { opacity: .82; }
.jueces-rotulo {
  margin: 0 0 6px; font-size: 12px; text-transform: uppercase;
  letter-spacing: .04em; color: var(--tinta-suave);
}
.nem { margin: 8px 0 0; font-size: 13px; }
.nem.superado { text-decoration: line-through; color: var(--tinta-suave); }

.banda {
  margin: 8px 0; padding: 8px 10px; border-radius: 6px;
  background: #f7f9fb; border-left: 4px solid var(--linea);
}
/* La excepción lleva el color. Lo normal es el acuerdo. */
.banda.minoria { background: #fff4ef; border-left-color: #d9642a; }
.banda-cab { display: flex; align-items: baseline; gap: 8px; }
.banda-n { font-weight: 700; font-size: 17px; }
.banda-polaridad { font-weight: 600; }
.minoria-chip { background: #ffe6d9; color: #8a3b0f; border-color: #e8b795; }

.juez { display: flex; align-items: baseline; gap: 8px; padding: 2px 0 2px 14px; }
.modelo { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; }

/* --- las tres familias, y el tercero NO es el segundo ------------------ */

.casa-si { background: #e4edf6; color: var(--azul); border-color: #b9cfe4; }
.casa-no { background: #f1eef4; color: #5b4a6b; border-color: #d6cde0; }
.casa-desconocida {
  background: transparent; color: var(--tinta-suave);
  border: 1px dashed #9fadba; font-style: italic;
}

/* --- la respuesta cruda ------------------------------------------------ */

.respuesta { margin: 12px 0; }
.crudo {
  word-break: break-word;
  background: #fbfcfd; border: 1px solid var(--linea); border-radius: 6px;
  padding: 12px 14px; max-width: 86ch;
}
.crudo mark.mencion {
  background: #ffe9a8; padding: 0 2px; border-radius: 3px;
  box-shadow: 0 0 0 1px #e0c66a;
}
.crudo p, .crudo li, .crudo td, .crudo th, .crudo h3, .crudo h4,
.crudo h5, .crudo h6 { white-space: pre-wrap; }
.crudo > :first-child { margin-top: 0; }
.crudo > :last-child { margin-bottom: 0; }
.crudo p { margin: 0 0 .7em; }
.crudo h3, .crudo h4, .crudo h5, .crudo h6 { margin: .9em 0 .4em; line-height: 1.3; }
.crudo h3 { font-size: 1.15em; } .crudo h4 { font-size: 1.05em; }
.crudo h5, .crudo h6 { font-size: 1em; }
.crudo ul, .crudo ol { margin: 0 0 .7em; padding-left: 1.5em; }
.crudo hr { border: 0; border-top: 1px solid var(--linea); margin: .9em 0; }
.crudo blockquote { margin: 0 0 .7em; padding-left: 12px; border-left: 3px solid var(--linea); color: var(--tinta-suave); }
.crudo code { background: #f0f2f5; padding: 0 3px; border-radius: 3px; font-size: .92em; }
.crudo pre { background: #f0f2f5; padding: 8px 10px; border-radius: 4px; overflow-x: auto; margin: 0 0 .7em; }
.crudo pre code { background: none; padding: 0; white-space: pre; }
/* Tablas anchas: el scroll es de la tabla, no de la ficha. */
.md-tabla { overflow-x: auto; max-width: 100%; margin: 0 0 .7em; }
.md-tabla table { border-collapse: collapse; font-size: .95em; }
.md-tabla th, .md-tabla td { border: 1px solid var(--linea); padding: 4px 8px; vertical-align: top; text-align: left; }
.md-tabla th { background: #f0f2f5; }
.mencion-literal { background: #f0f2f5; padding: 0 4px; border-radius: 3px; }

.botones { display: flex; flex-wrap: wrap; gap: 10px; }
.btn {
  font: inherit; padding: 9px 14px; border-radius: 6px; cursor: pointer;
  border: 1px solid var(--linea); background: var(--papel);
}
.btn:disabled { opacity: .45; cursor: not-allowed; }

/* El bloque de decidir la polaridad. */
.polaridades { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0; }
.polaridad-opcion {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  padding: 6px 12px; border: 1px solid var(--linea); border-radius: 6px;
  background: var(--papel);
}
.polaridad-opcion.elegida { border-color: var(--verde); background: #eaf5ee; }
input.motivo {
  display: block; width: 100%; max-width: 78ch; box-sizing: border-box;
  font: inherit; padding: 8px 10px; margin: 6px 0 10px;
  border: 1px solid var(--linea); border-radius: 6px;
}
.btn.guardar { border-color: #a9cdb8; color: var(--verde); }
.btn.retirar { border-color: #e0a9a4; color: var(--rojo); }
.confirmar-retiro { margin-top: 10px; }
.confirmar-retiro .aviso { margin-top: 0; }
.btn.retirar.confirmar:disabled { color: inherit; }

/* --- login --------------------------------------------------------------- */

.login {
  position: fixed; inset: 0; background: rgba(244, 246, 248, .97);
  display: flex; align-items: center; justify-content: center; z-index: 10;
}
.login-caja {
  background: var(--papel); border: 1px solid var(--linea); border-radius: 10px;
  padding: 28px 30px; max-width: 54ch;
}
.login-caja h2 { margin: 0 0 10px; font-size: 18px; }
.btn-login {
  font: inherit; padding: 9px 16px; border-radius: 6px; cursor: pointer;
  background: var(--azul); color: #fff; border: none;
}
.of { margin-top: 14px; }

.banner { margin: 10px 20px; }

.decidida-por { margin: .5rem 0; }
.decidida-motivo { margin: .15rem 0 0; color: var(--tenue, #5b6470); }
.paginas { display: flex; gap: .75rem; align-items: center; margin: 1rem 0; }

/* =====================================================================
 * El rediseño de la cola de Polaridad (maqueta aprobada por JP)
 * =====================================================================
 *
 * Una columna con el bloque de la mención fijo al bajar y, a la derecha, lo
 * que dijeron los jueces y la decisión, también fijos. La respuesta baja con
 * la página: un solo scroll. En pantallas angostas queda fija solo la barra
 * de apariciones. Sin fuentes externas: el back-office no pide nada afuera.
 * Solo tema claro (el resto de esta hoja no tiene tema oscuro); los íconos
 * usan `currentColor` para que lo tengan el día que se agregue. */

:root {
  --sunk: #e9eeec; --accent: #1d5c63; --accent-fg: #ffffff;
  --accent-soft: #dcebec; --mark: #ffe58a; --mark-fg: #18211f;
  --mark-soft: #fdf3cf; --ppx: #20808D;
  --pos: #1f7a45; --pos-soft: #dff1e5; --neu: #4f6075; --neu-soft: #e4e9f0;
  --neg: #b3322b; --neg-soft: #f8e1df; --mix: #8a5a00; --mix-soft: #f6ead0;
  --warn: #8a5a00; --warn-soft: #fbf0d6;
}

.sr {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}
.tnum { font-variant-numeric: tabular-nums; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .86em; }
.muted { color: var(--tinta-suave); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.tipbox {
  position: fixed; z-index: 30; max-width: min(300px, calc(100vw - 16px));
  background: var(--tinta); color: #fff; font-size: 13px; line-height: 1.4;
  padding: 7px 10px; border-radius: 8px; pointer-events: none;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .25);
}

/* --- cabecera y navegación del administrador ---------------------------- */

.adm-top {
  display: flex; align-items: center; gap: 12px; padding: 10px 16px;
  background: var(--papel); border-bottom: 1px solid var(--linea);
}
.adm-top h1 { margin: 0; flex: none; font-size: 17px; }
.adm-navegacion { flex: 1 1 auto; min-width: 0; }
.adm-nav { display: flex; gap: 2px; overflow-x: auto; scrollbar-width: thin; }
.adm-nav a {
  display: flex; align-items: center; gap: 6px; padding: 7px 12px;
  border-radius: 8px; color: var(--tinta); white-space: nowrap;
  text-decoration: none; font-size: 14.5px;
}
.adm-nav a[aria-current="page"] {
  background: var(--accent-soft); color: var(--accent); font-weight: 700;
}
.adm-nav a.off { color: var(--tinta-suave); opacity: .75; cursor: default; }
.soon {
  font-size: 10.5px; letter-spacing: .05em; text-transform: uppercase;
  border: 1px solid var(--linea); border-radius: 999px; padding: 0 6px;
}
.adm-top .quien { flex: none; }
@media (max-width: 1000px) {
  .adm-top { flex-wrap: wrap; }
  .adm-navegacion { order: 3; flex-basis: 100%; }
}

.adm-cabeza { padding: 16px 24px 0; display: flex; flex-direction: column; gap: 14px; }
.adm-cabeza .head { display: flex; flex-direction: column; gap: 4px; }
.adm-cabeza .head h2 { margin: 0; font-size: 26px; line-height: 1.2; }
.adm-cabeza .head p { margin: 0; color: var(--tinta-suave); max-width: 70ch; }
details.info { font-size: 14px; color: var(--tinta-suave); }
details.info summary { cursor: pointer; color: var(--accent); width: max-content; max-width: 100%; }
details.info ul {
  margin: 8px 0 0; padding-left: 20px; max-width: 70ch;
  display: flex; flex-direction: column; gap: 4px;
}

.tabs { display: flex; gap: 4px; padding: 0; border-bottom: 1px solid var(--linea); overflow-x: auto; }
.tab {
  background: none; border: none; border-bottom: 3px solid transparent;
  padding: 10px 14px 9px; cursor: pointer; color: var(--tinta-suave);
  font: inherit; font-weight: 700; white-space: nowrap;
  display: flex; gap: 8px; align-items: baseline; border-radius: 0;
}
.tab:hover { background: none; }
.tab[aria-selected="true"] { color: var(--tinta); border-bottom-color: var(--accent); }
.tab .n {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px;
  font-weight: 600; background: var(--sunk); border-radius: 999px; padding: 1px 8px;
  color: var(--tinta);
}
.tab[aria-selected="true"] .n { background: var(--accent); color: var(--accent-fg); }

.adm-cabeza .row, .pendientes .row, .hist .row {
  display: flex; gap: 12px; align-items: center; flex-wrap: wrap;
  justify-content: space-between;
}
.seg { display: inline-flex; background: var(--sunk); border-radius: 999px; padding: 3px; }
.seg button {
  border: none; background: none; border-radius: 999px; padding: 5px 14px;
  cursor: pointer; color: var(--tinta-suave); font: inherit;
}
.seg button[aria-pressed="true"] {
  background: var(--papel); color: var(--tinta); font-weight: 700;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .12);
}
.chips { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.chips .lbl { font-size: 13px; color: var(--tinta-suave); }
.chips .chip {
  border: 1px solid var(--linea); background: var(--papel); border-radius: 999px;
  padding: 5px 12px; cursor: pointer; display: flex; gap: 6px; align-items: baseline;
  font: inherit; line-height: 1.4; color: var(--tinta);
}
.chips .chip b { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; }
.chips .chip[aria-pressed="true"] {
  border-color: var(--accent); background: var(--accent-soft);
  color: var(--accent); font-weight: 700;
}

/* --- la mención --------------------------------------------------------- */

.pendientes { display: flex; flex-direction: column; gap: 16px; padding-top: 16px; }
.pendientes .note, .decididas .note { margin: 0; }
.work { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 20px; align-items: start; }
.pendientes .card, .hist .card {
  background: var(--papel); border: 1px solid var(--linea); border-radius: 10px;
  padding: 18px 20px; min-width: 0; margin: 0;
}
.pendientes .meta, .hist .meta {
  display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 13px;
  color: var(--tinta-suave); align-items: baseline;
}
.meta b { color: var(--tinta); }
.tit-chico { margin: 0; font-size: 16px; font-weight: 700; line-height: 1.2; }
.fhead h2 { margin: 2px 0 0; font-size: 20px; line-height: 1.2; }
.q { margin: 8px 0 0; padding: 8px 12px; background: var(--sunk); border-radius: 8px; }
.q small, .lbl-s {
  display: block; font-size: 12px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--tinta-suave); margin-bottom: 2px;
}
.q p { margin: 0; font-size: 15px; }
.rid { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; color: var(--tinta-suave); }
.idbox { display: inline-flex; gap: 6px; align-items: baseline; }
.copybtn {
  font-size: 11.5px; border: 1px solid var(--linea); background: var(--papel);
  color: var(--accent); border-radius: 6px; padding: 0 7px; cursor: pointer; font: inherit;
  font-size: 11.5px;
}

/* El encabezado de la ficha queda fijo; la respuesta corre por la página. */
.stick {
  position: sticky; top: 0; z-index: 5; background: var(--papel);
  margin: -18px -20px 0; padding: 12px 20px 10px; border-bottom: 1px solid var(--linea);
  border-radius: 10px 10px 0 0; box-shadow: 0 6px 10px -8px rgba(0, 0, 0, .25);
}
.occnav {
  display: flex; flex-wrap: nowrap; align-items: center; justify-content: space-between;
  gap: 8px 12px; margin-top: 8px; font-size: 14px;
}
.occlbl { margin: 0; }
.occctl { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: flex-end; min-width: 0; }
.occcount { font-weight: 700; padding: 2px 4px; border-radius: 4px; white-space: nowrap; }
.occcount b { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; }
.pendientes .btn {
  border: none; border-radius: 8px; padding: 11px 16px; font-weight: 700;
  cursor: pointer; background: var(--accent); color: var(--accent-fg);
}
.pendientes .btn:disabled, .hist .btn:disabled { background: var(--sunk); color: var(--tinta-suave); cursor: not-allowed; opacity: 1; }
.pendientes .btn.ghost, .hist .btn.ghost {
  background: transparent; color: var(--accent); border: 1px solid var(--linea);
}
.pendientes .btn.sm { padding: 4px 10px; font-size: 13px; }
.pendientes .btn.retirar, .hist .btn.retirar.confirmar {
  background: var(--neg); color: #fff; border: none; border-radius: 8px;
  padding: 9px 14px; font-weight: 700; cursor: pointer;
}
.pendientes .btn.retirar:disabled, .hist .btn.retirar.confirmar:disabled { background: var(--sunk); color: var(--tinta-suave); }
.pendientes .btn.cancelar, .hist .btn.cancelar {
  background: transparent; color: var(--accent); border: 1px solid var(--linea);
  border-radius: 8px; padding: 9px 14px; font-weight: 700; cursor: pointer;
}
.pendientes .btn.arrow { font-size: 17px; line-height: 1; padding: 2px 11px; }
.pill {
  display: inline-flex; align-items: center; gap: 6px; border-radius: 999px;
  padding: 1px 10px; font-weight: 700; font-size: 13px; white-space: nowrap;
}
.pill::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.pill.sm { font-size: 12px; padding: 0 8px; }
.p-positivo { color: var(--pos); background: var(--pos-soft); }
.p-neutral { color: var(--neu); background: var(--neu-soft); }
.p-negativo { color: var(--neg); background: var(--neg-soft); }
.p-mixto { color: var(--mix); background: var(--mix-soft); }
.p-sin { color: var(--tinta-suave); background: var(--sunk); }
.p-now { color: var(--mark-fg); background: var(--mark); }
.p-now::before { background: var(--mark-fg); }
.p-none { color: var(--tinta-suave); background: var(--sunk); }

/* La respuesta: resaltado fuerte para la que se decide, suave para las demás. */
.answer { font-size: 15px; max-width: 72ch; margin-top: 12px; }
.answer .crudo { background: none; border: none; padding: 0; max-width: none; }
.crudo mark.occ { background: var(--mark); color: var(--mark-fg); padding: 0 3px; border-radius: 3px; font-weight: 700; box-shadow: none; scroll-margin-top: 240px; scroll-margin-bottom: 80px; }
.crudo mark.occ-other { background: var(--mark-soft); color: inherit; font-weight: 400; }
.crudo mark.occ-active { outline: 2px solid var(--tinta); outline-offset: 1px; }
.md-imagen {
  display: inline-block; font-size: 12px; color: var(--tinta-suave);
  border: 1px dashed var(--linea); border-radius: 6px; padding: 1px 8px;
}
.crudo h3, .crudo h4 { font-size: 16px; }
.goto { display: none; }

/* --- el panel de la derecha ---------------------------------------------- */

.panel { position: sticky; top: 8px; display: flex; flex-direction: column; gap: 14px; }
.votes { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.vote {
  display: flex; justify-content: space-between; gap: 10px; align-items: center;
  padding: 8px 10px; border-radius: 8px; background: var(--sunk); flex-wrap: wrap;
}
.split { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; }
.jdg, .surf { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.surf { vertical-align: -3px; }
.pico { width: 16px; height: 16px; flex: none; color: var(--tinta); }
.pico-perplexity { color: var(--ppx); }

.decision { display: flex; flex-direction: column; gap: 14px; }
.decision .campos { border: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.decision legend { padding: 0; margin-bottom: 8px; }
.choices { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.choice { position: relative; }
.choice input { position: absolute; opacity: 0; pointer-events: none; }
.choice label {
  display: flex; align-items: center; gap: 8px; border: 1.5px solid var(--linea);
  border-radius: 8px; padding: 9px 10px; cursor: pointer; font-weight: 700;
  background: var(--papel);
}
.choice label::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--dot, var(--tinta-suave)); flex: none; }
.choice input:checked + label { border-color: var(--dot); background: var(--soft); color: var(--dot); }
.choice input:focus-visible + label { outline: 2px solid var(--accent); outline-offset: 2px; }
.choice input:disabled + label { opacity: .5; cursor: not-allowed; }
.c-positivo { --dot: var(--pos); --soft: var(--pos-soft); }
.c-neutral { --dot: var(--neu); --soft: var(--neu-soft); }
.c-negativo { --dot: var(--neg); --soft: var(--neg-soft); }
.c-mixto { --dot: var(--mix); --soft: var(--mix-soft); }
.field { display: flex; flex-direction: column; gap: 6px; }
.field label.t { font-weight: 700; font-size: 14px; }
.field .opt { font-weight: 400; color: var(--tinta-suave); }
.decision textarea {
  width: 100%; min-height: 64px; border: 1px solid var(--linea); border-radius: 8px;
  padding: 8px 10px; background: var(--papel); resize: vertical; font: inherit;
}
.pendientes .btn.guardar { background: var(--accent); color: var(--accent-fg); border: none; }
.pendientes .btn.guardar:disabled { background: var(--sunk); color: var(--tinta-suave); }
.sign { font-size: 12.5px; color: var(--tinta-suave); }
.alert { border-radius: 8px; padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; font-size: 14.5px; }
.alert.warn { background: var(--warn-soft); border: 1px solid var(--warn); }
.alert.warn strong { color: var(--warn); }

/* La última decisión guardada, con su Deshacer. */
.ultima {
  display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center;
  padding: 10px 14px; border-radius: 10px; background: var(--accent-soft);
  border: 1px solid var(--linea); font-size: 14px;
}
.ultima .confirmar-retiro { flex: 1 1 100%; margin: 0; }
.tbtn {
  background: transparent; border: 1px solid currentColor; color: var(--accent);
  border-radius: 6px; padding: 3px 10px; font-weight: 700; cursor: pointer; font: inherit;
  font-weight: 700;
}
.empty { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }

/* --- Decididas ------------------------------------------------------------ */

.decididas { padding-top: 16px; }
.hist { display: flex; flex-direction: column; gap: 10px; margin: 10px 0; }
.hrow { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 16px; align-items: start; }
.hrow h3 { margin: 0; font-size: 16px; }
.hrow .why { margin: 4px 0 0; font-size: 14px; }
.hrow .meta { margin-top: 4px; }
.hrow .retire, .hrow .aviso { grid-column: 1 / -1; }
.hrow .retire { border-top: 1px dashed var(--linea); padding-top: 12px; margin-top: 6px; }
.hrow details.info { margin-top: 8px; }
.hrow .btn.ghost { padding: 8px 14px; border-radius: 8px; font-weight: 700; cursor: pointer; }

/* --- Atribución: una fila por aparición ------------------------------------ */

.atribucion { padding-top: 16px; }
/* --- La barra de filtros (categoría y marca), común a las dos pestañas ---
 * Va arriba de las pestañas, como una tarjeta: rótulo arriba de cada campo
 * (igual que en Marcas), los dos campos y «Copiar enlace» en una fila. */
.flt {
  display: flex; flex-direction: column; gap: 6px;
  background: var(--papel); border: 1px solid var(--linea); border-radius: 10px;
  padding: 12px 14px;
}
.flt-fila { display: flex; flex-wrap: wrap; gap: 12px 16px; align-items: flex-end; }
.flt-campo { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.flt-campo label, .flt-campo .lbl { font-size: 13px; color: var(--tinta-suave); }
.flt-categoria { flex: 0 1 280px; min-width: 180px; }
.flt-marca { flex: 1 1 300px; max-width: 440px; }
.flt-mueve { justify-content: flex-end; min-height: 36px; }
.flt-interruptor { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--tinta); cursor: pointer; }
.flt-interruptor input { width: 16px; height: 16px; margin: 0; }
.flt-acciones { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.flt-copiar { color: var(--accent); border-color: var(--linea); font-weight: 600; }
.flt-copiar:hover { background: var(--accent-soft); border-color: var(--accent); }
.flt-copiado { font-size: 13px; color: var(--tinta-suave); min-height: 1em; }
.flt-ayuda { margin: 0; font-size: 13px; color: var(--tinta-suave); }
.flt-aviso {
  margin: 0; font-size: 13.5px; padding: 6px 10px; border-radius: 8px;
  background: var(--warn-soft); color: var(--warn);
}
.flt .inp { min-height: 38px; }
.flt .inp:hover { border-color: #c4cdd6; }
.flt .inp:focus, .flt .inp:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 0; border-color: var(--accent);
}
.flt-elegida {
  display: inline-flex; align-items: center; gap: 4px; align-self: flex-start;
  min-height: 38px; padding: 4px 4px 4px 14px; border-radius: 999px;
  border: 1px solid var(--accent); background: var(--accent-soft); color: var(--accent);
}
.flt-elegida .marca-elegida { overflow-wrap: anywhere; }
.flt-quitar {
  font: inherit; font-size: 18px; line-height: 1; width: 28px; height: 28px;
  border: 0; border-radius: 999px; background: transparent; color: inherit; cursor: pointer;
}
.flt-quitar:hover { background: var(--papel); }

/* El combobox de marca: la lista se abre DEBAJO del campo, sobre la página,
 * sin empujarla; la ayuda va bajo la barra y no la tapa. */
.combo { position: relative; margin: 0; display: flex; flex-direction: column; gap: 4px; }
.combo-lista {
  position: absolute; z-index: 25; top: calc(100% + 4px); left: 0; right: 0;
  list-style: none; margin: 0; padding: 4px; max-height: 300px; overflow-y: auto;
  background: var(--papel); border: 1px solid var(--linea); border-radius: 10px;
  box-shadow: 0 10px 28px rgba(22, 32, 43, .14);
}
.combo-lista .sugerencia {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding: 7px 10px; border-radius: 6px; cursor: pointer; color: var(--tinta);
}
.combo-lista .sugerencia:hover { background: var(--fondo); }
.combo-lista .sugerencia[aria-selected="true"] { background: var(--accent-soft); color: var(--accent); }
.combo-lista mark { background: none; color: inherit; font-weight: 700; padding: 0; }
.combo-n {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px;
  color: var(--tinta-suave); flex: none;
}
.combo-lista .sugerencia[aria-selected="true"] .combo-n { color: var(--accent); }
.combo-vacio { padding: 8px 10px; font-size: 14px; color: var(--tinta-suave); }

/* La lista de marcas de «Es otra marca», con los mismos estados. */
.modal .sugerencias {
  list-style: none; margin: 4px 0 0; padding: 4px; max-height: 240px; overflow-y: auto;
  border: 1px solid var(--linea); border-radius: 10px; background: var(--papel);
}
.sugerencias li .sugerencia {
  display: block; width: 100%; text-align: left; padding: 7px 10px; text-decoration: none;
  font: inherit; color: var(--tinta); background: none; border: 0; border-radius: 6px; cursor: pointer;
}
.sugerencias li .sugerencia:hover { background: var(--fondo); }
.sugerencias li .sugerencia:focus-visible { background: var(--accent-soft); color: var(--accent); }

/* Dentro de cada pestaña: la pregunta que se contesta y, debajo, qué
 * lista se ve, alineado a la izquierda. */
.pestana { display: flex; flex-direction: column; gap: 10px; }
.pestana-pregunta { margin: 0; font-weight: 600; font-size: 15.5px; }
.adm-cabeza .pestana-fila { justify-content: flex-start; gap: 12px 20px; }

@media (max-width: 720px) {
  .flt-acciones { margin-left: 0; }
  .flt-categoria, .flt-marca { flex: 1 1 100%; max-width: none; }
}
.filtros-todas { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0 0 10px; }
.filtros-todas label { font-size: 13px; color: var(--tinta-suave); }
.filtros-todas .inp { width: auto; max-width: 100%; }
.por-estado {
  display: flex; flex-wrap: wrap; gap: 6px 14px; list-style: none; margin: 0 0 12px; padding: 0;
  font-size: 13px; color: var(--tinta-suave);
}
.estado-aparicion {
  display: inline-block; font-size: 12.5px; padding: 1px 8px; border-radius: 999px;
  background: var(--sunk); color: var(--tinta);
}
.estado-aparicion.est-no_es_la_marca { background: var(--neg-soft); color: var(--neg); }
.estado-aparicion.est-asignada, .estado-aparicion.est-es_la_marca { background: var(--pos-soft); color: var(--pos); }
.estado-aparicion.est-dudosa, .estado-aparicion.est-sospecha { background: var(--warn-soft); color: var(--warn); }
.atable .pregunta { margin: 4px 0 0; font-size: 13px; color: var(--tinta-suave); }
.atable .plataforma { display: block; font-size: 13px; color: var(--tinta-suave); }
.td-dec .otra-marca { margin-top: 6px; font-size: 12.5px; padding: 2px 8px; }
.confirmar-otra { background: var(--sunk); border-radius: 8px; padding: 10px 12px; }
.otra-elegida .linkbtn { margin-left: 6px; }
.atribucion .resumen { margin: 0 0 12px; }
.tablewrap { overflow-x: auto; }
.atable { width: 100%; border-collapse: collapse; background: var(--papel); }
.atable th, .atable td {
  border-bottom: 1px solid var(--linea); padding: 12px 12px; text-align: left;
  vertical-align: top;
}
.atable th { font-size: 13px; color: var(--tinta-suave); background: var(--fondo); }
.atable .th-dec, .atable .td-dec { width: 190px; }
.atable .td-ext { min-width: 320px; max-width: 70ch; }
.atable tr.grupo td {
  background: var(--accent-soft); color: var(--accent); font-size: 14px;
  padding: 8px 12px;
}
.atable tr.is-done td { background: #f7f9f8; }
.atable .where { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 12.5px; color: var(--tinta-suave); }
.atable .forma { font-weight: 600; color: var(--azul); }
.atable .ext { margin: 0 0 6px; }
.atable .ext.sin-extracto { color: var(--tinta-suave); }
.atable mark.mencion { background: var(--mark); color: var(--mark-fg); padding: 0 2px; border-radius: 3px; }
.atable .linkbtn {
  background: none; border: none; padding: 0; font: inherit; font-size: 13px;
  color: var(--accent); text-decoration: underline; cursor: pointer;
}
.atable .answer { margin-top: 10px; }
.atable .yn { display: flex; gap: 8px; }
.atable .yn .btn {
  border: 1px solid transparent; border-radius: 8px; padding: 8px 14px;
  font-weight: 700; cursor: pointer; color: #fff; font-size: 14.5px;
}
.atable .yn .btn.yes { background: var(--pos); }
.atable .yn .btn.no { background: var(--neg); }
.atable .yn.eleccion { flex-wrap: wrap; }
.atable .yn .btn.marca { background: var(--accent); }
.atable .yn .btn:disabled { background: var(--sunk); color: var(--tinta-suave); cursor: not-allowed; }
.atable .done { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.atable .pill.yes { color: var(--pos); background: var(--pos-soft); }
.atable .pill.no { color: var(--neg); background: var(--neg-soft); }
.atable .btn.cambiar {
  margin-top: 8px; border: 1px solid var(--accent); background: var(--papel);
  color: var(--accent); border-radius: 8px; padding: 7px 12px;
  font-weight: 700; font-size: 14px; cursor: pointer;
}
.atable .btn.cambiar:disabled { color: var(--tinta-suave); border-color: var(--linea); cursor: not-allowed; }
.atable .rowalert { margin-top: 8px; }
.atable .btn.cambiar.deshacer { margin-left: 6px; }
.atable .retirada {
  display: flex; flex-direction: column; gap: 2px; margin-bottom: 8px;
  padding: 6px 8px; border-left: 3px solid var(--warn); background: var(--warn-soft);
  border-radius: 4px; font-size: 13px;
}
.atable .pregunta-doble { margin: 0 0 8px; font-size: 13.5px; line-height: 1.4; }
.atable .confirmar-retiro .botones { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.atable .confirmar-retiro input.motivo { width: 100%; box-sizing: border-box; }
.atribucion .btn.mas {
  margin: 14px 0; border: 1px solid var(--linea); border-radius: 8px;
  padding: 9px 16px; font-weight: 700; cursor: pointer;
  background: var(--papel); color: var(--accent);
}

/* «Fuentes citadas»: plegado hasta que alguien lo abre. */
details.fuentes { margin: 10px 0 0; font-size: 13.5px; }
details.fuentes summary { cursor: pointer; color: var(--accent); font-weight: 700; }
details.fuentes ul { margin: 6px 0 0; padding-left: 1.3em; }
details.fuentes .dominio { color: var(--tinta-suave); font-size: 12.5px; }

@media (max-width: 720px) {
  .atable thead { display: none; }
  .atable, .atable tbody, .atable tr, .atable td { display: block; width: 100%; }
  .atable td { border-bottom: none; padding: 6px 12px; }
  .atable tr { border-bottom: 1px solid var(--linea); padding: 6px 0; }
  .atable td::before {
    content: attr(data-label); display: block; font-size: 12px;
    color: var(--tinta-suave);
  }
  .atable tr.grupo td::before { content: none; }
  .atable .th-dec, .atable .td-dec, .atable .td-ext { width: auto; min-width: 0; }
}

/* --- pantallas angostas ---------------------------------------------------- */

@media (max-width: 900px) {
  .work { grid-template-columns: minmax(0, 1fr); }
  .panel { position: static; }
  .stick { display: contents; }
  .fhead { padding-bottom: 4px; }
  .occnav {
    position: sticky; top: 0; z-index: 5; background: var(--papel);
    margin: 8px -20px 0; padding: 8px 20px; border-bottom: 1px solid var(--linea);
    box-shadow: 0 6px 10px -8px rgba(0, 0, 0, .25); font-size: 13px;
  }
  .occlbl { display: none; }
  .occctl { flex-wrap: nowrap; justify-content: flex-start; }
  .goto { display: inline-flex; }
}
@media (max-width: 720px) {
  .adm-cabeza { padding: 14px 16px 0; }
  main { padding: 0 16px 48px; }
  .adm-cabeza .head h2 { font-size: 22px; }
  .tab { padding: 10px 8px 9px; }
  .hrow { grid-template-columns: minmax(0, 1fr); }
}
@media (max-height: 600px) and (min-width: 901px) { .stick { position: static; box-shadow: none; } }

/* Controles sin permiso: se ven apagados pero siguen enfocables (aria-disabled). */
.sin-permiso { opacity: .55; cursor: not-allowed; }
.btn.sin-permiso, .pendientes .btn.sin-permiso, .hist .btn.sin-permiso {
  background: var(--sunk); color: var(--tinta-suave); opacity: 1; cursor: not-allowed;
  border-style: dashed;
}
.choice input.sin-permiso + label { opacity: .5; cursor: not-allowed; }
.franja-lectura {
  margin: 10px 0; padding: 8px 12px; border-left: 4px solid var(--tinta-suave);
  background: var(--sunk); font-size: 14px;
}

/* --- Usuarios ------------------------------------------------------------ */
.usr { display: flex; flex-direction: column; gap: 14px; padding-top: 14px; }
.usr-herr { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; justify-content: space-between; }
.usr-buscar { display: flex; flex-direction: column; gap: 4px; flex: 1 1 240px; max-width: 420px; }
.usr-buscar label { font-size: 13px; color: var(--tinta-suave); }
.inp {
  font: inherit; padding: 8px 10px; border: 1px solid var(--linea);
  border-radius: 6px; background: var(--papel); color: var(--tinta); width: 100%;
}
.inp[readonly] { background: var(--sunk); color: var(--tinta-suave); }
.inp[aria-invalid="true"] { border-color: var(--rojo); }
.btn.primario { background: var(--accent); color: var(--accent-fg); border-color: var(--accent); }
.btn.primario.sin-permiso { background: var(--sunk); color: var(--tinta-suave); border-color: var(--linea); }
.btn.danger { border-color: #e0a9a4; color: var(--rojo); }
.btn.ghost { background: transparent; }
.btn.sm { padding: 4px 10px; font-size: 13px; }
.btn.warnc { color: var(--rojo); }
.btn.sin-permiso.warnc, .btn.sin-permiso.danger { color: var(--tinta-suave); }
.tablewrap { overflow-x: auto; }
.utable { width: 100%; border-collapse: collapse; background: var(--papel); border: 1px solid var(--linea); }
.utable th, .utable td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--linea); vertical-align: middle; }
.utable th { font-size: 13px; color: var(--tinta-suave); font-weight: 700; }
.utable .th-act, .utable .td-act { text-align: right; white-space: nowrap; }
.usr-fila.off td { opacity: .6; }
.usr-fila.off td.td-act { opacity: 1; }
.em { font-weight: 600; }
.rchips { display: flex; gap: 6px; flex-wrap: wrap; }
.rchip { font-size: 12.5px; padding: 1px 9px; border-radius: 999px; background: var(--sunk); border: 1px solid var(--linea); }
.rchip.is-admin { background: var(--accent-soft); color: var(--accent); border-color: transparent; font-weight: 700; }
.ibtn {
  font: inherit; font-size: 13px; padding: 4px 10px; border: 1px solid var(--linea);
  border-radius: 6px; background: var(--papel); cursor: pointer; margin-left: 6px;
}
.ibtn.danger { color: var(--rojo); border-color: #e0a9a4; }
.ibtn.sin-permiso { background: var(--sunk); color: var(--tinta-suave); border-style: dashed; opacity: 1; }
.usr-vacio {
  background: var(--papel); border: 1px solid var(--linea); border-radius: 8px;
  padding: 18px; display: flex; flex-direction: column; gap: 8px; align-items: flex-start;
}
.usr-vacio h3 { margin: 0; font-size: 17px; }
.usr-vacio p { margin: 0; }
.mback {
  position: fixed; inset: 0; z-index: 20; background: rgba(22, 32, 43, .45);
  display: flex; align-items: flex-start; justify-content: center;
  padding: 6vh 16px; overflow-y: auto;
}
.modal:focus { outline: none; }
.modal { background: var(--papel); border-radius: 10px; width: min(560px, 100%); box-shadow: 0 10px 40px rgba(0, 0, 0, .3); }
.mhead { display: flex; justify-content: space-between; align-items: center; padding: 14px 18px; border-bottom: 1px solid var(--linea); }
.mhead h2 { margin: 0; font-size: 19px; }
.mbody { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 14px; }
.mbody p { margin: 0; }
.roleboxes { border: 1px solid var(--linea); border-radius: 8px; padding: 8px 12px 12px; display: flex; flex-direction: column; gap: 8px; }
.roleboxes legend { font-weight: 700; font-size: 14px; padding: 0 6px; }
.rolebox { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; }
.rolebox input { margin-top: 4px; }
.rolebox small { display: block; color: var(--tinta-suave); }
.rolebox.lock { opacity: .75; cursor: not-allowed; }
.mmeta { display: flex; flex-direction: column; gap: 6px; margin: 0; }
.mmeta div { display: flex; gap: 10px; align-items: center; }
.mmeta dt { width: 110px; color: var(--tinta-suave); font-size: 13px; }
.mmeta dd { margin: 0; }
.suggest { background: var(--sunk); border-radius: 8px; padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.err { color: var(--rojo); font-size: 13px; }
.btns { display: flex; gap: 10px; flex-wrap: wrap; }
@media (max-width: 720px) {
  .utable th:nth-child(1), .utable td:nth-child(1) { display: none; }
}

/* --- Marcas (solo lectura) ------------------------------------------------ */
.mar { display: flex; flex-direction: column; gap: 12px; padding-top: 14px; }
.mar-barra {
  position: sticky; top: 0; z-index: 5; background: var(--fondo);
  padding: 8px 0 10px; border-bottom: 1px solid var(--linea);
  display: flex; flex-direction: column; gap: 8px;
}
.mar-filtros { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
.mar-campo { display: flex; flex-direction: column; gap: 4px; flex: 0 1 240px; min-width: 160px; }
.mar-campo.mar-buscar { flex: 1 1 260px; max-width: 420px; }
.mar-campo label { font-size: 13px; color: var(--tinta-suave); }
.mar-estado { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.mar-cuenta { margin: 0; font-size: 14px; }
.mar-cuenta .muted { margin-left: 4px; }
.mtable th:nth-child(1), .mtable td:nth-child(1) { display: table-cell; }
.mcell { display: flex; align-items: center; gap: 10px; }
.lg-caja { display: inline-flex; flex: none; }
.lg {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 28px; border-radius: 4px; object-fit: contain;
  background: var(--papel); border: 1px solid var(--linea);
}
.lg.mono-g {
  color: #fff; font-weight: 700; font-size: 12px; letter-spacing: .02em; border-color: transparent;
}
.lg.grande { width: 112px; height: 56px; border-radius: 6px; }
.lg.mono-g.grande { font-size: 20px; }
.lnk {
  font: inherit; background: none; border: 0; padding: 0; cursor: pointer;
  color: var(--accent); text-align: left; text-decoration: underline;
  text-decoration-color: transparent;
}
.lnk:hover, .lnk:focus-visible { text-decoration-color: currentColor; }
.btnchip { font: inherit; font-size: 12.5px; cursor: pointer; color: inherit; }
.btnchip:hover, .btnchip[aria-pressed="true"] { background: var(--accent-soft); border-color: var(--accent); }
.pill.pb { border: 0; cursor: pointer; font-family: inherit; }
.pill.pb[aria-pressed="true"] { outline: 2px solid currentColor; outline-offset: 1px; }
.more-wrap { display: flex; gap: 12px; align-items: center; margin-top: 12px; flex-wrap: wrap; }
.mar-resultado { display: flex; flex-direction: column; gap: 10px; }
.modal.ancho { width: min(720px, 100%); }
.ficha-cima { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.ficha-nombre { font-size: 20px; }
.ficha-datos dt { width: 190px; flex: none; }
.ficha-datos > div { align-items: flex-start; }
.fsec h3 { margin: 0 0 4px; font-size: 16px; }
.alist { margin: 6px 0 0; padding-left: 20px; display: flex; flex-direction: column; gap: 2px; }
@media (max-width: 720px) {
  .mtable th:nth-child(1), .mtable td:nth-child(1) { display: table-cell; }
  .ficha-datos > div { flex-direction: column; gap: 2px; }
  .ficha-datos dt { width: auto; }
}

/* --- Sitios y cuentas oficiales (dentro de la ficha de una marca) ------- */
.fuentes-oficiales .aviso { margin: 8px 0; }
.fuentes-of-bloque { margin-top: 14px; }
.fuentes-of-bloque h4 { margin: 0 0 2px; font-size: 14px; }
.fuentes-of-lista { list-style: none; margin: 8px 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.fuente-of { border: 1px solid var(--linea); border-radius: 8px; padding: 8px 10px; background: var(--papel); }
.fuente-of-cima { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.fuente-of-url { overflow-wrap: anywhere; }
.fuente-of p { margin: 4px 0 0; }
.fuente-of .btns, .fuentes-of-bloque > .btns { margin-top: 8px; }
.fuente-of-form { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; }
.fuente-of-confirmar p { font-weight: 700; }

/* --- El logo (dentro de la ficha de una marca) --------------------------- */
.logo-marca .aviso { margin: 8px 0; }
.logo-marca > .btns { margin-top: 8px; }
.logo-vista, .logo-confirmar {
  display: flex; flex-direction: column; gap: 8px; align-items: flex-start;
  margin-top: 8px; border: 1px solid var(--linea); border-radius: 8px;
  padding: 10px; background: var(--papel);
}
.logo-archivo-elegido { margin: 0; overflow-wrap: anywhere; }
.logo-confirmar p { font-weight: 700; margin: 0; }
.logo-cabecera {
  position: relative; display: inline-flex; flex: none; padding: 0; border: 0;
  border-radius: 6px; background: none; color: inherit; font: inherit; cursor: pointer;
}
.logo-cabecera-marca {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 2px; border-radius: 6px;
  background: rgba(0, 0, 0, .62); color: #fff; font-size: 12px; font-weight: 700;
  pointer-events: none; opacity: 0; transition: opacity .12s ease;
}
.logo-cabecera-marca svg { width: 18px; height: 18px; }
.logo-cabecera:hover .logo-cabecera-marca,
.logo-cabecera:focus-visible .logo-cabecera-marca { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .logo-cabecera-marca { transition: none; } }

/* ===================================================================== */
/* Inicio: tarjetas de avance y tabla de categorías                      */
/* ===================================================================== */

.inicio { max-width: 1200px; margin: 0 auto; padding: 0 16px 32px; }

.kpis {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin: 8px 0 28px;
}
.kpi {
  background: var(--papel);
  border: 1px solid var(--linea);
  border-radius: 10px;
  padding: 16px 18px 14px;
}
.kpi h3 { margin: 0; font-size: 14px; font-weight: 600; color: var(--tinta-suave); }
.kpi-grande { margin: 4px 0 10px; font-size: 26px; font-weight: 650; line-height: 1.2; }
.kpi-linea { margin: 6px 0 0; font-size: 13px; color: var(--tinta-suave); }
.kpi-linea:first-of-type { color: var(--tinta); }

/* La pista de una barra apilada: los tramos suman su ancho. */
.barra {
  display: flex;
  height: 10px;
  background: var(--linea);
  border-radius: 5px;
  overflow: hidden;
}
.tramo { display: block; height: 100%; min-width: 2px; }
.tramo.listo { background: var(--verde); }
.tramo.falta { background: var(--ambar); }
.tramo.sin-juicio { background: var(--gris); }

.inicio-categorias h3 { margin: 0 0 4px; font-size: 18px; }
.inicio-categorias .nota { margin: 0 0 8px; }
.leyenda { margin: 0 0 12px; font-size: 13px; color: var(--tinta-suave); }
.leyenda .tramo { display: inline-block; width: 14px; height: 10px; border-radius: 2px; vertical-align: baseline; }

.grupo-de-categorias { margin-top: 20px; }
.grupo-de-categorias h4 { margin: 0 0 8px; font-size: 15px; color: var(--tinta); }
.rejilla-categorias { overflow-x: auto; }
.rejilla-categorias .fila {
  display: grid;
  grid-template-columns: minmax(10rem, 15rem) minmax(0, 1fr) minmax(0, 1fr);
  gap: 20px;
  align-items: center;
  min-width: 56rem;
  padding: 7px 0;
  border-bottom: 1px solid var(--linea);
}
.rejilla-categorias .fila.cab {
  font-size: 12px;
  color: var(--tinta-suave);
  align-items: end;
  position: sticky;
  top: 0;
  background: var(--fondo);
}
.rejilla-categorias .cab strong { display: block; color: var(--tinta); font-size: 13px; }
.rejilla-categorias .nombre { font-weight: 500; }
.rejilla-categorias .bloque.dos { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.rejilla-categorias .cab .dos { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.celda {
  display: block;
  color: inherit;
  text-decoration: none;
  padding: 2px 4px;
  border-radius: 6px;
}
.celda:hover, .celda:focus-visible { background: #e9eef3; }
.celda .barra { height: 12px; margin-bottom: 3px; background: transparent; }
.celda .cifras { font-size: 12px; color: var(--tinta-suave); }
.celda .sin-juzgar { font-size: 12px; color: var(--tinta-suave); margin-left: 6px; }
.celda .sin-juzgar::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 4px; border-radius: 2px; background: var(--gris); }

@media (max-width: 900px) {
  .kpis { grid-template-columns: 1fr; }
}