/* ═══════════════════════════════════════════════════════════════════
   OVB Allfinanz · Design Tokens (CSS Custom Properties)
   v1.0.0 · 2026-07-21
   Fuente: :root reales de los 7 proyectos OVB + tailwind.config.ts
   de Herramienta Hipotecas.
   Convención de nombres unificada: --ovb-*  (en los proyectos conviven
   --ovb-blue, --blue y --c-* ; este archivo consolida).
   [F] = valor encontrado literal en los proyectos
   [R] = valor recomendado (consolida variantes o no existía)
   ═══════════════════════════════════════════════════════════════════ */

:root {
  /* ── Marca · Azules ──────────────────────────────────────────── */
  --ovb-blue:        #003366; /* [F] color madre */
  --ovb-blue-dark:   #002244; /* [F][R] único azul oscuro (variantes encontradas: #002855 #001A33 #001E44) */
  --ovb-blue-medium: #336699; /* [F] */
  --ovb-blue-light:  #6699CC; /* [F] no usar como texto sobre blanco (3.0:1) */

  /* ── Acentos ─────────────────────────────────────────────────── */
  --ovb-hot-pink:    #FF3399; /* [F] CTA / energía */
  --ovb-berry:       #CC0066; /* [F] hover CTA / eliminar */
  --ovb-rose:        #FF66B2; /* [F][R] rosa claro único (variantes: #FF99CC #FF4FA3 #FF8AC4) */
  --ovb-teal:        #009999; /* [F] totales / métricas */
  --ovb-ocean:       #006666; /* [F] teal oscuro, texto AA */
  --ovb-sapphire:    #66CCCC; /* [F] */
  --ovb-growth:      #2E9F6E; /* [F] crecimiento */
  --ovb-growth-dark: #0F6B44; /* [F] texto AA */
  --ovb-orchid:      #9966CC; /* [F] acento puntual */

  /* ── Funcionales ─────────────────────────────────────────────── */
  --ovb-success:      var(--ovb-growth);      /* [R] reutiliza marca */
  --ovb-success-dark: var(--ovb-growth-dark); /* [R] */
  --ovb-warning:      #A35D00; /* [F] AA 5.09:1 (variantes: #E0A81E #B98708) */
  --ovb-error:        #991B1B; /* [F] AAA 8.31:1 (variantes: #E5142B #C8102E) */
  --ovb-alert:        #E5142B; /* [F] --alert en Onboarding; solo iconos/fondos */
  --ovb-info:         var(--ovb-blue-medium); /* [R] no existía token 'info' */
  --ovb-delete:       var(--ovb-berry);       /* [F] patrón Tracking Plan */

  /* ── Tintas de texto (3 modos encontrados) ───────────────────── */
  --ovb-ink:        #0A1F3A;              /* [F] modo presentación */
  --ovb-ink-soft:   #4A5A74;              /* [F] */
  --ovb-ink-tool:   #0A0A0B;              /* [F] modo herramienta */
  --ovb-ink-tool-soft:  rgba(10,10,11,0.62); /* [F] */
  --ovb-ink-tool-faint: rgba(10,10,11,0.38); /* [F] */
  --ovb-ink-app:    #1A1A1A;              /* [F] apps Outfit */
  --ovb-ink-app-soft: #5A6B7D;            /* [F] */

  /* ── Superficies y neutros ───────────────────────────────────── */
  --ovb-white:      #FFFFFF; /* [F] */
  --ovb-bg-deck:    #F5F8FC; /* [F] fondo frío · presentaciones */
  --ovb-grey-100:   #EEF2F7; /* [F] */
  --ovb-grey-200:   #D7E0EA; /* [F] */
  --ovb-grey-300:   #B9C5D4; /* [F] */
  --ovb-bg-tool:    #F7F6F1; /* [F] fondo crema · herramientas */
  --ovb-grey-tool:  #EEEDE7; /* [F] */
  --ovb-bg-app:     #F4F7FB; /* [F] Spartans */
  --ovb-grey:       #E5E5E5; /* [F] gris OVB decks */
  --ovb-lettering:  #F2F2F2; /* [F] gris rotulación OVB */

  /* ── Bordes ──────────────────────────────────────────────────── */
  --ovb-border:            rgba(10,10,11,0.08); /* [F] herramienta */
  --ovb-border-strong:     rgba(10,10,11,0.14); /* [F] */
  --ovb-border-app:        #D8E0E8;             /* [F] apps Outfit */
  --ovb-border-deck:       var(--ovb-grey-200); /* [F] decks */

  /* ── Tipografía ──────────────────────────────────────────────── */
  --ovb-font-brand:   'Segoe UI Historic', 'Segoe UI', 'Inter', system-ui, sans-serif; /* [F] */
  /* Decisión Dennis 2026-07-27: en ESTA app, "product" (modo app) = Segoe UI Historic;
     Outfit se descarta (sustituye, no convive; Outfit nunca se instaló). El token
     conserva su nombre; solo cambia su valor. Ver .ovb-body-app más abajo. */
  --ovb-font-product: 'Segoe UI Historic', 'Segoe UI', 'Inter', system-ui, sans-serif; /* [F] */
  --ovb-weight-regular: 400;  /* [F] */
  --ovb-weight-semibold: 600; /* [F] */
  --ovb-weight-bold: 700;     /* [F] */
  --ovb-weight-heavy: 800;    /* [F] peso firma de titulares */

  --ovb-text-2xs:  11px;  /* [F] eyebrows */
  --ovb-text-xs:   12px;  /* [F] */
  --ovb-text-sm:   13px;  /* [F] */
  --ovb-text-base: 15px;  /* [F] */
  --ovb-text-md:   18px;  /* [F] */
  --ovb-text-lg:   22px;  /* [F] */
  --ovb-text-xl:   26px;  /* [F] */
  --ovb-text-2xl:  32px;  /* [F] */
  --ovb-text-3xl:  44px;  /* [F] */
  --ovb-text-display: clamp(38px, 5vw, 80px);  /* [F] hero decks */
  --ovb-text-mega:    clamp(54px, 7vw, 118px); /* [F] cifra impacto */

  --ovb-tracking-tight:   -0.02em;  /* [F] display */
  --ovb-tracking-heading: -0.01em;  /* [F] */
  --ovb-tracking-body:    -0.005em; /* [F] */
  --ovb-tracking-caps:     0.22em;  /* [F] eyebrows (rango 0.14-0.3em) */

  --ovb-leading-display: 1.05; /* [F] */
  --ovb-leading-heading: 1.2;  /* [F] */
  --ovb-leading-body:    1.55; /* [F] */

  /* ── Espaciado (escala base 4 · [R] consolida valores ad hoc) ── */
  --ovb-space-1:  4px;
  --ovb-space-2:  8px;
  --ovb-space-3:  12px;
  --ovb-space-4:  16px;
  --ovb-space-5:  20px;
  --ovb-space-6:  24px;
  --ovb-space-8:  32px;
  --ovb-space-10: 40px;
  --ovb-space-12: 48px;
  --ovb-space-15: 60px;
  --ovb-space-20: 80px;
  /* Slides de presentación [F] */
  --ovb-pad-x: 120px;
  --ovb-pad-top: 100px;
  --ovb-pad-bottom: 90px;

  /* ── Radios [F] ──────────────────────────────────────────────── */
  --ovb-radius-xs:   6px;
  --ovb-radius-sm:   10px;
  --ovb-radius-md:   14px;
  --ovb-radius-lg:   20px;   /* --radius en APP.Grecia */
  --ovb-radius-xl:   28px;   /* --radius-lg en APP.Grecia */
  --ovb-radius-pill: 999px;
  --ovb-radius-circle: 50%;

  /* ── Sombras [F] ─────────────────────────────────────────────── */
  --ovb-shadow-card:       0 4px 20px rgba(0,51,102,0.08);
  --ovb-shadow-card-hover: 0 8px 32px rgba(0,51,102,0.14);
  --ovb-shadow-soft:       0 12px 28px -22px rgba(0,51,102,0.25);
  --ovb-shadow-float:      0 18px 38px -28px rgba(0,51,102,0.20);
  --ovb-shadow-hero:       0 30px 80px -20px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.05);
  --ovb-shadow-cta:        0 4px 14px rgba(255,51,153,0.35);
  --ovb-focus-ring:        0 0 0 4px rgba(255,51,153,0.2);

  /* ── Gradientes [F] ──────────────────────────────────────────── */
  --ovb-grad-blue:     linear-gradient(160deg, #336699 0%, #003366 100%);
  --ovb-grad-pink:     linear-gradient(160deg, #FF3399 0%, #CC0066 100%);
  --ovb-grad-teal:     linear-gradient(160deg, #009999 0%, #006666 100%);
  --ovb-grad-sapphire: linear-gradient(160deg, #66CCCC 0%, #336699 100%);
  --ovb-grad-green:    linear-gradient(160deg, #0F6B44 0%, #2E9F6E 100%);
  --ovb-grad-hero:     linear-gradient(135deg, #001E44 0%, #002855 38%, #003366 70%, #0B4680 100%);
  --ovb-grad-brand:    linear-gradient(135deg, #003366 0%, #002244 100%);

  /* ── Capas [R] ───────────────────────────────────────────────── */
  --ovb-z-base: 0;
  --ovb-z-raised: 1;
  --ovb-z-sticky: 100;
  --ovb-z-overlay: 200;
  --ovb-z-modal: 1000;

  /* ── Movimiento [F] ──────────────────────────────────────────── */
  --ovb-duration-fast: 150ms;
  --ovb-duration-base: 200ms;
  --ovb-duration-slow: 400ms;
  --ovb-ease-out: cubic-bezier(0.22, 1, 0.36, 1);

  /* ── Estados de interacción ──────────────────────────────────── */
  --ovb-disabled-opacity: 0.4;              /* [F] encontrados 0.35/0.4/0.55, consolidado */
  --ovb-disabled-text: #B9C5D4;             /* [F] .lang-option.disabled */
  --ovb-field-error-bg: rgba(255,51,153,0.1);   /* [F] .error-msg Jubilación */
  --ovb-field-error-text: var(--ovb-berry);     /* [F] */
  --ovb-field-error-border: 4px solid var(--ovb-hot-pink); /* [F] */

  /* ── Retícula [F] ────────────────────────────────────────────── */
  --ovb-container-max: 1200px;
  --ovb-grid-gap: 14px;
}

/* Breakpoints de referencia [R] — CSS no admite var() en @media.
   Consolidan los encontrados: 640, 680, 760, 768, 780, 820, 900, 960, 980, 1200.
   sm: 640px · md: 768px · lg: 960px · xl: 1200px                      */

/* ── @font-face corporativo [F] ──────────────────────────────────
   Rutas relativas a este archivo: los 4 TTF viven en brand/fonts/.
   ⚠️ Licencia de Segoe UI Historic para servir en web pública: pendiente
   de confirmar con OVB (ver CLAUDE.md § Pendiente de decisión humana).  */
@font-face { font-family:'Segoe UI Historic'; src:url('fonts/SegoeUIHistoric-Regular.ttf') format('truetype'); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'Segoe UI Historic'; src:url('fonts/SegoeUIHistoric-Italic.ttf') format('truetype'); font-weight:400; font-style:italic; font-display:swap; }
@font-face { font-family:'Segoe UI Historic'; src:url('fonts/SegoeUIHistoric-Bold.ttf') format('truetype'); font-weight:700; font-style:normal; font-display:swap; }
@font-face { font-family:'Segoe UI Historic'; src:url('fonts/SegoeUIHistoric-BoldItalic.ttf') format('truetype'); font-weight:700; font-style:italic; font-display:swap; }

/* ── Utilidades de arranque (opcionales) ─────────────────────────── */
.ovb-body-deck { background: var(--ovb-bg-deck); color: var(--ovb-ink);      font-family: var(--ovb-font-brand); }
.ovb-body-tool { background: var(--ovb-bg-tool); color: var(--ovb-ink-tool); font-family: var(--ovb-font-brand); }
.ovb-body-app  { background: var(--ovb-white);   color: var(--ovb-ink-app);  font-family: var(--ovb-font-product); }
.ovb-logo-white { filter: brightness(0) invert(1); } /* [F] técnica documentada en __logo.html */

/* Grids utilitarios [F] (patrón Herramienta Hipotecas / Presentación Inicial) */
.ovb-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--ovb-grid-gap); }
.ovb-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--ovb-grid-gap); }
.ovb-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--ovb-grid-gap); }
@media (max-width: 960px) { .ovb-grid-3, .ovb-grid-4 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .ovb-grid-2, .ovb-grid-3, .ovb-grid-4 { grid-template-columns: 1fr; } }

/* Estados [F] */
.ovb-disabled, [disabled].ovb-btn-primary, .ovb-btn-primary:disabled {
  opacity: var(--ovb-disabled-opacity); cursor: not-allowed; box-shadow: none; pointer-events: none;
}
.ovb-error-msg { /* [F] .error-msg de Jubilación, literal */
  margin-top: 1rem; padding: 0.9rem 1.1rem;
  background: var(--ovb-field-error-bg); color: var(--ovb-field-error-text);
  border-radius: 10px; font-weight: 600; border-left: var(--ovb-field-error-border);
}
.ovb-input-error { border-color: var(--ovb-berry) !important; box-shadow: 0 0 0 4px rgba(204,0,102,0.15); } /* [R] */
@keyframes ovb-pulse { /* [F] patrón nlp-pulse/phase-pulse (sapphire) */
  0%, 100% { box-shadow: 0 0 0 0 rgba(102,204,204,0.55); }
  50%      { box-shadow: 0 0 0 12px rgba(102,204,204,0); }
}
.ovb-loading-dot {
  width: 10px; height: 10px; border-radius: 50%; background: var(--ovb-sapphire);
  animation: ovb-pulse 2.2s ease-in-out infinite;
}