/* =====================================================================
   VEX · Sistema visual base
   Temas: [data-theme="light|dark"]  ·  Colores: [data-accent="mono|azul|verde|violeta|naranja|rosa"]
   ===================================================================== */
:root {
  --bg: #e7e7ea;
  --rail: #131315;
  --rail-text: #8d8d94;
  --canvas: #f4f4f5;
  --surface: #ffffff;
  --surface-2: #f2f2f4;
  --surface-3: #e8e8eb;
  --glass: rgba(255, 255, 255, 0.64);
  --glass-line: rgba(255, 255, 255, 0.7);
  --text: #111113;
  --muted: #616169;
  --faint: #acacb4;
  --line: #e5e5e9;
  --line-2: #d4d4da;
  --hero: #121214;          /* tarjetas oscuras destacadas (saldo, reproductor) */
  --hero-text: #f5f5f6;
  --shadow-sm: 0 1px 2px rgba(17, 17, 19, 0.04), 0 4px 16px -8px rgba(17, 17, 19, 0.12);
  --shadow: 0 1px 2px rgba(17, 17, 19, 0.04), 0 22px 44px -22px rgba(17, 17, 19, 0.28);
  --shadow-lg: 0 40px 90px -30px rgba(0, 0, 0, 0.45);
  --scrim: rgba(18, 18, 20, 0.38);

  /* estados */
  --ok: #16a34a;
  --warn: #855600;
  --info: #3b82f6;
  --bad: #e5484d;

  --radius: 24px;
  --radius-sm: 16px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --f-body: 'Saira', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-head: var(--f-body);  /* títulos: misma familia que el texto, más peso; sin mayúsculas forzadas */
  --f-display: 'Saira Extra Condensed', 'Arial Narrow', sans-serif; /* solo cifras grandes (saldo, precios) */
  --f-mono: var(--f-body);  /* códigos y correos: legibles, con números tabulares */
  color-scheme: light;
}

:root[data-theme="dark"] {
  --bg: #0b0b0c;
  --rail: #09090a;
  --rail-text: #77777f;
  --canvas: #18181b;
  --surface: #222226;
  --surface-2: #2a2a2f;
  --surface-3: #34343a;
  --glass: rgba(34, 34, 38, 0.62);
  --glass-line: rgba(255, 255, 255, 0.07);
  --text: #f4f4f5;
  --muted: #a1a1aa;
  --faint: #66666e;
  --line: #2e2e34;
  --line-2: #3b3b42;
  --hero: #0e0e10;
  --hero-text: #f5f5f6;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3), 0 4px 16px -8px rgba(0, 0, 0, 0.5);
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 22px 44px -22px rgba(0, 0, 0, 0.7);
  --scrim: rgba(0, 0, 0, 0.55);
  --ok: #3ccf74;
  --warn: #f2b233;
  --info: #6aa4ff;
  --bad: #ff6b70;
  color-scheme: dark;
}

