/* ==========================================================================
   CredTok UI Kit v1.0
   Glassmorphism + neumorphism con microinteracciones.
   Requiere: ../03-design-tokens/tokens.css  y  ../06-tipografia/fonts.css
   Regla de materiales:
     · CRISTAL (glass)  → capas que flotan sobre el fondo aurora: tarjetas, barra lateral, modales, toasts.
     · RELIEVE (neu)    → controles que se tocan: interruptores, campos, pestañas, botones secundarios.
     · DEGRADADO        → una sola acción principal por vista y el saldo.
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

.ct-app {
  margin: 0;
  min-height: 100%;
  background: var(--ct-bg);
  color: var(--ct-text);
  font: var(--ct-text-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Fondo aurora: la luz que el cristal desenfoca. Va fijo detrás de todo. */
.ct-aurora { position: relative; isolation: isolate; overflow-x: clip; }
.ct-aurora::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: var(--ct-gradient-aurora);
  opacity: .55;
  animation: ct-drift var(--ct-duration-ambient) var(--ct-ease-standard) infinite alternate;
}
:root[data-theme="dark"] .ct-aurora::before { opacity: .8; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .ct-aurora::before { opacity: .8; } }
@keyframes ct-drift { from { transform: translate3d(0,0,0) scale(1); } to { transform: translate3d(0,-2%,0) scale(1.06); } }

