/* Cumplecanal — design tokens compartidos.
   Importado por comercial.css, panel.css, app.css y (desde 2026-05-27) system.css.
   Aquí vive la paleta, el escalado tipográfico y los radios.

   Histórico:
   - 2026-05-27: añadido bloque "Sistema visual claro compliance" (aliases sin
     prefijo `--c-` consumidos por system.css). Se mantienen los `--c-*` para
     compatibilidad con comercial.css/panel.css/app.css. Fuente cambia
     Inter → Barlow (Fase 0 del plan opción B).
*/

:root {
    /* ====================================================================
       Paleta primaria — azul brand miotroseguro (#154481 ≈ #1a3a6c)
       ==================================================================== */
    --c-primary-50:  #f0f4fa;
    --c-primary-100: #d6e3f5;
    --c-primary-200: #aac4ea;
    --c-primary-300: #7ea5df;
    --c-primary-400: #4d7fc9;
    --c-primary-500: #1a3a6c;
    --c-primary-600: #173564;
    --c-primary-700: #142d56;
    --c-primary-800: #102240;
    --c-primary-900: #0a1733;

    /* Aliases */
    --c-primary: var(--c-primary-500);
    --c-primary-dark: var(--c-primary-800);

    /* Estado / feedback */
    --c-success-50:  #ecfdf3;
    --c-success-500: #15803d;
    --c-warn-50:     #fff8e6;
    --c-warn-500:    #b45309;
    --c-danger-50:   #fee;
    --c-danger-500:  #b91c1c;
    --c-info-50:     #eef2ff;
    --c-info-500:    #4338ca;

    /* Neutros (compat back) */
    --c-text:    #0f172a;
    --c-text-2:  #334155;
    --c-muted:   #64748b;
    --c-border:  #e2e8f0;
    --c-bg:      #ffffff;
    --c-bg-soft: #f8fafc;
    --c-bg-card: #ffffff;

    /* ====================================================================
       Sistema visual OSCURO PREMIUM (Holded-style, 2026-05-27 revisión)
       Histórico:
       - 2026-05-27 v1: paleta clara "compliance notarial" — fallida
         (resultado visualmente flojo, modelo mental erróneo).
       - 2026-05-27 v2: pivote a tema oscuro tipo Holded.com/es (referencia
         dada por usuario). Fondo slate-900, cards blancos, brand bright blue.
       Tokens sin prefijo consumidos SOLO por system.css. Los `--c-*` legacy
       quedan intactos para no romper comercial.css/panel.css/app.css.
       ==================================================================== */

    /* Fondos OSCUROS */
    --bg:          #0F172A;             /* slate-900: fondo principal oscuro */
    --bg-soft:     #111827;             /* gray-900: variantes muy sutiles */
    --bg-elev:     #1E293B;             /* slate-800: superficies elevadas oscuras */
    --bg-card:     #FFFFFF;             /* cards blancos sobre oscuro (Holded) */
    --bg-card-soft:#F8FAFC;             /* slate-50: variante sutil de card */

    /* Bordes */
    --border:      rgba(255, 255, 255, 0.10);
    --border-soft: rgba(255, 255, 255, 0.05);
    --border-card: #E5E7EB;             /* borde dentro de cards blancos */

    /* Texto sobre fondo oscuro */
    --text:        #FFFFFF;             /* texto principal blanco */
    --text-dim:    #94A3B8;             /* slate-400: texto secundario */
    --text-mute:   #64748B;             /* slate-500: texto terciario */
    /* Texto dentro de cards blancos */
    --text-card:       #0F172A;         /* slate-900: texto sobre cards */
    --text-card-dim:   #475569;         /* slate-600: secondary en cards */
    --text-card-mute:  #94A3B8;         /* slate-400 también vale */

    /* Primary brand — bright blue (Holded usa #1963EF aprox) */
    --primary:        #1963EF;
    --primary-hover:  #1850CC;
    --primary-soft:   rgba(25, 99, 239, 0.12);
    --primary-on-dark:#60A5FA;          /* azul claro para texto sobre fondo oscuro */
    --primary-50:     #EFF6FF;          /* azul muy claro (cards/badges) */
    --primary-100:    #DBEAFE;
    --primary-400:    #60A5FA;
    --primary-700:    #1E40AF;
    --primary-900:    #1E3A8A;

    /* Acento verde — emerald (más sobrio que el verde brand miotroseguro) */
    --accent:        #10B981;           /* emerald-500 */
    --accent-dark:   #059669;           /* emerald-600 */
    --accent-soft:   rgba(16, 185, 129, 0.12);

    /* Acento violet — para halos hero y detalles */
    --violet:        #A855F7;
    --violet-soft:   rgba(168, 85, 247, 0.40);
    --primary-glow:  rgba(25, 99, 239, 0.45);

    /* ====================================================================
       Radios (compat back: `--r-*` ya existían)
       ==================================================================== */
    --r-sm: 4px;
    --r-md: 8px;
    --r-lg: 12px;
    --r-xl: 16px;
    --r-full: 9999px;

    /* Radios variante "microsite" para componentes del sistema visual nuevo */
    --radius-sm:   10px;
    --radius:      14px;
    --radius-lg:   22px;

    /* Sombras */
    --shadow-1: 0 1px 2px rgba(15,23,42,.04), 0 1px 3px rgba(15,23,42,.06);
    --shadow-2: 0 4px 6px -1px rgba(15,23,42,.08), 0 2px 4px -2px rgba(15,23,42,.05);
    --shadow-3: 0 10px 15px -3px rgba(15,23,42,.1), 0 4px 6px -4px rgba(15,23,42,.06);
    --shadow-glow: 0 0 0 3px rgba(21,68,129,.15);

    /* ====================================================================
       Tipografía — Inter + JetBrains Mono
       Histórico:
       - Fase 0: Inter → Barlow (industrial, no encajaba).
       - Fase 1.5: Barlow → Manrope (mejor pero seguía flojo en tema claro).
       - 2026-05-27 v2 (pivote Holded): Manrope → Inter. Holded usa Inter y
         es la fuente de facto de productos SaaS B2B 2025-2026 (Stripe,
         Linear, Datadog, Vercel, GitHub). Volvemos al estándar.
       ==================================================================== */
    --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
                 Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo,
                 Consolas, "Liberation Mono", monospace;

    /* Tamaños y leadings */
    --fs-xs:  0.75rem;   /* 12 */
    --fs-sm:  0.875rem;  /* 14 */
    --fs-md:  1rem;      /* 16 */
    --fs-lg:  1.125rem;  /* 18 */
    --fs-xl:  1.25rem;   /* 20 */
    --fs-2xl: 1.5rem;    /* 24 */
    --fs-3xl: 1.875rem;  /* 30 */
    --fs-4xl: 2.25rem;   /* 36 */
    --fs-5xl: 3rem;      /* 48 */

    --leading-tight: 1.25;
    --leading-snug:  1.4;
    --leading-base:  1.55;
    --leading-relaxed: 1.7;

    /* Espaciado */
    --sp-1: .25rem;
    --sp-2: .5rem;
    --sp-3: .75rem;
    --sp-4: 1rem;
    --sp-5: 1.25rem;
    --sp-6: 1.5rem;
    --sp-8: 2rem;
    --sp-10: 2.5rem;
    --sp-12: 3rem;
    --sp-16: 4rem;
    --sp-20: 5rem;

    /* Transiciones */
    --t-fast: 120ms cubic-bezier(.4, 0, .2, 1);
    --t-base: 200ms cubic-bezier(.4, 0, .2, 1);

    /* Container */
    --container-w: 1120px;
}

