/* ============================================================================
   AIN·DS v4.0 «SOBERANO» — Sistema de Diseño unificado AINTECH/AINA
   Autoridad: SR. SORIANO · 2026-07-04
   Fusión: aina.ain-tech.cloud/login (efectos, cursor, retícula áurea) +
           aina.ain-tech.cloud/chat  (glass, spring, OKLCH, badges D0-D3, chat-kit)
   Marca:  Identidad v3 TRICOLOR (Brand Package 2026-07-03 — versión FINAL):
           cian #00D6FF · lila #C64BFF · verde-soberanía #B6FF5A · fucsia #E877FF
   Fixes QA integrados: pulse-dot definido (faltaba en AINA) · --txt-3 sube a AA
   (#7d8ea6≈5.2:1) · cursor:none SOLO bajo body.cursor-on (JS activo) · reduced-
   motion sin *{animation:none} global · focus-visible en todo interactivo.
   ========================================================================== */

/* ── 1 · TIPOGRAFÍA AUTOALOJADA (soberana: 0 requests a terceros) ── */
@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:600 800;font-display:swap;src:url(/assets/bricolage-grotesque-600-800.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2013-2014,U+2018-201A,U+201C-201E,U+2022,U+20AC,U+2212}
@font-face{font-family:'Inter';font-style:normal;font-weight:400 700;font-display:swap;src:url(/assets/inter-400-700.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2013-2014,U+2018-201A,U+201C-201E,U+2022,U+20AC,U+2212}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/jetbrains-mono-400.woff2) format('woff2');unicode-range:U+0000-00FF,U+2013-2014,U+2022,U+20AC}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:500;font-display:swap;src:url(/assets/jetbrains-mono-500.woff2) format('woff2');unicode-range:U+0000-00FF,U+2013-2014,U+2022,U+20AC}

