/* ============================================================
   "Ahora" — fundaciones del rediseno (Fase 0)
   Portado de design_handoff_ahora_ui/ (claude.ai/design).

   Este archivo carga ANTES de style.css y es la unica fuente de
   verdad de color, tipografia, ritmo y cristal. style.css ya no
   declara tokens: solo compone con los de aqui.

   Reglas del handoff que viven en este archivo:
   · una sola paleta, oscura. El modo claro se retiro el 31-jul-2026
   · sin rojo en todo el sistema: los errores tambien van en ambar
   · cada proyecto tiene color Y forma (daltonismo)
   · el cristal son cinco capas, no un backdrop-filter suelto
   ============================================================ */

/* --- Tipografias auto-hospedadas ---
   La PWA debe abrir sin conexion, asi que nada de Google Fonts. */

@font-face {
  font-family: 'Atkinson Hyperlegible';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/atkinson-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Atkinson Hyperlegible';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/atkinson-700.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/plexmono-400.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/plexmono-500.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/plexmono-600.woff2') format('woff2');
}

/* PENDIENTE — Instrument Serif (titulos editoriales).
   Falta el archivo. Mientras tanto --font-title cae a un serif del
   sistema, que da el mismo peso editorial sin pedir red.
   Para activarla: dejar instrument-serif-400.woff2 en /fonts/,
   descomentar este bloque y agregarlo al precache del service worker.

@font-face {
  font-family: 'Instrument Serif';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/instrument-serif-400.woff2') format('woff2');
}
*/