/* Reset base sin invadir */
*, *::before, *::after { box-sizing: border-box; }
html { font-family: var(--font-sans); -webkit-text-size-adjust: 100%; tab-size: 4; }
body {
    margin: 0;
    font-family: var(--font-sans);
    font-feature-settings: "cv11", "ss01", "ss03";
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    line-height: var(--leading-base);
    color: var(--c-text);
}

/* Animaciones genéricas honrando prefers-reduced-motion */
@media (prefers-reduced-motion: no-preference) {
    .reveal {
        opacity: 0;
        transform: translateY(12px);
        transition: opacity 600ms cubic-bezier(.4,0,.2,1), transform 600ms cubic-bezier(.4,0,.2,1);
    }
    .reveal.is-visible { opacity: 1; transform: none; }
}

/* Focus ring accesible */
:focus-visible {
    outline: 3px solid var(--c-primary-300);
    outline-offset: 2px;
    border-radius: var(--r-sm);
}

/* Selección */
::selection { background: var(--c-primary-200); color: var(--c-primary-900); }

/* Tipografía base de contenidos legales */
.documento-legal {
    font-size: var(--fs-md);
    line-height: var(--leading-relaxed);
    color: var(--c-text-2);
    max-width: 72ch;
    margin: 0 auto;
}
.documento-legal h1 {
    font-size: var(--fs-4xl);
    font-weight: 800;
    color: var(--c-primary-900);
    letter-spacing: -.02em;
    line-height: var(--leading-tight);
    margin: 0 0 var(--sp-6);
}
.documento-legal h2 {
    font-size: var(--fs-xl);
    font-weight: 700;
    color: var(--c-primary-700);
    margin: var(--sp-10) 0 var(--sp-3);
    letter-spacing: -.01em;
}
.documento-legal h3 {
    font-size: var(--fs-lg);
    font-weight: 600;
    color: var(--c-primary-600);
    margin: var(--sp-6) 0 var(--sp-2);
}
.documento-legal p { margin: 0 0 var(--sp-4); hyphens: auto; text-align: justify; }
.documento-legal ul, .documento-legal ol { margin: 0 0 var(--sp-4); padding-left: var(--sp-6); }
.documento-legal li { margin: var(--sp-2) 0; }
.documento-legal hr { border: 0; height: 1px; background: var(--c-border); margin: var(--sp-8) 0; }
.documento-legal table { width: 100%; border-collapse: collapse; margin: var(--sp-4) 0; }
.documento-legal th, .documento-legal td {
    text-align: left; padding: var(--sp-3) var(--sp-4);
    border-bottom: 1px solid var(--c-border); font-size: var(--fs-sm);
}
.documento-legal th { background: var(--c-bg-soft); font-weight: 600; color: var(--c-primary-700); }