/* Maquetas · estilos comunes a todas las pantallas.
   Concepto: niebla de madrugada. Fondo gris azulado y tinta pizarra; el ámbar
   de las coronas es el único color cálido, como un farol en la niebla.
   Las maquetas se ven dentro de un marco de teléfono en el ordenador
   y a pantalla completa en el móvil. */

:root {
  --fondo: #E6ECEF;          /* niebla clara: fondo de la escena */
  --superficie: #F6F8F9;     /* pantalla del teléfono */
  --tarjeta: #FFFFFF;
  --tinta: #17212B;          /* texto principal */
  --tinta-suave: #556371;    /* texto secundario */
  --linea: #CBD4DA;
  --ambar: #B87A12;          /* coronas y acento */
  --ambar-suave: #F6E7C8;
  --sobre-ambar: #FFFFFF;
  --malo: #B3413A;
  --malo-suave: #F6DCD9;
  --bueno: #2E7A4A;
  --bueno-suave: #D9EEE0;
  --muro: #17212B;           /* bordes gruesos entre regiones */
  --niebla-1: #B7C1C7;
  --niebla-2: #AAB4BA;
  --marco: #10171E;          /* marco del teléfono */
  --trama: rgba(23, 33, 43, .22);

  /* 10 colores de región: distintos en tono y en luminosidad */
  --r0: #F2B27E; --r1: #93BFE8; --r2: #A8D38A; --r3: #C9A3E3; --r4: #FFE07A;
  --r5: #7FD0C2; --r6: #EF8E8E; --r7: #B5B9F0; --r8: #D9C29F; --r9: #F3A9CF;

  --display: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
  --texto: "IBM Plex Sans", "Segoe UI", system-ui, sans-serif;
  --datos: "IBM Plex Mono", ui-monospace, Consolas, monospace;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --fondo: #0B1117; --superficie: #121A22; --tarjeta: #19232D;
    --tinta: #E5EBEF; --tinta-suave: #98A6B2; --linea: #2B3844;
    --ambar: #E7AE45; --ambar-suave: #3A2E16; --sobre-ambar: #17120A;
    --malo: #E57B72; --malo-suave: #3E201E; --bueno: #6CC48A; --bueno-suave: #19331F;
    --muro: #05090C; --niebla-1: #2A3540; --niebla-2: #232D37; --marco: #000000;
    --trama: rgba(0, 0, 0, .28);
    --r0: #C98450; --r1: #5F8FC0; --r2: #78A65C; --r3: #9C76B8; --r4: #C9AE48;
    --r5: #4FA393; --r6: #C25E5E; --r7: #7F84C6; --r8: #A88F6C; --r9: #C1779D;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --fondo: #0B1117; --superficie: #121A22; --tarjeta: #19232D;
  --tinta: #E5EBEF; --tinta-suave: #98A6B2; --linea: #2B3844;
  --ambar: #E7AE45; --ambar-suave: #3A2E16; --sobre-ambar: #17120A;
  --malo: #E57B72; --malo-suave: #3E201E; --bueno: #6CC48A; --bueno-suave: #19331F;
  --muro: #05090C; --niebla-1: #2A3540; --niebla-2: #232D37; --marco: #000000;
  --trama: rgba(0, 0, 0, .28);
  --r0: #C98450; --r1: #5F8FC0; --r2: #78A65C; --r3: #9C76B8; --r4: #C9AE48;
  --r5: #4FA393; --r6: #C25E5E; --r7: #7F84C6; --r8: #A88F6C; --r9: #C1779D;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; }
body {
  background: var(--fondo);
  color: var(--tinta);
  font-family: var(--texto);
  font-size: 16px;
  line-height: 1.5;
  -webkit-tap-highlight-color: transparent;
}
a { color: inherit; }
h1, h2, h3 { font-family: var(--display); margin: 0; text-wrap: balance; letter-spacing: -.015em; }
p { margin: 0; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--ambar); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

/* ---------- escena: marco de teléfono en el ordenador ---------- */
.escena {
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(0, 300px) auto;
  justify-content: center;
  align-items: start;
  gap: 40px;
  padding-inline: 24px;
  padding-block: 32px;
}
.telefono {
  width: 390px;
  min-height: 800px;
  background: var(--superficie);
  border: 12px solid var(--marco);
  border-radius: 46px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 30px 60px -30px rgba(10, 20, 30, .45);
}
@media (max-width: 760px) {
  .escena { display: block; padding: 0; }
  .telefono { width: 100%; min-height: 100vh; border: 0; border-radius: 0; box-shadow: none; }
}

/* ---------- controles de la maqueta (no son parte de la app) ---------- */
.controles {
  background: var(--tarjeta);
  border: 1px dashed var(--linea);
  border-radius: 14px;
  padding: 16px;
  display: grid;
  gap: 14px;
  font-size: 14px;
  position: sticky;
  top: 32px;
}
.controles > summary { font-weight: 600; cursor: pointer; list-style: none; }
.controles > summary::-webkit-details-marker { display: none; }
.controles .nota { color: var(--tinta-suave); font-size: 13px; }
.controles .grupo { display: grid; gap: 6px; }
.controles .etiqueta { font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--tinta-suave); }
.selector { display: flex; flex-wrap: wrap; gap: 6px; }
.selector button, .selector a {
  border: 1px solid var(--linea); background: var(--superficie); border-radius: 999px;
  padding: 5px 11px; font-size: 13px; cursor: pointer; text-decoration: none;
}
.selector [aria-pressed="true"] { background: var(--tinta); color: var(--superficie); border-color: var(--tinta); }
@media (max-width: 760px) {
  .controles {
    position: fixed; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    top: auto; z-index: 50; max-width: calc(100vw - 24px); box-shadow: 0 10px 30px rgba(0,0,0,.25);
    padding: 10px 14px;
  }
  .controles:not([open]) { border-style: solid; }
}

