/* El juego único de variables del sitio: los colores, letras y medidas del prototipo (negro cálido, el naranja de
   MaxApp, Inter + JetBrains Mono + Instrument Serif), en oscuro y en claro, y los colores de estado de la misma paleta.
   Todas las zonas cargan esta hoja; publico.css, portada.css y sitio.css solo usan sus variables: un color nuevo nace
   aquí. Sin elección, la zona pública abre en oscuro y las zonas con sesión (html.privada) siguen al dispositivo. */

:root{
  /* el prototipo, en oscuro */
  --bg:#08080a;--bg2:#0e0e11;--panel:#121216;--panel2:#17171c;--linea:rgba(255,255,255,.08);--linea2:rgba(255,255,255,.14);
  --tinta:#f5f3ef;--tinta2:#a9a7ae;--tinta3:#67666e;--naranja:#ff6a1a;--naranja2:#ffb27a;--verde:#38d980;--azul:#6cb8ff;
  --amarillo:#ffd166;--rojo:#ff6b80;
  --sans:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;--mono:'JetBrains Mono',ui-monospace,Consolas,monospace;
  --serif:'Instrument Serif',Georgia,serif;--radio:18px;--radio-chico:12px;
  --velo:rgba(8,8,10,.6);--brillo:rgba(255,255,255,.04);--brillo2:rgba(255,255,255,.015);
  --lienzo-caja:rgba(18,18,22,.92);--lienzo-borde:rgba(255,255,255,.16);--lienzo-texto:#f5f3ef;--lienzo-chip:#ffd9c2;
  --lienzo-rejilla:rgba(255,255,255,.035);
  /* los nombres de las pantallas, derivados del prototipo */
  --fondo:var(--bg);--superficie:var(--panel);--superficie-2:var(--panel2);--borde:var(--linea2);--texto:var(--tinta);
  --texto-suave:var(--tinta2);--acento:var(--naranja);--acento-texto:#000;--acento-tinta:var(--naranja);--acento-suave:rgba(255,106,26,.14);
  --ok:var(--verde);--ok-suave:rgba(56,217,128,.12);--alerta:var(--amarillo);--alerta-suave:rgba(255,209,102,.12);
  --peligro:var(--rojo);--peligro-suave:rgba(255,107,128,.12);--peligro-texto:#000;--info:var(--azul);
  --info-suave:rgba(108,184,255,.12);--fuente:var(--sans);
  --sombra:0 1px 2px rgba(0,0,0,.4),0 6px 20px rgba(0,0,0,.3);--sombra-grande:0 30px 80px rgba(0,0,0,.45);
  --katito-filtro:drop-shadow(0 0 1px rgba(255,255,255,.3));
  color-scheme:dark;
}
:root[data-tema="claro"]{
  --bg:#f7f1e8;--bg2:#efe7db;--panel:#fffaf3;--panel2:#f3ebdf;--linea:rgba(40,24,10,.10);--linea2:rgba(40,24,10,.18);
  --tinta:#1d1712;--tinta2:#5d5249;--tinta3:#8d8177;--naranja:#e85a0c;--naranja2:#c2510f;--verde:#16935a;--azul:#2f6fb6;
  --amarillo:#a66a00;--rojo:#c2273d;
  --velo:rgba(247,241,232,.78);--brillo:rgba(255,255,255,.7);--brillo2:rgba(255,255,255,.35);
  --lienzo-caja:rgba(255,250,243,.96);--lienzo-borde:rgba(40,24,10,.18);--lienzo-texto:#1d1712;--lienzo-chip:#8a3a08;
  --lienzo-rejilla:rgba(40,24,10,.05);
  --acento-suave:#fde6d6;--acento-tinta:#a8450c;--peligro-texto:#fff;--ok:#0f7a52;--ok-suave:#e3f3ea;--alerta:#9a5b00;--alerta-suave:#fbf0dc;
  --peligro-suave:#fde8eb;--info:#245d9c;--info-suave:#e6eef8;
  --sombra:0 1px 2px rgba(60,30,10,.06),0 4px 16px rgba(60,30,10,.07);--sombra-grande:0 20px 50px rgba(60,30,10,.12);
  --katito-filtro:none;
  color-scheme:light;
}
@media (prefers-color-scheme: light){
  :root.privada:not([data-tema]){
    --bg:#f7f1e8;--bg2:#efe7db;--panel:#fffaf3;--panel2:#f3ebdf;--linea:rgba(40,24,10,.10);--linea2:rgba(40,24,10,.18);
    --tinta:#1d1712;--tinta2:#5d5249;--tinta3:#8d8177;--naranja:#e85a0c;--naranja2:#c2510f;--verde:#16935a;--azul:#2f6fb6;
    --amarillo:#a66a00;--rojo:#c2273d;
    --velo:rgba(247,241,232,.78);--brillo:rgba(255,255,255,.7);--brillo2:rgba(255,255,255,.35);
    --acento-suave:#fde6d6;--acento-tinta:#a8450c;--peligro-texto:#fff;--ok:#0f7a52;--ok-suave:#e3f3ea;--alerta:#9a5b00;--alerta-suave:#fbf0dc;
    --peligro-suave:#fde8eb;--info:#245d9c;--info-suave:#e6eef8;
    --sombra:0 1px 2px rgba(60,30,10,.06),0 4px 16px rgba(60,30,10,.07);--sombra-grande:0 20px 50px rgba(60,30,10,.12);
    --katito-filtro:none;
    color-scheme:light;
  }
}

/* Las constantes de las ilustraciones de la zona pública, iguales en oscuro y en claro: el fondo vivo con los colores
   de la marca, la terminal y la ventana de ejemplo, el teléfono y el programa claro que se dibuja dentro de la escena.
   Y los canales de los colores que las hojas usan con transparencia: rgba(var(--naranja-rgb),.12). */
:root{
  --negro:#000;--blanco:#fff;
  --marca-naranja:#ff6a1a;--marca-naranja2:#ffb27a;--marca-azul:#6cb8ff;--marca-verde:#38d980;
  --semaforo-rojo:#ff5f57;--semaforo-amarillo:#febc2e;--semaforo-verde:#28c840;--semaforo-apagado:#333;
  --ventana-boton:#2a2a30;--telefono-marco:#1c1c21;--telefono-marco-claro:#2a2420;--grabando:#e5484d;
  --app-fondo:#fafaf7;--app-fondo2:#faf6f0;--app-tinta:#111;--app-tinta2:#666;--app-tinta3:#777;--app-tinta4:#999;
  --app-linea:#eee;--app-borde:#ecebe6;--app-chip:#f0efe9;--app-naranja-suave:#ffe9d9;--app-ok-fondo:#e8f8ee;
  --app-ok:#1b7f44;--app-info-fondo:#e6f4ff;--app-info:#1565c0;--app-aviso-fondo:#fff3cd;--app-aviso:#8a6100;
  --app-ia-fondo:#fff3ea;--app-ia-borde:#ffd9c2;
  --naranja-rgb:255,106,26;--blanco-rgb:255,255,255;--negro-rgb:0,0,0;--verde-rgb:56,217,128;--azul-rgb:108,184,255;
  --amarillo-rgb:255,209,102;--cafe-rgb:60,30,10;
}