/* Imprenta: tokens y piezas básicas. Mismo idioma que la landing (martincingolani.com): onyx con grano, superficies
   verde muy oscuro con líneas finas, amarillo para lo que se aprieta, Inter Tight, Fraunces itálica de acento y
   Space Mono para números y fechas. Oscuro por defecto (data-tema="oscuro"); claro si «imprenta-tema» dice claro.
   Las variables de :root son el tema claro (también lo usan privacidad y borrar-datos, que no llevan tema). */
:root {
  --onyx: #011409; --amarillo: #FFC20A; --blanco: #FCFCFC; --pizarra: #545F66; --fucsia: #FF495C; --bosque: #0d2a1b;
  --display: "Inter Tight", system-ui, sans-serif;
  --fraunces: "Fraunces", Georgia, "Times New Roman", serif;
  --mono: "Space Mono", ui-monospace, "Courier New", monospace;
  --suelta: cubic-bezier(.22, 1, .36, 1); --resorte: cubic-bezier(.2, .9, .25, 1.12);
  --radio: 14px; --radio-g: 20px;

  /* Claro: papel apenas cálido, tarjetas blancas. Nunca amarillo como color de texto. */
  --verde: #177A42;
  --fondo: #F6F7F3; --tinta: var(--onyx); --suave: var(--pizarra); --tenue: #5D686E;
  --linea: rgba(1, 20, 9, .10); --linea-fuerte: rgba(1, 20, 9, .22); --superficie: #fff; --superficie-alta: #fff;
  --campo: #fff; --elegido: rgba(1, 20, 9, .055);
  --borde-campo: rgba(1, 20, 9, .48); /* el borde de un campo: 3:1 contra el papel y el blanco */
  --anillo: var(--onyx); --halo: rgba(255, 194, 10, .55); --borde-vivo: var(--onyx); --pestana: var(--onyx);
  --sombra: 0 1px 2px rgba(1, 20, 9, .06); --sombra-alta: 0 14px 28px -16px rgba(1, 20, 9, .28);
  --aviso-fondo: var(--onyx); --aviso-tinta: var(--blanco);
}
:root[data-tema="oscuro"] {
  --verde: #4ADE80;
  --fondo: var(--onyx); --tinta: var(--blanco); --suave: rgba(252, 252, 252, .74); --tenue: rgba(252, 252, 252, .56);
  --linea: rgba(252, 252, 252, .10); --linea-fuerte: rgba(252, 252, 252, .22);
  --superficie: #072014; --superficie-alta: #0b281a; --campo: #061c11; --elegido: rgba(252, 252, 252, .07);
  --borde-campo: rgba(252, 252, 252, .36);
  --anillo: var(--amarillo); --halo: rgba(255, 194, 10, .18); --borde-vivo: var(--amarillo); --pestana: var(--amarillo);
  --sombra: none; --sombra-alta: 0 18px 34px -18px rgba(0, 0, 0, .85);
  --aviso-fondo: #0f2d1e; --aviso-tinta: var(--blanco);
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--fondo); color: var(--tinta);
  font: 500 15px/1.45 var(--display); letter-spacing: 0;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
::selection { background: var(--amarillo); color: var(--onyx); }

/* Grano de riso, como la landing pero quieto: un mosaico de ruido de 180px fijo DETRÁS del contenido (z-index -1),
   así nunca pasa por encima de un texto ni de un campo. Sin animación: el compositor lo pinta una vez. */
:root[data-tema="oscuro"] body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .09;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='a' x='0' y='0'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='2' seed='4' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 .97 0 0 0 0 .9 0 0 0 7 -4.1'/%3E%3C/filter%3E%3Cfilter id='b' x='0' y='0'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' seed='19' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 .03 0 0 0 0 .02 0 0 0 7 -4.1'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23a)'/%3E%3Crect width='180' height='180' filter='url(%23b)'/%3E%3C/svg%3E") 0 0 / 180px 180px;
}

/* Foco visible en todo lo que se aprieta con teclado */
:focus-visible { outline: 2px solid var(--anillo); outline-offset: 2px; border-radius: 6px; }