:root {
  /* --- Superficies --- */
  --bg: #08070C;          /* fondo de la app */
  --bg-now: #060509;      /* Modo Ahora, un punto mas profundo */
  --bg-ring: #0A0910;     /* disco interior del anillo de foco */

  /* --- Texto --- */
  --ink: #F4F3F7;
  --ink-2: rgba(244, 243, 247, 0.74);
  --ink-3: rgba(244, 243, 247, 0.60);
  --ink-4: rgba(244, 243, 247, 0.42);
  --on-acc: #120E20;      /* SIEMPRE este sobre acento, nunca blanco */
  --on-warm: #1B1206;

  /* --- Acento ---
     accent.js recalcula --acc2 y --accDim en runtime a partir de --acc,
     porque el usuario puede cambiar el acento y desbloquea otros con el
     nivel. Estos valores son el violeta por defecto, para que la primera
     pintada no parpadee antes de que corra el JS. */
  --acc: #8F7CF7;
  --acc2: #C3B4FF;                          /* lighten(acc, 0.42) */
  --accDim: rgba(143, 124, 247, 0.20);
  --accLine: rgba(143, 124, 247, 0.45);

  /* --- Semanticos. No existe el rojo. --- */
  --ok: #4FD69C;
  --ok2: #7BE6BC;                           /* extremo del gradiente de avance */
  --okDim: rgba(79, 214, 156, 0.14);
  --warm: #F0B354;
  --warmDim: rgba(240, 179, 84, 0.14);

  /* --- Proyectos: color Y forma ---
     El orden es el de PROJECTS en detect.js (n: 1..6). */
  --p1: #7DA2FF;   /* ARKHA — cuadrado */
  --p2: #6FD3B8;   /* Real Estate — circulo */
  --p3: #C79BFF;   /* Daniel Kuru — rombo */
  --p4: #9AB4D6;   /* MinTIC — barra */
  --p5: #F291B6;   /* Orvita — triangulo */
  --p6: #A9B2C4;   /* Personal — anillo */

  /* --- Tipografia --- */
  --font-ui: 'Atkinson Hyperlegible', system-ui, -apple-system, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, monospace;
  --font-title: 'Instrument Serif', 'Iowan Old Style', 'Palatino Linotype', Georgia, serif;

  /* Escala declarada. Antes los tamanos aparecian sueltos por el CSS
     (problema conocido #5 del diagnostico). Minimo 11px para texto
     informativo; 9.5 solo para badges numericos sobre fondo opaco. */
  --fs-badge: 9.5px;
  --fs-label: 10.5px;   /* etiquetas mono en versalitas */
  --fs-micro: 11px;
  --fs-meta: 12.5px;
  --fs-body: 13.5px;
  --fs-ui: 15px;
  --fs-lead: 16px;
  --fs-title-s: 21px;
  --fs-title: 25px;
  --fs-title-l: 33px;
  --fs-display: 42px;
  --fs-timer: 56px;

  --track-label: 0.20em;  /* letter-spacing de las etiquetas mono */

  /* --- Ritmo ---
     Escala unica. El diagnostico #4 era justamente que habia 4, 6, 10,
     12, 14, 16, 18 y 22 px puestos a mano sin escala. */
  --sp-1: 2px;  --sp-2: 4px;  --sp-3: 6px;  --sp-4: 8px;
  --sp-5: 10px; --sp-6: 12px; --sp-7: 14px; --sp-8: 16px;
  --sp-9: 18px; --sp-10: 20px; --sp-11: 22px; --sp-12: 26px;

  --pad: 18px;            /* padding lateral del contenido */
  --scroll-end: 132px;    /* para que nada quede bajo la barra */

  /* --- Radios --- */
  --r-pill: 99px;
  --r-sheet: 30px;
  --r-hero: 28px;
  --r-card: 26px;
  --r-field: 24px;
  --r-row: 22px;
  --r-btn: 20px;
  --r-row-s: 18px;
  --r-chip: 16px;
  --r-mini: 13px;

  /* --- Sombras --- */
  --sh-btn: 0 12px 26px var(--accDim), inset 0 2px 0 rgba(255, 255, 255, 0.55);
  --sh-hero: 0 22px 50px rgba(0, 0, 0, 0.5);
  --sh-nav: 0 18px 40px rgba(0, 0, 0, 0.55);
  --sh-sheet: 0 24px 60px rgba(0, 0, 0, 0.6);
  --sh-fab: 0 16px 34px rgba(0, 0, 0, 0.5), inset 0 0 0 1px rgba(255, 255, 255, 0.14);
  --sh-ring: 0 0 50px var(--accDim);

  /* --- Cristal ---
     Un solo mando para todo el desenfoque. accent.js lo pone en 0px
     cuando el usuario activa "Reducir transparencias": el cristal se
     apaga entero sin romper un solo layout. */
  --gb: 24px;
  --gb-strong: 30px;
  --gb-lite: 12px;   /* filas y chips: mismo efecto, radio menor */

  /* La barra flotante y el FAB se anclan a la misma referencia, para que
     no se despeguen entre iPhone con notch y navegador de escritorio. */
  --nav-bottom: max(30px, env(safe-area-inset-bottom, 0px));

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* --- Puente con el CSS anterior ---
   Las pantallas que todavia no estan rediseñadas (Plan, Citas, Foco,
   Capturar, Archivo, Ajustes, Avisos) siguen pidiendo los nombres
   viejos. Se remapean a la paleta nueva para que sigan legibles y
   coherentes mientras les llega su fase. Cada alias muere cuando su
   pantalla se rediseña; cuando no quede ninguno, este bloque se borra. */
:root {
  --surf: #14131C;
  --surf2: #1B1A25;
  --surf3: #23222E;
  --line: rgba(255, 255, 255, 0.09);
  --tx: var(--ink);
  --tx2: var(--ink-2);
  --tx3: var(--ink-3);
  --accTx: var(--on-acc);
  --accSoft: var(--accDim);
  --okSoft: var(--okDim);
  --warmSoft: var(--warmDim);
  --gap: 12px;
  --h1: 30px;
  --r: 18px;
  --big: 17px;
  --cols: 1;
}

@media (min-width: 700px) {
  :root { --pad: 30px; --gap: 16px; --h1: 38px; --big: 19px; --cols: 2; }
}
@media (min-width: 1100px) {
  :root { --pad: 30px; --gap: 16px; --h1: 34px; --big: 18px; --cols: 2; }
}

/* --- Base --- */

* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

html, body { margin: 0; padding: 0; }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: var(--fs-lead);
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
  min-height: 100vh;
}

/* --- Los glows del fondo ---
   No son decoracion: EL CRISTAL NECESITA ALGO DETRAS PARA FUNCIONAR. Sobre un
   fondo plano, desenfocar la nada da gris muerto y el efecto no se lee. Son la
   mitad del liquid glass; la otra mitad es la receta de capas.
   Van en un elemento propio y no en pseudo-elementos de body: Safari de iOS
   deja de componer los pseudo-elementos de body cuando algo mas arriba crea un
   contexto de apilamiento, y el fondo desaparecia justo en el telefono. */

