/* Sala J2 · estilo de la Memoria Anual Integrada 2025 de BVN: base clara, tarjetas blancas, verde solo como acento.
   Glober es comercial: Montserrat (OFL), servida desde aquí para no depender de internet. */
@font-face { font-family: "Montserrat"; font-weight: 400; src: url("/static/vendor/Montserrat-Regular.ttf"); }
@font-face { font-family: "Montserrat"; font-weight: 600; src: url("/static/vendor/Montserrat-SemiBold.ttf"); }
@font-face { font-family: "Montserrat"; font-weight: 700; src: url("/static/vendor/Montserrat-Bold.ttf"); }
@font-face { font-family: "Montserrat"; font-weight: 800; src: url("/static/vendor/Montserrat-ExtraBold.ttf"); }

:root {
  --fondo: #F2F2F2; --tarjeta: #FFFFFF; --texto: #3D3D3D; --suave: #6B6B6B; --borde: #DCDCDC;
  --verde: #17584B; --verde-medio: #2B8275; --verde-suave: #E4EFEC; --ambar: #F7B500; --ambar-suave: #FDF0CC;
  --naranja: #ED7D24; --naranja-texto: #B8560F; --rojo: #C0392B;
  --radio: 16px; --sombra: 0 1px 3px rgba(0, 0, 0, .06), 0 6px 18px rgba(0, 0, 0, .05);
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--fondo); color: var(--texto); font-family: "Montserrat", system-ui, sans-serif; }
button { font: inherit; cursor: pointer; }
button:focus-visible, input:focus-visible { outline: 3px solid var(--ambar); outline-offset: 2px; }
.antetitulo { margin: 0; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--naranja-texto); }
.oculto { display: none !important; }

/* ── Cabecera de las pantallas ─────────────────────────────────────────── */
.cabecera { display: flex; align-items: center; gap: 18px; padding: 16px 28px; background: var(--tarjeta); border-bottom: 1px solid var(--borde); }
.cabecera img { height: 42px; }
.cabecera h1 { margin: 2px 0 0; font-size: 26px; font-weight: 700; }
.cabecera .derecha { margin-left: auto; text-align: right; font-size: 13px; color: var(--suave); }

