/* Pasarela Nebulae — © 2026 Bijan Berahimi S. · BBS Comunicaciones. Todos los derechos reservados. */
/* ════════════════════════════════════════════════════════════════════════
 *  Nebulae Pasarela — Tipografía & UI unificada
 *  ──────────────────────────────────────────────────────────────────────
 *  Este archivo se carga DESPUÉS de nebulae-theme.css y tiene la última
 *  palabra sobre tipografía. Regla universal:
 *
 *    h1, h2, h3, h4 → Onest 700-800 bold (sans-serif moderno)
 *    .em            → Instrument Serif italic (acento decorativo)
 *
 *  Cualquier estilo inline antiguo con font-display o font-cream queda
 *  invalidado por las reglas con !important de aquí.
 * ════════════════════════════════════════════════════════════════════════ */

/* ═══════ FAMILIES & WEIGHTS ═══════ */
h1, h2, h3, h4, h5, h6,
.brand-hero h1,
.section-head h1,
.card h2, .card h3,
.page-head h2, .page-head h3,
.section-head h2, .section-head h3,
.wizard h2, .wizard h3,
main h2, main h3,
.doc-page h2, .doc-page h3,
.faq-page h2, .faq-page h3,
.faq-hero h1, .faq-hero h2,
.faq-list h2, .faq-list h3,
.faq-list summary,
.faq-item summary,
.faq-section h3,
[class*="hero"] h1,
[class*="hero"] h2,
[class*="section"] h2,
[class*="section"] h3,
.dashboard h1, .dashboard h2, .dashboard h3 {
    font-family: 'Onest', system-ui, -apple-system, 'Segoe UI', sans-serif !important;
    font-weight: 800 !important;
    font-style: normal !important;
    letter-spacing: -0.035em !important;
    color: var(--text) !important;
}

h3, h4, h5, h6,
.card h3, .doc-page h3, .faq-page h3,
.faq-list h3, .faq-section h3,
[class*="section"] h3 {
    font-weight: 700 !important;
    letter-spacing: -0.025em !important;
}

/* ═══════ .em — ACENTO ITALIC SERIF ═══════ */
h1 .em, h2 .em, h3 .em, h4 .em,
.brand-hero h1 .em,
.faq-hero h1 .em,
[class*="hero"] h1 .em,
.section-head h2 .em {
    font-family: 'Instrument Serif', 'Times New Roman', Georgia, serif !important;
    font-style: italic !important;
    font-weight: 400 !important;
    letter-spacing: -0.01em !important;
    color: var(--text-soft) !important;
}

/* ═══════ EM (etiqueta nativa) en texto corrido — NO cambia familia ═══════ */
p em, li em, td em, span em:not(.em),
.lead em, .muted em {
    font-family: inherit !important;
    font-style: italic !important;
    font-weight: inherit !important;
    color: inherit !important;
}

/* ═══════ ROMPER ESTILOS LEGACY con tema oscuro ═══════ */
/* Cualquier cosa con var(--text-cream) probablemente venía del tema viejo;
 * aquí forzamos al color oscuro del tema claro. */
[style*="--text-cream"],
[style*="text-cream"] {
    color: var(--text) !important;
}

/* Forzar fondo claro en main/dashboard pages */
body.docs, body.faq, body.dashboard, body.wizard, body.login {
    background: var(--bg);
    color: var(--text);
}

/* ═══════ DOC/FAQ PAGES — paleta clara coherente ═══════ */
.faq-page, .doc-page {
    max-width: 1100px;
    margin: 0 auto;
    padding: 40px 24px 80px;
}
.faq-hero, .doc-hero {
    margin-bottom: 40px;
    padding-bottom: 28px;
    border-bottom: 1px solid var(--bd);
}
.faq-hero h1, .doc-hero h1 {
    font-size: clamp(36px, 5vw, 56px);
    line-height: 1.05;
    margin-bottom: 12px;
}
.faq-hero .lead, .doc-hero .lead,
.faq-hero p, .doc-hero p {
    color: var(--text-soft);
    font-size: 15.5px;
    line-height: 1.55;
    max-width: 640px;
}
.faq-hero .kicker, .doc-hero .kicker,
.section-head .kicker {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    letter-spacing: 0.22em;
    text-transform: uppercase;
    margin-bottom: 16px;
}