.bg-glows {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.bg-glows i {
  position: absolute;
  display: block;
  border-radius: 50%;
}

/* NADA DE filter: blur() AQUI.
   Un blur de 120px sobre un elemento de 940x640 obliga al navegador a montar
   un buffer enorme fuera de pantalla y a REHACERLO cada vez que algo por
   encima crea un contexto de apilamiento (abrir una hoja, por ejemplo). En
   iPhone eso costaba segundos, y era el retardo al abrir una tarea.
   Un radial-gradient ya sale difuminado de fabrica y cuesta cero. */

.bg-glows i:nth-child(1) {
  top: -200px;
  left: 50%;
  width: 940px;
  height: 640px;
  margin-left: -470px;
  background: radial-gradient(closest-side,
    color-mix(in srgb, var(--acc) 40%, transparent),
    color-mix(in srgb, var(--acc) 16%, transparent) 55%,
    transparent 100%);
  animation: drift 14s ease-in-out infinite;
}

.bg-glows i:nth-child(2) {
  bottom: -280px;
  right: -140px;
  width: 660px;
  height: 560px;
  background: radial-gradient(closest-side,
    rgba(111, 211, 184, 0.22),
    rgba(111, 211, 184, 0.08) 55%,
    transparent 100%);
  animation: drift 19s ease-in-out infinite reverse;
}

/* A media altura y por la izquierda: sin el, la franja central queda plana y
   las tarjetas de en medio pierden el efecto. */
.bg-glows i:nth-child(3) {
  top: 34%;
  left: -220px;
  width: 560px;
  height: 560px;
  background: radial-gradient(closest-side,
    color-mix(in srgb, var(--acc) 26%, transparent),
    transparent 100%);
  animation: drift 24s ease-in-out infinite;
}

/* Todo lo que se toca va por encima de los glows. */
.screen-login,
.app-shell,
.now-overlay,
.editor-overlay,
.alarm-overlay,
.toast-wrap,
.sheet-overlay { position: relative; z-index: 1; }

/* --- Cristal (liquid glass) ---
   La receta completa son cinco capas: borde, gradiente diagonal,
   desenfoque saturado, y tres sombras internas (brillo superior, halo
   y rebote inferior). Con --gb: 0px queda una superficie translucida
   plana, que sigue siendo legible. */

.glass {
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: linear-gradient(150deg,
    rgba(255, 255, 255, 0.135),
    rgba(255, 255, 255, 0.045) 55%,
    rgba(255, 255, 255, 0.085));
  -webkit-backdrop-filter: blur(var(--gb)) saturate(185%) brightness(1.14);
  backdrop-filter: blur(var(--gb)) saturate(185%) brightness(1.14);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.50),
    inset 0 0 0 1px rgba(255, 255, 255, 0.13),
    inset 0 -12px 26px rgba(255, 255, 255, 0.045);
}

.glass-strong {
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: linear-gradient(150deg,
    rgba(255, 255, 255, 0.17),
    rgba(255, 255, 255, 0.055) 46%,
    rgba(255, 255, 255, 0.11));
  -webkit-backdrop-filter: blur(var(--gb-strong)) saturate(200%) brightness(1.20);
  backdrop-filter: blur(var(--gb-strong)) saturate(200%) brightness(1.20);
  box-shadow:
    0 14px 32px rgba(0, 0, 0, 0.5),
    inset 0 1.2px 0 rgba(255, 255, 255, 0.6),
    inset 0 0 0 1px rgba(255, 255, 255, 0.15);
}

/* --- Animaciones del diseno --- */

@keyframes scr {
  from { opacity: 0; transform: translateY(14px) scale(0.985); }
  to { opacity: 1; transform: none; }
}
@keyframes swap {
  from { opacity: 0; transform: translateY(12px) scale(0.975); filter: blur(9px); }
  60% { filter: blur(0); }
  to { opacity: 1; transform: none; filter: blur(0); }
}
@keyframes pop {
  from { opacity: 0; transform: translateY(18px) scale(0.94); }
  to { opacity: 1; transform: none; }
}
@keyframes breathe {
  0%, 100% { transform: scale(0.82); opacity: 0.55; }
  50% { transform: scale(1.12); opacity: 1; }
}
@keyframes drift {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50% { transform: translate3d(0, -14px, 0) scale(1.06); }
}
@keyframes eq {
  from { transform: scaleY(0.3); }
  to { transform: scaleY(1); }
}
@keyframes halo {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 0.85; }
}
@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* --- Utilidades --- */

.mono { font-family: var(--font-mono); }

.serif { font-family: var(--font-title); font-weight: 400; letter-spacing: -0.012em; }

/* Etiqueta mono en versalitas: el patron mas repetido del diseno. */
.label {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--ink-3);
}

.hidden { display: none !important; }

::-webkit-scrollbar { width: 0; height: 0; }