/* ---------- Tipografía ---------- */
.ct-display-xl { font: var(--ct-text-display-xl); letter-spacing: var(--ct-tracking-display-xl); text-wrap: balance; }
.ct-display-lg { font: var(--ct-text-display-lg); letter-spacing: var(--ct-tracking-display-lg); text-wrap: balance; }
.ct-h1 { font: var(--ct-text-h1); letter-spacing: var(--ct-tracking-h1); text-wrap: balance; }
.ct-h2 { font: var(--ct-text-h2); letter-spacing: var(--ct-tracking-h2); text-wrap: balance; }
.ct-h3 { font: var(--ct-text-h3); letter-spacing: var(--ct-tracking-h3); }
.ct-body-lg { font: var(--ct-text-body-lg); }
.ct-body-sm { font: var(--ct-text-body-sm); }
.ct-label { font: var(--ct-text-label); letter-spacing: var(--ct-tracking-label); }
.ct-caption { font: var(--ct-text-caption); letter-spacing: var(--ct-tracking-caption); color: var(--ct-text-muted); }
.ct-overline { font: var(--ct-text-overline); letter-spacing: var(--ct-tracking-overline); text-transform: uppercase; color: var(--ct-text-muted); }
.ct-data-lg { font: var(--ct-text-data-lg); letter-spacing: var(--ct-tracking-data-lg); font-variant-numeric: tabular-nums; }
.ct-data-md { font: var(--ct-text-data-md); letter-spacing: var(--ct-tracking-data-md); font-variant-numeric: tabular-nums; }
.ct-data { font: var(--ct-text-data); font-variant-numeric: tabular-nums; }
.ct-muted { color: var(--ct-text-muted); }
.ct-gradient-text { background: var(--ct-gradient-tok); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ---------- Superficies ---------- */
.ct-glass {
  background: var(--ct-glass-bg);
  border: 1px solid var(--ct-glass-border);
  border-radius: var(--ct-radius-xl);
  box-shadow: var(--ct-shadow-glass);
  -webkit-backdrop-filter: blur(var(--ct-blur-md)) saturate(160%);
  backdrop-filter: blur(var(--ct-blur-md)) saturate(160%);
}
/* Sin soporte de backdrop-filter el cristal se vuelve sólido para conservar el contraste. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .ct-glass { background: var(--ct-surface); }
}
.ct-glass--strong { background: var(--ct-glass-bg-strong); }

.ct-neu {
  background: var(--ct-surface-neu);
  border-radius: var(--ct-radius-lg);
  box-shadow: var(--ct-shadow-neu);
}
.ct-neu--inset { box-shadow: var(--ct-shadow-neu-inset); }

.ct-card { padding: var(--ct-space-6); }
.ct-card--interactive {
  transition: transform var(--ct-duration-base) var(--ct-ease-out), box-shadow var(--ct-duration-base) var(--ct-ease-out);
}
.ct-card--interactive:hover { transform: translateY(-3px); }
.ct-card--interactive:active { transform: translateY(0) scale(.99); transition-duration: var(--ct-duration-instant); }

/* Tarjeta de saldo: el único bloque de degradado pleno del producto. */
.ct-balance {
  position: relative; overflow: hidden; isolation: isolate;
  padding: var(--ct-space-6);
  border-radius: var(--ct-radius-xl);
  color: #fff;
  background: var(--ct-gradient-brand);
  box-shadow: var(--ct-shadow-glow), 0 1px 0 rgba(255,255,255,.35) inset;
}
.ct-balance::before { /* brillo que sigue al puntero (ver credtok-ui.js) */
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(240px circle at var(--ct-mx, 80%) var(--ct-my, 0%), rgba(255,255,255,.34), transparent 65%);
  transition: opacity var(--ct-duration-base) var(--ct-ease-standard);
}
.ct-balance::after { /* destello de marca como marca de agua */
  content: ""; position: absolute; right: -28px; bottom: -36px; width: 170px; height: 170px; z-index: -1; opacity: .16;
  background: #fff;
  clip-path: path("M85 0Q93.500 76.500 170 85Q93.500 93.500 85 170Q76.500 93.500 0 85Q76.500 76.500 85 0Z");
}
.ct-balance .ct-caption, .ct-balance .ct-overline { color: rgba(255,255,255,.82); }

/* ---------- Botones ---------- */
.ct-btn {
  --_bg: var(--ct-surface-neu); --_fg: var(--ct-text);
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: var(--ct-space-2);
  min-height: 44px; padding: 0 var(--ct-space-5);
  border: 0; border-radius: var(--ct-radius-md);
  background: var(--_bg); color: var(--_fg);
  font: 600 .9375rem/1 var(--ct-font-body); letter-spacing: .005em; text-decoration: none; white-space: nowrap;
  cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent;
  transition: transform var(--ct-duration-fast) var(--ct-ease-spring), box-shadow var(--ct-duration-fast) var(--ct-ease-standard), filter var(--ct-duration-fast) var(--ct-ease-standard), background-color var(--ct-duration-fast);
}
.ct-btn svg { width: 18px; height: 18px; flex: none; transition: transform var(--ct-duration-base) var(--ct-ease-spring); }
.ct-btn:hover svg.ct-nudge { transform: translate(2px, -2px); }
.ct-btn:active { transform: scale(.965); transition-duration: var(--ct-duration-instant); }
.ct-btn:focus-visible, .ct-input:focus-visible, .ct-switch input:focus-visible + .ct-switch__track, .ct-nav__item:focus-visible, .ct-seg button:focus-visible, .ct-chip:focus-visible {
  outline: 0; box-shadow: 0 0 0 4px var(--ct-focus-ring);
}
.ct-btn[disabled], .ct-btn[aria-disabled="true"] { opacity: .5; pointer-events: none; }

.ct-btn--primary { --_fg: #fff; background: linear-gradient(135deg, var(--ct-blue-500), var(--ct-brand-indigo) 60%, var(--ct-violet-500)); background-size: 160% 160%; box-shadow: var(--ct-shadow-glow), 0 1px 0 rgba(255,255,255,.3) inset; }
.ct-btn--primary:hover { background-position: 100% 100%; filter: brightness(1.06); transform: translateY(-1px); }
.ct-btn--primary:active { transform: scale(.965); }
.ct-btn--neu { box-shadow: var(--ct-shadow-neu-sm); }
.ct-btn--neu:hover { color: var(--ct-primary-text); }
.ct-btn--neu:active, .ct-btn--neu[aria-pressed="true"] { box-shadow: var(--ct-shadow-neu-inset); transform: none; }
.ct-btn--glass { background: var(--ct-glass-bg); border: 1px solid var(--ct-glass-border); -webkit-backdrop-filter: blur(var(--ct-blur-sm)); backdrop-filter: blur(var(--ct-blur-sm)); }
.ct-btn--glass:hover { background: var(--ct-glass-bg-strong); }
.ct-btn--ghost { background: transparent; color: var(--ct-primary-text); }
.ct-btn--ghost:hover { background: color-mix(in srgb, var(--ct-primary) 10%, transparent); }
.ct-btn--sm { min-height: 36px; padding: 0 var(--ct-space-3); font-size: .8125rem; border-radius: var(--ct-radius-sm); }
.ct-btn--icon { width: 44px; padding: 0; }

/* Estado de carga y de éxito (añadir .is-loading / .is-done desde JS) */
.ct-btn.is-loading { color: transparent; pointer-events: none; }
.ct-btn.is-loading::after { content: ""; position: absolute; width: 18px; height: 18px; border-radius: 50%; border: 2px solid rgba(255,255,255,.4); border-top-color: #fff; animation: ct-spin .7s linear infinite; }
.ct-btn--neu.is-loading::after, .ct-btn--glass.is-loading::after { border-color: var(--ct-border-strong); border-top-color: var(--ct-primary); }
@keyframes ct-spin { to { transform: rotate(360deg); } }
.ct-btn.is-done { animation: ct-pop var(--ct-duration-slow) var(--ct-ease-spring); }
@keyframes ct-pop { 0% { transform: scale(.94); } 60% { transform: scale(1.04); } 100% { transform: scale(1); } }

/* ---------- Campos ---------- */
.ct-field { display: grid; gap: var(--ct-space-2); }
.ct-field > label { font: var(--ct-text-label); color: var(--ct-text-muted); }
.ct-input {
  width: 100%; min-height: 46px; padding: 0 var(--ct-space-4);
  border: 1px solid transparent; border-radius: var(--ct-radius-md);
  background: var(--ct-surface-neu); color: var(--ct-text);
  box-shadow: var(--ct-shadow-neu-inset);
  font: var(--ct-text-body-sm);
  transition: box-shadow var(--ct-duration-fast) var(--ct-ease-standard), border-color var(--ct-duration-fast);
}
.ct-input::placeholder { color: var(--ct-text-subtle); }
.ct-input:focus-visible { border-color: var(--ct-primary); box-shadow: var(--ct-shadow-neu-inset), 0 0 0 4px var(--ct-focus-ring); }
.ct-input[aria-invalid="true"] { border-color: var(--ct-danger); }
.ct-input-wrap { position: relative; display: flex; align-items: center; }
.ct-input-wrap > svg { position: absolute; left: 14px; width: 18px; height: 18px; color: var(--ct-text-subtle); pointer-events: none; transition: color var(--ct-duration-fast), transform var(--ct-duration-base) var(--ct-ease-spring); }
.ct-input-wrap > .ct-input { padding-left: 42px; }
.ct-input-wrap:focus-within > svg { color: var(--ct-primary); transform: scale(1.1); }
.ct-help { font: var(--ct-text-caption); color: var(--ct-text-muted); }
.ct-help--error { color: var(--ct-danger); }

/* ---------- Interruptor ---------- */
.ct-switch { display: inline-flex; align-items: center; gap: var(--ct-space-3); cursor: pointer; font: var(--ct-text-body-sm); }
.ct-switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.ct-switch__track { position: relative; width: 52px; height: 30px; flex: none; border-radius: var(--ct-radius-pill); background: var(--ct-surface-neu); box-shadow: var(--ct-shadow-neu-inset); transition: background var(--ct-duration-base) var(--ct-ease-standard); }
.ct-switch__track::after { content: ""; position: absolute; top: 4px; left: 4px; width: 22px; height: 22px; border-radius: 50%; background: var(--ct-surface); box-shadow: 0 2px 6px rgba(10,14,31,.28); transition: transform var(--ct-duration-base) var(--ct-ease-spring), width var(--ct-duration-fast); }
.ct-switch:active .ct-switch__track::after { width: 27px; }
.ct-switch input:checked + .ct-switch__track { background: var(--ct-gradient-tok); box-shadow: inset 0 1px 3px rgba(10,14,31,.25); }
.ct-switch input:checked + .ct-switch__track::after { transform: translateX(22px); background: #fff; }
.ct-switch:active input:checked + .ct-switch__track::after { transform: translateX(17px); }

/* ---------- Control segmentado (pestañas con pulgar deslizante) ---------- */
.ct-seg { position: relative; display: inline-grid; grid-auto-flow: column; grid-auto-columns: 1fr; padding: 4px; border-radius: var(--ct-radius-md); background: var(--ct-surface-neu); box-shadow: var(--ct-shadow-neu-inset); }
.ct-seg button { position: relative; z-index: 1; min-height: 36px; padding: 0 var(--ct-space-4); border: 0; border-radius: var(--ct-radius-sm); background: none; color: var(--ct-text-muted); font: 600 .8125rem/1 var(--ct-font-body); cursor: pointer; transition: color var(--ct-duration-fast); }
.ct-seg button[aria-selected="true"] { color: var(--ct-text); }
.ct-seg__thumb { position: absolute; top: 4px; bottom: 4px; left: 0; width: 0; border-radius: var(--ct-radius-sm); background: var(--ct-surface); box-shadow: 0 2px 8px rgba(10,14,31,.16), 0 0 0 1px var(--ct-glass-border); transition: transform var(--ct-duration-base) var(--ct-ease-spring), width var(--ct-duration-base) var(--ct-ease-spring); }

/* ---------- Chips y estados ---------- */
.ct-chip { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: var(--ct-radius-pill); font: 600 .75rem/1 var(--ct-font-body); background: color-mix(in srgb, var(--_c, var(--ct-primary)) 14%, transparent); color: var(--_c, var(--ct-primary-text)); }
.ct-chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.ct-chip--success { --_c: var(--ct-success); }
.ct-chip--warning { --_c: var(--ct-warning); }
.ct-chip--danger  { --_c: var(--ct-danger); }
.ct-chip--live::before { animation: ct-pulse 1.6s var(--ct-ease-standard) infinite; }
@keyframes ct-pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, currentColor 60%, transparent); } 100% { box-shadow: 0 0 0 7px transparent; } }
.ct-delta { display: inline-flex; align-items: center; gap: 4px; font: 600 .8125rem/1 var(--ct-font-mono); color: var(--ct-success); }
.ct-delta--down { color: var(--ct-danger); }
.ct-delta svg { width: 14px; height: 14px; }

/* ---------- Medidor de consumo de tokens ---------- */
.ct-meter { height: 10px; border-radius: var(--ct-radius-pill); background: var(--ct-surface-neu); box-shadow: var(--ct-shadow-neu-inset); overflow: hidden; }
.ct-meter > i { display: block; height: 100%; width: calc(var(--ct-value, 0) * 1%); border-radius: inherit; background: var(--ct-gradient-brand); background-size: 200% 100%; transform-origin: left; animation: ct-grow var(--ct-duration-slow) var(--ct-ease-out) both, ct-flow 3.5s linear infinite; }
.ct-meter--warning > i { background: linear-gradient(90deg, var(--ct-warning-400), var(--ct-warning-500)); }
.ct-meter--danger  > i { background: linear-gradient(90deg, var(--ct-danger-400), var(--ct-danger-500)); }
@keyframes ct-grow { from { transform: scaleX(0); } }
@keyframes ct-flow { to { background-position: -200% 0; } }

/* ---------- Navegación lateral ---------- */
.ct-nav { display: grid; gap: 4px; }
.ct-nav__item { position: relative; display: flex; align-items: center; gap: var(--ct-space-3); min-height: 44px; padding: 0 var(--ct-space-4); border-radius: var(--ct-radius-md); color: var(--ct-text-muted); font: 500 .9375rem/1 var(--ct-font-body); text-decoration: none; transition: color var(--ct-duration-fast), background var(--ct-duration-fast), transform var(--ct-duration-fast) var(--ct-ease-out); }
.ct-nav__item svg { width: 20px; height: 20px; flex: none; transition: transform var(--ct-duration-base) var(--ct-ease-spring); }
.ct-nav__item:hover { color: var(--ct-text); background: color-mix(in srgb, var(--ct-primary) 8%, transparent); }
.ct-nav__item:hover svg { transform: scale(1.12) rotate(-4deg); }
.ct-nav__item[aria-current="page"] { color: #fff; background: var(--ct-gradient-tok); box-shadow: var(--ct-shadow-glow); }

/* ---------- Lista de proveedores ---------- */
.ct-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--ct-space-4); padding: var(--ct-space-3) var(--ct-space-3); border-radius: var(--ct-radius-md); transition: background var(--ct-duration-fast), transform var(--ct-duration-fast) var(--ct-ease-out); }
.ct-row:hover { background: color-mix(in srgb, var(--ct-primary) 7%, transparent); transform: translateX(3px); }
.ct-avatar { display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--ct-radius-sm); background: var(--ct-surface-neu); box-shadow: var(--ct-shadow-neu-sm); color: var(--ct-primary-text); font: 700 .8125rem/1 var(--ct-font-display); }