/* Títulos: Inter Tight pesada y apretada; la palabra de acento, en Fraunces itálica */
h1, h2, h3 { letter-spacing: -.022em; word-spacing: .06em; }
.acento, h1 em, h2 em { font-family: var(--fraunces); font-style: italic; font-weight: 700; letter-spacing: -.02em; font-variation-settings: "opsz" 144; }
:root[data-tema="oscuro"] .acento, :root[data-tema="oscuro"] h1 em, :root[data-tema="oscuro"] h2 em { color: var(--amarillo); }

.logo {
  display: flex; align-items: center; gap: 10px; margin: 0;
  font: italic 700 26px/1 var(--fraunces); font-variation-settings: "opsz" 72; letter-spacing: -.004em;
}
.logo img { width: 28px; height: auto; }
:root[data-tema="oscuro"] .logo { color: var(--amarillo); }

/* Primario: la píldora amarilla con texto onyx (en los dos temas) */
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 11px 21px;
  border: 0; border-radius: 999px; background: var(--amarillo); color: var(--onyx);
  font: 700 15px/1 var(--display); letter-spacing: 0; cursor: pointer;
  box-shadow: 0 0 0 0 rgba(255, 194, 10, 0);
  transition: transform .2s var(--resorte), box-shadow .25s ease, filter .2s ease;
}
.boton:hover:not(:disabled) { box-shadow: 0 10px 22px -12px rgba(255, 194, 10, .75); filter: brightness(1.04); }
.boton:active:not(:disabled) { transform: translateY(1px); }
.boton:focus-visible { border-radius: 999px; outline-offset: 3px; }
.boton:disabled { opacity: .55; cursor: default; }
/* Secundario: contorno */
.boton-sec {
  padding: 7px 16px; border-radius: 999px; border: 0; background: none; box-shadow: inset 0 0 0 1.5px var(--linea-fuerte);
  color: var(--tinta); font: 600 14px/1.2 var(--display); letter-spacing: 0; cursor: pointer;
  transition: box-shadow .2s ease, background-color .2s ease, transform .2s var(--resorte);
}
.boton-sec:hover:not(:disabled) { box-shadow: inset 0 0 0 1.5px var(--borde-vivo); }
.boton-sec:focus-visible { border-radius: 999px; }

.entrada {
  width: 100%; padding: 10px 14px; border: 0; border-radius: 12px; background: var(--campo);
  box-shadow: inset 0 0 0 1px var(--borde-campo); color: var(--tinta); font: 500 16px/1.45 var(--display); letter-spacing: 0;
  transition: box-shadow .18s ease, background-color .18s ease;
}
.entrada::placeholder { color: var(--tenue); opacity: 1; }
.entrada:hover { box-shadow: inset 0 0 0 1px var(--tinta); }
.entrada:focus, .entrada:focus-visible { outline: none; box-shadow: inset 0 0 0 1.5px var(--anillo), 0 0 0 4px var(--halo); }
select.entrada { cursor: pointer; }
.mono { font-family: var(--mono); letter-spacing: 0; }
/* Oculto a la vista pero no del todo: sigue en el tabulador y el lector de pantalla lo lee (a diferencia de
   «hidden», que también lo saca del foco). Para controles nativos como <input type="file"> detrás de un botón. */
