/* ============================================================
   Atalaya · Tokens del sistema de diseño (prefijo --at-)
   ------------------------------------------------------------
   Fuente de verdad de colores, radios, sombras, tipografía y
   movimiento de la interfaz, en sus dos temas: el oscuro (por
   defecto) y el claro (<html data-tema="claro">), que es el
   mismo diseño en tonos claros. Los valores del oscuro son los
   del prototipo aprobado (docs/prototipo/atalaya-prototipo.html)
   y los contrastes AA medidos en P3 §9.3. Los del claro se
   midieron con el mismo criterio (texto ≥ 4,5:1, también sobre
   los halos del fondo; campos, filetes de activo e interruptor
   ≥ 3:1).

   - La interfaz carga este archivo + ui.css. El prefijo --at- no
     choca con las variables viejas de las páginas (--bg, --line,
     --muted…): las redefine con estos tokens la capa puente de
     ui.css.
   - El tema solo cambia tokens: ui.css no tiene colores por tema.
     Un color nuevo que tenga que cambiar con el tema es un token
     acá, con su valor en los dos bloques.
   - La v2 (web/) lo reutiliza tal cual: no poner acá nada que
     dependa del PHP.
   - Zonas: Cartera (teal, por defecto), Personas (lima) y
     Configuración (neutro). Se cambian con [data-zona] en cualquier
     contenedor; todo lo que está adentro toma el acento.
   - Regla: teal y lima son SOLO estructura (menú, rótulos, activo,
     primario). Los estados usan ok / warn / bad / info / violet.
   - Orden: oscuro (:root y zonas) → claro (solo en pantalla) →
     impresión (siempre en claro, con cualquier tema).
   ============================================================ */

