/* =====================================================================
   Facturador México v3 — Sistema de diseño
   Paleta basada en el logotipo. Sobre Bootstrap 5.3 + variables propias.
   ===================================================================== */

/* ---------- Fuentes locales (sin CDNs) ---------- */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/assets/vendor/fonts/inter/inter-latin-400.woff2') format('woff2');
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('/assets/vendor/fonts/inter/inter-latin-500.woff2') format('woff2');
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('/assets/vendor/fonts/inter/inter-latin-600.woff2') format('woff2');
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('/assets/vendor/fonts/inter/inter-latin-700.woff2') format('woff2');
}
@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('/assets/vendor/fonts/poppins/poppins-latin-600.woff2') format('woff2');
}
@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('/assets/vendor/fonts/poppins/poppins-latin-700.woff2') format('woff2');
}

/* ---------- Paleta y tokens ---------- */
:root {
    --brand-50:  #eaf2fc;
    --brand-100: #d8e4f0;
    --brand-200: #c0d8f0;
    --brand-300: #9cc0e4;
    --brand-400: #78a8e4;
    --brand-500: #3c84cc;
    --brand-600: #2e73c4;
    --brand-700: #1f5ba6;
    --brand-800: #16407a;
    --ink:       #16243b;
    --muted:     #6b7a90;

    /* Sobrescribe variables de Bootstrap para reteñir componentes. */
    --bs-primary: #2e73c4;
    --bs-primary-rgb: 46, 115, 196;
    --bs-link-color: #2e73c4;
    --bs-link-color-rgb: 46, 115, 196;
    --bs-link-hover-color: #1f5ba6;
    --bs-link-hover-color-rgb: 31, 91, 166;
    --bs-body-color: #2a3647;
    --bs-body-font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --bs-border-radius: 0.625rem;
    --bs-border-radius-sm: 0.45rem;
    --bs-border-radius-lg: 0.9rem;

    --fmx-shadow-sm: 0 1px 2px rgba(22, 36, 59, .06), 0 1px 3px rgba(22, 36, 59, .08);
    --fmx-shadow: 0 4px 12px rgba(22, 36, 59, .08), 0 2px 4px rgba(22, 36, 59, .05);
    --fmx-shadow-lg: 0 18px 40px rgba(22, 36, 59, .14);
    --fmx-gradient: linear-gradient(135deg, #2e73c4 0%, #3c84cc 45%, #78a8e4 100%);
    --fmx-surface: #ffffff;
    --fmx-bg: #f5f8fc;
    --fmx-border: #e4ebf3;
}

/* ---------- Modo oscuro ---------- */
[data-theme="dark"] {
    --bs-body-color: #c8d4e2;
    --bs-body-bg: #0f1828;
    --bs-link-color: #78a8e4;
    --bs-link-color-rgb: 120, 168, 228;
    --fmx-surface: #16243b;
    --fmx-bg: #0f1828;
    --fmx-border: #243650;
    color-scheme: dark;
}

/* ---------- Base ---------- */
html { scroll-behavior: smooth; }
body {
    font-family: var(--bs-body-font-family);
    background-color: var(--fmx-bg);
    color: var(--bs-body-color);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}
h1, h2, h3, .display-1, .display-2, .display-3, .navbar-brand {
    font-family: 'Poppins', 'Inter', sans-serif;
    font-weight: 700;
    color: var(--ink);
    letter-spacing: -0.01em;
}
[data-theme="dark"] h1, [data-theme="dark"] h2, [data-theme="dark"] h3 { color: #eef4fb; }

a { text-decoration: none; }
a:hover { text-decoration: none; }

/* ---------- Botones ---------- */
.btn { font-weight: 600; border-radius: var(--bs-border-radius); transition: transform .12s ease, box-shadow .15s ease, background-color .15s ease; }
.btn:active { transform: translateY(1px); }
.btn-primary {
    --bs-btn-bg: #2e73c4;
    --bs-btn-border-color: #2e73c4;
    --bs-btn-hover-bg: #1f5ba6;
    --bs-btn-hover-border-color: #1f5ba6;
    --bs-btn-active-bg: #16407a;
    --bs-btn-active-border-color: #16407a;
    --bs-btn-disabled-bg: #9cc0e4;
    --bs-btn-disabled-border-color: #9cc0e4;
    box-shadow: 0 6px 16px rgba(46, 115, 196, .28);
}
.btn-primary:hover { box-shadow: 0 8px 22px rgba(46, 115, 196, .38); }
.btn-outline-primary {
    --bs-btn-color: #2e73c4;
    --bs-btn-border-color: #2e73c4;
    --bs-btn-hover-bg: #2e73c4;
    --bs-btn-hover-border-color: #2e73c4;
    --bs-btn-active-bg: #1f5ba6;
}
.btn-brand-gradient {
    background: var(--fmx-gradient);
    color: #fff;
    border: 0;
    box-shadow: 0 8px 22px rgba(46, 115, 196, .35);
}
.btn-brand-gradient:hover { color: #fff; filter: brightness(1.05); }

/* ---------- Tarjetas y superficies ---------- */
.card {
    border: 1px solid var(--fmx-border);
    border-radius: var(--bs-border-radius-lg);
    background-color: var(--fmx-surface);
    box-shadow: var(--fmx-shadow-sm);
}
.card-elevated { box-shadow: var(--fmx-shadow); border: 0; }

/* ---------- Formularios ---------- */
.form-control, .form-select {
    border-radius: var(--bs-border-radius);
    border-color: var(--fmx-border);
    padding: .6rem .85rem;
    background-color: var(--fmx-surface);
    color: var(--bs-body-color);
}
.form-control:focus, .form-select:focus {
    border-color: var(--brand-400);
    box-shadow: 0 0 0 .2rem rgba(120, 168, 228, .35);
}
.form-label { font-weight: 600; color: var(--ink); margin-bottom: .35rem; }
[data-theme="dark"] .form-label { color: #c8d4e2; }

/* ---------- Navbar ---------- */
.fmx-navbar {
    background-color: rgba(255, 255, 255, .9);
    backdrop-filter: saturate(180%) blur(10px);
    border-bottom: 1px solid var(--fmx-border);
}
[data-theme="dark"] .fmx-navbar { background-color: rgba(15, 24, 40, .9); }
.navbar-brand img { height: 34px; width: auto; }

/* ---------- Hero ---------- */
.fmx-hero {
    position: relative;
    background: radial-gradient(1200px 600px at 80% -10%, rgba(120, 168, 228, .25), transparent 60%),
                radial-gradient(900px 500px at 0% 0%, rgba(46, 115, 196, .12), transparent 55%);
    overflow: hidden;
}
.fmx-hero .hero-badge {
    display: inline-flex; align-items: center; gap: .5rem;
    background: var(--brand-50); color: var(--brand-700);
    border: 1px solid var(--brand-200);
    padding: .4rem .9rem; border-radius: 999px; font-weight: 600; font-size: .85rem;
}
.fmx-text-gradient {
    background: var(--fmx-gradient);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
}

/* Tarjeta visual del hero (mock de factura). */
.fmx-mock {
    border-radius: 1.1rem; background: var(--fmx-surface);
    box-shadow: var(--fmx-shadow-lg); border: 1px solid var(--fmx-border);
    transform: perspective(1200px) rotateY(-6deg) rotateX(2deg);
    transition: transform .4s ease;
}
.fmx-mock:hover { transform: perspective(1200px) rotateY(0deg) rotateX(0deg); }

/* ---------- Iconos en círculo ---------- */
.fmx-feature-icon {
    width: 52px; height: 52px; border-radius: 14px;
    display: grid; place-items: center;
    background: var(--brand-50); color: var(--brand-600);
    font-size: 1.4rem;
}

/* ---------- Microinteracciones de aparición ---------- */
.fmx-reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
.fmx-reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
    .fmx-reveal { opacity: 1; transform: none; transition: none; }
    html { scroll-behavior: auto; }
}

/* ---------- App shell (área autenticada) ---------- */
.fmx-shell { display: flex; min-height: 100vh; }
.fmx-sidebar {
    width: 264px; flex-shrink: 0; background: var(--fmx-surface);
    border-right: 1px solid var(--fmx-border); padding: 1rem;
    position: sticky; top: 0; height: 100vh; overflow-y: auto;
}
.fmx-sidebar .nav-link {
    color: var(--bs-body-color); border-radius: 10px; padding: .6rem .8rem;
    font-weight: 500; display: flex; align-items: center; gap: .7rem; margin-bottom: .15rem;
}
.fmx-sidebar .nav-link:hover { background: var(--brand-50); color: var(--brand-700); }
.fmx-sidebar .nav-link.active { background: var(--fmx-gradient); color: #fff; box-shadow: var(--fmx-shadow-sm); }

/* Menú con grupos colapsables */
.fmx-nav-group > .nav-link .chevron { margin-left: auto; transition: transform .2s ease; font-size: .8rem; }
.fmx-nav-group > .nav-link[aria-expanded="true"] .chevron { transform: rotate(180deg); }
.fmx-nav-group > .nav-link[aria-expanded="true"] { color: var(--brand-700); }
.fmx-submenu { margin: 0 0 .25rem 0; }
.fmx-submenu .nav-link { padding-left: 2.5rem; font-size: .92rem; font-weight: 500; }
.fmx-submenu .nav-link i { font-size: .95rem; }
[x-cloak] { display: none !important; }

.fmx-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.fmx-content { padding: 1.5rem; flex: 1; }

@media (max-width: 991.98px) {
    .fmx-sidebar {
        position: fixed; z-index: 1045; left: 0; top: 0; transform: translateX(-100%);
        transition: transform .25s ease; box-shadow: var(--fmx-shadow-lg);
    }
    .fmx-sidebar.is-open { transform: translateX(0); }
}

/* ---------- Banner de impersonación ---------- */
.fmx-impersonate-bar {
    background: #e0a23b; color: #1f1402; text-align: center;
    padding: .5rem 1rem; font-weight: 600; font-size: .9rem;
}

/* ---------- Footer + atribución Webzi ---------- */
.fmx-footer { background: var(--ink); color: #aebfd3; }
.fmx-footer a { color: #cfe0f3; }
.webzi-attr { display: inline-flex; align-items: center; gap: .4rem; opacity: .85; }
.webzi-attr img { height: 20px; width: auto; }
/* Footer oscuro -> invertir el logo (negro) a blanco. */
.fmx-footer .webzi-attr img { filter: brightness(0) invert(1); }