.oculto-visual {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ---- Paso 2: tokens de la aplicación ---- */
:root {
  --fondo-2: rgba(1, 20, 9, .03); --barra-onyx: var(--onyx); --barra-blanco: #D5D9D6; --aviso: var(--onyx);
  --em-color: var(--onyx); --em-fondo: linear-gradient(transparent 56%, var(--amarillo) 56%, var(--amarillo) 92%, transparent 92%);
  --ig-fondo: #fff; --ig-tinta: #000; --ig-suave: #737373; --ig-boton: #efefef; --ig-linea: #dbdbdb; --ig-link: #00376b; --ig-borde: #dbdbdb;
}
:root[data-tema="oscuro"] {
  --fondo-2: rgba(252, 252, 252, .022); --barra-onyx: rgba(252, 252, 252, .3); --barra-blanco: #FCFCFC; --aviso: var(--tinta);
  --em-color: var(--amarillo); --em-fondo: none;
  --ig-fondo: #000; --ig-tinta: #f5f5f5; --ig-suave: #a8a8a8; --ig-boton: #262626; --ig-linea: #262626; --ig-link: #e0f1ff; --ig-borde: #363636;
}

/* La barra de arriba */
.barra { display: flex; align-items: center; gap: 44px; padding: 16px 32px; border-bottom: 1px solid var(--linea); }
.barra .logo { color: inherit; text-decoration: none; border-radius: 8px; }
:root[data-tema="oscuro"] .barra .logo { color: var(--amarillo); }
.barra nav { display: flex; gap: 30px; font-size: 16.5px; font-weight: 600; letter-spacing: -.004em; }
.barra nav a { color: var(--suave); text-decoration: none; position: relative; transition: color .2s ease; }
.barra nav a:hover { color: var(--tinta); }
.barra nav a.on { color: var(--tinta); font-weight: 700; }
.barra nav a.on::after { content: ""; position: absolute; left: -6px; right: -6px; bottom: -12px; height: 11px; background: url(/assets/subrayado.png) center/100% 100% no-repeat; }
.tema-sw { margin-left: auto; display: flex; gap: 2px; padding: 3px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--linea-fuerte); }
.tema-sw button { width: 34px; height: 30px; border: 0; border-radius: 999px; background: none; color: var(--suave); cursor: pointer; display: grid; place-items: center; transition: color .2s ease, background-color .2s ease; }
.tema-sw button:hover:not(.on) { color: var(--tinta); }
.tema-sw button.on { background: var(--tinta); color: var(--fondo); }
.tema-sw svg { width: 16px; height: 16px; }
.barra .boton { margin-left: -24px; }
.salir { margin-left: -24px; background: none; border: 0; color: var(--suave); font: 600 14px var(--display); cursor: pointer; transition: color .2s ease; }
.salir:hover { color: var(--tinta); }

/* Colores de tema (rayitas y puntos) */
.b-onyx { background: var(--barra-onyx); } .b-amarillo { background: var(--amarillo); } .b-fucsia { background: var(--fucsia); }
.b-pizarra { background: var(--pizarra); } .b-blanco { background: var(--barra-blanco); } .b-ninguno { background: var(--linea-fuerte); }

.pronto, .error-pantalla { padding: 48px 32px; font-size: 18px; color: var(--suave); }
.aviso-flotante {
  position: fixed; right: 24px; bottom: 24px; z-index: 50; max-width: 360px; padding: 13px 18px; border-radius: var(--radio);
  background: var(--aviso-fondo); color: var(--aviso-tinta); font-size: 14.5px; font-weight: 500;
  box-shadow: inset 0 0 0 1px var(--linea), 0 18px 40px -16px rgba(0, 0, 0, .55);
}

/* Movimiento: solo al cambiar de pantalla (app.js le pone .entra a #pantalla y se la saca sola) y al pasar el mouse.
   Nunca en un repintado: el contenedor no se reemplaza, así que su animación no se repite al tipear ni al arrastrar. */
@media (prefers-reduced-motion: no-preference) {
  #pantalla.entra { animation: entra-pantalla .46s var(--suelta) backwards; }
  #pantalla.entra > * > * { animation: entra-pantalla .5s var(--suelta) backwards; }
  #pantalla.entra > * > :nth-child(2) { animation-delay: .05s; }
  #pantalla.entra > * > :nth-child(3) { animation-delay: .1s; }
  #pantalla.entra > * > :nth-child(n+4) { animation-delay: .14s; }
  .aviso-flotante { animation: entra-aviso .38s var(--resorte) backwards; }
}
@keyframes entra-pantalla { from { opacity: 0; translate: 0 10px; } }
@keyframes entra-aviso { from { opacity: 0; translate: 0 12px; scale: .97; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; }
}