/* Tokens de diseño del cockpit móvil: paleta, tipografía, espaciados y el tema claro.
   Misma paleta y gramática que MAD (voice-electron/renderer/styles/globals.css). */

:root {
  /* Superficies — idénticas al escritorio para que se lea como la misma app. */
  --ground: #0f172a;
  --panel: #1e293b;
  --panel2: #22304a;
  --ink: #f1f5f9;
  --muted: #b3c0d1;
  --faint: #8fa0b8;
  --border: #33425c;
  --border-hi: #465873;
  --border-ctl: #6f8099;
  --fill: #334155;
  --fill-hi: #475569;
  --accent: #e6a938;
  --accent-2: #c9842a;
  --accent-soft: #2a2410;
  --on-accent: #0f172a;
  --ok: #4ade80;
  --wait: #f2b55c;
  --conflict: #f87171;
  --done: #96a3b4;

  /* Dirección «elegante» (docs/mocks/movil/elegante.css): degradé radial arriba del
     fondo, superficies translúcidas para el sheen de tarjetas/hojas, hairlines sutiles
     y el degradé cálido del acento. `--grad-superficie` es el barniz que se SUMA (no
     reemplaza) al color sólido de cada superficie — así el header sigue opaco donde
     tiene que serlo (debajo de la safe-area) y las tarjetas ganan profundidad. */
  --ground-grad: radial-gradient(120% 42% at 50% -10%, #1c2436 0%, var(--ground) 62%);
  --grad-superficie: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02));
  --grad-superficie-viva: radial-gradient(120% 90% at 0% 0%, rgba(230, 169, 56, 0.14), transparent 60%);
  --accent-grad: linear-gradient(145deg, #f7c674, #e0913a);
  --accent-sh: 0 8px 20px rgba(224, 145, 58, 0.28);
  --line: rgba(255, 255, 255, 0.07);
  --line-hi: rgba(255, 255, 255, 0.12);
  --vidrio: rgba(24, 29, 41, 0.78);
  --blur-vidrio: blur(20px) saturate(1.4);

  /* Paleta semántica de estados: ámbar de «en proceso», azul de «en espera» (hoy
     comparte tono con proceso en algunos listados — el token ya está listo para cuando
     se separen), violeta de «por revisar», rojo de error y verde de hecho. */
  --st-proceso: #f2b55c;
  --st-espera: #8fb4ff;
  --st-revisar: #c3a6ff;
  --st-error: #ff7b7b;
  --st-hecho: #5fd39a;

  /* Tipografía: el escritorio vive en 12 px; en la mano alcanza con 14 de base
     (un escalón menos que antes: entra más información sin perder legibilidad). */
  --fs-xs: 10px;
  --fs-sm: 12px;
  --fs-md: 14px;
  --fs-lg: 16px;
  /* Cuerpo de la bitácora: un escalón bajo el texto base. Se lee igual en la mano y entra
     un par de líneas más por pantalla, que es lo que importa en el historial. `--fs-bit` es
     la prosa del agente; `--fs-bit-sm`, todo lo secundario (el pedido, los avances, los
     estados, las herramientas). Los TÍTULOS y las PÍLDORAS quedan en la escala general: son
     los puntos de anclaje de la lectura y encogerlos vuelve la bitácora una masa gris. */
  --fs-bit: 12px;
  --fs-bit-sm: 11.5px;
  --fs-xl: 20px;
  --fs-display: 28px;

  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-6: 24px;
  --sp-8: 32px;

  /* Radios más generosos: tarjetas y hojas ~20px, controles ~14px (botón, segmentado). */
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-pill: 999px;
  --sh-sm: 0 3px 10px rgba(0, 0, 0, 0.4);
  --sh-md: 0 12px 30px rgba(0, 0, 0, 0.45);
  --sh-alza: 0 -6px 18px rgba(0, 0, 0, 0.28);

  /* Escala de capas: todo z-index literal de la PWA debería salir de acá. El orden es
     a propósito grueso (6 escalones, no 20): contenido normal, el encabezado fijo, el
     pie (composer), una hoja o popover flotante, un aviso persistente (banner, toast)
     y por último lo que bloquea TODA la pantalla (visor, búsqueda, permiso). */
  --z-contenido: 0;
  --z-encabezado: 10;
  --z-pie: 20;
  --z-hoja: 40;
  --z-aviso: 60;
  --z-modal: 80;

  /* Capas translúcidas: el velo que oscurece el fondo bajo una hoja modal, el fondo
     casi opaco de las bandas pegajosas y el desvanecido del encabezado. Van por token
     porque son lo único que un tema claro no puede heredar del oscuro. */
  --velo: rgba(2, 6, 23, 0.55);
  --velo-fuerte: rgba(2, 6, 23, 0.62);
  --panel-velo: rgba(8, 12, 22, 0.94);
  --panel-fade: rgba(30, 41, 59, 0.92);
  --banda-ctx: rgba(15, 23, 42, 0.45);
  --glow-accent: rgba(230, 169, 56, 0.45);

  /* Campos de texto (Fase 3 §17, campos.css): HUNDIDOS —más oscuros que la tarjeta y con
     sombra interior— para no confundirse con un botón secundario, que va en relieve. */
  --campo: #131c2e;
  --campo-sh: inset 0 1px 2px rgba(0, 0, 0, 0.35);
  --campo-anillo: 0 0 0 3px rgba(230, 169, 56, 0.22);

  /* Tintas de los tipos de tarea: pasteles sobre el fondo oscuro, saturadas y oscuras
     sobre el claro (un pastel sobre blanco no se lee). */
  --tipo-teal: #5eead4;
  --tipo-cielo: #7dd3fc;
  --tipo-violeta: #c4b5fd;
  --tipo-oro: #fcd34d;
  --tipo-rosa: #f9a8d4;

  --toque: 44px; /* mínimo táctil */
  --alto-top: 36px;
  --alto-tabs: 50px;
  --safe-top: env(safe-area-inset-top, 0px);
  /* El inset inferior de iOS (34px en los iPhone con Face ID) deja mucho aire bajo la
     barra de inicio; le recortamos 14px para ganar pantalla sin pisar el indicador. */
  --safe-bottom: max(0px, calc(env(safe-area-inset-bottom, 0px) - 14px));
  /* Aire lateral del contenido: el mismo a los dos lados y en todas las pantallas, para
     que nada quede lamiendo el borde (y respetando el recorte de la pantalla si lo hay). */
  --borde-x: calc(var(--sp-4) + env(safe-area-inset-right, 0px));

  color-scheme: dark;
}