/* Sub-secciones dentro de docs */
.doc-section, .faq-section {
    background: var(--white, #fff);
    border: 1px solid var(--bd);
    border-radius: var(--r-lg, 14px);
    padding: 36px 40px;
    margin-bottom: 24px;
    box-shadow: var(--shadow-sm);
}
.doc-section h2, .faq-section h2 {
    font-size: clamp(24px, 3vw, 34px);
    line-height: 1.15;
    margin: 0 0 14px;
}
.doc-section h3, .faq-section h3 {
    font-size: 17px;
    margin: 28px 0 10px;
}
.doc-section p, .faq-section p {
    color: var(--text-soft);
    line-height: 1.6;
    font-size: 14.5px;
    margin: 0 0 14px;
}

/* Code blocks unificados */
.doc-section pre, .faq-section pre,
.doc-page pre, .faq-page pre {
    background: #0f0f0e;
    color: #f5f3ee;
    border-radius: var(--r, 8px);
    padding: 16px 18px;
    overflow-x: auto;
    font-family: 'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace;
    font-size: 12.5px;
    line-height: 1.55;
    margin: 14px 0;
    border: 1px solid #1a1a18;
}
.doc-section code, .faq-section code,
p code, li code {
    background: var(--bg-subtle);
    color: var(--text);
    padding: 1.5px 6px;
    border-radius: 4px;
    font-family: 'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace;
    font-size: 12px;
    border: 1px solid var(--bd);
}

/* Tablas de matriz/comparación */
.doc-section table, .faq-section table {
    width: 100%;
    border-collapse: collapse;
    margin: 18px 0;
    font-size: 13.5px;
}
.doc-section th, .faq-section th {
    background: var(--bg-subtle);
    text-align: left;
    padding: 11px 14px;
    font-weight: 600;
    font-size: 11.5px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-soft);
    border-bottom: 1px solid var(--bd-strong);
}
.doc-section td, .faq-section td {
    padding: 11px 14px;
    border-bottom: 1px solid var(--bd);
    color: var(--text);
}
.doc-section tr:last-child td, .faq-section tr:last-child td {
    border-bottom: none;
}

/* Pills / badges */
.doc-pill, .faq-pill, .cap {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: var(--r-pill, 999px);
    font-size: 11px;
    font-weight: 600;
    line-height: 1.4;
}
.cap-y, .doc-pill-ok  { background: #dcfce7; color: #15803d; }
.cap-p, .doc-pill-warn { background: #fef3c7; color: #92400e; }
.cap-n, .doc-pill-err { background: #fee2e2; color: #991b1b; }

/* Listas */
.doc-section ul, .faq-section ul,
.doc-section ol, .faq-section ol {
    margin: 12px 0 14px;
    padding-left: 22px;
}
.doc-section li, .faq-section li {
    color: var(--text-soft);
    line-height: 1.55;
    margin-bottom: 4px;
}
.doc-section li strong, .faq-section li strong {
    color: var(--text);
    font-weight: 600;
}

/* Alert/callout boxes */
.alert, .doc-alert, .faq-alert {
    padding: 14px 18px;
    border-radius: var(--r, 8px);
    margin: 18px 0;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 13.5px;
    line-height: 1.5;
}
.alert i, .doc-alert i, .faq-alert i {
    flex-shrink: 0;
    margin-top: 2px;
}
.alert-info, .doc-alert-info, .faq-alert-info,
.alert.alert-info {
    background: #eff6ff;
    border-left: 3px solid #3b82f6;
    color: #1e3a8a;
}
.alert-ok, .doc-alert-ok, .faq-alert-ok {
    background: #f0fdf4;
    border-left: 3px solid #16a34a;
    color: #14532d;
}
.alert-warn, .doc-alert-warn, .faq-alert-warn,
.alert.alert-warn {
    background: #fffbeb;
    border-left: 3px solid #f59e0b;
    color: #78350f;
}
.alert-err, .doc-alert-err, .faq-alert-err,
.alert.alert-err {
    background: #fef2f2;
    border-left: 3px solid #dc2626;
    color: #7f1d1d;
}

/* ═══════ Fix específico para hero del dashboard ═══════ */
.brand-hero {
    padding: 60px 0 32px;
}
.brand-hero h1 {
    font-size: clamp(48px, 6vw, 80px);
    line-height: 1.0;
    margin-bottom: 14px;
    letter-spacing: -0.045em !important;
}
.brand-hero h1 .em {
    font-size: 1em;
    letter-spacing: -0.02em !important;
}
.brand-hero .lead {
    font-size: 15.5px;
    color: var(--text-soft);
    line-height: 1.55;
    max-width: 520px;
}

/* ═══════ Section heads del dashboard ═══════ */
.section-head {
    margin: 36px 0 18px;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}
.section-head h2 {
    font-size: 19px !important;
    margin: 0;
}
.section-head .sub {
    color: var(--text-muted);
    font-size: 13px;
}