/* Hemeroteca: la mesa del verificador. Papel de periódico, tinta negra, filetes,
   subrayador amarillo para lo comprobado y lápiz rojo de corrector solo para tachar.
   Esquinas rectas, titulares con serifa (Newsreader) y texto y cifras en Public Sans.
   Contrastes sobre el papel: tinta 16,2:1; gris 6,5:1; lápiz rojo 5,6:1. */
:root {
  --bg: #EEEEEA;        /* papel */
  --text: #111111;      /* tinta */
  --muted: #55554F;
  --muted2: #3A3A35;
  --card: #F7F7F4;      /* papel claro de las tarjetas */
  --border: #BDBDB5;    /* filete fino */
  --rule: #111111;      /* filete grueso */
  --hl: #F7E64A;        /* subrayador */
  --pencil: #B3261E;    /* lápiz de corrector: solo para tachar */
  --pt: #E2E2DD;        /* Portugal en el mapa: casi papel, solo para situar */
  --off: #C8C8C0;       /* casilla sin responder: 1,45:1 frente al papel */
  --shape-off: #4A4A44; /* forma de categoría sobre la casilla apagada: 5,3:1 */
  --gap: 3px;            /* separación entre casillas */
  --km0: #CBBF9B;        /* contorno del Km 0: el gris de Canarias, más crema */
  /* casilla: el ancho útil (columna de 560 px como máximo, menos 12 px a cada lado) entre 27 */
  --cell: clamp(10px, calc((min(100vw, 560px) - 24px - 26 * var(--gap)) / 27), 22px);
  --ff-head: 'Newsreader', Georgia, 'Times New Roman', serif;
  --ff-body: 'Public Sans', system-ui, sans-serif;
  color-scheme: light;
}

* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--text); }
body { font-family: var(--ff-body); font-size: 16px; line-height: 1.5; -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; font-variant-numeric: tabular-nums; }
#app { max-width: 560px; margin: 0 auto; min-height: 100vh; }
a { color: var(--text); }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Tipografía */
.title { font-family: var(--ff-head); font-weight: 700; font-size: 3.4rem; line-height: 0.95; letter-spacing: -0.02em; margin: 6px 0 12px; }
.h3 { font-family: var(--ff-head); font-size: 1.3rem; font-weight: 600; margin: 24px 0 10px; }
.h4 { font-family: var(--ff-head); font-size: 1.1rem; font-weight: 600; margin: 0 0 8px; }
.eyebrow { font-family: var(--ff-body); font-size: 0.76rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; margin: 0; color: var(--muted2); }
.body { margin: 0; color: var(--muted2); }
.muted { color: var(--muted); }
.small { font-size: 0.85rem; margin: 2px 0 0; }
.big { font-family: var(--ff-head); font-size: 1.7rem; font-weight: 600; margin: 2px 0; }
.label { font-size: 0.9rem; color: var(--muted2); margin: 12px 0 6px; display: block; }
.note { font-size: 0.85rem; color: var(--muted); margin: 10px 0; }