/* Instalada como PWA el aire de arriba es SOLO el que informa el sistema: en Android la
   barra de estado es una franja aparte y `safe-area-inset-top` vale 0, así que cualquier
   piso propio se veía como una banda vacía sobre el header. El aire mínimo para que la
   marca no arranque en el filo ya lo pone el padding de los controles del renglón. */

/* ── Tema claro ─────────────────────────────────────────────────────────────
   Mismo sistema visual, invertido: el resto de la hoja (y de las otras hojas) nunca
   nombra un color, sólo estos tokens, así que cambiar de tema es cambiar este bloque.
   Lo aplica js/ui/tema.js poniendo `data-tema` en el <html>; con "auto" se copia lo que
   dice el sistema. El ámbar de marca se OSCURECE: el #e6a938 del modo noche sobre
   blanco da 1.9:1 de contraste y como texto no se lee. */
:root[data-tema='claro'] {
  --ground: #eef1f7;
  --panel: #ffffff;
  --panel2: #f3f6fb;
  --ink: #16202e;
  --muted: #4c5b71;
  --faint: #6a7a90;
  --border: #d8e0ea;
  --border-hi: #c3cedd;
  --border-ctl: #9dabbe;
  --fill: #e9eef5;
  --fill-hi: #dae2ed;
  --accent: #9a6108;
  --accent-2: #7a4d06;
  --accent-soft: #fdf1d9;
  --on-accent: #ffffff;
  --ok: #157f3c;
  --wait: #a2620a;
  --conflict: #c62828;
  --done: #7b8798;

  /* Mismo lenguaje «elegante», invertido: el degradé radial se apaga casi del todo (un
     blanco sobre blanco apenas se nota, que es la idea), las superficies translúcidas
     pasan a tinta oscura muy diluida y el acento se oscurece para seguir leyéndose. */
  --ground-grad: radial-gradient(120% 42% at 50% -10%, #ffffff 0%, var(--ground) 62%);
  --grad-superficie: linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.5));
  --grad-superficie-viva: radial-gradient(120% 90% at 0% 0%, rgba(154, 97, 8, 0.1), transparent 60%);
  --accent-grad: linear-gradient(145deg, #c9842a, #9a6108);
  --accent-sh: 0 8px 20px rgba(154, 97, 8, 0.22);
  --line: rgba(15, 23, 42, 0.08);
  --line-hi: rgba(15, 23, 42, 0.14);
  --vidrio: rgba(255, 255, 255, 0.78);

  --st-proceso: #9a6108;
  --st-espera: #2f5fd1;
  --st-revisar: #6d28d9;
  --st-error: #c62828;
  --st-hecho: #157f3c;

  /* Con fondo claro la sombra negra ensucia: baja a una sombra de tinta, muy tenue. */
  --sh-sm: 0 2px 8px rgba(15, 23, 42, 0.1);
  --sh-md: 0 12px 30px rgba(15, 23, 42, 0.16);
  --sh-alza: 0 -6px 18px rgba(15, 23, 42, 0.1);

  --velo: rgba(15, 23, 42, 0.32);
  --velo-fuerte: rgba(15, 23, 42, 0.38);
  --panel-velo: rgba(255, 255, 255, 0.94);
  --panel-fade: rgba(255, 255, 255, 0.92);
  --banda-ctx: rgba(15, 23, 42, 0.06);
  /* El halo ámbar de la pestaña activa vive de brillar contra el negro: sobre claro
     sólo deja un borrón sucio, así que se apaga. */
  --glow-accent: transparent;
  --campo: #f5f7fb;
  --campo-sh: inset 0 1px 2px rgba(15, 23, 42, 0.08);
  --campo-anillo: 0 0 0 3px rgba(154, 97, 8, 0.16);

  --tipo-teal: #0f766e;
  --tipo-cielo: #0369a1;
  --tipo-violeta: #6d28d9;
  --tipo-oro: #a16207;
  --tipo-rosa: #be185d;

  color-scheme: light;
}