/* ---------- piezas de la app ---------- */
.barra {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 18px 20px 10px;
}
.marca { display: flex; align-items: baseline; gap: 8px; }
.marca strong { font-family: var(--display); font-size: 26px; font-weight: 800; letter-spacing: -.03em; }
.provisional { font-size: 11px; color: var(--tinta-suave); border: 1px dashed var(--linea); border-radius: 999px; padding: 1px 8px; }
.icono {
  width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--linea); background: var(--tarjeta);
  display: grid; place-items: center; cursor: pointer; text-decoration: none; font-weight: 600; flex: none;
}
.contenido { flex: 1; display: flex; flex-direction: column; gap: 20px; padding: 6px 20px 28px; }
.antetitulo { font-size: 12px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--tinta-suave); }
.titular { font-size: 34px; line-height: 1.05; font-weight: 800; }
.chip {
  display: inline-flex; align-items: center; gap: 6px; align-self: flex-start;
  font-size: 13px; font-weight: 600; border-radius: 999px; padding: 4px 11px;
  background: var(--ambar-suave); color: var(--tinta);
}
.boton {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 54px; padding: 0 20px; border-radius: 16px; border: 0;
  font-weight: 600; font-size: 17px; cursor: pointer; text-decoration: none; text-align: center;
}
.boton.principal { background: var(--ambar); color: var(--sobre-ambar); }
.boton.secundario { background: transparent; color: var(--tinta); border: 1.5px solid var(--tinta); }
.boton.discreto { background: var(--tarjeta); border: 1px solid var(--linea); min-height: 46px; font-size: 15px; }
.tarjeta { background: var(--tarjeta); border: 1px solid var(--linea); border-radius: 20px; padding: 18px; display: grid; gap: 12px; }
.tenue { color: var(--tinta-suave); }
.pequeno { font-size: 14px; }
.datos { font-family: var(--datos); font-variant-numeric: tabular-nums; }
.enlaces { display: flex; flex-wrap: wrap; gap: 8px 18px; justify-content: center; font-size: 14px; }
.enlaces button { background: none; border: 0; padding: 4px 0; text-decoration: underline; text-underline-offset: 3px; color: var(--tinta-suave); cursor: pointer; }