/* Estructura */
.screen { padding: 8px 16px 40px; }
.topbar { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 4px; padding: 6px 8px; background: var(--bg); border-bottom: 2px solid var(--rule); }
.topbar-title { flex: 1; text-align: center; margin: 0; font-family: var(--ff-head); font-size: 1.2rem; font-weight: 600; display: flex; align-items: center; justify-content: center; gap: 6px; }
.topbar-spacer { width: 44px; height: 44px; flex: none; }
.row { display: flex; align-items: center; }
.between { justify-content: space-between; }
.gap8 { gap: 8px; }
.stack { display: grid; gap: 10px; margin: 16px 0; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.card { background: var(--card); border: 1px solid var(--border); border-top: 2px solid var(--rule); border-radius: 0; padding: 14px; margin: 12px 0; }
.block { margin: 20px 0; }

/* Botones (mínimo 44 px) */
.btn { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 48px; padding: 10px 16px; border-radius: 0; border: 1.5px solid var(--text); background: var(--card); font-family: var(--ff-body); font-weight: 700; font-size: 1rem; cursor: pointer; }
.btn.primary { background: var(--text); color: var(--bg); border-color: var(--text); }
.btn:disabled { opacity: 0.5; cursor: default; }
.btn.sticky { position: sticky; bottom: 12px; margin-top: 24px; }
.iconbtn { width: 44px; height: 44px; display: grid; place-items: center; border: 0; background: none; border-radius: 0; cursor: pointer; flex: none; }
.iconbtn:disabled { opacity: 0.35; }
.tile-btn { display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; gap: 18px; min-height: 92px; padding: 14px; border-radius: 0; border: 1px solid var(--border); border-top: 2px solid var(--rule); background: var(--card); cursor: pointer; text-align: left; font-family: var(--ff-head); font-weight: 600; font-size: 1.08rem; }
.ic { flex: none; }

/* Inicio: cabecera de periódico */
.home { padding-top: 24px; }
.brand { border-bottom: 2px solid var(--rule); padding-bottom: 14px; }
.lema { color: var(--muted2); margin: 0 0 14px; max-width: 34ch; font-family: var(--ff-head); font-size: 1.12rem; font-style: italic; }
.catbar { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; height: 4px; }
.catbar span { border-radius: 0; }
.dato { margin-top: 22px; }
.dato-name { font-family: var(--ff-head); font-size: 1.15rem; font-weight: 600; margin: 6px 0 0; }
.dato-val { font-family: var(--ff-body); font-size: 2.6rem; font-weight: 700; margin: 0; letter-spacing: -0.02em; }
.src { display: flex; gap: 6px; align-items: flex-start; font-size: 0.85rem; color: var(--muted2); margin-top: 10px; min-height: 24px; text-decoration: underline; text-underline-offset: 3px; }

/* Jugadores */
.stepper { display: flex; align-items: center; gap: 4px; border: 1.5px solid var(--text); border-radius: 0; }
.stepper-n { font-family: var(--ff-body); font-weight: 700; font-size: 1.2rem; min-width: 24px; text-align: center; }
.player-card { border: 1px solid var(--border); border-top: 2px solid var(--rule); }
.input { width: 100%; min-height: 44px; padding: 8px 12px; border-radius: 0; border: 0; border-bottom: 1.5px solid var(--text); background: var(--bg); color: var(--text); font: inherit; }
/* Selector de ficha: cartas con la cara grande, su centro casi en el borde derecho */
.tokens { display: grid; grid-template-columns: repeat(auto-fill, minmax(52px, 1fr)); gap: 6px; }
.token-opt { aspect-ratio: 1; border-radius: 6px; border: 0; padding: 0; background: var(--tc); display: block; overflow: hidden; cursor: pointer; }
.token-opt .card-face { width: 100%; height: 100%; display: block; }
.token-opt.on { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--text); }
.token-opt:disabled { opacity: 0.22; cursor: default; }
.tokname { display: flex; align-items: flex-start; gap: 10px; margin: 12px 0 0; }
.tokname p { margin: 0 0 2px; }
.tok-ccaa { color: var(--muted2); }
.badge { display: inline-block; flex: none; width: var(--bs); height: var(--bs); border-radius: 3px; background: var(--tc); overflow: hidden; }
.badge .card-face { width: 100%; height: 100%; display: block; }
.conquest { margin: 12px 0 4px; }
.cbar { display: flex; height: 8px; border-radius: 0; background: var(--off); overflow: hidden; }
.cbar span { display: block; height: 100%; }
.clist { list-style: none; padding: 0; margin: 8px 0 0; display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 0.85rem; }
.clist li { display: flex; align-items: center; gap: 6px; }
.freesw { width: 20px; height: 20px; border-radius: 0; background: var(--off); }
.rules ol { padding-left: 20px; margin: 0; color: var(--muted2); }
.rules li { margin: 4px 0; }
.rules .shape { vertical-align: -1px; }

