/* ═══════════════════════════════════════════════════════
   KLARO BANK — base.css v4  (solo visual, sin tocar lógica)
   Paleta: violeta · lavanda · azul perla · blanco glass
═══════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=DM+Mono:wght@400;500&display=swap');

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

:root {
  /* ── Paleta fintech violeta-lavanda ── */
  --k1:#1A0533;          /* Violeta profundo */
  --k2:#4C1D95;          /* Violeta medio   */
  --k3:#7C3AED;          /* Violeta principal */
  --k4:#A78BFA;          /* Lavanda suave   */
  --k5:#C4B5FD;          /* Lavanda clara   */
  --k6:#E879F9;          /* Fucsia acento   */
  --k7:#38BDF8;          /* Azul claro      */
  --ok:#10B981;          /* Verde éxito     */
  --err:#F43F5E;         /* Rojo error      */

  /* Gradientes */
  --grad:          linear-gradient(135deg, #4C1D95 0%, #7C3AED 50%, #6366F1 100%);
  --grad-soft:     linear-gradient(135deg, #7C3AED22 0%, #818CF822 100%);
  --grad-hero:     linear-gradient(135deg, #1A0533 0%, #2D1260 40%, #4C1D95 70%, #6D28D9 100%);
  --grad-card:     linear-gradient(145deg, rgba(255,255,255,.14) 0%, rgba(255,255,255,.04) 100%);
  --grad-violet:   linear-gradient(135deg, #7C3AED, #6366F1);
  --grad-lavanda:  linear-gradient(135deg, #A78BFA, #C4B5FD);
  --grad-accent:   linear-gradient(135deg, #E879F9, #A78BFA);
  --grad-sidebar:  linear-gradient(180deg, #1A0533 0%, #2D1260 50%, #1A0533 100%);

  /* Fondos */
  --bg:         #F5F3FF;
  --bg2:        #FFFFFF;
  --bg3:        #EDE9FE;
  --bg-app:     #F8F7FF;
  --bg-dark:    #0F0520;

  /* Texto */
  --text:       #1A0533;
  --text2:      #5B4B8A;
  --text3:      #9C8EC1;

  /* Bordes glass */
  --border:     rgba(124,58,237,.12);
  --border2:    rgba(124,58,237,.22);
  --border-w:   rgba(255,255,255,.22);

  /* Glass */
  --glass:      rgba(255,255,255,.10);
  --glass-md:   rgba(255,255,255,.18);
  --glass-hi:   rgba(255,255,255,.28);
  --glass-dark: rgba(26,5,51,.45);
  --glass-frost: rgba(248,247,255,.88);

  /* Sombras */
  --shadow-xs:  0 1px 6px rgba(76,29,149,.07);
  --shadow-sm:  0 2px 12px rgba(76,29,149,.09);
  --shadow:     0 8px 32px rgba(76,29,149,.13);
  --shadow-lg:  0 16px 56px rgba(76,29,149,.18);
  --shadow-xl:  0 28px 80px rgba(76,29,149,.22);
  --shadow-glow:0 0 40px rgba(167,139,250,.35);
  --shadow-card:0 4px 24px rgba(76,29,149,.09), 0 1px 4px rgba(76,29,149,.05);

  /* Radios */
  --radius:    20px;
  --radius-sm: 14px;
  --radius-xs: 10px;
  --radius-pill:999px;

  /* Layout */
  --sidebar:260px;
}

html { font-size:15px; scroll-behavior:smooth; }

body {
  font-family:'Inter', system-ui, sans-serif;
  background:var(--bg-app);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* Scrollbar */
::-webkit-scrollbar { width:5px; height:5px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:var(--k4); border-radius:99px; opacity:.5; }

/* Screens */
.screen { display:none; min-height:100vh; }
.screen.active { display:block; }
.app-screen.active { display:flex; }

/* Gradient text */
.gt {
  background:var(--grad-violet);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
.gt-lavanda {
  background:var(--grad-lavanda);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
.gt-accent {
  background:var(--grad-accent);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}

/* Glass utilities */
.glass {
  background:var(--glass);
  backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
  border:1px solid var(--border-w);
}
.glass-light {
  background:var(--glass-frost);
  backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px);
  border:1px solid rgba(255,255,255,.6);
}

/* Tipografía */
.font-display { font-family:'Inter', sans-serif; }
.font-mono    { font-family:'DM Mono', monospace; }

/* Marca */
.brand-word {
  font-family:'Inter', sans-serif;
  font-size:22px; font-weight:800;
  background:var(--grad-violet);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
  letter-spacing:-.5px;
}
.brand-word-white {
  background:none!important;
  -webkit-text-fill-color:#fff!important;
  color:#fff!important;
}
.brand-word-sm { font-size:18px; }

/* Klaro mark */
.klaro-mark {
  width:40px; height:40px; border-radius:12px;
  background:var(--grad-violet);
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0; box-shadow:var(--shadow-glow);
}
.klaro-mark-sm { width:32px; height:32px; border-radius:9px; }

/* Section bar */
.section-bar {
  display:flex; align-items:center; justify-content:space-between; margin-bottom:16px;
}
.section-bar-title {
  font-weight:700; font-size:16px; color:var(--k1);
}

/* Two col */
.two-col { display:grid; grid-template-columns:1fr 340px; gap:20px; align-items:start; }

/* Decorative line */
.gold-line {
  height:3px; width:48px; border-radius:99px;
  background:var(--grad-violet); margin-bottom:16px;
}

/* Animaciones */
@keyframes fadeUp   { from{opacity:0;transform:translateY(16px)} to{opacity:1;transform:translateY(0)} }
@keyframes fadeIn   { from{opacity:0} to{opacity:1} }
@keyframes float    { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} }
@keyframes glow-pulse { 0%,100%{box-shadow:0 0 20px rgba(167,139,250,.3)} 50%{box-shadow:0 0 40px rgba(167,139,250,.6)} }
@keyframes shimmer  { from{background-position:-200% 0} to{background-position:200% 0} }
@keyframes spin-slow { from{transform:rotate(0deg)} to{transform:rotate(360deg)} }
@keyframes badge-pulse { 0%,100%{opacity:1} 50%{opacity:.4} }

/* Responsive */
@media(max-width:1100px) { .two-col, .dash-two-col { grid-template-columns:1fr; } }
@media(max-width:600px)  { .form-row { grid-template-columns:1fr; } }

/* Klaro theme modes */
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] {
  color-scheme: dark;
  --k1:#F7F2FF;
  --k2:#CDBDFF;
  --k3:#9D7CFF;
  --k4:#BCA8FF;
  --k5:#D8CEFF;
  --k6:#F08CFF;
  --k7:#67D4FF;
  --bg:#10091F;
  --bg2:#171027;
  --bg3:#211535;
  --bg-app:#0E071B;
  --bg-dark:#080312;
  --text:#F8F4FF;
  --text2:#D3C7EF;
  --text3:#A999CE;
  --border:rgba(216,206,255,.16);
  --border2:rgba(188,168,255,.28);
  --glass:rgba(255,255,255,.08);
  --glass-md:rgba(255,255,255,.12);
  --glass-hi:rgba(255,255,255,.18);
  --glass-dark:rgba(6,3,16,.62);
  --glass-frost:rgba(18,10,33,.86);
  --shadow-xs:0 1px 6px rgba(0,0,0,.22);
  --shadow-sm:0 2px 12px rgba(0,0,0,.26);
  --shadow:0 12px 34px rgba(0,0,0,.34);
  --shadow-lg:0 20px 58px rgba(0,0,0,.42);
  --shadow-xl:0 30px 84px rgba(0,0,0,.5);
  --shadow-card:0 12px 38px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.05);
}