:root{
  color-scheme:dark;

  /* ── Fondos y superficies ── */
  --at-bg:#0c0c11; --at-surface:#17171f; --at-surface-2:#1f1f29; --at-surface-3:#282834;
  --at-surface-pop:#1c1c25;   /* desplegables: .pop al 90 %, .ficha-nav al 92 %, .search-res al 96 % (color-mix con transparent) */
  --at-glass:rgba(23,23,31,.72); --at-overlay:rgba(5,5,8,.62);
  /* Fondo de la página y de la franja de arriba de la barra: un halo teal arriba a la izquierda y uno periwinkle abajo a la derecha */
  --at-halos:
    radial-gradient(900px 600px at -8% -12%, rgba(45,212,191,.07), transparent 62%),
    radial-gradient(900px 700px at 108% 112%, rgba(143,155,255,.05), transparent 62%);

  /* ── Bordes (38 % en campos: AA 1.4.11) y velos ── */
  --at-line:rgba(255,255,255,.07); --at-line-2:rgba(255,255,255,.12);
  --at-line-field:rgba(255,255,255,.38); --at-highlight:rgba(255,255,255,.05);
  --at-line-activo:rgba(255,255,255,.36);   /* filete del activo en Configuración, donde el de la zona no llega a 3:1 */
  /* La tinta de los velos, en canales: rgba(var(--at-tinta-rgb),α) es el rgba(255,255,255,α) de siempre (en un
     color-mix, rgb(var(--at-tinta-rgb))). Va en canales y no en hex para que el velo siga siendo un rgba() clásico:
     así los degradés se siguen interpolando en sRGB y el oscuro queda idéntico píxel a píxel. */
  --at-tinta-rgb:255,255,255; --at-neutral-tint:rgba(255,255,255,.08);   /* el tinte del tono neutro (.badge, .nav-count…) */

  /* ── Texto ── */
  --at-text:#f1f1f5; --at-text-2:#c2c2cf; --at-muted:#9696a8; --at-hint:#8585a0;

  /* ── Estados (texto · tinte · borde) ── */
  --at-ok:#4ade80; --at-ok-tint:rgba(74,222,128,.14); --at-ok-line:rgba(74,222,128,.32);
  --at-warn:#facc15; --at-warn-tint:rgba(250,204,21,.14); --at-warn-line:rgba(250,204,21,.30);
  --at-bad:#f87171; --at-bad-text:#fca5a5; --at-bad-tint:rgba(248,113,113,.14); --at-bad-line:rgba(248,113,113,.34);
  --at-info:#8f9bff; --at-info-tint:rgba(32,52,232,.28); --at-info-line:rgba(143,155,255,.34);
  --at-info-tint-soft:rgba(143,155,255,.12);   /* el tinte suave (los badges y los fondos azules de las páginas viejas) */
  --at-violet:#c4b5fd; --at-violet-tint:rgba(167,139,250,.16); --at-violet-line:rgba(167,139,250,.34);
  /* Analista con pocas cuentas (Resumen operativo, "Cuentas por analista / célula"): un naranja propio, no un estado */
  --at-carga-baja:#ea700b;
  --at-ok-tint-2:rgba(74,222,128,.22); --at-bad-tint-2:rgba(248,113,113,.22);   /* un paso más fuerte: hover de .btn-success y .btn-danger */

  /* ── Marca: el azul Caissa es identidad (isotipo, login, correos), no color de texto ── */
  --at-brand:#2034e8; --at-brand-300:#8f9bff; --at-brand-glow:#5f6dff;

  /* ── Forma, sombra, brillo ── */
  --at-r-xs:8px; --at-r-sm:12px; --at-r-md:16px; --at-r-lg:22px; --at-r-xl:28px; --at-pill:999px;
  --at-shadow-card:inset 0 1px 0 var(--at-highlight), 0 24px 48px -24px rgba(0,0,0,.65);
  --at-shadow-pop:inset 0 1px 0 rgba(255,255,255,.06), 0 30px 60px -20px rgba(0,0,0,.75);
  --at-grad-card:linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,0) 40%);
  --at-blur:saturate(140%) blur(16px);
  --at-hoja-sombra:none;   /* canto de la hoja clara de documentos y de la pieza del correo (en claro, la separa de la tarjeta) */

  /* ── Piezas con color propio ── */
  --at-av-a:#30303e; --at-av-b:#23232e;   /* avatar con iniciales (degradé de arriba a abajo) */
  --at-dyn-mezcla:55%;                    /* .badge-dyn: color-mix(in srgb,var(--c) var(--at-dyn-mezcla),rgb(var(--at-tinta-rgb))) */
  --at-dyn-borde:transparent;             /* .badge-dyn: el borde es el color de la BD al 36 % con esto (en claro, la tinta) */
  --at-anillo-dato:none;                  /* canto de los puntos con el color de la BD (.dot): en claro, separa los pálidos del fondo */
  --at-google-borde:#dadce0;              /* filete del botón de Google (en claro, el #747775 de su guía para fondo claro) */

  /* ── Lo que se apoya en el fondo de la página (no en una tarjeta). En oscuro es lo de siempre: un paso más claro que el
     fondo. En claro, surface-3 queda más oscuro que el fondo y un tinte, compuesto con el lavanda, se ensucia: ahí van un
     paso más claros que el fondo, y los avisos, del mismo color que dentro de una tarjeta. ── */
  --at-sobre-fondo:var(--at-surface-3);   /* .btn-secondary del encabezado de la página */
  --at-barra-fondo:var(--at-surface-2);   /* .tabs y .subtabs sueltas en el contenido */
  --at-aviso-ok:var(--at-ok-tint); --at-aviso-warn:var(--at-warn-tint);   /* alertas y flash sueltos */
  --at-aviso-bad:var(--at-bad-tint); --at-aviso-info:var(--at-info-tint);

  /* ── Texto atenuado con opacidad: en claro, la misma opacidad le saca más contraste (un rótulo de badge al .8 queda en
     3,4:1, y en oscuro no baja de 5), así que ahí sube hasta dar lo del oscuro o pasar AA ── */
  --at-op-rotulo:.8;     /* .badge-lbl ("ONBOARDING TÉCNICO", "ÚLTIMA AUDITORÍA") */
  --at-op-numero:.85;    /* .tab-n de la pestaña activa */
  --at-op-tm:.6;         /* la ™ del logotipo */
  --at-op-inactivo:.5;   /* lo inactivo: los clientes dados de baja (en el teléfono, +.1) y los miembros de otra célula */

  /* ── Tipografía ── */
  --at-font:'Manrope', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --at-font-num:var(--at-font);

  /* ── Movimiento ── */
  --at-ease:cubic-bezier(.2,.7,.2,1); --at-t-fast:120ms; --at-t:180ms;

  /* ── Saldo de vacaciones: rampa ordinal de un solo tono (validada) ── */
  --saldo-1:#648510; --saldo-2:#94bf1f; --saldo-3:#c8f652;

  /* ── Agregados de P3 §9.3 (no estaban en el prototipo) ── */
  /* Colores de datos, en orden categórico. --at-d-null solo para "sin dato", nunca como texto. */
  --at-d1:#2dd4bf; --at-d2:#22c55e; --at-d3:#c3f53c; --at-d4:#facc15; --at-d5:#f1f1f5; --at-d6:#8f9bff; --at-d7:#f87171; --at-d-null:#64748b;
  /* Medidas del layout */
  --at-sidebar-w:264px; --at-sidebar-w-min:76px; --at-topbar-h:64px; --at-content-max:1440px;
  /* Contorno de foco: teal de 2 px en todas las zonas (9,6:1) */
  --at-focus:#2dd4bf;
}

