/* ==========================================================================
   Aldea de los Fosos · estilos
   (misma paleta y componentes que el Simulador de Matriz de Harris)
   ========================================================================== */
:root {
  --fondo: #f1ece2;
  --tarjeta: #fffdf8;
  --tarjeta-2: #f8f3ea;
  --tinta: #2b2118;
  --tinta-2: #6d5a47;
  --tinta-3: #9a8876;
  --borde: #e3d9c7;
  --borde-2: #cdbfa8;
  --acento: #9a5b25;
  --acento-2: #7c4518;
  --acento-suave: #f4e6d4;
  --azul: #1e6ef0;
  --ok: #2e7d32;
  --ok-f: #e8f5e9;
  --medio: #b7791f;
  --medio-f: #fff4d6;
  --error: #c62828;
  --error-f: #fdecea;
  --tierra: #6d4f33;
  --sombra: 0 1px 2px rgba(60, 40, 20, .06), 0 4px 14px rgba(60, 40, 20, .07);
  --radio: 12px;
  --fuente: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  font-family: var(--fuente);
  font-size: 14px;
  line-height: 1.45;
  color: var(--tinta);
  background: var(--fondo);
  overflow-x: hidden;
}
h1, h2, h3 { margin: 0; line-height: 1.2; }
a { color: var(--acento-2); }
[hidden] { display: none !important; }