/* ---------- Toast ---------- */
.ct-toasts { position: fixed; right: var(--ct-space-5); bottom: calc(var(--ct-space-5) + env(safe-area-inset-bottom, 0px)); z-index: var(--ct-z-toast); display: grid; gap: var(--ct-space-2); }
.ct-toast { display: flex; align-items: center; gap: var(--ct-space-3); padding: var(--ct-space-3) var(--ct-space-4); border-radius: var(--ct-radius-md); font: var(--ct-text-body-sm); animation: ct-toast-in var(--ct-duration-slow) var(--ct-ease-spring) both; }
.ct-toast svg { width: 18px; height: 18px; color: var(--ct-success); }
.ct-toast.is-leaving { animation: ct-toast-out var(--ct-duration-base) var(--ct-ease-in) both; }
@keyframes ct-toast-in { from { opacity: 0; transform: translateY(16px) scale(.96); } }
@keyframes ct-toast-out { to { opacity: 0; transform: translateY(8px) scale(.98); } }

/* ---------- Esqueleto de carga ---------- */
.ct-skeleton { border-radius: var(--ct-radius-sm); background: linear-gradient(100deg, var(--ct-bg-subtle) 30%, color-mix(in srgb, var(--ct-surface) 80%, var(--ct-bg-subtle)) 50%, var(--ct-bg-subtle) 70%); background-size: 220% 100%; animation: ct-shimmer 1.4s linear infinite; }
@keyframes ct-shimmer { to { background-position: -220% 0; } }

/* ---------- Entrada escalonada ---------- */
.ct-rise { animation: ct-rise var(--ct-duration-slow) var(--ct-ease-out) both; animation-delay: calc(var(--ct-i, 0) * 60ms); }
@keyframes ct-rise { from { opacity: 0; transform: translateY(14px); } }

/* ---------- Respeto a movimiento reducido ---------- */
@media (prefers-reduced-motion: reduce) {
  .ct-aurora::before, .ct-meter > i, .ct-skeleton, .ct-chip--live::before, .ct-rise, .ct-toast { animation: none !important; }
  .ct-btn, .ct-card--interactive, .ct-row, .ct-nav__item svg { transition: none !important; }
}