/* ── Zonas ──
   Cartera es la zona por defecto (:root). También se declara con [data-zona="clientes"] para
   que un elemento de Cartera anidado dentro de Personas (un chip "Célula Norte", por ejemplo)
   recupere el teal: las custom properties se heredan de la zona más cercana.
   Tercera línea de cada zona: --at-zona-tint-2 es el tinte un paso más fuerte (hover de .btn-zona);
   --at-zona-vivo, el color de marca de la zona en los rellenos (.side-card, el interruptor prendido y la barra
   de progreso, con --at-on-zona encima), y --at-canto-relleno, el canto de esos rellenos. En oscuro --at-zona-vivo
   vale lo mismo que --at-zona y el canto no se ve; en claro --at-zona pasa a ser un tono de texto, el relleno sigue
   vivo y el canto, en el tono de texto de la zona, lo separa de la superficie clara. */
:root, [data-zona="clientes"]{
  --at-zona:#2dd4bf; --at-zona-300:#5eead4; --at-zona-tint:rgba(45,212,191,.16); --at-zona-line:rgba(45,212,191,.35);
  --at-zona-glow:rgba(45,212,191,.45); --at-zona-a:#34dcc6; --at-zona-b:#1fb9a6; --at-on-zona:#03211d; --at-tree:rgba(45,212,191,.30);
  --at-zona-tint-2:rgba(45,212,191,.22); --at-zona-vivo:#2dd4bf; --at-canto-relleno:transparent;
}
[data-zona="personas"]{
  --at-zona:#c3f53c; --at-zona-300:#d9fa84; --at-zona-tint:rgba(195,245,60,.14); --at-zona-line:rgba(195,245,60,.32);
  --at-zona-glow:rgba(195,245,60,.35); --at-zona-a:#d4fb66; --at-zona-b:#b5ea2a; --at-on-zona:#141c00; --at-tree:rgba(195,245,60,.26);
  --at-zona-tint-2:rgba(195,245,60,.22); --at-zona-vivo:#c3f53c; --at-canto-relleno:transparent;
}
[data-zona="config"]{
  --at-zona:#c2c2cf; --at-zona-300:#f1f1f5; --at-zona-tint:rgba(255,255,255,.08); --at-zona-line:rgba(255,255,255,.18);
  --at-zona-glow:rgba(255,255,255,.18); --at-zona-a:#d4d4de; --at-zona-b:#b4b4c2; --at-on-zona:#0c0c11; --at-tree:rgba(255,255,255,.14);
  --at-zona-tint-2:rgba(194,194,207,.22); --at-zona-vivo:#c2c2cf; --at-canto-relleno:transparent;
}

