/* ====================== BASE ====================== */
:root{
  --fondo:#1f1e1c; --fondo-2:#2a2825; --fondo-3:#35322e;
  --borde:#403c37; --texto:#eeeae4; --texto-2:#a8a29a;
  --acento:#7fa650; --acento-2:#9dc45f;

  --clara:#ebecd0; --oscura:#739552;
  --marca-ultima:#ffe14166; --marca-sel:#ffe14199;

  --c-brillante:#26c2a3; --c-gran:#5b8baf; --c-mejor:#95bb4a;
  --c-excelente:#96bc4b; --c-buena:#a7b58c; --c-teoria:#a88865;
  --c-imprecision:#f7c631; --c-error:#ffa459; --c-grave:#fa412d;

  --radio:10px;
}
*{box-sizing:border-box;margin:0;padding:0}
/* Un display: en el CSS le gana al atributo hidden, y varias capas de arriba
   del tablero lo usan. Sin esto, el cartel de fin tapa el tablero siempre. */
[hidden]{display:none !important}
body{
  background:var(--fondo); color:var(--texto);
  font:15px/1.5 "Segoe UI",system-ui,-apple-system,sans-serif;
  min-height:100vh;
}
button{font:inherit;color:inherit;cursor:pointer;border:none;background:none}

.btn{
  background:var(--acento); color:#12140f; font-weight:650;
  padding:7px 14px; border-radius:8px; border-bottom:3px solid #5d7c3a;
  transition:filter .12s, transform .06s;
}
.btn:hover{filter:brightness(1.08)}
.btn:active{transform:translateY(1px); border-bottom-width:2px}
.btn-fantasma{background:var(--fondo-3); color:var(--texto); border-bottom-color:#26241f}
.btn-chico{padding:6px 12px; font-size:13.5px}
.btn:disabled{opacity:.4; cursor:not-allowed}

/* ====================== BARRA SUPERIOR ====================== */
.barra{
  display:flex; align-items:center; justify-content:space-between;
  padding:5px 16px; background:var(--fondo-2); border-bottom:1px solid var(--borde);
}
.marca{font-size:17px; font-weight:700; letter-spacing:.2px}
.marca-icono{color:var(--acento-2); font-size:20px; vertical-align:-2px}
.barra-acciones{display:flex; gap:10px}

/* ====================== DISPOSICION ====================== */
.escena{
  display:flex; gap:16px; justify-content:center; align-items:flex-start;
  padding:6px 12px; flex-wrap:wrap;
}
.zona-tablero{display:flex; gap:10px; align-items:stretch}
.tablero-envoltorio{display:flex; flex-direction:column; gap:3px}

/* ====================== BARRA DE EVALUACION ====================== */
.barra-eval{
  position:relative; width:18px; border-radius:6px; overflow:hidden;
  background:#2b2b2b; align-self:stretch; margin:24px 0;
}
.eval-negras{position:absolute; inset:0; background:#403c37}
.eval-blancas{
  position:absolute; left:0; right:0; bottom:0; height:50%;
  background:#f2f1e8; transition:height .35s ease;
}
.eval-texto{
  position:absolute; left:0; right:0; bottom:4px; text-align:center;
  font-size:9.5px; font-weight:700; color:#4a4a4a; z-index:2;
}
.barra-eval.negras-mandan .eval-texto{bottom:auto; top:4px; color:#e8e8e8}

/* ====================== TABLERO ====================== */
.tablero{
  /* Lo limita lo que sobre: la altura de la ventana o el ancho menos el panel.
     Sin tope fijo, para que en pantalla grande el tablero sea grande. */
  position:relative; aspect-ratio:1;
  width:min(calc(100vh - 112px), calc(100vw - 468px), 1200px);
  border-radius:var(--radio); overflow:hidden; touch-action:none;
  box-shadow:0 8px 30px #0007;
}
.casillas{display:grid; grid-template-columns:repeat(8,1fr); width:100%; height:100%}
.casilla{position:relative}
.casilla.clara{background:var(--clara)}
.casilla.oscura{background:var(--oscura)}
.casilla .coord{
  position:absolute; font-size:clamp(10px, 1.5vh, 15px); font-weight:800;
  pointer-events:none; letter-spacing:.3px;
}
.casilla .coord-f{left:3px; top:2px}
.casilla .coord-c{right:3px; bottom:1px}
/* Contraste fuerte contra su propia casilla, con un halo para que no se pierda. */
.casilla.clara .coord{color:#456a2c}
.casilla.oscura .coord{color:#f3f4e6}

.casilla.ultima::after,
.casilla.seleccionada::after{content:""; position:absolute; inset:0}
.casilla.ultima::after{background:var(--marca-ultima)}
.casilla.seleccionada::after{background:var(--marca-sel)}
.casilla.jaque{
  background-image:radial-gradient(circle, #ff3b30 0%, #ff3b3055 45%, transparent 72%);
}
/* punto de jugada legal */
.casilla.destino::before{
  content:""; position:absolute; left:50%; top:50%; width:28%; height:28%;
  transform:translate(-50%,-50%); border-radius:50%; background:#0000002e;
}
.casilla.destino.captura::before{
  width:100%; height:100%; border-radius:50%; background:none;
  border:6px solid #0000002e; transform:translate(-50%,-50%) scale(.94);
}

/* piezas */
.capa-piezas{position:absolute; inset:0; pointer-events:none}
.pieza{
  position:absolute; left:0; top:0; width:12.5%; height:12.5%;
  background-size:92%; background-repeat:no-repeat; background-position:center;
  transition:transform .13s ease-out; will-change:transform;
  pointer-events:none; z-index:2;
}
.pieza.arrastrando{transition:none; z-index:20; filter:drop-shadow(0 6px 8px #0009)}

/* flechas */
.capa-flechas{
  position:absolute; inset:0; width:100%; height:100%;
  pointer-events:none; z-index:15; overflow:visible;
}

/* glifos de clasificacion sobre la casilla */
.glifo{
  position:absolute; left:0; top:0; width:12.5%; height:12.5%;
  z-index:16; pointer-events:none; display:grid; place-items:center;
}
.glifo span{
  transform:translate(48%,-48%);
  width:46%; aspect-ratio:1; border-radius:50%;
  display:grid; place-items:center;
  font-size:clamp(10px, 1.6vh, 17px); font-weight:800; color:#12140f;
  box-shadow:0 2px 6px #0007;
}

/* promocion */
.promocion{
  position:absolute; inset:0; z-index:30; background:#000000a8;
  display:flex; align-items:center; justify-content:center;
}
.promo-caja{display:flex; background:var(--fondo-2); border-radius:12px; padding:8px; gap:6px}
.promo-op{
  width:64px; height:64px; border-radius:8px; background-size:78%;
  background-repeat:no-repeat; background-position:center; background-color:var(--fondo-3);
}
.promo-op:hover{background-color:var(--acento)}

/* cartel de fin */
.cartel-fin{
  position:absolute; inset:0; z-index:29; background:#000000b0;
  display:grid; place-items:center; text-align:center; padding:20px;
}
.cartel-fin h3{font-size:26px; margin-bottom:6px}
.cartel-fin p{color:var(--texto-2); margin-bottom:16px}

/* jugadores */
.jugador{display:flex; align-items:center; gap:8px; font-weight:600; height:21px; font-size:13.5px}
.jugador-avatar{font-size:20px}
.capturadas{font-size:13px; color:var(--texto-2); letter-spacing:-3px}
.capturadas b{margin-left:8px; letter-spacing:0; color:var(--acento-2)}

/* ====================== PANEL ====================== */
.panel{
  /* Se estira hasta la altura del tablero (si no, queda un hueco muerto abajo)
     pero sin pasarse: en ventanas bajas el que cede es el listado de jugadas. */
  width:424px; align-self:stretch; max-height:calc(100vh - 112px);
  display:flex; flex-direction:column; gap:12px;
  background:var(--fondo-2); border:1px solid var(--borde);
  border-radius:var(--radio); padding:16px;
}
.apertura{
  font-size:13px; color:var(--texto-2); text-align:center;
  padding-bottom:10px; border-bottom:1px solid var(--borde);
}
.apertura b{color:var(--texto)}

/* tarjeta entrenador: avatar + globo de dialogo */
.entrenador{
  background:var(--fondo-3); border-radius:var(--radio); padding:16px;
  border-left:4px solid var(--borde); transition:border-color .2s;
}
.ent-fila{display:flex; gap:11px; align-items:flex-start}
.ent-avatar{
  width:64px; height:64px; flex:none; position:relative;
  border-radius:50%; overflow:visible;
}
.ent-avatar svg{width:100%; height:100%; border-radius:50%; display:block}
.ent-chapa{
  position:absolute; right:-3px; bottom:-2px;
  min-width:22px; height:22px; padding:0 4px; border-radius:11px;
  display:grid; place-items:center; font-size:12px; font-weight:800;
  color:#12140f; border:2px solid var(--fondo-3); background:var(--borde);
}
.ent-chapa[hidden]{display:none}
.globo{
  position:relative; flex:1; min-width:0;
  background:var(--fondo-2); border-radius:10px; padding:9px 11px;
}
.globo::before{
  content:""; position:absolute; left:-6px; top:15px;
  border:7px solid transparent; border-right-color:var(--fondo-2); border-left:0;
}
.globo-cabecera{display:flex; align-items:baseline; gap:8px; flex-wrap:wrap}
.ent-etiqueta{font-weight:700; font-size:16.5px; line-height:1.25}
.ent-jugada{font-size:12.5px; color:var(--texto-2)}
.ent-texto{margin-top:6px; font-size:15px; line-height:1.55; color:#e2ddd5}
.ent-texto b{color:#fff}
.ent-linea{
  margin-top:10px; font-size:13.5px; color:var(--texto-2);
  background:#00000030; border-radius:7px; padding:9px 11px;
}
.ent-linea b{color:var(--texto)}
.ent-botones{display:flex; gap:8px; margin-top:11px; flex-wrap:wrap}
.ent-botones:empty{display:none}

.pensando{display:inline-block; animation:latir 1s ease-in-out infinite}
@keyframes latir{0%,100%{opacity:.35}50%{opacity:1}}

/* controles */
.controles{display:flex; gap:8px; align-items:center; flex-wrap:wrap}
.interruptor{
  display:flex; align-items:center; gap:6px; font-size:13px;
  color:var(--texto-2); margin-left:auto; cursor:pointer;
}
.interruptor input{accent-color:var(--acento); width:15px; height:15px}

/* lista de jugadas */
.jugadas-caja{
  /* Crece con el panel en vez de dejar el resto vacío, y cede si no entra. */
  flex:1 1 auto; min-height:0; overflow-y:auto; background:#00000026;
  border-radius:8px; scrollbar-width:thin;
}
.jugadas{width:100%; border-collapse:collapse; font-size:14.5px}
.jugadas td{padding:4px 7px}
.jugadas .num{color:var(--texto-2); width:34px; text-align:right; font-size:12.5px}
.jugadas .mov{cursor:pointer; border-radius:5px; white-space:nowrap}
.jugadas .mov:hover{background:#ffffff12}
.jugadas .mov.actual{background:#ffffff1f; font-weight:700}
.jugadas .g{font-weight:800; margin-left:3px}

/* resumen */
.resumen{background:var(--fondo-3); border-radius:var(--radio); padding:13px; font-size:13.5px}
.resumen h4{font-size:14px; margin-bottom:9px}
.resumen-fila{display:flex; justify-content:space-between; padding:2.5px 0}
.resumen-fila span:first-child{display:flex; align-items:center; gap:7px}
.punto{width:10px; height:10px; border-radius:50%; display:inline-block}
.precision{
  text-align:center; font-size:30px; font-weight:800; color:var(--acento-2);
  line-height:1.1; margin-bottom:8px;
}
.precision small{display:block; font-size:11.5px; color:var(--texto-2); font-weight:500}

.estado{font-size:12px; color:var(--texto-2); text-align:center; min-height:16px}

/* ====================== DIALOGO ====================== */
.dlg{
  border:1px solid var(--borde); background:var(--fondo-2); color:var(--texto);
  border-radius:14px; padding:22px; width:400px; max-width:92vw;
}
.dlg::backdrop{background:#000000b3}
.dlg h2{font-size:20px; margin-bottom:16px}
.dlg-etiqueta{font-size:12px; color:var(--texto-2); text-transform:uppercase;
  letter-spacing:.7px; margin:14px 0 8px}
.niveles{display:grid; grid-template-columns:repeat(4,1fr); gap:7px}
.nivel-op{
  background:var(--fondo-3); border-radius:8px; padding:9px 4px; text-align:center;
  border:2px solid transparent; transition:.12s;
}
.nivel-op:hover{background:#413d37}
.nivel-op.activo{border-color:var(--acento); background:#3d4a2c}
.nivel-op b{display:block; font-size:15px}
.nivel-op small{font-size:10.5px; color:var(--texto-2)}
.colores{display:flex; gap:7px}
.color-op{
  flex:1; background:var(--fondo-3); border-radius:8px; padding:11px 4px;
  border:2px solid transparent; font-size:13.5px;
}
.color-op.activo{border-color:var(--acento); background:#3d4a2c}
.pieza-mini{font-size:17px; vertical-align:-2px}
.pieza-mini-n{color:#000; text-shadow:0 0 2px #fff}
.dlg-pie{display:flex; justify-content:flex-end; gap:9px; margin-top:22px}

/* Cuando ya no entran lado a lado, el panel pasa abajo y el tablero se
   queda con el ancho: es preferible a achicar los dos. */
@media (max-width:1150px){
  .escena{padding:12px; gap:14px}
  .panel{align-self:auto; max-height:none}
  .jugadas-caja{flex:none; height:150px}
  .tablero{width:min(92vw, 620px)}
  .panel{width:min(92vw, 620px)}
  .barra-eval{margin:26px 0}
}

/* ====================== PERFIL ====================== */
.dlg-ancho{width:460px}
.dlg-texto{font-size:13.5px; color:var(--texto-2); margin-bottom:6px}
.campo{
  flex:1; background:var(--fondo-3); border:1px solid var(--borde); color:var(--texto);
  border-radius:8px; padding:8px 11px; font:inherit; font-size:13.5px; min-width:0;
}
.elo-ops{display:grid; grid-template-columns:1fr 1fr; gap:7px; margin-top:12px}
.elo-ops button{
  background:var(--fondo-3); border-radius:8px; padding:10px; text-align:left;
  border:2px solid transparent; transition:.12s;
}
.elo-ops button:hover{background:#413d37}
.elo-ops button.activo{border-color:var(--acento); background:#3d4a2c}
.elo-ops b{display:block; font-size:13.5px; font-weight:650}
.elo-ops small{color:var(--texto-2); font-size:11.5px}

.p-elo{text-align:center; margin-bottom:14px}
.p-elo .n{font-size:44px; font-weight:800; line-height:1; color:var(--acento-2)}
.p-elo .n small{font-size:13px; color:var(--texto-2); font-weight:500; display:block; margin-top:3px}
.p-elo .prov{font-size:11.5px; color:var(--c-imprecision)}
.p-tarjetas{display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-bottom:14px}
.p-tarjeta{background:var(--fondo-3); border-radius:9px; padding:9px; text-align:center}
.p-tarjeta b{display:block; font-size:19px}
.p-tarjeta small{font-size:11px; color:var(--texto-2)}
.p-titulo{font-size:12px; color:var(--texto-2); text-transform:uppercase;
  letter-spacing:.7px; margin:16px 0 8px}
.p-fallo{margin-bottom:9px}
.p-fallo-cab{display:flex; justify-content:space-between; font-size:13.5px; margin-bottom:4px}
.p-barra{height:6px; background:#00000040; border-radius:3px; overflow:hidden}
.p-barra i{display:block; height:100%; background:var(--c-error); border-radius:3px}
.p-consejo{
  background:var(--fondo-3); border-left:3px solid var(--acento); border-radius:8px;
  padding:10px 12px; font-size:13.5px; color:#ddd8d0; margin-top:4px;
}
.p-vacio{color:var(--texto-2); font-size:13.5px; text-align:center; padding:18px 0}
.p-partidas{display:flex; gap:4px; align-items:flex-end; height:56px; margin-top:4px}
.p-partidas i{
  flex:1; background:var(--acento); border-radius:3px 3px 0 0; min-height:3px;
  position:relative;
}
.p-partidas i.der{background:var(--c-grave)} .p-partidas i.emp{background:var(--texto-2)}
.p-elo-sub{font-size:12px; color:var(--texto-2); margin-top:4px}

.ent-turno{
  margin-top:11px; font-size:13.5px; color:var(--texto-2);
  background:#00000030; border-radius:7px; padding:7px 10px;
}
.ent-turno b{color:var(--texto)}
.ent-turno.alerta{background:#f7c6311f; color:#f0d48a}
.ent-turno.alerta b{color:#f7c631}

/* ====================== ELECCIONES DE NUEVA PARTIDA ====================== */
.plan{
  background:var(--fondo-3); border-left:3px solid var(--c-error); border-radius:8px;
  padding:10px 12px; margin-bottom:14px; font-size:13px; color:#ddd8d0;
}
.plan b{display:block; color:var(--texto); font-size:13.5px; margin-bottom:2px}
.plan .plan-tit{
  font-size:10.5px; letter-spacing:.8px; text-transform:uppercase;
  color:var(--texto-2); display:block; margin-bottom:5px; font-weight:600;
}
.eleccion-fila{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:10px 0; border-top:1px solid var(--borde);
}
.eleccion-tit{
  font-size:10.5px; letter-spacing:.8px; text-transform:uppercase; color:var(--texto-2);
  font-weight:600;
}
.eleccion-val{font-size:14.5px; font-weight:650; margin-top:2px}
.eleccion-val small{display:block; font-size:12px; font-weight:400; color:var(--texto-2)}
#niveles:not([hidden]), #colores:not([hidden]){margin-bottom:10px}
.campo-ancho{width:100%; flex:none}

/* La jugada dicha en criollo, al lado de la notacion */
.dicho{color:var(--texto-2); font-size:.92em; font-style:italic}
.dicho::before{content:"— "}

/* ====================== REVISION DE PARTIDA ====================== */
.revision{display:flex; gap:5px; align-items:center}
.revision .btn{padding:6px 9px}
.rev-pos{flex:1; text-align:center; font-size:12.5px; color:var(--texto-2)}
.fuertes{background:var(--fondo-3); border-radius:var(--radio); padding:13px; font-size:13.5px}
.fuertes h4{font-size:12px; letter-spacing:.7px; text-transform:uppercase;
  color:var(--texto-2); margin:0 0 7px}
.fuertes h4:not(:first-child){margin-top:13px}
.fuertes li{list-style:none; padding:3px 0 3px 20px; position:relative; color:#ddd8d0}
.fuertes li::before{position:absolute; left:0}
.fuertes .si::before{content:"✔"; color:var(--acento-2)}
.fuertes .no::before{content:"▲"; color:var(--c-error); font-size:10px; top:5px}

/* ====================== APERTURAS ====================== */
.filtro{display:flex; gap:6px; margin:14px 0 10px}
.filtro-op{
  background:var(--fondo-3); border-radius:7px; padding:6px 12px; font-size:13px;
  border:2px solid transparent;
}
.filtro-op.activo{border-color:var(--acento); background:#3d4a2c}
.lista-lecciones{max-height:52vh; overflow-y:auto; display:flex; flex-direction:column; gap:8px}
.leccion{
  background:var(--fondo-3); border-radius:9px; padding:11px 13px; text-align:left;
  border-left:3px solid var(--acento); width:100%;
}
.leccion:hover{background:#413d37}
.leccion-cab{display:flex; align-items:baseline; gap:8px; flex-wrap:wrap}
.leccion-cab b{font-size:14.5px}
.leccion-tag{
  font-size:10.5px; padding:2px 7px; border-radius:9px; font-weight:600;
  background:#00000038; color:var(--texto-2);
}
.leccion-tag.blancas{background:#e8e6dc; color:#2b2b2b}
.leccion-tag.negras{background:#3a3a3a; color:#e8e6dc}
.leccion p{font-size:12.5px; color:var(--texto-2); margin-top:5px; line-height:1.45}
.leccion-hecha{border-left-color:var(--acento-2)}
.leccion-hecha .leccion-cab b::after{content:" ✔"; color:var(--acento-2)}

/* ====================== CELULAR ====================== */
@media (max-width:700px){
  /* La barra se partia en dos lineas y se comia 96px de alto. Con pantalla
     chica los botones quedan solo con el icono. */
  .barra{padding:5px 10px}
  .marca{font-size:15px}
  .barra-acciones{gap:6px}
  .barra-acciones .btn{padding:7px 10px; font-size:0}
  .barra-acciones .btn::first-letter{font-size:16px}
  .tablero{width:min(96vw, calc(100vh - 124px), 620px)}
  .panel{width:96vw; padding:12px}
  .escena{padding:6px 2vw; gap:10px}
  .jugadas-caja{height:150px}
  .dlg{padding:16px}
  .niveles{grid-template-columns:repeat(4,1fr); gap:5px}
  .elo-ops{grid-template-columns:1fr}
  .lista-lecciones{max-height:46vh}
  /* Los botones del entrenador tienen que ser comodos con el dedo */
  .ent-botones .btn, .revision .btn{padding:9px 12px}
}

/* ====================== NAVEGADOR VIEJO ====================== */
.viejo{
  position:fixed; inset:0; z-index:999; background:var(--fondo);
  display:grid; place-items:center; padding:24px; text-align:center;
}
.viejo h2{font-size:22px; margin-bottom:10px}
.viejo p{color:var(--texto-2); max-width:420px; margin:0 auto 10px}
.viejo b{color:var(--texto)}
.viejo-ayuda{font-size:13.5px}

/* ====================== IDENTIDAD ====================== */
.dlg-alto{max-height:88vh; overflow-y:auto}
.ident{display:flex; gap:14px; align-items:center; margin:14px 0 8px}
.ident-campos{flex:1; min-width:0; display:flex; flex-direction:column; gap:8px}

.foto-caja{
  position:relative; width:76px; height:76px; flex:none; border-radius:50%;
  background:var(--fondo-3); border:2px solid var(--borde); cursor:pointer;
  display:grid; place-items:center; overflow:hidden;
}
.foto-caja:hover{border-color:var(--acento)}
.foto{width:100%; height:100%; object-fit:cover; border-radius:50%}
.foto-letras{font-size:26px; font-weight:700; color:var(--texto-2)}
.foto-lapiz{
  position:absolute; right:-1px; bottom:-1px; width:24px; height:24px;
  border-radius:50%; background:var(--acento); color:#12140f;
  display:grid; place-items:center; font-size:12px;
  border:2px solid var(--fondo-2);
}
.quitar-foto{margin-bottom:8px}
select.campo{appearance:none; cursor:pointer}

.objetivos{display:flex; flex-wrap:wrap; gap:6px}
.objetivo-op{
  background:var(--fondo-3); border-radius:20px; padding:7px 13px; font-size:13px;
  border:2px solid transparent;
}
.objetivo-op.activo{border-color:var(--acento); background:#3d4a2c}

/* Ficha del jugador arriba del perfil */
.ficha{display:flex; gap:13px; align-items:center; margin-bottom:14px}
.ficha .foto-caja{width:64px; height:64px; cursor:default}
.ficha .foto-caja:hover{border-color:var(--borde)}
.ficha-nombre{font-size:18px; font-weight:700; display:flex; align-items:center; gap:7px}
.ficha-pais{font-size:13px; color:var(--texto-2)}
.ficha-bio{font-size:13px; color:var(--texto-2); font-style:italic; margin-top:3px}
.ficha-objetivo{
  display:inline-block; margin-top:5px; font-size:11.5px; padding:3px 9px;
  border-radius:20px; background:#3d4a2c; color:var(--acento-2); font-weight:600;
}

/* Foto del jugador debajo del tablero */
.jugador-foto{
  width:22px; height:22px; border-radius:50%; object-fit:cover;
  vertical-align:middle; border:1px solid var(--borde);
}

/* Anillo de pista: senala la pieza a mover sin dibujar una flecha sin direccion */
.anillo{
  position:absolute; inset:7%; border-radius:50%;
  border:4px solid #f7c631; box-shadow:0 0 0 2px #00000038;
  pointer-events:none; animation:latido 1.3s ease-in-out infinite;
}
@keyframes latido{50%{opacity:.4}}

/* Chapita con la cantidad de repasos pendientes */
.con-chapa{position:relative}
.con-chapa.con-pendientes::after{
  content:attr(data-cuenta); position:absolute; top:-6px; right:-6px;
  min-width:18px; height:18px; padding:0 4px; border-radius:9px;
  background:var(--c-grave); color:#fff; font-size:11px; font-weight:800;
  display:grid; place-items:center; border:2px solid var(--fondo-2);
}

/* ====================== LEYENDAS ====================== */
.leyenda{
  background:var(--fondo-3); border-radius:9px; padding:11px 13px; text-align:left;
  border-left:3px solid var(--c-teoria); width:100%;
}
.leyenda:hover{background:#413d37}
.leyenda-cab{display:flex; align-items:center; gap:10px}
.leyenda-cab b{font-size:14.5px; display:block}
.leyenda-bandera{font-size:24px}
.leyenda-apodo{font-size:11.5px; color:var(--texto-2)}
.leyenda-cab .leccion-tag{margin-left:auto}
.leyenda p{font-size:12.5px; color:var(--texto-2); margin-top:6px; line-height:1.45}
.leyenda-como b{color:var(--texto)}

/* Circulo que marcas vos con clic derecho */
.circulo{
  position:absolute; inset:5%; border-radius:50%;
  border:4px solid #f7a531; opacity:.85; pointer-events:none;
}

.racha{
  align-self:center; font-size:14px; font-weight:700; color:#ffb454;
  background:#00000038; padding:5px 10px; border-radius:20px; cursor:default;
}
.btn-icono{padding:7px 10px; font-size:15px; line-height:1}

/* ====================== TUTORIAL DE NOTACION ====================== */
.tut-tablero{
  display:grid; grid-template-columns:repeat(8,1fr); width:100%; max-width:340px;
  margin:0 auto; aspect-ratio:1; border-radius:8px; overflow:hidden;
}
.tut-casilla{
  display:grid; place-items:center; font-size:10.5px; font-weight:700;
  cursor:pointer; transition:filter .1s;
}
.tut-casilla:hover{filter:brightness(1.15)}
.tut-casilla.clara{background:var(--clara); color:#456a2c}
.tut-casilla.oscura{background:var(--oscura); color:#f3f4e6}
.tut-casilla.elegida{outline:3px solid var(--c-imprecision); outline-offset:-3px}
.tut-elegida{text-align:center; font-size:15px; margin-top:10px; min-height:24px; font-weight:600}
.tut-elegida b{color:var(--acento-2)}

.tut-tabla{width:100%; border-collapse:collapse; font-size:13.5px}
.tut-tabla td{padding:5px 8px; border-bottom:1px solid var(--borde)}
.tut-tabla td:first-child{width:60px; color:var(--acento-2)}
.tut-ejemplos td:first-child{width:80px}
.tut-simbolos{display:flex; flex-direction:column; gap:5px}
.tut-simbolo{display:flex; align-items:center; gap:9px; font-size:13.5px}
.tut-simbolo i{
  width:26px; height:26px; border-radius:50%; display:grid; place-items:center;
  font-style:normal; font-weight:800; font-size:12px; color:#12140f; flex:none;
}

/* ====================== RUTINA DE HOY ====================== */
.paso{
  display:flex; gap:12px; align-items:center; background:var(--fondo-3);
  border-radius:10px; padding:12px 14px; margin-bottom:9px;
  border-left:3px solid var(--acento);
}
.paso.hecho{opacity:.55; border-left-color:var(--acento-2)}
.paso-icono{font-size:24px; flex:none; width:30px; text-align:center}
.paso-texto{flex:1; min-width:0}
.paso-texto b{display:block; font-size:14.5px}
.paso-texto span{font-size:12.5px; color:var(--texto-2)}
.paso.hecho .paso-texto b::after{content:" ✔"; color:var(--acento-2)}

/* ====================== MENU DE LA BARRA ====================== */
.barra-acciones{flex-wrap:wrap; justify-content:flex-end}
.menu-caja{position:relative}
.menu{
  position:absolute; right:0; top:calc(100% + 6px); z-index:50;
  background:var(--fondo-2); border:1px solid var(--borde); border-radius:10px;
  padding:6px; display:flex; flex-direction:column; gap:4px; min-width:190px;
  box-shadow:0 10px 30px #0009;
}
.menu .btn{text-align:left; background:none; border-bottom:none; padding:9px 11px}
.menu .btn:hover{background:var(--fondo-3)}
.cartel-fin .btn{margin:0 4px}