/* ── Móvil ─────────────────────────────────────────────────────────────── */
.movil { max-width: 520px; margin: 0 auto; padding: 18px 16px 40px; }
.movil header { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.movil header img { height: 34px; }
.movil h1 { margin: 2px 0 0; font-size: 20px; }
.caja { background: var(--tarjeta); border-radius: var(--radio); box-shadow: var(--sombra); padding: 18px; margin-bottom: 14px; }
.caja h2 { margin: 0 0 4px; font-size: 18px; }
.caja .duenio { margin: 0 0 12px; font-size: 13px; color: var(--suave); }
.escala { margin: 10px 0 4px; font-size: 13px; font-weight: 700; color: var(--verde); text-transform: uppercase; letter-spacing: .08em; }
.escala small { font-weight: 400; color: var(--suave); text-transform: none; letter-spacing: 0; }
.botones { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.botones button { height: 52px; border-radius: 12px; border: 1.5px solid var(--borde); background: var(--tarjeta); font-size: 20px; font-weight: 700; color: var(--texto); }
.botones button[aria-pressed="true"] { background: var(--verde); border-color: var(--verde); color: #fff; }
.extremos { display: flex; justify-content: space-between; font-size: 11px; color: var(--suave); margin-top: 3px; }
.enviar { width: 100%; margin-top: 16px; height: 50px; border: 0; border-radius: 12px; background: var(--verde); color: #fff; font-size: 17px; font-weight: 700; }
.enviar:disabled { opacity: .45; cursor: default; }
.hecho { margin: 10px 0 0; font-size: 14px; color: var(--verde-medio); font-weight: 600; }
.error { margin: 10px 0 0; font-size: 14px; color: var(--rojo); font-weight: 600; }
.espera { text-align: center; color: var(--suave); padding: 40px 10px; }
.codigo-entrada input { width: 100%; height: 56px; font: inherit; font-size: 28px; letter-spacing: .4em; text-align: center; border-radius: 12px; border: 1.5px solid var(--borde); }

/* ── Matriz ────────────────────────────────────────────────────────────── */
.escenario { display: grid; grid-template-columns: 1fr 340px; gap: 22px; padding: 22px 28px; height: calc(100vh - 80px); }
.lienzo { background: var(--tarjeta); border-radius: var(--radio); box-shadow: var(--sombra); padding: 14px; min-height: 0; }
.lienzo svg { width: 100%; height: 100%; display: block; }
.cuad { fill: var(--fondo); }
.cuad.facil { fill: var(--verde-suave); }
.cuad-nombre { font-size: 15px; font-weight: 700; fill: var(--suave); text-transform: uppercase; letter-spacing: .08em; }
.cuad-nombre.facil { fill: var(--verde); }
.eje { stroke: var(--borde); stroke-width: 2; }
.eje-medio { stroke: var(--naranja); stroke-width: 2; stroke-dasharray: 6 6; }
.eje-texto { font-size: 14px; font-weight: 700; fill: var(--texto); }
.eje-num { font-size: 12px; fill: var(--suave); }
.burbuja { transition: transform .8s cubic-bezier(.2, .8, .2, 1); }
.burbuja circle { fill: var(--verde); stroke: #fff; stroke-width: 3; }
.burbuja.estrategica circle { fill: var(--verde-medio); }
.burbuja.mejora circle, .burbuja.aparcar circle { fill: #9A9A9A; }
.burbuja .letra { font-size: 22px; font-weight: 800; fill: #fff; text-anchor: middle; dominant-baseline: central; }
.burbuja .nombre { font-size: 15px; font-weight: 600; fill: var(--texto); dominant-baseline: central; }
.lado { display: flex; flex-direction: column; gap: 16px; min-height: 0; }
.lado .caja { margin: 0; }
.qr svg { width: 100%; height: auto; }
.url { font-size: 22px; font-weight: 700; text-align: center; margin: 6px 0 0; }
.codigo { font-size: 44px; font-weight: 800; letter-spacing: .25em; text-align: center; color: var(--verde); margin: 4px 0 0; }
.recuento { list-style: none; margin: 0; padding: 0; font-size: 15px; }
.recuento li { display: flex; justify-content: space-between; padding: 6px 0; border-bottom: 1px solid var(--borde); }
.recuento li.abierta { font-weight: 700; color: var(--verde); }
.vacia { color: var(--suave); font-size: 14px; }

/* ── Pathway ───────────────────────────────────────────────────────────── */
.camino { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; padding: 22px 28px 12px; }
.etapa { background: var(--tarjeta); border-radius: var(--radio); box-shadow: var(--sombra); padding: 14px; min-height: 52vh; transition: box-shadow .2s; }
.etapa.encima, .banco.encima { box-shadow: 0 0 0 3px var(--ambar), var(--sombra); }
.etapa h2 { margin: 0; font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--naranja-texto); }
.etapa h3 { margin: 2px 0 12px; font-size: 19px; font-weight: 700; }
.ficha { background: var(--fondo); border-radius: 12px; padding: 10px 12px; margin-bottom: 10px; font-size: 15px; font-weight: 600; cursor: grab; border-left: 0; transition: transform .2s; }
.ficha:active { cursor: grabbing; }
.ficha.voto { background: var(--verde-suave); }
.ficha.ganador { background: var(--ambar-suave); }
.ficha small { display: block; margin-top: 3px; font-size: 12px; font-weight: 400; color: var(--suave); }
.banco { margin: 0 28px 22px; background: var(--tarjeta); border-radius: var(--radio); box-shadow: var(--sombra); padding: 12px 14px; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; min-height: 64px; }
.banco h2 { margin: 0 8px 0 0; font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--suave); }
.banco .ficha { margin: 0; opacity: .75; }

/* ── Consola ───────────────────────────────────────────────────────────── */
.consola { max-width: 980px; margin: 0 auto; padding: 22px 28px 60px; }
.consola table { width: 100%; border-collapse: collapse; background: var(--tarjeta); border-radius: var(--radio); overflow: hidden; box-shadow: var(--sombra); }
.consola th, .consola td { padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--borde); font-size: 15px; }
.consola th { background: var(--fondo); color: var(--verde); font-size: 13px; text-transform: uppercase; letter-spacing: .06em; }
.consola button { border: 1.5px solid var(--borde); background: var(--tarjeta); border-radius: 10px; padding: 7px 12px; font-weight: 600; }
.consola button.primario { background: var(--verde); border-color: var(--verde); color: #fff; }
.consola button.peligro { color: var(--rojo); }
.consola .fila { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: 16px 0; }
.consola input[type=text] { flex: 1; min-width: 260px; height: 40px; font: inherit; padding: 0 12px; border-radius: 10px; border: 1.5px solid var(--borde); }
.consola .enlaces a { color: var(--verde); font-weight: 700; margin-right: 18px; }
.aviso { font-size: 14px; color: var(--suave); }
.consola td:last-child { white-space: nowrap; }