/* ── Tema claro: <html data-tema="claro"> ──
   El mismo diseño en tonos claros: las mismas capas (la tarjeta es la más clara y lo de adentro baja un
   paso, con la misma distancia perceptual que en oscuro), el mismo tono violeta en los neutros, los mismos
   colores de base en tintes, halos y primario; texto, rótulos y filetes van en el tono oscuro del mismo
   matiz. La tinta de los velos y las líneas es #18182e (--at-tinta-rgb: rgba(24,24,46,α)).
   El atributo va en <html> (:root[data-tema], el mismo elemento que :root) y no en body ni en .app: las
   variables viejas de la capa puente de ui.css (--muted:var(--at-muted)…) se resuelven en :root, y con el
   claro declarado más abajo llegarían a las páginas ya resueltas en oscuro.
   Va en @media not print: :root[data-tema="claro"] (0,2,0) le ganaría al :root (0,1,0) del bloque de
   impresión y el papel saldría con fondo lavanda, halos y sombras. Al imprimir el claro no existe y manda el
   bloque de impresión, con cualquier tema. Radios, tipografía, movimiento, blur, medidas, --at-brand y
   --at-brand-glow no cambian. */
@media not print{
  :root[data-tema="claro"]{
    color-scheme:light;

    /* ── Fondos y superficies (el fondo queda entre surface-2 y surface-3) ── */
    --at-bg:#eaeaf3; --at-surface:#fcfcfe; --at-surface-2:#f0f0f6; --at-surface-3:#e3e3ec;
    --at-surface-pop:#fff;
    --at-glass:rgba(252,252,254,.72); --at-overlay:rgba(24,24,46,.36);
    --at-halos:
      radial-gradient(900px 600px at -8% -12%, rgba(45,212,191,.16), transparent 62%),
      radial-gradient(900px 700px at 108% 112%, rgba(143,155,255,.11), transparent 62%);

    /* ── Bordes y velos (campos ≈ 3,5:1, como en oscuro; activo de Configuración ≥ 3:1) ── */
    --at-line:rgba(24,24,46,.10); --at-line-2:rgba(24,24,46,.17);
    --at-line-field:rgba(24,24,46,.54); --at-highlight:rgba(255,255,255,.8);
    --at-line-activo:rgba(24,24,46,.52);
    --at-tinta-rgb:24,24,46; --at-neutral-tint:rgba(24,24,46,.12);

    /* ── Texto ── */
    --at-text:#1e1e29; --at-text-2:#414150; --at-muted:#5a5a70; --at-hint:#636383;

    /* ── Estados (texto · tinte · borde) ── */
    --at-ok:#006b2a; --at-ok-tint:rgba(74,222,128,.26); --at-ok-line:rgba(0,107,42,.40);
    --at-warn:#8b5400; --at-warn-tint:rgba(250,204,21,.30); --at-warn-line:rgba(139,84,0,.46);
    --at-bad:#ef4444; --at-bad-text:#ad0024; --at-bad-tint:rgba(248,113,113,.19); --at-bad-line:rgba(173,0,36,.31);
    --at-info:#3b48c3; --at-info-tint:rgba(32,52,232,.14); --at-info-line:rgba(59,72,195,.37);
    --at-info-tint-soft:rgba(143,155,255,.19);
    --at-violet:#7632cc; --at-violet-tint:rgba(167,139,250,.23); --at-violet-line:rgba(118,50,204,.35);
    --at-carga-baja:#c2410c;   /* 5,05:1 sobre la tarjeta (es texto grande: alcanza 3:1) */
    --at-ok-tint-2:rgba(74,222,128,.40); --at-bad-tint-2:rgba(248,113,113,.31);

    /* ── Marca: --at-brand sigue siendo #2034e8 (identidad, nunca texto); el 300 es, como en oscuro, el de info ── */
    --at-brand-300:#3b48c3;

    /* ── Sombra y brillo: la misma geometría, con la tinta en lugar del negro y un contacto de 1-2 px ── */
    --at-shadow-card:inset 0 1px 0 var(--at-highlight), 0 1px 2px rgba(24,24,46,.05), 0 24px 48px -24px rgba(24,24,46,.16);
    --at-shadow-pop:inset 0 1px 0 rgba(255,255,255,.8), 0 2px 6px -2px rgba(24,24,46,.08), 0 30px 60px -20px rgba(24,24,46,.24);
    --at-grad-card:linear-gradient(180deg, rgba(255,255,255,.9), rgba(255,255,255,0) 40%);
    --at-hoja-sombra:0 0 0 1px var(--at-line-2);   /* la hoja #f7f7fa da 1,04:1 contra la tarjeta: el canto la separa sin mover el layout */

    /* ── Piezas con color propio ── */
    --at-av-a:#e6e6ef; --at-av-b:#d9d9e5;
    --at-dyn-mezcla:38%;   /* el color de la BD al 38 % con la tinta: ≥ 4,7:1 también con los colores más pálidos */
    --at-dyn-borde:rgba(24,24,46,.22);   /* con un amarillo pálido de la BD, el borde al 36 % sobre transparente daba 1,1:1 */
    --at-anillo-dato:inset 0 0 0 1px rgba(24,24,46,.24);   /* un amarillo o un gris claro de la BD no se pierde sobre la tarjeta */
    --at-google-borde:#747775;   /* el blanco del botón sobre la tarjeta: 4,4:1 (el #dadce0 daba 1,3:1) */

    /* ── Sobre el fondo de la página: la tarjeta (más clara que el fondo, como el surface-3 del oscuro) y el tinte ya
       compuesto sobre la tarjeta (los tintes de "Estados": si cambia uno, cambia acá) ── */
    --at-sobre-fondo:var(--at-surface); --at-barra-fondo:var(--at-surface);
    --at-aviso-ok:color-mix(in srgb,rgb(74 222 128) 26%,var(--at-surface));
    --at-aviso-warn:color-mix(in srgb,rgb(250 204 21) 30%,var(--at-surface));
    --at-aviso-bad:color-mix(in srgb,rgb(248 113 113) 19%,var(--at-surface));
    --at-aviso-info:color-mix(in srgb,rgb(32 52 232) 14%,var(--at-surface));

    /* ── Texto atenuado: el mismo contraste que en oscuro (o AA) ── */
    --at-op-rotulo:1; --at-op-numero:1; --at-op-tm:.7; --at-op-inactivo:.63;

    /* ── Saldo: la misma rampa lima, de lo más cercano al fondo (1) a lo más marcado (3) ── */
    --saldo-1:#709100; --saldo-2:#567200; --saldo-3:#3a4f00;

    /* ── Datos: mismo orden y familia de tono que el oscuro, todos ≥ 3:1; --at-d-null solo "sin dato" ── */
    --at-d1:#1a938b; --at-d2:#24602e; --at-d3:#709015; --at-d4:#916808; --at-d5:#4e515f; --at-d6:#687fdf; --at-d7:#ae3732; --at-d-null:#7d8597;

    /* ── Foco: el teal de Cartera, de 2 px, en todas las zonas (≥ 4,5:1 sobre las capas y los halos) ── */
    --at-focus:#007365;
  }
  :root[data-tema="claro"], :root[data-tema="claro"] [data-zona="clientes"]{
    --at-zona:#007365; --at-zona-300:#006357; --at-zona-tint:rgba(45,212,191,.27); --at-zona-line:rgba(0,115,101,.82);
    --at-zona-glow:rgba(20,184,166,.30); --at-zona-a:#2dd4bf; --at-zona-b:#14b8a6; --at-on-zona:#03211d; --at-tree:rgba(0,115,101,.39);
    --at-zona-tint-2:rgba(45,212,191,.42); --at-zona-vivo:#2dd4bf; --at-canto-relleno:#007365;
  }
  :root[data-tema="claro"] [data-zona="personas"]{
    --at-zona:#546e00; --at-zona-300:#4f6602; --at-zona-tint:rgba(195,245,60,.35); --at-zona-line:rgba(84,110,0,.78);
    --at-zona-glow:rgba(132,204,22,.32); --at-zona-a:#c3f53c; --at-zona-b:#a3e635; --at-on-zona:#141c00; --at-tree:rgba(84,110,0,.44);
    --at-zona-tint-2:rgba(195,245,60,.55); --at-zona-vivo:#c3f53c; --at-canto-relleno:#546e00;
  }
  :root[data-tema="claro"] [data-zona="config"]{
    --at-zona:#414150; --at-zona-300:#1e1e29; --at-zona-tint:rgba(24,24,46,.12); --at-zona-line:rgba(24,24,46,.25);
    --at-zona-glow:rgba(24,24,46,.16); --at-zona-a:#4a4a5c; --at-zona-b:#2e2e3c; --at-on-zona:#fcfcfe; --at-tree:rgba(24,24,46,.20);
    --at-zona-tint-2:rgba(24,24,46,.20); --at-zona-vivo:#414150; --at-canto-relleno:transparent;
  }
}