/* ---------------- botones ---------------- */
.btn {
  font: 600 13px var(--fuente);
  color: var(--tinta);
  background: #fff;
  border: 1px solid var(--borde-2);
  border-radius: 8px;
  padding: 7px 12px;
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s, box-shadow .15s;
  white-space: nowrap;
}
.btn:hover:not(:disabled) { background: var(--acento-suave); border-color: var(--acento); }
.btn:focus-visible, .seg:focus-visible, .tarj-dif:focus-visible, .carta-edif:focus-visible, .btn-ico:focus-visible { outline: 2px solid var(--azul); outline-offset: 2px; }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn.primario { background: var(--acento); border-color: var(--acento-2); color: #fff; }
.btn.primario:hover:not(:disabled) { background: var(--acento-2); }
.btn.peligro { color: var(--error); }
.btn.peligro:hover:not(:disabled) { background: var(--error-f); border-color: var(--error); }
.btn-peq { font-size: 12px; padding: 5px 9px; }
.btn-ancho { width: 100%; }
.btn.grande { font-size: 15px; padding: 11px 14px; }
.btn-link { background: none; border: none; color: var(--acento-2); padding: 2px 0; font: 600 13px var(--fuente); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; text-align: left; }
.btn-link:hover { color: var(--tinta); }
.btn-ico {
  font: 700 16px var(--fuente); line-height: 1;
  min-width: 30px; height: 30px; padding: 0 6px;
  display: inline-grid; place-items: center;
  border: 1px solid var(--borde-2); border-radius: 8px; background: #fff; cursor: pointer; color: var(--tinta);
}
.btn-ico.peq { font-size: 12px; }
.btn-ico:hover:not(:disabled) { background: var(--acento-suave); }
.btn-ico:disabled { opacity: .4; cursor: not-allowed; }
.btn-x {
  border: none; background: none; color: var(--tinta-3); font-size: 18px; line-height: 1;
  cursor: pointer; padding: 0 4px; border-radius: 4px;
}
.btn-x:hover { color: var(--error); background: var(--error-f); }

/* ---------------- cabecera ---------------- */
.barra {
  display: flex; align-items: center; gap: 14px 18px; flex-wrap: wrap;
  padding: 10px 20px;
  background: #2b2118;
  color: #f6efe3;
  border-bottom: 3px solid var(--acento);
}
.marca { display: flex; align-items: center; gap: 10px; }
.logo { width: 38px; height: 38px; background: #f6efe3; border-radius: 8px; padding: 2px; flex: 0 0 38px; }
.marca h1 { font-size: 18px; letter-spacing: .2px; }
.marca p { margin: 0; font-size: 12px; color: #cdbfa8; }
.info-partida { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: 13px; color: #e8dccb; flex: 1; }
.info-partida .sep { color: #8d7a66; }
.etq-fase { font-weight: 700; font-size: 11.5px; text-transform: uppercase; letter-spacing: .5px; padding: 3px 9px; border-radius: 20px; background: #4a3b2e; color: #fff; }
.etq-fase.f1 { background: #6b7d3a; } .etq-fase.f2 { background: #8a6a2c; } .etq-fase.f3 { background: #9a5b25; }
.etq-fase.f4 { background: #a3462a; } .etq-fase.f5 { background: #b8651c; }
.cab-per { color: #cdbfa8; }
.cab-tiempo b { color: #fff; }
.etq-dif { font-weight: 700; font-size: 10.5px; text-transform: uppercase; letter-spacing: .5px; padding: 2px 7px; border-radius: 20px; border: 1px solid #6d5a47; color: #cdbfa8; }
.acciones { display: flex; gap: 8px; flex-wrap: wrap; }
.barra .btn:not(.primario) { background: transparent; color: #f6efe3; border-color: #6d5a47; }
.barra .btn:not(.primario):hover { background: #3d3025; }
.selector-idioma { display: inline-flex; border: 1px solid #6d5a47; border-radius: 8px; overflow: hidden; }
.selector-idioma button {
  font: 700 12px var(--fuente); letter-spacing: .5px;
  background: transparent; color: #cdbfa8; border: none; padding: 7px 10px; cursor: pointer;
}
.selector-idioma button + button { border-left: 1px solid #6d5a47; }
.selector-idioma button.activo { background: #f6efe3; color: #2b2118; }
.selector-idioma button:hover:not(.activo) { background: #3d3025; color: #fff; }
.selector-idioma button:focus-visible { outline: 2px solid var(--azul); outline-offset: -2px; }
.pestanas button em { font-style: normal; }

/* ---------------- disposición ---------------- */
.app {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 410px;
  gap: 16px;
  padding: 16px;
  max-width: 1720px;
  margin: 0 auto;
  align-items: start;
}
.col-izq { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.col-der {
  position: sticky; top: 12px;
  background: var(--tarjeta);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  display: flex; flex-direction: column;
  max-height: calc(100vh - 24px);
  min-width: 0;
}
.tarjeta {
  background: var(--tarjeta);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  overflow: hidden;
  min-width: 0;
}

/* ---------------- barra de recursos ---------------- */
.barra-rec {
  display: flex; flex-wrap: wrap; gap: 5px; padding: 8px 10px;
  background: var(--tarjeta-2); border-bottom: 1px solid var(--borde);
}
.rec-aviso { font-weight: 600; color: var(--acento-2); padding: 4px 2px; }
.chip-rec {
  display: inline-flex; align-items: baseline; gap: 4px;
  background: #fff; border: 1px solid var(--borde); border-radius: 20px;
  padding: 3px 9px 3px 7px; font-size: 13px; white-space: nowrap; cursor: default;
}
.chip-rec i { font-style: normal; }
.chip-rec b { font-variant-numeric: tabular-nums; }
.chip-rec small { font-size: 10.5px; font-weight: 700; }
.chip-rec.pob { border-color: var(--borde-2); background: #fbf6ec; }
.chip-rec.alerta { border-color: var(--error); background: var(--error-f); }
.mas { color: var(--ok); }
.menos { color: var(--error); }

/* ---------------- mapa ---------------- */
.mapa-caja {
  position: relative; overflow: auto; max-height: 74vh;
  background: #e7dcc0; line-height: 0;
  overscroll-behavior: contain;
}
#mapa { display: block; margin: 0 auto; cursor: pointer; touch-action: manipulation; }
#mapa.modo-herr { cursor: crosshair; }
.tooltip {
  position: absolute; z-index: 5; pointer-events: none; line-height: 1.4;
  background: rgba(34, 25, 17, .94); color: #fbf5ea;
  font-size: 12.5px; padding: 7px 10px; border-radius: 8px; max-width: 250px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, .25);
}
.tooltip small { color: #d8c8b2; }
.barra-herr {
  display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center;
  padding: 8px 10px; border-top: 1px solid var(--borde); background: var(--tarjeta-2);
}
.zoom-btns { display: flex; gap: 6px; }
.aviso-herr {
  flex: 1; min-width: 180px;
  background: #2b2118; color: #fff; font-size: 12.5px; font-weight: 600;
  padding: 6px 12px; border-radius: 20px;
}
.info-casilla { padding: 10px 12px; border-top: 1px solid var(--borde); min-height: 52px; }
.info-casilla .nota { margin: 2px 0; }
.cas-cab { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.cas-txt { flex: 1; min-width: 160px; font-size: 13px; }
.cas-txt small { color: var(--tinta-2); }
.cas-acc { display: flex; gap: 6px; }
.icono-edif { border-radius: 8px; border: 1px solid var(--borde-2); flex: 0 0 auto; }
.cultivo-sel { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 8px; }
.cultivo-sel .clasif-tit { margin-right: 4px; }

/* ---------------- zona inferior ---------------- */
.pestanas-inf { display: flex; border-bottom: 1px solid var(--borde); background: var(--tarjeta-2); }
.pestanas-inf button {
  font: 600 13px var(--fuente); color: var(--tinta-2); background: none; border: none;
  border-bottom: 3px solid transparent; padding: 10px 16px; cursor: pointer;
}
.pestanas-inf button.activa { color: var(--acento-2); border-bottom-color: var(--acento); }
.inferior-host { max-height: 360px; overflow: auto; }
.cronica { list-style: none; margin: 0; padding: 6px 0; }
.cronica li { display: grid; grid-template-columns: 128px 1fr; gap: 10px; padding: 4px 14px; font-size: 13px; }
.cronica li + li { border-top: 1px solid #f1eadf; }
.cr-cuando { color: var(--tinta-3); font-size: 12px; font-weight: 600; white-space: nowrap; }
.cronica li.log-fase, .cronica li.log-victoria { background: #fff6e2; }
.cronica li.log-fosoFin { background: #f5ede2; }
.cronica li.log-finColapso, .cronica li.log-finDispersion { background: var(--error-f); }
.gr-caja { padding: 10px 12px; }
.grafica { width: 100%; height: auto; display: block; background: #fff; border: 1px solid var(--borde); border-radius: 8px; }
.gr-rej { stroke: #eee5d6; stroke-width: 1; }
.gr-eje { font: 11px var(--fuente); fill: var(--tinta-3); }
.gr-vacia { font: 13px var(--fuente); fill: var(--tinta-3); }
.gr-pob, .gr-salud, .gr-coh { fill: none; stroke-linejoin: round; }
.gr-pob { stroke: var(--acento); stroke-width: 2.6; }
.gr-salud { stroke: var(--ok); stroke-width: 1.4; opacity: .8; }
.gr-coh { stroke: #7b3fa0; stroke-width: 1.4; opacity: .8; stroke-dasharray: 5 3; }
.gr-ley { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12px; color: var(--tinta-2); margin-top: 6px; }
.gr-ley .gr-x { margin-left: auto; color: var(--tinta-3); }
.lg { display: inline-block; width: 18px; height: 0; border-top: 3px solid; vertical-align: middle; margin-right: 5px; }
.lg.pob { border-color: var(--acento); } .lg.salud { border-color: var(--ok); } .lg.coh { border-color: #7b3fa0; border-top-style: dashed; }

/* ---------------- panel lateral ---------------- */
.pestanas { display: grid; grid-template-columns: repeat(4, 1fr); border-bottom: 1px solid var(--borde); }
.pestanas button {
  font: 600 12.5px var(--fuente); color: var(--tinta-2);
  background: none; border: none; border-bottom: 3px solid transparent;
  padding: 10px 4px 8px; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 2px;
}
.pestanas button span { font-size: 17px; line-height: 1.1; }
.pestanas button:hover { color: var(--tinta); background: var(--tarjeta-2); }
.pestanas button.activa { color: var(--acento-2); border-bottom-color: var(--acento); }
.panel { padding: 14px; overflow-y: auto; flex: 1; display: flex; flex-direction: column; gap: 12px; }
.pie-turno { border-top: 1px solid var(--borde); padding: 10px 12px; display: flex; gap: 8px; background: var(--tarjeta-2); border-radius: 0 0 var(--radio) var(--radio); }
.pie-turno #btnEstacion { flex: 1; }
.intro { font-size: 13px; color: var(--tinta-2); background: var(--tarjeta-2); border-radius: 8px; padding: 9px 11px; border-left: 3px solid var(--acento); }
.nota { color: var(--tinta-2); font-size: 12.5px; margin: 4px 0; }
.nota.pad { padding: 12px 14px; margin: 0; }
.lista-consejos { margin: 0; padding-left: 4px; list-style: none; display: flex; flex-direction: column; gap: 8px; font-size: 13px; }
.clasif-tit { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--tinta-2); }
.bloque { border: 1px solid var(--borde); border-radius: 10px; padding: 10px 12px; background: #fff; display: flex; flex-direction: column; gap: 5px; }
.bloque h3 { font-size: 13.5px; margin-bottom: 2px; }
.bloque.objetivo { border-color: #e2c27a; background: #fffaf0; }
.fila-dato { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; }
.fila-dato span { color: var(--tinta-2); }
.fila-dato b { font-variant-numeric: tabular-nums; text-align: right; }
.fila-dato b small { font-weight: 500; color: var(--tinta-3); }
.fila-dato.mal b { color: var(--error); }
.barra-prog { height: 7px; background: #ece3d4; border-radius: 6px; overflow: hidden; flex: 0 0 auto; }
.barra-prog div { height: 100%; background: linear-gradient(90deg, #b07a3f, #9a5b25); border-radius: 6px; transition: width .3s; }
.barra-prog.alta div { background: var(--ok); }
.barra-prog.media div { background: var(--medio); }
.barra-prog.baja div { background: var(--error); }
.alta { color: var(--ok); }
.media { color: var(--medio); }
.baja { color: var(--error); }

.caja-pob { display: flex; gap: 14px; align-items: center; border: 1px solid var(--borde); border-radius: 10px; padding: 10px 12px; background: #fff; }
.pob-num { display: flex; flex-direction: column; align-items: center; min-width: 76px; }
.pob-num span { font-size: 32px; font-weight: 800; line-height: 1; color: var(--acento-2); }
.pob-num small { color: var(--tinta-3); font-size: 11.5px; }
.pob-datos { flex: 1; display: flex; flex-direction: column; gap: 3px; }
.indicadores { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.indicador { border: 1px solid var(--borde); border-radius: 10px; padding: 7px 9px; background: #fff; display: flex; flex-direction: column; gap: 5px; cursor: help; }
.ind-cab { display: flex; justify-content: space-between; align-items: baseline; font-size: 12px; color: var(--tinta-2); }
.ind-cab b { font-size: 16px; }
.alertas { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.alertas li { font-size: 12.5px; padding: 6px 9px; border-radius: 8px; border-left: 3px solid; }
.alertas li.st-error { background: var(--error-f); border-color: var(--error); }
.alertas li.st-medio { background: var(--medio-f); border-color: var(--medio); }
.prod-linea { margin: 0; font-size: 13px; font-weight: 600; color: var(--ok); }
.notas-inf { margin: 0; padding-left: 18px; font-size: 12.5px; color: var(--tinta-2); }
.notas-inf li { margin: 2px 0; }

/* tareas */
.cab-tareas { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.cab-tareas > div:first-child { display: flex; flex-direction: column; }
.cab-tareas small { color: var(--tinta-3); font-size: 11.5px; }
.libres { display: flex; flex-direction: column; align-items: center; border: 1px solid var(--borde); border-radius: 10px; padding: 4px 12px; background: #fff; }
.libres span { font-size: 11px; color: var(--tinta-3); text-transform: uppercase; letter-spacing: .5px; }
.libres b { font-size: 20px; line-height: 1.1; }
.libres.hay { border-color: var(--medio); background: var(--medio-f); }
.libres.hay b { color: var(--medio); }
.tarea {
  display: grid; grid-template-columns: 30px 1fr auto; gap: 4px 10px; align-items: center;
  border: 1px solid var(--borde); border-radius: 10px; padding: 8px 10px; background: #fff;
}
.tarea.bloqueada { opacity: .6; background: var(--tarjeta-2); }
.ta-ico { font-size: 20px; text-align: center; }
.ta-txt { display: flex; flex-direction: column; min-width: 0; }
.ta-txt b { font-size: 13.5px; }
.ta-txt small { color: var(--tinta-2); font-size: 11.5px; }
.ta-ctrl { display: flex; gap: 4px; align-items: center; }
.ta-num {
  width: 50px; font: 700 14px var(--fuente); text-align: center; color: var(--tinta);
  padding: 5px 2px; border: 1px solid var(--borde-2); border-radius: 8px; background: #fff;
  -moz-appearance: textfield; appearance: textfield;
}
.ta-num::-webkit-outer-spin-button, .ta-num::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.ta-foco { grid-column: 2 / -1; display: flex; gap: 8px; align-items: center; font-size: 12px; color: var(--tinta-2); }
select, input[type=number] {
  font: 13px var(--fuente); color: var(--tinta);
  padding: 6px 8px; border: 1px solid var(--borde-2); border-radius: 8px; background: #fff; min-width: 0;
}
.sel-foco { flex: 1; }
.check { display: flex; gap: 8px; align-items: flex-start; font-size: 12.5px; cursor: pointer; }
.check input { margin-top: 2px; }
.botonera { display: flex; flex-wrap: wrap; gap: 6px; }
.botonera.fin { justify-content: flex-end; margin-top: 14px; }

/* construir */
.paleta-edif { display: grid; grid-template-columns: 1fr; gap: 6px; }
.carta-edif, .carta-anillo {
  display: flex; gap: 10px; align-items: flex-start; text-align: left;
  border: 1.5px solid var(--borde); border-radius: 10px; padding: 8px 10px; background: #fff;
  font: 13px var(--fuente); color: var(--tinta); cursor: pointer; width: 100%;
}
.carta-anillo { cursor: default; margin-top: 6px; }
.carta-edif:hover { border-color: var(--acento); background: #fffaf2; }
.carta-edif.activa, .carta-anillo.activa { border-color: var(--acento); background: var(--acento-suave); box-shadow: 0 0 0 2px var(--acento) inset; }
.carta-edif.bloqueada { opacity: .55; }
.carta-edif.cara .ce-coste { opacity: .85; }
.ce-txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.ce-txt b { font-size: 13.5px; }
.ce-desc { color: var(--tinta-2); font-size: 11.5px; }
.ce-coste { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; font-size: 12px; }
.ce-coste.ok { color: var(--ok); font-weight: 700; }
.coste { background: var(--tarjeta-2); border: 1px solid var(--borde); border-radius: 6px; padding: 0 5px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.coste.falta { background: var(--error-f); border-color: #f0b5b0; color: var(--error); font-weight: 700; }
.coste.trab { background: #eef3fa; border-color: #c8d6ea; }
.coste.gratis { color: var(--tinta-3); }
.ce-n { font-style: normal; color: var(--tinta-3); margin-left: auto; }
.ce-bloq { font-size: 12px; color: var(--tinta-3); }
.segmentado { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.segmentado.dos { grid-template-columns: 1fr 1fr; }
.seg {
  font: 700 12px var(--fuente); padding: 7px 8px; border-radius: 8px; cursor: pointer;
  border: 1.5px solid var(--borde-2); background: #fff; color: var(--tinta-2);
}
.seg:hover { border-color: var(--tinta-2); }
.seg.activo { background: var(--acento-suave); border-color: var(--acento); color: var(--acento-2); }
.cola-obras { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.cola-obras li { display: grid; grid-template-columns: minmax(0, 1fr) 90px auto; gap: 8px; align-items: center; font-size: 12.5px; }
.aviso-err { color: var(--error); font-weight: 600; font-size: 12.5px; margin: 4px 0; }
.aviso-med { color: var(--medio); font-weight: 600; font-size: 12.5px; margin: 4px 0; }

/* progreso */
.fase-actual {
  display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border-radius: 10px; color: #fff;
  background: linear-gradient(135deg, #6d5a47, #2b2118);
}
.fase-actual.f1 { background: linear-gradient(135deg, #6b7d3a, #3b4a1c); }
.fase-actual.f2 { background: linear-gradient(135deg, #8a6a2c, #4d3a14); }
.fase-actual.f3 { background: linear-gradient(135deg, #9a5b25, #56300f); }
.fase-actual.f4 { background: linear-gradient(135deg, #a3462a, #5a2211); }
.fase-actual.f5 { background: linear-gradient(135deg, #b8651c, #6b3508); }
.fase-actual small { text-transform: uppercase; letter-spacing: .6px; font-size: 11px; opacity: .85; }
.fase-actual b { font-size: 19px; }
.fase-actual span { font-size: 12.5px; opacity: .9; }
.fase-actual .btn-link { color: #ffe7c2; align-self: flex-start; font-size: 12px; }
.escalera { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.escalera li { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--tinta-3); }
.escalera li span { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 11.5px; background: var(--tarjeta-2); border: 1px solid var(--borde-2); flex: 0 0 22px; }
.escalera li em { font-style: normal; flex: 1; }
.escalera li.hecha { color: var(--tinta); }
.escalera li.hecha span { background: var(--ok); border-color: var(--ok); color: #fff; }
.escalera li.actual { color: var(--acento-2); font-weight: 700; }
.escalera li.actual span { background: var(--acento); border-color: var(--acento); color: #fff; }
.checklist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 3px; }
.checklist li { display: flex; justify-content: space-between; gap: 8px; font-size: 12.5px; }
.checklist li span::before { content: '○ '; color: var(--tinta-3); }
.checklist li.ok span::before { content: '✔ '; color: var(--ok); }
.checklist li.ok { color: var(--tinta-2); }
.checklist li small { color: var(--tinta-3); font-variant-numeric: tabular-nums; }
.carta-desc { display: flex; gap: 10px; border: 1px solid var(--borde); border-radius: 10px; padding: 8px 10px; background: #fff; }
.carta-desc.hecho { background: var(--ok-f); border-color: #b9dcbb; }
.carta-desc.disp { border-color: var(--acento); box-shadow: 0 0 0 1px var(--acento) inset; background: #fffaf2; }
.carta-desc.bloq { background: var(--tarjeta-2); }
.cd-ico { font-size: 24px; line-height: 1.2; }
.cd-txt { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 0; }
.cd-txt b { font-size: 13.5px; }
.cd-txt > small { color: var(--tinta-2); font-size: 12px; }
.cd-estado.ok { color: var(--ok); font-weight: 700; font-size: 12px; }
.cd-comprar { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.cd-req > small { color: var(--tinta-3); font-size: 11.5px; }

/* ---------------- modal, toast ---------------- */
.modal { position: fixed; inset: 0; z-index: 80; background: rgba(30, 20, 12, .55); display: grid; place-items: center; padding: 16px; }
.modal-caja {
  position: relative; width: min(860px, 100%); max-height: 90vh; overflow: hidden;
  background: var(--tarjeta); border-radius: 14px; box-shadow: 0 20px 60px rgba(0, 0, 0, .35); display: flex;
}
.modal-caja.m-ficha, .modal-caja.m-evento, .modal-caja.m-fundar { width: min(620px, 100%); }
.modal-cuerpo { overflow-y: auto; padding: 26px 30px; width: 100%; }
.modal-cerrar {
  position: absolute; top: 10px; right: 12px; z-index: 2;
  width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--borde-2); background: #fff;
  font-size: 22px; line-height: 1; cursor: pointer; color: var(--tinta-2);
}
.modal-cerrar:hover { background: var(--error-f); color: var(--error); }
.tit-modal { font-size: 22px; margin-bottom: 10px; color: var(--acento-2); padding-right: 30px; }
.toast {
  position: fixed; left: 50%; bottom: 22px; transform: translate(-50%, 20px); z-index: 90;
  background: #2b2118; color: #fff; font-weight: 600; font-size: 13.5px;
  padding: 10px 16px; border-radius: 10px; box-shadow: 0 8px 26px rgba(0, 0, 0, .3);
  opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; max-width: min(560px, 92vw); text-align: center;
}
.toast.visible { opacity: 1; transform: translate(-50%, 0); }
.toast.ok { background: var(--ok); }
.toast.error { background: var(--error); }

/* fichas */
.ficha-cab-g { display: flex; gap: 14px; align-items: center; margin-bottom: 12px; padding-right: 30px; }
.ficha-cab-g h2 { font-size: 22px; color: var(--acento-2); }
.ficha-tipo { text-transform: uppercase; letter-spacing: .6px; font-size: 11px; font-weight: 700; color: var(--tinta-3); }
.ficha-emoji { width: 64px; height: 64px; flex: 0 0 64px; display: grid; place-items: center; font-size: 36px; background: var(--tarjeta-2); border: 1px solid var(--borde-2); border-radius: 12px; }
.ficha-emoji.fase { color: #fff; font-weight: 800; font-size: 30px; }
.ficha-emoji.fase.f1 { background: #6b7d3a; } .ficha-emoji.fase.f2 { background: #8a6a2c; } .ficha-emoji.fase.f3 { background: #9a5b25; }
.ficha-emoji.fase.f4 { background: #a3462a; } .ficha-emoji.fase.f5 { background: #b8651c; }
.efecto-juego { background: #eef3fa; border-radius: 8px; padding: 8px 12px; font-size: 13px; margin: 0 0 12px; }
.ficha-seccion { border-left: 4px solid; padding: 4px 0 4px 14px; margin: 12px 0; }
.ficha-seccion h3 { font-size: 15px; margin-bottom: 4px; }
.ficha-seccion p { margin: 0; font-size: 14.5px; line-height: 1.6; }
.ficha-seccion.que { border-color: var(--acento); }
.ficha-seccion.como { border-color: #35598f; }
.ficha-seccion.como h3 { color: #35598f; }
.fichas-grupo { font-size: 14px; margin: 16px 0 8px; color: var(--tinta-2); text-transform: uppercase; letter-spacing: .5px; }
.rejilla-fichas { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; }
.carta-ficha {
  display: flex; gap: 8px; align-items: center; text-align: left; font: 13px var(--fuente); color: var(--tinta);
  border: 1px solid var(--borde); border-radius: 10px; padding: 9px 10px; background: #fff; cursor: pointer;
}
.carta-ficha:hover { border-color: var(--acento); background: #fffaf2; }
.carta-ficha.cerrada { background: var(--tarjeta-2); color: var(--tinta-2); }

/* eventos */
.ev-cab { display: flex; gap: 14px; align-items: center; margin-bottom: 10px; }
.ev-ico { font-size: 40px; line-height: 1; }
.ev-cab small { color: var(--tinta-3); text-transform: uppercase; letter-spacing: .5px; font-size: 11.5px; font-weight: 700; }
.ev-cab h2 { font-size: 22px; color: var(--acento-2); }
.ev-txt { font-size: 15px; line-height: 1.55; }
.ev-ops { display: flex; flex-direction: column; gap: 8px; margin: 14px 0; }
.ev-op { white-space: normal; text-align: left; padding: 11px 14px; font-size: 14px; display: flex; flex-direction: column; gap: 2px; }
.ev-op small { font-weight: 500; color: var(--error); font-size: 12px; }
.ev-arq { background: #f3efe6; border-radius: 10px; padding: 10px 14px; font-size: 13px; color: var(--tinta-2); }
.ev-arq p { margin: 4px 0 0; }

/* fundación */
.pros-contras { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 10px 0; }
.pros-contras > div { border-radius: 10px; padding: 10px 12px; }
.pros-contras h3 { font-size: 13px; text-transform: uppercase; letter-spacing: .5px; margin-bottom: 4px; }
.pros-contras ul { margin: 0; padding-left: 18px; font-size: 13px; }
.pros { background: var(--ok-f); } .pros h3 { color: var(--ok); }
.contras { background: var(--error-f); } .contras h3 { color: var(--error); }

/* final */
.final-cab { display: flex; gap: 16px; align-items: center; border-radius: 12px; padding: 16px 18px; margin-bottom: 14px; padding-right: 40px; }
.final-cab.victoria { background: linear-gradient(135deg, #fff4d6, #f4e6d4); }
.final-cab.colapso { background: linear-gradient(135deg, #f3ece2, #e9e1d4); }
.final-cab h2 { font-size: 26px; color: var(--acento-2); }
.final-cab p { margin: 4px 0 0; }
.final-ico { font-size: 48px; }
.marcador { display: grid; grid-template-columns: repeat(auto-fit, minmax(92px, 1fr)); gap: 6px; }
.marc-item { text-align: center; border: 1px solid var(--borde); border-radius: 10px; padding: 8px 4px; background: #fff; display: flex; flex-direction: column; }
.marc-item.total { background: #2b2118; color: #fff; border-color: #2b2118; }
.marc-n { font-size: 22px; font-weight: 800; line-height: 1.1; }
.marc-item small { font-size: 11px; color: var(--tinta-2); }
.marc-item.total small { color: #d8c8b2; }
.fin-sub { font-size: 15px; margin: 18px 0 6px; }
.clave { background: #fff4d6; border-left: 4px solid var(--medio); padding: 10px 14px; border-radius: 8px; margin: 14px 0; }
.clave p { margin: 4px 0 0; }

/* nueva partida */
.form-nuevo h2 { font-size: 22px; margin-bottom: 4px; }
.tarjetas-dif { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 16px 0; }
.tarj-dif {
  text-align: left; font: 13px var(--fuente); color: var(--tinta-2);
  border: 2px solid var(--borde); border-radius: 12px; padding: 12px; background: #fff; cursor: pointer;
  display: flex; flex-direction: column; gap: 4px; border-top-width: 5px;
}
.tarj-dif strong { font-size: 15px; color: var(--tinta); }
.tarj-dif.dif-facil { border-top-color: var(--ok); }
.tarj-dif.dif-normal { border-top-color: var(--medio); }
.tarj-dif.dif-dificil { border-top-color: var(--error); }
.tarj-dif.activa { border-color: var(--acento); background: var(--acento-suave); box-shadow: 0 0 0 2px var(--acento) inset; }
.fila-semilla { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 8px; }
.fila-semilla label { font-weight: 600; }
.inp-semilla { width: 130px; }

/* ---------------- teoría ---------------- */
.teoria { max-width: 780px; margin: 0 auto; font-size: 14.5px; line-height: 1.6; }
.teoria h2 { font-size: 26px; margin-bottom: 10px; color: var(--acento-2); padding-right: 30px; }
.teoria h3 { font-size: 17px; margin: 26px 0 8px; padding-bottom: 4px; border-bottom: 2px solid var(--acento-suave); }
.teoria p { margin: 8px 0; }
.tabla-teoria { width: 100%; border-collapse: collapse; margin: 10px 0; font-size: 13.5px; }
.tabla-teoria th { background: var(--tarjeta-2); text-align: left; padding: 7px 10px; border-bottom: 2px solid var(--borde-2); }
.tabla-teoria td { padding: 7px 10px; border-bottom: 1px solid var(--borde); vertical-align: top; }
.leyes li { margin: 8px 0; }
.glosario { display: grid; grid-template-columns: max-content 1fr; gap: 4px 14px; }
.glosario dt { font-weight: 700; }
.glosario dd { margin: 0; color: var(--tinta-2); }
.ejemplo-svg { width: 100%; height: auto; border: 1px solid var(--borde); border-radius: 10px; margin: 8px 0; display: block; }
.ej-tit { font: 700 13px var(--fuente); fill: var(--tinta-2); }
.ej-nota { font: 12px var(--fuente); fill: #3d2f22; }
.pasos { display: flex; flex-direction: column; gap: 10px; margin: 14px 0; }
.paso { display: flex; gap: 12px; align-items: flex-start; background: var(--tarjeta-2); border-radius: 10px; padding: 12px; }
.paso > span { flex: 0 0 30px; height: 30px; border-radius: 50%; background: var(--acento); color: #fff; font-weight: 800; display: grid; place-items: center; }

/* ---------------- adaptable ---------------- */
@media (max-width: 1180px) {
  .app { grid-template-columns: minmax(0, 1fr); }
  .col-izq { display: contents; }
  .col-izq > .tarjeta:first-child { order: 1; }
  .col-der { position: static; max-height: none; order: 2; }
  .col-izq > .inferior { order: 3; }
  .panel { max-height: none; }
  .mapa-caja { max-height: 64vh; }
}
@media (max-width: 640px) {
  body { padding-bottom: 64px; }
  .app { padding: 10px; gap: 10px; }
  .barra { padding: 10px 12px; gap: 8px 10px; }
  .marca h1 { font-size: 16px; }
  .info-partida { order: 3; flex-basis: 100%; font-size: 12px; }
  .acciones { gap: 6px; }
  .barra .btn { padding: 6px 9px; font-size: 12px; }
  .chip-rec { font-size: 12px; padding: 2px 7px 2px 6px; }
  .mapa-caja { max-height: 58vh; }
  .pie-turno {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 70; border-radius: 0;
    box-shadow: 0 -4px 16px rgba(40, 25, 10, .15); padding: 8px 10px;
  }
  .modal { padding: 8px; }
  .modal-cuerpo { padding: 20px 16px; }
  .tarjetas-dif, .pros-contras { grid-template-columns: 1fr; }
  .indicadores { grid-template-columns: 1fr 1fr 1fr; gap: 5px; }
  .cronica li { grid-template-columns: 1fr; gap: 0; }
  .tarea { grid-template-columns: 26px 1fr; }
  .ta-ctrl { grid-column: 1 / -1; justify-content: flex-end; }
  .toast { bottom: 76px; }
}