/* ── 2 · TOKENS ── */
:root{
  color-scheme:dark;
  /* marca v3 tricolor (FINAL — README del brand package prohíbe versiones previas) */
  --cyan:#00D6FF; --cyan-l:#8DEBFF; --cyan-2:#0aa6c4; --gem:#9FF2FF;
  --lila:#C64BFF; --lila-l:#F0A6FF; --lila-d:#7A1FD6; --violet:#C64BFF; --violet-d:#8a2fd0;
  --green:#B6FF5A; --green-d:#7fd42a; --fuchsia:#E877FF;
  --on-cyan:#04222a; --on-green:#12240a; --on-lila:#fff;
  /* semánticos (chat) */
  --amber:#ffb454; --red:#ff6b81; --yellow:#ffd166; --orange:#ff9f43;
  /* data-class soberanía D0-D3 (chat) */
  --d0:var(--green); --d1:var(--yellow); --d2:var(--orange); --d3:var(--red);
  /* fondos espacio-profundo (login) + escala de superficie refinada */
  --bg:#0c0e16; --bg-2:#121622; --bg-3:#182036; --panel:#141a26; --panel-2:#1b2436;
  --line:#1f2a3a; --line-2:#2a3648;
  --txt:#e8edf4; --txt-2:#94a8bc; --txt-3:#7d8ea6; /* QA: sube de #5e6e84 a AA 5.2:1 */
  /* alias de compatibilidad (login usaba --txt2/--panel2 sin guion) */
  --txt2:var(--txt-2); --txt3:var(--txt-3); --bg2:var(--bg-2); --bg3:var(--bg-3); --panel2:var(--panel-2); --line2:var(--line-2); --disp2:var(--disp);
  /* tipografía */
  --disp:'Bricolage Grotesque',Inter,system-ui,sans-serif;
  --sans:Inter,system-ui,'Segoe UI',sans-serif;
  --mono:'JetBrains Mono',ui-monospace,Menlo,Consolas,monospace;
  /* gradientes de marca */
  --grad:linear-gradient(135deg,var(--cyan-l),var(--cyan) 50%,var(--cyan-2));
  --grad-lila:linear-gradient(135deg,var(--lila-l),var(--lila) 55%,var(--lila-d));
  --gtext:linear-gradient(92deg,var(--cyan) 0%,var(--cyan-l) 38%,var(--lila) 100%);
  --gtext-tri:linear-gradient(92deg,var(--cyan) 0%,var(--lila) 52%,var(--green) 100%);
  /* aurora tricolor + mesh */
  --aurora:radial-gradient(55% 50% at 25% 18%,rgba(0,214,255,.13),transparent 60%),radial-gradient(50% 45% at 82% 30%,rgba(198,75,255,.11),transparent 60%),radial-gradient(55% 55% at 55% 92%,rgba(182,255,90,.07),transparent 65%);
  /* retícula soberana 3 niveles (login) */
  --grid:26px; --grid-mid:42px; --grid-major:178px; --phi:1.618;
  --gline:color-mix(in srgb,var(--cyan) 5%,transparent);
  --gline-mid:color-mix(in srgb,var(--cyan) 8%,transparent);
  --gline-major:color-mix(in srgb,var(--cyan) 12%,transparent);
  /* glass + motion (chat) */
  --glass:rgba(20,24,31,.78); --blur:blur(18px) saturate(1.25);
  --ease:cubic-bezier(.2,.8,.2,1);
  --spring:cubic-bezier(.34,1.56,.64,1);
  --radius:13px; --radius-lg:20px;
  --splash-ms:4000ms;
  --focus-ring:0 0 0 3px color-mix(in srgb,var(--cyan) 28%,transparent);
}
/* wide-gamut (chat): pantallas P3/OKLCH ganan viveza */
@supports (color:oklch(70% .1 200)){:root{--cyan:oklch(80% .143 214);--lila:oklch(66% .21 305);--green:oklch(90% .2 128);--amber:oklch(82.5% .128 70);--red:oklch(71.5% .152 13)}}
/* tema claro opcional (chat) */
html[data-theme=light]{color-scheme:light}
html[data-theme=light] :root, html[data-theme=light]{--bg:#f4f6f9;--bg-2:#eaeef4;--bg-3:#dfe6ef;--panel:#ffffff;--panel-2:#f2f5f9;--line:#d5dde8;--line-2:#c2cddc;--txt:#131a24;--txt-2:#3c4c60;--txt-3:#5c6f86;--glass:rgba(255,255,255,.8)}

/* ── 3 · BASE ── */
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:var(--bg);color:var(--txt);font-family:var(--sans);font-size:15px;line-height:1.55;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
::selection{background:color-mix(in srgb,var(--cyan) 30%,transparent);color:var(--txt)}
:focus-visible{outline:none;box-shadow:var(--focus-ring);border-radius:8px}
a{color:var(--cyan);text-decoration:none}
/* scrollbars custom (chat v2) */
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--cyan) 22%,var(--line));border-radius:8px;border:2px solid var(--bg);background-clip:content-box}
::-webkit-scrollbar-thumb:hover{background:color-mix(in srgb,var(--cyan) 40%,var(--line))}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;clip-path:inset(50%);overflow:hidden;white-space:nowrap}