/* ── Impresión: siempre en claro, con cualquier tema ──
   Bloque de P3 §9.3 (teal-700 #0f766e da 5,47:1 sobre blanco y lima-700 #4d7c0f, 4,99:1)
   + complemento de F1 con el resto de los tokens, en los tonos de la vieja hoja clásica.
   Lo que este bloque no redefine se imprime con su valor del oscuro (el de siempre), también desde el claro. */
@media print{
  :root{
    color-scheme:light; --at-bg:#fff; --at-surface:#fff; --at-surface-2:#f5f6fb; --at-text:#0f1729;
    --at-text-2:#344054; --at-muted:#667085; --at-line:#e7e9f2; --at-zona:#0f766e;

    /* complemento F1 */
    --at-surface-3:#eef0f6; --at-glass:#fff; --at-overlay:transparent;
    --at-line-2:#d0d5dd; --at-line-field:#98a2b3; --at-highlight:transparent; --at-hint:#667085;
    --at-ok:#067647; --at-ok-tint:#ecfdf3; --at-ok-line:#abefc6;
    --at-warn:#b54708; --at-warn-tint:#fffaeb; --at-warn-line:#fedf89;
    --at-bad:#b42318; --at-bad-text:#b42318; --at-bad-tint:#fef3f2; --at-bad-line:#fecdca;
    --at-info:#175cd3; --at-info-tint:#eff8ff; --at-info-line:#b2ddff; --at-info-tint-soft:#eff8ff;
    --at-violet:#6b21a8; --at-violet-tint:#f4f1fe; --at-violet-line:#e6defb;
    --at-shadow-card:none; --at-shadow-pop:none; --at-grad-card:none;
    --at-focus:#0f766e;
  }
  /* --at-zona-vivo: el interruptor y la barra de progreso se imprimen como siempre (el tono de la zona, la perilla blanca) */
  :root, [data-zona="clientes"]{
    --at-zona:#0f766e; --at-zona-300:#0f766e; --at-zona-tint:rgba(15,118,110,.08); --at-zona-line:rgba(15,118,110,.30);
    --at-zona-glow:transparent; --at-zona-a:#0f766e; --at-zona-b:#0f766e; --at-on-zona:#fff; --at-tree:#d0d5dd;
    --at-zona-vivo:#0f766e;
  }
  [data-zona="personas"]{
    --at-zona:#4d7c0f;
    --at-zona-300:#4d7c0f; --at-zona-tint:rgba(77,124,15,.08); --at-zona-line:rgba(77,124,15,.30);
    --at-zona-glow:transparent; --at-zona-a:#4d7c0f; --at-zona-b:#4d7c0f; --at-on-zona:#fff; --at-tree:#d0d5dd;
    --at-zona-vivo:#4d7c0f;
  }
  [data-zona="config"]{
    --at-zona:#344054; --at-zona-300:#344054; --at-zona-tint:#f2f4f7; --at-zona-line:#d0d5dd;
    --at-zona-glow:transparent; --at-zona-a:#344054; --at-zona-b:#344054; --at-on-zona:#fff; --at-tree:#d0d5dd;
    --at-zona-vivo:#344054;
  }
}