/* StrucPlan — tokens de diseño (F2A, alfa-0.2)
   Paleta: azul claro + blanco, con variación de tonos de azul (decisión del usuario).
   Uso: <html data-theme="claro|oscuro">; sin atributo sigue al sistema. */

:root {
  /* Escala de azules (base de la marca) */
  --azul-50:  #f2f8ff;
  --azul-100: #e1efff;
  --azul-200: #c3e0ff;
  --azul-300: #93c8fb;
  --azul-400: #57a8f2;
  --azul-500: #2a8ae3;
  --azul-600: #176ec4;
  --azul-700: #13589d;
  --azul-800: #144a80;
  --azul-900: #133d69;
  --azul-950: #0b2442;

  /* Neutros con tinte azul */
  --gris-0:   #ffffff;
  --gris-50:  #f7f9fc;
  --gris-100: #eef2f7;
  --gris-200: #dfe5ee;
  --gris-300: #c6cfdc;
  --gris-500: #5b697e;
  --gris-700: #36445a;
  --gris-900: #141c2b;

  /* Semánticos — modo claro */
  --fondo:          var(--azul-50);
  --superficie:     var(--gris-0);
  --superficie-2:   var(--azul-100);
  --superficie-hundida: var(--gris-50);
  --borde:          var(--gris-200);
  --borde-fuerte:   var(--gris-300);
  --texto:          var(--gris-900);
  --texto-2:        var(--gris-700);
  --texto-3:        var(--gris-500);
  --primario:       var(--azul-600);
  --primario-hover: var(--azul-700);
  --primario-suave: var(--azul-100);
  --sobre-primario: #ffffff;
  --enfoque:        var(--azul-400);
  --seleccion:      #ff8a1f;          /* naranja: único color cálido, para lo seleccionado */
  --peligro:        #d23b3b;
  --peligro-suave:  #fdecec;
  --aviso:          #b7791f;
  --aviso-suave:    #fdf5e4;
  --exito:          #187a4f;
  --exito-suave:    #e5f6ee;

  /* Lienzo y diagramas */
  --lienzo:         #fbfdff;
  --rejilla:        #e3ecf7;
  --estructura:     var(--azul-950);
  --apoyo:          var(--gris-700);
  --carga:          #c2410c;          /* cargas en naranja oscuro: se distinguen de la estructura */
  --diag-n:         #7c4dcc;          /* axial — violeta */
  --diag-v:         #0d9488;          /* cortante — verde azulado */
  --diag-m:         var(--azul-600);  /* momento — azul de marca */
  --diag-relleno:   0.18;             /* opacidad del relleno */
  --deformada:      #e0559a;
  --diag-neg:       #e8664a;          /* relleno de valores negativos (coral, como en la calculadora) */

  /* Tipografía (pila del sistema: la PWA funciona sin conexión) */
  --fuente: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --fuente-num: ui-monospace, "SF Mono", "Cascadia Mono", "Roboto Mono", Menlo, monospace;
  --t-xs: 0.75rem;   /* 12 */
  --t-sm: 0.8125rem; /* 13 */
  --t-md: 0.9375rem; /* 15 */
  --t-lg: 1.0625rem; /* 17 */
  --t-xl: 1.375rem;  /* 22 */
  --t-2xl: 1.75rem;  /* 28 */
  --peso-normal: 400; --peso-medio: 550; --peso-fuerte: 700;

  /* Espaciado (base 4) */
  --e-1: 4px; --e-2: 8px; --e-3: 12px; --e-4: 16px; --e-5: 20px; --e-6: 24px; --e-8: 32px; --e-10: 40px;

  /* Radios */
  --r-sm: 6px; --r-md: 10px; --r-lg: 14px; --r-xl: 20px; --r-full: 999px;

  /* Sombras */
  --sombra-1: 0 1px 2px rgba(19, 61, 105, .08);
  --sombra-2: 0 2px 8px rgba(19, 61, 105, .10), 0 1px 2px rgba(19, 61, 105, .06);
  --sombra-3: 0 12px 32px rgba(19, 61, 105, .18);

  /* Tamaños táctiles y zonas seguras */
  --toque: 44px;
  --barra-inferior: 64px;
  --seguro-abajo: env(safe-area-inset-bottom, 0px);
  --seguro-arriba: env(safe-area-inset-top, 0px);

  --transicion: 160ms cubic-bezier(.2, .7, .3, 1);
  color-scheme: light;
}

/* Modo oscuro: azul noche, con los azules claros como acento */
:root[data-theme="oscuro"] {
  --fondo:          #0a1424;
  --superficie:     #111e33;
  --superficie-2:   #17294a;
  --superficie-hundida: #0d1829;
  --borde:          #22375a;
  --borde-fuerte:   #2f4a75;
  --texto:          #e8f0fb;
  --texto-2:        #b3c3da;
  --texto-3:        #7f93b0;
  --primario:       var(--azul-400);
  --primario-hover: var(--azul-300);
  --primario-suave: #16335c;
  --sobre-primario: #06182e;
  --enfoque:        var(--azul-300);
  --peligro:        #f07070;
  --peligro-suave:  #3a1a22;
  --aviso:          #e8b04a;
  --aviso-suave:    #3a2c14;
  --exito:          #4cc28b;
  --exito-suave:    #133326;
  --lienzo:         #0c1729;
  --rejilla:        #18294a;
  --estructura:     #e1efff;
  --apoyo:          #b3c3da;
  --carga:          #ff9a5a;
  --diag-n:         #b28cff;
  --diag-v:         #3dd6c6;
  --diag-m:         var(--azul-300);
  --diag-relleno:   0.24;
  --deformada:      #ff7ab8;
  --diag-neg:       #ff8a6e;
  --sombra-1: 0 1px 2px rgba(0,0,0,.4);
  --sombra-2: 0 2px 10px rgba(0,0,0,.45);
  --sombra-3: 0 14px 36px rgba(0,0,0,.55);
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="claro"]) {
    --fondo:          #0a1424;
    --superficie:     #111e33;
    --superficie-2:   #17294a;
    --superficie-hundida: #0d1829;
    --borde:          #22375a;
    --borde-fuerte:   #2f4a75;
    --texto:          #e8f0fb;
    --texto-2:        #b3c3da;
    --texto-3:        #7f93b0;
    --primario:       var(--azul-400);
    --primario-hover: var(--azul-300);
    --primario-suave: #16335c;
    --sobre-primario: #06182e;
    --enfoque:        var(--azul-300);
    --peligro:        #f07070;
    --peligro-suave:  #3a1a22;
    --aviso:          #e8b04a;
    --aviso-suave:    #3a2c14;
    --exito:          #4cc28b;
    --exito-suave:    #133326;
    --lienzo:         #0c1729;
    --rejilla:        #18294a;
    --estructura:     #e1efff;
    --apoyo:          #b3c3da;
    --carga:          #ff9a5a;
    --diag-n:         #b28cff;
    --diag-v:         #3dd6c6;
    --diag-m:         var(--azul-300);
    --diag-relleno:   0.24;
    --deformada:      #ff7ab8;
    --diag-neg:       #ff8a6e;
    --sombra-1: 0 1px 2px rgba(0,0,0,.4);
    --sombra-2: 0 2px 10px rgba(0,0,0,.45);
    --sombra-3: 0 14px 36px rgba(0,0,0,.55);
    color-scheme: dark;
  }
}