:root {
  --fondo: #060a0c;
  --fondo-2: #0a1114;
  --superficie: #0e171b;
  --superficie-2: #122026;
  --linea: rgba(92,242,154,.10);
  --linea-fuerte: rgba(92,242,154,.35);
  --fosforo: #5cf29a;
  --texto: #d7e6dc;
  --texto-suave: #7f9a8b;
  --texto-apagado: #4f6459;
  --rojo: #ff5c6c;
  --ambar: #ffc857;
  --verde: #5cf29a;
  --gris: #3a4a44;
  /* familias de cartas: degradado suave, borde, símbolo */
  --rel-a: #16344a; --rel-b: #0d2130; --rel-l: #4aa8e0; --rel-t: #cfe9ff;
  --con-a: #144340; --con-b: #0c2a28; --con-l: #3fc9b0; --con-t: #c9f5ea;
  --dec-a: #4a3812; --dec-b: #2c210a; --dec-l: #e2b04a; --dec-t: #ffe9b8;
  --set-a: #35284d; --set-b: #211a30; --set-l: #a98be0; --set-t: #ebe1ff;
  --hueco: rgba(92,242,154,.28);
  --oro: #e8c46a;
  --mono: "JetBrains Mono", "Fira Code", "Cascadia Code", Consolas, "Courier New", monospace;
}
/* ---- la placa: el argumento visto como circuito impreso ---- */
dialog#placa { width: 96vw; max-width: 1180px; }
dialog#placa .placa-cab { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
dialog#placa h3 { margin: 0; }
dialog#placa h3 small { display: block; font-size: 11px; font-weight: 400; color: var(--texto-suave); letter-spacing: .04em; }
.placa-ctrl { display: flex; align-items: center; gap: 8px; }
.placa-ctrl label { font-size: 11px; color: var(--texto-suave); display: flex; gap: 6px; align-items: center; }
.placa-lienzo { margin: 14px 0 10px; border: 1px solid var(--linea-fuerte); border-radius: 8px; background: var(--fondo-2); overflow: hidden; }
.placa-lienzo svg { display: block; width: 100%; height: auto; }
.placa-svg .sustrato { fill: #0b1c15; stroke: #2e8a5c; stroke-width: 1.5; }
.placa-svg .sustrato-borde { fill: none; stroke: rgba(92,242,154,.18); stroke-width: 1; stroke-dasharray: 2 5; }
.placa-svg .tornillo { fill: #0b1c15; stroke: #2e8a5c; stroke-width: 1; }
.placa-svg .polo rect { fill: var(--superficie-2); stroke: var(--linea-fuerte); stroke-width: 1; }
.placa-svg .polo text { font-family: var(--mono); font-size: 11px; fill: var(--texto); dominant-baseline: middle; text-anchor: middle; }
.placa-svg .polo.neg rect { fill: var(--superficie); }
.placa-svg .polo.neg text { fill: var(--texto-suave); }
.placa-svg .pista { fill: none; stroke-linejoin: round; stroke-linecap: round; cursor: pointer; transition: opacity .15s; }
.placa-svg .pista.activa { stroke-width: 2.2; }
.placa-svg .pista.latente { stroke-width: 1.2; opacity: .28; stroke-dasharray: 3 5; }
.placa-svg .nodo { stroke: none; }
.placa-svg .paso { cursor: pointer; }
.placa-svg .paso circle { stroke-width: 1.5; fill: #0b1c15; }
.placa-svg .paso text { font-family: var(--mono); font-size: 10px; font-weight: 700; dominant-baseline: middle; text-anchor: middle; }
.placa-svg .paso.meta circle { fill: var(--oro); stroke: var(--oro); }
.placa-svg .paso.meta text { fill: #1b1405; }
.placa-svg.atenuada .pista { opacity: .07; }
.placa-svg.atenuada .pista.viva { opacity: 1; stroke-width: 3.2; stroke-dasharray: none; }
.placa-svg.atenuada .polo { opacity: .3; }
.placa-svg.atenuada .polo.viva { opacity: 1; }
.placa-svg.atenuada .paso { opacity: .3; }
.placa-svg.atenuada .paso.viva { opacity: 1; }
.placa-svg .paso.fijo circle { stroke-width: 3; }
.placa-svg .rotulo { font-family: var(--mono); font-size: 10px; fill: var(--texto-apagado); text-anchor: middle; }
.placa-pie .cadena .paso-n { display: inline-block; min-width: 18px; height: 18px; line-height: 18px; border-radius: 50%; text-align: center; font-size: 11px; font-weight: 700; margin: 0 5px 0 2px; cursor: pointer; border: 1.5px solid currentColor; }
.placa-pie .cadena .paso-n.fijo { background: currentColor; }
.placa-pie .cadena .paso-n.fijo b { color: #0b1c15; }
.placa-pie { font-size: 12px; color: var(--texto-suave); line-height: 1.7; }
.placa-pie b { color: var(--texto); font-weight: 500; }
.placa-pie .cadena { font-size: 13px; color: var(--texto); margin: 2px 0 10px; word-break: break-word; }
.placa-pie .cadena .flecha { color: var(--fosforo); padding: 0 4px; }
.placa-pie .aparte { color: var(--texto-apagado); font-size: 11px; }
.placa-pie .aparte li { margin: 2px 0; }
.placa-pie ul { margin: 4px 0 10px; padding-left: 18px; }
.placa-leyenda { display: flex; flex-wrap: wrap; gap: 14px; font-size: 11px; margin-bottom: 8px; }
.placa-leyenda span { display: flex; align-items: center; gap: 6px; }
.placa-leyenda i { width: 22px; height: 0; border-top: 2px solid currentColor; display: inline-block; }
.placa-leyenda i.lat { border-top-style: dashed; opacity: .5; }
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  font-family: var(--mono);
  font-weight: 400;
  color: var(--texto);
  background-color: var(--fondo);
  background-image:
    radial-gradient(ellipse at 50% 30%, rgba(92,242,154,.06), transparent 60%),
    linear-gradient(var(--linea) 1px, transparent 1px),
    linear-gradient(90deg, var(--linea) 1px, transparent 1px);
  background-size: auto, 28px 28px, 28px 28px;
  display: grid;
  grid-template-columns: 104px 300px 1fr 330px;
  grid-template-rows: auto 1fr auto;
  height: 100vh;
}
::selection { background: rgba(92,242,154,.35); }

/* ---------- cabecera ---------- */
header {
  grid-column: 1 / -1;
  padding: 12px 22px 10px;
  display: flex; align-items: center; gap: 16px;
  border-bottom: 1px solid var(--linea-fuerte);
  background: linear-gradient(180deg, rgba(14,23,27,.95), rgba(6,10,12,.6));
  backdrop-filter: blur(4px);
}
.marca { width: 18px; height: 46px; flex: none; }
.marca circle { fill: var(--gris); }
.marca circle:nth-child(1) { fill: var(--rojo); }
.marca circle:nth-child(2) { fill: var(--ambar); }
.marca circle:nth-child(3) { fill: var(--verde); filter: drop-shadow(0 0 4px var(--verde)); }
/* la marca viva es la metaseñal: juzga el tablero entero */
.marca.viva circle { fill: var(--gris); filter: none; transition: fill .3s, filter .3s; }
body[data-meta="rojo"]  .marca.viva circle:nth-child(1) { fill: var(--rojo);  filter: drop-shadow(0 0 5px var(--rojo)); }
body[data-meta="ambar"] .marca.viva circle:nth-child(2) { fill: var(--ambar); filter: drop-shadow(0 0 5px var(--ambar)); }
body[data-meta="verde"] .marca.viva circle:nth-child(3) { fill: var(--verde); filter: drop-shadow(0 0 5px var(--verde)); }
header h1 { margin: 0; font-weight: 600; font-size: 1.15rem; letter-spacing: .04em; color: #fff; }
header h1 small { display: block; font-weight: 300; font-size: .72rem; letter-spacing: .18em; color: var(--fosforo); text-transform: uppercase; margin-top: 2px; }
header p { margin: 0; color: var(--texto-suave); font-size: .8rem; font-weight: 300; max-width: 46ch; line-height: 1.4; }
header .grupo { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }

/* ---------- pie ---------- */
footer {
  grid-column: 1 / -1;
  padding: 7px 22px;
  border-top: 1px solid var(--linea);
  font-size: .72rem; letter-spacing: .06em; color: var(--texto-suave);
  display: flex; gap: 14px; align-items: center;
  background: rgba(6,10,12,.8);
}
footer b { font-weight: 600; color: var(--texto); }
footer .v { margin-left: auto; color: var(--fosforo); }

/* ---------- paneles ---------- */
aside, main, section.veredicto { overflow: auto; padding: 16px; }
aside { background: rgba(10,17,20,.85); border-right: 1px solid var(--linea); }
section.veredicto { background: rgba(10,17,20,.85); border-left: 1px solid var(--linea); }
nav.rail { background: rgba(6,10,12,.9); border-right: 1px solid var(--linea); padding: 10px 6px; display: flex; flex-direction: column; gap: 4px; overflow: auto; }
.rail-btn { border: 0; background: none; color: var(--texto-suave); font-size: .66rem; letter-spacing: .04em; padding: 10px 4px; border-radius: 4px; display: flex; flex-direction: column; align-items: center; gap: 6px; font-family: inherit; cursor: pointer; }
.rail-btn svg { width: 26px; height: 26px; color: var(--cat); }
.rail-btn:hover { color: var(--texto); background: rgba(92,242,154,.05); }
h2 { font-weight: 400; font-size: .95rem; margin: 6px 0 12px; color: var(--fosforo); letter-spacing: .04em; }
.nota { font-size: .78rem; color: var(--texto-suave); line-height: 1.5; font-weight: 300; }
.cat { margin-bottom: 20px; }
.cat h3 { font-weight: 400; font-size: .85rem; margin: 4px 0 10px; padding-left: 10px; border-left: 3px solid var(--cat); display: flex; justify-content: space-between; align-items: baseline; color: var(--texto); }
.cat h3 small { font-size: .62rem; color: var(--texto-apagado); letter-spacing: .1em; }

/* ---------- familias (color) ---------- */
.fam-relator     { --a: var(--rel-a); --b: var(--rel-b); --l: var(--rel-l); --t: var(--rel-t); }
.fam-constructor { --a: var(--con-a); --b: var(--con-b); --l: var(--con-l); --t: var(--con-t); }
.fam-decision    { --a: var(--dec-a); --b: var(--dec-b); --l: var(--dec-l); --t: var(--dec-t); }
.fam-termino     { --a: var(--set-a); --b: var(--set-b); --l: var(--set-l); --t: var(--set-t); }

/* ---------- cartas de la mano ---------- */
.mano-marcos { display: flex; flex-direction: column; gap: 8px; }
.marco-mini {
  position: relative; overflow: hidden;
  background: linear-gradient(135deg, var(--a), var(--b));
  color: var(--t);
  border: 1px solid color-mix(in srgb, var(--l) 45%, transparent);
  border-left: 3px solid var(--l);
  padding: 10px 44px 10px 12px; border-radius: 4px;
  box-shadow: 0 4px 14px rgba(0,0,0,.45);
  cursor: grab; font-size: .95rem; line-height: 1.35;
}
.marco-mini:hover { border-color: var(--l); box-shadow: 0 4px 18px rgba(0,0,0,.5), 0 0 0 1px color-mix(in srgb, var(--l) 30%, transparent); }
.marco-mini:active { cursor: grabbing; }
.marco-mini .h { color: color-mix(in srgb, var(--t) 45%, transparent); }
.marco-mini small { display: block; color: color-mix(in srgb, var(--t) 60%, transparent); font-size: .68rem; margin-top: 5px; font-weight: 300; line-height: 1.4; }
.marco-mini .icono, .carta .icono {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  width: 30px; height: 30px; color: var(--l); opacity: .85; pointer-events: none;
}
.marco-mini.pronto { opacity: .45; cursor: not-allowed; filter: grayscale(1); }
.marco-mini.constructor { font-size: 1.05rem; }
.marco-mini.seleccionada { outline: 1px solid var(--fosforo); box-shadow: 0 0 0 3px rgba(92,242,154,.18), 0 4px 14px rgba(0,0,0,.45); }

/* ---------- fichas (conjuntos) ---------- */
.mano-fichas { display: flex; flex-wrap: wrap; gap: 8px; }
.ficha {
  --a: hsl(var(--hue) 40% 30%); --b: hsl(var(--hue) 38% 19%); --l: hsl(var(--hue) 70% 62%); --t: hsl(var(--hue) 90% 92%);
  background: linear-gradient(135deg, var(--a), var(--b));
  color: var(--t);
  border: 1px solid color-mix(in srgb, var(--l) 55%, transparent);
  padding: 6px 10px; border-radius: 4px; font-size: .9rem;
  cursor: grab; user-select: none; position: relative;
  box-shadow: 0 2px 6px rgba(0,0,0,.45);
}
/* pila: dos polos, el nombre arriba y su complemento abajo; sólo uno está encendido */
.ficha { padding: 0; display: inline-flex; flex-direction: column; align-items: stretch; }
.polo:first-child { border-radius: 3px 3px 0 0; } .polo:nth-child(2) { border-radius: 0 0 3px 3px; }
.polo { display: block; padding: 4px 10px; line-height: 1.3; white-space: nowrap; cursor: pointer; transition: background .15s, color .15s; }
.polo::before { content: "{ "; color: var(--l); opacity: .8; }
.polo::after { content: " }"; color: var(--l); opacity: .8; }
.polo.cmp::before { content: "¬{ "; }
.polo + .polo { border-top: 1px solid color-mix(in srgb, var(--l) 40%, transparent); }
.polo.apagado { background: rgba(3,6,8,.6); color: color-mix(in srgb, var(--texto-apagado) 75%, transparent); font-weight: 300; }
.polo.apagado::before, .polo.apagado::after { color: color-mix(in srgb, var(--texto-apagado) 55%, transparent); opacity: 1; }
.mano-fichas .polo.apagado:hover { background: rgba(3,6,8,.3); color: var(--t); }
.mano-fichas .polo.apagado:hover::before, .mano-fichas .polo.apagado:hover::after { color: var(--l); }
.hueco .polo.apagado:hover { color: var(--t); }
.polo.seleccionado { outline: 1px solid var(--fosforo); outline-offset: -1px; background: rgba(92,242,154,.14); color: var(--t); }
.polo.seleccionado::before, .polo.seleccionado::after { color: var(--fosforo); }
.mano-fichas .ficha { padding-right: 0; }
.mano-fichas .polo { padding-right: 28px; }
@media (prefers-reduced-motion: reduce) { .polo { transition: none; } }
.ficha .cerrar, .prop .cerrar {
  position: absolute; top: -7px; right: -7px; width: 16px; height: 16px;
  border-radius: 50%; background: var(--rojo); color: #fff;
  font-size: 11px; line-height: 16px; text-align: center; cursor: pointer; display: none;
}
.hueco .ficha:hover .cerrar, .hueco .prop:hover .cerrar { display: block; }
.editar {
  border: 0; background: none; color: var(--t); cursor: pointer; padding: 0 4px; font-size: .8rem;
  position: absolute; top: 4px; right: 4px; opacity: 0; font-family: inherit;
}
.marco-mini:hover .editar, .mano-fichas .ficha:hover .editar { opacity: .9; }

/* ---------- tablero ---------- */
main { display: flex; flex-direction: column; gap: 14px; }
.tablero {
  --sangria: 36px;
  position: relative;
  flex: 1; min-height: 300px;
  border: 1px dashed var(--linea-fuerte); border-radius: 6px;
  padding: 18px; display: flex; flex-direction: column; gap: 14px; align-content: flex-start;
  background: rgba(6,10,12,.35);
}
.tablero.vacio::before {
  content: "Arrastra aquí una carta. Luego arrastra conjuntos a sus huecos.";
  color: var(--texto-apagado); font-weight: 300; font-size: .9rem;
}
.tablero.sobre { border-color: var(--fosforo); box-shadow: inset 0 0 40px rgba(92,242,154,.06); }
.carta {
  position: relative; overflow: hidden;
  margin-left: calc(var(--nivel, 0) * var(--sangria));
  transition: margin-left .18s ease-out;
  background: linear-gradient(120deg, var(--a), var(--b) 70%);
  color: var(--t);
  border: 1px solid color-mix(in srgb, var(--l) 40%, transparent);
  border-left: 3px solid var(--l);
  border-radius: 4px;
  padding: 14px 60px 12px 54px;
  box-shadow: 0 8px 22px rgba(0,0,0,.5);
  font-size: 1.1rem; line-height: 2.1; cursor: grab;
}
.carta .icono { width: 64px; height: 64px; right: 12px; opacity: .14; }
.carta.destino { outline: 1px dashed var(--fosforo); outline-offset: 3px; }
.carta .semaforo {
  position: absolute; left: 16px; top: 18px;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--gris); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
}
.carta[data-estado="rojo"]  .semaforo { background: var(--rojo);  box-shadow: 0 0 10px var(--rojo), 0 0 2px #fff inset; }
.carta[data-estado="ambar"] .semaforo { background: var(--ambar); box-shadow: 0 0 10px var(--ambar), 0 0 2px #fff inset; }
.carta[data-estado="verde"] .semaforo { background: var(--verde); box-shadow: 0 0 10px var(--verde), 0 0 2px #fff inset; }
.carta .quitar, .carta .cara {
  position: absolute; top: 8px; border: 0; background: none;
  color: color-mix(in srgb, var(--t) 60%, transparent); cursor: pointer; font-size: .95rem; padding: 2px 6px; font-family: inherit;
}
.carta .quitar { right: 8px; z-index: 1; }
/* sangrar: respaldo táctil y de teclado para el arrastre horizontal */
.carta .sangrar {
  position: absolute; bottom: 6px; border: 0; background: none; z-index: 1;
  color: color-mix(in srgb, var(--t) 55%, transparent); cursor: pointer; font: inherit; font-size: 1rem; line-height: 1;
  padding: 2px 7px; opacity: 0; transition: opacity .15s;
}
.carta .sangrar.menos { right: 30px; } .carta .sangrar.mas { right: 8px; }
.carta:hover .sangrar, .carta:focus-within .sangrar { opacity: 1; }
.carta .sangrar:disabled { opacity: 0 !important; cursor: default; }
@media (hover: none) { .carta .sangrar { opacity: .7; } }
/* llaves: la estructura de ramas, dibujada encima del tablero */
.llaves { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.llaves path { fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.llaves .gris  { stroke: var(--linea-fuerte); }
.llaves .verde { stroke: var(--verde); filter: drop-shadow(0 0 3px var(--verde)); }
.llaves .ambar { stroke: var(--ambar); filter: drop-shadow(0 0 3px var(--ambar)); }
.llaves .rojo  { stroke: var(--rojo);  filter: drop-shadow(0 0 3px var(--rojo)); }
/* guía: dónde va a engancharse la carta mientras se arrastra */
.tablero .guia { display: none; position: absolute; top: 10px; bottom: 10px; border-left: 1px dashed var(--fosforo); opacity: .6; pointer-events: none; }
.tablero.guiando .guia { display: block; }
@media (prefers-reduced-motion: reduce) { .carta { transition: none; } }
.carta .cara { right: 36px; font-size: .72rem; border: 1px solid color-mix(in srgb, var(--l) 50%, transparent); border-radius: 3px; line-height: 1.3; z-index: 1; }
.carta .cara.negada { background: var(--l); color: var(--b); border-color: var(--l); }
/* firma: quién sostiene la carta; los dos puntos son mención, no operador */
.carta .firma {
  display: inline-block; border: 0; background: none; font: inherit; cursor: text;
  color: color-mix(in srgb, var(--t) 45%, transparent); padding: 0 6px 0 0; line-height: 1;
  font-weight: 300; letter-spacing: .02em;
}
.carta .firma.puesta { color: hsl(var(--firma-h) 70% 72%); font-weight: 500; }
.carta .firma.vacia { opacity: 0; transition: opacity .15s; }
.carta:hover .firma.vacia, .carta:focus-within .firma.vacia { opacity: 1; }
.carta .firma-in {
  font: inherit; font-size: .95rem; background: rgba(0,0,0,.35); color: var(--texto); border: 1px solid var(--linea-fuerte);
  border-radius: 3px; padding: 2px 6px; width: 11ch; line-height: 1.4; margin-right: 6px; outline: none;
}
.carta .firma-in:focus { border-color: var(--fosforo); }
/* firma propia: memento mori, la carta es tuya, no de la verdad */
.carta.propia { border: 1px solid var(--oro); border-left: 3px solid var(--oro); box-shadow: 0 8px 22px rgba(0,0,0,.5), 0 0 0 1px rgba(232,196,106,.18), 0 0 14px rgba(232,196,106,.12); }
.carta.propia .firma.puesta { color: var(--oro); }
/* fuera de la lectura elegida: se ve, pero no cuenta */
.carta.fuera { opacity: .38; filter: saturate(.4); }
.carta.fuera .semaforo { background: var(--gris) !important; box-shadow: none !important; }
/* barra de lectura, encima del tablero */
.lectura { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: .8rem; color: var(--texto-suave); font-weight: 300; }
.lectura label { display: flex; align-items: center; gap: 6px; }
.lectura select, .lectura input {
  font: inherit; font-size: .8rem; background: rgba(6,10,12,.6); color: var(--texto); border: 1px solid var(--linea-fuerte);
  border-radius: 4px; padding: 4px 8px; outline: none;
}
.lectura select:focus, .lectura input:focus { border-color: var(--fosforo); }
.lectura input { width: 12ch; }
.lectura input.oro { border-color: var(--oro); color: var(--oro); }
.lectura .sep { flex: 1; }
.carta .razon { display: block; font-size: .76rem; line-height: 1.45; color: color-mix(in srgb, var(--t) 62%, transparent); margin-top: 4px; font-weight: 300; }
.hueco {
  display: inline-block; min-width: 96px; min-height: 34px; vertical-align: middle;
  border-bottom: 2px solid var(--hueco); margin: 0 4px;
  text-align: center; line-height: 1;
}
.hueco.prop-hueco { min-width: 160px; border-bottom-style: double; border-bottom-width: 4px; }
.hueco.sobre { background: rgba(92,242,154,.14); border-bottom-color: var(--fosforo); }
.hueco .ficha { cursor: default; font-size: .9rem; vertical-align: middle; }
.prop {
  display: inline-block; position: relative; padding: 5px 10px; border-radius: 3px;
  background: rgba(0,0,0,.3); border: 1px solid color-mix(in srgb, var(--l) 45%, transparent); font-size: .9rem;
}
.termino { display: inline-flex; align-items: center; gap: 4px; padding: 2px 6px; border-radius: 6px; background: rgba(0,0,0,.28); border: 1px dashed color-mix(in srgb, var(--con-l) 60%, transparent); position: relative; }
.termino .op { font-weight: 600; color: var(--con-l); }
.termino .hueco { min-width: 72px; }
.carta .neg { border: 0; background: none; color: var(--l); font: inherit; font-weight: 600; cursor: pointer; padding: 0 2px; }
.carta.negada { border-left-width: 6px; }
.prop.negada { border-color: var(--l); }
.prop.sobre { background: rgba(92,242,154,.14); border-color: var(--fosforo); }
.termino .cerrar { display: none; position: absolute; top: -8px; right: -8px; width: 16px; height: 16px; border-radius: 50%; background: var(--rojo); color: #fff; font-size: .7rem; line-height: 16px; text-align: center; cursor: pointer; }
.termino:hover > .cerrar { display: block; }

/* ---------- veredicto ---------- */
.lista { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.lista li { padding-left: 22px; position: relative; line-height: 1.45; font-size: .85rem; font-weight: 300; }
.lista li::before {
  content: ""; position: absolute; left: 0; top: 6px; width: 9px; height: 9px; border-radius: 50%;
  background: var(--gris);
}
.lista li.rojo::before  { background: var(--rojo);  box-shadow: 0 0 6px var(--rojo); }
.lista li.ambar::before { background: var(--ambar); box-shadow: 0 0 6px var(--ambar); }
.lista li.verde::before { background: var(--verde); box-shadow: 0 0 6px var(--verde); }
.lista li b { font-weight: 600; }
#juris .lista { max-height: 50vh; overflow: auto; margin: 8px 0 12px; }
.rutas li { margin-bottom: 6px; }
.buscando { opacity: .6; font-style: italic; }
section.veredicto button { margin-top: 12px; }

/* ---------- controles ---------- */
button {
  font: inherit; font-size: .8rem; padding: 6px 12px; border-radius: 3px;
  border: 1px solid var(--linea-fuerte); background: transparent; color: var(--texto); cursor: pointer;
}
button:hover { background: rgba(92,242,154,.08); border-color: var(--fosforo); }
button:focus-visible, .ficha:focus-visible, .marco-mini:focus-visible, .carta:focus-visible { outline: 1px solid var(--fosforo); outline-offset: 2px; }
dialog {
  border: 1px solid var(--linea-fuerte); border-radius: 6px;
  background: linear-gradient(160deg, var(--superficie-2), var(--superficie));
  color: var(--texto);
  padding: 24px 28px; width: min(540px, 92vw); font-family: inherit;
  box-shadow: 0 30px 80px rgba(0,0,0,.7);
}
dialog::backdrop { background: rgba(3,5,6,.75); backdrop-filter: blur(3px); }
dialog h3 { margin: 0 0 12px; font-weight: 600; font-size: 1.05rem; color: #fff; }
dialog label { display: block; margin: 12px 0 4px; font-size: .78rem; color: var(--texto-suave); }
dialog input, dialog select, dialog textarea {
  font: inherit; font-size: .9rem; width: 100%; padding: 8px 10px;
  border: 1px solid var(--linea-fuerte); border-radius: 3px;
  background: rgba(0,0,0,.35); color: var(--texto);
}
dialog input:focus, dialog select:focus { outline: 1px solid var(--fosforo); border-color: var(--fosforo); }
dialog select option { background: var(--superficie); }
dialog .acciones { display: flex; gap: 8px; justify-content: flex-end; margin-top: 20px; }
dialog button.primario { background: var(--fosforo); color: var(--fondo); border-color: var(--fosforo); font-weight: 600; }
dialog button.primario:hover { background: #7ff7b0; }
.rel-lista { display: flex; flex-direction: column; gap: 4px; margin: 6px 0; font-size: .85rem; }
.rel-lista span { display: flex; justify-content: space-between; gap: 8px; background: rgba(0,0,0,.3); padding: 5px 9px; border-radius: 3px; border: 1px solid var(--linea); }
.rel-lista span b { font-weight: normal; cursor: pointer; color: var(--rojo); }
.rel-fila { display: flex; gap: 6px; align-items: center; }
.rel-fila select { flex: 1; }
dialog#inicio { width: min(680px, 92vw); padding-top: 28px; }
dialog#inicio .marca { width: 14px; height: 36px; }
dialog#inicio .cabecera { display: flex; align-items: center; gap: 14px; margin-bottom: 6px; }
dialog#inicio h3 { margin: 0; }
dialog#inicio h3 small { display: block; font-weight: 300; font-size: .7rem; letter-spacing: .18em; color: var(--fosforo); text-transform: uppercase; margin-top: 2px; }
.opciones-inicio { display: grid; gap: 10px; margin-top: 16px; }
.opciones-inicio button {
  text-align: left; padding: 14px 16px; font-size: .95rem; line-height: 1.4;
  background: rgba(0,0,0,.3); border-color: var(--linea-fuerte); border-left: 3px solid var(--fosforo);
}
.opciones-inicio button small { display: block; color: var(--texto-suave); font-size: .76rem; font-weight: 300; margin-top: 3px; }
.opciones-inicio button:hover { background: rgba(92,242,154,.08); }
.creditos-inicio { margin: 18px 0 0; font-size: .7rem; letter-spacing: .06em; color: var(--texto-apagado); }
.creditos-inicio b { color: var(--texto-suave); font-weight: 600; }
/* oculto gana siempre: si no, reglas más específicas (p. ej. header a.boton-enlace) lo desharían */
.oculto { display: none !important; }

@media (max-width: 900px) {
  body { grid-template-columns: 1fr; grid-template-rows: auto auto auto 1fr auto auto; height: auto; }
  nav.rail { flex-direction: row; flex-wrap: wrap; border-right: 0; border-bottom: 1px solid var(--linea); }
  aside, section.veredicto { border: 0; }
  header p { display: none; }
  header .grupo { margin-left: 0; }
}
@media (prefers-reduced-motion: no-preference) {
  .carta .semaforo, .marco-mini, button { transition: background .25s, box-shadow .25s, border-color .2s; }
}

/* ---------- cuentas y nube (FiloCode) ---------- */
header .sesion { display: flex; gap: 8px; align-items: center; }
header .sesion-nombre { font-size: .78rem; color: var(--fosforo); max-width: 18ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
button:disabled { opacity: .4; cursor: not-allowed; }
button:disabled:hover { background: transparent; border-color: var(--linea-fuerte); }
button.enlace { border: 0; padding: 0; background: none; color: var(--oro); text-decoration: underline; text-underline-offset: 3px; font-size: .74rem; }
button.enlace:hover { background: none; color: #f3d98f; }
header button.enlace { align-self: center; }
button.peligro { color: var(--rojo); }
button.peligro:hover { border-color: var(--rojo); background: rgba(255,92,108,.08); }
/* el estado ocupa el hueco del separador y se recorta antes que empujar «Tu firma» a otra línea */
.nube-estado { flex: 1 1 0; min-width: 0; text-align: right; font-size: .78rem; color: var(--texto-suave); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lectura .sep:has(+ .nube-estado:not(.oculto)) { display: none; }
.nube-estado b { color: var(--texto); font-weight: 600; }
.nube-estado.sucio { color: var(--ambar); }
dialog form { margin: 0; }
dialog .error { color: var(--rojo); font-size: .8rem; min-height: 1.2em; margin: 12px 0 0; line-height: 1.4; }
dialog .enlaces { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.lista-nube { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; max-height: 55vh; overflow: auto; }
.lista-nube li { display: flex; gap: 8px; align-items: center; padding: 10px 12px; background: rgba(0,0,0,.3); border: 1px solid var(--linea-fuerte); border-left: 3px solid var(--fosforo); border-radius: 3px; }
.lista-nube li.actual { border-left-color: var(--oro); }
.lista-nube .titulo { flex: 1; min-width: 0; }
.lista-nube .titulo b { display: block; font-weight: 600; overflow-wrap: anywhere; }
.lista-nube .titulo small { color: var(--texto-suave); font-size: .72rem; }
.toast {
  inset: auto auto 46px 50%; margin: 0; transform: translate(-50%, 16px);
  background: var(--superficie-2); border: 1px solid var(--fosforo); color: var(--texto);
  padding: 9px 16px; border-radius: 4px; font: inherit; font-size: .82rem;
  box-shadow: 0 10px 30px rgba(0,0,0,.6); opacity: 0; transition: opacity .2s, transform .2s;
}
.toast.visible { opacity: 1; transform: translate(-50%, 0); }
.toast.error { border-color: var(--rojo); }
header .a-portada { flex: none; display: block; line-height: 0; opacity: .9; margin-right: -4px; }
header .a-portada img { width: 40px; height: auto; }
header .a-portada:hover { opacity: 1; filter: drop-shadow(0 0 6px rgba(98,245,217,.45)); }
header a.boton-enlace {
  font: inherit; font-size: .8rem; padding: 6px 12px; border-radius: 3px; text-decoration: none; display: inline-flex; align-items: center;
  border: 1px solid var(--linea-fuerte); color: var(--texto);
}
header a.boton-enlace:hover { background: rgba(92,242,154,.08); border-color: var(--fosforo); }
.lectura button.mini { font-size: .72rem; padding: 3px 9px; flex: none; }
.lectura button.mini.publicado { border-color: var(--oro); color: var(--oro); }
dialog textarea { resize: vertical; min-height: 4.5em; line-height: 1.45; }
dialog textarea:focus { outline: 1px solid var(--fosforo); border-color: var(--fosforo); }
dialog label.casilla { display: flex; gap: 10px; align-items: flex-start; margin-top: 16px; font-size: .76rem; line-height: 1.5; color: var(--texto); }
dialog label.casilla input { width: auto; margin: 3px 0 0; accent-color: var(--fosforo); flex: none; }
dialog label.casilla a { color: var(--oro); }
.lista-nube .chip { font-size: .66rem; padding: 1px 6px; border-radius: 3px; border: 1px solid var(--oro); color: var(--oro); margin-left: 6px; font-weight: 400; vertical-align: 1px; }
.lista-nube .titulo small.basado { display: block; font-style: italic; color: var(--texto-apagado); }
/* con muchas cartas, la columna flex del tablero las aplastaba y cortaba la segunda fila de las fichas (venía de la v13) */
.tablero > .carta { flex-shrink: 0; }
/* carta importada de otro argumento: su procedencia, discreta bajo la razón */
.carta .origen { display: block; font-size: .68rem; line-height: 1.4; margin-top: 3px; color: color-mix(in srgb, var(--t) 48%, transparent); font-weight: 300; }
dialog#dlg-importar { width: min(640px, 94vw); }
.pestanas-mini { display: flex; gap: 2px; border-bottom: 1px solid var(--linea); margin: 14px 0 10px; }
.pestanas-mini button { border: 0; border-bottom: 2px solid transparent; border-radius: 0; background: none; color: var(--texto-suave); padding: 6px 12px; }
.pestanas-mini button[aria-selected="true"] { color: #fff; border-bottom-color: var(--fosforo); background: none; }
#importar-buscar { margin-bottom: 8px; }
.correspondencias { max-height: 40vh; overflow: auto; margin-top: 14px; border: 1px solid var(--linea); border-radius: 4px; }
.correspondencias table { width: 100%; border-collapse: collapse; font-size: .78rem; }
.correspondencias th { text-align: left; font-weight: 400; color: var(--texto-suave); padding: 7px 10px; border-bottom: 1px solid var(--linea-fuerte); position: sticky; top: 0; background: var(--superficie-2); }
.correspondencias td { padding: 6px 10px; border-bottom: 1px solid var(--linea); vertical-align: middle; }
.correspondencias td select { font-size: .78rem; padding: 4px 6px; }
.correspondencias tr.dudoso td:first-child { color: var(--ambar); }
.correspondencias .tipo { font-size: .66rem; padding: 1px 6px; border-radius: 3px; border: 1px solid var(--linea-fuerte); color: var(--texto-suave); white-space: nowrap; }
.correspondencias .tipo.dudoso { border-color: var(--ambar); color: var(--ambar); }
.correspondencias .tipo.nuevo { border-color: var(--fosforo); color: var(--fosforo); }

/* ---------- temas y tesis (ramas) ---------- */
/* el tema es una pregunta: agrupa tesis rivales y no se evalúa */
.carta.tema { border-style: dashed; border-left-style: solid; padding-top: 12px; padding-bottom: 10px; }
.carta.tema .semaforo { display: none; }
.carta.tema .cuerpo { font-size: 1.05rem; }
.carta.tema .icono { opacity: .08; }
.pregunta {
  border: 0; background: none; font: inherit; font-size: 1.05rem; color: var(--t); cursor: text;
  padding: 0; text-align: left; letter-spacing: .01em;
}
.pregunta.vacia { color: color-mix(in srgb, var(--t) 45%, transparent); font-style: italic; }
.pregunta:hover { color: #fff; }
.pregunta-in {
  font: inherit; font-size: 1.02rem; background: rgba(0,0,0,.35); color: var(--texto);
  border: 1px solid var(--linea-fuerte); border-radius: 3px; padding: 3px 8px; width: min(46ch, 100%); outline: none;
}
.pregunta-in:focus { border-color: var(--fosforo); }
/* la tesis encabeza su rama: marca T y un borde más ancho */
.carta.tesis { border-left-width: 7px; }
.marca-tesis {
  position: absolute; top: 8px; left: 14px; z-index: 1;
  border: 1px solid color-mix(in srgb, var(--l) 50%, transparent); border-radius: 3px;
  background: none; color: color-mix(in srgb, var(--t) 55%, transparent);
  font: inherit; font-size: .68rem; font-weight: 600; line-height: 1.2; padding: 0 5px; cursor: pointer; opacity: 0;
  transition: opacity .15s;
}
.carta:hover .marca-tesis, .carta:focus-within .marca-tesis, .marca-tesis.puesta { opacity: 1; }
.marca-tesis.puesta { background: var(--l); color: var(--b); border-color: var(--l); }
.carta.tesis .semaforo { left: 40px; }
dialog label small { color: var(--texto-apagado); font-weight: 400; text-transform: none; letter-spacing: 0; }