/* EL SISTEMA DE DISEÑO de la app de Kiwi (app nueva, 2026-09-26).

   La maqueta que Sergi aprobo ("Me gustan!") es un remix de tres propuestas
   suyas, tomadas de referencia y no copiadas: la 10 "flotante" (pildoras
   separadas del borde, aurora verde sobre casi negro, tu burbuja esmeralda),
   la 2 "cristal verde" (material translucido con filo luminoso) y la 4 "verde
   bosque" (superficies de verde tonal, la hora bajo la burbuja). La firma de
   Kiwi es la RODAJA DE KIWI de luz (simbolo.js): su avatar vivo, las semillas
   que piensan, el orbe de la voz y una marca de agua casi invisible.

   Aqui solo el sistema: tokens, fondo, material, tipografia y movimiento. Los
   componentes van en app.css. Contraste de cada texto sobre su fondo medido
   (WCAG AA >= 4,5): tinta/burbuja 14,7; tenue/noche 9,5; apagado/noche 5,2;
   apagado/campo 5,0; blanco/esmeralda claro 4,75 (#1a8156: el #1f9a66 de la
   maqueta daba 3,49 y se oscurecio); menta/cristal 11,1; ambar/permiso 8,8;
   tinta del Si 7,7; rosa del No 7,7; kiwi/burbuja 9,5. test_app_nueva lo
   vuelve a medir sobre lo que pinta el navegador. */
:root {
  /* superficies: noche con un punto de verde (el negro puro hace halo en OLED) y verdes tonales */
  --noche: #050a07;
  --bosque1: #0d1812; --bosque2: #132219; --bosque3: #1a2e22;
  --cristal: rgba(19, 33, 26, .62);        /* cabecera, compositor, hojas (con desenfoque) */
  --cristal-alto: rgba(24, 41, 32, .78);   /* burbuja de Kiwi (sin desenfoque: scroll largo) */
  --campo: rgba(0, 0, 0, .28);
  --filo: rgba(150, 235, 185, .15);        /* el borde fino luminoso del cristal */
  --filo-luz: rgba(175, 255, 210, .34);
  /* tinta */
  --tinta: #eaf4ee; --tenue: #a3b8ac; --apagado: #71877b;
  /* acentos: la pulpa del kiwi, esmeralda, menta; y los de aviso */
  --kiwi: #9ad65a; --esmeralda: #2fbf7f; --menta: #4be3a6;
  --mia-1: #1a8156; --mia-2: #13754c; --mia-3: #0e6340; --mia-tinta: #f4fff9; --mia-hora: #9fdcbf;
  --ambar: #f2b84d; --rojo: #ff6b6b;
  --pulpa: radial-gradient(120% 120% at 30% 20%, #c4f07e 0%, #7dd35c 38%, #2fbf7f 100%);
  /* forma */
  --r-pildora: 28px; --r-burbuja: 20px; --r-tarjeta: 22px; --r-campo: 22px;
  --sombra: 0 12px 32px rgba(0, 0, 0, .5);
  --margen: 10px;                          /* lo que separa las pildoras del borde */
  /* tipografia (la del sistema: SF en el iPhone) */
  --letra: -apple-system, "SF Pro Text", "Segoe UI Variable", "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, Menlo, Consolas, monospace;
  --t-cuerpo: 16px; --t-pequena: 13.5px; --t-mini: 11.5px; --t-titulo: 18px;
  /* movimiento */
  --t-rapido: 160ms; --t-medio: 280ms; --curva: cubic-bezier(.2, .8, .2, 1);
}

* { box-sizing: border-box; margin: 0; }
html, body { height: 100%; }
html { background: var(--noche); }
body { min-height: 100dvh; height: 100dvh; overflow: hidden;
       display: flex; flex-direction: column;
       padding: env(safe-area-inset-top) env(safe-area-inset-right) 0 env(safe-area-inset-left);
       background: transparent; color: var(--tinta);
       font: var(--t-cuerpo)/1.45 var(--letra);
       -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; }
button { font: inherit; color: inherit; cursor: pointer; }
button:disabled { cursor: default; }
[hidden] { display: none !important; }

/* ---- el fondo: aurora (10), bokeh muy suave (2), semillas de agua (Kiwi) y grano anti-bandas */
.fondo { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden;
  background:
    radial-gradient(55% 32% at 105% 24%, rgba(47,191,127,.22), transparent 70%),
    radial-gradient(60% 36% at -12% 66%, rgba(47,191,127,.17), transparent 70%),
    radial-gradient(18% 10% at 22% 38%, rgba(75,227,166,.07), transparent 70%),
    radial-gradient(22% 12% at 80% 82%, rgba(154,214,90,.06), transparent 70%),
    linear-gradient(180deg, #07120c 0%, #040806 45%, #050b08 100%); }
.fondo .arco { position: absolute; border-radius: 50%; border: 1.2px solid rgba(90,235,165,.30);
               box-shadow: 0 0 36px rgba(47,191,127,.28), inset 0 0 48px rgba(47,191,127,.10); }
.fondo .arco.a { width: 150vw; height: 150vw; left: 20vw; top: -118vw; }
.fondo .arco.b { width: 160vw; height: 160vw; left: -118vw; top: 58vh; border-color: rgba(90,235,165,.22); }
.fondo .agua { position: absolute; right: -90px; bottom: 90px; width: 330px; height: 330px; opacity: .06; }
.fondo .grano { position: absolute; inset: 0; opacity: .05; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

/* ---- el material cristal (2): solo en cabecera, compositor y hojas; las
   burbujas no lo llevan (el desenfoque en decenas de burbujas cuesta al
   hacer scroll en el iPhone) */
.cristal { background: var(--cristal); border: 1px solid var(--filo);
           -webkit-backdrop-filter: blur(20px) saturate(150%); backdrop-filter: blur(20px) saturate(150%);
           box-shadow: var(--sombra), inset 0 1px 0 rgba(255,255,255,.06); }

/* ---- iconos de trazo (un solo estilo en toda la app) */
.trazo { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8;
         stroke-linecap: round; stroke-linejoin: round; }

/* ---- movimiento: quien lo pide reducido no ve girar ni latir nada */
@keyframes girar { to { transform: rotate(360deg); } }
@keyframes latir { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.04); } }
@keyframes semilla { 0%, 100% { transform: translateY(0); opacity: .45; } 40% { transform: translateY(-5px); opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}