/* ── 4 · CAPAS DE EFECTO ── */
.aurorabg{position:fixed;inset:0;z-index:-2;background:var(--aurora),var(--bg);animation:adrift 18s ease-in-out infinite}
.gridbg{position:fixed;inset:0;z-index:-1;pointer-events:none;background-image:linear-gradient(var(--gline) 1px,transparent 1px),linear-gradient(90deg,var(--gline) 1px,transparent 1px),linear-gradient(var(--gline-mid) 1px,transparent 1px),linear-gradient(90deg,var(--gline-mid) 1px,transparent 1px);background-size:var(--grid) var(--grid),var(--grid) var(--grid),var(--grid-major) var(--grid-major),var(--grid-major) var(--grid-major);mask-image:radial-gradient(72% 72% at 50% 40%,#000,transparent)}
.noise{position:fixed;inset:0;z-index:99996;pointer-events:none;opacity:.018;mix-blend-mode:overlay;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='256' height='256' filter='url(%23n)'/%3E%3C/svg%3E")}
.sys-status{position:fixed;left:14px;bottom:10px;z-index:5;display:flex;gap:7px;align-items:center;font-family:var(--mono);font-size:9px;letter-spacing:.22em;text-transform:uppercase;color:rgba(255,255,255,.13);pointer-events:none}
.sys-status .dot{width:5px;height:5px;border-radius:50%;background:var(--green);box-shadow:0 0 6px var(--green);animation:pulse-dot 1.6s infinite}
/* cursor custom (login) — SOLO activo bajo body.cursor-on (lo añade el JS al iniciar) */
body.cursor-on{cursor:none}
body.cursor-on a,body.cursor-on button,body.cursor-on label,body.cursor-on input,body.cursor-on [onclick]{cursor:none}
.cursor-glow{position:fixed;pointer-events:none;z-index:99999;width:36px;height:36px;border-radius:50%;background:radial-gradient(circle,rgba(0,214,255,.35),transparent 70%);mix-blend-mode:screen;opacity:0;will-change:transform;top:0;left:0;animation:cursorColor 5s ease-in-out infinite}
.cursor-ring{position:fixed;pointer-events:none;z-index:99998;width:52px;height:52px;border-radius:50%;border:1.5px solid rgba(0,214,255,.25);opacity:0;will-change:transform;top:0;left:0;animation:cursorColor 5s ease-in-out infinite}
.ctrail{position:fixed;pointer-events:none;z-index:99997;border-radius:50%;background:var(--cyan);opacity:0;will-change:transform;top:0;left:0}
.spot-glow{position:fixed;pointer-events:none;z-index:0;width:700px;height:700px;border-radius:50%;background:radial-gradient(circle,rgba(0,214,255,.08) 0%,transparent 55%);mix-blend-mode:screen;opacity:0;will-change:transform;top:0;left:0}
.grid-highlight{position:fixed;inset:0;z-index:1;pointer-events:none;opacity:0;background-image:repeating-linear-gradient(0deg,color-mix(in srgb,var(--cyan) 80%,transparent) 0 1px,transparent 1px var(--grid)),repeating-linear-gradient(90deg,color-mix(in srgb,var(--cyan) 80%,transparent) 0 1px,transparent 1px var(--grid));animation:gridColor 8s ease-in-out infinite}

/* ── 5 · COMPONENTES ── */
/* botones */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:var(--radius);padding:10px 18px;font-size:14px;font-weight:700;border:1px solid transparent;font-family:var(--sans);color:var(--txt);background:transparent;transition:.2s var(--ease);cursor:pointer}
.cbtn{background:var(--grad);color:var(--on-cyan);border:0;border-radius:var(--radius);padding:13px 26px;font-weight:800;font-size:14.5px;font-family:var(--sans);box-shadow:0 10px 26px -14px var(--cyan);cursor:pointer;transition:.2s var(--spring)}
.cbtn:hover{transform:translateY(-2px);box-shadow:0 16px 40px -14px var(--cyan)}
.cbtn:active{transform:scale(.97)}
.cbtn.lila{background:var(--grad-lila);color:var(--on-lila);box-shadow:0 10px 26px -14px var(--lila)}
.ob{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;border-radius:var(--radius);padding:12px;font-size:14px;font-weight:600;border:1px solid var(--line-2);background:transparent;color:var(--txt);font-family:var(--sans);transition:.18s var(--ease);cursor:pointer}
.ob:hover{border-color:color-mix(in srgb,var(--cyan) 40%,var(--line-2));background:rgba(0,214,255,.04)}
.ob.g{background:#fbfbfa;color:#15171c;border-color:#e7e3db}
.ob.ai{background:rgba(0,214,255,.07);border-color:rgba(0,214,255,.28);color:var(--cyan-l)}
.ob.ms{background:rgba(198,75,255,.07);border-color:rgba(198,75,255,.28);color:var(--lila-l)}
.ob.gm{background:rgba(182,255,90,.06);border-color:rgba(182,255,90,.24);color:var(--green)}
.ob:disabled,.cbtn:disabled{opacity:.45;filter:saturate(.4);pointer-events:none}
/* inputs */
.input,.binput{width:100%;background:var(--bg-2);border:1px solid var(--line);border-radius:12px;padding:13px 15px;color:var(--txt);font-family:var(--sans);font-size:14px;outline:none;transition:.2s var(--ease)}
.input:focus,.binput:focus{border-color:color-mix(in srgb,var(--cyan) 45%,var(--line));box-shadow:var(--focus-ring)}
.field{position:relative}
.field .eye{position:absolute;right:10px;top:50%;transform:translateY(-50%);background:none;border:0;color:var(--txt-3);cursor:pointer;padding:4px;font-size:15px}
.auth{display:flex;flex-direction:column;gap:10px}
.auth-err{font-size:12.5px;color:var(--red);text-align:center;padding:4px 0;min-height:22px}
/* card login */
.login{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-lg);padding:30px;display:flex;flex-direction:column;justify-content:center;box-shadow:inset 0 0 40px rgba(0,214,255,.02),0 0 30px rgba(0,214,255,.015)}
.lhead h1{font-family:var(--disp);font-size:23px;font-weight:700;letter-spacing:-.01em;margin:0}
.tabs{display:flex;gap:4px;background:var(--bg-2);border:1px solid var(--line);border-radius:12px;padding:4px}
.tabs button{flex:1;border:0;background:transparent;color:var(--txt-2);font-family:var(--sans);font-size:14px;font-weight:700;padding:9px;border-radius:9px;cursor:pointer;transition:.2s var(--ease)}
.tabs button.on{background:var(--panel-2);color:var(--txt)}
/* cards */
.feat{background:var(--panel);border:1px solid var(--line);border-radius:17px;padding:24px;transition:.2s var(--ease)}
.feat:hover{border-color:color-mix(in srgb,var(--cyan) 40%,var(--line));transform:translateY(-3px)}
.tile{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:16px 18px}
.tile .k{color:var(--txt-3);font-size:11px;text-transform:uppercase;letter-spacing:.08em}
.tile .v{font-family:var(--disp);font-size:26px;font-weight:800;margin-top:6px;font-variant-numeric:tabular-nums}
.row{display:flex;align-items:center;gap:12px;padding:13px 20px;border-top:1px solid var(--line);transition:background .15s}
.row:hover{background:rgba(0,214,255,.03)}
/* badges + chips */
.badge{display:inline-flex;align-items:center;gap:5px;font-family:var(--mono);font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;padding:3px 8px;border-radius:7px;border:1px solid var(--line)}
.badge.ok{color:var(--green);border-color:color-mix(in srgb,var(--green) 35%,var(--line))}
.badge.dg{color:var(--amber);border-color:color-mix(in srgb,var(--amber) 35%,var(--line))}
.badge.off{color:var(--txt-3)}
.badge.d0{color:var(--d0)}.badge.d1{color:var(--d1)}.badge.d2{color:var(--d2)}.badge.d3{color:var(--d3)}
.chip{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;padding:6px 13px;border-radius:99px;background:rgba(0,214,255,.11);color:var(--cyan-l);border:1px solid rgba(0,214,255,.22);cursor:pointer;transition:.15s var(--ease)}
.chip:hover{transform:translateY(-1px)}
/* toast + modal (chat) */
.toast{position:fixed;right:18px;bottom:18px;z-index:9500;background:var(--glass);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);border:1px solid var(--line-2);border-left:3px solid var(--cyan);border-radius:var(--radius);padding:13px 17px;font-size:13.5px;max-width:340px;opacity:0;transform:translateY(10px);transition:.25s var(--spring);pointer-events:none}
.toast.show{opacity:1;transform:none}
.toast.err{border-left-color:var(--red)}
.toast.okc{border-left-color:var(--green)}
.modal{position:fixed;inset:0;z-index:9000;background:rgba(4,8,12,.72);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);display:none;align-items:center;justify-content:center}
.modal.open{display:flex}
/* reloj + código */
.clock{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:13px;color:var(--txt-2);letter-spacing:.08em;padding:0 14px;background:rgba(255,255,255,.02);border:1px solid var(--line);border-radius:10px;height:36px}
.clock .loc{width:5px;height:5px;border-radius:50%;background:var(--green);box-shadow:0 0 6px var(--green);animation:pulse-dot 1.6s infinite}
.codebox{background:#0a0f15;border:1px solid var(--line);border-radius:12px;overflow:hidden}
.codebox pre{margin:0;padding:14px;font-family:var(--mono);font-size:12px;line-height:1.6;color:#cfe3ee;overflow-x:auto}
kbd{font-family:var(--mono);font-size:11px;background:var(--bg-3);border:1px solid var(--line-2);border-bottom-width:2px;border-radius:6px;padding:2px 7px}
/* chat-kit (burbujas + composer, para AINA CHAT y futuros) */
.msg{display:flex;gap:12px;animation:rise .3s var(--ease)}
.msg .av{width:33px;height:33px;border-radius:10px;flex:none;display:grid;place-items:center;font-weight:800;background:radial-gradient(circle at 35% 30%,var(--cyan-l),var(--cyan-2));color:var(--on-cyan)}
.msg.me{flex-direction:row-reverse}
.msg.me .av{background:radial-gradient(circle at 35% 30%,var(--lila-l),var(--lila-d));color:#fff}
.msg .b{background:var(--panel);border:1px solid var(--line);padding:13px 16px;border-radius:7px 20px 20px 20px;font-size:15px;line-height:1.62;max-width:72ch}
.msg.me .b{border-radius:20px 7px 20px 20px;background:color-mix(in srgb,var(--lila) 7%,var(--panel))}
.composer{background:var(--glass);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);border:1px solid color-mix(in srgb,var(--cyan) 26%,var(--line));border-radius:22px;padding:10px 12px;display:flex;gap:10px;align-items:flex-end;transition:.2s var(--ease)}
.composer:focus-within{box-shadow:var(--focus-ring)}
.send{width:38px;height:38px;border:0;border-radius:12px;background:var(--grad);color:var(--on-cyan);display:grid;place-items:center;cursor:pointer;transition:.15s var(--spring)}
.send:active{transform:scale(.92)}

/* ── 6 · UTILIDADES ── */
.mono{font-family:var(--mono)}
.gtxt{background:var(--gtext);-webkit-background-clip:text;background-clip:text;color:transparent}
.gtxt-tri{background:var(--gtext-tri);-webkit-background-clip:text;background-clip:text;color:transparent}
.glass{background:var(--glass);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur)}
.pad{min-height:100dvh;display:flex;align-items:center;justify-content:center;padding:26px}
.container{width:100%;max-width:1180px}

/* ── 7 · KEYFRAMES ── */
@keyframes pulse-dot{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.45;transform:scale(.8)}} /* QA: usado por AINA pero NUNCA definido — fixed */
@keyframes adrift{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes stripe{0%{background-position:0 0}100%{background-position:200% 0}}
@keyframes ty{0%,60%,100%{transform:translateY(0)}30%{transform:translateY(-5px)}}
@keyframes stamp{0%{transform:scale(1.6);opacity:0}60%{transform:scale(.95);opacity:1}100%{transform:scale(1)}}
@keyframes shimmer{0%{background-position:-200% 0}100%{background-position:200% 0}}
@keyframes cursorColor{0%{filter:hue-rotate(160deg)}33%{filter:hue-rotate(0deg)}66%{filter:hue-rotate(-40deg)}100%{filter:hue-rotate(160deg)}}
@keyframes gridColor{0%,100%{filter:hue-rotate(0)}50%{filter:hue-rotate(60deg)}}
@keyframes spIn{to{opacity:1;transform:none}}

/* ── 8 · REDUCED MOTION (QA: nunca *{animation:none} global) ── */
@media (prefers-reduced-motion:reduce){
  .aurorabg,.grid-highlight,.cursor-glow,.cursor-ring,.clock .loc,.sys-status .dot{animation:none}
  .feat:hover,.cbtn:hover,.chip:hover{transform:none}
  /* elementos cuya VISIBILIDAD depende de animación -> visibles de inmediato */
  .sp-ey,.sp-logo,.sp-sub,.sp-meta,.sp-enter{opacity:1!important;animation:none!important}
}
@media (pointer:coarse){body.cursor-on{cursor:auto}.cursor-glow,.cursor-ring,.ctrail,.spot-glow,.grid-highlight{display:none}}