/**
 * apside-tokens.css — Design tokens de Apside
 * VERSIÓN 1.3 (31-jul-2026) · dueño: Sebastián Vega · reglas de cambio: GOBERNANZA.md
 * Los proyectos COPIAN este archivo (no lo enlazan): un cambio MAYOR no se propaga solo —
 * ver CHANGELOG.md y avisar a los consumidores listados ahí.
 * ============================================================================
 * FUENTE DE VERDAD del estilo visual de Apside. Se usa en apside.cl, en las
 * landings de campaña y en cualquier producto digital nuevo.
 *
 * ⚠️ REGLA: ningún componente escribe un color, tamaño o radio "a mano". Todo sale de una
 * variable de este archivo. Si falta una variable, se agrega ACÁ y se documenta — no se
 * inventa un valor suelto en el componente. Ese fue exactamente el error del 29-jul-2026:
 * las secciones nuevas de la home se construyeron con una paleta gris-azulada y roja
 * (#13182c, #5b6478, #c1272d) que no existe en la marca, y se notó a simple vista.
 *
 * PROCEDENCIA: los valores NO son invención. Se extrajeron de los estilos computados del
 * sitio en producción (Poppins/Open Sans, botón #9200ff pill, gradiente del hero, escala
 * tipográfica). Lo que se agregó es lo que FALTABA: escala de espaciado, grises con
 * contraste AA verificado, radios, sombras y estados.
 */

/* ─── Fuentes auto-hospedadas ────────────────────────────────────────────────
   Las mismas de apside.cl. Van EN el kit (assets/fonts/) a propósito: sin esto,
   quien abra el catálogo sin tener Poppins instalada lo vería con otra tipografía
   y creería que el sistema se ve así. Sin Google Fonts: cero llamadas a terceros.
   Las rutas son relativas a este archivo CSS. */