/* Tablero */
.board-screen { padding-left: 12px; padding-right: 12px; }
.players { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.pchip { display: flex; align-items: center; gap: 6px; min-height: 40px; padding: 4px 10px 4px 5px; border: 1px solid var(--border); border-radius: 0; background: var(--card); font-size: 0.9rem; cursor: pointer; }
.pchip .badge { width: 26px; height: 26px; }
.pchip.out { opacity: 0.4; }
.pchip.turn { border-color: var(--text); background: var(--text); color: var(--bg); font-weight: 700; }
.pchip[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--text); }
/* Clave del mapa: color y número de cada jugador */
.pnum { display: inline-grid; place-items: center; flex: none; min-width: 20px; height: 20px; padding: 0 4px; border-radius: 2px; color: var(--pi, #000); font: 700 0.8rem/1 var(--ff-body); font-variant-numeric: tabular-nums; }
.catlab { display: inline-flex; align-items: center; gap: 6px; }
.catlab .shape { flex: none; }
.sw-off { width: 16px; height: 16px; border-radius: 0; background: var(--off); color: var(--shape-off); display: inline-grid; place-items: center; flex: none; }
.pcolor { display: flex; align-items: center; gap: 8px; margin: 10px 0 0; font-size: 0.85rem; color: var(--muted2); }
.catbtn .shape { flex: none; }
.pname { max-width: 10ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ptot { font-weight: 700; }
.turnline { margin: 10px 0; font-size: 0.95rem; color: var(--muted2); }
.mapwrap { display: flex; justify-content: center; margin: 6px 0 12px; }
.map { display: grid; grid-template-columns: repeat(var(--cols), var(--cell)); grid-template-rows: repeat(var(--rows), var(--cell)); gap: var(--gap); position: relative; isolation: isolate; }
/* Casilla apagada (sin responder): forma de su categoría en gris, sin color.
   Casilla acertada: el color del jugador con la cara de su máscara. */
.cell { width: var(--cell); height: var(--cell); padding: 0; margin: 0; border: 0; border-radius: 0; background: var(--off); color: var(--shape-off); cursor: pointer; display: grid; place-items: center; position: relative; overflow: hidden; }
.cell .shape { width: 72%; height: 72%; display: block; }
.cell.own { background: var(--c); cursor: default; display: block; }
.cell.own .card-face { width: 100%; height: 100%; display: block; }
/* Casilla elegida: contorno de tinta con las esquinas ligeramente redondeadas */
.cell.sel { outline: 1px solid var(--text); outline-offset: 1px; border-radius: 3px; z-index: 2; }
/* Portugal, Francia y Marruecos (solo referencia): cuadrado gris claro, sin forma ni color */
.cell.pt { background: var(--pt); box-shadow: none; cursor: default; }
/* Km 0 (Puerta del Sol): contorno punteado de 1 px separado 1 px de la casilla, en crema */
.cell.km0 { outline: 1px dotted var(--km0); outline-offset: 1px; border-radius: 2px; overflow: visible; }
.cell.km0.sel { outline: 1px solid var(--text); }
.map.focusing .cell:not(.f):not(.pt) { opacity: 0.22; }
/* Con la lupa abierta, en el mapa solo se ve el recuadro: la casilla elegida se marca en la lupa */
.map.zooming .cell.sel { outline: none; }
.map.zooming .cell.km0.sel { outline: 1px dotted var(--km0); }
/* Canarias: caja discontinua que rodea sus casillas con aire alrededor. Canarias se dibuja
   abajo a la derecha (CANARIAS_OFFSET en app.js), así que la caja no toca la península. */
.inset { border: 1px dashed var(--border); border-radius: 4px; margin: calc(-1 * (var(--gap) + 4px)); pointer-events: none; z-index: -1; }
.legend-cats { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 6px 12px; font-size: 0.88rem; }
.legend-cats li { display: flex; align-items: center; gap: 8px; }
.sw { width: 14px; height: 14px; border-radius: 0; box-shadow: inset 0 0 0 2px var(--c); flex: none; }
.legend-extra { display: flex; flex-wrap: wrap; gap: 14px; font-size: 0.82rem; color: var(--muted); margin: 8px 0 0; }
.legend-extra span { display: inline-flex; align-items: center; gap: 6px; }
.k0 { width: 10px; height: 10px; border-radius: 2px; background: var(--off); outline: 1px dotted var(--km0); outline-offset: 1px; margin: 0 2px; }
.insw { width: 12px; height: 12px; border: 1px dashed var(--muted); border-radius: 2px; }
.selcard { border-top-color: var(--c, var(--rule)); }
/* El bloque de responder (y la lupa) va fijo abajo de la pantalla; render() deja debajo del
   tablero el hueco que ocupa para que el marcador se pueda ver entero */
.board-screen .selcard { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(10px + env(safe-area-inset-bottom, 0px)); width: min(calc(100% - 24px), 536px); margin: 0; z-index: 4; box-shadow: 0 -4px 16px rgba(17, 17, 17, 0.12); }

/* Lupa táctil (como la propuesta): caja redondeada fija abajo con la zona del recuadro
   ampliada y, dentro, la casilla elegida y el botón de responder */
.lupa { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(10px + env(safe-area-inset-bottom, 0px)); width: min(calc(100% - 24px), 536px); z-index: 4; margin: 0; padding: 12px; display: grid; gap: 10px; background: var(--card); border: 1px solid var(--border); border-radius: 14px; box-shadow: 0 -4px 18px rgba(17, 17, 17, 0.16); }
.lupa-h { display: flex; justify-content: space-between; align-items: baseline; font-size: 0.85rem; color: var(--muted); }
.lupa-grid { display: grid; grid-template-columns: repeat(var(--lc), 1fr); grid-template-rows: repeat(var(--lr), auto); gap: 5px; }
.lupa-grid .cell { width: auto; height: auto; aspect-ratio: 1; min-height: 44px; border-radius: 5px; }
.lupa-grid .cell .shape { width: 46%; height: 46%; }
.lupa-grid .cell.own { cursor: default; position: relative; }
.lupa-grid .cell .ln { position: absolute; left: 3px; top: 3px; font: 700 0.72rem/1 var(--ff-body); font-style: normal; padding: 2px 4px; border-radius: 3px; box-shadow: 0 0 0 1px rgba(17, 17, 17, 0.25); }
.lupa-grid .cell.sel { outline-width: 1px; outline-offset: 2px; }
.lupa-grid.stealing .cell.own:not(.stealable) { opacity: 0.3; }
.lupa-sel { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin: 0; font-size: 0.95rem; }
.lupa .btn { min-height: 48px; }
/* Recuadro de la zona ampliada sobre el mapa */
.zone { border: 2px solid var(--text); border-radius: 5px; margin: calc(-1 * (var(--gap) + 2px)); pointer-events: none; z-index: 3; }
@media (prefers-reduced-motion: no-preference) { .lupa.enter { animation: lupa-in 0.18s ease-out; } @keyframes lupa-in { from { transform: translate(-50%, 16px); opacity: 0.6; } } }
.selhead { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin: 0 0 12px; }
.muted-card .btn { margin-top: 10px; }
.scores { display: grid; gap: 0; }
.score.turn { border-color: var(--text); }
.srow { display: flex; align-items: center; gap: 10px; min-height: 28px; font-size: 0.9rem; justify-content: space-between; }
.sname { width: 96px; flex: none; color: var(--muted2); }
.boxes { display: flex; gap: 4px; flex: 1; }
.box { width: 18px; height: 18px; border-radius: 0; box-shadow: inset 0 0 0 1.5px var(--border); }
.box.on { background: var(--c); box-shadow: none; }
.extra { font-size: 0.8rem; }
.minok { font-size: 0.75rem; border: 1px solid var(--text); color: var(--text); padding: 2px 8px; border-radius: 0; }
.gana { font-family: var(--ff-body); font-weight: 800; background: var(--hl); color: var(--text); padding: 2px 10px; border-radius: 0; letter-spacing: 0.06em; }

/* Pregunta: lo comprobado se subraya; lo que no, se tacha con lápiz rojo */
.question { padding-bottom: 24px; }
.question .qtext { font-family: var(--ff-head); font-size: 1.65rem; line-height: 1.2; font-weight: 600; margin: 10px 0 18px; text-wrap: balance; }
.options { display: grid; gap: 0; border-top: 1px solid var(--text); }
.opt { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 52px; padding: 12px 6px; text-align: left; border-radius: 0; border: 0; border-bottom: 1px solid var(--border); background: transparent; cursor: pointer; font-size: 1.02rem; }
.opt:not(:disabled):hover { background: var(--card); }
.opt.right { font-weight: 700; background: linear-gradient(transparent 16%, var(--hl) 16%, var(--hl) 86%, transparent 86%); }
.opt.wrong span:first-child { text-decoration: line-through; text-decoration-color: var(--pencil); text-decoration-thickness: 2px; }
.opt.wrong .ic { color: var(--pencil); }
.opt.dim { opacity: 0.55; }
.result { margin-top: 18px; padding: 10px 0; border-radius: 0; background: transparent; border-top: 2px solid var(--rule); border-bottom: 1px solid var(--rule); }
.result-t { font-family: var(--ff-head); font-size: 1.7rem; font-weight: 700; margin: 0; display: flex; align-items: center; gap: 8px; }
.result.ok .result-t::before { content: ''; width: 14px; height: 22px; background: var(--c); flex: none; }
.result.ko .result-t { text-decoration: line-through; text-decoration-color: var(--pencil); text-decoration-thickness: 2px; }
.srclist { list-style: none; padding: 0; margin: 0; }
.srclist li { padding: 10px 0; border-bottom: 1px solid var(--border); }
.srclist li > a { display: flex; gap: 8px; align-items: flex-start; min-height: 24px; }
.srclist p { margin: 2px 0; }
.inline { color: var(--muted2); text-underline-offset: 3px; }
.dot { display: inline-block; width: 10px; height: 10px; border-radius: 0; background: var(--c); margin-right: 8px; }

/* Gráfico */
.chart { margin: 0; }
.chart svg { width: 100%; height: auto; display: block; }
.chart .ax { font: 10px var(--ff-body); fill: var(--muted); }
.chart .mk { font: 700 10.5px var(--ff-body); fill: var(--text); paint-order: stroke; stroke: var(--bg); stroke-width: 3px; }
.legend { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 0.82rem; color: var(--muted2); margin-top: 6px; }
.lg { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.lg-gov { gap: 5px; }
.lg-gov .sw { display: inline-block; width: 10px; height: 10px; border-radius: 0; opacity: 0.55; margin-left: 4px; box-shadow: none; }
.cmp { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
.cmp th, .cmp td { text-align: left; padding: 8px 4px; border-bottom: 1px solid var(--border); }
.cmp thead th { color: var(--muted); font-weight: 600; font-size: 0.8rem; border-bottom: 1px solid var(--text); }
.cmp tbody th { font-weight: 600; }
.dual { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.dual-item .big { font-size: 1.25rem; }
.dual-item { background: var(--card); border: 1px solid var(--border); border-radius: 0; padding: 10px; }

/* Termómetro */
.cat-h { display: flex; align-items: center; gap: 8px; border-bottom: 2px solid var(--rule); padding-bottom: 4px; }
.cat-h::before { content: ''; width: 12px; height: 12px; border-radius: 0; background: var(--c); }
.thermo { padding: 0; }
.thermo-head { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; width: 100%; padding: 14px; background: none; border: 0; text-align: left; cursor: pointer; min-height: 44px; }
.th-name { grid-column: 1 / -1; color: var(--muted2); font-size: 0.92rem; }
.th-val { font-family: var(--ff-body); font-size: 1.6rem; font-weight: 700; }
.th-meta { grid-column: 1; font-size: 0.82rem; }
.thermo-head .chip { grid-column: 2; grid-row: 2 / span 2; align-self: center; }
.chip { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 0; font-size: 0.82rem; font-weight: 700; border: 1px solid var(--border); white-space: nowrap; }
.chip-mejora { background: var(--text); color: var(--bg); border-color: var(--text); }
.chip-empeora { border: 1.5px solid var(--text); }
.chip-matiz { border: 1.5px dashed var(--muted); color: var(--muted2); }
.thermo-body { padding: 0 14px 14px; border-top: 1px solid var(--border); }

/* Vídeo */
.video { position: relative; aspect-ratio: 16 / 9; background: var(--off); border-radius: 0; overflow: hidden; }
.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.quote { font-family: var(--ff-head); font-size: 1.3rem; font-style: italic; margin: 14px 0; padding-left: 12px; border-left: 3px solid var(--text); }
.empty { border-style: dashed; }

@media (min-width: 600px) {
  .screen { padding-left: 24px; padding-right: 24px; }
  .board-screen { padding-left: 12px; padding-right: 12px; }
  .title { font-size: 4.2rem; }
}
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; } }

/* Premio, minireto y robo */
.duel-opts { display: flex; flex-direction: column; gap: 8px; }
.duel-opts .btn { justify-content: flex-start; gap: 10px; }
.duel-score { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 6px 0 12px; font-size: 1rem; }
.dpts { font-family: var(--ff-body); font-weight: 700; font-size: 1.5rem; }
.map.stealing .cell.own:not(.stealable) { opacity: 0.3; }
.cell.stealable { cursor: pointer; outline: 2px solid var(--text); outline-offset: -1px; z-index: 1; }

/* ---------- El tribunal de los programas (monocromo: ningún color evoca a un partido) ---------- */
.tri-home { width: 100%; min-height: 0; flex-direction: row; align-items: center; gap: 14px; margin-top: 10px; }
.tri-home span { display: flex; flex-direction: column; gap: 2px; }
.tri-home small { font-family: var(--ff-body); font-weight: 400; font-size: 0.85rem; }
.tri-title { font-family: var(--ff-head); font-size: 1.6rem; line-height: 1.2; font-weight: 600; margin: 6px 0 10px; }
.tri-aviso { font-size: 0.85rem; color: var(--muted2); border: 1px dashed var(--muted); border-radius: 0; padding: 8px 12px; margin: 12px 0; }
.tri-pruebas { list-style: none; padding: 0; margin: 16px 0; display: grid; gap: 8px; }
.tri-pruebas li { display: flex; gap: 12px; align-items: flex-start; }
.tri-pruebas p { margin: 0; }
.tri-n { font-family: var(--ff-body); font-weight: 700; color: var(--muted); font-size: 0.9rem; min-width: 22px; display: inline-block; }
.tri-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 12px; }
.tri-tab { min-height: 40px; padding: 6px 14px; border-radius: 0; border: 1px solid var(--border); background: var(--card); cursor: pointer; font-family: var(--ff-body); font-weight: 700; font-size: 0.92rem; }
.tri-tab.on { background: var(--text); color: var(--bg); border-color: var(--text); }
.tri-prop { display: flex; flex-direction: column; gap: 6px; width: 100%; text-align: left; cursor: pointer; }
.tri-prop:hover { border-color: var(--muted); }
.tri-mini { display: inline-flex; gap: 3px; flex-wrap: wrap; }
.tri-sq { display: inline-block; width: 14px; height: 14px; border-radius: 0; flex: none; }
.tri-e-ok { background: var(--text); }
.tri-e-parcial { background: linear-gradient(135deg, var(--text) 50%, transparent 50%); box-shadow: inset 0 0 0 1.5px var(--text); }
.tri-e-no { box-shadow: inset 0 0 0 1.5px var(--muted); background: repeating-linear-gradient(45deg, transparent 0 3px, var(--muted) 3px 4px); }
.tri-e-analisis { box-shadow: inset 0 0 0 1.5px var(--muted); }
.tri-e-sim { box-shadow: inset 0 0 0 1.5px var(--muted); background: radial-gradient(circle, var(--muted) 2px, transparent 2.5px); }
.tri-ley { list-style: none; padding: 0; margin: 8px 0; display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 0.8rem; color: var(--muted2); }
.tri-ley li { display: inline-flex; align-items: center; gap: 6px; }
.tri-tag { display: inline-block; padding: 1px 8px; border-radius: 0; font-size: 0.78rem; font-weight: 700; border: 1px solid var(--border); color: var(--muted2); white-space: nowrap; vertical-align: 1px; }
.tri-tag.tri-e-ok, .tri-tag.tri-t-hecho, .tri-tag.tri-f-mejora { background: var(--text); color: var(--bg); border-color: var(--text); box-shadow: none; }
.tri-tag.tri-e-parcial { background: none; border: 1.5px solid var(--text); color: var(--text); box-shadow: none; }
.tri-tag.tri-e-no, .tri-tag.tri-f-presion { background: none; border: 1.5px dashed var(--text); color: var(--text); box-shadow: none; }
.tri-tag.tri-e-analisis, .tri-tag.tri-e-sim, .tri-tag.tri-f-evaluar, .tri-tag.tri-t-hipotesis { background: none; border: 1px dotted var(--muted); box-shadow: none; }
.tri-tag.tri-t-estimacion { border: 1.5px solid var(--muted2); color: var(--text); }
.tri-tag.tri-t-opinion { border: 1px solid var(--border); font-style: italic; }
.tri-prueba { padding: 10px 0; border-bottom: 1px solid var(--border); }
.tri-prueba p { margin: 4px 0 0; }
.tri-esc { border-left: 3px solid var(--border); padding: 4px 0 4px 12px; margin: 10px 0; }
.tri-esc.fav { border-left-color: var(--text); }
.tri-esc.des { border-left-style: dashed; border-left-color: var(--muted); }
.tri-af { padding: 10px 0; border-bottom: 1px solid var(--border); }
.tri-af .body { margin-bottom: 6px; }
.tri-cons { padding: 8px 0; border-bottom: 1px solid var(--border); }
.tri-cons p { margin: 2px 0; }
.tri-det { margin-top: 10px; }
.tri-det summary { cursor: pointer; color: var(--muted2); min-height: 32px; display: flex; align-items: center; }
.tri-partida { padding-left: 18px; margin: 6px 0; }
.tri-partida li { margin: 4px 0; }
.tri-list { padding-left: 20px; margin: 6px 0; }
.tri-list li { margin: 6px 0; }
.tri-scroll { overflow-x: auto; }
.tri-cmp th, .tri-cmp td { vertical-align: middle; }
.tri-cmp tbody th { font-size: 0.85rem; }