/* Colores de interfaz. En "mono" el acento es el propio texto: negro en claro, blanco en oscuro */
/* Acentos con texto blanco legible (≥4.5:1) en claro; en oscuro se aclaran para leerse sobre fondo oscuro */
:root { --accent: var(--text); --on-accent: var(--surface); --logo: var(--text); --em: var(--muted); }
:root[data-accent="azul"] { --accent: #2f5bea; }
:root[data-accent="verde"] { --accent: #0b7a50; }
:root[data-accent="violeta"] { --accent: #6644e8; }
:root[data-accent="naranja"] { --accent: #c2410c; }
:root[data-accent="rosa"] { --accent: #c62a63; }
:root[data-theme="dark"][data-accent="azul"] { --accent: #7c9cff; }
:root[data-theme="dark"][data-accent="verde"] { --accent: #3fcf8e; }
:root[data-theme="dark"][data-accent="violeta"] { --accent: #a48bff; }
:root[data-theme="dark"][data-accent="naranja"] { --accent: #ff8a50; }
:root[data-theme="dark"][data-accent="rosa"] { --accent: #ff7aa8; }
:root[data-theme="dark"]:not([data-accent="mono"]) { --on-accent: #111113; }
:root:not([data-accent="mono"]):not([data-theme="dark"]) { --on-accent: #ffffff; }
:root:not([data-accent="mono"]) { --logo: var(--accent); --em: var(--accent); }
:root { --accent-soft: color-mix(in srgb, var(--accent) 12%, transparent); --accent-glow: color-mix(in srgb, var(--accent) 45%, transparent); }
:root[data-accent="mono"] { --accent-glow: color-mix(in srgb, var(--muted) 35%, transparent); }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; background: var(--bg); }
body {
  margin: 0; background: var(--canvas); color: var(--text);
  font: 400 16px/1.6 var(--f-body); letter-spacing: 0; caret-color: var(--accent);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden;
  transition: background-color 0.4s, color 0.4s;
}
body.has-modal { overflow: hidden; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
button, input, textarea, select { font: inherit; color: inherit; letter-spacing: inherit; }
h1, h2, h3, h4 { margin: 0; line-height: 1.15; font-family: var(--f-head); font-weight: 600; letter-spacing: -0.01em; text-wrap: balance; }
p { margin: 0; }
::selection { background: var(--accent); color: var(--on-accent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 10px; }

/* Cambio de tema: el círculo lo anima theme.js */
::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; }

.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
[hidden] { display: none !important; }

.display { font-family: var(--f-head); font-weight: 650; letter-spacing: -0.02em; line-height: 1.08; }
.display em { font-style: normal; font-weight: 500; color: var(--em); transition: color 0.4s; }
.muted { color: var(--muted); }
.mono { font-family: var(--f-mono); }
.stack { display: grid; gap: 1rem; }

/* ---------- Logo (cubo) ---------- */
.cube { width: 100%; height: 100%; overflow: visible; }
.cube__f { fill: var(--logo); transition: transform 0.7s var(--spring), fill 0.4s; }
.cube__f--top { transform: translate(0, -1.1px); }
.cube__f--left { transform: translate(-0.95px, 0.55px); }
.cube__f--right { transform: translate(0.95px, 0.55px); }
/* Entrada: las caras llegan desde fuera y encajan */
.cube--intro .cube__f { animation: faceIn 1.1s var(--ease) backwards; }
.cube--intro .cube__f--left { animation-delay: 0.08s; }
.cube--intro .cube__f--right { animation-delay: 0.16s; }
@keyframes faceIn { from { opacity: 0; transform: translate(var(--fx, 0), var(--fy, -22px)) scale(0.9); } }
.cube__f--top { --fx: 0px; --fy: -22px; }
.cube__f--left { --fx: -20px; --fy: 12px; }
.cube__f--right { --fx: 20px; --fy: 12px; }
/* Al pasar el ratón: el cubo se abre y gira un tercio */
.brand .cube, .cube--hover { transition: transform 0.9s var(--spring); }
.brand:hover .cube, .cube--hover:hover { transform: rotate(120deg); }
.brand:hover .cube__f--top, .cube--hover:hover .cube__f--top { transform: translate(0, -5px); }
.brand:hover .cube__f--left, .cube--hover:hover .cube__f--left { transform: translate(-4.3px, 2.5px); }
.brand:hover .cube__f--right, .cube--hover:hover .cube__f--right { transform: translate(4.3px, 2.5px); }
/* Latido (pantalla de carga) */
.cube--pulse .cube__f { animation: facePulse 1.5s var(--ease) infinite; }
.cube--pulse .cube__f--left { animation-delay: 0.15s; }
.cube--pulse .cube__f--right { animation-delay: 0.3s; }
@keyframes facePulse { 40% { transform: translate(calc(var(--fx) * 0.25), calc(var(--fy) * 0.25)); opacity: 0.55; } }
/* Flotación suave */
.cube--float { animation: cubeFloat 7s ease-in-out infinite; }
@keyframes cubeFloat { 50% { transform: translateY(-10px) rotate(4deg); } }

.brand { display: inline-flex; align-items: center; gap: 0.6rem; text-decoration: none; font: 700 1.3rem/1 var(--f-head); letter-spacing: 0.02em; }
.brand__mark { width: 30px; height: 30px; flex: none; }

/* ---------- Iconos ---------- */
.i { width: 1.2em; height: 1.2em; flex: none; overflow: visible; transform-origin: center; }
.i path, .i circle, .i rect { stroke-dasharray: 1; stroke-dashoffset: 0; transform-box: fill-box; transform-origin: center; }
.i :nth-child(2) { --n: 1; } .i :nth-child(3) { --n: 2; } .i :nth-child(4) { --n: 3; } .i :nth-child(5) { --n: 4; }

/* Contenedores que animan su icono al pasar el ratón */
:is(.btn, .nav-item, .icon-btn, .stat, .pill, .copy-btn, .rail__logout, .mode button, .seg2 label, .drop, .ledger__item, .empty):hover .i {
  animation: var(--ia, iPop) var(--id, 0.7s) var(--ie, var(--spring)) var(--ic, 1);
}
/* "Redibujado" del trazo, pieza por pieza */
:is(.btn, .nav-item, .icon-btn, .stat, .pill, .copy-btn, .rail__logout, .ledger__item):hover .i :is(path, circle, rect) {
  animation: draw 0.7s var(--ease) both; animation-delay: calc(var(--n, 0) * 90ms);
}
@keyframes draw { from { stroke-dashoffset: 1; } }

/* Rebote al hacer clic */
:is(.btn, .nav-item, .icon-btn, .pill):active .i { transform: scale(0.78); transition: transform 0.1s; }

/* Movimiento propio de cada icono */
.i[data-i="settings"], .i[data-i="sun"] { --ia: iSpin; --id: 1.6s; --ie: linear; --ic: infinite; }
.i[data-i="spark"] { --ia: iSpark; --id: 1.2s; --ic: infinite; }
.i[data-i="bell"], .i[data-i="moon"] { --ia: iRing; transform-origin: 50% 10%; }
.i[data-i="bag"] { --ia: iSwing; transform-origin: 50% 15%; }
.i[data-i="trash"] { --ia: iShake; }
.i[data-i="edit"] { --ia: iWrite; }
.i[data-i="search"] { --ia: iOrbit; --id: 1s; }
.i[data-i="eye"] { --ia: iBlink; --id: 0.5s; }
.i[data-i="home"], .i[data-i="user"], .i[data-i="users"] { --ia: iHop; }
.i[data-i="wallet"] { --ia: iSquash; }
.i[data-i="coin"] { --ia: iFlip; --id: 0.9s; --ie: var(--ease); }
.i[data-i="key"] { --ia: iTurnKey; transform-origin: 30% 65%; }
.i[data-i="grid"] { --ia: iTurn; }
.i[data-i="box"], .i[data-i="cube"] { --ia: iBox; }
.i[data-i="upload"] { --ia: iUp; --id: 0.9s; --ic: infinite; }
.i[data-i="download"] { --ia: iDown; --id: 0.9s; --ic: infinite; }
.i[data-i="inbox"] { --ia: iDown; }
.i[data-i="arrow"], .i[data-i="logout"] { --ia: iRight; --id: 0.9s; --ic: infinite; }
.i[data-i="back"] { --ia: iLeft; --id: 0.9s; --ic: infinite; }
.i[data-i="list"] { --ia: iRight; }
.i[data-i="chart"] { --ia: iBars; transform-origin: 50% 100%; }
.i[data-i="clock"] { --ia: iTick; --id: 1s; }
.i[data-i="refund"] { --ia: iUndo; --id: 0.8s; --ie: var(--ease); }
.i[data-i="x"] { --ia: iBack; }
.i[data-i="plus"] { --ia: iPlus; }
.i[data-i="copy"] { --ia: iCopy; }
.i[data-i="shield"], .i[data-i="check"] { --ia: iPop; }
.i[data-i="bank"] { --ia: iHop; }
.i[data-i="payout"] { --ia: iCash; --id: 0.9s; }
.i[data-i="idea"] { --ia: iGlow; --id: 0.9s; }
.i[data-i="megaphone"] { --ia: iShout; --id: 0.8s; transform-origin: 20% 50%; }
.i[data-i="phone"] { --ia: iRing; }
.i[data-i="file"] { --ia: iSwing; transform-origin: 50% 0; }

/* Partes internas que se mueven por separado */
:is(.btn, .icon-btn, .stat, .nav-item):hover .i[data-i="clock"] path { animation: iHand 1s var(--ease), draw 0.7s var(--ease) both; transform-origin: 0% 100%; }
:is(.btn, .icon-btn, .stat, .nav-item):hover .i[data-i="chart"] path { animation: iGrow 0.8s var(--spring), draw 0.7s var(--ease) both; transform-origin: 50% 100%; }

@keyframes iSpin { to { transform: rotate(360deg); } }
@keyframes iSpark { 50% { transform: rotate(90deg) scale(1.2); } 100% { transform: rotate(180deg); } }
@keyframes iRing { 15% { transform: rotate(-18deg); } 30% { transform: rotate(15deg); } 45% { transform: rotate(-10deg); } 60% { transform: rotate(6deg); } 75% { transform: rotate(-3deg); } }
@keyframes iSwing { 25% { transform: rotate(12deg); } 50% { transform: rotate(-9deg); } 75% { transform: rotate(4deg); } }
@keyframes iShake { 20%, 60% { transform: translateX(-2px) rotate(-8deg); } 40%, 80% { transform: translateX(2px) rotate(8deg); } }
@keyframes iWrite { 30% { transform: translate(-2px, 2px) rotate(-12deg); } 60% { transform: translate(2px, -1px) rotate(6deg); } }
@keyframes iOrbit { 25% { transform: translate(2px, -2px); } 50% { transform: translate(0, -3px); } 75% { transform: translate(-2px, -1px); } }
@keyframes iBlink { 45% { transform: scaleY(0.1); } }
@keyframes iHop { 35% { transform: translateY(-4px) scale(1.06); } 60% { transform: translateY(0) scaleY(0.92); } }
@keyframes iSquash { 30% { transform: scale(1.18, 0.85); } 60% { transform: scale(0.92, 1.1); } }
@keyframes iFlip { to { transform: rotateY(360deg); } }
@keyframes iTurnKey { 40% { transform: rotate(-35deg); } 70% { transform: rotate(-30deg); } }
@keyframes iTurn { 50% { transform: rotate(45deg) scale(0.85); } }
@keyframes iBox { 30% { transform: translateY(-4px) rotate(-10deg); } 60% { transform: translateY(1px) rotate(4deg); } }
@keyframes iUp { 50% { transform: translateY(-4px); } }
@keyframes iDown { 50% { transform: translateY(3px); } }
@keyframes iRight { 50% { transform: translateX(4px); } }
@keyframes iLeft { 50% { transform: translateX(-4px); } }
@keyframes iBars { 40% { transform: scaleY(0.6); } 70% { transform: scaleY(1.1); } }
@keyframes iGrow { from { transform: scaleY(0.2); } }
@keyframes iTick { to { transform: rotate(0); } }
@keyframes iHand { from { transform: rotate(-360deg); } }
@keyframes iUndo { 50% { transform: rotate(-200deg) scale(0.85); } 100% { transform: rotate(-360deg); } }
@keyframes iBack { 50% { transform: rotate(-90deg) scale(0.85); } }
@keyframes iPlus { 50% { transform: rotate(90deg) scale(1.2); } 100% { transform: rotate(180deg); } }
@keyframes iCopy { 40% { transform: translate(-2px, -2px); } 70% { transform: translate(1px, 1px); } }
@keyframes iPop { 40% { transform: scale(1.25); } }
@keyframes iShout { 20% { transform: rotate(-10deg) scale(1.08); } 45% { transform: rotate(6deg) scale(1.12); } 70% { transform: rotate(-3deg); } }
@keyframes iGlow { 30% { transform: translateY(-2px) scale(1.15); filter: drop-shadow(0 0 4px currentColor); } 60% { transform: scale(0.95); } }
@keyframes iCash { 30% { transform: translateX(-3px) rotate(-6deg); } 65% { transform: translateX(3px) rotate(3deg); } }

/* Los iconos se dibujan al aparecer cada vista y el menú */
.view__inner.is-in .stat__icon .i :is(path, circle, rect),
.view__inner.is-in .empty__art .i :is(path, circle, rect) { animation: draw 1.1s var(--ease) both; animation-delay: calc(0.35s + var(--n, 0) * 120ms); }
.nav-item .i :is(path, circle, rect) { animation: draw 1s var(--ease) both; animation-delay: calc(var(--i, 0) * 60ms + 400ms + var(--n, 0) * 90ms); }
/* El icono del menú activo "respira" */
.nav-item.is-active .i { animation: iBreathe 3s ease-in-out infinite; }
@keyframes iBreathe { 50% { transform: scale(1.1); } }
/* Iconos de estado que laten solos */
.stat--alert .stat__icon .i { animation: iRing 1s var(--spring) 1.2s 2; transform-origin: 50% 10%; }
.b-toggle__icon .i { animation: iPop 2.4s var(--spring) infinite; }

/* ---------- Botones ---------- */
.btn {
  --spin: var(--on-accent);
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  min-height: 44px; padding: 0.7rem 1.25rem; border-radius: 999px; border: 1px solid transparent;
  font: 600 0.95rem/1.1 var(--f-body); letter-spacing: 0; text-decoration: none; white-space: nowrap; cursor: pointer; user-select: none;
  transition: transform 0.45s var(--spring), background-color 0.3s, box-shadow 0.4s var(--ease), color 0.3s, border-color 0.3s;
}
.btn::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, 0.35) 50%, transparent 70%);
  transform: translateX(-130%); transition: transform 0.9s var(--ease);
}
.btn::before { display: none; } /* sin destello al pasar el cursor */
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: scale(0.95); transition-duration: 0.12s; }
.btn--primary { background: var(--accent); color: var(--on-accent); box-shadow: 0 10px 24px -14px var(--accent-glow); }
.btn--primary:hover { box-shadow: 0 16px 30px -14px var(--accent-glow); }
.btn--accent { background: var(--accent); color: var(--on-accent); }
.btn--ghost { --spin: var(--text); background: var(--surface); color: var(--text); border-color: var(--line-2); }
.btn--ghost:hover { border-color: var(--text); }
.btn--glass { --spin: #fff; background: rgba(255, 255, 255, 0.1); color: #fff; border-color: rgba(255, 255, 255, 0.18); backdrop-filter: blur(10px); }
.btn--glass:hover { background: rgba(255, 255, 255, 0.18); }
.btn--danger { --spin: #fff; background: var(--bad); color: #fff; }
.btn--sm { min-height: 40px; padding: 0.5rem 0.95rem; font-size: 0.88rem; }
.btn--block { width: 100%; }
.btn[disabled], .btn.is-disabled { opacity: 0.45; cursor: not-allowed; transform: none; box-shadow: none; }
.btn.is-loading { color: transparent !important; }
.btn.is-loading > * { opacity: 0; }
.btn.is-loading::after {
  content: ''; position: absolute; left: 50%; top: 50%; width: 18px; height: 18px; margin: -9px 0 0 -9px;
  border-radius: 50%; border: 2px solid var(--spin); border-right-color: transparent; animation: spin 0.7s linear infinite;
}
.btn.is-done > * { opacity: 0; }
.btn.is-done::after {
  content: ''; position: absolute; left: 50%; top: 50%; width: 9px; height: 17px; margin: -11px 0 0 -4px;
  border: solid var(--spin); border-width: 0 2.5px 2.5px 0; transform: rotate(45deg) scale(0);
  animation: pop 0.5s var(--spring) forwards;
}
@keyframes pop { to { transform: rotate(45deg) scale(1); } }
@keyframes spin { to { transform: rotate(360deg); } }

.ripple {
  position: absolute; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%;
  background: currentColor; opacity: 0.25; pointer-events: none; z-index: -1; animation: ripple 0.7s var(--ease) forwards;
}
@keyframes ripple { to { transform: scale(30); opacity: 0; } }

.icon-btn {
  position: relative; overflow: hidden; isolation: isolate; display: grid; place-items: center; flex: none;
  width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--line); background: var(--surface); color: var(--text);
  cursor: pointer; transition: transform 0.45s var(--spring), background 0.3s, border-color 0.3s, box-shadow 0.3s;
}
.icon-btn:hover { transform: translateY(-2px); border-color: var(--line-2); box-shadow: var(--shadow-sm); }
.icon-btn:active { transform: scale(0.92); }
.icon-btn .i { width: 18px; height: 18px; }

.link {
  background: none; border: 0; padding: 0; cursor: pointer; color: var(--text); font-weight: 500; text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor); background-size: 0% 1px; background-repeat: no-repeat;
  background-position: 0 100%; transition: background-size 0.4s var(--ease);
}
.link:hover { background-size: 100% 1px; }

/* ---------- Campos con etiqueta flotante ---------- */
.field { position: relative; display: block; }
.field input, .field textarea, .field select {
  width: 100%; padding: 1.4rem 1rem 0.5rem; border-radius: var(--radius-sm);
  border: 1px solid var(--line-2); background: var(--surface); color: var(--text);
  font-weight: 500; font-size: 0.97rem; outline: none; resize: vertical;
  transition: border-color 0.25s, box-shadow 0.35s var(--ease), background 0.3s;
}
.field select { appearance: none; cursor: pointer; background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: calc(100% - 20px) 55%, calc(100% - 15px) 55%; background-size: 5px 5px; background-repeat: no-repeat; }
.field textarea { min-height: 96px; line-height: 1.5; }
.field > span { position: absolute; left: 1.02rem; top: 0.98rem; color: var(--muted); pointer-events: none; transform-origin: left top; transition: transform 0.3s var(--ease), color 0.25s; }
.field input:focus, .field textarea:focus, .field select:focus { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.field input:focus + span, .field input:not(:placeholder-shown) + span,
.field textarea:focus + span, .field textarea:not(:placeholder-shown) + span,
.field select + span { transform: translateY(-0.6rem) scale(0.76); }
.field.is-invalid input, .field.is-invalid textarea, .field.is-invalid select { border-color: var(--bad); box-shadow: 0 0 0 4px color-mix(in srgb, var(--bad) 15%, transparent); }
.field.is-invalid > span { color: var(--bad); }
.field--pass input { padding-right: 3.2rem; }
.eye { position: absolute; right: 0.5rem; top: 1.7rem; transform: translateY(-50%); width: 38px; height: 38px; border-radius: 50%; border: 0; background: transparent; cursor: pointer; display: grid; place-items: center; color: var(--muted); transition: background 0.2s, color 0.2s; }
.eye:hover { background: var(--surface-2); color: var(--text); }
.eye.is-on { color: var(--accent); }
.hint { font-size: 0.85rem; color: var(--muted); }

.is-shaking { animation: shake 0.45s var(--ease); }
@keyframes shake { 20% { transform: translateX(-7px); } 40% { transform: translateX(6px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(2px); } }

/* Casilla */
.check { display: flex; align-items: flex-start; gap: 0.7rem; cursor: pointer; font-size: 0.88rem; color: var(--muted); }
.check input { position: absolute; opacity: 0; pointer-events: none; }
.check__box { flex: none; width: 21px; height: 21px; margin-top: 1px; border-radius: 7px; border: 1px solid var(--line-2); background: var(--surface); display: grid; place-items: center; transition: background 0.25s, border-color 0.25s, transform 0.4s var(--spring); }
.check__box::after { content: ''; width: 5px; height: 10px; margin-top: -2px; border: solid var(--on-accent); border-width: 0 2px 2px 0; transform: rotate(45deg) scale(0); transition: transform 0.4s var(--spring); }
.check input:checked + .check__box { background: var(--accent); border-color: var(--accent); transform: scale(1.06); }
.check input:checked + .check__box::after { transform: rotate(45deg) scale(1); }
.check input:focus-visible + .check__box { outline: 2px solid var(--accent); outline-offset: 2px; }
.check.is-invalid .check__box { border-color: var(--bad); }
.check a { color: var(--text); font-weight: 500; }

/* Interruptor (como el de la referencia) */
.switch { display: inline-flex; align-items: center; gap: 0.7rem; cursor: pointer; font-weight: 500; }
.switch input { position: absolute; opacity: 0; pointer-events: none; }
.switch__track { position: relative; flex: none; width: 44px; height: 24px; border-radius: 99px; background: var(--surface-3); transition: background 0.35s; }
.switch__track::after { content: ''; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25); transition: transform 0.5s var(--spring), width 0.3s var(--ease); }
.switch:active .switch__track::after { width: 24px; }
.switch input:checked + .switch__track { background: var(--accent); }
.switch input:checked + .switch__track::after { transform: translateX(20px); background: var(--on-accent); }
.switch:active input:checked + .switch__track::after { transform: translateX(14px); }
.switch input:focus-visible + .switch__track { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Zona para soltar archivos */
.drop { position: relative; display: grid; justify-items: center; gap: 0.3rem; text-align: center; padding: 1.5rem 1rem; border-radius: var(--radius-sm); border: 1px dashed var(--line-2); background: var(--surface-2); cursor: pointer; transition: border-color 0.25s, background 0.25s, transform 0.4s var(--spring); }
.drop:hover, .drop.is-over { border-color: var(--accent); background: var(--accent-soft); }
.drop.is-over { transform: scale(1.02); }
.drop__icon { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: var(--surface); color: var(--text); box-shadow: var(--shadow-sm); transition: transform 0.5s var(--spring), background 0.3s, color 0.3s; }
.drop:hover .drop__icon { transform: translateY(-4px); background: var(--accent); color: var(--on-accent); }
.drop:hover .drop__icon .i { animation: iUp 0.7s var(--spring); }
.drop__label { font-weight: 500; }
.drop__hint { color: var(--muted); }
.drop__file { display: inline-flex; align-items: center; gap: 0.4rem; margin-top: 0.4rem; padding: 0.4rem 0.8rem; border-radius: 99px; background: var(--accent); color: var(--on-accent); font-size: 0.8rem; animation: rise 0.45s var(--spring); }
.drop.has-file { border-style: solid; border-color: var(--accent); }
.drop.is-invalid { border-color: var(--bad); }

/* ---------- Chips de estado ---------- */
.chip { --c: var(--muted); display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.3rem 0.65rem; border-radius: 99px; font: 500 0.76rem/1 var(--f-body); white-space: nowrap; color: var(--c); background: color-mix(in srgb, var(--c) 13%, transparent); }
.chip i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.chip--gold { --c: var(--warn); }
.chip--gold i { animation: blink 1.6s ease-in-out infinite; }
.chip--moss { --c: var(--info); }
.chip--moss i { animation: blink 1.1s ease-in-out infinite; }
.chip--lime { --c: var(--ok); }
.chip--rose { --c: var(--bad); }
.chip--muted { --c: var(--muted); }
@keyframes blink { 50% { opacity: 0.25; } }

/* ---------- Modal ---------- */
.modal { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 16px; }
.modal__backdrop { position: absolute; inset: 0; background: var(--scrim); backdrop-filter: blur(12px) saturate(1.2); animation: fadeIn 0.4s var(--ease); }
.modal__panel { position: relative; width: min(560px, 100%); max-height: calc(100dvh - 32px); overflow: auto; background: var(--surface); border: 1px solid var(--line); border-radius: 28px; box-shadow: var(--shadow-lg); animation: modalIn 0.7s var(--ease) both; }
.modal--wide .modal__panel { width: min(820px, 100%); }
.modal__head { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.3rem 1.5rem 1rem; background: color-mix(in srgb, var(--surface) 82%, transparent); backdrop-filter: blur(10px); }
.modal__head h3 { font-size: 1.3rem; font-weight: 600; }
.modal__head .icon-btn:hover { transform: rotate(90deg); }
.modal__body { padding: 0.25rem 1.5rem 1.6rem; }
.modal__body > * { animation: rise 0.6s var(--ease) both; }
.modal__body > *:nth-child(2) { animation-delay: 60ms; }
.modal__body > *:nth-child(3) { animation-delay: 120ms; }
.modal.is-closing .modal__backdrop { animation: fadeOut 0.3s var(--ease) forwards; }
.modal.is-closing .modal__panel { animation: modalOut 0.3s var(--ease) forwards; }
@keyframes modalIn {
  from { opacity: 0; transform: translateY(20px) scale(0.965); clip-path: circle(0px at var(--ox, 50%) var(--oy, 50%)); }
  to { opacity: 1; transform: none; clip-path: circle(1600px at var(--ox, 50%) var(--oy, 50%)); }
}
@keyframes modalOut { to { opacity: 0; transform: translateY(14px) scale(0.97); filter: blur(4px); } }
@keyframes fadeIn { from { opacity: 0; } }
@keyframes fadeOut { to { opacity: 0; } }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } }

.form-actions { display: flex; justify-content: flex-end; gap: 0.6rem; flex-wrap: wrap; margin-top: 0.4rem; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.form-grid .span-2 { grid-column: 1 / -1; }
@media (max-width: 640px) { .form-grid { grid-template-columns: 1fr; } }

/* ---------- Toasts ---------- */
.toasts { position: fixed; right: 20px; bottom: 20px; z-index: 300; display: grid; gap: 0.6rem; width: min(380px, calc(100vw - 32px)); }
.toast { position: relative; overflow: hidden; display: flex; align-items: center; gap: 0.8rem; padding: 0.85rem 1rem; border-radius: 20px; cursor: pointer; font-size: 0.92rem; color: var(--text); background: var(--glass); border: 1px solid var(--glass-line); backdrop-filter: blur(18px) saturate(1.4); box-shadow: var(--shadow-lg); animation: toastIn 0.6s var(--spring) both; }
.toast::after { content: ''; position: absolute; left: 0; bottom: 0; height: 2px; width: 100%; background: var(--accent); transform-origin: left; animation: toastBar 4.2s linear forwards; }
.toast--error::after { background: var(--bad); animation-duration: 6s; }
.toast__icon { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: var(--on-accent); }
.toast--error .toast__icon { background: var(--bad); color: #fff; }
.toast--info .toast__icon { background: var(--surface-3); color: var(--text); }
.toast__icon .i { width: 15px; height: 15px; stroke-width: 2.2; animation: iPop 0.6s 0.2s var(--spring); }
.toast.is-leaving { animation: toastOut 0.38s var(--ease) forwards; }
@keyframes toastIn { from { opacity: 0; transform: translateY(24px) scale(0.9); filter: blur(6px); } }
@keyframes toastOut { to { opacity: 0; transform: translateX(40px) scale(0.95); filter: blur(4px); } }
@keyframes toastBar { from { transform: scaleX(1); } to { transform: scaleX(0); } }
@media (max-width: 640px) { .toasts { left: 16px; right: 16px; bottom: 84px; width: auto; } }

/* ---------- Selector de tema (Claro / Oscuro + color) ---------- */
.theme-switch { display: inline-flex; align-items: center; gap: 0.5rem; }
.mode { position: relative; display: grid; grid-template-columns: 1fr 1fr; padding: 4px; border-radius: 99px; background: var(--surface-2); border: 1px solid var(--line); }
.mode button { position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; gap: 0.35rem; padding: 0.42rem 0.8rem; border: 0; background: none; border-radius: 99px; cursor: pointer; font-size: 0.82rem; color: var(--muted); transition: color 0.35s; }
.mode button .i { width: 15px; height: 15px; }
.mode button[aria-pressed="true"] { color: var(--text); }
.mode__ink { position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc(50% - 4px); border-radius: 99px; background: var(--surface); box-shadow: var(--shadow-sm); transition: transform 0.6s var(--spring); }
:root[data-theme="dark"] .mode__ink { transform: translateX(100%); background: var(--surface-3); }
.accent { position: relative; }
.accent__btn { width: 40px; height: 40px; }
.accent__dot { width: 18px; height: 18px; border-radius: 50%; background: conic-gradient(#3867ff, #13a068, #ff6a2a, #e5437c, #7b5cff, #3867ff); box-shadow: 0 0 0 3px var(--surface), 0 0 0 4.5px var(--accent); transition: transform 0.6s var(--spring), box-shadow 0.3s; }
.accent__btn:hover .accent__dot { transform: rotate(180deg) scale(1.1); }
.accent__pop { position: absolute; right: 0; top: calc(100% + 10px); z-index: 90; width: 232px; padding: 0.9rem; border-radius: 22px; background: var(--glass); border: 1px solid var(--glass-line); backdrop-filter: blur(20px) saturate(1.5); box-shadow: var(--shadow-lg); transform-origin: top right; animation: popIn 0.45s var(--spring); }
.accent__pop p { font-size: 0.78rem; color: var(--muted); margin-bottom: 0.7rem; }
.accent__list { display: grid; grid-template-columns: repeat(6, 1fr); gap: 0.35rem; }
.accent__list button { position: relative; aspect-ratio: 1; border-radius: 50%; border: 0; padding: 0; cursor: pointer; transition: transform 0.4s var(--spring); }
.accent__list button:hover { transform: scale(1.15); }
.accent__list button span { position: absolute; inset: 0; border-radius: 50%; }
.accent__list [data-accent-set="mono"] span { background: linear-gradient(135deg, #111 50%, #fff 50%); box-shadow: inset 0 0 0 1px var(--line-2); }
.accent__list [data-accent-set="azul"] span { background: #3867ff; }
.accent__list [data-accent-set="verde"] span { background: #13a068; }
.accent__list [data-accent-set="violeta"] span { background: #7b5cff; }
.accent__list [data-accent-set="naranja"] span { background: #ff6a2a; }
.accent__list [data-accent-set="rosa"] span { background: #e5437c; }
.accent__list button[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--surface), 0 0 0 3.5px var(--text); }
@keyframes popIn { from { opacity: 0; transform: scale(0.85) translateY(-6px); filter: blur(6px); } }
@media (max-width: 520px) { .mode button span { display: none; } }

/* ---------- Revelado al hacer scroll ---------- */
.reveal { opacity: 0; transform: translateY(28px); filter: blur(6px); transition: opacity 1s var(--ease), transform 1s var(--ease), filter 1s var(--ease); transition-delay: var(--d, 0ms); }
.reveal.is-visible { opacity: 1; transform: none; filter: none; }

/* Manchas de color difuminadas del fondo */
.blobs { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.blobs span { position: absolute; border-radius: 50%; filter: blur(90px); opacity: 0.55; background: var(--accent-glow); animation: drift 22s ease-in-out infinite; transition: background 0.6s; }
.blobs span:nth-child(1) { width: 520px; height: 520px; top: -160px; right: -120px; }
.blobs span:nth-child(2) { width: 420px; height: 420px; bottom: -160px; left: -140px; animation-delay: -8s; opacity: 0.35; }
@keyframes drift { 50% { transform: translate(-60px, 50px) scale(1.12); } }

/* Transición de salida entre páginas */
body.is-leaving { animation: pageOut 0.5s var(--ease) forwards; }
@keyframes pageOut { to { opacity: 0; transform: scale(0.985); filter: blur(6px); } }

/* Detalles del navegador con los colores del tema */
html { scrollbar-color: var(--line-2) transparent; scrollbar-width: thin; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 99px; border: 2px solid var(--canvas); }
::-webkit-scrollbar-thumb:hover { background: var(--muted); }
::-webkit-scrollbar-track { background: transparent; }
::placeholder { color: var(--muted); opacity: 1; }

/* Cifras alineadas en tablas y saldos */
.ledger__amount, .row__credits, .row__cell--mono, .summary span, .viz-tick, .viz-table td { font-variant-numeric: tabular-nums; }

/* Movimiento reducido: se activa si Windows/macOS tiene las animaciones apagadas (modo "Automático")
   o si el visitante elige "Reducidas". Menos y más suave, no cero: se quitan bucles, parallax,
   desplazamientos con el scroll e inclinación 3D; las entradas pasan a fundido y las
   micro-animaciones al pasar el ratón o hacer clic se conservan. */
:root[data-motion="reduced"] { scroll-behavior: auto; }
/* Bucles continuos */
:root[data-motion="reduced"] :is(.marquee__track, .blobs span, .cube--float, .cube--pulse .cube__f, .orbit, .wave i, .b-toggle__icon .i,
  .stat__icon .i, .stat__icon .i path, .banner .i, .drop__icon .i, .empty__art, .empty__art .i, .nav-item.is-active .i, .chip i,
  .timeline li.is-current span, .auth__glow, .auth__rings span, .spinner::before, .alert-chip .i),
:root[data-motion="reduced"] :is(.stat--alert, .balance, .b-balance, .main, .final__inner, .credit-pill__coin)::before,
:root[data-motion="reduced"] :is(.stat--alert, .main)::after { animation: none !important; }
/* Desplazamientos ligados al scroll */
:root[data-motion="reduced"] :is(.hero__copy, .bento, .b-cube__logo .cube, .marquee, .section-head, .step, .svc-grid .svc, .role, .final__inner, .final__cube .cube) {
  animation: none !important; translate: none; rotate: none; scale: none;
}
:root[data-motion="reduced"] .reveal { opacity: 1; transform: none; filter: none; transition: opacity 0.4s ease; }
/* Entradas: solo fundido, sin desplazamiento */
:root[data-motion="reduced"] :is(.view__inner.is-in > *, .svc, .order, .row, .ledger__item, .modal__body > *, .auth__pane > *, .hero-in,
  .hero__title .line > span, .nav, .b-card, .toast, .nav-item, .cube--intro .cube__f, .modal__panel, .auth__panel, .wallet, .ticket) { animation-name: fadeIn !important; }
/* Sin inclinación 3D */
:root[data-motion="reduced"] :is(.stat, .svc, .balance, .bento) { transform: none !important; }

/* Datos (códigos, correos, cuentas): números tabulares y un poco de aire */
.mono, .order__code, .row__email, .bank__row span { font-family: var(--f-mono); font-variant-numeric: tabular-nums; letter-spacing: 0.02em; }
.row__email { font-size: 0.92rem !important; }
.order__code { font-size: 0.9rem; }

/* =====================================================================
   Botones con dimensión suave: aro interior de luz, sombra difusa del color del botón
   y un brillo que recorre al pasar el cursor. Sin canto duro: flotan un poco y se asientan al presionar.
   ===================================================================== */
.btn { --lift: 0px; --glow: color-mix(in srgb, var(--accent) 45%, transparent); }
.btn--ghost { --glow: rgba(0, 0, 0, 0.14); }
:root[data-theme="dark"] .btn--ghost { --glow: rgba(0, 0, 0, 0.55); }
.btn--danger { --glow: color-mix(in srgb, var(--bad) 45%, transparent); }
.btn--glass { --glow: rgba(0, 0, 0, 0.35); }
:root[data-accent="mono"] :is(.btn--primary, .btn--accent) { --glow: rgba(0, 0, 0, 0.28); }

.btn:is(.btn--primary, .btn--accent, .btn--ghost, .btn--danger, .btn--glass) {
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0) 60%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    0 1px 2px rgba(0, 0, 0, 0.14),
    0 8px 18px -10px var(--glow);
  transform: translateY(var(--lift));
  transition: transform 0.45s var(--spring), box-shadow 0.45s var(--ease), background-color 0.3s, color 0.3s, border-color 0.3s;
}
.btn--ghost:is(.btn) { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 1px 2px rgba(0, 0, 0, 0.06), 0 8px 18px -12px var(--glow); }
:root[data-theme="dark"] .btn--ghost:is(.btn) { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 1px 2px rgba(0, 0, 0, 0.3), 0 8px 18px -12px var(--glow); }
.btn:is(.btn--primary, .btn--accent, .btn--ghost, .btn--danger, .btn--glass):hover {
  --lift: -3px;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    0 2px 4px rgba(0, 0, 0, 0.12),
    0 18px 30px -14px var(--glow);
}
.btn:is(.btn--primary, .btn--accent, .btn--ghost, .btn--danger, .btn--glass):active {
  --lift: 0px;
  transform: translateY(1px) scale(0.97);
  transition-duration: 0.1s;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1), inset 0 2px 6px rgba(0, 0, 0, 0.18), 0 2px 6px -4px var(--glow);
}
.btn[disabled], .btn.is-loading { transform: none !important; box-shadow: none !important; }

/* Botones redondos de icono: aro de luz y sombra suave */
.icon-btn { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 1px 2px rgba(0, 0, 0, 0.06), 0 6px 14px -10px rgba(0, 0, 0, 0.35); }
:root[data-theme="dark"] .icon-btn { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 1px 2px rgba(0, 0, 0, 0.35), 0 6px 14px -10px rgba(0, 0, 0, 0.7); }
.icon-btn:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--accent) 45%, var(--line-2)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 10px 20px -12px color-mix(in srgb, var(--accent) 55%, transparent); }
.icon-btn:active { transform: scale(0.92); box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.16); transition-duration: 0.08s; }

/* Interruptores y selectores con volumen */
.switch__track { box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.18); }
.switch__track::after { background-image: linear-gradient(180deg, #fff, #e9e9ee); box-shadow: 0 2px 0 rgba(0, 0, 0, 0.12), 0 4px 10px rgba(0, 0, 0, 0.3); }
.mode__ink { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 2px 0 var(--line-2), 0 6px 12px -6px rgba(0, 0, 0, 0.3); }
:root[data-theme="dark"] .mode__ink { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 2px 0 #111114, 0 6px 12px -6px rgba(0, 0, 0, 0.6); }

/* Logotipo: VEX grande + "Trámites digitales" en pequeño */
.brand__text { display: grid; gap: 6px; line-height: 1; text-transform: none; }
.brand__text b { font: 700 1.3rem/1 var(--f-head); letter-spacing: 0.04em; }
.brand__text small { font: 500 0.78rem/1 var(--f-body); letter-spacing: 0.01em; color: var(--muted); white-space: nowrap; }

/* Selector de animaciones (dentro del panel de color) */
.accent__pop { width: 272px; }
.accent__sub { margin: 1rem 0 0.55rem !important; }
.motion { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; padding: 3px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--line); }
.motion button { border: 0; background: transparent; padding: 0.45rem 0.2rem; border-radius: 9px; cursor: pointer; font: 500 0.82rem var(--f-body); color: var(--muted); transition: background 0.25s, color 0.25s, box-shadow 0.25s; }
.motion button:hover { color: var(--text); }
.motion button[aria-pressed="true"] { background: var(--surface); color: var(--text); box-shadow: 0 2px 0 var(--line-2), 0 4px 10px -6px rgba(0, 0, 0, 0.3); }
:root[data-theme="dark"] .motion button[aria-pressed="true"] { background: var(--surface-3); box-shadow: 0 2px 0 #111114; }
.accent__hint { margin: 0.6rem 0 0 !important; font-size: 0.78rem !important; line-height: 1.4; color: var(--warn) !important; }
.accent__hint:empty { display: none; }

/* ---------- Apariencia (variante compacta de la portada y el panel) ----------
   Botón sin borde, solo el icono; el panel es una lista corta de tres filas: etiqueta y control. */
.appearance__btn { width: 36px; height: 36px; border-color: transparent; background: transparent; color: var(--muted); box-shadow: none; }
.appearance__btn:hover, .appearance__btn[aria-expanded="true"] { transform: none; border-color: transparent; background: var(--surface-2); color: var(--text); box-shadow: none; }
.appearance__btn .i { width: 18px; height: 18px; }
.appearance__pop { width: 240px; display: grid; gap: 0.7rem; padding: 0.75rem; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); backdrop-filter: none; box-shadow: var(--shadow); animation: none; }
.appearance__pop[hidden] { display: none; }
.appearance__row { display: grid; gap: 0.35rem; }
.appearance__label { font: 500 0.75rem/1.2 var(--f-body); color: var(--muted); }
.appearance__seg { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 2px; padding: 2px; border-radius: 8px; background: var(--surface-2); }
.appearance__seg button { display: inline-flex; align-items: center; justify-content: center; gap: 0.35rem; min-width: 0; min-height: 30px; padding: 0 0.4rem; border: 0; border-radius: 6px; background: transparent; color: var(--muted); font: 500 0.8rem/1 var(--f-body); white-space: nowrap; cursor: pointer; transition: background 0.2s, color 0.2s; }
.appearance__seg button .i { width: 14px; height: 14px; flex: none; }
.appearance__seg button:hover { color: var(--text); }
.appearance__seg button[aria-pressed="true"] { background: var(--surface); color: var(--text); box-shadow: 0 0 0 1px var(--line); }
:root[data-theme="dark"] .appearance__seg button[aria-pressed="true"] { background: var(--surface-3); box-shadow: none; }
.appearance__pop .accent__list { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.appearance__pop .accent__list button { width: 20px; height: 20px; aspect-ratio: auto; }
.appearance__pop .accent__list button:hover { transform: none; }
.appearance__pop .accent__list button[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--surface), 0 0 0 3px var(--text); }
.appearance__pop .appearance__hint { margin: 0; font-size: 0.75rem; line-height: 1.4; color: var(--muted); }
.appearance__hint:empty { display: none; }
/* Pantallas táctiles: controles más altos y círculos más grandes */
@media (pointer: coarse) {
  .appearance__seg button { min-height: 40px; }
  .appearance__pop .accent__list { gap: 0.6rem; }
  .appearance__pop .accent__list button { width: 28px; height: 28px; }
}

/* Nada puede desplazar la página hacia los lados (ni al tocar en celular) */
html, body { overflow-x: clip; }
@media (max-width: 420px) { .nav .brand__text small { display: none; } }

/* Dirección sobria: sin bucles decorativos permanentes. Las manchas de fondo se retiran;
   el cubo de VEX conserva su entrada y el giro al pasar el ratón, pero ya no flota sin parar. */
.blobs { display: none; }
.cube--float { animation: none; }
.chip--gold i, .chip--moss i { animation: none; }
.nav-item.is-active .i { animation: none; }
.i[data-i="settings"], .i[data-i="sun"], .i[data-i="spark"], .i[data-i="upload"], .i[data-i="download"],
.i[data-i="arrow"], .i[data-i="logout"], .i[data-i="back"] { --ic: 1; }

/* Mensaje de error de cada campo (lo crea validate() en ui.js) */
.field-error { display: flex; gap: 0.4rem; align-items: flex-start; margin-top: 0.4rem; font-size: 0.85rem; line-height: 1.4; color: var(--bad); }
.field-error[hidden] { display: none; }
:root:not([data-theme="dark"]) { --bad-text: #b42318; }
:root[data-theme="dark"] { --bad-text: var(--bad); }
.field-error, .field.is-invalid > span { color: var(--bad-text); }

/* Enlace para saltar al contenido */
.skip { position: fixed; left: 12px; top: -60px; z-index: 400; padding: 0.7rem 1rem; border-radius: 12px; background: var(--text); color: var(--canvas); font-weight: 600; text-decoration: none; transition: top 0.2s; }
.skip:focus { top: 12px; }
/* =====================================================================
   Rendimiento (todos los equipos): mismo aspecto, mucho menos trabajo por cuadro
   ===================================================================== */
/* Luces de fondo: degradado radial en vez de filter: blur(). El desenfoque de 60–110 px se
   recalculaba en cada cuadro de su animación; el degradado se pinta una vez y solo se mueve. */
.blobs span, .balance::before, .b-balance::before, .final__inner::before, .auth__glow {
  filter: none;
  background: radial-gradient(closest-side, var(--accent-glow), color-mix(in srgb, var(--accent-glow) 45%, transparent) 55%, transparent);
  scale: 1.5;
  will-change: transform;
  transition: none;
}
/* Entradas sin desenfoque: solo opacidad y movimiento (las anima la GPU) */
.reveal { filter: none; transition: opacity 0.9s var(--ease), transform 0.9s var(--ease); }
@keyframes toastIn { from { opacity: 0; transform: translateY(24px) scale(0.9); } }
@keyframes toastOut { to { opacity: 0; transform: translateX(40px) scale(0.95); } }
@keyframes popIn { from { opacity: 0; transform: scale(0.85) translateY(-6px); } }
@keyframes modalOut { to { opacity: 0; transform: translateY(14px) scale(0.97); } }
@keyframes pageOut { to { opacity: 0; transform: scale(0.985); } }

/* =====================================================================
   Modo ligero: se activa solo en equipos modestos (o si la página va lenta).
   Mismo diseño y animaciones de entrada; sin efectos continuos ni vidrio esmerilado.
   El visitante puede volver a "Completas" en el selector de color → Animaciones.
   ===================================================================== */
/* Las animaciones decorativas en bucle se reproducen una vez y se detienen */
:root[data-perf="lite"] *, :root[data-perf="lite"] *::before, :root[data-perf="lite"] *::after { animation-iteration-count: 1 !important; }
/* …excepto los indicadores de carga */
:root[data-perf="lite"] :is(.btn.is-loading::after, .spinner::before, .boot, .boot *, .skeleton, .skeleton *) { animation-iteration-count: infinite !important; }
/* Sin vidrio esmerilado (backdrop-filter es de lo más costoso): fondos casi opacos */
:root[data-perf="lite"] * { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
:root[data-perf="lite"] :is(.nav, .topbar, .banner--demo, .accent__pop, .modal__head) { background: color-mix(in srgb, var(--surface) 96%, transparent) !important; }
:root[data-perf="lite"] :is(.modal__backdrop, .auth__backdrop) { background: color-mix(in srgb, #000 62%, transparent) !important; }
:root[data-perf="lite"] .btn--glass { background: rgba(255, 255, 255, 0.16); }
/* Luces de fondo quietas */
:root[data-perf="lite"] :is(.blobs span, .balance::before, .auth__glow) { animation: none !important; will-change: auto; }
/* Sombras más simples y entradas más cortas */
:root[data-perf="lite"] :is(.svc, .order, .stat, .row, .proposal, .cat-group):hover { box-shadow: none !important; }
:root[data-perf="lite"] .view__inner.is-in > * { animation-duration: 0.35s !important; animation-delay: calc(var(--i, 0) * 30ms) !important; }

/* =====================================================================
   Rendimiento máximo (todos los equipos): la app se ve igual, pero sin efectos que cuesten.
   Este bloque solo cambia estilos; para volver al comportamiento anterior basta con borrarlo.
   ===================================================================== */
/* 1. Sin animaciones decorativas: el contenido aparece al instante */
*, *::before, *::after { animation: none !important; }
.reveal { opacity: 1; transform: none; transition: none; }
:is(.blobs span, .balance::before, .b-balance::before, .final__inner::before, .auth__glow) { will-change: auto; }
.skel { background: var(--surface-2) !important; }

/* …excepto lo que informa: indicadores de carga y entradas/salidas cortas de capas */
.btn.is-loading::after { animation: spin 0.7s linear infinite !important; }
.cube--pulse .cube__f { animation: facePulse 1.5s var(--ease) infinite !important; }
.btn.is-done::after { transform: rotate(45deg) scale(1); }
:is(.modal__backdrop, .modal__panel, .auth__backdrop, .auth__panel, .toast, .accent__pop) { animation: fadeIn 0.15s ease both !important; }
:is(.modal.is-closing .modal__backdrop, .modal.is-closing .modal__panel, .auth.is-closing .auth__backdrop,
  .auth.is-closing .auth__panel, .toast.is-leaving) { animation: fadeOut 0.15s ease forwards !important; }
/* La onda de los botones no se ve; dura 1 ms para que ui.js la retire al terminar */
.ripple { visibility: hidden; animation: ripple 1ms forwards !important; }

/* 2. Sin vidrio esmerilado: fondos casi opacos */
* { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
:is(.toast, .accent__pop, .viz-tip) { background: var(--surface) !important; }
:is(.accent__pop, .modal__head) { background: color-mix(in srgb, var(--surface) 96%, transparent) !important; }
:is(.modal__backdrop, .auth__backdrop) { background: color-mix(in srgb, #000 62%, transparent) !important; }
.btn--glass { background: rgba(255, 255, 255, 0.16); }

/* 3. Transiciones cortas y solo de color (sin sombras ni movimientos con resorte) */
:is(.btn, .icon-btn, .nav-item, .pill, .drop__icon, .accent__dot, .notice, .order, .svc, .stat, .row, .proposal, .cat-group) {
  transition-property: background-color, color, border-color, opacity, transform !important;
  transition-duration: 0.12s !important;
  transition-timing-function: ease !important;
}
.boot { transition-duration: 0.2s; }
.switch__track::after { transition: transform 0.12s ease, width 0.12s ease; }

/* =====================================================================
   Accesibilidad y uso (WCAG 2.2 AA): mismo diseño, ajustes de contraste y de uso táctil
   ===================================================================== */
/* Texto en verde/rojo legible sobre blanco (≥ 4.5:1); en oscuro ya cumplían */
:root:not([data-theme="dark"]) { --ok-text: #15803d; --bad-strong: #c62f35; }
:root[data-theme="dark"] { --ok-text: var(--ok); --bad-strong: #c62f35; }
:is(.ledger__amount.is-in, .ledger__icon--in, .cep-ok) { color: var(--ok-text) !important; }
:is(.ledger__amount.is-out, .ledger__icon--out, .delta--down, .seg2 input#op-sub:checked + label, .motivos .pill.is-active, .empty--error .empty__art) { color: var(--bad-text); }
:root .motivos .pill.is-active { border-color: var(--bad-text); }
/* Botón de peligro: texto blanco con contraste suficiente en ambos temas */
.btn--danger { background: var(--bad-strong); }

/* Borde de los campos visible (≥ 3:1 contra el fondo) para distinguirlos sin depender del foco */
:root:not([data-theme="dark"]) { --field-line: #8a8a93; }
:root[data-theme="dark"] { --field-line: #6b6b74; }
.field input, .field textarea, .field select { border-color: var(--field-line); }

/* Celular: 16 px en los campos evita que iOS acerque la página al escribir */
@media (pointer: coarse) { .field input, .field textarea, .field select { font-size: 16px; } }

/* Toques sin la espera de doble toque ni el destello gris del navegador */
:is(a, button, label, summary, select, [role="button"]) { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }

/* Círculos de color con área mínima de 24 px */
.appearance__pop .accent__list button { width: 24px; height: 24px; }
@media (pointer: coarse) { .appearance__pop .accent__list button { width: 28px; height: 28px; } }

/* =====================================================================
   Notificaciones (toasts): la única animación que se reactiva en la app.
   Solo transform y opacidad (las anima la GPU, sin desenfoques), así que no afecta la fluidez.
   Entrada con un pequeño rebote, ícono que "salta", barra de tiempo restante y salida hacia la derecha.
   Si algo falla, la notificación además se sacude para llamar la atención.
   ===================================================================== */
@keyframes vexToastIn {
  from { opacity: 0; transform: translateY(18px) scale(0.96); }
  60% { opacity: 1; transform: translateY(-3px) scale(1.01); }
  to { opacity: 1; transform: none; }
}
@keyframes vexToastOut { to { opacity: 0; transform: translateX(28px) scale(0.97); } }
@keyframes vexToastShake {
  0%, 100% { transform: none; }
  20% { transform: translateX(-6px); }
  40% { transform: translateX(5px); }
  60% { transform: translateX(-3px); }
  80% { transform: translateX(2px); }
}
@keyframes vexToastIcon { 0% { transform: scale(0.4); opacity: 0; } 60% { transform: scale(1.2); opacity: 1; } to { transform: none; opacity: 1; } }

.toasts .toast { animation: vexToastIn 0.38s cubic-bezier(0.22, 1, 0.36, 1) both !important; }
.toasts .toast--error { animation: vexToastIn 0.38s cubic-bezier(0.22, 1, 0.36, 1) both, vexToastShake 0.42s 0.38s ease-in-out !important; }
.toasts .toast__icon .i { animation: vexToastIcon 0.45s 0.12s cubic-bezier(0.34, 1.56, 0.64, 1) both !important; }
/* Barra inferior: cuánto falta para que se cierre sola (4.2 s; 6 s si es error) */
.toasts .toast::after { animation: toastBar 4.2s linear forwards !important; }
.toasts .toast--error::after { animation-duration: 6s !important; }
.toasts .toast.is-leaving { animation: vexToastOut 0.3s cubic-bezier(0.4, 0, 1, 1) forwards !important; }

/* Movimiento reducido (sistema o "Animaciones: Reducidas"): solo fundido, sin rebote ni sacudida */
:root[data-motion="reduced"] .toasts .toast,
:root[data-motion="reduced"] .toasts .toast--error { animation: fadeIn 0.2s ease both !important; }
:root[data-motion="reduced"] .toasts .toast__icon .i { animation: none !important; }
:root[data-motion="reduced"] .toasts .toast.is-leaving { animation: fadeOut 0.2s ease forwards !important; }