/* ---------- tablero ---------- */
.tablero {
  --n: 9;
  --lado: min(358px, calc(100vw - 32px));
  width: var(--lado); align-self: center;
  display: grid; grid-template-columns: repeat(var(--n), 1fr);
  border: 3px solid var(--muro); border-radius: 8px; overflow: hidden;
  touch-action: manipulation; user-select: none; -webkit-user-select: none;
}
.casilla {
  aspect-ratio: 1; border: 0; padding: 0; position: relative;
  border-right: 1px solid rgba(0,0,0,.14); border-bottom: 1px solid rgba(0,0,0,.14);
  display: grid; place-items: center; cursor: pointer; color: var(--tinta);
  background: var(--niebla-1);
}
.casilla.niebla { background: repeating-linear-gradient(135deg, var(--niebla-1) 0 6px, var(--niebla-2) 6px 12px); }
.casilla.mt { border-top: 3px solid var(--muro); } .casilla.mb { border-bottom: 3px solid var(--muro); }
.casilla.mi { border-left: 3px solid var(--muro); } .casilla.md { border-right: 3px solid var(--muro); }
.casilla svg { width: 62%; height: 62%; }
.casilla.cruz svg { width: 34%; height: 34%; opacity: .7; }
.casilla.auto svg { opacity: .3; }
.casilla.corona svg { color: var(--tinta); filter: drop-shadow(0 1px 0 rgba(255,255,255,.35)); }
.casilla.choca::after { content: ""; position: absolute; inset: 0; background: var(--malo); opacity: .3; }
.casilla.pista { box-shadow: inset 0 0 0 3px var(--ambar); }
.casilla.nueva { animation: aclara .5s ease-out; }
.casilla.error { animation: sacude .35s; }
@keyframes aclara { from { filter: brightness(1.35) saturate(.6); } to { filter: none; } }
@keyframes sacude { 25% { transform: translateX(-3px); } 75% { transform: translateX(3px); } }

/* tramas opcionales para distinguir regiones sin depender del color */
.con-tramas .casilla.t0 { background-image: repeating-linear-gradient(45deg, var(--trama) 0 2px, transparent 2px 9px); }
.con-tramas .casilla.t1 { background-image: repeating-linear-gradient(0deg, var(--trama) 0 2px, transparent 2px 8px); }
.con-tramas .casilla.t2 { background-image: repeating-linear-gradient(90deg, var(--trama) 0 2px, transparent 2px 8px); }
.con-tramas .casilla.t3 { background-image: radial-gradient(var(--trama) 22%, transparent 24%); background-size: 9px 9px; }
.con-tramas .casilla.t4 { background-image: repeating-linear-gradient(45deg, var(--trama) 0 1.5px, transparent 1.5px 8px), repeating-linear-gradient(-45deg, var(--trama) 0 1.5px, transparent 1.5px 8px); }
.con-tramas .casilla.t5 { background-image: repeating-linear-gradient(-45deg, var(--trama) 0 2px, transparent 2px 9px); }
.con-tramas .casilla.t6 { background-image: radial-gradient(var(--trama) 30%, transparent 32%); background-size: 14px 14px; }
.con-tramas .casilla.t7 { background-image: linear-gradient(var(--trama) 1.5px, transparent 1.5px), linear-gradient(90deg, var(--trama) 1.5px, transparent 1.5px); background-size: 8px 8px; }
.con-tramas .casilla.t8 { background-image: conic-gradient(var(--trama) 25%, transparent 0 50%, var(--trama) 0 75%, transparent 0); background-size: 10px 10px; }
/* t9 queda liso */

.marcador { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 0 20px; }
.marcador .cifra { display: grid; gap: 0; }
.marcador .cifra b { font-family: var(--datos); font-size: 22px; font-variant-numeric: tabular-nums; }
.marcador .cifra span { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--tinta-suave); }
.estado { min-height: 1.5em; text-align: center; font-size: 14px; color: var(--tinta-suave); padding: 0 20px; }
.estado.malo { color: var(--malo); }

/* ---------- hoja inferior (explicaciones, formularios) ---------- */
.hoja-fondo { position: fixed; inset: 0; background: rgba(5, 10, 15, .45); z-index: 60; display: grid; align-items: end; justify-items: center; }
.hoja {
  background: var(--superficie); width: min(420px, 100vw); border-radius: 22px 22px 0 0;
  padding: 22px 20px calc(24px + env(safe-area-inset-bottom, 0px)); display: grid; gap: 14px;
  max-height: 85vh; overflow-y: auto;
}
.hoja h2 { font-size: 22px; }
.hoja ol, .hoja ul { margin: 0; padding-left: 20px; display: grid; gap: 6px; }

/* ---------- formularios ---------- */
.campo { display: grid; gap: 6px; font-size: 14px; font-weight: 600; }
.campo input[type="email"] {
  font: inherit; font-weight: 400; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--linea);
  background: var(--superficie); color: var(--tinta); width: 100%;
}
.casilla-check { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; }
.casilla-check input { width: 20px; height: 20px; accent-color: var(--ambar); margin: 2px 0 0; }