@font-face { font-family: 'Poppins'; src: url('../assets/fonts/poppins-400.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Poppins'; src: url('../assets/fonts/poppins-500.woff2') format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Poppins'; src: url('../assets/fonts/poppins-600.woff2') format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Poppins'; src: url('../assets/fonts/poppins-700.woff2') format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Poppins'; src: url('../assets/fonts/poppins-800.woff2') format('woff2'); font-weight: 800; font-display: swap; }
@font-face { font-family: 'Open Sans'; src: url('../assets/fonts/open-sans.woff2') format('woff2'); font-weight: 400 700; font-display: swap; }

:root {
  /* ─── Marca ─────────────────────────────────────────────────────────────
     El morado es la identidad. `--ap-violeta` es el color de acción (botones,
     enlaces, acentos); los oscuros construyen los fondos de sección. */
  --ap-violeta: #9200ff;          /* Acción. Extraído del botón primario real */
  --ap-violeta-vivo: #9b00ff;     /* Acento/hover, el más usado del CSS de plantilla */
  --ap-violeta-profundo: #500096; /* Cierre de los gradientes */
  --ap-noche: #000717;            /* Inicio de los gradientes; fondo más oscuro */
  --ap-noche-2: #1c024c;          /* Violeta muy oscuro intermedio */
  --ap-cian: #47fee8;             /* Acento secundario. Úsese con cuidado: solo destaques */

  /* Gradientes de marca (los dos que ya existen en el sitio; no crear más) */
  --ap-grad-hero: linear-gradient(101.61deg, var(--ap-noche) 3.52%, var(--ap-violeta-profundo) 97.73%);
  --ap-grad-seccion: linear-gradient(90deg, var(--ap-noche), var(--ap-violeta-profundo));

  /* ─── Neutros ───────────────────────────────────────────────────────────
     Grises NEUTROS (no azulados): el sitio usa la familia #737373/#262626.
     Contraste verificado sobre blanco — el valor entre paréntesis es la ratio. */
  --ap-tinta: #262626;            /* Títulos sobre claro (12.6:1) */
  --ap-texto: #4a4a4a;            /* Cuerpo sobre claro (8.9:1) — AA holgado */
  --ap-texto-suave: #6e6e6e;      /* Secundario. v1.3: era #737373, que daba 4.43:1 sobre el
                                     fondo de página #f7f7f8 — bajo AA. #6e6e6e da 4.76:1 ahí
                                     y 5.10:1 sobre blanco. Cambio de 5 puntos de luminosidad:
                                     sin efecto visible, con efecto medible. */
  --ap-linea: #e5e5e5;            /* Bordes y separadores */
  --ap-superficie: #f7f7f8;       /* Fondo de sección clara alterna. v1.3: es el MISMO valor que
                                     --ap-fondo del tema claro. Se conserva el nombre para no
                                     romper los componentes v1.2, pero lo nuevo usa --ap-fondo. */
  --ap-blanco: #ffffff;           /* Blanco LITERAL. ⚠️ NO es el fondo de página de ningún tema:
                                     como fondo de una tarjeta usa --ap-sup-1, que sí cambia
                                     con el tema. Ver la capa de temas más abajo. */

  /* Sobre fondo oscuro */
  --ap-sobre-oscuro: #ffffff;
  --ap-sobre-oscuro-suave: rgba(255, 255, 255, 0.72); /* 8.1:1 sobre --ap-noche */
  --ap-linea-oscura: rgba(255, 255, 255, 0.16);

  /* ─── Semánticos ────────────────────────────────────────────────────────
     Solo para estado (éxito/error/aviso), NUNCA para decorar. El rojo NO es
     color de marca: usarlo como acento (como se hizo mal en la home) rompe la identidad. */
  --ap-exito: #1e7f4f;
  --ap-error: #b3191f;            /* 6.8:1 sobre blanco */
  --ap-aviso: #9a6700;

  /* ─── Tipografía ────────────────────────────────────────────────────────
     Poppins para títulos y UI; Open Sans para cuerpo. Ambas auto-hospedadas. */
  --ap-fuente-titulo: 'Poppins', sans-serif;
  --ap-fuente-cuerpo: 'Open Sans', sans-serif;

  /* Escala tipográfica (razón ~1.25). Los `clamp` hacen el responsive sin media queries. */
  --ap-txt-xs: 0.8125rem;   /* 13px — etiquetas, pies */
  --ap-txt-sm: 0.875rem;    /* 14px */
  --ap-txt-base: 1rem;      /* 16px — cuerpo */
  --ap-txt-lg: 1.125rem;    /* 18px — bajadas */
  --ap-txt-xl: clamp(1.25rem, 1.6vw, 1.5rem);    /* h3 */
  --ap-txt-2xl: clamp(1.5rem, 2.4vw, 2rem);      /* h2 de bloque */
  --ap-txt-3xl: clamp(1.875rem, 3.2vw, 2.5rem);  /* h2 de sección */
  --ap-txt-4xl: clamp(2rem, 4vw, 3rem);          /* h1 */

  --ap-peso-normal: 400;
  --ap-peso-medio: 500;
  --ap-peso-semi: 600;
  --ap-peso-bold: 700;
  --ap-peso-black: 800;

  --ap-alto-titulo: 1.15;
  --ap-alto-cuerpo: 1.75;   /* 28/16 del sitio real */

  /* ─── Espaciado (escala de 4px) ─────────────────────────────────────────
     Ritmo vertical único. Antes cada sección inventaba su padding y la página
     terminaba con 8 pantallas de scroll para 690 palabras. */
  --ap-e1: 0.25rem;
  --ap-e2: 0.5rem;
  --ap-e3: 0.75rem;
  --ap-e4: 1rem;
  --ap-e6: 1.5rem;
  --ap-e8: 2rem;
  --ap-e12: 3rem;
  --ap-e16: 4rem;
  --ap-e20: 5rem;

  /* Aire vertical de una sección: la MISMA para todas, salvo excepción justificada. */
  --ap-seccion-y: clamp(3rem, 6vw, 5rem);
  --ap-contenido-max: 46rem;   /* Ancho de lectura cómodo (~75 caracteres) */

  /* ─── Formas ────────────────────────────────────────────────────────────*/
  --ap-radio-sm: 0.5rem;
  --ap-radio: 0.75rem;
  --ap-radio-lg: 1rem;
  --ap-radio-pill: 800px;      /* El botón del sitio ya es pill */

  --ap-sombra-sm: 0 1px 4px rgba(0, 7, 23, 0.06);
  --ap-sombra: 0 2px 16px rgba(0, 7, 23, 0.08);
  --ap-sombra-lg: 0 8px 32px rgba(0, 7, 23, 0.12);

  /* ─── Movimiento ────────────────────────────────────────────────────────*/
  --ap-transicion: 160ms ease;
  /* Anillo de foco. ⚠️ v1.3 corrige un defecto real: el valor v1.2 (alpha .45) daba 2.38:1 sobre
     blanco y 1.49:1 sobre --ap-noche, cuando WCAG 2.2 (1.4.11) exige 3:1. El comentario original
     decía "visible en ambos fondos" y nunca se había medido sobre oscuro porque no había tema
     oscuro. Con alpha .65 da 3.55:1 sobre blanco y 3.43:1 sobre el fondo de página.
     El foco de los temas oscuro y marca se redefine en la capa de temas (violeta plano no alcanza). */
  --ap-foco: 0 0 0 3px rgba(146, 0, 255, 0.65);

  /* ─── Layout y responsive (v1.0) ────────────────────────────────────────
     Antes cada componente inventaba su propio grid y sus quiebres. Estos son LOS
     puntos de quiebre del sistema: no se inventan otros.
     ⚠️ En CSS las media queries NO leen variables (`@media (min-width: var(--x))` no
     funciona): los valores van literales en la consulta. Estas variables existen para
     documentarlos, para JS y para `container-type` donde aplique. */
  --ap-bp-movil: 30rem;      /* 480px — móvil grande */
  --ap-bp-tablet: 48rem;     /* 768px — tablet / 1 columna → 2 */
  --ap-bp-desktop: 62rem;    /* 992px — el quiebre principal del sistema */
  --ap-bp-ancho: 75rem;      /* 1200px — pantallas anchas */

  --ap-contenedor: 68rem;    /* Ancho máximo de página (el de los previews) */
  --ap-contenedor-app: 90rem;/* Apps: aprovechan más ancho que el marketing */
  --ap-canal: var(--ap-e6);  /* Separación estándar entre columnas de un grid */

  /* ─── Tamaños de control (v1.0) ─────────────────────────────────────────
     Altura mínima de un objetivo táctil: 44px (--ap-control) en todo lo que se
     toque con el dedo. El tamaño chico es SOLO para tablas densas de apps, donde
     se opera con mouse y teclado. */
  --ap-control-sm: 2rem;     /* 32px — tablas densas, filtros de app */
  --ap-control: 2.75rem;     /* 44px — el estándar: botones, inputs */
  --ap-control-lg: 3.25rem;  /* 52px — CTA principal de una landing */
}

/* ═══════════════════════════════════════════════════════════════════════════
   CAPA DE TEMAS (v1.3 — 31-jul-2026)
   ═══════════════════════════════════════════════════════════════════════════
   POR QUÉ EXISTE: hasta la v1.2 el sistema declaraba colores de marca, de texto y de
   superficie, pero NUNCA decía sobre qué fondo vive una pantalla. Quien lo usaba elegía
   blanco por defecto y quedaba plano; y quien necesitaba oscuro tenía que forkear el kit.
   Pasó de verdad dos veces: `informe.apside.io` tiene panel oscuro propio, y la bandeja de
   `whatsapp` (repos/canal) se fue a oscuro inventando 6 tokens que este archivo no tenía.
   Con dos consumidores pidiendo lo mismo, por la "regla de dos" de GOBERNANZA.md sube al sistema.

   LA REGLA: el fondo NO se elige componente por componente. Se elige un TEMA en el <html>,
   y el tema define fondo, superficies, texto, acción, semánticos, elevación y foco.

       <html data-tema="claro">    producto y trabajo — el DEFECTO
       <html data-tema="oscuro">   operación continua (bandejas, paneles, monitoreo)
       <html data-tema="marca">    momentos de identidad (hero, login, portada) sobre el gradiente
       <html data-tema="auto">     sigue al sistema operativo: claro, u oscuro si el SO está oscuro

   Sin atributo = tema claro. Así ningún proyecto v1.2 cambia de aspecto al actualizar.

   CÓMO SE CONSTRUYE CON ESTO: un componente usa los tokens SEMÁNTICOS de abajo
   (--ap-fondo, --ap-sup-1, --ap-sup-2, --ap-borde, --ap-accion, --ap-elevacion…) y así
   funciona en los tres temas sin escribir una sola media query.

   ⚠️ LO QUE NO SE PUEDE HACER: pintar una tarjeta con `background: var(--ap-blanco)`.
   Eso es blanco literal y en tema oscuro queda un rectángulo blanco. Se usa --ap-sup-1.

   LA ELEVACIÓN NO SE HACE IGUAL EN LOS TRES TEMAS (medido, no opinado):
     · claro  → borde + sombra. Ningún fondo de página separa una tarjeta blanca por luminancia
                (el máximo alcanzable es 1.15:1 y a ese punto el texto secundario ya baja de AA).
     · oscuro → velo blanco + borde. Una sombra negra sobre #000717 es invisible: no existe
                nada más oscuro que el fondo.
     · marca  → velo translúcido sobre el gradiente.

   CONTRASTES: todos los pares texto/fondo de los tres temas están validados AA (≥4.5:1) con
   el script `tokens/validar-contraste.py`. Correrlo antes de tocar cualquier valor de acá.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── Paleta OSCURA: los valores viven una sola vez, acá ──────────────────────
   Derivada del negro de marca (--ap-noche) con velos blancos, NO copiada del panel de
   informe.apside.io: ese es gris azulado (#1a2b4a), justo lo que la regla 3 prohíbe.
   Los semánticos y el violeta necesitan variante clara porque los del tema claro NO llegan
   a AA sobre #000717 — medido: violeta 3.52:1 · error 2.95:1 · éxito 4.03:1 · aviso 4.14:1. */
:root {
  --apx-fondo-osc: #000717;                    /* = --ap-noche */
  --apx-sup1-osc: #0b1221;                     /* velo blanco 4.5% */
  --apx-sup2-osc: #161c2b;                     /* velo blanco 8.5% */
  --apx-borde-osc: rgba(255, 255, 255, 0.16);
  --apx-borde-fuerte-osc: rgba(255, 255, 255, 0.24);
  --apx-tinta-osc: #ffffff;                    /* 20.1:1 sobre el fondo */
  --apx-texto-osc: rgba(255, 255, 255, 0.86);  /* 14.7:1 */
  --apx-suave-osc: rgba(255, 255, 255, 0.66);  /*  8.7:1 */
  --apx-accion-osc: #b46bff;                   /*  6.2:1 — el violeta de marca no alcanza */
  --apx-exito-osc: #4ade80;                    /* 11.6:1 */
  --apx-error-osc: #ff6b6b;                    /*  7.3:1 */
  --apx-aviso-osc: #fbbf24;                    /* 12.1:1 */
  --apx-foco-osc: 0 0 0 3px rgba(180, 107, 255, 0.75); /* 3.88:1 — cumple 1.4.11 */
  --apx-elev-osc: 0 0 0 1px rgba(255, 255, 255, 0.08); /* la elevación es velo, no sombra */
}

/* ─── TEMA CLARO — el defecto ────────────────────────────────────────────────
   Producto, trabajo, lectura larga, formularios, tablas, landings de contenido.
   El fondo de página NO es blanco puro: el blanco es la superficie ELEVADA (la tarjeta).
   Todo en la misma luminancia es exactamente lo que se ve "plano". */
:root,
[data-tema="claro"] {
  --ap-fondo: #f7f7f8;              /* página */
  --ap-fondo-imagen: none;          /* solo el tema marca lo usa */
  --ap-sup-1: #ffffff;              /* tarjeta, modal, barra: la superficie elevada */
  --ap-sup-2: #f7f7f8;              /* hundido DENTRO de sup-1: cabecera de tabla, bloque de código */
  --ap-borde: #e5e5e5;
  --ap-borde-fuerte: #d4d4d4;       /* cuando el borde es lo único que separa */
  --ap-txt-fuerte: #262626;         /* títulos — 14.5:1 sobre el fondo */
  --ap-txt: #4a4a4a;                /* cuerpo  —  8.5:1 */
  --ap-txt-suave: #6e6e6e;          /* secundario — 4.76:1 */
  --ap-accion: #9200ff;             /* 5.49:1 */
  --ap-accion-hover: #9b00ff;
  --ap-accion-sobre: #ffffff;       /* el texto que va ENCIMA de --ap-accion */
  --ap-elevacion: 0 1px 4px rgba(0, 7, 23, 0.06);
  --ap-elevacion-alta: 0 8px 32px rgba(0, 7, 23, 0.12);
}

/* ─── TEMA OSCURO — operación continua ───────────────────────────────────────
   Bandejas, paneles y monitoreo: pantallas que alguien mira muchas horas o de noche.
   NO es "la versión nocturna de todo": una landing de campaña no se pone oscura porque sí,
   para eso está el tema marca. */
[data-tema="oscuro"] {
  --ap-fondo: var(--apx-fondo-osc);
  --ap-fondo-imagen: none;
  --ap-sup-1: var(--apx-sup1-osc);
  --ap-sup-2: var(--apx-sup2-osc);
  --ap-borde: var(--apx-borde-osc);
  --ap-borde-fuerte: var(--apx-borde-fuerte-osc);
  --ap-txt-fuerte: var(--apx-tinta-osc);
  --ap-txt: var(--apx-texto-osc);
  --ap-txt-suave: var(--apx-suave-osc);
  --ap-accion: var(--apx-accion-osc);
  --ap-accion-hover: #c48cff;
  --ap-accion-sobre: var(--apx-fondo-osc); /* texto oscuro sobre el violeta claro */
  --ap-elevacion: var(--apx-elev-osc);
  --ap-elevacion-alta: 0 0 0 1px rgba(255, 255, 255, 0.12), 0 16px 40px rgba(0, 0, 0, 0.6);
  --ap-foco: var(--apx-foco-osc);

  /* Alias v1.2 remapeados: con esto los componentes ya escritos se adaptan solos,
     sin tocar su CSS. Es la razón de que la migración a tema oscuro sea barata. */
  --ap-tinta: var(--apx-tinta-osc);
  --ap-texto: var(--apx-texto-osc);
  --ap-texto-suave: var(--apx-suave-osc);
  --ap-linea: var(--apx-borde-osc);
  --ap-superficie: var(--apx-sup2-osc);
  --ap-exito: var(--apx-exito-osc);
  --ap-error: var(--apx-error-osc);
  --ap-aviso: var(--apx-aviso-osc);
  --ap-sombra-sm: var(--apx-elev-osc);
  --ap-sombra: var(--apx-elev-osc);
  --ap-sombra-lg: 0 0 0 1px rgba(255, 255, 255, 0.12), 0 16px 40px rgba(0, 0, 0, 0.6);
}

/* ─── TEMA MARCA — momentos de identidad ─────────────────────────────────────
   Hero, login, portada, invitación, one-pager. Vive sobre el gradiente de marca, así que
   TODO se valida contra sus dos extremos (#000717 y #500096) y manda el peor.
   ⛔ Prohibido como texto acá: --ap-violeta (3.5:1) y el violeta claro del tema oscuro
      (3.2:1 sobre el extremo violeta). La acción sobre el gradiente es BLANCA.
   ⛔ No lleva estados ni badges: si la pantalla necesita comunicar el estado de un registro,
      es una pantalla de trabajo → tema claro u oscuro. */
[data-tema="marca"] {
  --ap-fondo: var(--ap-noche);
  --ap-fondo-imagen: var(--ap-grad-hero);
  --ap-sup-1: rgba(255, 255, 255, 0.07);
  --ap-sup-2: rgba(255, 255, 255, 0.12);
  --ap-borde: rgba(255, 255, 255, 0.20);
  --ap-borde-fuerte: rgba(255, 255, 255, 0.32);
  --ap-txt-fuerte: #ffffff;                     /* 11.8:1 en el peor extremo */
  --ap-txt: rgba(255, 255, 255, 0.86);          /*  8.6:1 */
  --ap-txt-suave: rgba(255, 255, 255, 0.72);    /*  6.5:1 — no bajar de .72 acá */
  --ap-accion: #ffffff;
  --ap-accion-hover: rgba(255, 255, 255, 0.88);
  --ap-accion-sobre: var(--ap-noche);
  --ap-elevacion: 0 0 0 1px rgba(255, 255, 255, 0.10);
  --ap-elevacion-alta: 0 16px 48px rgba(0, 0, 0, 0.45);
  --ap-foco: 0 0 0 3px rgba(255, 255, 255, 0.75);

  --ap-tinta: #ffffff;
  --ap-texto: rgba(255, 255, 255, 0.86);
  --ap-texto-suave: rgba(255, 255, 255, 0.72);
  --ap-linea: rgba(255, 255, 255, 0.20);
}

/* ─── TEMA AUTO — sigue al sistema operativo ─────────────────────────────────
   Solo actúa si la página lo pide con data-tema="auto". Deliberado: si el oscuro se activara
   solo, cada landing y cada informe ya publicado cambiaría de aspecto al copiar esta versión.
   La lista de abajo repite los NOMBRES del bloque oscuro (CSS no permite reutilizar un bloque
   de declaraciones), pero los VALORES siguen viviendo una sola vez, en --apx-*. */
@media (prefers-color-scheme: dark) {
  [data-tema="auto"] {
    --ap-fondo: var(--apx-fondo-osc);
    --ap-sup-1: var(--apx-sup1-osc);
    --ap-sup-2: var(--apx-sup2-osc);
    --ap-borde: var(--apx-borde-osc);
    --ap-borde-fuerte: var(--apx-borde-fuerte-osc);
    --ap-txt-fuerte: var(--apx-tinta-osc);
    --ap-txt: var(--apx-texto-osc);
    --ap-txt-suave: var(--apx-suave-osc);
    --ap-accion: var(--apx-accion-osc);
    --ap-accion-hover: #c48cff;
    --ap-accion-sobre: var(--apx-fondo-osc);
    --ap-elevacion: var(--apx-elev-osc);
    --ap-elevacion-alta: 0 0 0 1px rgba(255, 255, 255, 0.12), 0 16px 40px rgba(0, 0, 0, 0.6);
    --ap-foco: var(--apx-foco-osc);
    --ap-tinta: var(--apx-tinta-osc);
    --ap-texto: var(--apx-texto-osc);
    --ap-texto-suave: var(--apx-suave-osc);
    --ap-linea: var(--apx-borde-osc);
    --ap-superficie: var(--apx-sup2-osc);
    --ap-exito: var(--apx-exito-osc);
    --ap-error: var(--apx-error-osc);
    --ap-aviso: var(--apx-aviso-osc);
    --ap-sombra-sm: var(--apx-elev-osc);
    --ap-sombra: var(--apx-elev-osc);
    --ap-sombra-lg: 0 0 0 1px rgba(255, 255, 255, 0.12), 0 16px 40px rgba(0, 0, 0, 0.6);
  }
}

/* Aplicar el tema al documento. Una sola regla: el fondo de la página sale del tema,
   nunca de una hoja de estilos de proyecto. */
body {
  background-color: var(--ap-fondo);
  background-image: var(--ap-fondo-imagen);
  background-attachment: fixed;
  color: var(--ap-txt);
}

/* Respeta a quien pide menos movimiento: obligatorio, no opcional. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --ap-transicion: 0ms;
  }
}