/* ==========================================================================
   SISTEMA DE DISEÑO PREMIUM - FACTURAGESTOR SAAS
   Paleta: Soft Pastel Blue & Slate, jugando con tonos azules y neutros
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&family=Outfit:wght@400;500;600;700;800&display=swap');

:root {
    /* Colores base */
    --bg-main: #0b0f19;
    --bg-dashboard: #070a11;
    --bg-sidebar: rgba(11, 16, 28, 0.96);
    --bg-input: rgba(0, 0, 0, 0.25);
    --bg-card: rgba(19, 29, 48, 0.65);
    --bg-card-hover: rgba(26, 39, 64, 0.8);
    --border-color: rgba(255, 255, 255, 0.08);
    --border-glow: rgba(96, 165, 250, 0.25);

    /* Gradientes Azules/Indigo Pasteles */
    --gradient-primary: linear-gradient(135deg, #60a5fa 0%, #3b82f6 100%); /* Pastel Sky Blue a Soft Blue */
    --gradient-accent: linear-gradient(135deg, #818cf8 0%, #4f46e5 100%); /* Pastel Indigo a Soft Royal */
    --gradient-glow: linear-gradient(135deg, rgba(96, 165, 250, 0.15) 0%, rgba(129, 140, 248, 0.15) 100%);
    --gradient-text: linear-gradient(135deg, #ffffff 0%, #bae6fd 50%, #c7d2fe 100%); /* Blanco a celeste pastel a lavanda suave */

    /* Texto */
    --text-primary: #f3f4f6;
    --text-secondary: #cbd5e1;
    --text-muted: #94a3b8;

    /* Acentos e Indicadores en base a gama de Azules Pasteles */
    --color-emerald: #60a5fa; /* Reemplaza el verde esmeralda por un celeste/azul pastel precioso */
    --color-violet: #818cf8; /* Reemplaza el violeta eléctrico por un índigo pastel delicado */
    --color-error: #fca5a5;  /* Rojo pastel delicado */
    --color-warning: #fde047; /* Amarillo pastel delicado */

    /* Sombras y Filtros */
    --shadow-premium: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
    --blur-glass: blur(16px);
    
    /* Fuentes */
    --font-outfit: 'Outfit', sans-serif;
    --font-inter: 'Inter', sans-serif;

    /* Transiciones */
    --transition-smooth: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* --- SISTEMA DE TEMA CLARO PREMIUM --- */
[data-theme="light"] {
    /* Colores base */
    --bg-main: #f0f4f8; /* Fondo azul grisáceo muy pálido y limpio */
    --bg-dashboard: #e6eef4; /* Dashboard con matiz azul muy delicado */
    --bg-sidebar: rgba(255, 255, 255, 0.96);
    --bg-input: rgba(255, 255, 255, 0.9);
    --bg-card: rgba(255, 255, 255, 0.8);
    --bg-card-hover: rgba(255, 255, 255, 0.95);
    --border-color: rgba(15, 23, 42, 0.08);
    --border-glow: rgba(59, 130, 246, 0.2);

    /* Gradientes */
    --gradient-glow: linear-gradient(135deg, rgba(59, 130, 246, 0.04) 0%, rgba(99, 102, 241, 0.04) 100%);
    --gradient-text: linear-gradient(135deg, #0f172a 0%, #1e40af 50%, #312e81 100%);

    /* Texto */
    --text-primary: #0f172a;
    --text-secondary: #334155;
    --text-muted: #64748b;

    /* Acentos e Indicadores para tema claro con alto contraste */
    --color-emerald: #2563eb; /* Azul cobalto premium */
    --color-violet: #4f46e5;  /* Índigo premium */
    --color-error: #dc2626;   /* Rojo premium */
    --color-warning: #d97706; /* Ambar premium */

    /* Sombras */
    --shadow-premium: 0 8px 32px 0 rgba(15, 23, 42, 0.08);
}

[data-theme="light"] body {
    background-image: 
        radial-gradient(at 10% 20%, rgba(129, 140, 248, 0.03) 0px, transparent 50%),
        radial-gradient(at 90% 80%, rgba(96, 165, 250, 0.02) 0px, transparent 50%);
}

/* --- Reseteo Estándar --- */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    scrollbar-width: thin;
    scrollbar-color: var(--color-emerald) var(--bg-main);
}

body {
    background-color: var(--bg-main);
    color: var(--text-primary);
    font-family: var(--font-inter);
    font-weight: 400;
    line-height: 1.5;
    overflow-x: hidden;
    min-height: 100vh;
    background-image: 
        radial-gradient(at 10% 20%, rgba(129, 140, 248, 0.08) 0px, transparent 50%),
        radial-gradient(at 90% 80%, rgba(96, 165, 250, 0.05) 0px, transparent 50%);
    background-attachment: fixed;
}

/* Custom Scrollbars */
::-webkit-scrollbar {
    width: 6px;
}
::-webkit-scrollbar-track {
    background: var(--bg-main);
}
::-webkit-scrollbar-thumb {
    background: rgba(96, 165, 250, 0.3);
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: var(--color-emerald);
}

/* --- Elementos de Estructura SPA --- */
.page-section {
    display: none;
    min-height: 100vh;
}

/* ================================================================
   ORIGEN EXPLÍCITO DE FACTURAS
   ================================================================ */
.invoice-folder-setup,
.invoice-folder-confirm {
    position: fixed;
    inset: 0;
    z-index: 10040;
    display: grid;
    place-items: center;
    padding: 1.25rem;
}

.invoice-folder-setup[hidden],
.invoice-folder-confirm[hidden],
.invoice-load-menu[hidden] {
    display: none !important;
}

.invoice-folder-setup__backdrop,
.invoice-folder-confirm__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.64);
    backdrop-filter: blur(10px);
}

.invoice-folder-setup__panel,
.invoice-folder-confirm__panel {
    position: relative;
    width: min(690px, 100%);
    max-height: calc(100vh - 2.5rem);
    overflow: auto;
    padding: 2.25rem;
    border: 1px solid rgba(148, 163, 184, 0.24);
    border-radius: 28px;
    background: var(--bg-card, #fff);
    color: var(--text-primary, #0f172a);
    box-shadow: 0 32px 90px rgba(15, 23, 42, 0.28);
    text-align: center;
    animation: invoice-folder-enter 220ms ease-out both;
}

.invoice-folder-confirm__panel {
    width: min(520px, 100%);
    padding: 2rem;
}

@keyframes invoice-folder-enter {
    from { opacity: 0; transform: translateY(12px) scale(.985); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.invoice-folder-setup__close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 38px;
    height: 38px;
    border: 0;
    border-radius: 12px;
    background: rgba(148, 163, 184, .12);
    color: var(--text-secondary, #64748b);
    cursor: pointer;
}

.invoice-folder-setup__mark,
.invoice-folder-confirm__mark {
    display: grid;
    place-items: center;
    width: 64px;
    height: 64px;
    margin: 0 auto 1rem;
    border-radius: 20px;
    color: #2563eb;
    background: linear-gradient(145deg, rgba(37, 99, 235, .14), rgba(16, 185, 129, .12));
    font-size: 1.55rem;
}

.invoice-folder-setup__eyebrow,
.invoice-folder-confirm__eyebrow {
    display: block;
    margin-bottom: .45rem;
    color: #2563eb;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.invoice-folder-setup__panel h2,
.invoice-folder-confirm__panel h2 {
    margin: 0;
    font: 800 clamp(1.45rem, 3vw, 2rem)/1.15 var(--font-outfit, sans-serif);
}

.invoice-folder-confirm__panel > p {
    max-width: 430px;
    margin: .85rem auto 1.35rem;
    color: var(--text-secondary, #64748b);
    line-height: 1.55;
}

.invoice-folder-confirm__summary {
    display: grid;
    gap: .65rem;
    margin-bottom: 1.35rem;
    text-align: left;
}

.invoice-folder-confirm__summary > div {
    display: flex;
    align-items: center;
    gap: .8rem;
    min-width: 0;
    padding: .8rem .9rem;
    border: 1px solid rgba(148, 163, 184, .22);
    border-radius: 16px;
    background: rgba(248, 250, 252, .68);
}

[data-theme="dark"] .invoice-folder-confirm__summary > div,
[data-theme="dark"] .invoice-folder-card {
    background: rgba(30, 41, 59, .6);
}

.invoice-folder-confirm__icon {
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 12px;
}

.invoice-folder-confirm__icon--purchase { color: #047857; background: #d1fae5; }
.invoice-folder-confirm__icon--sale { color: #1d4ed8; background: #dbeafe; }
.invoice-folder-confirm__summary span:last-child { min-width: 0; }
.invoice-folder-confirm__summary small,
.invoice-folder-confirm__summary strong { display: block; }
.invoice-folder-confirm__summary small { margin-bottom: .15rem; color: var(--text-secondary, #64748b); font-size: .7rem; font-weight: 750; text-transform: uppercase; }
.invoice-folder-confirm__summary strong { overflow: hidden; font-size: .88rem; text-overflow: ellipsis; white-space: nowrap; }

.invoice-folder-confirm__actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .75rem;
}

.invoice-folder-confirm__actions .btn-premium {
    min-height: 48px;
    padding-inline: 1rem;
}

.invoice-folder-setup__intro {
    max-width: 560px;
    margin: .85rem auto 1.6rem;
    color: var(--text-secondary, #64748b);
    line-height: 1.6;
}

.invoice-folder-setup__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.invoice-folder-card {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: .85rem;
    min-height: 148px;
    padding: 1.15rem;
    border: 1px solid rgba(148, 163, 184, .28);
    border-radius: 20px;
    background: rgba(248, 250, 252, .72);
    color: var(--text-primary, #0f172a);
    text-align: left;
    cursor: pointer;
    transition: border-color 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}

.invoice-folder-card:hover,
.invoice-folder-card:focus-visible {
    transform: translateY(-2px);
    outline: none;
    box-shadow: 0 15px 36px rgba(15, 23, 42, .10);
}

.invoice-folder-card--sale:hover,
.invoice-folder-card--sale.is-configured { border-color: rgba(37, 99, 235, .55); }
.invoice-folder-card--purchase:hover,
.invoice-folder-card--purchase.is-configured { border-color: rgba(16, 185, 129, .6); }

.invoice-folder-card__icon {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 14px;
    font-size: 1.05rem;
}
.invoice-folder-card--sale .invoice-folder-card__icon { color: #1d4ed8; background: #dbeafe; }
.invoice-folder-card--purchase .invoice-folder-card__icon { color: #047857; background: #d1fae5; }

.invoice-folder-card__copy strong,
.invoice-folder-card__copy small { display: block; }
.invoice-folder-card__copy strong { margin: .15rem 0 .35rem; font-size: .96rem; }
.invoice-folder-card__copy small { color: var(--text-secondary, #64748b); line-height: 1.4; overflow-wrap: anywhere; }
.invoice-folder-card__action { grid-column: 1 / -1; align-self: end; display: flex; justify-content: space-between; font-size: .78rem; font-weight: 750; }

.invoice-folder-setup__notice {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    margin: 1.25rem 0;
    color: var(--text-secondary, #64748b);
    font-size: .78rem;
}

.invoice-folder-setup__save { width: 100%; justify-content: center; min-height: 48px; }

.invoice-load-menu {
    position: fixed;
    z-index: 10020;
    width: min(390px, calc(100vw - 2rem));
    padding: .65rem;
    border: 1px solid rgba(148, 163, 184, .25);
    border-radius: 20px;
    background: #ffffff;
    color: var(--text-primary, #0f172a);
    box-shadow: 0 24px 70px rgba(15, 23, 42, .22);
    opacity: 1;
    backdrop-filter: none;
    isolation: isolate;
}

[data-theme="dark"] .invoice-load-menu {
    background: #111827;
}

.invoice-load-menu__header { padding: .75rem .8rem .85rem; }
.invoice-load-menu__header span,
.invoice-load-menu__header strong,
.invoice-load-menu__header small { display: block; }
.invoice-load-menu__header span { color: #2563eb; font-size: .68rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.invoice-load-menu__header strong { margin: .32rem 0; font-size: 1rem; }
.invoice-load-menu__header small { color: var(--text-secondary, #64748b); line-height: 1.4; }

.invoice-load-option {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: .8rem;
    width: 100%;
    padding: .85rem;
    border: 1px solid transparent;
    border-radius: 15px;
    background: transparent;
    color: inherit;
    text-align: left;
    cursor: pointer;
}
.invoice-load-option:hover,
.invoice-load-option:focus-visible { outline: none; background: rgba(148, 163, 184, .09); }
.invoice-load-option__icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 13px; }
.invoice-load-option--sale .invoice-load-option__icon { color: #1d4ed8; background: #dbeafe; }
.invoice-load-option--purchase .invoice-load-option__icon { color: #047857; background: #d1fae5; }
.invoice-load-option strong,
.invoice-load-option small { display: block; }
.invoice-load-option small { margin-top: .18rem; color: var(--text-secondary, #64748b); font-size: .72rem; }

.invoice-load-menu__settings {
    width: 100%;
    margin-top: .35rem;
    padding: .7rem;
    border: 0;
    border-top: 1px solid rgba(148, 163, 184, .18);
    background: transparent;
    color: var(--text-secondary, #64748b);
    font-weight: 700;
    cursor: pointer;
}

@media (max-width: 640px) {
    .invoice-folder-setup__panel,
    .invoice-folder-confirm__panel { padding: 1.55rem 1rem; border-radius: 22px; }
    .invoice-folder-setup__grid { grid-template-columns: 1fr; }
    .invoice-folder-card { min-height: 122px; }
    .invoice-folder-confirm__actions { grid-template-columns: 1fr; }
}

.page-section.active {
    display: flex;
}

/* --- BOTONES PREMIUM GLOBALES --- */
.btn-premium {
    font-family: var(--font-outfit);
    font-weight: 600;
    font-size: 0.95rem;
    padding: 0.68rem 1.6rem;
    border-radius: 12px;
    cursor: pointer;
    transition: var(--transition-smooth);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    border: 1px solid transparent;
    outline: none;
    text-decoration: none;
    user-select: none;
    vertical-align: middle;
}

.btn-premium:active {
    transform: scale(0.98);
}

.btn-premium:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

/* Botón Primario con Degradado de Marca */
.btn-primary {
    background: var(--gradient-primary);
    color: #ffffff !important;
    box-shadow: 0 4px 14px rgba(59, 130, 246, 0.22);
}

.btn-primary:hover {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    box-shadow: 0 6px 20px rgba(59, 130, 246, 0.32);
    transform: translateY(-1.5px);
    color: #ffffff !important;
}

/* Botón Secundario Translúcido */
.btn-secondary {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--border-color);
    color: var(--text-primary) !important;
}

[data-theme="light"] .btn-secondary {
    background: rgba(15, 23, 42, 0.02);
}

.btn-secondary:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: var(--border-glow);
    color: #ffffff !important;
    transform: translateY(-1.5px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

[data-theme="light"] .btn-secondary:hover {
    background: rgba(15, 23, 42, 0.05);
    color: var(--text-primary) !important;
    border-color: var(--border-glow);
}

/* --- ESTILO SECCIÓN BIENVENIDA (LANDING PORTAL PREMIUM) --- */
#welcome-section {
    flex-direction: column;
    align-items: stretch;
    padding: 0;
    text-align: left;
    overflow-x: hidden;
    position: relative;
    background-color: var(--bg-main);
    transition: var(--transition-smooth);
    min-height: 100vh;
}

/* Mesh Background Gradient Orbs */
.mesh-bg-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
}

.mesh-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(140px);
    opacity: 0.15;
    mix-blend-mode: screen;
    animation: floatOrb 25s infinite alternate ease-in-out;
}

[data-theme="light"] .mesh-orb {
    opacity: 0.08;
    mix-blend-mode: multiply;
    filter: blur(100px);
}

.orb-1 {
    top: -10%;
    left: -10%;
    width: 50vw;
    height: 50vw;
    background: radial-gradient(circle, #60a5fa 0%, transparent 70%);
}

.orb-2 {
    top: 40%;
    right: -20%;
    width: 60vw;
    height: 60vw;
    background: radial-gradient(circle, #818cf8 0%, transparent 70%);
    animation-delay: -5s;
    animation-duration: 30s;
}

.orb-3 {
    bottom: -10%;
    left: 20%;
    width: 45vw;
    height: 45vw;
    background: radial-gradient(circle, #38bdf8 0%, transparent 70%);
    animation-delay: -10s;
    animation-duration: 20s;
}

@keyframes floatOrb {
    0% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(5%, 8%) scale(1.1); }
    100% { transform: translate(-5%, -5%) scale(0.9); }
}

/* Hero Section */
.landing-hero {
    position: relative;
    z-index: 1;
    max-width: 1280px;
    margin: 0 auto;
    padding: 8rem 2rem 4rem 2rem;
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 4rem;
    align-items: center;
}

.landing-hero__content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
}

.landing-hero__badge {
    margin-bottom: 1.5rem;
}

.badge-glow {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: rgba(96, 165, 250, 0.1);
    border: 1px solid rgba(96, 165, 250, 0.2);
    border-radius: 9999px;
    font-family: var(--font-outfit);
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-emerald);
    box-shadow: 0 4px 12px rgba(96, 165, 250, 0.05);
}

.landing-hero__title {
    font-family: var(--font-outfit);
    font-size: clamp(2.5rem, 4.5vw, 3.8rem);
    font-weight: 800;
    line-height: 1.15;
    color: var(--text-primary);
    margin-top: 2.2rem;
    margin-bottom: 1.5rem;
    letter-spacing: -0.02em;
}

.text-gradient {
    background: var(--gradient-text);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
}

.landing-hero__subtitle {
    font-size: 1.15rem;
    color: var(--text-secondary);
    line-height: 1.6;
    margin-bottom: 2.5rem;
    max-width: 620px;
}

.landing-hero__actions {
    display: flex;
    gap: 1.25rem;
    flex-wrap: wrap;
}

.btn-hero-cta {
    position: relative;
    overflow: hidden;
    box-shadow: 0 8px 30px rgba(59, 130, 246, 0.3);
}

.btn-hero-secondary {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* OCR Scanner Simulator Card */
.landing-hero__visual {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    z-index: 1;
}

.ocr-simulator-card {
    width: 100%;
    max-width: 500px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    backdrop-filter: var(--blur-glass);
    box-shadow: var(--shadow-premium);
    overflow: hidden;
    position: relative;
    transition: var(--transition-smooth);
}



.ocr-simulator-header {
    background: rgba(0, 0, 0, 0.2);
    padding: 0.75rem 1.25rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    border-bottom: 1px solid var(--border-color);
}

.window-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.window-dot.red { background-color: #ef4444; }
.window-dot.yellow { background-color: #f59e0b; }
.window-dot.green { background-color: #10b981; }

.window-title {
    font-family: var(--font-outfit);
    font-size: 0.75rem;
    color: var(--text-muted);
    font-weight: 500;
    margin-left: 0.5rem;
}

.ocr-simulator-body {
    padding: 1rem;
    position: relative;
    background: rgba(0, 0, 0, 0.15);
}

.visual-mockup-container {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid var(--border-color);
    background: rgba(0, 0, 0, 0.2);
}

/* Landing Section General */
.landing-section {
    position: relative;
    z-index: 1;
    max-width: 1280px;
    margin: 0 auto;
    padding: 6rem 2rem;
}

.section-title {
    font-family: var(--font-outfit);
    font-size: clamp(2rem, 3.5vw, 2.6rem);
    font-weight: 800;
    text-align: center;
    color: var(--text-primary);
    margin-bottom: 0.75rem;
    letter-spacing: -0.01em;
}

.section-subtitle {
    font-size: 1.05rem;
    color: var(--text-secondary);
    text-align: center;
    max-width: 700px;
    margin: 0 auto 4rem auto;
    line-height: 1.5;
}

/* Stats Section */
.stats-section {
    padding: 3rem 2rem;
    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
    background: rgba(255, 255, 255, 0.01);
}

.stats-container {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
    text-align: center;
}

.stat-item {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.stat-num {
    font-family: var(--font-outfit);
    font-size: clamp(2rem, 3.5vw, 3rem);
    font-weight: 800;
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    line-height: 1;
}

.stat-lbl {
    font-size: 0.9rem;
    color: var(--text-secondary);
    font-weight: 500;
}

/* Features Detailed Grid */
.features-detailed-grid {
    display: flex;
    flex-direction: column;
    gap: 5rem;
}

.feature-detail-card {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 4rem;
    align-items: center;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--border-color);
    border-radius: 24px;
    padding: 3.5rem;
    backdrop-filter: blur(10px);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.05);
    transition: var(--transition-smooth);
}



.feature-detail-card--reverse {
    grid-template-columns: 0.9fr 1.1fr;
}

.feature-detail-card--reverse .feature-detail-card__copy {
    order: 2;
}

.feature-detail-card--reverse .feature-detail-card__media {
    order: 1;
}

.feature-detail-card__copy {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.feature-detail-card__icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: var(--gradient-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 1.25rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 6px 16px rgba(59, 130, 246, 0.2);
}

.feature-detail-card__copy h3 {
    font-family: var(--font-outfit);
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 1rem;
}

.feature-detail-card__copy p {
    font-size: 0.98rem;
    color: var(--text-secondary);
    line-height: 1.6;
    margin-bottom: 2rem;
}

.feature-detail-card__bullet-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.feature-detail-card__bullet-list li {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    font-size: 0.92rem;
    color: var(--text-secondary);
}

.feature-detail-card__bullet-list li i {
    color: var(--color-emerald);
    margin-top: 0.2rem;
    font-size: 0.85rem;
}

.feature-detail-card__media {
    width: 100%;
}

.media-frame {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid var(--border-color);
    background: rgba(0, 0, 0, 0.2);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
    transition: var(--transition-smooth);
}



.media-frame img {
    width: 100%;
    height: auto;
    display: block;
}

.media-caption {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.25rem;
    background: rgba(11, 15, 25, 0.9);
    font-size: 0.75rem;
    color: var(--text-muted);
    border-top: 1px solid var(--border-color);
    font-weight: 500;
}

.media-caption i {
    color: var(--color-emerald);
}

/* Audit Simulator Mockup Widget */
.feature-detail-card__simple-mockup {
    width: 100%;
    display: flex;
    justify-content: center;
}

.audit-simulator {
    width: 100%;
    max-width: 320px;
    background: rgba(11, 16, 28, 0.8);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 1.5rem;
    box-shadow: var(--shadow-premium);
    backdrop-filter: blur(10px);
}

.audit-sim-header {
    font-family: var(--font-outfit);
    font-size: 0.9rem;
    font-weight: 600;
    color: #10b981;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1.25rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--border-color);
}

.audit-sim-row {
    display: flex;
    justify-content: space-between;
    font-size: 0.85rem;
    margin-bottom: 0.75rem;
    color: var(--text-secondary);
}

.audit-sim-row strong {
    color: var(--text-primary);
}

.audit-sim-divider {
    height: 1px;
    background: var(--border-color);
    margin: 0.75rem 0;
}

.audit-sim-row.total {
    font-size: 0.95rem;
    font-weight: 700;
}

.audit-sim-row.total strong {
    color: var(--color-emerald);
}

.audit-sim-badge {
    margin-top: 1.25rem;
    padding: 0.5rem;
    background: rgba(16, 185, 129, 0.1);
    border: 1px solid rgba(16, 185, 129, 0.2);
    border-radius: 8px;
    color: #10b981;
    font-size: 0.75rem;
    font-weight: 600;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
}

/* Process Timeline (How It Works) */
.steps-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2.5rem;
}

.step-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    padding: 2.5rem 2rem;
    position: relative;
    transition: var(--transition-smooth);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.05);
}



.step-num {
    position: absolute;
    top: 1.5rem;
    right: 2rem;
    font-family: var(--font-outfit);
    font-size: 2.5rem;
    font-weight: 800;
    color: rgba(96, 165, 250, 0.15);
    line-height: 1;
}

.step-card__icon {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    background: rgba(96, 165, 250, 0.08);
    border: 1px solid rgba(96, 165, 250, 0.15);
    color: var(--color-emerald);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    margin-bottom: 1.5rem;
}

.step-card h4 {
    font-family: var(--font-outfit);
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.75rem;
}

.step-card p {
    font-size: 0.88rem;
    color: var(--text-secondary);
    line-height: 1.5;
}

/* FAQ Accordion Section */
.faq-section {
    max-width: 900px;
}

.faq-container {
    display: flex;
    flex-direction: column;
    gap: 0.92rem;
}

.faq-item {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    overflow: hidden;
    transition: var(--transition-smooth);
}

.faq-item:hover {
    border-color: rgba(96, 165, 250, 0.15);
    background: var(--bg-card-hover);
}

.faq-question {
    width: 100%;
    padding: 1.25rem 1.5rem;
    background: none;
    border: none;
    outline: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    font-family: var(--font-outfit);
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--text-primary);
    text-align: left;
    gap: 1.5rem;
}

.faq-question span {
    transition: color 0.3s ease;
}

.faq-question:hover span {
    color: var(--color-emerald);
}

.faq-chevron {
    font-size: 0.85rem;
    color: var(--text-muted);
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), color 0.3s ease;
}

.faq-question.active .faq-chevron {
    transform: rotate(180deg);
    color: var(--color-emerald);
}

.faq-answer {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease;
}

.faq-answer p {
    padding: 0 1.5rem 1.5rem 1.5rem;
    font-size: 0.92rem;
    color: var(--text-secondary);
    line-height: 1.6;
}

.faq-question.active + .faq-answer {
    opacity: 1;
}

/* Call to Action */
.cta-section {
    padding-bottom: 8rem;
}

.cta-glow-card {
    background: 
        radial-gradient(circle at 10% 20%, rgba(96, 165, 250, 0.15) 0%, transparent 40%),
        radial-gradient(circle at 90% 80%, rgba(129, 140, 248, 0.15) 0%, transparent 40%),
        var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 28px;
    padding: 4.5rem 3rem;
    text-align: center;
    position: relative;
    overflow: hidden;
    backdrop-filter: var(--blur-glass);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
    transition: var(--transition-smooth);
}



.cta-glow-card__content {
    position: relative;
    z-index: 1;
    max-width: 600px;
    margin: 0 auto;
}

.cta-glow-card h3 {
    font-family: var(--font-outfit);
    font-size: 2rem;
    font-weight: 800;
    color: var(--text-primary);
    margin-bottom: 1rem;
    letter-spacing: -0.01em;
}

.cta-glow-card p {
    font-size: 1.05rem;
    color: var(--text-secondary);
    line-height: 1.5;
    margin-bottom: 2rem;
}

.btn-cta-start {
    padding: 0.92rem 2.5rem;
    font-size: 1.05rem;
    box-shadow: 0 6px 22px rgba(59, 130, 246, 0.3);
}

/* Landing Footer */
.landing-footer {
    border-top: 1px solid var(--border-color);
    padding: 4rem 2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
    background: rgba(0, 0, 0, 0.1);
    position: relative;
    z-index: 1;
}

.footer-brand {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.footer-brand__name {
    font-family: var(--font-outfit);
    font-weight: 800;
    font-size: 1.25rem;
    background: var(--gradient-text);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    letter-spacing: 0.05em;
}

.footer-copy {
    font-size: 0.82rem;
    color: var(--text-muted);
    text-align: center;
}

/* Clickable main header logo pointer correction */
.header-logo {
    pointer-events: auto !important;
}

/* Responsive queries */
@media (max-width: 1024px) {
    .landing-hero {
        grid-template-columns: 1fr;
        gap: 3.5rem;
        padding-top: 6rem;
        text-align: center;
    }

    .landing-hero__content {
        align-items: center;
        text-align: center;
    }

    .landing-hero__subtitle {
        margin-left: auto;
        margin-right: auto;
    }

    .landing-hero__actions {
        justify-content: center;
    }

    .features-detailed-grid {
        gap: 4rem;
    }

    .feature-detail-card,
    .feature-detail-card--reverse {
        grid-template-columns: 1fr;
        gap: 2.5rem;
        padding: 2.5rem;
    }

    .feature-detail-card--reverse .feature-detail-card__copy {
        order: 1;
    }

    .feature-detail-card--reverse .feature-detail-card__media {
        order: 2;
    }

    .stats-container {
        grid-template-columns: repeat(2, 1fr);
        gap: 2.5rem;
    }
}

@media (max-width: 768px) {
    .steps-grid {
        grid-template-columns: 1fr;
        gap: 1.75rem;
    }

    .stats-container {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .cta-glow-card {
        padding: 3rem 1.5rem;
    }

    .cta-glow-card h3 {
        font-size: 1.6rem;
    }
}

/* --- SECCIÓN AUTH (MODAL OVERLAY / POPUP DE LOGIN Y REGISTRO) --- */
#auth-section {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(4, 7, 13, 0.7);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    z-index: 2000;
    padding: 2rem;
}

#auth-section.active {
    display: flex;
}

.auth-card {
    width: 100%;
    max-width: 460px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.88), rgba(248, 251, 255, 0.84)),
        var(--bg-card);
    border: 1px solid rgba(15, 23, 42, 0.12);
    border-radius: 24px;
    padding: 2.5rem;
    backdrop-filter: var(--blur-glass);
    box-shadow: var(--shadow-premium);
    position: relative;
    overflow: hidden;
    transform: scale(0.9);
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

[data-theme="dark"] .auth-card {
    background:
        linear-gradient(180deg, rgba(19, 29, 48, 0.92), rgba(11, 16, 28, 0.9)),
        var(--bg-card);
    border-color: rgba(255, 255, 255, 0.12);
}

#auth-section.active .auth-card {
    transform: scale(1);
}

.auth-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, var(--color-violet), var(--color-emerald));
}

/* Botón para Cerrar el Modal Popup */
.modal-close-btn {
    position: absolute;
    top: 1.25rem;
    right: 1.25rem;
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 1.25rem;
    cursor: pointer;
    transition: var(--transition-smooth);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    z-index: 10;
}

.modal-close-btn:hover {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.08);
}

.auth-header {
    margin-bottom: 2rem;
    text-align: center;
}

.auth-logo {
    font-family: var(--font-outfit);
    font-size: 1.8rem;
    font-weight: 800;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.auth-logo i {
    color: var(--color-emerald);
}

.auth-subtitle {
    color: var(--text-secondary);
    font-size: 0.95rem;
    font-weight: 500;
}

/* Contenedores de Formulario con Transición Flip/Slide */
.form-container {
    display: none;
    flex-direction: column;
    gap: 1.25rem;
}

.form-container.active {
    display: flex;
    animation: fadeIn 0.4s ease-out;
}

.auth-login-alert {
    position: fixed;
    inset: 0;
    z-index: 4100;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition:
        opacity 0.26s ease,
        visibility 0.26s ease;
}

.auth-login-alert.is-visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* Backdrop overlay */
.auth-login-alert::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(11, 15, 25, 0.48);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.auth-login-alert.is-visible::before {
    opacity: 1;
}

.auth-login-alert__glow {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 420px;
    height: 180px;
    transform: translate(-50%, -50%);
    background: radial-gradient(ellipse at center, rgba(239, 68, 68, 0.18), rgba(239, 68, 68, 0.04) 50%, transparent 80%);
    border-radius: 50%;
    filter: blur(28px);
    opacity: 0;
    transition: opacity 0.4s ease 0.05s;
    pointer-events: none;
}

.auth-login-alert.is-visible .auth-login-alert__glow {
    opacity: 1;
}

.auth-login-alert__inner {
    position: relative;
    display: grid;
    grid-template-columns: 60px minmax(0, 1fr) auto;
    align-items: start;
    gap: 1.15rem;
    width: min(calc(100vw - 2.5rem), 488px);
    padding: 1.5rem 1.5rem 1.5rem 1.4rem;
    border-radius: 20px;
    background:
        radial-gradient(circle at 14% 8%, rgba(248, 113, 113, 0.14), transparent 38%),
        linear-gradient(160deg, rgba(255, 255, 255, 0.985), rgba(252, 250, 250, 0.96) 48%, rgba(248, 250, 252, 0.98));
    border: 1px solid rgba(239, 68, 68, 0.12);
    box-shadow:
        0 40px 90px rgba(15, 23, 42, 0.28),
        0 16px 40px rgba(127, 29, 29, 0.12),
        0 0 0 1px rgba(255, 255, 255, 0.56) inset;
    transform: translateY(6px) scale(0.965);
    transition: transform 0.38s cubic-bezier(0.16, 1, 0.3, 1);
}

.auth-login-alert.is-visible .auth-login-alert__inner {
    transform: translateY(0) scale(1);
}

.auth-login-alert__icon {
    position: relative;
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.35rem;
    color: #dc2626;
    flex-shrink: 0;
}

.auth-login-alert__icon-ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background:
        linear-gradient(145deg, rgba(254, 226, 226, 0.96), rgba(255, 255, 255, 0.78));
    box-shadow:
        0 0 0 1px rgba(239, 68, 68, 0.09) inset,
        0 12px 28px rgba(220, 38, 38, 0.12),
        0 4px 8px rgba(220, 38, 38, 0.06);
}

.auth-login-alert__icon i {
    position: relative;
    z-index: 1;
}

.auth-login-alert__body {
    display: flex;
    flex-direction: column;
    gap: 0.32rem;
    min-width: 0;
}

.auth-login-alert__title {
    display: block;
    color: #450a0a;
    font-family: var(--font-outfit);
    font-size: 1.08rem;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -0.01em;
}

.auth-login-alert__text {
    margin: 0;
    color: #7f1d1d;
    font-family: var(--font-inter);
    font-size: 0.92rem;
    font-weight: 500;
    line-height: 1.5;
}

.auth-login-alert__dismiss {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 10px;
    border: none;
    background: rgba(0, 0, 0, 0.04);
    color: #991b1b;
    font-size: 0.85rem;
    cursor: pointer;
    flex-shrink: 0;
    transition:
        background 0.2s ease,
        transform 0.2s ease,
        color 0.2s ease;
    -webkit-tap-highlight-color: transparent;
}

.auth-login-alert__dismiss:hover {
    background: rgba(239, 68, 68, 0.12);
    color: #7f1d1d;
    transform: scale(1.08);
}

.auth-login-alert__dismiss:active {
    transform: scale(0.94);
}

.auth-login-alert__accent {
    position: absolute;
    bottom: 0;
    left: 1.4rem;
    right: 1.4rem;
    height: 3px;
    border-radius: 0 0 999px 999px;
    background: linear-gradient(90deg, transparent 0%, #fca5a5 25%, #ef4444 50%, #fb7185 75%, transparent 100%);
    opacity: 0.34;
    pointer-events: none;
}

/* Dark theme */
[data-theme="dark"] .auth-login-alert::before {
    background: rgba(5, 7, 14, 0.6);
}

[data-theme="dark"] .auth-login-alert__glow {
    background: radial-gradient(ellipse at center, rgba(248, 113, 113, 0.26), rgba(248, 113, 113, 0.06) 50%, transparent 80%);
}

[data-theme="dark"] .auth-login-alert__inner {
    background:
        radial-gradient(circle at 14% 8%, rgba(220, 38, 38, 0.18), transparent 42%),
        linear-gradient(160deg, rgba(24, 30, 45, 0.985), rgba(18, 24, 36, 0.975) 50%, rgba(15, 20, 32, 0.99));
    border-color: rgba(248, 113, 113, 0.16);
    box-shadow:
        0 40px 90px rgba(0, 0, 0, 0.52),
        0 16px 40px rgba(127, 29, 29, 0.18),
        0 0 0 1px rgba(255, 255, 255, 0.06) inset;
}

[data-theme="dark"] .auth-login-alert__icon-ring {
    background:
        linear-gradient(145deg, rgba(127, 29, 29, 0.88), rgba(30, 41, 59, 0.82));
    color: #fca5a5;
    box-shadow:
        0 0 0 1px rgba(248, 113, 113, 0.12) inset,
        0 12px 28px rgba(0, 0, 0, 0.28);
}

[data-theme="dark"] .auth-login-alert__icon {
    color: #fca5a5;
}

[data-theme="dark"] .auth-login-alert__title {
    color: #fff1f2;
}

[data-theme="dark"] .auth-login-alert__text {
    color: #fecaca;
}

[data-theme="dark"] .auth-login-alert__dismiss {
    background: rgba(255, 255, 255, 0.05);
    color: #fca5a5;
}

[data-theme="dark"] .auth-login-alert__dismiss:hover {
    background: rgba(248, 113, 113, 0.18);
    color: #fecaca;
}

[data-theme="dark"] .auth-login-alert__accent {
    opacity: 0.42;
}

/* Responsive */
@media (max-width: 720px) {
    .auth-login-alert__inner {
        grid-template-columns: 48px minmax(0, 1fr) auto;
        gap: 0.82rem;
        padding: 1.2rem 1.1rem 1.2rem 1.05rem;
        border-radius: 18px;
    }

    .auth-login-alert__icon {
        width: 48px;
        height: 48px;
        font-size: 1.15rem;
    }

    .auth-login-alert__title {
        font-size: 0.98rem;
    }

    .auth-login-alert__text {
        font-size: 0.86rem;
    }

    .auth-login-alert__dismiss {
        width: 28px;
        height: 28px;
        border-radius: 8px;
        font-size: 0.78rem;
    }

    .auth-login-alert__accent {
        left: 1.05rem;
        right: 1.05rem;
    }
}

/* --- CONTROLES DE FORMULARIO PREMIUM --- */
.form-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    position: relative;
}

.form-label {
    font-family: var(--font-outfit);
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--text-primary);
    transition: var(--transition-smooth);
}

.input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.input-wrapper i {
    position: absolute;
    left: 1rem;
    color: var(--text-secondary);
    transition: var(--transition-smooth);
}

.form-input {
    width: 100%;
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid rgba(15, 23, 42, 0.14);
    padding: 0.875rem 1rem 0.875rem 2.75rem;
    border-radius: 12px;
    color: var(--text-primary);
    font-family: var(--font-inter);
    font-size: 0.95rem;
    outline: none;
    transition: var(--transition-smooth);
}

[data-theme="dark"] .form-input {
    background: rgba(15, 23, 42, 0.82);
    border-color: rgba(226, 232, 240, 0.14);
}

.form-input::placeholder {
    color: var(--text-muted);
    opacity: 0.92;
}

.form-input:focus {
    border-color: var(--color-emerald);
    background: var(--bg-card);
    box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.15);
}

.form-input:focus + i, 
.form-input:not(:placeholder-shown) + i {
    color: var(--color-emerald);
}

.auth-footer-text {
    margin-top: 1.5rem;
    text-align: center;
    font-size: 0.875rem;
    color: var(--text-secondary);
    font-weight: 500;
}

.auth-link {
    color: var(--color-emerald);
    text-decoration: none;
    font-weight: 500;
    cursor: pointer;
    transition: var(--transition-smooth);
}

.auth-link:hover {
    color: var(--color-violet);
    text-decoration: underline;
}

/* Botón de envío completo */
.btn-submit {
    width: 100%;
    justify-content: center;
    margin-top: 0.5rem;
}

#btn-register-submit {
    margin-top: 0.875rem;
}

#btn-login-submit {
    margin-top: 1.05rem;
}

/* --- SECCIÓN DASHBOARD PREMIUM --- */
#dashboard-section {
    display: none;
    min-height: 100vh;
    background-color: var(--bg-dashboard);
    position: relative;
    overflow: hidden;
}

#dashboard-section.active {
    display: grid;
    grid-template-columns: 1fr;
    position: relative;
}


#dashboard-section.active .main-content::before {
    content: "";
    position: absolute;
    top: -1.3rem;
    left: 5.75rem;
    width: clamp(210px, 21vw, 315px);
    aspect-ratio: 3 / 2;
    z-index: 2030;
    pointer-events: none;
    background: url("../images/Logo.png") left center / contain no-repeat;
    opacity: 1;
    filter: drop-shadow(0 16px 28px rgba(37, 99, 235, 0.16));
}

[data-theme="dark"] #dashboard-section.active .main-content::before {
    background-image: url("../images/Logo-dark.png");
    opacity: 1;
    filter: drop-shadow(0 18px 30px rgba(14, 165, 233, 0.18));
}

/* Sidebar del Dashboard */
.dashboard-menu-toggle {
    position: fixed;
    top: 4.1rem;
    left: 0;
    z-index: 2040;
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    min-height: 56px;
    padding: 0.55rem 1rem 0.55rem 0.7rem;
    border: 1px solid rgba(96, 165, 250, 0.24);
    border-left: 0;
    border-radius: 0 18px 18px 0;
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.94), rgba(59, 130, 246, 0.94));
    color: #ffffff;
    box-shadow: 14px 18px 34px rgba(37, 99, 235, 0.22);
    cursor: pointer;
    font-family: var(--font-outfit);
    font-weight: 800;
    letter-spacing: 0.01em;
    transform: translate(-10px, -50%);
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s ease, opacity 0.25s ease;
    opacity: 0.3;
}

[data-theme="dark"] .dashboard-menu-toggle {
    background: linear-gradient(135deg, rgba(29, 78, 216, 0.96), rgba(14, 165, 233, 0.88));
    color: #f8fafc;
    border-color: rgba(125, 211, 252, 0.22);
    box-shadow: 14px 18px 34px rgba(0, 0, 0, 0.30);
}

.dashboard-menu-toggle:hover,
.dashboard-menu-toggle:focus-visible {
    transform: translate(0, -50%);
    box-shadow: 18px 22px 42px rgba(37, 99, 235, 0.28);
    opacity: 1;
}

.dashboard-menu-toggle__orb {
    width: 34px;
    height: 34px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    background: rgba(255, 255, 255, 0.16);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.dashboard-menu-toggle__text {
    line-height: 1;
}

.sidebar-float-backdrop {
    position: fixed;
    inset: 0;
    z-index: 2050;
    background:
        radial-gradient(circle at 18% 24%, rgba(96, 165, 250, 0.20), transparent 34%),
        rgba(2, 6, 23, 0.42);
    opacity: 0;
    pointer-events: none;
    backdrop-filter: blur(0);
    transition: opacity 0.36s ease, backdrop-filter 0.36s ease;
}

.sidebar-float-backdrop.is-open {
    opacity: 1;
    pointer-events: auto;
    backdrop-filter: blur(7px);
}
.sidebar {
    width: 312px;
    max-width: calc(100vw - 1rem);
    background:
        linear-gradient(145deg, rgba(248, 250, 252, 0.985) 0%, rgba(239, 246, 255, 0.965) 52%, rgba(245, 240, 255, 0.955) 100%),
        linear-gradient(90deg, rgba(37, 99, 235, 0.10), transparent 44%);
    border: 0;
    border-right: 1px solid rgba(96, 165, 250, 0.22);
    border-radius: 0 30px 30px 0;
    display: flex;
    flex-direction: column;
    padding: 2.35rem 1.2rem 1.35rem 1.05rem;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 2060;
    overflow: hidden;
    transform: translateX(calc(-100% - 1rem));
    transform-origin: left center;
    opacity: 0;
    pointer-events: none;
    box-shadow: 24px 0 70px rgba(15, 23, 42, 0.18);
    backdrop-filter: blur(18px);
    transition: transform 0.48s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.34s ease, box-shadow 0.34s ease;
}

[data-theme="dark"] .sidebar {
    background:
        linear-gradient(145deg, rgba(15, 23, 42, 0.985) 0%, rgba(30, 41, 59, 0.965) 54%, rgba(41, 31, 63, 0.945) 100%),
        linear-gradient(90deg, rgba(37, 99, 235, 0.18), transparent 44%);
    border-color: rgba(96, 165, 250, 0.20);
    box-shadow: 24px 0 70px rgba(0, 0, 0, 0.42);
}

.sidebar::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    border-radius: inherit;
    background:
        linear-gradient(160deg, rgba(59, 130, 246, 0.12), rgba(124, 58, 237, 0.08) 58%, transparent 82%),
        radial-gradient(circle at 100% 8%, rgba(124, 58, 237, 0.10), transparent 24%);
    opacity: 0.72;
}

.sidebar.is-open {
    transform: translateX(0);
    opacity: 1;
    pointer-events: auto;
}

.sidebar > * {
    position: relative;
    z-index: 1;
}

.sidebar-close-btn {
    position: absolute;
    top: 1rem;
    right: 1rem;
    z-index: 2;
    width: 38px;
    height: 38px;
    border: 1px solid rgba(148, 163, 184, 0.28);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.72);
    color: var(--text-secondary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.25s ease, color 0.25s ease, background 0.25s ease;
}

[data-theme="dark"] .sidebar-close-btn {
    background: rgba(15, 23, 42, 0.62);
    border-color: rgba(148, 163, 184, 0.20);
}

.sidebar-close-btn:hover {
    transform: rotate(90deg) scale(1.05);
    color: var(--color-emerald);
    background: rgba(96, 165, 250, 0.10);
}

.sidebar-logo {
    font-family: var(--font-outfit);
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    margin-bottom: 3rem;
}

.sidebar-logo i {
    color: var(--color-emerald);
}

.sidebar-menu {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.62rem;
    flex-grow: 1;
}

.menu-item {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    padding: 0.92rem 0.85rem;
    color: var(--text-secondary);
    text-decoration: none;
    font-family: var(--font-outfit);
    font-weight: 650;
    border: 0;
    border-radius: 14px;
    cursor: pointer;
    transition: var(--transition-smooth);
    background: transparent;
    position: relative;
}

[data-theme="dark"] .menu-item {
    background: transparent;
}

.menu-item:hover {
    color: var(--color-emerald);
    background: linear-gradient(90deg, rgba(96, 165, 250, 0.12), transparent);
    transform: translateX(4px);
    box-shadow: none;
}

.menu-item.active:hover {
    transform: none;
    background: rgba(96, 165, 250, 0.12);
}

.menu-item.active {
    background: linear-gradient(90deg, rgba(37, 99, 235, 0.16), rgba(96, 165, 250, 0.06), transparent);
    box-shadow: none;
    color: var(--color-emerald);
}

.menu-item.active::before {
    content: "";
    position: absolute;
    left: -0.48rem;
    top: 18%;
    width: 4px;
    height: 64%;
    border-radius: 999px;
    background: linear-gradient(180deg, #38bdf8, #2563eb);
    box-shadow: 0 0 18px rgba(37, 99, 235, 0.42);
}

.menu-item i:first-child,
.submenu-item i:first-child {
    width: 28px;
    height: 28px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    background: linear-gradient(135deg, rgba(96, 165, 250, 0.95), rgba(37, 99, 235, 0.95));
    box-shadow: 0 7px 15px rgba(37, 99, 235, 0.18);
    font-size: 0.8rem;
}

/* --- ESTILOS DE SUBMENÚ EN EL SIDEBAR --- */
.sidebar-menu li {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.submenu {
    list-style: none;
    margin-top: 0.35rem;
    margin-bottom: 0.55rem;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    border-left: 1px solid rgba(96, 165, 250, 0.24);
    margin-left: 1.15rem;
    padding-left: 0.85rem;
    transition: var(--transition-smooth);
    overflow: hidden;
    max-height: 350px; /* Suficiente para el submenú sin recortar elementos */
    opacity: 1;
}

.submenu.collapsed {
    max-height: 0;
    opacity: 0;
    margin-top: 0;
    margin-bottom: 0;
    pointer-events: none;
}

.submenu-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.55rem 0.62rem;
    color: var(--text-secondary);
    text-decoration: none;
    font-family: var(--font-outfit);
    font-size: 0.85rem;
    font-weight: 500;
    border-radius: 12px;
    cursor: pointer;
    transition: var(--transition-smooth);
}

.submenu-item:hover {
    color: var(--color-emerald);
    background: linear-gradient(90deg, rgba(96, 165, 250, 0.09), transparent);
    transform: translateX(4px);
}

.submenu-item.active:hover {
    transform: none;
    background: rgba(96, 165, 250, 0.1);
}

.submenu-item.active {
    background: linear-gradient(90deg, rgba(96, 165, 250, 0.12), transparent);
    color: var(--color-emerald);
}

.submenu-arrow {
    margin-left: auto;
    font-size: 0.75rem;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.menu-item.collapsed .submenu-arrow {
    transform: rotate(-90deg);
}


.sidebar-footer {
    border-top: 1px solid rgba(148, 163, 184, 0.24);
    padding-top: 1.15rem;
    margin-top: 1rem;
}

.user-profile-badge {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
    cursor: pointer;
}

.user-avatar {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: var(--gradient-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-family: var(--font-outfit);
    font-weight: 700;
    background-size: cover;
    background-position: center;
}

.user-avatar.has-profile-image {
    color: transparent;
}

.user-details {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.user-name {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.user-role {
    font-size: 0.75rem;
    color: var(--text-muted);
}

/* Área de Contenido Principal */
.main-content {
    position: relative;
    padding: 2.5rem;
    overflow-y: auto;
    height: 100vh;
}

.header-dashboard {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 3rem;
    position: relative;
    min-height: 52px;
}

.header-dashboard > div:first-child {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    max-width: min(760px, calc(100% - 360px));
    pointer-events: none;
}

.dashboard-header-actions {
    margin-left: auto;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.75rem;
}

.welcome-user-title {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.66rem;
    font-family: var(--font-outfit);
    font-size: 1.8rem;
    font-weight: 700;
    white-space: nowrap; /* Asegura que el saludo y nombre completo se lean siempre en una sola línea */
}

.welcome-user-icon {
    width: 59px;
    height: 59px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    border: 1px solid rgba(37, 99, 235, 0.16);
    border-radius: 10px;
    background:
        linear-gradient(135deg, rgba(239, 246, 255, 0.96), rgba(219, 234, 254, 0.72));
    background-size: cover;
    background-position: center;
    color: #31598f;
    font-family: var(--font-outfit);
    font-size: 0.86rem;
    font-weight: 700;
    line-height: 1;
    overflow: hidden;
    box-shadow:
        0 10px 22px rgba(15, 23, 42, 0.132),
        0 4px 10px rgba(37, 99, 235, 0.088),
        inset 0 1px 0 rgba(255, 255, 255, 0.72);
    transition: background-image 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease;
}

.welcome-user-icon.has-profile-image {
    color: transparent;
    background-color: #f8fbff;
    border-color: rgba(148, 163, 184, 0.28);
    box-shadow:
        0 10px 22px rgba(15, 23, 42, 0.143),
        0 4px 10px rgba(37, 99, 235, 0.088);
}

.welcome-user-title #welcome-user-fullname {
    background: var(--gradient-text);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.welcome-manager-code {
    display: block;
    margin: 0.18rem auto 0;
    padding: 0;
    color: #182e6e;
    font-family: var(--font-outfit);
    font-size: 0.86rem;
    font-weight: 600;
    letter-spacing: 0;
    line-height: 1.2;
    text-align: center;
    white-space: nowrap;
}

[data-theme="dark"] .welcome-manager-code {
    color: #ffffff;
}

.welcome-manager-code[hidden] {
    display: none;
}

.date-badge {
    padding: 0.5rem 1rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    font-size: 0.875rem;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* --- TARJETAS DE MÉTRICAS (MOCKUP SAAS FUTURO) --- */
.acting-as-banner {
    position: sticky;
    top: 0.85rem;
    z-index: 30;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.25rem;
    padding: 0.95rem 1rem;
    border: 1px solid rgba(234, 88, 12, 0.28);
    border-radius: 18px;
    background:
        radial-gradient(circle at 2% 10%, rgba(251, 146, 60, 0.2), transparent 34%),
        linear-gradient(135deg, rgba(255, 247, 237, 0.96), rgba(255, 255, 255, 0.92));
    box-shadow: 0 18px 38px rgba(194, 65, 12, 0.13);
    backdrop-filter: blur(14px);
}

.acting-as-banner[hidden] {
    display: none;
}

.acting-as-banner__eyebrow {
    display: block;
    color: #c2410c;
    font-family: var(--font-outfit);
    font-size: 0.68rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.acting-as-banner strong {
    display: block;
    margin-top: 0.1rem;
    color: #0f172a;
    font-family: var(--font-outfit);
    font-size: 1rem;
    font-weight: 900;
}

.acting-as-banner small {
    display: block;
    margin-top: 0.1rem;
    color: #64748b;
    font-size: 0.76rem;
}

.acting-as-banner__return {
    flex: 0 0 auto;
    border: 1px solid rgba(15, 23, 42, 0.12);
    background: #0f172a;
    color: #ffffff;
    box-shadow: 0 12px 26px rgba(15, 23, 42, 0.18);
}

.acting-as-banner__return:hover {
    background: #1e293b;
    color: #ffffff;
}

@media (max-width: 720px) {
    .acting-as-banner {
        align-items: stretch;
        flex-direction: column;
    }

    .acting-as-banner__return {
        width: 100%;
        justify-content: center;
    }
}

.metrics-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
    margin-bottom: 2rem;
}

.metrics-grid.metrics-grid--two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.metric-card[hidden] {
    display: none;
}

@media (max-width: 768px) {
    .metrics-grid.metrics-grid--two {
        grid-template-columns: 1fr;
    }
}

.metric-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 22px;
    padding: 1.15rem 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    position: relative;
    overflow: hidden;
    transition: var(--transition-smooth);
}

.metric-card:hover {
    border-color: rgba(59, 130, 246, 0.26);
    background: var(--bg-card-hover);
    box-shadow: 0 18px 45px rgba(30, 64, 175, 0.1);
    transform: translateY(-2px);
}

.metric-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.metric-title {
    font-size: 0.875rem;
    color: var(--text-secondary);
    font-weight: 500;
}

.metric-icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.metric-icon.emerald {
    background: rgba(96, 165, 250, 0.1);
    color: var(--color-emerald);
}

.metric-icon.violet {
    background: rgba(139, 92, 246, 0.1);
    color: var(--color-violet);
}

.metric-icon.warning {
    background: rgba(245, 158, 11, 0.1);
    color: var(--color-warning);
}

.metric-value {
    font-family: var(--font-outfit);
    font-size: 1.75rem;
    font-weight: 700;
}

.metric-trend {
    font-size: 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.metric-trend.up {
    color: var(--color-emerald);
}

.metric-trend.down {
    color: var(--color-error);
}

.preview-document__backdrop {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 50% 18%, rgba(59, 130, 246, 0.15), transparent 34%),
        rgba(15, 23, 42, 0.68);
    backdrop-filter: blur(12px) saturate(0.85);
}

#preview-image-popup .preview-document__panel {
    position: absolute;
    top: 50%;
    left: 50%;
    display: flex;
    width: min(94vw, 980px);
    height: min(92vh, 900px);
    min-height: 620px;
    padding: 1rem;
    overflow: hidden;
    flex-direction: column;
    transform: translate(-50%, -50%);
    border: 1px solid rgba(255, 255, 255, 0.72);
    border-radius: 26px;
    background: linear-gradient(145deg, #ffffff 0%, #f8fafc 100%);
    box-shadow:
        0 32px 100px rgba(2, 6, 23, 0.34),
        0 2px 0 rgba(255, 255, 255, 0.8) inset;
    z-index: 10;
}

.preview-document__header {
    display: flex;
    min-height: 58px;
    padding: 0.1rem 0.35rem 0.8rem;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.preview-document__identity {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 0.75rem;
}

.preview-document__icon {
    display: grid;
    width: 40px;
    height: 40px;
    flex: 0 0 auto;
    place-items: center;
    border: 1px solid rgba(37, 99, 235, 0.16);
    border-radius: 13px;
    background: rgba(37, 99, 235, 0.09);
    color: #2563eb;
    box-shadow: 0 8px 20px rgba(37, 99, 235, 0.1);
}

.preview-document__eyebrow {
    display: block;
    color: #64748b;
    font-size: 0.57rem;
    font-weight: 800;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}

.preview-document__header h3 {
    margin: 0.05rem 0 0;
    color: #0f172a;
    font-family: var(--font-outfit);
    font-size: 0.98rem;
    line-height: 1.15;
}

.preview-document__header p {
    max-width: min(54vw, 540px);
    margin: 0.12rem 0 0;
    overflow: hidden;
    color: #64748b;
    font-size: 0.67rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.preview-document__status {
    display: inline-flex;
    padding: 0.38rem 0.62rem;
    align-items: center;
    gap: 0.35rem;
    border: 1px solid rgba(16, 185, 129, 0.16);
    border-radius: 999px;
    background: rgba(16, 185, 129, 0.07);
    color: #047857;
    font-size: 0.63rem;
    font-weight: 750;
    white-space: nowrap;
}

.preview-document__loader {
    display: none;
    width: 100%;
    min-height: 0;
    flex: 1;
    align-items: center;
    justify-content: center;
    color: #2563eb;
    font-size: 1.5rem;
}

#preview-image-popup .preview-document__viewport {
    position: relative;
    display: flex;
    width: 100%;
    min-height: 0;
    padding: 0;
    overflow: hidden;
    flex: 1;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(15, 23, 42, 0.1);
    border-radius: 17px;
    background: #202124;
    box-shadow:
        0 14px 34px rgba(15, 23, 42, 0.16),
        0 0 0 4px rgba(148, 163, 184, 0.07);
}

#preview-image-element {
    display: none;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

#preview-pdf-element {
    display: none;
    width: 100%;
    height: 100%;
    border: 0;
    background: #202124;
}

.preview-document__fallback {
    display: none;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    color: #cbd5e1;
}

.preview-document__fallback i {
    color: #f87171;
    font-size: 4rem;
}

.preview-document__fallback span {
    max-width: 260px;
    font-weight: 650;
    text-align: center;
}

.preview-document__footer {
    display: flex;
    min-height: 60px;
    padding: 0.8rem 0.15rem 0;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    color: #64748b;
    font-size: 0.65rem;
}

.preview-document__footer > span {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.preview-document__footer > span i {
    color: #2563eb;
}

#preview-image-popup .preview-document__close {
    padding: 0.58rem 1.1rem;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 11px;
    background: rgba(15, 23, 42, 0.055);
    color: #0f172a;
    font-size: 0.78rem;
    font-weight: 700;
}

#preview-image-popup .preview-document__close:hover {
    background: #0f172a;
    color: #ffffff;
    transform: translateY(-1px);
}

@media (max-width: 720px) {
    #preview-image-popup .preview-document__panel {
        width: 96vw;
        height: 94vh;
        min-height: 0;
        padding: 0.7rem;
        border-radius: 20px;
    }

    .preview-document__status,
    .preview-document__footer > span {
        display: none;
    }

    .preview-document__footer {
        min-height: 54px;
        justify-content: flex-end;
    }
}

.annual-billing-pulse {
    position: relative;
    min-height: 176px;
    margin: -0.75rem 0 1rem;
    padding: 1rem 1.25rem 0.75rem;
    overflow: hidden;
    border: 1px solid var(--border-color);
    border-radius: 22px;
    background:
        linear-gradient(115deg, rgba(37, 99, 235, 0.055), transparent 38%),
        var(--bg-card);
    box-shadow: 0 12px 32px rgba(30, 64, 175, 0.07);
}

.annual-billing-pulse::after {
    content: "";
    position: absolute;
    top: -90px;
    right: 8%;
    width: 220px;
    height: 150px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(37, 99, 235, 0.11), transparent 68%);
    pointer-events: none;
}

.annual-billing-pulse__header {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.25rem;
}

.annual-billing-pulse__identity {
    display: flex;
    align-items: center;
    gap: 0.7rem;
}

.annual-billing-pulse__icon {
    display: grid;
    width: 36px;
    height: 36px;
    flex: 0 0 auto;
    place-items: center;
    border: 1px solid rgba(37, 99, 235, 0.16);
    border-radius: 12px;
    background: rgba(37, 99, 235, 0.09);
    color: #2563eb;
    box-shadow: 0 8px 20px rgba(37, 99, 235, 0.1);
}

.annual-billing-pulse h3 {
    margin: 0;
    color: var(--text-primary);
    font-family: var(--font-outfit);
    font-size: 0.98rem;
    font-weight: 700;
}

.annual-billing-pulse__summary {
    display: flex;
    align-items: baseline;
    gap: 0.45rem;
    padding: 0.34rem 0.6rem;
    border: 1px solid rgba(245, 158, 11, 0.16);
    border-radius: 999px;
    background: rgba(245, 158, 11, 0.07);
}

.annual-billing-pulse__actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.65rem;
}

.annual-billing-pulse__types,
.annual-billing-pulse__years {
    display: inline-flex;
    align-items: stretch;
    padding: 3px;
    border: 1px solid rgba(148, 163, 184, 0.18);
    border-radius: 12px;
    background: rgba(148, 163, 184, 0.08);
}

.annual-billing-pulse__types {
    gap: 2px;
}

.annual-billing-type,
.annual-billing-year {
    position: relative;
    min-width: 48px;
    min-height: 29px;
    padding: 0.25rem 0.45rem;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    font-family: var(--font-outfit);
    font-size: 0.68rem;
    font-weight: 700;
    line-height: 1;
    transition: 180ms ease;
}

.annual-billing-type {
    min-width: 64px;
}

.annual-billing-type:hover,
.annual-billing-year:hover {
    color: #2563eb;
    background: rgba(37, 99, 235, 0.07);
}

.annual-billing-type.is-active,
.annual-billing-year.is-active {
    background: var(--bg-card);
    color: #1d4ed8;
    box-shadow: 0 3px 10px rgba(30, 64, 175, 0.12);
}

.annual-billing-type[data-annual-billing-type="purchase"].is-active {
    color: #047857;
    box-shadow: 0 3px 10px rgba(5, 150, 105, 0.13);
}

.annual-billing-year.is-current:not(.is-active)::after {
    content: "";
    position: absolute;
    right: 5px;
    bottom: 4px;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #22c55e;
}

.annual-billing-year small {
    display: block;
    margin-top: 0.12rem;
    color: #059669;
    font-size: 0.43rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.annual-billing-pulse__summary span {
    color: var(--text-muted);
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
}

.annual-billing-pulse__summary strong {
    color: #b45309;
    font-size: 0.7rem;
    font-weight: 800;
}

.annual-billing-pulse__chart {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 112px;
}

[data-theme="dark"] .annual-billing-pulse {
    background:
        linear-gradient(115deg, rgba(37, 99, 235, 0.1), transparent 38%),
        var(--bg-card);
}

[data-theme="dark"] .annual-billing-pulse__summary strong {
    color: #fbbf24;
}

[data-theme="dark"] .annual-billing-type.is-active,
[data-theme="dark"] .annual-billing-year.is-active {
    background: rgba(30, 41, 59, 0.95);
    color: #93c5fd;
}

[data-theme="dark"] .annual-billing-type[data-annual-billing-type="purchase"].is-active {
    color: #86efac;
}

@media (max-width: 640px) {
    .annual-billing-pulse {
        min-height: 218px;
        padding-inline: 0.9rem;
    }

    .annual-billing-pulse__header {
        display: grid;
    }

    .annual-billing-pulse__actions {
        justify-content: space-between;
    }

    .annual-billing-pulse__types,
    .annual-billing-pulse__years {
        flex: 1;
    }

    .annual-billing-type,
    .annual-billing-year {
        flex: 1;
        min-width: 0;
    }

    .annual-billing-pulse__summary {
        display: none;
    }

    .annual-billing-pulse__chart {
        height: 116px;
    }
}

/* --- GRÁFICOS FINANCIEROS PREMIUM --- */
.charts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); /* Restaurado como antes, uno al lado del otro */
    gap: 1.5rem;
    margin-bottom: 3rem;
}

.chart-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    padding: 2rem;
    box-shadow: var(--shadow-premium);
    backdrop-filter: var(--blur-glass);
    transition: var(--transition-smooth);
    position: relative;
    overflow: hidden;
}

.chart-card:hover {
    border-color: rgba(96, 165, 250, 0.2);
    background: var(--bg-card-hover);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
}

[data-theme="light"] .chart-card:hover {
    box-shadow: 0 12px 40px rgba(15, 23, 42, 0.06);
}

.chart-title {
    font-family: var(--font-outfit);
    font-size: 1.15rem;
    font-weight: 600;
    margin-bottom: 1.25rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--text-primary);
}

.chart-title i {
    color: var(--color-emerald);
}

.chart-container {
    position: relative;
    width: 100%;
    height: 270px; /* Reducida la altura un 20% aproximado para que no quede tan largo verticalmente */
}

.scrollable-chart {
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: thin;
    scrollbar-color: rgba(96, 165, 250, 0.15) transparent;
}

/* Custom scrollbar para la vista horizontal del gráfico */
.scrollable-chart::-webkit-scrollbar {
    height: 5px;
}

.scrollable-chart::-webkit-scrollbar-track {
    background: transparent;
}

.scrollable-chart::-webkit-scrollbar-thumb {
    background: rgba(96, 165, 250, 0.15);
    border-radius: 9999px;
    transition: var(--transition-smooth);
}

.scrollable-chart::-webkit-scrollbar-thumb:hover {
    background: var(--color-emerald);
}

.chart-scroll-wrapper {
    min-width: 1280px; /* Más espacio horizontal para columnas anchas en los 12 meses */
    height: 100%;
}


.dashboard-block {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    padding: 1.25rem; /* Reducido de 2rem a 1.25rem para ganar ancho horizontal útil */
    box-shadow: var(--shadow-premium);
}

/* --- TABS DE LA TABLA --- */
.table-tabs {
    display: inline-flex;
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid var(--border-color);
    padding: 0.2rem;
    border-radius: 10px;
    gap: 0.15rem;
}

[data-theme="light"] .table-tabs {
    background: rgba(15, 23, 42, 0.05);
}

.table-tab {
    background: none;
    border: 1px solid transparent;
    outline: none;
    color: var(--text-secondary);
    font-family: var(--font-outfit);
    font-size: 0.78rem;
    font-weight: 600;
    padding: 0.35rem 0.9rem;
    border-radius: 7px;
    cursor: pointer;
    transition: filter 0.22s ease, background 0.22s ease, color 0.22s ease;
}

.table-tab[disabled] {
    opacity: 0.5;
    cursor: not-allowed !important;
    background: none !important;
    color: var(--text-muted) !important;
    border-color: transparent !important;
    box-shadow: none !important;
    pointer-events: none !important;
}

.table-tab:not(.table-tab--pending):hover {
    filter: none;
    color: #ffffff !important;
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
    box-shadow: 0 7px 18px rgba(37, 99, 235, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.24);
}

[data-theme="light"] .table-tab:not(.table-tab--pending):hover {
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
}

.table-tab:not(.table-tab--pending).active:hover {
    filter: none;
    color: #ffffff !important;
    background: linear-gradient(135deg, #1d4ed8 0%, #1e40af 100%);
    box-shadow: 0 8px 20px rgba(29, 78, 216, 0.30), inset 0 1px 0 rgba(255, 255, 255, 0.26);
}

.table-tab.active {
    background: var(--gradient-primary);
    color: #ffffff !important;
    box-shadow: 0 2px 8px rgba(96, 165, 250, 0.2);
}

#tab-todas.active,
#tab-todas.active:hover {
    background: linear-gradient(135deg, #2563eb 0%, #16a34a 100%);
    box-shadow: 0 6px 16px rgba(22, 163, 74, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

.table-tab--pending {
    display: inline-flex;
    align-items: center;
    gap: 0.42rem;
    color: #818cf8;
    border: 1px solid rgba(129, 140, 248, 0.25);
}

.table-tab--pending.is-loading {
    background: #f3f4f6 !important;
    color: #4b5563 !important;
    border: 1px solid #e5e7eb !important;
    cursor: not-allowed !important;
    pointer-events: none !important;
    box-shadow: none !important;
    animation: none !important;
    opacity: 0.85;
}

.table-tab--pending.is-loading .table-tab__count {
    background: #e5e7eb !important;
    color: #4b5563 !important;
}

[data-theme="dark"] .table-tab--pending.is-loading {
    background: #1f2937 !important;
    color: #6b7280 !important;
    border: 1px solid #374151 !important;
    opacity: 0.7;
}

[data-theme="dark"] .table-tab--pending.is-loading .table-tab__count {
    background: #374151 !important;
    color: #6b7280 !important;
}

.table-tab__count {
    display: inline-flex;
    min-width: 1.3rem;
    height: 1.3rem;
    align-items: center;
    justify-content: center;
    padding: 0 0.32rem;
    border-radius: 9999px;
    background: rgba(129, 140, 248, 0.16);
    color: #818cf8;
    font-size: 0.68rem;
    font-weight: 700;
}

.block-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
}

.block-title {
    font-family: var(--font-outfit);
    font-size: 1.25rem;
    font-weight: 600;
}

.table-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    width: 100%;
    border: 1px solid rgba(30, 100, 190, 0.5);
    border-radius: 8px;
}

.custom-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    text-align: left;
    white-space: nowrap; /* Evita saltos de línea molestos */
    table-layout: auto;
}

.custom-table th {
    padding: 0.4rem 0.45rem;
    font-family: var(--font-outfit);
    font-size: 0.72rem;
    color: var(--text-muted);
    font-weight: 600;
    border-bottom: 1px solid var(--border-color);
}

.custom-table td {
    padding: 0.45rem 0.45rem; /* Relleno ultra-compacto para evitar desbordes */
    font-size: 0.76rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

/* Reglas globales de botones dentro de la tabla custom para garantizar tamaño compacto sin recortes */
.custom-table .btn-premium {
    padding: 0.32rem 0.75rem !important;
    font-size: 0.72rem !important;
    border-radius: 8px !important;
    gap: 0.3rem !important;
    font-family: var(--font-inter) !important;
    font-weight: 600 !important;
    margin-right: 0.3rem !important;
    min-width: 78px !important;
    height: 28px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.custom-table .btn-premium:last-child {
    margin-right: 0 !important;
}

.custom-table tr:last-child td {
    border-bottom: none;
}

.invoice-table-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.85rem;
    width: 100%;
    margin-top: 0.85rem;
    padding: 0.68rem 0.78rem;
    border: 1px solid rgba(30, 100, 190, 0.14);
    border-radius: 8px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(248, 251, 255, 0.9)),
        radial-gradient(circle at 0% 50%, rgba(37, 99, 235, 0.08), transparent 34%);
    box-shadow: 0 14px 30px rgba(15, 23, 42, 0.05);
}

.invoice-table-pagination[hidden] {
    display: none;
}

.invoice-table-pagination__summary,
.pagination-info {
    display: inline-flex;
    align-items: baseline;
    gap: 0.35rem;
    color: #64748b;
    font-family: var(--font-outfit);
    font-size: 0.78rem;
    font-weight: 700;
    white-space: nowrap;
}

.invoice-table-pagination__summary span,
.pagination-info strong {
    color: #1d4ed8;
    font-size: 0.9rem;
    font-weight: 900;
}

.invoice-table-pagination__summary small {
    color: #64748b;
    font-size: 0.76rem;
    font-weight: 700;
}

.invoice-table-pagination__controls,
.pagination-controls {
    display: inline-flex;
    align-items: center;
    gap: 0.32rem;
}

.invoice-page-btn,
.btn-pagination-page,
.btn-pagination-nav,
.manager-page-btn {
    display: inline-grid;
    min-width: 32px;
    height: 32px;
    place-items: center;
    padding: 0 0.45rem;
    border: 1px solid rgba(37, 99, 235, 0.14);
    border-radius: 8px;
    background: #ffffff;
    color: #334155;
    cursor: pointer;
    font-family: var(--font-outfit);
    font-size: 0.78rem;
    font-weight: 850;
    transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.invoice-page-btn:hover:not(:disabled):not(.is-active),
.btn-pagination-page:hover:not(:disabled):not(.active),
.btn-pagination-nav:hover:not(:disabled),
.manager-page-btn:hover:not(:disabled):not(.active) {
    transform: translateY(-1px);
    border-color: rgba(37, 99, 235, 0.28);
    color: #1d4ed8;
    box-shadow: 0 10px 18px rgba(37, 99, 235, 0.12);
}

.invoice-page-btn.is-active,
.btn-pagination-page.active,
.manager-page-btn.active {
    border-color: transparent;
    background: linear-gradient(135deg, #1d4ed8, #3b82f6);
    color: #ffffff;
    box-shadow: 0 12px 22px rgba(37, 99, 235, 0.2);
}

.invoice-page-btn:disabled,
.btn-pagination-page:disabled,
.btn-pagination-nav:disabled,
.manager-page-btn:disabled {
    cursor: not-allowed;
    opacity: 0.45;
    box-shadow: none;
}

.invoice-page-btn--arrow,
.btn-pagination-nav {
    color: #1e3a8a;
}

.invoice-page-gap {
    display: inline-flex;
    min-width: 18px;
    justify-content: center;
    color: #94a3b8;
    font-family: var(--font-outfit);
    font-size: 0.86rem;
    font-weight: 900;
}

[data-theme="dark"] .invoice-table-pagination {
    border-color: rgba(96, 165, 250, 0.16);
    background:
        linear-gradient(180deg, rgba(15, 23, 42, 0.74), rgba(15, 23, 42, 0.62)),
        radial-gradient(circle at 0% 50%, rgba(59, 130, 246, 0.16), transparent 34%);
}

[data-theme="dark"] .invoice-table-pagination__summary,
[data-theme="dark"] .pagination-info,
[data-theme="dark"] .invoice-table-pagination__summary small {
    color: #94a3b8;
}

[data-theme="dark"] .invoice-table-pagination__summary span,
[data-theme="dark"] .pagination-info strong {
    color: #93c5fd;
}

[data-theme="dark"] .invoice-page-btn,
[data-theme="dark"] .btn-pagination-page,
[data-theme="dark"] .btn-pagination-nav,
[data-theme="dark"] .manager-page-btn {
    border-color: rgba(147, 197, 253, 0.14);
    background: rgba(15, 23, 42, 0.86);
    color: #cbd5e1;
}

[data-theme="dark"] .invoice-page-btn:hover:not(:disabled):not(.is-active),
[data-theme="dark"] .btn-pagination-page:hover:not(:disabled):not(.active),
[data-theme="dark"] .btn-pagination-nav:hover:not(:disabled),
[data-theme="dark"] .manager-page-btn:hover:not(:disabled):not(.active) {
    border-color: rgba(147, 197, 253, 0.28);
    color: #93c5fd;
}

@media (max-width: 640px) {
    .invoice-table-pagination {
        align-items: stretch;
        flex-direction: column;
    }

    .invoice-table-pagination__controls {
        justify-content: center;
    }
}

.manager-clients-panel {
    position: relative;
    overflow: hidden;
    margin-top: 1.4rem;
    padding: 1.2rem;
    border: 1px solid rgba(148, 163, 184, 0.18);
    border-radius: 16px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(248, 250, 252, 0.98)),
        radial-gradient(circle at 8% 0%, rgba(96, 165, 250, 0.08), transparent 34%);
    box-shadow: 0 18px 48px rgba(15, 23, 42, 0.06);
}

.manager-clients-panel__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1.25rem;
    margin-bottom: 1rem;
}

.manager-clients-panel__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    margin-bottom: 0.45rem;
    color: #31598f;
    font-size: 0.73rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.manager-clients-panel__header h3 {
    margin: 0;
    color: #17233a;
    font-family: var(--font-outfit);
    font-size: 1.45rem;
    line-height: 1.1;
}

.manager-clients-panel__header p {
    margin: 0.2rem 0 0;
    color: #64748b;
    font-size: 0.88rem;
}

.manager-clients-panel__summary {
    min-width: 118px;
    padding: 0.85rem 1rem;
    border: 1px solid rgba(49, 89, 143, 0.12);
    border-radius: 13px;
    background: linear-gradient(180deg, #f8fbff, #eef5ff);
    color: #1f3d68;
    text-align: center;
    box-shadow: 0 14px 30px rgba(49, 89, 143, 0.08);
}

.manager-clients-panel__summary span {
    display: block;
    font-family: var(--font-outfit);
    font-size: 1.55rem;
    font-weight: 800;
    line-height: 1;
}

.manager-clients-panel__summary small {
    color: #64748b;
    font-size: 0.72rem;
    font-weight: 600;
}

.manager-clients-panel__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.7rem;
    margin-bottom: 1rem;
}

.manager-clients-panel__meta span {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.45rem 0.7rem;
    border: 1px solid rgba(148, 163, 184, 0.2);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.72);
    color: #475569;
    font-size: 0.78rem;
    font-weight: 600;
}

.manager-clients-panel__meta i,
.manager-clients-panel__meta strong {
    color: #31598f;
}

.manager-clients-search {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(220px, 1fr) auto auto auto;
    align-items: center;
    gap: 0.65rem;
    margin-top: 0.45rem;
    margin-bottom: 0.72rem;
    padding: 0.48rem 0.62rem;
    border: 1px solid rgba(148, 163, 184, 0.18);
    border-radius: 14px;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(246, 250, 255, 0.94)),
        radial-gradient(circle at 0% 50%, rgba(96, 165, 250, 0.08), transparent 32%);
    box-shadow: 0 14px 34px rgba(15, 23, 42, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.9);
    transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.manager-clients-search:focus-within {
    transform: translateY(-1px);
    border-color: rgba(96, 165, 250, 0.28);
    box-shadow: 0 20px 44px rgba(49, 89, 143, 0.09), 0 0 0 4px rgba(96, 165, 250, 0.06);
}

.manager-clients-search__icon {
    display: inline-flex;
    width: 36px;
    height: 36px;
    align-items: center;
    justify-content: center;
    border-radius: 11px;
    background: linear-gradient(135deg, #31598f, #6aa1da);
    color: #ffffff;
    box-shadow: 0 12px 24px rgba(49, 89, 143, 0.14);
}

.manager-clients-search__field {
    display: grid;
    gap: 0.08rem;
}

.manager-clients-search__field span {
    color: #31598f;
    font-family: var(--font-outfit);
    font-size: 0.62rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.manager-clients-search input {
    width: 100%;
    min-height: 20px;
    padding: 0;
    border: 0;
    outline: none;
    background: transparent;
    color: #0f172a;
    font-family: var(--font-outfit);
    font-size: 0.9rem;
    font-weight: 800;
}

.manager-clients-search input::placeholder {
    color: #64748b;
    font-weight: 700;
}

.manager-clients-search__hint {
    display: inline-flex;
    align-items: center;
    gap: 0.38rem;
    padding: 0.3rem 0.52rem;
    border-radius: 999px;
    background: rgba(96, 165, 250, 0.1);
    color: #31598f;
    font-family: var(--font-outfit);
    font-size: 0.74rem;
    font-weight: 900;
    white-space: nowrap;
}

.manager-clients-year {
    display: inline-grid;
    gap: 0.08rem;
    min-width: 86px;
}

.manager-clients-quarter {
    min-width: 146px;
}

.manager-clients-status {
    min-width: 142px;
}

.manager-clients-year span {
    color: #64748b;
    font-family: var(--font-outfit);
    font-size: 0.6rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.manager-clients-year select {
    min-height: 32px;
    padding: 0.25rem 1.8rem 0.25rem 0.65rem;
    border: 1px solid rgba(148, 163, 184, 0.18);
    border-radius: 9px;
    outline: none;
    background: #ffffff;
    color: #31598f;
    cursor: pointer;
    font-family: var(--font-outfit);
    font-size: 0.84rem;
    font-weight: 850;
}

.manager-clients-table-wrap {
    overflow-x: auto;
    border: 1px solid rgba(148, 163, 184, 0.16);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.92);
    transform-origin: 50% 0;
    transition: opacity 0.22s ease, transform 0.22s ease, filter 0.22s ease;
}

.manager-clients-table-wrap.is-page-transitioning {
    opacity: 0.58;
    transform: translateY(4px);
    filter: saturate(0.94);
}

.manager-clients-table-wrap.is-page-entering {
    animation: managerPageIn 0.34s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.manager-clients-table {
    width: 100%;
    min-width: 760px;
    border-collapse: separate;
    border-spacing: 0;
    color: #0f172a;
}

.manager-clients-table th {
    padding: 0.8rem 0.95rem;
    background: linear-gradient(180deg, #fbfdff, #f3f7fb);
    color: #64748b;
    font-family: var(--font-outfit);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-align: left;
    text-transform: uppercase;
    border-bottom: 1px solid rgba(148, 163, 184, 0.18);
}

.manager-clients-sort-btn {
    appearance: none;
    -webkit-appearance: none;
    display: inline-flex;
    align-items: center;
    gap: 0.32rem;
    margin: -0.28rem -0.42rem;
    padding: 0.28rem 0.42rem;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: inherit;
    cursor: pointer;
    font: inherit;
    letter-spacing: inherit;
    text-align: left;
    text-transform: inherit;
    transition: color 0.18s ease, background 0.18s ease, transform 0.18s ease;
}

.manager-clients-sort-btn i {
    color: #94a3b8;
    font-size: 0.72rem;
    transition: color 0.18s ease, transform 0.18s ease;
}

.manager-clients-sort-btn:hover {
    background: rgba(99, 102, 241, 0.08);
    color: #4f46e5;
}

.manager-clients-sort-btn.is-active {
    color: #4f46e5;
}

.manager-clients-sort-btn.is-active i {
    color: #8b5cf6;
}

.manager-clients-sort-btn:hover i {
    transform: translateY(-1px);
}

.manager-clients-table td {
    padding: 0.78rem 0.95rem;
    border-bottom: 1px solid rgba(148, 163, 184, 0.11);
    font-size: 0.84rem;
    vertical-align: middle;
}

.manager-clients-table th:last-child,
.manager-clients-table td:last-child {
    width: 230px;
    min-width: 230px;
}

.manager-clients-table tbody tr {
    transition: background 0.22s ease, box-shadow 0.22s ease;
    animation: managerRowIn 0.28s ease both;
}

.manager-clients-table tbody tr:hover {
    background: rgba(248, 251, 255, 0.95);
    box-shadow: inset 2px 0 0 rgba(106, 161, 218, 0.55);
}

.manager-clients-table tr:last-child td {
    border-bottom: 0;
}

.manager-client-cell {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.manager-client-row {
    cursor: pointer;
}

.manager-client-row.is-expanded {
    background: rgba(248, 251, 255, 0.98);
    box-shadow: inset 2px 0 0 rgba(49, 89, 143, 0.48);
}

.manager-client-row.is-expanded .manager-client-tree-toggle i {
    transform: rotate(90deg);
}

.manager-client-tree-toggle {
    display: inline-flex;
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(148, 163, 184, 0.2);
    border-radius: 9px;
    background: #ffffff;
    color: #48658a;
    cursor: pointer;
}

.manager-client-tree-toggle i {
    font-size: 0.72rem;
    transition: transform 0.18s ease;
}

.manager-client-avatar {
    display: inline-flex;
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(96, 165, 250, 0.18);
    border-radius: 11px;
    background: linear-gradient(135deg, #eef6ff, #dcecff);
    color: #31598f;
    font-family: var(--font-outfit);
    font-size: 0.82rem;
    font-weight: 800;
    box-shadow: 0 10px 22px rgba(49, 89, 143, 0.08);
}

.manager-client-avatar--image {
    overflow: hidden;
    padding: 0;
    background: #f8fbff;
}

.manager-client-avatar--image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.manager-client-cell strong {
    display: block;
    color: #17233a;
    font-family: var(--font-outfit);
    font-size: 0.91rem;
    line-height: 1.1;
}

.manager-client-cell small {
    display: block;
    margin-top: 0.2rem;
    color: #64748b;
    font-size: 0.72rem;
    font-weight: 600;
}

.manager-client-email {
    color: #334155;
    font-weight: 600;
}

.manager-client-document {
    display: inline-flex;
    min-width: 78px;
    justify-content: center;
    padding: 0;
    color: #31598f;
    font-family: var(--font-outfit);
    font-size: 0.76rem;
    font-weight: 800;
}

.manager-client-code {
    color: #31598f;
    font-family: var(--font-outfit);
    font-weight: 800;
}

.manager-client-status {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.25rem 0.55rem;
    border-radius: 999px;
    background: rgba(34, 197, 94, 0.08);
    color: #166534;
    font-size: 0.74rem;
    font-weight: 800;
}

.manager-client-actions {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.45rem;
    white-space: nowrap;
    flex-wrap: nowrap;
}

.manager-client-view-btn,
.manager-client-act-as-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    min-height: 32px;
    padding: 0.35rem 0.7rem;
    border-radius: 10px;
    cursor: pointer;
    font-family: var(--font-outfit);
    font-size: 0.78rem;
    font-weight: 800;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background 0.18s ease, opacity 0.18s ease;
}

.manager-client-view-btn {
    min-width: 78px;
}

.manager-client-act-as-btn {
    min-width: 132px;
}

.manager-client-view-btn {
    border: 1px solid rgba(148, 163, 184, 0.2);
    background: #ffffff;
    color: #31598f;
}

.manager-client-view-btn:hover {
    transform: translateY(-1px);
    border-color: rgba(96, 165, 250, 0.32);
    box-shadow: 0 10px 22px rgba(49, 89, 143, 0.09);
}

.manager-client-act-as-btn {
    border: 1px solid rgba(30, 41, 59, 0.86);
    background: linear-gradient(135deg, #475569, #1e293b);
    color: #ffffff;
    box-shadow: 0 6px 14px rgba(30, 41, 59, 0.24);
}

.manager-client-act-as-btn:hover:not(:disabled) {
    transform: translateY(-1px);
    border-color: rgba(15, 23, 42, 0.95);
    background: linear-gradient(135deg, #64748b, #0f172a);
    box-shadow: 0 8px 18px rgba(30, 41, 59, 0.32);
}

.manager-client-act-as-btn:disabled {
    cursor: wait;
    opacity: 0.65;
}

.manager-client-invoices-row td {
    padding: 0 !important;
    background: linear-gradient(180deg, rgba(248, 251, 255, 0.92), rgba(250, 252, 255, 0.98));
}

.manager-client-invoices-tree {
    position: relative;
    margin: 0 0 0 3.1rem;
    padding: 0.85rem 1rem 1rem 1.25rem;
    border-left: 1px solid rgba(106, 161, 218, 0.22);
}

.manager-client-invoices-tree__rail {
    position: absolute;
    left: -2px;
    top: 0.9rem;
    width: 2px;
    height: calc(100% - 1.8rem);
    background: linear-gradient(180deg, rgba(106, 161, 218, 0.7), rgba(106, 161, 218, 0.08));
    border-radius: 999px;
}

.manager-client-invoices-tree__summary {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
    margin-bottom: 0.8rem;
}

.manager-client-invoices-tree__summary span {
    display: inline-flex;
    align-items: center;
    gap: 0.38rem;
    padding: 0.34rem 0.58rem;
    border: 1px solid rgba(148, 163, 184, 0.16);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.82);
    color: #48658a;
    font-family: var(--font-outfit);
    font-size: 0.74rem;
    font-weight: 850;
}

.manager-invoice-batch-process {
    appearance: none;
    -webkit-appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    min-height: 30px;
    padding: 0.36rem 0.82rem;
    border: 1px solid rgba(129, 140, 248, 0.24);
    border-radius: 999px;
    background: linear-gradient(135deg, #4f46e5 0%, #6366f1 56%, #8b5cf6 100%);
    color: #ffffff;
    cursor: pointer;
    font-family: var(--font-outfit);
    font-size: 0.74rem;
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
    box-shadow: 0 10px 22px rgba(99, 102, 241, 0.2);
    transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
}

.manager-invoice-batch-process i {
    display: inline-flex;
    width: 18px;
    height: 18px;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.18);
    color: #ffffff;
    font-size: 0.66rem;
}

.manager-invoice-batch-process:hover {
    transform: translateY(-1px);
    filter: saturate(1.05);
    box-shadow: 0 14px 26px rgba(99, 102, 241, 0.26);
}

.manager-client-invoices-list {
    display: grid;
    gap: 0.55rem;
}

.manager-client-invoice-card {
    position: relative;
    overflow: hidden;
    --invoice-weight: 0.08;
    --invoice-bar: 8%;
    --invoice-accent-rgb: 49, 89, 143;
    --invoice-fill-rgb: 219, 234, 254;
    display: grid;
    grid-template-columns: minmax(220px, 1.6fr) minmax(110px, 0.8fr) minmax(100px, 0.7fr) auto;
    align-items: center;
    gap: 0.75rem;
    padding: 0.72rem 0.85rem 0.92rem;
    border: 1px solid rgba(var(--invoice-accent-rgb), calc(0.1 + (var(--invoice-weight) * 0.16)));
    border-left: 4px solid rgba(var(--invoice-accent-rgb), calc(0.38 + (var(--invoice-weight) * 0.42)));
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.97);
    box-shadow: 0 10px 24px rgba(var(--invoice-accent-rgb), calc(0.035 + (var(--invoice-weight) * 0.04)));
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
    animation: managerRowIn 0.24s ease both;
}

.manager-client-invoice-card::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: var(--invoice-bar);
    border-radius: inherit;
    background:
        linear-gradient(90deg,
            rgba(var(--invoice-fill-rgb), calc(0.48 + (var(--invoice-weight) * 0.3))) 0%,
            rgba(var(--invoice-fill-rgb), calc(0.24 + (var(--invoice-weight) * 0.18))) 100%);
    pointer-events: none;
}

.manager-client-invoice-card > * {
    position: relative;
    z-index: 1;
}

.manager-client-invoice-card.is-purchase {
    --invoice-accent-rgb: 22, 163, 74;
    --invoice-fill-rgb: 220, 252, 231;
}

.manager-client-invoice-card.is-sale {
    --invoice-accent-rgb: 37, 99, 235;
    --invoice-fill-rgb: 219, 234, 254;
}

.manager-client-invoice-card:hover {
    transform: translateY(-1px);
    border-color: rgba(var(--invoice-accent-rgb), calc(0.18 + (var(--invoice-weight) * 0.22)));
    box-shadow: 0 14px 30px rgba(var(--invoice-accent-rgb), calc(0.07 + (var(--invoice-weight) * 0.06)));
}

.manager-client-invoice-card strong,
.manager-client-invoice-card span:not(.invoice-type-badge) {
    display: block;
}

.manager-client-invoice-card .invoice-type-badge {
    display: inline-flex;
    width: fit-content;
    max-width: 100%;
    margin-top: 0.34rem;
}

.manager-client-invoice-card strong {
    color: #17233a;
    font-family: var(--font-outfit);
    font-size: 0.88rem;
}

.manager-client-invoice-card span {
    color: #475569;
    font-size: 0.78rem;
    font-weight: 650;
}

.manager-client-invoice-card small {
    display: block;
    margin-bottom: 0.12rem;
    color: #94a3b8;
    font-size: 0.66rem;
    font-weight: 850;
    text-transform: uppercase;
}

.manager-client-invoice-card em {
    justify-self: end;
    padding: 0.25rem 0.55rem;
    border-radius: 999px;
    font-style: normal;
    font-size: 0.72rem;
    font-weight: 850;
}

.manager-client-invoice-card em.is-processed {
    background: rgba(16, 185, 129, 0.1);
    color: #047857;
}

.manager-client-invoice-card em.is-pending {
    background: rgba(245, 158, 11, 0.12);
    color: #b45309;
}

.manager-invoice-status-toggle {
    justify-self: end;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    width: 8.85rem;
    min-height: 30px;
    padding: 0.3rem 0.6rem;
    border-radius: 999px;
    cursor: pointer;
    font-family: var(--font-outfit);
    font-size: 0.72rem;
    font-weight: 850;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.manager-invoice-status-toggle:hover {
    transform: translateY(-1px);
}

.manager-invoice-status-toggle:disabled {
    cursor: wait;
    opacity: 0.72;
    transform: none;
}

.manager-invoice-status-toggle.is-processed {
    border: 1px solid rgba(22, 101, 52, 0.14);
    background: rgba(34, 197, 94, 0.11);
    color: #166534;
}

.manager-invoice-status-toggle.is-processed:hover {
    box-shadow: 0 10px 20px rgba(22, 101, 52, 0.08);
}

.manager-invoice-status-toggle.is-unprocessed {
    border: 1px solid rgba(146, 64, 14, 0.16);
    background: rgba(245, 158, 11, 0.14);
    color: #92400e;
}

.manager-invoice-status-toggle.is-unprocessed:hover {
    box-shadow: 0 10px 20px rgba(146, 64, 14, 0.1);
}

.manager-client-invoices-empty,
.manager-client-invoices-loading,
.manager-client-invoices-tree--error {
    padding: 0.85rem 1rem;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.82);
    color: #64748b;
    font-size: 0.84rem;
    font-weight: 750;
}

.manager-client-invoices-tree--error {
    color: #b91c1c;
}

@keyframes managerRowIn {
    from {
        opacity: 0;
        transform: translateY(4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes managerPageIn {
    from {
        opacity: 0.72;
        transform: translateY(7px);
        filter: saturate(0.96);
    }
    to {
        opacity: 1;
        transform: translateY(0);
        filter: saturate(1);
    }
}

.manager-client-popup {
    position: fixed;
    inset: 0;
    z-index: 2400;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.manager-client-popup__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(2, 6, 23, 0.58);
    backdrop-filter: blur(10px);
}

.manager-client-popup__panel {
    position: relative;
    width: min(94vw, 720px);
    max-height: min(92vh, 720px);
    overflow: auto;
    padding: 1.45rem;
    border: 1px solid rgba(148, 163, 184, 0.18);
    border-radius: 22px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.98)),
        radial-gradient(circle at 16% 0%, rgba(56, 189, 248, 0.18), transparent 34%);
    box-shadow: 0 34px 100px rgba(15, 23, 42, 0.34);
}

.manager-client-popup__close {
    position: absolute;
    top: 1rem;
    right: 1rem;
}

.manager-client-popup__hero {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding-right: 3rem;
    margin-bottom: 1.2rem;
}

.manager-client-popup__avatar {
    display: inline-flex;
    width: 62px;
    height: 62px;
    flex: 0 0 62px;
    align-items: center;
    justify-content: center;
    border-radius: 18px;
    background: linear-gradient(135deg, #182e6e, #2563eb 58%, #38bdf8);
    color: #ffffff;
    font-family: var(--font-outfit);
    font-size: 1.05rem;
    font-weight: 900;
    box-shadow: 0 20px 36px rgba(37, 99, 235, 0.25);
}

.manager-client-popup__avatar--image {
    overflow: hidden;
    padding: 0;
    background: #f8fbff;
}

.manager-client-popup__avatar--image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.manager-client-popup__eyebrow {
    display: block;
    color: #1d4ed8;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.manager-client-popup__hero h3 {
    margin: 0.2rem 0 0;
    color: #0f172a;
    font-family: var(--font-outfit);
    font-size: 1.45rem;
    line-height: 1.1;
}

.manager-client-popup__hero p {
    margin: 0.25rem 0 0;
    color: #64748b;
    font-size: 0.86rem;
    font-weight: 600;
}

.manager-client-form__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.85rem;
}

.manager-client-field {
    display: grid;
    gap: 0.35rem;
}

.manager-client-field--wide {
    grid-column: 1 / -1;
}

.manager-client-field span {
    color: #475569;
    font-family: var(--font-outfit);
    font-size: 0.76rem;
    font-weight: 800;
}

.manager-client-field input {
    min-height: 44px;
    padding: 0.68rem 0.8rem;
    border: 1px solid rgba(148, 163, 184, 0.22);
    border-radius: 12px;
    outline: none;
    background: rgba(241, 245, 249, 0.72);
    color: #0f172a;
    font-family: var(--font-outfit);
    font-size: 0.9rem;
    font-weight: 700;
}

.manager-client-popup.is-editing .manager-client-field input:not([readonly]) {
    border-color: rgba(37, 99, 235, 0.38);
    background: #ffffff;
    box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.07);
}

.manager-client-field input[readonly] {
    color: #64748b;
}

.manager-client-popup__actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.65rem;
    margin-top: 1.2rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(148, 163, 184, 0.16);
}

.profile-popup__panel {
    width: min(94vw, 780px);
}

.profile-popup__avatar {
    background-size: cover;
    background-position: center;
}

.profile-form__layout {
    display: grid;
    grid-template-columns: minmax(210px, 0.72fr) minmax(0, 1fr);
    gap: 1rem;
    align-items: start;
}

.profile-form__grid {
    align-content: start;
}

.profile-photo-dropzone {
    display: grid;
    gap: 0.75rem;
    min-height: 258px;
    padding: 1rem;
    border: 1.5px dashed rgba(37, 99, 235, 0.28);
    border-radius: 18px;
    background:
        radial-gradient(circle at 24% 0%, rgba(96, 165, 250, 0.14), transparent 34%),
        rgba(248, 251, 255, 0.86);
    cursor: pointer;
    text-align: center;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease, background 0.2s ease;
}

.profile-photo-dropzone.is-dragover,
.profile-photo-dropzone:hover {
    border-color: rgba(37, 99, 235, 0.52);
    background:
        radial-gradient(circle at 24% 0%, rgba(96, 165, 250, 0.2), transparent 38%),
        rgba(255, 255, 255, 0.96);
    box-shadow: 0 16px 34px rgba(37, 99, 235, 0.1);
    transform: translateY(-1px);
}

.profile-photo-dropzone__preview {
    display: inline-flex;
    width: 112px;
    height: 112px;
    align-items: center;
    justify-content: center;
    justify-self: center;
    overflow: hidden;
    border: 1px solid rgba(37, 99, 235, 0.18);
    border-radius: 24px;
    background: linear-gradient(135deg, #eff6ff, #dbeafe);
    color: #31598f;
    font-family: var(--font-outfit);
    font-size: 1.6rem;
    font-weight: 800;
    box-shadow: 0 16px 32px rgba(37, 99, 235, 0.12);
}

.profile-photo-dropzone__preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.profile-photo-dropzone strong {
    display: block;
    color: #17233a;
    font-family: var(--font-outfit);
    font-size: 0.94rem;
}

.profile-photo-dropzone span {
    display: block;
    max-width: 240px;
    margin: 0.25rem auto 0;
    color: #64748b;
    font-size: 0.78rem;
    font-weight: 650;
    line-height: 1.45;
}

.profile-photo-dropzone__btn {
    justify-self: center;
    padding: 0.5rem 0.9rem !important;
    font-size: 0.78rem !important;
}

.manager-invoice-confirm-popup {
    position: fixed;
    inset: 0;
    z-index: 2500;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    opacity: 0;
    transition: opacity 0.22s ease;
}

.manager-invoice-confirm-popup.active {
    opacity: 1;
}

.manager-invoice-confirm-popup__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(2, 6, 23, 0.54);
    backdrop-filter: blur(10px);
}

.manager-invoice-confirm-popup__panel {
    position: relative;
    width: min(92vw, 430px);
    padding: 1.45rem;
    border: 1px solid rgba(148, 163, 184, 0.18);
    border-radius: 20px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(248, 250, 252, 0.98)),
        radial-gradient(circle at 16% 0%, rgba(96, 165, 250, 0.13), transparent 36%);
    color: #0f172a;
    box-shadow: 0 34px 100px rgba(15, 23, 42, 0.32);
    transform: translateY(10px) scale(0.985);
    transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1);
}

.manager-invoice-confirm-popup.active .manager-invoice-confirm-popup__panel {
    transform: translateY(0) scale(1);
}

.manager-invoice-confirm-popup__close {
    position: absolute;
    top: 0.9rem;
    right: 0.9rem;
}

.manager-invoice-confirm-popup__icon {
    display: inline-flex;
    width: 46px;
    height: 46px;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.9rem;
    border-radius: 14px;
    font-size: 1rem;
    box-shadow: 0 16px 34px rgba(15, 23, 42, 0.11);
}

.manager-invoice-confirm-popup.is-processed-target .manager-invoice-confirm-popup__icon {
    border: 1px solid rgba(22, 101, 52, 0.13);
    background: rgba(34, 197, 94, 0.12);
    color: #166534;
}

.manager-invoice-confirm-popup.is-unprocessed-target .manager-invoice-confirm-popup__icon {
    border: 1px solid rgba(146, 64, 14, 0.15);
    background: rgba(245, 158, 11, 0.15);
    color: #92400e;
}

.manager-invoice-confirm-popup__eyebrow {
    display: block;
    color: #31598f;
    font-family: var(--font-outfit);
    font-size: 0.68rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.manager-invoice-confirm-popup__panel h3 {
    margin: 0.28rem 2.2rem 0 0;
    color: #0f172a;
    font-family: var(--font-outfit);
    font-size: 1.24rem;
    line-height: 1.15;
}

.manager-invoice-confirm-popup__panel p {
    margin: 0.7rem 0 0;
    color: #64748b;
    font-size: 0.88rem;
    font-weight: 600;
    line-height: 1.55;
}

.manager-invoice-confirm-popup__actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.6rem;
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(148, 163, 184, 0.16);
}

.manager-invoice-confirm-popup__confirm {
    border: 1px solid rgba(49, 89, 143, 0.18);
    background: linear-gradient(135deg, #31598f, #1d4ed8);
    color: #ffffff;
    box-shadow: 0 12px 24px rgba(49, 89, 143, 0.18);
}

.manager-invoice-confirm-popup.is-unprocessed-target .manager-invoice-confirm-popup__confirm {
    border-color: rgba(146, 64, 14, 0.18);
    background: linear-gradient(135deg, #b45309, #92400e);
    box-shadow: 0 12px 24px rgba(146, 64, 14, 0.16);
}

.manager-invoice-confirm-popup__confirm:hover {
    transform: translateY(-1px);
}

.ocr-unavailable-popup__panel {
    width: min(92vw, 460px);
}

.ocr-unavailable-popup__icon {
    border: 1px solid rgba(180, 83, 9, 0.16);
    background: rgba(245, 158, 11, 0.14);
    color: #92400e;
}

.ocr-unavailable-popup__eyebrow {
    display: block;
    color: #92400e;
    font-family: var(--font-outfit);
    font-size: 0.68rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.manager-clients-empty {
    padding: 2rem 1rem !important;
    color: #64748b;
    text-align: center;
    font-weight: 700;
}

.manager-clients-empty i {
    margin-right: 0.4rem;
    color: #2563eb;
}

.manager-clients-empty--error,
.manager-clients-empty--error i {
    color: #b91c1c;
}

.manager-clients-pagination {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.32rem;
    margin-top: 1.05rem;
}

.manager-page-btn {
    min-width: 32px;
    height: 32px;
    border-radius: 8px;
}

.manager-page-btn:hover {
    border-color: rgba(37, 99, 235, 0.28);
}

.manager-page-btn.active {
    background: linear-gradient(135deg, #1d4ed8, #3b82f6);
    box-shadow: 0 12px 22px rgba(37, 99, 235, 0.2);
}

.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.2rem 0.6rem; /* Badge más compacto */
    border-radius: 9999px;
    font-size: 0.72rem; /* Reducido para encajar con el texto del td */
    font-weight: 500;
    white-space: nowrap;
}

.status-badge.processed {
    background: rgba(37, 99, 235, 0.08) !important;
    color: #1e3a8a !important; /* Azul oscuro legible */
    border: 1px solid rgba(37, 99, 235, 0.18) !important;
    font-weight: 600 !important;
}

[data-theme="dark"] .status-badge.processed {
    background: rgba(96, 165, 250, 0.12) !important;
    color: #60a5fa !important; /* Azul brillante en modo oscuro */
    border: 1px solid rgba(96, 165, 250, 0.22) !important;
}

.status-badge.pending {
    background: rgba(217, 119, 6, 0.08) !important;
    color: #b45309 !important; /* Ámbar oscuro legible */
    border: 1px solid rgba(217, 119, 6, 0.18) !important;
    font-weight: 600 !important;
}

[data-theme="dark"] .status-badge.pending {
    background: rgba(251, 191, 36, 0.12) !important;
    color: #fbbf24 !important; /* Ámbar brillante en modo oscuro */
    border: 1px solid rgba(251, 191, 36, 0.22) !important;
}

.status-badge.unprocessed {
    background: rgba(99, 102, 241, 0.12) !important;
    color: #818cf8 !important;
    border: 1px solid rgba(99, 102, 241, 0.22) !important;
    font-weight: 600 !important;
}

.invoice-table-actions {
    display: flex;
    align-items: center;
    gap: 0.65rem;
}

.btn-delete-all-invoices {
    justify-content: center;
    padding: 0.5rem 0.9rem;
    font-size: 0.82rem;
    border: 1px solid rgba(220, 38, 38, 0.38);
    background: linear-gradient(135deg, #991b1b 0%, #dc2626 58%, #f97316 100%);
    color: #ffffff;
    box-shadow: 0 10px 24px rgba(220, 38, 38, 0.18);
}

.btn-delete-all-invoices:hover:not(:disabled) {
    filter: none;
    background: linear-gradient(135deg, #7f1d1d 0%, #b91c1c 55%, #ea580c 100%);
    color: #ffffff;
    transform: translateY(-1px);
    box-shadow: 0 14px 28px rgba(185, 28, 28, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

.btn-delete-all-invoices:disabled {
    cursor: wait;
    opacity: 0.58;
}

.btn-cargar-factura {
    justify-content: center;
    border: 1px solid rgba(59, 130, 246, 0.38);
    background: linear-gradient(135deg, #1e3a8a 0%, #3b82f6 58%, #06b6d4 100%);
    color: #ffffff;
    box-shadow: 0 10px 24px rgba(59, 130, 246, 0.18);
}

.btn-cargar-factura:hover:not(:disabled) {
    filter: none;
    background: linear-gradient(135deg, #172554 0%, #2563eb 55%, #0891b2 100%);
    color: #ffffff;
    transform: translateY(-1px);
    box-shadow: 0 14px 28px rgba(37, 99, 235, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

.pending-invoice-empty {
    padding: 2rem 1rem !important;
    color: var(--text-muted);
    text-align: center;
}

@media (max-width: 768px) {
    .manager-clients-panel {
        padding: 1rem;
    }

    .manager-clients-panel__header {
        flex-direction: column;
    }

    .manager-clients-panel__summary {
        width: 100%;
    }

    .manager-clients-panel__meta span {
        width: 100%;
        justify-content: center;
    }

    .manager-clients-search {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .manager-clients-year {
        grid-column: span 1;
        min-width: 0;
    }

    .manager-clients-quarter {
        grid-column: span 1;
    }

    .manager-clients-status {
        grid-column: 1 / -1;
    }

    .manager-clients-search__hint {
        grid-column: 1 / -1;
        justify-content: center;
    }

    .manager-clients-pagination {
        justify-content: flex-start;
    }

    .manager-client-popup__panel {
        padding: 1.1rem;
    }

    .manager-client-popup__hero {
        align-items: flex-start;
        padding-right: 2.5rem;
    }

    .manager-client-form__grid {
        grid-template-columns: 1fr;
    }

    .profile-form__layout {
        grid-template-columns: 1fr;
    }

    .manager-client-popup__actions {
        flex-direction: column;
    }

    .manager-invoice-confirm-popup__actions {
        flex-direction: column;
    }

    .manager-invoice-confirm-popup__actions .btn-premium {
        width: 100%;
        justify-content: center;
    }

    .manager-client-invoices-tree {
        margin-left: 1rem;
        padding-left: 1rem;
    }

    .manager-client-invoice-card {
        grid-template-columns: 1fr;
        align-items: start;
    }

    .manager-client-invoice-card em,
    .manager-invoice-status-toggle {
        justify-self: start;
    }

    .invoice-table-actions {
        width: 100%;
        flex-wrap: wrap;
    }

    .invoice-table-actions .btn-premium {
        flex: 1 1 auto;
    }

}

/* --- NOTIFICACIONES TOAST PREMIUM --- */
.toast-container {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    z-index: 9999;
}

.toast {
    background: rgba(15, 23, 42, 0.9);
    border: 1px solid var(--border-color);
    padding: 1rem 1.5rem;
    border-radius: 12px;
    backdrop-filter: var(--blur-glass);
    box-shadow: var(--shadow-premium);
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: var(--text-primary);
    animation: slideInLeft 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    min-width: 300px;
}

.toast.success {
    border-left: 4px solid var(--color-emerald);
}

.toast.success i {
    color: var(--color-emerald);
}

.toast.error {
    border-left: 4px solid var(--color-error);
}

.toast.error i {
    color: var(--color-error);
}

/* --- KEYFRAME ANIMATIONS --- */
@keyframes scaleEntrance {
    from {
        opacity: 0;
        transform: scale(0.95) translateY(10px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translateX(50px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* --- RESPONSIVIDAD --- */
@media (max-width: 768px) {
    #dashboard-section.active {
        grid-template-columns: 1fr;
    }

    .header-dashboard {
        flex-direction: column;
        gap: 1rem;
        align-items: center;
    }

    .header-dashboard > div:first-child {
        position: static;
        transform: none;
        max-width: 100%;
    }

    .dashboard-header-actions {
        margin-left: 0;
        justify-content: center;
    }

    .dashboard-menu-toggle {
        top: 4rem;
        left: 0;
        min-height: 48px;
        padding: 0.5rem 0.8rem 0.5rem 0.55rem;
    }

    #dashboard-section.active .main-content::before {
        top: -1rem;
        left: 4.9rem;
        width: min(235px, 72vw);
        opacity: 1;
    }

    .sidebar {
        display: flex;
        width: min(312px, calc(100vw - 0.5rem));
        height: 100vh;
        top: 0;
        left: 0;
        border-radius: 0 24px 24px 0;
        padding: 2.2rem 1.05rem 1.05rem 1.05rem;
    }

    .welcome-actions {
        flex-direction: column;
    }
    
    .welcome-container {
        padding: 2.5rem 1.5rem;
    }

    .main-content {
        padding: 1.25rem !important;
    }

    .chart-card {
        padding: 1.5rem 1rem !important;
    }
}

/* --- CABECERA GLOBAL (NAVEGACIÓN DE LA LANDING) --- */
.global-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 4rem;
    background: rgba(9, 13, 22, 0.7);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    z-index: 1000;
    transition: var(--transition-smooth);
}

.header-logo {
    font-family: var(--font-outfit);
    font-size: 1.35rem;
    font-weight: 800;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    pointer-events: auto; /* Clickable logo */
    cursor: pointer;
}

.header-logo i {
    color: var(--color-emerald);
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    position: relative;
    z-index: 2005; /* Un z-index más alto para que el menú siempre esté por encima del logo absoluto gigante */
}

.btn-nav {
    background: none;
    border: none;
    color: var(--text-secondary);
    font-family: var(--font-outfit);
    font-weight: 600;
    font-size: 0.95rem;
    cursor: pointer;
    transition: var(--transition-smooth);
    padding: 0.5rem 1rem;
}

.btn-nav:hover {
    color: #60a5fa;
    transform: translateY(-1px);
}

@media (max-width: 768px) {
    .global-header {
        padding: 0 1.5rem;
    }
    .btn-nav {
        font-size: 0.85rem;
        padding: 0.5rem;
    }
}

/* --- BOTÓN DE ALTERNANCIA DE TEMA (SOL Y LUNA) --- */
.btn-theme-toggle {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    width: 42px;
    height: 42px;
    border-radius: 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition-smooth);
    font-size: 1.15rem;
    outline: none;
}

.btn-theme-toggle:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.2);
    transform: scale(1.05) translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.btn-theme-toggle i {
    transition: var(--transition-smooth);
}

/* Ajustes específicos de alternancia en Tema Claro */
[data-theme="light"] .btn-theme-toggle {
    background: rgba(15, 23, 42, 0.03);
}

[data-theme="light"] .btn-theme-toggle:hover {
    background: rgba(15, 23, 42, 0.06);
    border-color: rgba(15, 23, 42, 0.15);
}

/* Animación sutil de rotación al cambiar tema */
.theme-rotate {
    transform: rotate(360deg);
}

/* Botón de alternancia flotante dentro de la tarjeta de autenticación */
.card-theme-toggle {
    position: absolute;
    top: 1.25rem;
    right: 1.25rem;
    background: none !important;
    border: none !important;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    z-index: 10;
}

.card-theme-toggle:hover {
    background: rgba(255, 255, 255, 0.08) !important;
}

[data-theme="light"] .card-theme-toggle:hover {
    background: rgba(0, 0, 0, 0.04) !important;
}

/* --- OVERRIDES ADICIONALES PARA TEMA CLARO PREMIUM --- */
[data-theme="light"] .global-header {
    background: rgba(248, 250, 252, 0.8);
    border-bottom: 1px solid rgba(15, 23, 42, 0.05);
}

[data-theme="light"] .btn-secondary:hover {
    background: rgba(15, 23, 42, 0.04);
    border-color: rgba(15, 23, 42, 0.15);
}

[data-theme="light"] .modal-close-btn:hover {
    background: rgba(15, 23, 42, 0.04);
}

[data-theme="light"] .menu-item:hover {
    background: rgba(15, 23, 42, 0.04);
}

/* Clase adaptativa para números de factura */
.invoice-num {
    font-weight: 500;
    color: var(--text-primary);
}

/* --- SEGURIDAD JWT - CLASES DE BADGES DEL DASHBOARD (DELICADOS Y MINIMALISTAS) --- */
#security-role-badge {
    font-size: 0.45rem; /* Letra extremadamente pequeña, fina y sutil */
    font-weight: 500;
    letter-spacing: 0.03em;
    transition: var(--transition-smooth);
    white-space: nowrap; /* Evita que el mensaje largo se rompa o se divida */
}

.badge-secure-gestor {
    color: #a78bfa;
}

[data-theme="light"] .badge-secure-gestor {
    color: #4f46e5;
}

.badge-secure-client {
    color: var(--text-muted);
}

[data-theme="light"] .badge-secure-client {
    color: var(--text-muted);
}

.badge-secure-error {
    color: #fca5a5;
}

[data-theme="light"] .badge-secure-error {
    color: #b91c1c;
}

.badge-secure-warning {
    color: #fcd34d;
}

[data-theme="light"] .badge-secure-warning {
    color: #b45309;
}

/* --- POPUP FLOTANTE BLANCO GENÉRICO --- */
.floating-popup {
    position: fixed;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 4000;
    opacity: 0;
    transition: opacity 0.25s ease;
}

.floating-popup.active {
    display: flex;
    opacity: 1;
}

.floating-popup__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(2, 6, 23, 0.55);
    backdrop-filter: blur(8px);
}

.floating-popup__panel {
    position: absolute;
    top: 50%;
    left: 50%;
    width: min(90vw, 520px);
    min-height: 286px;
    max-height: min(92vh, 860px);
    background: #ffffff;
    color: #0f172a;
    border-radius: 24px;
    box-shadow: 0 24px 80px rgba(15, 23, 42, 0.28);
    border: 1px solid rgba(15, 23, 42, 0.08);
    padding: 2.25rem;
    z-index: 1;
    transform: translate(-50%, -50%) scale(0.98);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform 0.25s ease;
}

.floating-popup.active .floating-popup__panel {
    transform: translate(-50%, -50%) scale(1);
}

#floating-popup.is-processing .floating-popup__panel {
    width: min(92vw, 430px);
    min-height: 0;
    padding: 0;
    overflow: visible;
    background: transparent;
    border: 0;
    box-shadow: none;
}

#floating-popup.is-processing .floating-popup__content,
#floating-popup.is-processing .floating-popup__footer,
#floating-popup.is-processing .floating-popup__close {
    display: none;
}

#floating-popup.is-processing .invoice-progress {
    position: relative;
    inset: auto;
    padding: 0;
    overflow: visible;
    border-radius: 0;
    background: transparent;
    backdrop-filter: none;
    animation: none;
}

.floating-popup__close {
    position: absolute;
    top: 1rem;
    right: 1rem;
}

.floating-popup__content {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    padding-top: 1.1rem;
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
}

.floating-popup__footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    width: 100%;
    flex-wrap: nowrap;
    margin-top: auto;
    padding-top: 1.5rem;
    flex-shrink: 0;
    position: sticky;
    bottom: 0;
    background: #ffffff;
    z-index: 2;
    min-height: 64px;
}

.floating-popup__close-btn {
    min-width: 120px;
    flex: 0 0 auto;
    margin-left: auto;
}

.floating-popup__process-btn {
    min-width: 150px;
    padding-inline: 1.2rem;
    justify-content: center;
    text-align: center;
    background: linear-gradient(135deg, #3d76d8 0%, #2057c2 100%);
    box-shadow: 0 6px 18px rgba(32, 87, 194, 0.24);
    flex: 0 0 auto;
}

.floating-popup__process-btn:hover {
    background: linear-gradient(135deg, #3369cb 0%, #1a4db0 100%);
    box-shadow: 0 8px 22px rgba(26, 77, 176, 0.3);
}

.floating-popup__process-btn:disabled {
    background: linear-gradient(135deg, #93b4f0 0%, #6f94e3 100%);
    box-shadow: none;
    opacity: 0.65;
    cursor: not-allowed;
    transform: none;
}

.floating-popup .btn-premium {
    justify-content: center;
    text-align: center;
}

.invoice-progress {
    position: absolute;
    inset: 0;
    z-index: 10;
    display: grid;
    place-items: center;
    padding: 1.5rem;
    overflow: hidden;
    border-radius: inherit;
    background: rgba(248, 250, 252, 0.93);
    backdrop-filter: blur(14px);
    animation: invoiceProgressReveal 0.32s cubic-bezier(0.16, 1, 0.3, 1);
}

.invoice-progress[hidden] {
    display: none;
}

.invoice-progress__card {
    position: relative;
    width: min(100%, 390px);
    overflow: hidden;
    padding: 1.55rem;
    border: 1px solid rgba(148, 163, 184, 0.22);
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 20px 54px rgba(15, 23, 42, 0.16);
}

.invoice-progress__halo {
    position: absolute;
    top: -78px;
    right: -56px;
    width: 180px;
    height: 180px;
    border-radius: 999px;
    background: radial-gradient(circle, rgba(59, 130, 246, 0.2), transparent 68%);
    animation: invoiceProgressHalo 2.8s ease-in-out infinite;
}

.invoice-progress__ring {
    --progress-angle: 0deg;
    position: relative;
    width: 118px;
    height: 118px;
    margin: 0 auto 1.2rem;
    display: grid;
    place-items: center;
    border-radius: 999px;
    background: conic-gradient(#2563eb var(--progress-angle), rgba(219, 234, 254, 0.92) 0deg);
    box-shadow: 0 14px 34px rgba(37, 99, 235, 0.18);
    transition: background 0.35s ease;
}

.invoice-progress__ring::before {
    content: "";
    position: absolute;
    inset: -7px;
    border: 1px solid rgba(37, 99, 235, 0.14);
    border-radius: inherit;
    animation: invoiceProgressOrbit 2.4s linear infinite;
}

.invoice-progress__ring-core {
    width: 88px;
    height: 88px;
    display: grid;
    place-content: center;
    text-align: center;
    border-radius: inherit;
    background: #ffffff;
    box-shadow: inset 0 0 0 1px rgba(148, 163, 184, 0.14);
}

.invoice-progress__ring-core strong {
    display: block;
    color: #0f172a;
    font-family: var(--font-outfit);
    font-size: 1.55rem;
    line-height: 1;
}

.invoice-progress__ring-core span {
    margin-top: 0.24rem;
    color: #64748b;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.invoice-progress__copy {
    position: relative;
    text-align: center;
}

.invoice-progress__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.38rem;
    color: #2563eb;
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.invoice-progress__copy h4 {
    margin: 0.62rem 0 0;
    color: #0f172a;
    font-family: var(--font-outfit);
    font-size: 1.12rem;
}

.invoice-progress__copy p {
    min-height: 2.6em;
    margin: 0.42rem 0 0;
    overflow: hidden;
    color: #64748b;
    font-size: 0.8rem;
    line-height: 1.4;
    text-overflow: ellipsis;
}

.invoice-progress__track {
    height: 7px;
    margin-top: 1.12rem;
    overflow: hidden;
    border-radius: 999px;
    background: #e2e8f0;
}

.invoice-progress__bar {
    position: relative;
    width: 0;
    height: 100%;
    overflow: hidden;
    border-radius: inherit;
    background: linear-gradient(90deg, #1d4ed8, #3b82f6 72%, #93c5fd);
    transition: width 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.invoice-progress__bar::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.68), transparent);
    transform: translateX(-100%);
    animation: invoiceProgressShimmer 1.45s ease-in-out infinite;
}

.invoice-progress__footer {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
    margin-top: 0.78rem;
    color: #64748b;
    font-size: 0.66rem;
    font-weight: 700;
}

.invoice-progress[data-state="complete"] .invoice-progress__ring {
    background: conic-gradient(#059669 360deg, #d1fae5 0deg);
    box-shadow: 0 14px 34px rgba(5, 150, 105, 0.18);
}

.invoice-progress[data-state="complete"] .invoice-progress__eyebrow {
    color: #059669;
}

.invoice-progress[data-state="error"] .invoice-progress__ring {
    background: conic-gradient(#dc2626 360deg, #fee2e2 0deg);
    box-shadow: 0 14px 34px rgba(220, 38, 38, 0.16);
}

.invoice-progress[data-state="error"] .invoice-progress__eyebrow {
    color: #dc2626;
}

.floating-popup__title {
    font-family: var(--font-outfit);
    font-size: 1.5rem;
    font-weight: 700;
    color: #0f172a;
}

.floating-popup__text {
    font-size: 0.98rem;
    line-height: 1.6;
    color: #475569;
}

.upload-files-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-top: 0.35rem;
    padding: 0.55rem 0.15rem 0;
    color: #64748b;
    font-size: 0.76rem;
    font-weight: 700;
}

.upload-files-toolbar[hidden] {
    display: none !important;
}

.upload-files-toolbar__action {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.4rem 0.7rem;
    border: 1px solid rgba(100, 116, 139, 0.22);
    border-radius: 999px;
    background: #ffffff;
    color: #475569;
    font: inherit;
    cursor: pointer;
    transition: color 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}

.upload-files-toolbar__action:hover,
.upload-files-toolbar__action:focus-visible {
    outline: none;
    color: #1d4ed8;
    border-color: rgba(37, 99, 235, 0.35);
    background: rgba(37, 99, 235, 0.06);
}

.upload-files {
    margin-top: 0.45rem;
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    min-height: 0;
}

.upload-files__empty {
    padding: 0.9rem 1rem;
    border-radius: 12px;
    background: rgba(248, 250, 252, 1);
    border: 1px solid rgba(148, 163, 184, 0.22);
    color: #64748b;
    font-size: 0.92rem;
}

.upload-file-item {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.75rem;
    padding: 0.7rem 0.85rem;
    border-radius: 12px;
    background: #f8fafc;
    border: 1px solid rgba(148, 163, 184, 0.18);
    animation: popupCardIn 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    transition: opacity 0.18s ease, filter 0.18s ease, background 0.18s ease, border-color 0.18s ease;
}

.upload-file-item.is-selected {
    border-color: rgba(37, 99, 235, 0.24);
}

.upload-file-item.is-excluded {
    opacity: 0.52;
    filter: grayscale(1);
    background: #eef1f5;
}

.upload-files.is-transitioning .upload-file-item {
    animation: popupCardIn 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.upload-file-item__thumb {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    object-fit: cover;
    flex: 0 0 auto;
    border: 1px solid rgba(148, 163, 184, 0.2);
    background: #ffffff;
}

.upload-file-item__thumb--file {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #2563eb;
    font-size: 1.1rem;
    background: rgba(37, 99, 235, 0.08);
}

.upload-file-item__meta {
    min-width: 0;
    flex: 1 1 auto;
}

.upload-file-item__name {
    font-size: 0.88rem;
    font-weight: 600;
    color: #0f172a;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.upload-file-item__info {
    font-size: 0.75rem;
    color: #64748b;
}

.upload-file-item__actions {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex: 0 0 auto;
}

.upload-file-item__selection {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    border: 1px solid rgba(37, 99, 235, 0.2);
    background: rgba(37, 99, 235, 0.08);
    color: #1d4ed8;
    border-radius: 9999px;
    padding: 0.28rem 0.6rem;
    font-size: 0.72rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.upload-file-item__selection:hover,
.upload-file-item__selection:focus-visible {
    outline: none;
    background: rgba(37, 99, 235, 0.14);
    border-color: rgba(37, 99, 235, 0.34);
}

.upload-file-item.is-excluded .upload-file-item__selection {
    background: rgba(100, 116, 139, 0.12);
    border-color: rgba(100, 116, 139, 0.22);
    color: #475569;
}

.upload-pager {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    margin-top: 0.25rem;
    flex-wrap: wrap;
}

.upload-pager__dot {
    width: 38px;
    height: 38px;
    border: 1px solid rgba(148, 163, 184, 0.22);
    background: #ffffff;
    color: #334155;
    border-radius: 9999px;
    font-size: 0.84rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.22s ease;
}

.upload-pager__dot:hover {
    transform: translateY(-1px);
    border-color: rgba(37, 99, 235, 0.28);
    color: #2563eb;
}

.upload-pager__dot.active {
    background: linear-gradient(135deg, #60a5fa 0%, #3b82f6 100%);
    color: #ffffff;
    border-color: transparent;
    box-shadow: 0 8px 18px rgba(59, 130, 246, 0.22);
    transform: translateY(-1px) scale(1.04);
}

.invoice-detection-summary {
    position: relative;
    margin-top: 0.95rem;
    overflow: hidden;
    border: 1px solid rgba(16, 185, 129, 0.24);
    border-radius: 16px;
    padding: 1rem;
    background:
        radial-gradient(circle at top right, rgba(52, 211, 153, 0.16), transparent 42%),
        linear-gradient(145deg, rgba(236, 253, 245, 0.94), rgba(255, 255, 255, 0.98));
    box-shadow: 0 14px 32px rgba(5, 150, 105, 0.1);
    animation: invoiceDetectionReveal 0.42s cubic-bezier(0.16, 1, 0.3, 1);
}

[data-theme="dark"] .invoice-detection-summary {
    border-color: rgba(74, 222, 128, 0.34);
    background:
        radial-gradient(circle at top right, rgba(74, 222, 128, 0.18), transparent 42%),
        linear-gradient(145deg, rgba(6, 78, 59, 0.34), rgba(15, 23, 42, 0.94));
    box-shadow: 0 14px 32px rgba(34, 197, 94, 0.12);
}

.invoice-detection-summary[hidden] {
    display: none;
}

.invoice-detection-summary__header {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 0.75rem;
    align-items: start;
}

.invoice-detection-summary__icon {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    color: #047857;
    background: rgba(16, 185, 129, 0.14);
    border: 1px solid rgba(16, 185, 129, 0.2);
}

[data-theme="dark"] .invoice-detection-summary__icon {
    color: #bbf7d0;
    background: rgba(74, 222, 128, 0.18);
    border-color: rgba(134, 239, 172, 0.34);
}

.invoice-detection-summary__eyebrow {
    display: block;
    margin-bottom: 0.22rem;
    color: #047857;
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

[data-theme="dark"] .invoice-detection-summary__eyebrow {
    color: #86efac;
}

.invoice-detection-summary h4 {
    margin: 0;
    color: #064e3b;
    font-family: var(--font-outfit);
    font-size: 1.08rem;
}

[data-theme="dark"] .invoice-detection-summary h4 {
    color: #dcfce7;
}

.invoice-detection-summary p {
    margin: 0.28rem 0 0;
    color: #3f665b;
    font-size: 0.76rem;
    line-height: 1.45;
}

[data-theme="dark"] .invoice-detection-summary p {
    color: #bbf7d0;
}

.invoice-detection-summary__list {
    display: grid;
    gap: 0.42rem;
    margin: 0.86rem 0 0;
    padding: 0.72rem 0 0;
    border-top: 1px solid rgba(16, 185, 129, 0.16);
    list-style: none;
}

.invoice-detection-summary__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    min-width: 0;
}

.invoice-detection-summary__file {
    display: flex;
    align-items: center;
    gap: 0.42rem;
    min-width: 0;
    color: #0f3f35;
    font-size: 0.74rem;
    font-weight: 700;
}

[data-theme="dark"] .invoice-detection-summary__file {
    color: #dcfce7;
}

.invoice-detection-summary__file span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.invoice-detection-summary__badge,
.pending-invoice-detection {
    display: inline-flex;
    align-items: center;
    gap: 0.28rem;
    width: fit-content;
    border-radius: 999px;
    padding: 0.22rem 0.48rem;
    color: #047857;
    background: rgba(16, 185, 129, 0.12);
    border: 1px solid rgba(16, 185, 129, 0.18);
    font-size: 0.65rem;
    font-weight: 800;
    white-space: nowrap;
}

[data-theme="dark"] .invoice-detection-summary__badge,
[data-theme="dark"] .pending-invoice-detection {
    color: #bbf7d0;
    background: rgba(74, 222, 128, 0.18);
    border-color: rgba(134, 239, 172, 0.34);
}

.invoice-detection-summary__badge.is-multiple,
.pending-invoice-detection.is-multiple {
    color: #047857;
    background: rgba(16, 185, 129, 0.12);
    border-color: rgba(16, 185, 129, 0.18);
}

[data-theme="dark"] .invoice-detection-summary__badge.is-multiple,
[data-theme="dark"] .pending-invoice-detection.is-multiple {
    color: #bbf7d0;
    background: rgba(74, 222, 128, 0.18);
    border-color: rgba(134, 239, 172, 0.34);
}

.invoice-detection-summary__badge.is-pending,
.pending-invoice-detection.is-pending {
    color: #64748b;
    background: rgba(148, 163, 184, 0.12);
    border-color: rgba(148, 163, 184, 0.2);
}

.pending-invoice-detection {
    margin-top: 0.38rem;
}

@keyframes invoiceDetectionReveal {
    from {
        opacity: 0;
        transform: translateY(10px) scale(0.985);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes popupCardIn {
    from {
        opacity: 0;
        transform: translateY(10px) scale(0.985);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes invoiceProgressReveal {
    from {
        opacity: 0;
        transform: scale(0.985);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes invoiceProgressHalo {
    50% {
        transform: scale(1.14);
        opacity: 0.72;
    }
}

@keyframes invoiceProgressOrbit {
    50% {
        transform: scale(1.06);
        opacity: 0.38;
    }
}

@keyframes invoiceProgressShimmer {
    to {
        transform: translateX(100%);
    }
}

/* ==========================================================================
   CONFIRM POPUP PREMIUM (CENTRADITO Y EXQUISITO)
   ========================================================================== */
.floating-confirm-popup {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 5000;
    opacity: 0;
    transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    pointer-events: none;
}

.floating-confirm-popup.active {
    opacity: 1;
    pointer-events: auto;
}

.confirm-popup__panel {
    width: min(90vw, 480px); /* Ensanchado de 420px a 480px para evitar salto de línea en botones */
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    padding: 2.25rem 2rem 2rem 2rem;
    backdrop-filter: var(--blur-glass);
    -webkit-backdrop-filter: var(--blur-glass);
    box-shadow: var(--shadow-premium);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    transform: scale(0.92);
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.floating-confirm-popup.active .confirm-popup__panel {
    transform: scale(1);
}

/* En tema claro usamos un fondo blanco puro muy suave */
[data-theme="light"] .confirm-popup__panel {
    background: #ffffff;
    border: 1px solid rgba(15, 23, 42, 0.08);
    box-shadow: 0 20px 60px rgba(15, 23, 42, 0.15);
}

/* El cuadro de cancelacion debe ser opaco; solo el backdrop atenúa la vista. */
#abort-upload-popup .confirm-popup__panel {
    background: #ffffff;
    opacity: 1;
    backdrop-filter: none;
}

[data-theme="dark"] #abort-upload-popup .confirm-popup__panel {
    background: #111827;
}

.confirm-popup__icon {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: rgba(239, 68, 68, 0.08);
    border: 1px solid rgba(239, 68, 68, 0.2);
    color: #ef4444;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    margin-bottom: 1.25rem;
    animation: pulseWarn 2s infinite;
}

[data-theme="light"] .confirm-popup__icon {
    background: rgba(239, 68, 68, 0.05);
}

.confirm-popup__icon--duplicate {
    color: #d97706;
    border-color: rgba(217, 119, 6, 0.2);
    background: rgba(245, 158, 11, 0.1);
}

.confirm-popup--delete-all .confirm-popup__panel {
    border-color: rgba(220, 38, 38, 0.24);
    box-shadow: 0 24px 70px rgba(127, 29, 29, 0.28);
}

.confirm-popup--delete-all .confirm-popup__icon {
    color: #dc2626;
    border-color: rgba(220, 38, 38, 0.24);
    background:
        radial-gradient(circle at 30% 20%, rgba(249, 115, 22, 0.18), transparent 42%),
        rgba(220, 38, 38, 0.08);
}

.confirm-popup--delete-all .btn-confirm-delete-action {
    background: linear-gradient(135deg, #991b1b 0%, #dc2626 58%, #f97316 100%);
    border-color: rgba(220, 38, 38, 0.34);
    color: #ffffff;
}

.manager-invoice-batch-popup__panel {
    width: min(92vw, 460px);
}

.manager-invoice-batch-popup__icon {
    color: #31598f;
    border-color: rgba(49, 89, 143, 0.16);
    background:
        radial-gradient(circle at 35% 20%, rgba(129, 140, 248, 0.16), transparent 45%),
        rgba(96, 165, 250, 0.1);
}

.confirm-popup__eyebrow {
    display: block;
    margin: -0.35rem 0 0.45rem;
    color: #31598f;
    font-family: var(--font-outfit);
    font-size: 0.68rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.manager-invoice-batch-popup__count {
    display: grid;
    gap: 0.12rem;
    width: 100%;
    margin: -0.65rem 0 1.2rem;
    padding: 0.85rem 1rem;
    border: 1px solid rgba(96, 165, 250, 0.18);
    border-radius: 14px;
    background:
        linear-gradient(180deg, rgba(248, 251, 255, 0.98), rgba(238, 245, 255, 0.92));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.78);
}

.manager-invoice-batch-popup__count strong {
    color: #182e6e;
    font-family: var(--font-outfit);
    font-size: 2rem;
    font-weight: 900;
    line-height: 1;
}

.manager-invoice-batch-popup__count span {
    color: #64748b;
    font-size: 0.8rem;
    font-weight: 700;
}

.manager-invoice-batch-popup__confirm {
    background: linear-gradient(135deg, #31598f, #2563eb 58%, #60a5fa);
    border: 1px solid rgba(96, 165, 250, 0.28);
    color: #ffffff;
    box-shadow: 0 14px 28px rgba(37, 99, 235, 0.18);
}

[data-theme="dark"] .manager-invoice-batch-popup__confirm {
    background: linear-gradient(135deg, #31598f 0%, #2563eb 58%, #60a5fa 100%);
    color: #ffffff;
    box-shadow: 0 14px 28px rgba(37, 99, 235, 0.18);
}

[data-theme="dark"] .manager-invoice-batch-popup__confirm:hover:not(:disabled) {
    background: linear-gradient(135deg, #1e3a5f 0%, #1d4ed8 55%, #3b82f6 100%);
    color: #ffffff;
}

[data-theme="light"] .confirm-popup__icon--duplicate {
    background: rgba(245, 158, 11, 0.07);
}

.duplicate-invoice-popup__panel {
    width: min(94vw, 720px);
    padding: 2rem;
    border-color: rgba(245, 158, 11, 0.28);
    background:
        radial-gradient(circle at 10% 0%, rgba(251, 191, 36, 0.13), transparent 31%),
        radial-gradient(circle at 98% 96%, rgba(34, 197, 94, 0.09), transparent 35%),
        var(--surface-primary, #ffffff);
}

.table-tab--pending.is-informational {
    cursor: default !important;
    pointer-events: none !important;
    user-select: none;
}

/* Debe quedar por encima del panel de progreso de carga para que el aviso
   aparezca incluso cuando el lote continúa procesando facturas nuevas. */
#duplicate-invoice-popup {
    z-index: 10020;
}

.duplicate-invoice-popup__panel .confirm-popup__title {
    margin-bottom: 0.55rem;
}

.duplicate-invoice-popup__grid-wrap {
    width: 100%;
    margin: 0.25rem 0 1.35rem;
    overflow: hidden;
    border: 1px solid rgba(217, 119, 6, 0.18);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.66);
    box-shadow: 0 12px 28px rgba(146, 64, 14, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.86);
}

.duplicate-invoice-popup__grid {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
}

.duplicate-invoice-popup__grid th {
    padding: 0.72rem 0.95rem;
    background: linear-gradient(90deg, rgba(254, 243, 199, 0.82), rgba(255, 251, 235, 0.6));
    color: #92400e;
    font-family: var(--font-outfit);
    font-size: 0.66rem;
    font-weight: 900;
    letter-spacing: 0.075em;
    text-transform: uppercase;
}

.duplicate-invoice-popup__grid td {
    padding: 0.82rem 0.95rem;
    border-top: 1px solid rgba(217, 119, 6, 0.11);
    color: var(--text-primary, #1e293b);
    font-size: 0.84rem;
    font-weight: 650;
}

.duplicate-invoice-popup__grid td:first-child {
    color: #9a3412;
    font-family: var(--font-outfit);
    font-weight: 850;
}

.duplicate-invoice-popup__grid td:last-child {
    color: var(--text-secondary, #64748b);
    white-space: nowrap;
}

.duplicate-invoice-popup__grid tbody tr {
    transition: background-color 0.18s ease;
}

.duplicate-invoice-popup__grid tbody tr:hover {
    background: rgba(254, 243, 199, 0.32);
}

.duplicate-invoice-popup__empty {
    margin: 0;
    padding: 1rem;
    color: var(--text-secondary, #64748b);
    font-size: 0.84rem;
    line-height: 1.5;
}

.duplicate-invoice-popup__pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin: -0.65rem 0 1rem;
    color: #64748b;
    font-size: 0.76rem;
    font-weight: 700;
}

.duplicate-invoice-popup__pagination #duplicate-invoice-page-current {
    min-width: 42px;
    color: #1d4ed8;
    font-family: var(--font-outfit);
    font-size: 0.78rem;
    font-weight: 900;
    text-align: center;
}

.duplicate-invoice-popup__close {
    min-width: 132px;
    background: #ffffff !important;
    border: 1px solid #d1d5db !important;
    color: #111827 !important;
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.08);
}

.duplicate-invoice-popup__close:hover {
    background: #f9fafb !important;
    border-color: #9ca3af !important;
    color: #111827 !important;
}

@media (max-width: 560px) {
    .duplicate-invoice-popup__panel { padding: 1.45rem 1rem; }
    .duplicate-invoice-popup__grid th,
    .duplicate-invoice-popup__grid td { padding: 0.7rem 0.58rem; font-size: 0.72rem; }
    .duplicate-invoice-popup__grid th { font-size: 0.57rem; }
}

[data-theme="dark"] .duplicate-invoice-popup__panel {
    background:
        radial-gradient(circle at 10% 0%, rgba(251, 191, 36, 0.12), transparent 31%),
        radial-gradient(circle at 98% 96%, rgba(34, 197, 94, 0.08), transparent 35%),
        #111827;
}

[data-theme="dark"] .duplicate-invoice-popup__grid-wrap {
    background: rgba(15, 23, 42, 0.72);
}

[data-theme="dark"] .duplicate-invoice-popup__grid th {
    background: rgba(120, 53, 15, 0.3);
    color: #fcd34d;
}

.manager-number-popup__panel {
    width: min(92vw, 460px);
}

.manager-number-popup__icon {
    color: #2563eb;
    border-color: rgba(37, 99, 235, 0.18);
    background: rgba(37, 99, 235, 0.08);
}

.manager-number-popup__form {
    width: 100%;
    text-align: left;
}

.manager-number-popup__form .input-wrapper {
    margin-top: 0.45rem;
    background: #ffffff;
    border-radius: 14px;
}

.manager-number-popup__form .form-input {
    min-height: 48px;
    border-radius: 14px;
}

.manager-number-popup__form .confirm-popup__actions {
    margin-top: 1.25rem;
}

.manual-invoice-popup {
    position: fixed;
    inset: 0;
    z-index: 2600;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    opacity: 0;
    transition: opacity 0.24s ease;
}

.manual-invoice-popup.active {
    opacity: 1;
}

.manual-invoice__panel {
    position: relative;
    z-index: 10;
    width: min(1180px, calc(100vw - 2rem));
    max-height: calc(100vh - 2rem);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid rgba(148, 163, 184, 0.18);
    border-radius: 24px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.97));
    box-shadow: 0 28px 88px rgba(15, 23, 42, 0.24);
    transform: translateY(18px) scale(0.98);
    transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}

.manual-invoice-popup.active .manual-invoice__panel {
    transform: translateY(0) scale(1);
}

.manual-invoice__close {
    top: 1rem;
    right: 1rem;
    z-index: 12;
}

.manual-invoice__header {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) minmax(190px, auto);
    gap: 1rem;
    align-items: center;
    padding: 1.15rem 3.8rem 1.05rem 1.25rem;
    border-bottom: 1px solid rgba(148, 163, 184, 0.16);
    background:
        linear-gradient(135deg, rgba(37, 99, 235, 0.08), transparent 44%),
        rgba(255, 255, 255, 0.92);
}

.manual-invoice__icon {
    width: 48px;
    height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    color: #2563eb;
    background: rgba(37, 99, 235, 0.08);
    border: 1px solid rgba(37, 99, 235, 0.12);
    font-size: 1.18rem;
}

.manual-invoice__eyebrow {
    display: block;
    color: #2563eb;
    font-size: 0.68rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.manual-invoice__header h3 {
    margin: 0.12rem 0 0;
    color: #0f172a;
    font-family: var(--font-outfit);
    font-size: 1.35rem;
    font-weight: 800;
}

.manual-invoice__header p {
    max-width: 620px;
    margin: 0.22rem 0 0;
    color: #64748b;
    font-size: 0.8rem;
    line-height: 1.4;
}

.manual-invoice__number-card,
.manual-invoice__total-box {
    border: 1px solid rgba(37, 99, 235, 0.14);
    border-radius: 16px;
    background: #ffffff;
    box-shadow: 0 12px 32px rgba(37, 99, 235, 0.08);
}

.manual-invoice__number-card {
    padding: 0.8rem 0.95rem;
    text-align: right;
}

.manual-invoice__number-help {
    grid-column: 1 / -1;
    display: flex;
    align-items: flex-start;
    gap: 0.45rem;
    padding: 0.55rem 0.7rem;
    border: 1px dashed rgba(37, 99, 235, 0.25);
    border-radius: 12px;
    background: rgba(37, 99, 235, 0.06);
    color: #475569;
    font-size: 0.76rem;
    line-height: 1.35;
}

.manual-invoice__number-help i {
    margin-top: 0.08rem;
    color: #2563eb;
}

.manual-invoice__number-card span,
.manual-invoice__total-box span {
    display: block;
    color: #64748b;
    font-size: 0.67rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.manual-invoice__number-card strong,
.manual-invoice__total-box strong {
    display: block;
    margin-top: 0.18rem;
    color: #1d4ed8;
    font-family: var(--font-outfit);
    font-size: 1.15rem;
    font-weight: 800;
}

.manual-invoice__form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.8rem;
    padding: 1rem;
    overflow-y: auto;
}

.manual-invoice__section {
    min-width: 0;
    padding: 0.78rem;
    border: 1px solid rgba(148, 163, 184, 0.16);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.78);
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.055);
}

.manual-invoice__section--amounts,
.manual-invoice__section--notes,
.manual-invoice__actions {
    grid-column: 1 / -1;
}

.manual-invoice__section--amounts {
    background:
        linear-gradient(135deg, rgba(37, 99, 235, 0.06), transparent 46%),
        rgba(255, 255, 255, 0.82);
}

.manual-invoice__section-head {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.65rem;
    color: #0f172a;
    font-family: var(--font-outfit);
    font-size: 0.9rem;
    font-weight: 800;
}

.manual-invoice__section-head i {
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    color: #2563eb;
    background: rgba(37, 99, 235, 0.08);
    border: 1px solid rgba(37, 99, 235, 0.1);
}

.manual-invoice__grid,
.manual-invoice__notes-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.7rem;
}

.manual-invoice__grid--amounts {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-items: end;
}

.manual-invoice__form .form-label {
    color: #334155;
    font-size: 0.69rem;
    font-weight: 800;
    letter-spacing: 0.01em;
}

.manual-invoice__form .input-wrapper {
    background: #ffffff;
    border-radius: 12px;
}

.manual-invoice__form .form-input {
    min-height: 40px;
    border-radius: 12px;
    background: #ffffff;
    font-size: 0.86rem;
}

.manual-invoice__form select.form-input {
    appearance: none;
    cursor: pointer;
    padding-right: 2.5rem;
}

.manual-invoice__form .input-wrapper--select .fa-chevron-down {
    left: auto;
    right: 0.9rem;
    pointer-events: none;
}

.manual-invoice__form textarea.form-input {
    min-height: 92px;
    padding: 0.72rem;
    resize: vertical;
    line-height: 1.35;
}

.manual-invoice__total-box {
    min-height: 70px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0.75rem 0.9rem;
}

.manual-invoice__actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.75rem;
    padding: 0.2rem 0 0;
}

.manual-invoice__feedback {
    margin-right: auto;
    color: #2563eb;
    font-size: 0.8rem;
    font-weight: 700;
}

@media (max-width: 860px) {
    .manual-invoice__header,
    .manual-invoice__form,
    .manual-invoice__grid,
    .manual-invoice__notes-grid,
    .manual-invoice__grid--amounts {
        grid-template-columns: 1fr;
    }

    .manual-invoice__number-card {
        text-align: left;
    }

    .manual-invoice__actions {
        flex-direction: column;
        align-items: stretch;
    }

    .manual-invoice__feedback {
        margin-right: 0;
    }
}

@media (max-width: 580px) {
    .manual-invoice-popup {
        padding: 0.65rem;
    }

    .manual-invoice__panel {
        width: calc(100vw - 1.3rem);
        max-height: calc(100vh - 1.3rem);
        border-radius: 20px;
    }

    .manual-invoice__header {
        padding: 1rem 3.2rem 0.9rem 1rem;
    }

    .manual-invoice__form {
        padding: 0.75rem;
    }
}

.confirm-popup__title {
    font-family: var(--font-outfit);
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.75rem;
}

.confirm-popup__text {
    font-size: 0.88rem;
    color: var(--text-secondary);
    line-height: 1.5;
    margin-bottom: 1.75rem;
}

.confirm-popup__actions {
    display: flex;
    width: 100%;
    gap: 0.75rem;
    justify-content: center;
}

.confirm-popup__actions .btn-premium {
    flex: 1;
    justify-content: center;
    padding: 0.65rem 1.25rem !important;
    font-size: 0.88rem !important;
    border-radius: 10px !important;
    white-space: nowrap !important; /* Garantizar que el texto no salte de línea */
}

.invoice-sheet__type,
.invoice-type-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    padding: 0.3rem 0.62rem;
    color: #2563eb;
    font-size: 0.7rem;
    font-weight: 800;
    background: rgba(96, 165, 250, 0.12);
    border-radius: 999px;
    width: 92px !important;
    min-width: 92px !important;
    box-sizing: border-box;
}

.invoice-sheet__type {
    margin-bottom: 0.45rem;
}

.invoice-sheet__type.is-purchase,
.invoice-type-badge.is-purchase {
    color: #15803d;
    background: rgba(34, 197, 94, 0.12);
}

.invoice-type-badge--editable {
    border: 1px solid rgba(37, 99, 235, 0.55) !important;
    cursor: pointer;
    font-family: inherit;
    transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.invoice-type-badge--editable.is-purchase {
    border-color: rgba(22, 163, 74, 0.55) !important;
}

.invoice-type-badge--editable:hover,
.invoice-type-badge--editable:focus-visible {
    transform: translateY(-1px);
    box-shadow: 0 7px 18px rgba(37, 99, 235, 0.14);
    outline: none;
}

.invoice-type-badge--editable.is-purchase:hover,
.invoice-type-badge--editable.is-purchase:focus-visible {
    box-shadow: 0 7px 18px rgba(22, 163, 74, 0.14);
}

.invoice-type-badge__edit {
    margin-left: 0.12rem;
    font-size: 0.52rem;
    opacity: 0;
    transition: opacity 0.18s ease;
}

.invoice-type-badge--editable:hover .invoice-type-badge__edit,
.invoice-type-badge--editable:focus-visible .invoice-type-badge__edit {
    opacity: 0.8;
}

/* ── Refined Speech Bubble Tooltip for Invoice Type Badges ── */

.invoice-type-badge--editable {
    position: relative;
    overflow: visible !important;
}

/* Cuerpo del globo (color adaptativo y tipografía Outfit) */
.invoice-type-badge--editable::after {
    position: absolute;
    bottom: 130%;
    left: 50%;
    transform: translate(-50%, 4px);
    padding: 0.38rem 0.75rem;
    border-radius: 9px; /* Esquinas perfectamente redondeadas y suaves */
    color: #ffffff !important; /* Texto en color blanco para legibilidad en fondo fuerte */
    font-family: var(--font-outfit), sans-serif !important;
    font-size: 0.75rem !important; /* Incrementado ~10% para mayor legibilidad */
    font-weight: 600 !important;
    letter-spacing: -0.01em !important;
    text-transform: none !important; /* Texto normal, no forzado en mayúsculas */
    white-space: nowrap !important;
    z-index: 10000 !important;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.2s cubic-bezier(0.16, 1, 0.3, 1), transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Colita del globo (triángulo fino a juego) */
.invoice-type-badge--editable::before {
    content: "" !important;
    position: absolute;
    bottom: calc(130% - 4px);
    left: 50%;
    transform: translate(-50%, 4px) rotate(45deg);
    width: 8px;
    height: 8px;
    z-index: 9999 !important;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.2s cubic-bezier(0.16, 1, 0.3, 1), transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Contenido y colores adaptativos según el tipo actual */

/* Si es Venta -> Convertir a Compra (Verde Fuerte) */
.invoice-type-badge--editable[data-current-invoice-type="Venta"]::after {
    content: "Convertir a Compra" !important;
    background-color: #15803d !important; /* Verde fuerte/esmeralda */
    border: 1px solid #166534 !important;
    box-shadow: 0 6px 16px rgba(22, 163, 74, 0.2) !important;
}
.invoice-type-badge--editable[data-current-invoice-type="Venta"]::before {
    background-color: #15803d !important;
    border-right: 1px solid #166534 !important;
    border-bottom: 1px solid #166534 !important;
}

/* Si es Compra -> Convertir a Venta (Azul Fuerte) */
.invoice-type-badge--editable[data-current-invoice-type="Compra"]::after {
    content: "Convertir a Venta" !important;
    background-color: #1d4ed8 !important; /* Azul fuerte/royal */
    border: 1px solid #1e40af !important;
    box-shadow: 0 6px 16px rgba(37, 99, 235, 0.2) !important;
}
.invoice-type-badge--editable[data-current-invoice-type="Compra"]::before {
    background-color: #1d4ed8 !important;
    border-right: 1px solid #1e40af !important;
    border-bottom: 1px solid #1e40af !important;
}

/* Mostrar globo en Hover */
.invoice-type-badge--editable:hover::after {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translate(-50%, 0) !important;
}

.invoice-type-badge--editable:hover::before {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translate(-50%, 0px) rotate(45deg) !important;
}

/* Badge de tipo estático (pendientes analizadas) */
.invoice-type-badge__static {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    padding: 0.18rem 0.55rem;
    border-radius: 7px;
    font-family: var(--font-outfit);
    font-size: 0.66rem;
    font-weight: 700;
    white-space: nowrap;
    width: 92px !important;
    min-width: 92px !important;
    box-sizing: border-box;
}

.invoice-type-badge__static.is-sale {
    color: #1d4ed8;
    background: rgba(59, 130, 246, 0.12);
    border: 1px solid rgba(37, 99, 235, 0.55) !important;
}

.invoice-type-badge__static.is-purchase {
    color: #15803d;
    background: rgba(34, 197, 94, 0.12);
    border: 1px solid rgba(22, 163, 74, 0.55) !important;
}

[data-theme="dark"] .invoice-type-badge__static.is-sale {
    color: #60a5fa;
    background: rgba(59, 130, 246, 0.15);
}

[data-theme="dark"] .invoice-type-badge__static.is-purchase {
    color: #4ade80;
    background: rgba(34, 197, 94, 0.15);
}

.invoice-type-change-popup__panel {
    width: min(92vw, 440px);
}

.invoice-type-change-popup__icon {
    color: #2563eb;
    background: rgba(96, 165, 250, 0.11);
}

.invoice-type-change-popup__transition {
    display: grid;
    width: 100%;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 0.7rem;
    margin: 0.4rem 0 1rem;
}

.invoice-type-change-popup__transition span,
.invoice-type-change-popup__transition strong {
    padding: 0.65rem;
    border-radius: 12px;
    font-size: 0.8rem;
    text-align: center;
}

.invoice-type-change-popup__transition .is-sale {
    color: #0369a1;
    background: rgba(96, 165, 250, 0.14);
}

.invoice-type-change-popup__transition .is-purchase {
    color: #15803d;
    background: rgba(34, 197, 94, 0.13);
}

.invoice-type-change-popup__transition > i {
    color: var(--text-muted);
}

/* Botón de Confirmación en Rojo Premium */
.btn-confirm-delete-action {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    color: #ffffff;
    box-shadow: 0 4px 14px rgba(239, 68, 68, 0.25);
    font-weight: 600;
}

.btn-confirm-delete-action:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(239, 68, 68, 0.35);
    background: linear-gradient(135deg, #f87171 0%, #dc2626 100%);
}

@keyframes pulseWarn {
    0% {
        box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.4);
    }
    70% {
        box-shadow: 0 0 0 10px rgba(239, 68, 68, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(239, 68, 68, 0);
    }
}

@keyframes inputShake {
    0%, 100% { transform: translateX(0); }
    20%, 60% { transform: translateX(-6px); }
    40%, 80% { transform: translateX(6px); }
}

.input-error-shaking {
    animation: inputShake 0.4s ease-in-out !important;
    border-color: #ef4444 !important;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15) !important;
}

/* ==========================================================================
   INTERACTIVE OCR REVIEW MODAL & OVERLAY STYLES
   ========================================================================== */

/* 1. OCR Loading Overlay */
.ocr-loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 3000;
}

.ocr-loading-overlay__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(2, 6, 23, 0.7);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.ocr-loading-overlay__panel {
    position: relative;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 24px;
    padding: 2.7rem 2.15rem;
    max-width: 560px;
    width: 90%;
    text-align: center;
    backdrop-filter: var(--blur-glass);
    box-shadow: var(--shadow-premium);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.25rem;
    animation: scaleEntrance 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

[data-theme="light"] .ocr-loading-overlay__panel {
    background: #ffffff;
    border-color: rgba(15, 23, 42, 0.08);
}

/* AI Scanner AAA Animation Style */
.ai-scanner {
    position: relative;
    width: 100px;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.5rem;
}

.ai-scanner__circle {
    position: absolute;
    border-radius: 50%;
    border: 2px solid transparent;
}

.ai-scanner__circle--outer {
    width: 100px;
    height: 100px;
    border-top-color: #60a5fa;
    border-bottom-color: #3b82f6;
    animation: aiScanOuterSpin 3s linear infinite;
}

.ai-scanner__circle--inner {
    width: 76px;
    height: 76px;
    border-left-color: #818cf8;
    border-right-color: #4f46e5;
    animation: aiScanInnerSpin 1.5s linear infinite;
}

.ai-scanner__line {
    position: absolute;
    width: 80px;
    height: 2px;
    background: linear-gradient(90deg, transparent, #60a5fa, #818cf8, #60a5fa, transparent);
    animation: aiScanLineSweep 2s ease-in-out infinite;
    box-shadow: 0 0 8px rgba(96, 165, 250, 0.8);
    opacity: 0.8;
}

.ai-scanner__icon {
    font-size: 1.8rem;
    background: linear-gradient(135deg, #ffffff 0%, #bae6fd 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 2px 8px rgba(96, 165, 250, 0.6));
    animation: aiScanIconPulse 2s infinite ease-in-out;
}

@keyframes aiScanOuterSpin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

@keyframes aiScanInnerSpin {
    0% {
        transform: rotate(360deg);
    }
    100% {
        transform: rotate(0deg);
    }
}

@keyframes aiScanLineSweep {
    0%, 100% {
        transform: translateY(-38px);
    }
    50% {
        transform: translateY(38px);
    }
}

@keyframes aiScanIconPulse {
    0%, 100% {
        transform: scale(0.92);
        opacity: 0.8;
    }
    50% {
        transform: scale(1.08);
        opacity: 1;
        filter: drop-shadow(0 4px 12px rgba(129, 140, 248, 0.8));
    }
}

.ocr-loading-overlay__title {
    font-family: var(--font-outfit);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
}

.ocr-loading-overlay__text {
    font-size: 0.9rem;
    color: var(--text-secondary);
    line-height: 1.6;
}

@media (max-width: 520px) {
    .ocr-loading-overlay__panel {
        width: calc(100% - 1.5rem);
        padding: 2.1rem 1rem;
        gap: 1rem;
    }

}

.ocr-loading-overlay__progress {
    width: 100%;
    height: 6px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(148, 163, 184, 0.2);
}

.ocr-loading-overlay__progress-bar {
    width: 0;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #2563eb, #60a5fa);
    transition: width 0.55s ease;
}

.ocr-loading-overlay__result {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 0.45rem;
    padding: 0.65rem 1.1rem;
    border: 1px solid rgba(16, 185, 129, 0.2);
    border-radius: 999px;
    background: rgba(16, 185, 129, 0.08);
}

[data-theme="dark"] .ocr-loading-overlay__result {
    border-color: rgba(134, 239, 172, 0.32);
    background: rgba(74, 222, 128, 0.16);
}

.ocr-loading-overlay__result[hidden] {
    display: none;
}

.ocr-loading-overlay__result-count {
    color: #059669;
    font-family: var(--font-outfit);
    font-size: 1.85rem;
    line-height: 1;
}

[data-theme="dark"] .ocr-loading-overlay__result-count {
    color: #86efac;
}

.ocr-loading-overlay__result-label {
    color: var(--text-secondary);
    font-size: 0.88rem;
    font-weight: 700;
}

.ocr-loading-overlay[data-state="success"] .ai-scanner {
    width: 88px;
    height: 88px;
    margin-bottom: 0;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.18), rgba(52, 211, 153, 0.05));
    box-shadow: 0 0 0 10px rgba(16, 185, 129, 0.06);
    animation: ocrSuccessEntrance 0.55s cubic-bezier(0.16, 1, 0.3, 1);
}

.ocr-loading-overlay[data-state="success"] .ai-scanner__circle,
.ocr-loading-overlay[data-state="success"] .ai-scanner__line {
    display: none;
}

.ocr-loading-overlay[data-state="success"] .ai-scanner__icon {
    color: #10b981;
    font-size: 3rem;
    background: none;
    -webkit-text-fill-color: currentColor;
    filter: drop-shadow(0 6px 14px rgba(16, 185, 129, 0.25));
    animation: none;
}

.ocr-loading-overlay[data-state="success"] .ocr-loading-overlay__progress {
    display: none;
}

@keyframes ocrSuccessEntrance {
    0% {
        opacity: 0;
        transform: scale(0.72);
    }
    70% {
        transform: scale(1.08);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

/* 2. OCR Review Popup Modal */
.ocr-review-popup {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2500;
    padding: 0.8rem;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.ocr-review-popup.active {
    opacity: 1;
}

.ocr-review__panel {
    position: relative;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.96));
    border: 1px solid var(--border-color);
    border-radius: 24px;
    padding: 0;
    max-width: 1180px;
    width: 100%;
    backdrop-filter: var(--blur-glass);
    box-shadow: var(--shadow-premium);
    transform: scale(0.92);
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: 10;
    display: flex;
    flex-direction: column;
    gap: 0;
    max-height: calc(100vh - 1.6rem);
    overflow: hidden;
}

.ocr-review-popup.active .ocr-review__panel {
    transform: scale(1);
}

[data-theme="light"] .ocr-review__panel {
    background: linear-gradient(180deg, #ffffff, #f8fbff);
    border-color: rgba(15, 23, 42, 0.08);
    box-shadow: 0 24px 80px rgba(15, 23, 42, 0.15);
}

.ocr-review__header {
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.62rem;
    text-align: center;
    padding: 1.15rem 3.3rem 0.95rem;
    border-bottom: 1px solid rgba(148, 163, 184, 0.16);
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(16px);
}

.ocr-review__icon {
    width: 42px;
    height: 42px;
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.12), rgba(96, 165, 250, 0.04));
    border: 1px solid rgba(37, 99, 235, 0.12);
    color: var(--color-emerald);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.12rem;
    margin-bottom: 0;
}

[data-theme="light"] .ocr-review__icon {
    background: rgba(37, 99, 235, 0.08);
    color: #2563eb;
}

.ocr-review__title {
    font-family: var(--font-outfit);
    font-size: clamp(1.14rem, 1.8vw, 1.38rem);
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.25rem;
    white-space: nowrap;
    text-align: center;
}

.ocr-review__subtitle {
    font-size: 0.78rem;
    color: #64748b;
    line-height: 1.35;
    max-width: 620px;
    margin: 0 auto;
    text-align: center;
}

.ocr-review__form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
    gap: 0.82rem;
    padding: 0.95rem 1.1rem 1rem;
    overflow-y: auto;
}

.ocr-review__section {
    position: relative;
    padding: 0.72rem;
    border: 1px solid rgba(148, 163, 184, 0.16);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.72);
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.05);
}

.ocr-review__section--money,
.ocr-review__section:has(.ocr-review__grid--money) {
    background:
        radial-gradient(circle at top right, rgba(37, 99, 235, 0.08), transparent 38%),
        rgba(255, 255, 255, 0.78);
}

.ocr-review__section-head {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.55rem;
    align-items: start;
    margin-bottom: 0.55rem;
}

.ocr-review__section-icon {
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    font-size: 0.78rem;
    color: #2563eb;
    background: rgba(37, 99, 235, 0.08);
    border: 1px solid rgba(37, 99, 235, 0.1);
}

.ocr-review__section-head h4 {
    margin: 0;
    color: #0f172a;
    font-family: var(--font-outfit);
    font-size: 0.88rem;
    font-weight: 750;
}

.ocr-review__section-head p {
    margin: 0.08rem 0 0;
    color: #64748b;
    font-size: 0.7rem;
    line-height: 1.25;
}

.ocr-review__grid {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 0.68rem;
    padding: 0.78rem;
    border: 1px solid rgba(148, 163, 184, 0.16);
    border-radius: 16px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.88), rgba(248, 250, 252, 0.78));
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.055);
}

.ocr-review__grid::before {
    content: "Datos principales de la factura";
    grid-column: 1 / -1;
    color: #0f172a;
    font-family: var(--font-outfit);
    font-size: 0.9rem;
    font-weight: 750;
}

.ocr-review__grid > .form-group:nth-child(1) {
    grid-column: span 5;
}

.ocr-review__grid > .form-group:nth-child(2) {
    grid-column: span 3;
}

.ocr-review__grid > .form-group:nth-child(3) {
    grid-column: span 4;
}

.ocr-review__grid > .form-group:nth-child(4) {
    grid-column: span 5;
}

.ocr-review__grid > .form-group:nth-child(5) {
    grid-column: span 3;
}

.ocr-review__grid > .form-group:nth-child(6),
.ocr-review__grid > .form-group:nth-child(7),
.ocr-review__grid > .form-group:nth-child(8),
.ocr-review__grid > .form-group:nth-child(9),
.ocr-review__grid > .form-group:nth-child(10),
.ocr-review__grid > .form-group:nth-child(11),
.ocr-review__grid > .form-group:nth-child(13),
.ocr-review__grid > .form-group:nth-child(14),
.ocr-review__grid > .form-group:nth-child(15) {
    grid-column: span 3;
}

.ocr-review__grid > .form-group:nth-child(12) {
    grid-column: span 3;
}

.ocr-review__grid > .form-group:nth-child(12) .input-wrapper {
    box-shadow: 0 0 0 1px rgba(37, 99, 235, 0.16), 0 12px 30px rgba(37, 99, 235, 0.08);
}

.ocr-review__grid > .form-group:nth-child(12) .form-label {
    color: #1d4ed8;
}

.ocr-review__notes-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.52rem;
}

.ocr-review-popup--edit .ocr-review__notes-grid {
    grid-template-columns: 1fr;
}

.ocr-review__field--wide {
    grid-column: span 2;
}

.ocr-review__field--full {
    grid-column: 1 / -1;
}

.ocr-review__field--total .input-wrapper {
    box-shadow: 0 0 0 1px rgba(37, 99, 235, 0.14), 0 12px 30px rgba(37, 99, 235, 0.08);
}

.ocr-review__field--total .form-label {
    color: #1d4ed8;
}

.ocr-review__textarea {
    min-height: 64px;
    padding: 0.58rem 0.72rem !important;
    resize: vertical;
    line-height: 1.32;
}

.ocr-review__textarea--compact {
    min-height: 52px;
}

.ocr-review__textarea--large {
    min-height: 86px;
}

.ocr-review__form .form-group {
    min-width: 0;
}

.ocr-review__form > .form-group {
    padding: 0.78rem;
    border: 1px solid rgba(148, 163, 184, 0.16);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.78);
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.045);
}

.ocr-review__form > .form-group:has(#ocr-line-items) {
    grid-column: 1 / -1;
}

.ocr-review__form > .form-group:has(#ocr-tax-breakdown),
.ocr-review__form > .form-group:has(#ocr-additional-fields),
.ocr-review__form > .form-group:has(#ocr-other-dates) {
    min-height: 0;
}

.ocr-review__form > .form-group:has(#ocr-line-items)::before,
.ocr-review__form > .form-group:has(#ocr-tax-breakdown)::before,
.ocr-review__form > .form-group:has(#ocr-additional-fields)::before,
.ocr-review__form > .form-group:has(#ocr-other-dates)::before {
    display: block;
    margin-bottom: 0.45rem;
    color: #0f172a;
    font-family: var(--font-outfit);
    font-size: 0.82rem;
    font-weight: 750;
}

.ocr-review__form > .form-group:has(#ocr-line-items)::before {
    content: "Detalle de conceptos";
}

.ocr-review__form > .form-group:has(#ocr-tax-breakdown)::before {
    content: "Impuestos";
}

.ocr-review__form > .form-group:has(#ocr-additional-fields)::before {
    content: "Otros datos";
}

.ocr-review__form > .form-group:has(#ocr-other-dates)::before {
    content: "Otras fechas";
}

.ocr-review__form .form-label {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    color: #334155;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.01em;
}

.ocr-review__form .input-wrapper {
    background: #ffffff;
    border-radius: 12px;
}

.ocr-review__form .form-input {
    min-height: 38px;
    border-radius: 12px;
    font-size: 0.85rem;
    padding-top: 0.55rem;
    padding-bottom: 0.55rem;
    background: #ffffff;
}

.ocr-review__form select.form-input {
    appearance: none;
    cursor: pointer;
    padding-right: 2.4rem;
}

.input-wrapper__chevron {
    position: absolute;
    right: 1rem;
    left: auto !important;
    color: #94a3b8 !important;
    pointer-events: none;
}

@media (max-width: 580px) {
    .ocr-review-popup {
        padding: 0.75rem;
    }

    .ocr-review__panel {
        max-height: calc(100vh - 1.5rem);
        overflow: hidden;
    }

    .ocr-review__header {
        grid-template-columns: 1fr;
        padding: 1.25rem;
        text-align: center;
        justify-items: center;
    }

    .ocr-review__title {
        font-size: clamp(1.08rem, 6vw, 1.28rem);
    }

    .ocr-review__form {
        grid-template-columns: 1fr;
        padding: 1rem;
    }

    .ocr-review__grid,
    .ocr-review__grid--identity,
    .ocr-review__grid--dates,
    .ocr-review__grid--money,
    .ocr-review__notes-grid {
        grid-template-columns: 1fr;
    }

    .ocr-review__grid > .form-group,
    .ocr-review__form > .form-group {
        grid-column: 1 / -1 !important;
    }

    .ocr-review__field--wide,
    .ocr-review__field--full {
        grid-column: auto;
    }
}

.ocr-review__actions {
    grid-column: 1 / -1;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(14px);
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    margin: 0;
    border-top: 1px solid rgba(148, 163, 184, 0.2);
    padding: 0.7rem 0 0;
}

.ocr-review__actions .btn-premium {
    padding: 0.58rem 1.35rem !important;
    font-size: 0.82rem !important;
    border-radius: 10px !important;
}

/* Editable invoice layout */
.ocr-review__panel {
    max-width: 920px;
    max-height: calc(100vh - 1.2rem);
    background: #f1f5f9;
}

.ocr-review__header {
    padding: 1rem 4rem 0.85rem;
    background: #ffffff;
}

.ocr-review__title,
.ocr-review__subtitle {
    width: 100%;
    text-align: center;
}

.ocr-review__form {
    width: min(100%, 760px);
    margin: 0 auto;
    grid-template-columns: 1fr;
    gap: 0.9rem;
    padding: 1rem;
}

.ocr-review__grid {
    position: relative;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 0.75rem;
    padding: 1.15rem;
    border-radius: 10px;
    background: #ffffff;
    border: 1px solid rgba(15, 23, 42, 0.1);
    box-shadow: 0 18px 42px rgba(15, 23, 42, 0.08);
}

.ocr-review__grid::before {
    content: "FACTURA";
    grid-column: 1 / -1;
    display: flex;
    justify-content: flex-end;
    padding-bottom: 0.65rem;
    border-bottom: 2px solid rgba(37, 99, 235, 0.16);
    color: #0f172a;
    font-family: var(--font-outfit);
    font-size: 1.45rem;
    font-weight: 800;
}

.ocr-review-popup--edit .ocr-review__grid::before {
    content: none;
    display: none;
}

.ocr-review__grid > .form-group {
    grid-column: 1 / -1;
}

.ocr-review__grid > .form-group:nth-child(1) {
    grid-column: 1 / span 3;
}

.ocr-review__grid > .form-group:nth-child(2) {
    grid-column: 4 / span 3;
}

.ocr-review__grid > .form-group:nth-child(3) {
    grid-column: 1 / span 3;
}

.ocr-review__grid > .form-group:nth-child(4) {
    grid-column: 4 / span 3;
}

.ocr-review__grid > .form-group:nth-child(5) {
    grid-column: 4 / span 3;
}

.ocr-review__grid > .form-group:nth-child(6),
.ocr-review__grid > .form-group:nth-child(7),
.ocr-review__grid > .form-group:nth-child(8) {
    grid-column: span 2;
}

.ocr-review__grid > .form-group:nth-child(9),
.ocr-review__grid > .form-group:nth-child(10),
.ocr-review__grid > .form-group:nth-child(11),
.ocr-review__grid > .form-group:nth-child(13),
.ocr-review__grid > .form-group:nth-child(14),
.ocr-review__grid > .form-group:nth-child(15) {
    grid-column: span 2;
}

.ocr-review__grid > .form-group:nth-child(12) {
    grid-column: 1 / -1;
    padding: 0.75rem;
    border-radius: 10px;
    background: rgba(37, 99, 235, 0.055);
    border: 1px solid rgba(37, 99, 235, 0.14);
}

.ocr-review__grid > .form-group:nth-child(12) .form-input {
    min-height: 46px;
    font-family: var(--font-outfit);
    font-size: 1.08rem;
    font-weight: 800;
}

.ocr-review__form > .form-group {
    margin-top: 0 !important;
    padding: 1rem;
    border-radius: 10px;
    background: #ffffff;
    border: 1px solid rgba(15, 23, 42, 0.1);
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.06);
}

.ocr-review__form > .form-group:has(#ocr-line-items),
.ocr-review__form > .form-group:has(#ocr-tax-breakdown),
.ocr-review__form > .form-group:has(#ocr-additional-fields),
.ocr-review__form > .form-group:has(#ocr-other-dates) {
    grid-column: 1 / -1;
}

.ocr-review__form > .form-group textarea.form-input {
    min-height: 108px !important;
}

.ocr-review__actions {
    position: sticky;
    bottom: 0;
    padding: 0.85rem 0 0;
    justify-content: center;
}

@media (max-width: 820px) {
    .ocr-review__form {
        width: 100%;
    }

    .ocr-review__grid {
        grid-template-columns: 1fr;
    }

    .ocr-review__grid > .form-group {
        grid-column: 1 / -1 !important;
    }
}

.invoice-grid-row--editable {
    cursor: pointer;
    transition: background 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.invoice-grid-row--sale td,
.invoice-grid-row--purchase td {
    transition: background 0.2s ease, box-shadow 0.2s ease;
}

.invoice-grid-row--sale td {
    background: rgba(96, 165, 250, 0.18);
    border-bottom: 1px solid rgba(30, 100, 190, 0.5);
}

.invoice-grid-row--sale td:first-child {
    box-shadow: inset 4px 0 0 #60a5fa;
}

.invoice-grid-row--purchase td {
    background: rgba(34, 197, 94, 0.15);
    border-bottom: 1px solid rgba(17, 120, 54, 0.5);
}

.invoice-grid-row--purchase td:first-child {
    box-shadow: inset 4px 0 0 #22c55e;
}

.invoice-grid-row--editable:hover {
    transform: translateY(-1px);
}

.invoice-grid-row--sale:hover td {
    background: rgba(96, 165, 250, 0.26);
}

.invoice-grid-row--purchase:hover td {
    background: rgba(34, 197, 94, 0.22);
}

.metric-card--processed-split {
    gap: 0.7rem;
}

.metric-card--financial-pulse,
.metric-card--amount {
    min-height: 184px;
    isolation: isolate;
}

.metric-card__ambient {
    position: absolute;
    z-index: -1;
    width: 190px;
    height: 190px;
    border-radius: 50%;
    opacity: 0.72;
    pointer-events: none;
}

.metric-card__ambient--blue {
    top: -118px;
    right: -38px;
    background: radial-gradient(circle, rgba(59, 130, 246, 0.18), transparent 68%);
}

.metric-card__ambient--gold {
    right: -28px;
    bottom: -125px;
    background: radial-gradient(circle, rgba(245, 158, 11, 0.2), transparent 70%);
}

.financial-pulse__heading,
.amount-metric__top,
.amount-metric__footer,
.financial-pulse__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.amount-metric__split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: stretch;
    gap: 1.15rem;
    margin-top: 0.95rem;
}

.amount-metric__side {
    position: relative;
    display: grid;
    align-content: center;
    min-height: 76px;
    padding: 0.78rem 0.88rem;
    border: 1px solid rgba(148, 163, 184, 0.14);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.48);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.74);
    overflow: hidden;
}

.amount-metric__side::after {
    content: "";
    position: absolute;
    inset: auto 0 0;
    height: 3px;
    opacity: 0.82;
}

.amount-metric__side--sale::after {
    background: linear-gradient(90deg, #2563eb, #60a5fa);
}

.amount-metric__side--purchase::after {
    background: linear-gradient(90deg, #16a34a, #86efac);
}

.amount-metric__label {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-bottom: 0.34rem;
    color: #64748b;
    font-size: 0.64rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.amount-metric__side--sale .amount-metric__label i {
    color: #2563eb;
}

.amount-metric__side--purchase .amount-metric__label i {
    color: #16a34a;
}

.amount-metric__side strong {
    color: var(--text-primary);
    font-family: var(--font-outfit);
    font-size: clamp(1.55rem, 3.1vw, 2.35rem);
    font-weight: 900;
    letter-spacing: -0.06em;
    line-height: 0.95;
    white-space: nowrap;
}

.amount-metric__divider {
    width: 1px;
    min-height: 76px;
    align-self: center;
    background: linear-gradient(180deg, transparent, rgba(148, 163, 184, 0.36), transparent);
}

.amount-metric__total {
    color: #b45309;
    font-size: 0.66rem;
    font-weight: 900;
    white-space: nowrap;
}

.metric-eyebrow {
    display: block;
    margin-bottom: 0.12rem;
    color: #64748b;
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.metric-card--financial-pulse .metric-title,
.metric-card--amount .metric-title {
    margin: 0;
    color: var(--text-primary);
    font-family: var(--font-outfit);
    font-size: 0.98rem;
    font-weight: 700;
}

.metric-status-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.34rem 0.58rem;
    border: 1px solid rgba(16, 185, 129, 0.2);
    border-radius: 999px;
    background: rgba(16, 185, 129, 0.08);
    color: #059669;
    font-size: 0.63rem;
    font-weight: 700;
}

.financial-pulse__body {
    display: grid;
    grid-template-columns: 78px minmax(0, 1fr);
    align-items: center;
    gap: 1rem;
}

.processed-metric-ring {
    --sales-share: 50%;
    width: 72px;
    height: 72px;
    padding: 6px;
    border-radius: 50%;
    background: conic-gradient(#2563eb 0 var(--sales-share), #22c55e var(--sales-share) 100%);
    box-shadow: 0 8px 24px rgba(37, 99, 235, 0.16);
}

.processed-metric-ring__inner {
    display: grid;
    width: 100%;
    height: 100%;
    place-content: center;
    border-radius: inherit;
    background: var(--bg-card);
    text-align: center;
}

.processed-metric-ring strong {
    color: var(--text-primary);
    font-family: var(--font-outfit);
    font-size: 1.35rem;
    line-height: 1;
}

.processed-metric-ring span {
    margin-top: 0.18rem;
    color: var(--text-muted);
    font-size: 0.56rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.processed-metric-split {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.55rem;
}

.processed-metric-segment {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    min-width: 0;
    padding: 0.55rem 0.65rem;
    border: 1px solid rgba(148, 163, 184, 0.14);
    border-radius: 13px;
    background: rgba(248, 250, 252, 0.62);
}

.processed-metric-segment__marker {
    grid-row: 1 / 3;
    align-self: center;
    display: grid;
    width: 27px;
    height: 27px;
    margin-right: 0.5rem;
    place-items: center;
    border-radius: 9px;
    font-size: 0.65rem;
}

.processed-metric-segment__label {
    color: var(--text-muted);
    font-size: 0.6rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.processed-metric-segment strong {
    color: var(--text-primary);
    font-family: var(--font-outfit);
    font-size: 1.12rem;
    line-height: 1.05;
}

.processed-metric-segment--sale .processed-metric-segment__marker {
    background: rgba(37, 99, 235, 0.11);
    color: #2563eb;
}

.processed-metric-segment--purchase .processed-metric-segment__marker {
    background: rgba(34, 197, 94, 0.11);
    color: #16a34a;
}

.financial-pulse__footer {
    color: var(--text-muted);
    font-size: 0.62rem;
    font-weight: 650;
}

.financial-pulse__footer > span {
    white-space: nowrap;
}

.processed-metric-bar {
    display: flex;
    width: min(46%, 180px);
    height: 5px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(148, 163, 184, 0.18);
}

.processed-metric-bar span {
    display: block;
    min-width: 0;
    transition: width 0.35s ease;
}

.processed-metric-bar__sale { background: #2563eb; }
.processed-metric-bar__purchase { background: #22c55e; }

.amount-metric__seal {
    display: grid;
    width: 38px;
    height: 38px;
    flex: 0 0 auto;
    place-items: center;
    border: 1px solid rgba(245, 158, 11, 0.22);
    border-radius: 13px;
    background: linear-gradient(145deg, rgba(255, 251, 235, 0.95), rgba(254, 243, 199, 0.75));
    color: #b45309;
    box-shadow: 0 8px 20px rgba(245, 158, 11, 0.12);
}

.amount-metric__value {
    margin: 0.15rem 0;
    color: var(--text-primary);
    font-family: var(--font-outfit);
    font-size: clamp(1.8rem, 3vw, 2.55rem);
    font-weight: 800;
    letter-spacing: -0.045em;
    line-height: 1;
}

.amount-metric__caption {
    display: inline-flex;
    align-items: center;
    gap: 0.38rem;
    color: var(--text-muted);
    font-size: 0.67rem;
    font-weight: 650;
}

.amount-metric__caption i {
    color: #059669;
}

.amount-metric__spark {
    display: flex;
    height: 28px;
    align-items: flex-end;
    gap: 3px;
}

.amount-metric__spark i {
    display: block;
    width: 4px;
    border-radius: 6px;
    background: linear-gradient(to top, #f59e0b, #fcd34d);
}

.amount-metric__spark i:nth-child(1) { height: 28%; }
.amount-metric__spark i:nth-child(2) { height: 44%; }
.amount-metric__spark i:nth-child(3) { height: 35%; }
.amount-metric__spark i:nth-child(4) { height: 67%; }
.amount-metric__spark i:nth-child(5) { height: 54%; }
.amount-metric__spark i:nth-child(6) { height: 82%; }
.amount-metric__spark i:nth-child(7) { height: 100%; }

[data-theme="dark"] .processed-metric-segment {
    background: rgba(15, 23, 42, 0.58);
}

[data-theme="dark"] .amount-metric__seal {
    background: rgba(120, 53, 15, 0.2);
}

[data-theme="dark"] .amount-metric__side {
    border-color: rgba(148, 163, 184, 0.12);
    background: rgba(15, 23, 42, 0.46);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

[data-theme="dark"] .amount-metric__total {
    color: #fbbf24;
}

@media (max-width: 520px) {
    .financial-pulse__body {
        grid-template-columns: 64px minmax(0, 1fr);
        gap: 0.7rem;
    }

    .processed-metric-ring {
        width: 62px;
        height: 62px;
    }

    .processed-metric-segment {
        grid-template-columns: 1fr;
    }

    .processed-metric-segment__marker {
        display: none;
    }

    .amount-metric__split {
        grid-template-columns: 1fr;
        gap: 0.7rem;
    }

    .amount-metric__divider {
        display: none;
    }

    .amount-metric__side {
        min-height: 68px;
    }

    .amount-metric__side strong {
        font-size: 1.72rem;
    }

    .amount-metric__footer {
        flex-wrap: wrap;
    }
}

.invoice-grid-row--editable:focus-visible {
    outline: 2px solid #3b82f6;
    outline-offset: -2px;
}

.invoice-grid-row--editable:active {
    transform: scale(0.998);
}

/* --- FACTURA ESTRUCTURADA --- */
.invoice-sheet__panel {
    top: 48%;
    width: min(97vw, 1120px);
    max-height: min(98vh, 1040px);
    padding: 0;
    min-height: 0;
    background: #eef4fb;
    border: 1px solid rgba(148, 163, 184, 0.22);
    overflow: hidden;
    scrollbar-width: thin;
    scrollbar-color: rgba(59, 130, 246, 0.55) rgba(226, 232, 240, 0.55);
}

.invoice-sheet__scroll-area {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0.65rem 0;
    scrollbar-width: thin;
    scrollbar-color: rgba(59, 130, 246, 0.62) rgba(226, 232, 240, 0.72);
}

.invoice-sheet__scroll-area::-webkit-scrollbar {
    width: 8px;
}

.invoice-sheet__scroll-area::-webkit-scrollbar-track {
    background: rgba(226, 232, 240, 0.55);
    border-radius: 999px;
}

.invoice-sheet__scroll-area::-webkit-scrollbar-thumb {
    background: rgba(59, 130, 246, 0.55);
    border-radius: 999px;
}

.invoice-sheet__scroll-area::-webkit-scrollbar-thumb:hover {
    background: rgba(37, 99, 235, 0.78);
}

.invoice-sheet__toolbar,
.invoice-sheet__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.82rem 1.25rem;
    background: rgba(255, 255, 255, 0.94);
    border-bottom: 1px solid rgba(148, 163, 184, 0.2);
}

.invoice-sheet__toolbar-eyebrow {
    display: block;
    color: #64748b;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.invoice-sheet__toolbar h3 {
    margin: 0.15rem 0 0;
    color: #0f172a;
    font-size: 1.12rem;
}

.invoice-sheet__toolbar-actions {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.invoice-sheet__action-btn {
    padding: 0.58rem 0.85rem;
    border: 1px solid rgba(59, 130, 246, 0.18);
    border-radius: 10px;
    background: rgba(59, 130, 246, 0.08);
    color: #1d4ed8;
    font-size: 0.8rem;
}

.invoice-sheet__action-btn--primary {
    color: #ffffff;
    background: linear-gradient(135deg, #60a5fa, #3b82f6);
    box-shadow: 0 8px 18px rgba(59, 130, 246, 0.2);
}

.invoice-sheet__toolbar .modal-close-btn {
    position: static;
    width: 34px;
    height: 34px;
    color: #475569;
    background: rgba(15, 23, 42, 0.05);
}

.invoice-sheet__document {
    margin: 0 auto;
    width: min(calc(100% - 2rem), 930px);
    min-height: 835px;
    padding: 2.1rem 2.35rem 1.75rem;
    background:
        linear-gradient(90deg, rgba(37, 99, 235, 0.035) 0 6px, transparent 6px),
        #ffffff;
    color: #0f172a;
    box-shadow: 0 18px 44px rgba(15, 23, 42, 0.12);
    overflow: hidden;
}

.floating-popup.active .invoice-sheet__panel {
    transform: translate(-50%, -48%) scale(1);
}

.invoice-document__header,
.invoice-document__hero,
.invoice-document__metadata,
.invoice-document__totals,
.invoice-document__footer {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
}

.invoice-document__header {
    align-items: flex-start;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid #dbeafe;
    position: relative;
}

.invoice-document__header::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 4px;
    border-radius: 999px;
    background: linear-gradient(90deg, #2563eb, #60a5fa 62%, rgba(96, 165, 250, 0));
}

.invoice-document__logo {
    display: block;
    width: 176px;
    height: auto;
}

.invoice-document__brand-copy,
.invoice-document__hero p,
.invoice-document__customer p,
.invoice-document__tax-section p,
.invoice-document__items p,
.invoice-document__line-items-content,
#invoice-sheet-other-dates {
    margin: 0;
}

.invoice-document__brand-copy {
    color: #64748b;
    font-size: 0.72rem;
}

.invoice-document__heading {
    text-align: right;
}

.invoice-document__eyebrow,
.invoice-document__label,
.invoice-document__section-heading span {
    color: #64748b;
    font-size: 0.67rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.invoice-document__heading h2 {
    margin: 0.2rem 0 0;
    color: #0f172a;
    font-size: 2.25rem;
    letter-spacing: 0.12em;
}

.invoice-document__heading strong {
    display: inline-flex;
    margin-top: 0.2rem;
    padding: 0.24rem 0.52rem;
    color: #1d4ed8;
    font-size: 0.9rem;
    border-radius: 999px;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
}

.invoice-document__hero {
    align-items: flex-start;
    padding: 1.25rem 0 1rem;
}

.invoice-document__hero h3 {
    margin: 0.22rem 0 0.65rem;
    font-size: 1.35rem;
}

.invoice-document__hero p {
    display: flex;
    gap: 0.5rem;
    color: #64748b;
    font-size: 0.78rem;
}

.invoice-document__hero p strong {
    color: #334155;
}

.invoice-document__hero-side {
    min-width: 160px;
    text-align: right;
}

.invoice-document__hero-side p {
    display: block;
    margin-top: 0.55rem;
    color: #64748b;
    font-size: 0.7rem;
    overflow-wrap: anywhere;
}

.invoice-document__metadata {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0;
    padding: 0;
    border: 1px solid #dbeafe;
    border-radius: 14px;
    overflow: hidden;
    background: #f8fbff;
}

.invoice-document__metadata div {
    flex: initial;
    padding: 0.72rem 0.82rem;
    border-right: 1px solid #dbeafe;
}

.invoice-document__metadata div:last-child {
    border-right: 0;
}

.invoice-document__metadata span,
.invoice-document__metadata strong {
    display: block;
}

.invoice-document__metadata span {
    margin-bottom: 0.18rem;
    color: #64748b;
    font-size: 0.67rem;
    text-transform: uppercase;
}

.invoice-document__metadata strong {
    color: #1e293b;
    font-size: 0.84rem;
}

.invoice-document__section {
    margin-top: 1rem;
}

.invoice-document__section-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.56rem 0.72rem;
    color: #ffffff;
    background: linear-gradient(135deg, #1d4ed8, #3b82f6);
    border-radius: 12px 12px 0 0;
}

.invoice-document__section-heading span {
    color: rgba(255, 255, 255, 0.78);
}

.invoice-document__section-heading strong {
    font-size: 0.78rem;
}

.invoice-document__items p,
.invoice-document__line-items-content,
.invoice-document__tax-section p,
#invoice-sheet-other-dates {
    max-height: 188px;
    min-height: 118px;
    overflow: auto;
    padding: 0.95rem 1rem;
    color: #1e293b;
    border: 1px solid #dbeafe;
    border-top: 0;
    border-radius: 0 0 12px 12px;
    background:
        linear-gradient(180deg, rgba(248, 250, 252, 0.96), rgba(255, 255, 255, 1)),
        repeating-linear-gradient(180deg, transparent 0 24px, rgba(226, 232, 240, 0.42) 24px 25px);
    font-family: Consolas, "Courier New", monospace;
    font-size: 0.72rem;
    line-height: 1.62;
    white-space: pre-wrap;
}

/* ── Structured line items list ── */
.invoice-document__line-items-content {
    white-space: normal;
    font-family: inherit;
    padding: 0;
}

#invoice-sheet-other-dates {
    min-height: 62px;
}

.invoice-document__tax-section p {
    min-height: 72px;
}

.invoice-document__customer p {
    display: flex;
    gap: 0.5rem;
    padding: 0.64rem 0.72rem;
    color: #64748b;
    border: 1px solid #dbeafe;
    border-top: 0;
    border-radius: 0 0 12px 12px;
    background: #f8fbff;
    font-size: 0.76rem;
}

.invoice-document__customer p strong {
    color: #334155;
}

.invoice-document__totals {
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    margin-top: 1.1rem;
}

.invoice-document__totals-card {
    width: 360px;
    background: #ffffff;
    border: 1px solid #bfdbfe;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 14px 34px rgba(37, 99, 235, 0.12);
}

.invoice-document__totals-card div {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.6rem 0.82rem;
    color: #64748b;
    font-size: 0.76rem;
    border-bottom: 1px solid #e0edff;
}

.invoice-document__totals-card div:last-child {
    border-bottom: 0;
}

.invoice-document__totals-card strong {
    color: #1e293b;
    font-variant-numeric: tabular-nums;
    text-align: right;
}

.invoice-document__grand-total {
    align-items: center;
    color: #ffffff !important;
    background: linear-gradient(135deg, #1d4ed8, #2563eb 58%, #60a5fa);
    padding: 0.88rem 0.82rem !important;
}

.invoice-document__grand-total strong {
    color: #ffffff;
    font-size: 1.32rem;
    letter-spacing: -0.02em;
}

.invoice-document__footer {
    margin-top: 1.25rem;
    padding-top: 0.65rem;
    color: #94a3b8;
    border-top: 1px solid #e2e8f0;
    font-size: 0.62rem;
}

.invoice-sheet__footer {
    padding: 0.62rem 1.25rem;
    color: #64748b;
    border-top: 1px solid rgba(148, 163, 184, 0.2);
    border-bottom: 0;
    font-size: 0.74rem;
}

.invoice-sheet__footer .btn-premium {
    padding: 0.5rem 0.8rem;
    color: #334155;
    border-color: rgba(148, 163, 184, 0.2);
    font-size: 0.76rem;
}

.invoice-sheet__status {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.7rem;
    border-radius: 999px;
    font-size: 0.82rem;
    font-weight: 700;
}

.invoice-sheet__status--processed {
    color: #047857;
    background: rgba(16, 185, 129, 0.12);
}

.invoice-sheet__status--pending {
    color: #b45309;
    background: rgba(245, 158, 11, 0.14);
}

@media (max-width: 720px) {
    .invoice-sheet__panel {
        width: min(94vw, 560px) !important;
        max-height: 90vh !important;
        border-radius: 18px !important;
    }

    .invoice-sheet__toolbar {
        align-items: flex-start;
        flex-direction: column;
    }

    .invoice-sheet__toolbar-actions {
        flex-wrap: wrap;
    }

    .invoice-sheet__document {
        width: calc(100% - 1rem);
        margin: 0.5rem auto;
        padding: 1.1rem;
    }

    .invoice-document__logo {
        width: 136px;
    }

    .invoice-document__heading h2 {
        font-size: 1.65rem;
    }

    .invoice-document__totals {
        flex-direction: column;
        display: flex;
    }

    .invoice-document__totals-card {
        width: 100%;
    }
}

@media (max-width: 460px) {
    .invoice-document__header,
    .invoice-document__hero {
        flex-direction: column;
    }

    .invoice-document__heading,
    .invoice-document__hero-side {
        text-align: left;
    }

    .invoice-document__metadata {
        flex-direction: column;
    }

    .invoice-document__metadata div {
        padding: 0 0 0.5rem;
        border-right: 0;
        border-bottom: 1px solid #e2e8f0;
    }

    .invoice-document__metadata div:last-child {
        padding-bottom: 0;
        border-bottom: 0;
    }
}

.invoice-export-page {
    position: fixed;
    top: 0;
    left: 0;
    width: 210mm;
    height: 297mm;
    padding: 8mm;
    overflow: hidden;
    background: #ffffff;
    box-sizing: border-box;
}

.invoice-export-page--pdf {
    left: -10000px;
    z-index: 1;
    pointer-events: none;
}

.invoice-export-page--print {
    z-index: 2147483647;
}

.invoice-export-page .invoice-sheet__document {
    width: 188mm;
    margin: 0;
    min-height: auto;
    padding: 7mm 8mm;
    box-shadow: none;
    transform-origin: top left;
    box-sizing: border-box;
}

.invoice-export-page .invoice-document__items p,
.invoice-export-page .invoice-document__tax-section p,
.invoice-export-page #invoice-sheet-other-dates {
    max-height: none;
    overflow: visible;
}

@media print {
    @page {
        size: A4 portrait;
        margin: 0;
    }

    body.invoice-printing * {
        visibility: hidden !important;
    }

    body.invoice-printing .invoice-export-page--print,
    body.invoice-printing .invoice-export-page--print * {
        visibility: visible !important;
    }

    body.invoice-printing .invoice-export-page--print {
        position: absolute;
        top: 0;
        left: 0;
        width: 210mm;
        height: 297mm;
        margin: 0;
        padding: 8mm;
        box-shadow: none;
    }
}

/* ==========================================================================
   ESTILOS ADICIONALES PARA IMPORTES DINÁMICOS DE FACTURA MANUAL
   ========================================================================== */
.manual-invoice__amounts-container {
    display: grid;
    grid-template-columns: 3.2fr 1fr;
    gap: 1.2rem;
    align-items: start;
    margin-top: 0.5rem;
}

.manual-invoice__amounts-left {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.manual-invoice__amounts-right {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.manual-invoice__amounts-right .manual-invoice__total-box {
    margin-top: 1.35rem; /* Alinea verticalmente con los inputs de la primera fila */
    transition: var(--transition-smooth);
}

.manual-invoice__amount-row {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr auto;
    gap: 0.7rem;
    align-items: end;
    margin-bottom: 0.75rem;
    animation: fadeInRow 0.22s ease-out;
}

@keyframes fadeInRow {
    from {
        opacity: 0;
        transform: translateY(6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.manual-invoice__amount-row:not(:first-child) .form-label {
    display: none;
}

.btn-remove-row {
    background: rgba(239, 68, 68, 0.08);
    border: 1px solid rgba(239, 68, 68, 0.16);
    color: #ef4444;
    border-radius: 12px;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--transition-smooth);
    margin-bottom: 2px;
}

.btn-remove-row:hover {
    background: #ef4444;
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.2);
}

.btn-add-row-premium {
    background: rgba(37, 99, 235, 0.06);
    border: 1px dashed rgba(37, 99, 235, 0.3);
    color: #2563eb;
    border-radius: 12px;
    padding: 0.6rem 1rem;
    font-size: 0.82rem;
    font-weight: 700;
    font-family: var(--font-outfit);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    align-self: flex-start;
    transition: var(--transition-smooth);
    margin-top: 0.25rem;
}

.btn-add-row-premium:hover {
    background: rgba(37, 99, 235, 0.12);
    border-color: #2563eb;
    transform: translateY(-1px);
}

@media (max-width: 860px) {
    .manual-invoice__amounts-container {
        grid-template-columns: 1fr;
    }
    .manual-invoice__amounts-right .manual-invoice__total-box {
        margin-top: 0.5rem;
    }
}

/* --- CLICKABLE Y HOVER STATE DEL RECUADRO DE NRO FACTURA SUGERIDO --- */
.manual-invoice__number-card {
    cursor: pointer;
    transition: var(--transition-smooth);
}

.manual-invoice__number-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 36px rgba(37, 99, 235, 0.14);
    border-color: #2563eb;
}

/* --- POPUP FLOTANTE DEL EMISOR --- */
.emisor-popup {
    position: fixed;
    inset: 0;
    z-index: 3000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
}

.emisor-popup.active {
    display: flex;
}

.emisor-popup__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(2, 6, 23, 0.55);
    backdrop-filter: blur(8px);
    z-index: 1;
}

.emisor-popup__panel {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 440px;
    background: #ffffff;
    border: 1px solid rgba(148, 163, 184, 0.2);
    border-radius: 20px;
    padding: 1.5rem;
    box-shadow: 0 20px 50px rgba(15, 23, 42, 0.18);
    transform: translateY(12px) scale(0.97);
    transition: var(--transition-smooth);
}

.emisor-popup.active .emisor-popup__panel {
    transform: translateY(0) scale(1);
}

[data-theme="dark"] .emisor-popup__panel {
    background: linear-gradient(180deg, #131d30, #0b0f19);
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4);
}

.emisor-popup__close {
    top: 1rem;
    right: 1rem;
}

.emisor-popup__header {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    border-bottom: 1px solid rgba(148, 163, 184, 0.12);
    padding-bottom: 0.8rem;
    margin-bottom: 0.8rem;
}

.emisor-popup__icon {
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    color: #2563eb;
    background: rgba(37, 99, 235, 0.08);
    border: 1px solid rgba(37, 99, 235, 0.1);
    font-size: 1rem;
}


/* --- ESTILOS DE LANDING PAGE VELORA --- */
.landing-hero {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: clamp(2rem, 4vw, 4rem);
    padding: 5.25rem 2rem 2.35rem 2rem;
    align-items: center;
    max-width: 1240px;
    margin: 0 auto;
    text-align: left;
    min-height: auto;
    width: 100%;
}

.landing-hero__content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.8rem;
}

.landing-hero__badge {
    background: rgba(96, 165, 250, 0.08);
    border: 1px solid rgba(96, 165, 250, 0.2);
    border-radius: 99px;
    padding: 0.5rem 1.1rem;
    display: inline-flex;
}

.badge-glow {
    font-family: var(--font-outfit);
    font-size: 0.85rem;
    font-weight: 600;
    color: #60a5fa;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

[data-theme="light"] .badge-glow {
    color: #2563eb;
}

.landing-hero__title {
    font-family: var(--font-outfit);
    font-size: clamp(2.5rem, 5vw, 4.5rem);
    font-weight: 800;
    line-height: 1.16;
    letter-spacing: -0.03em;
    color: var(--text-primary);
    overflow: visible;
}

.text-gradient {
    background: linear-gradient(135deg, #60a5fa 0%, #818cf8 50%, #f472b6 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
    padding-bottom: 0.08em;
    margin-bottom: -0.08em;
    line-height: 1.16;
    overflow: visible;
}

[data-theme="light"] .text-gradient {
    background: linear-gradient(135deg, #1d4ed8 0%, #4f46e5 50%, #db2777 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.landing-hero__subtitle {
    font-size: 1.15rem;
    color: var(--text-secondary);
    line-height: 1.6;
    max-width: 580px;
    font-family: var(--font-inter);
}

.landing-hero__actions {
    display: flex;
    gap: 1.2rem;
    align-items: center;
    flex-wrap: wrap;
}

.landing-hero__visual {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

/* OCR SIMULATOR */
.ocr-simulator-card {
    position: relative;
    width: 100%;
    max-width: 440px;
    background: #ffffff;
    border-radius: 24px;
    box-shadow: 0 30px 70px rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.1);
    overflow: hidden;
}

[data-theme="dark"] .ocr-simulator-card {
    background: linear-gradient(180deg, #131d30 0%, #0b0f19 100%);
    border-color: rgba(255, 255, 255, 0.05);
}

.ocr-simulator-header {
    height: 44px;
    background: rgba(148, 163, 184, 0.08);
    display: flex;
    align-items: center;
    padding: 0 1.2rem;
    gap: 0.4rem;
    border-bottom: 1px solid rgba(148, 163, 184, 0.12);
}

.window-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.window-dot.red { background: #ff5f56; }
.window-dot.yellow { background: #ffbd2e; }
.window-dot.green { background: #27c93f; }

.window-title {
    font-family: var(--font-inter);
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-left: 0.5rem;
    font-weight: 500;
}

.ocr-simulator-body {
    position: relative;
    padding: 2rem;
    background: var(--bg-card);
    min-height: 290px;
    overflow: hidden;
}

.invoice-mock {
    background: #ffffff;
    border: 1px solid rgba(148, 163, 184, 0.15);
    border-radius: 14px;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    pointer-events: none;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.04);
}

[data-theme="dark"] .invoice-mock {
    background: #0b0f19;
    border-color: rgba(255, 255, 255, 0.06);
}

.invoice-mock__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

.invoice-mock__logo-placeholder {
    width: 72px;
    height: 18px;
    background: linear-gradient(90deg, #60a5fa, #3b82f6);
    border-radius: 4px;
}

.invoice-mock__meta {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    align-items: flex-end;
}

.invoice-mock__line {
    width: 60px;
    height: 6px;
    background: rgba(148, 163, 184, 0.2);
    border-radius: 3px;
}

.invoice-mock__line.short {
    width: 40px;
}

.invoice-mock__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.2rem;
}

.invoice-mock__col {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.invoice-mock__label {
    width: 45px;
    height: 6px;
    background: rgba(148, 163, 184, 0.2);
    border-radius: 3px;
}

.invoice-mock__value {
    width: 80px;
    height: 8px;
    background: rgba(148, 163, 184, 0.3);
    border-radius: 4px;
}

.invoice-mock__items {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    border-top: 1px dashed rgba(148, 163, 184, 0.2);
    border-bottom: 1px dashed rgba(148, 163, 184, 0.2);
    padding: 0.8rem 0;
}

.invoice-mock__item-row {
    display: flex;
    justify-content: space-between;
}

.invoice-mock__item-desc {
    width: 90px;
    height: 7px;
    background: rgba(148, 163, 184, 0.2);
    border-radius: 3.5px;
}

.invoice-mock__item-desc.short {
    width: 60px;
}

.invoice-mock__item-price {
    width: 35px;
    height: 7px;
    background: rgba(148, 163, 184, 0.3);
    border-radius: 3.5px;
}

/* SCAN LINE ANIMATION */
.ocr-scan-line {
    position: absolute;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, transparent, #60a5fa, transparent);
    box-shadow: 0 0 15px #3b82f6;
    z-index: 10;
    animation: scanAnimation 4s ease-in-out infinite;
}

@keyframes scanAnimation {
    0%, 100% {
        top: 0px;
        opacity: 0;
    }
    5% {
        opacity: 1;
    }
    45% {
        opacity: 1;
    }
    50% {
        top: 245px;
        opacity: 0;
    }
    55% {
        opacity: 1;
    }
    95% {
        opacity: 1;
    }
    98% {
        top: 0px;
        opacity: 0;
    }
}

.pill-cif { animation-delay: 0.2s; }
.pill-date { animation-delay: 0.8s; }
.pill-total { animation-delay: 1.4s; }

/* SECTIONS CONTENEDOR */
.landing-section {
    padding: 6rem 2rem;
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 100%;
}

.section-title {
    font-family: var(--font-outfit);
    font-size: clamp(2rem, 3.5vw, 2.75rem);
    font-weight: 800;
    color: var(--text-primary);
    margin-bottom: 0.8rem;
    letter-spacing: -0.02em;
}

.section-subtitle {
    font-size: 1.1rem;
    color: var(--text-secondary);
    max-width: 640px;
    margin-bottom: 4rem;
    line-height: 1.5;
}

/* DUAL COLS */
.features-dual-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    width: 100%;
    text-align: left;
}

@media (max-width: 820px) {
    .features-dual-container {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }
}

.profile-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 24px;
    padding: 3rem;
    display: flex;
    flex-direction: column;
    gap: 2rem;
    box-shadow: var(--shadow-premium);
    transition: var(--transition-smooth);
    position: relative;
    overflow: hidden;
}

.profile-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(96, 165, 250, 0.03), transparent 60%);
    opacity: 0.5;
    pointer-events: none;
}

.profile-card:hover {
    transform: translateY(-4px);
    border-color: var(--border-glow);
    box-shadow: 0 20px 40px rgba(0,0,0,0.22);
}

.profile-card__header {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.profile-card__icon {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 1.35rem;
    margin-bottom: 0.5rem;
}

.profile-users .profile-card__icon {
    background: linear-gradient(135deg, #60a5fa 0%, #2563eb 100%);
    box-shadow: 0 8px 20px rgba(37, 99, 235, 0.2);
}

.profile-managers .profile-card__icon {
    background: linear-gradient(135deg, #818cf8 0%, #4f46e5 100%);
    box-shadow: 0 8px 20px rgba(79, 70, 229, 0.2);
}

.profile-card__header h3 {
    font-family: var(--font-outfit);
    font-size: 1.6rem;
    font-weight: 750;
    color: var(--text-primary);
}

.profile-card__header p {
    font-size: 0.95rem;
    color: var(--text-secondary);
}

.profile-card__list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.profile-card__list li {
    display: flex;
    gap: 0.85rem;
    align-items: flex-start;
}

.profile-card__list li i {
    color: #10b981;
    font-size: 1.1rem;
    margin-top: 0.15rem;
}

.profile-card__list li div {
    font-size: 0.95rem;
    color: var(--text-secondary);
    line-height: 1.55;
}

.profile-card__list li div strong {
    color: var(--text-primary);
}

/* STATS */
.stats-container {
    display: flex;
    justify-content: space-around;
    width: 100%;
    max-width: 960px;
    margin: 0 auto;
    gap: 2.5rem;
    flex-wrap: wrap;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 28px;
    padding: 3rem;
    box-shadow: var(--shadow-premium);
}

.stat-item {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    align-items: center;
}

.stat-num {
    font-family: var(--font-outfit);
    font-size: 3.5rem;
    font-weight: 800;
    background: linear-gradient(135deg, #60a5fa 0%, #818cf8 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

[data-theme="light"] .stat-num {
    background: linear-gradient(135deg, #2563eb 0%, #4f46e5 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.stat-lbl {
    font-size: 0.95rem;
    color: var(--text-secondary);
    font-weight: 550;
}

/* STEPS */
.steps-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 2.5rem;
    width: 100%;
}

@media (max-width: 768px) {
    .steps-grid {
        grid-template-columns: 1fr;
    }
}

.step-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    padding: 2.5rem;
    text-align: left;
    position: relative;
    transition: var(--transition-smooth);
    overflow: hidden;
}

.step-card:hover {
    transform: translateY(-4px);
    border-color: var(--border-glow);
    box-shadow: 0 15px 35px rgba(0,0,0,0.18);
}

.step-num {
    font-family: var(--font-outfit);
    font-size: 4rem;
    font-weight: 800;
    opacity: 0.06;
    position: absolute;
    right: 1.2rem;
    top: -0.5rem;
    color: var(--text-primary);
}

.step-card h4 {
    font-family: var(--font-outfit);
    font-size: 1.3rem;
    font-weight: 750;
    color: var(--text-primary);
    margin-bottom: 0.75rem;
}

.step-card p {
    font-size: 0.92rem;
    color: var(--text-secondary);
    line-height: 1.55;
}

/* CTA CARD */
.cta-glow-card {
    width: 100%;
    max-width: 960px;
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.08) 0%, rgba(79, 70, 229, 0.08) 100%);
    border: 1px solid rgba(96, 165, 250, 0.25);
    border-radius: 28px;
    padding: 4.5rem 2rem;
    position: relative;
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(37, 99, 235, 0.08);
    display: flex;
    justify-content: center;
    text-align: center;
}

.cta-glow-card::before {
    content: "";
    position: absolute;
    width: 350px;
    height: 350px;
    background: radial-gradient(circle, rgba(96, 165, 250, 0.15) 0%, transparent 70%);
    top: -175px;
    left: -175px;
    pointer-events: none;
}

.cta-glow-card__content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
    max-width: 620px;
    z-index: 2;
}

.cta-glow-card h3 {
    font-family: var(--font-outfit);
    font-size: 2.25rem;
    font-weight: 800;
    color: var(--text-primary);
}

.cta-glow-card p {
    font-size: 1.1rem;
    color: var(--text-secondary);
    line-height: 1.6;
}

/* FOOTER */
.landing-footer {
    box-sizing: border-box;
    width: min(1200px, calc(100% - 2rem));
    max-width: 1200px;
    margin: 6rem auto 1.5rem auto;
    padding: 1.45rem 1.65rem;
    border: 1px solid rgba(148, 163, 184, 0.24);
    border-radius: 30px;
    background:
        radial-gradient(circle at 8% 10%, rgba(16, 185, 129, 0.18), transparent 28%),
        radial-gradient(circle at 92% 0%, rgba(56, 189, 248, 0.16), transparent 26%),
        linear-gradient(135deg, rgba(255, 255, 255, 0.72), rgba(241, 245, 249, 0.38));
    box-shadow:
        0 -18px 50px rgba(15, 23, 42, 0.06),
        inset 0 1px 0 rgba(255, 255, 255, 0.68);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1.5rem;
    position: relative;
    overflow: hidden;
}

.landing-footer::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, transparent, rgba(15, 23, 42, 0.06), transparent) top / 100% 1px no-repeat,
        repeating-linear-gradient(135deg, rgba(15, 23, 42, 0.035) 0 1px, transparent 1px 12px);
    opacity: 0.42;
    pointer-events: none;
}

.footer-brand {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

#footer-logo-img {
    display: block;
    height: 36px;
    width: auto;
}

.footer-brand__name {
    font-family: var(--font-outfit);
    font-weight: 900;
    font-size: 1.6rem;
    background: var(--gradient-text);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    letter-spacing: 0.04em;
    line-height: 1;
}

.footer-copy {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 0.22rem;
    max-width: 32rem;
    margin: 0;
    text-align: right;
}

.footer-copy strong {
    color: var(--text-primary);
    font-family: var(--font-outfit);
    font-size: 0.95rem;
    font-weight: 800;
    letter-spacing: -0.01em;
}

.footer-copy span {
    color: var(--text-muted);
    font-size: 0.82rem;
}

[data-theme="dark"] .landing-footer {
    border-color: rgba(255, 255, 255, 0.08);
    background:
        radial-gradient(circle at 8% 10%, rgba(16, 185, 129, 0.16), transparent 30%),
        radial-gradient(circle at 92% 0%, rgba(56, 189, 248, 0.12), transparent 28%),
        linear-gradient(135deg, rgba(15, 23, 42, 0.78), rgba(15, 23, 42, 0.46));
    box-shadow:
        0 -18px 50px rgba(0, 0, 0, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

@media (max-width: 640px) {
    .landing-footer {
        width: min(100% - 1rem, 1200px);
        flex-direction: column;
        align-items: flex-start;
        text-align: left;
        padding: 1.35rem;
        border-radius: 24px;
        margin: 4rem auto 1rem auto;
    }

    .footer-copy {
        text-align: left;
    }
}

/* ANIMACIONES */
.animate-fade-in-up {
    animation: fadeInUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* INVOICE CREATION SHOWCASE - REDESIGNED */
.invoice-creation-showcase {
    max-width: 1240px;
    margin: 0 auto;
    padding: 3rem 2rem 5rem;
    display: flex;
    flex-direction: column;
    gap: 4rem;
    width: 100%;
}

.invoice-creation-showcase__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3.5rem;
    align-items: center;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--border-color);
    border-radius: 24px;
    padding: 3.5rem;
    backdrop-filter: blur(10px);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.05);
    transition: var(--transition-smooth);
}

[data-theme="light"] .invoice-creation-showcase__grid {
    background: rgba(255, 255, 255, 0.7);
    box-shadow: 0 15px 45px rgba(15, 23, 42, 0.05);
}

@media (min-width: 901px) {
    .invoice-creation-showcase__grid {
        grid-template-columns: 1.15fr 0.85fr;
    }
}

.invoice-creation-showcase__content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    gap: 1.25rem;
    width: 100%;
}

.invoice-creation-showcase__title {
    margin: 0;
    font-family: var(--font-outfit);
    font-size: clamp(2rem, 3.2vw, 2.75rem);
    line-height: 1.15;
    color: var(--text-primary);
    letter-spacing: -0.02em;
    font-weight: 800;
}

.invoice-creation-showcase__text {
    margin: 0;
    color: var(--text-secondary);
    font-size: 1.05rem;
    line-height: 1.75;
    max-width: 100%;
}

.invoice-creation-showcase__text--support {
    color: #475569;
}

[data-theme="dark"] .invoice-creation-showcase__text--support {
    color: #cbd5e1;
}

.invoice-creation-showcase__flow {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 1.5rem;
    margin: 2.5rem auto;
    width: 100%;
    max-width: 650px;
    padding: 1.5rem;
    background: rgba(255, 255, 255, 0.01);
    border: 1px solid var(--border-color);
    border-radius: 24px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.02);
}

[data-theme="light"] .invoice-creation-showcase__flow {
    background: rgba(15, 23, 42, 0.01);
}

.flow-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    flex: 1;
    min-width: 120px;
    transition: var(--transition-smooth);
}

.flow-step:hover {
    transform: translateY(-4px);
}

.flow-step__graphic {
    width: 76px;
    height: 76px;
    border-radius: 20px;
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.85rem;
    transition: var(--transition-smooth);
    box-shadow: var(--shadow-sm);
    position: relative;
    overflow: visible;
}

.flow-step:hover .flow-step__graphic {
    border-color: var(--border-glow);
    box-shadow: 0 8px 20px rgba(59, 130, 246, 0.15);
    background: var(--bg-card-hover);
}

.flow-svg {
    width: 100%;
    height: 100%;
    display: block;
}

.flow-step__info {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
}

.flow-step__num {
    font-family: var(--font-outfit);
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    color: var(--color-emerald);
    opacity: 0.85;
}

.flow-step__title {
    margin: 0;
    font-family: var(--font-outfit);
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--text-primary);
}

.flow-step__desc {
    margin: 0;
    font-size: 0.75rem;
    color: var(--text-muted);
    line-height: 1.3;
    max-width: 130px;
}

/* Connectors */
.flow-connector {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 76px;
    color: var(--text-muted);
    opacity: 0.5;
    position: relative;
}

.flow-connector i {
    font-size: 0.8rem;
    z-index: 1;
}

/* Micro-animations inside SVGs */
.flow-step:hover .svg-pencil {
    animation: draw-wiggle 0.6s ease-in-out infinite alternate;
}

@keyframes draw-wiggle {
    0% { transform: translate(0, 0); }
    100% { transform: translate(-3px, 3px); }
}

.flow-step:hover .svg-plane {
    animation: plane-hover 1.2s ease-in-out infinite alternate;
}

@keyframes plane-hover {
    0% { transform: translate(0, 0); }
    100% { transform: translate(4px, -4px); }
}

@media (max-width: 600px) {
    .invoice-creation-showcase__flow {
        flex-direction: column;
        align-items: center;
        gap: 2rem;
        padding: 1.5rem 1rem;
    }
    .flow-connector {
        height: auto;
        transform: rotate(90deg);
        margin: -0.5rem 0;
    }
    .flow-step {
        width: 100%;
    }
}

.invoice-creation-showcase__list {
    list-style: none;
    padding: 0;
    margin: 1rem 0 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    width: 100%;
}

.invoice-creation-showcase__list li {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    font-size: 0.95rem;
    color: var(--text-secondary);
    line-height: 1.45;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    padding: 1rem 1.25rem;
    text-align: left !important;
    box-shadow: var(--shadow-sm);
    transition: var(--transition-smooth);
}

.invoice-creation-showcase__list li:hover {
    background: var(--bg-card-hover);
    border-color: var(--border-glow);
}

[data-theme="dark"] .invoice-creation-showcase__list li {
    background: rgba(15, 23, 42, 0.35);
}

.invoice-creation-showcase__list i {
    color: var(--color-emerald);
    margin-top: 0.2rem;
    font-size: 0.9rem;
}

/* Image Column Centered */
.invoice-creation-showcase__media-container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
}

.invoice-creation-showcase__media {
    position: relative;
    overflow: hidden;
    border-radius: 28px;
    border: 1px solid rgba(148, 163, 184, 0.18);
    background: rgba(255, 255, 255, 0.5);
    box-shadow: 0 20px 50px rgba(15, 23, 42, 0.12);
    max-width: 500px;
    width: 100%;
    aspect-ratio: 1 / 1;
    margin: 0 auto;
    transition: var(--transition-smooth);
}

.invoice-creation-showcase__media:hover {
    transform: translateY(-5px);
    box-shadow: 0 25px 60px rgba(15, 23, 42, 0.18);
}

.invoice-creation-showcase__media::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.08), transparent 50%, rgba(79, 70, 229, 0.06));
    pointer-events: none;
}

.invoice-creation-showcase__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

[data-theme="dark"] .invoice-creation-showcase__media {
    background: rgba(15, 23, 42, 0.7);
    border-color: rgba(226, 232, 240, 0.1);
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.3);
}

/* Marketing Section */
.invoice-creation-marketing {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    width: 100%;
    margin-top: 1rem;
    border-top: 1px solid var(--border-color);
    padding-top: 3rem;
}

@media (min-width: 641px) {
    .invoice-creation-marketing {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1025px) {
    .invoice-creation-marketing {
        grid-template-columns: repeat(4, 1fr);
    }
}

.marketing-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 18px;
    padding: 1.75rem;
    text-align: left;
    transition: var(--transition-smooth);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.02);
}

.marketing-card:hover {
    transform: translateY(-4px);
    border-color: var(--border-glow);
    background: var(--bg-card-hover);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

.marketing-card__icon {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: rgba(96, 165, 250, 0.08);
    border: 1px solid rgba(96, 165, 250, 0.15);
    color: var(--color-emerald);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    margin-bottom: 1.25rem;
}

.marketing-card h4 {
    font-family: var(--font-outfit);
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

.marketing-card p {
    font-size: 0.88rem;
    color: var(--text-secondary);
    line-height: 1.5;
}

@media (max-width: 900px) {
    .invoice-creation-showcase {
        padding: 2rem 1.25rem 4rem;
        gap: 3rem;
    }
    .invoice-creation-showcase__grid {
        padding: 1.75rem;
        gap: 2.5rem;
        border-radius: 20px;
    }
}

/* HERO DASHBOARD SHOWCASE (3D Perspective Card) */
.hero-dashboard-frame {
    position: relative;
    width: 100%;
    max-width: 580px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.45), 
                inset 0 1px 0 rgba(255, 255, 255, 0.1);
    padding: 0.5rem;
    perspective: 1000px;
    transition: var(--transition-smooth);
    overflow: hidden;
}

[data-theme="light"] .hero-dashboard-frame {
    background: rgba(15, 23, 42, 0.02);
    border-color: rgba(15, 23, 42, 0.06);
    box-shadow: 0 30px 60px rgba(15, 23, 42, 0.1),
                inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

.hero-dashboard-img {
    width: 100%;
    height: auto;
    border-radius: 14px;
    display: block;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
    transition: var(--transition-smooth);
}

.hero-dashboard-glow {
    position: absolute;
    inset: 0;
    border-radius: 20px;
    background: radial-gradient(circle at 50% 50%, rgba(96, 165, 250, 0.15) 0%, transparent 60%);
    pointer-events: none;
    z-index: 1;
}

[data-theme="light"] .hero-dashboard-glow {
    background: radial-gradient(circle at 50% 50%, rgba(37, 99, 235, 0.06) 0%, transparent 60%);
}

/* HERO DISPOSITIVOS - LÍNEA DE ESCANEO */
.hero-scan-line {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, transparent, var(--color-emerald), transparent);
    box-shadow: 0 0 12px var(--color-emerald), 0 0 4px var(--color-emerald);
    animation: heroScanAnimation 4s infinite ease-in-out;
    pointer-events: none;
    z-index: 2;
}

@keyframes heroScanAnimation {
    0% { top: 0%; opacity: 0.9; }
    50% { top: 98%; opacity: 0.9; }
    100% { top: 0%; opacity: 0.9; }
}

/* ADDITIONAL ORBS TO PREVENT EMPTY SECTIONS IN LONG SCROLLS */
.orb-4 {
    top: 55%;
    left: -15%;
    width: 55vw;
    height: 55vw;
    background: radial-gradient(circle, rgba(129, 140, 248, 0.12) 0%, transparent 70%);
    animation-delay: -3s;
    animation-duration: 28s;
}

[data-theme="light"] .orb-4 {
    background: radial-gradient(circle, rgba(79, 70, 229, 0.05) 0%, transparent 70%);
}

.orb-5 {
    top: 75%;
    right: -10%;
    width: 50vw;
    height: 50vw;
    background: radial-gradient(circle, rgba(244, 114, 182, 0.1) 0%, transparent 70%);
    animation-delay: -7s;
    animation-duration: 24s;
}

[data-theme="light"] .orb-5 {
    background: radial-gradient(circle, rgba(219, 39, 119, 0.04) 0%, transparent 70%);
}

.orb-6 {
    top: 92%;
    left: 15%;
    width: 45vw;
    height: 45vw;
    background: radial-gradient(circle, rgba(96, 165, 250, 0.12) 0%, transparent 70%);
    animation-delay: -12s;
    animation-duration: 22s;
}

[data-theme="light"] .orb-6 {
    background: radial-gradient(circle, rgba(37, 99, 235, 0.05) 0%, transparent 70%);
}

/* WAVY SVG SECTION DIVIDER */
.section-divider-wavy {
    display: none;
}
.section-divider-wavy svg {
    position: relative;
    display: block;
    width: calc(100% + 1.3px);
    height: 70px;
}
.section-divider-wavy .shape-fill {
    fill: #0b0f19;
}
[data-theme="light"] .section-divider-wavy .shape-fill {
    fill: #f0f4f8;
}

/* BADGES AND CATEGORY TAGS */
.features-badge-pill {
    display: inline-flex;
    align-items: center;
    padding: 0.5rem 1.25rem;
    background: rgba(96, 165, 250, 0.08);
    border: 1px solid rgba(96, 165, 250, 0.18);
    border-radius: 9999px;
    font-family: var(--font-outfit);
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-emerald);
    margin-bottom: 1.5rem;
    box-shadow: 0 4px 12px rgba(96, 165, 250, 0.03);
}
.feature-category-tag {
    font-family: var(--font-outfit);
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-emerald);
    margin-bottom: 0.75rem;
}

/* STAGGERED ASYMMETRIC OFFSETS */
@media (min-width: 1025px) {
    .card-offset-up {
        transform: translateY(-25px);
    }
    .card-offset-down {
        transform: translateY(25px);
    }
    .features-detailed-grid {
        padding-top: 3rem;
        padding-bottom: 3rem;
        gap: 6rem;
    }
}

/* PHOTOGRAPHIC ASPECT FRAMES */
.photo-aspect {
    aspect-ratio: 16 / 10;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.photo-aspect img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* VALUE COMPARISON SECTION */
.comparison-section {
    width: 100%;
    max-width: 1200px;
    margin: 4rem auto;
    padding: 2rem;
}
.comparison-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 28px;
    padding: 4.5rem 3rem;
    backdrop-filter: var(--blur-glass);
    box-shadow: var(--shadow-premium);
    width: 100%;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.comparison-badge-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: rgba(129, 140, 248, 0.1);
    border: 1px solid rgba(129, 140, 248, 0.2);
    border-radius: 9999px;
    font-family: var(--font-outfit);
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-violet);
    margin-bottom: 1.5rem;
}
.comparison-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    width: 100%;
    margin-top: 2.5rem;
    text-align: left;
}
@media (max-width: 820px) {
    .comparison-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    .comparison-card {
        padding: 3rem 1.5rem;
    }
}
.comparison-col {
    background: rgba(255, 255, 255, 0.015);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    padding: 2.5rem;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    transition: var(--transition-smooth);
}

.comparison-velora {
    background: linear-gradient(180deg, rgba(96, 165, 250, 0.03) 0%, rgba(129, 140, 248, 0.03) 100%);
    border: 1px solid rgba(96, 165, 250, 0.25);
    box-shadow: 0 15px 35px rgba(59, 130, 246, 0.05);
}

.comparison-col h4 {
    font-family: var(--font-outfit);
    font-size: 1.35rem;
    font-weight: 750;
    color: var(--text-primary);
}
.comparison-col ul {
    list-style: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}
.comparison-col ul li {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    font-size: 0.95rem;
    color: var(--text-secondary);
    line-height: 1.55;
}
.comparison-traditional ul li i {
    color: var(--color-error);
    font-size: 1.1rem;
    margin-top: 0.15rem;
}
.comparison-velora ul li i {
    color: #10b981;
    font-size: 1.1rem;
    margin-top: 0.15rem;
}
.velora-recommended-badge {
    position: absolute;
    top: -12px;
    right: 25px;
    background: var(--gradient-primary);
    color: #ffffff;
    padding: 0.35rem 0.85rem;
    border-radius: 9999px;
    font-family: var(--font-outfit);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

/* RESPONSIVE DESIGN ADJUSTMENTS FOR TABLETS AND MOBILES */
@media (max-width: 768px) {
    /* Header optimization */
    .global-header {
        padding: 0.75rem 1rem !important;
    }
    #btn-nav-register {
        display: none !important; /* Hide register button in header on mobile/tablet */
    }
    .header-logo span {
        font-size: 1.45rem !important;
    }
    #header-logo-img {
        height: 28px !important;
    }
    .header-actions {
        gap: 0.5rem !important;
    }

    /* Hero section scaling */
    .landing-hero {
        padding: 5.5rem 1rem 2rem 1rem !important;
        gap: 2.5rem !important;
        grid-template-columns: 1fr !important;
        text-align: center !important;
    }
    .landing-hero__content {
        align-items: center !important;
        text-align: center !important;
    }
    .landing-hero__title {
        font-size: clamp(1.85rem, 6.5vw, 2.75rem) !important;
        line-height: 1.2 !important;
    }
    .landing-hero__subtitle {
        font-size: 1rem !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
    .landing-hero__actions {
        width: 100% !important;
        justify-content: center !important;
        gap: 0.75rem !important;
    }
    .landing-hero__actions .btn-premium {
        width: 100% !important;
        max-width: 300px;
    }

    /* Features cards */
    .features-grid-section {
        padding: 4rem 1rem !important;
    }
    .feature-detail-card {
        padding: 1.75rem !important;
        gap: 1.5rem !important;
        border-radius: 20px !important;
    }
    .feature-detail-card__copy h3 {
        font-size: 1.45rem !important;
    }
    .feature-detail-card__copy p {
        font-size: 0.92rem !important;
        margin-bottom: 1.25rem !important;
    }
    .features-badge-pill {
        padding: 0.4rem 1rem !important;
        font-size: 0.8rem !important;
    }

    /* Value Comparison section */
    .comparison-section {
        padding: 1rem !important;
        margin: 2rem auto !important;
    }
    .comparison-card {
        padding: 2.5rem 1.25rem !important;
        border-radius: 24px !important;
    }
    .comparison-col {
        padding: 1.5rem !important;
        gap: 1.25rem !important;
    }
    .comparison-col h4 {
        font-size: 1.2rem !important;
    }
    .comparison-col ul li {
        font-size: 0.88rem !important;
    }
    .velora-recommended-badge {
        right: 15px !important;
        padding: 0.25rem 0.75rem !important;
        font-size: 0.7rem !important;
    }
}

@media (max-width: 480px) {
    .landing-hero__title {
        font-size: 1.75rem !important;
    }
    .section-title {
        font-size: 1.6rem !important;
    }
    .section-subtitle {
        font-size: 0.95rem !important;
        margin-bottom: 2.5rem !important;
    }
    .landing-footer {
        padding: 1.35rem !important;
        gap: 1rem !important;
    }
    .footer-copy span {
        font-size: 0.76rem !important;
    }
}

/* --- BOTONES DE ACCION DE TABLA PERSONALIZADOS --- */
.custom-table td:last-child {
    white-space: nowrap;
}

.custom-table .btn-open-invoice-sheet,
.custom-table .btn-view-invoice,
.custom-table .btn-edit-invoice,
.custom-table .btn-delete-invoice,
.custom-table .btn-discard-manual-invoice {
    min-width: 78px !important;
    height: 30px !important;
    padding: 0.34rem 0.82rem !important;
    border-radius: 9999px !important;
    background: #ffffff !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04) !important;
    font-family: var(--font-outfit) !important;
    font-size: 0.74rem !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
    transform: none !important;
    transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease !important;
}

.custom-table .btn-open-invoice-sheet i,
.custom-table .btn-view-invoice i,
.custom-table .btn-edit-invoice i,
.custom-table .btn-delete-invoice i,
.custom-table .btn-discard-manual-invoice i {
    font-size: 0.76rem !important;
}

.custom-table .btn-open-invoice-sheet {
    border: 1px solid rgba(100, 116, 139, 0.36) !important;
    color: #475569 !important;
}

.custom-table .btn-open-invoice-sheet i {
    color: #64748b !important;
}

.custom-table .btn-view-invoice {
    border: 1px solid rgba(16, 185, 129, 0.46) !important;
    color: #059669 !important;
}

.custom-table .btn-view-invoice i {
    color: #10b981 !important;
}

.custom-table .btn-edit-invoice {
    border: 1px solid rgba(59, 130, 246, 0.48) !important;
    color: #2563eb !important;
}

.custom-table .btn-edit-invoice i {
    color: #3b82f6 !important;
}

.custom-table .btn-delete-invoice,
.custom-table .btn-discard-manual-invoice {
    border: 1px solid rgba(248, 113, 113, 0.56) !important;
    color: #ef4444 !important;
}

.custom-table .btn-delete-invoice i,
.custom-table .btn-discard-manual-invoice i {
    color: #ef4444 !important;
}

.custom-table .btn-open-invoice-sheet:hover:not(:disabled) {
    background: #f8fafc !important;
    border-color: rgba(71, 85, 105, 0.54) !important;
    color: #334155 !important;
    box-shadow: 0 4px 10px rgba(71, 85, 105, 0.09) !important;
}

.custom-table .btn-view-invoice:hover:not(:disabled) {
    background: #f0fdf4 !important;
    border-color: rgba(5, 150, 105, 0.62) !important;
    color: #047857 !important;
    box-shadow: 0 4px 10px rgba(16, 185, 129, 0.12) !important;
}

.custom-table .btn-edit-invoice:hover:not(:disabled) {
    background: #eff6ff !important;
    border-color: rgba(37, 99, 235, 0.62) !important;
    color: #1d4ed8 !important;
    box-shadow: 0 4px 10px rgba(59, 130, 246, 0.12) !important;
}

.custom-table .btn-delete-invoice:hover:not(:disabled),
.custom-table .btn-discard-manual-invoice:hover:not(:disabled) {
    background: #fff1f2 !important;
    border-color: rgba(239, 68, 68, 0.64) !important;
    color: #dc2626 !important;
    box-shadow: 0 4px 10px rgba(239, 68, 68, 0.12) !important;
}

.custom-table .btn-open-invoice-sheet:hover:not(:disabled),
.custom-table .btn-view-invoice:hover:not(:disabled),
.custom-table .btn-edit-invoice:hover:not(:disabled),
.custom-table .btn-delete-invoice:hover:not(:disabled),
.custom-table .btn-discard-manual-invoice:hover:not(:disabled) {
    transform: translateY(-1px) !important;
}

[data-theme="dark"] .custom-table .btn-open-invoice-sheet,
[data-theme="dark"] .custom-table .btn-view-invoice,
[data-theme="dark"] .custom-table .btn-edit-invoice,
[data-theme="dark"] .custom-table .btn-delete-invoice,
[data-theme="dark"] .custom-table .btn-discard-manual-invoice {
    background: rgba(15, 23, 42, 0.82) !important;
    box-shadow: none !important;
}

[data-theme="dark"] .custom-table .btn-open-invoice-sheet {
    border-color: rgba(148, 163, 184, 0.42) !important;
    color: #cbd5e1 !important;
}

[data-theme="dark"] .custom-table .btn-view-invoice {
    border-color: rgba(52, 211, 153, 0.52) !important;
    color: #6ee7b7 !important;
}

[data-theme="dark"] .custom-table .btn-edit-invoice {
    border-color: rgba(96, 165, 250, 0.58) !important;
    color: #93c5fd !important;
}

[data-theme="dark"] .custom-table .btn-delete-invoice,
[data-theme="dark"] .custom-table .btn-discard-manual-invoice {
    border-color: rgba(248, 113, 113, 0.6) !important;
    color: #fca5a5 !important;
}

.custom-table .btn-open-invoice-sheet:disabled,
.custom-table .btn-view-invoice:disabled,
.custom-table .btn-edit-invoice:disabled,
.custom-table .btn-delete-invoice:disabled,
.custom-table .btn-discard-manual-invoice:disabled {
    background: rgba(148, 163, 184, 0.08) !important;
    color: #94a3b8 !important;
    border-color: rgba(148, 163, 184, 0.24) !important;
    cursor: not-allowed !important;
    opacity: 0.58 !important;
    pointer-events: none !important;
    box-shadow: none !important;
    transform: none !important;
}
/* --- ALINEACIÓN DE TEXTOS CON VIÑETAS --- */
.invoice-creation-showcase__list,
.invoice-creation-showcase__list li,
.feature-detail-card__bullet-list,
.feature-detail-card__bullet-list li,
.comparison-col ul,
.comparison-col ul li {
    text-align: left !important;
}

/* --- POPUP DE MARKETING PREMIUM (FROSTED GLASS) --- */
.marketing-popup {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(1rem, 3vw, 2rem);
    z-index: 2100;
    opacity: 0;
    overflow-y: auto;
    transition: opacity 0.3s ease-in-out;
    pointer-events: none;
}

.marketing-popup.active {
    opacity: 1;
    pointer-events: auto;
}

.marketing-popup__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.25);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    transition: all 0.3s ease;
}

.marketing-popup__panel {
    position: relative;
    z-index: 10;
    width: 90%;
    max-width: 520px;
    max-height: calc(100dvh - 2rem);
    overflow: hidden;
    background:
        radial-gradient(circle at 18% 0%, rgba(16, 185, 129, 0.16), transparent 34%),
        radial-gradient(circle at 92% 18%, rgba(14, 165, 233, 0.14), transparent 32%),
        linear-gradient(145deg, rgba(255, 255, 255, 0.46), rgba(255, 255, 255, 0.24));
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 28px;
    padding: 3rem 2.5rem 3.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    box-shadow: 0 30px 60px rgba(15, 23, 42, 0.08), 
                inset 0 1px 0 rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    transform: scale(0.92) translateY(20px);
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s ease;
    opacity: 0;
}

.marketing-popup__panel::before,
.marketing-popup__panel::after {
    content: "";
    position: absolute;
    pointer-events: none;
}

.marketing-popup__panel::before {
    top: -4.5rem;
    right: -3.5rem;
    width: 13rem;
    height: 13rem;
    background:
        linear-gradient(135deg, transparent 46%, rgba(255, 255, 255, 0.48) 47% 53%, transparent 54%),
        radial-gradient(circle, rgba(16, 185, 129, 0.18), transparent 62%);
    transform: rotate(12deg);
}

.marketing-popup__panel::after {
    left: 2rem;
    right: 2rem;
    top: 1.15rem;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(15, 23, 42, 0.18), transparent);
}

.marketing-popup.active .marketing-popup__panel {
    transform: scale(1) translateY(0);
    opacity: 1;
}

[data-theme="dark"] .marketing-popup__panel {
    background:
        radial-gradient(circle at 18% 0%, rgba(16, 185, 129, 0.18), transparent 36%),
        radial-gradient(circle at 92% 18%, rgba(56, 189, 248, 0.12), transparent 34%),
        linear-gradient(145deg, rgba(11, 16, 28, 0.68), rgba(11, 16, 28, 0.36));
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow: 0 35px 70px rgba(0, 0, 0, 0.35), 
                inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.marketing-popup__brand {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 1.45rem;
    color: var(--text-primary);
    font-family: var(--font-outfit);
    font-size: clamp(1.55rem, 3.4vw, 1.85rem);
    font-weight: 900;
    letter-spacing: 0.04em;
    line-height: 1;
}

.marketing-popup__brand span {
    background: var(--gradient-text);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
}

.marketing-popup__badge {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    isolation: isolate;
    background:
        linear-gradient(135deg, rgba(236, 253, 245, 0.94), rgba(224, 242, 254, 0.78)),
        repeating-linear-gradient(-45deg, rgba(15, 23, 42, 0.08) 0 1px, transparent 1px 8px);
    color: #0f3f46;
    font-family: var(--font-outfit);
    font-size: 0.72rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    padding: 0.62rem 1.45rem;
    max-width: 100%;
    line-height: 1.15;
    margin-bottom: 1.65rem;
    border: 1px solid rgba(15, 118, 110, 0.2);
    clip-path: polygon(9% 0, 100% 0, 91% 100%, 0 100%);
    box-shadow:
        0 18px 34px rgba(8, 47, 73, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.78);
}

.marketing-popup__badge::before,
.marketing-popup__badge::after {
    content: "";
    position: absolute;
    top: 50%;
    width: 0.48rem;
    height: 2.2rem;
    background: rgba(15, 118, 110, 0.32);
    transform: translateY(-50%) skewX(-18deg);
    z-index: -1;
}

.marketing-popup__badge::before {
    left: -0.25rem;
}

.marketing-popup__badge::after {
    right: -0.25rem;
}

.marketing-popup__badge i {
    color: #0f766e;
    font-size: 0.82rem;
}

.marketing-popup__title {
    margin: 0 0 1.25rem 0;
    font-family: var(--font-outfit);
    font-size: clamp(1.55rem, 4.8vw, 1.95rem);
    font-weight: 900;
    color: var(--text-primary);
    line-height: 1.15;
    letter-spacing: -0.015em;
}

.marketing-popup__content {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 2.2rem;
}

.marketing-popup__text {
    margin: 0;
    font-size: clamp(0.96rem, 2.5vw, 1.05rem);
    line-height: 1.6;
    color: var(--text-primary);
    font-weight: 600;
}

.marketing-popup__subtext {
    margin: 0;
    font-size: clamp(0.84rem, 2.3vw, 0.92rem);
    line-height: 1.5;
    color: var(--text-secondary);
    font-weight: 400;
}

.marketing-popup__actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.85rem;
    width: 100%;
}

.marketing-popup__cta-btn {
    width: 100%;
    max-width: 320px;
    justify-content: center;
    padding: 0.85rem 1.5rem;
    font-size: 1rem;
    font-weight: 700;
    box-shadow: 0 8px 20px rgba(59, 130, 246, 0.25);
}

.marketing-popup__close-btn {
    width: 100%;
    max-width: 320px;
    justify-content: center;
    padding: 0.85rem 1.5rem;
    font-size: 1rem;
    font-weight: 600;
    background: transparent;
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    transition: var(--transition-smooth);
}

.marketing-popup__close-btn:hover {
    background: rgba(148, 163, 184, 0.08);
    border-color: var(--text-muted);
}

[data-theme="dark"] .marketing-popup__close-btn:hover {
    background: rgba(255, 255, 255, 0.03);
}

@media (max-width: 820px) {
    .marketing-popup {
        padding: max(1rem, env(safe-area-inset-top)) 1rem max(1rem, env(safe-area-inset-bottom));
    }

    .marketing-popup__panel {
        width: min(100%, 34rem);
        padding: 2.65rem 2rem 2.85rem;
        border-radius: 26px;
    }

    .marketing-popup__content {
        margin-bottom: 1.9rem;
    }

    .marketing-popup__cta-btn,
    .marketing-popup__close-btn {
        max-width: 100%;
        min-height: 48px;
    }
}

@media (max-width: 560px) {
    .marketing-popup {
        align-items: flex-start;
        padding: max(0.75rem, env(safe-area-inset-top)) 0.75rem max(0.75rem, env(safe-area-inset-bottom));
    }

    .marketing-popup__panel {
        width: 100%;
        max-height: calc(100dvh - 1.5rem);
        overflow-y: auto;
        padding: 2.1rem 1.15rem 1.35rem;
        border-radius: 24px;
        box-shadow: 0 22px 48px rgba(15, 23, 42, 0.14),
                    inset 0 1px 0 rgba(255, 255, 255, 0.5);
    }

    .marketing-popup__panel::before {
        top: -5.5rem;
        right: -6rem;
        width: 12rem;
        height: 12rem;
        opacity: 0.65;
    }

    .marketing-popup__panel::after {
        left: 1.2rem;
        right: 1.2rem;
    }

    .marketing-popup__brand {
        margin-bottom: 1.15rem;
    }

    .marketing-popup__badge {
        width: min(100%, 18rem);
        padding: 0.62rem 1rem;
        margin-bottom: 1.3rem;
        font-size: 0.66rem;
        letter-spacing: 0.08em;
        clip-path: polygon(7% 0, 100% 0, 93% 100%, 0 100%);
    }

    .marketing-popup__title {
        max-width: 15rem;
        margin-bottom: 1rem;
    }

    .marketing-popup__content {
        gap: 0.72rem;
        margin-bottom: 1.35rem;
    }

    .marketing-popup__text {
        line-height: 1.48;
    }

    .marketing-popup__subtext {
        line-height: 1.42;
    }

    .marketing-popup__actions {
        gap: 0.65rem;
    }

    .marketing-popup__cta-btn,
    .marketing-popup__close-btn {
        padding: 0.78rem 1rem;
        min-height: 48px;
        font-size: 0.94rem;
    }
}

@media (max-width: 380px), (max-height: 640px) {
    .marketing-popup__panel {
        padding-top: 1.55rem;
        padding-bottom: 1rem;
    }

    .marketing-popup__brand {
        margin-bottom: 0.9rem;
    }

    .marketing-popup__badge {
        margin-bottom: 1rem;
    }

    .marketing-popup__title {
        margin-bottom: 0.8rem;
    }

    .marketing-popup__content {
        margin-bottom: 1rem;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   UPLOAD BACKGROUND PROGRESS — DISEÑO AAA PREMIUM
   Compact · Glassmorphism oscuro · Orb giratorio · Barra con glow neon
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Keyframes ──────────────────────────────────────────────────────────── */

@keyframes ubpReveal {
    0%   { opacity: 0; transform: translateY(14px) scale(0.97); filter: blur(4px); }
    100% { opacity: 1; transform: translateY(0)    scale(1);    filter: blur(0); }
}

@keyframes ubpHide {
    0%   { opacity: 1; transform: translateY(0)   scale(1);    filter: blur(0); }
    100% { opacity: 0; transform: translateY(8px) scale(0.98); filter: blur(3px); }
}

@keyframes ubpOrbSpin {
    to { transform: rotate(360deg); }
}

@keyframes ubpOrbPulse {
    0%   { transform: scale(1);    opacity: 0.7; }
    60%  { transform: scale(1.9);  opacity: 0; }
    100% { transform: scale(1.9);  opacity: 0; }
}

@keyframes ubpBarFlow {
    0%   { background-position: 0%   center; }
    100% { background-position: 200% center; }
}

@keyframes ubpShimmer {
    0%   { left: -80px; opacity: 0; }
    8%   { opacity: 1; }
    92%  { opacity: 1; }
    100% { left: 110%;  opacity: 0; }
}

@keyframes ubpLeadPulse {
    0%, 100% {
        box-shadow:
            0 0 0 0   rgba(147, 197, 253, 0.9),
            0 0 8px 3px rgba(96, 165, 250, 0.5);
    }
    50% {
        box-shadow:
            0 0 0 5px rgba(147, 197, 253, 0),
            0 0 14px 6px rgba(96, 165, 250, 0.8);
    }
}

@keyframes ubpCompleteLeadPulse {
    0%, 100% {
        box-shadow:
            0 0 0 0   rgba(110, 231, 183, 0.9),
            0 0 8px 3px rgba(16, 185, 129, 0.5);
    }
    50% {
        box-shadow:
            0 0 0 5px rgba(110, 231, 183, 0),
            0 0 14px 6px rgba(16, 185, 129, 0.8);
    }
}

@keyframes ubpQueueBounce {
    0%, 100% { transform: scale(1); }
    35%       { transform: scale(1.1) translateY(-1px); }
    65%       { transform: scale(0.95); }
}

@keyframes ubpAmbientFloat {
    0%, 100% { transform: translateY(0)    scale(1); }
    50%       { transform: translateY(-6px) scale(1.08); }
}

@keyframes ubpCompleteFlash {
    0%   { opacity: 0; }
    25%  { opacity: 0.18; }
    100% { opacity: 0; }
}

@keyframes ubpIconMorph {
    0%   { transform: scale(0.5) rotate(-30deg); opacity: 0; }
    65%  { transform: scale(1.2) rotate(6deg);   opacity: 1; }
    100% { transform: scale(1)   rotate(0deg);   opacity: 1; }
}

@keyframes ubpCorePulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(96, 165, 250, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.18), inset 0 -1px 0 rgba(0, 0, 0, 0.3), 0 4px 16px rgba(37, 99, 235, 0.5); }
    50%      { box-shadow: 0 0 0 4px rgba(96, 165, 250, 0), inset 0 1px 0 rgba(255, 255, 255, 0.18), inset 0 -1px 0 rgba(0, 0, 0, 0.3), 0 6px 20px rgba(37, 99, 235, 0.6); }
}

/* ── Contenedor principal ────────────────────────────────────────────────── */

.upload-bg-progress {
    position: relative;
    margin-top: 0.65rem;
    border-radius: 16px;
    /* Fondo glassmorphism oscuro con capas */
    background:
        linear-gradient(
            170deg,
            rgba(17, 24, 45, 0.97) 0%,
            rgba(10, 15, 30, 0.99) 100%
        );
    backdrop-filter: blur(28px) saturate(1.8) brightness(1.05);
    /* Borde con resplandor azul sutil — varias capas */
    box-shadow:
        /* Borde exterior glow */
        0 0 0 1px rgba(96, 165, 250, 0.28),
        /* Borde interior highlight */
        inset 0 1px 0 rgba(255, 255, 255, 0.07),
        inset 0 0 0 1px rgba(96, 165, 250, 0.06),
        /* Sombra exterior */
        0 16px 48px rgba(0, 0, 0, 0.55),
        0 4px 12px rgba(0, 0, 0, 0.35),
        /* Glow azul difuso */
        0 0 32px rgba(59, 130, 246, 0.08);
    animation: ubpReveal 0.48s cubic-bezier(0.16, 1, 0.3, 1) both;
    transition:
        box-shadow 0.45s ease,
        background  0.45s ease;
    overflow: hidden;
}

/* Estado: completado */
.upload-bg-progress[data-state="complete"] {
    box-shadow:
        0 0 0 1px rgba(16, 185, 129, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.07),
        inset 0 0 0 1px rgba(16, 185, 129, 0.08),
        0 16px 48px rgba(0, 0, 0, 0.5),
        0 0 32px rgba(5, 150, 105, 0.1);
}

/* Destello verde al completar */
.upload-bg-progress[data-state="complete"]::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: radial-gradient(ellipse at 30% 50%, rgba(16, 185, 129, 0.2), transparent 70%);
    animation: ubpCompleteFlash 1.2s ease forwards;
    pointer-events: none;
}

/* Estado: error */
.upload-bg-progress[data-state="error"] {
    box-shadow:
        0 0 0 1px rgba(239, 68, 68, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.05),
        0 16px 48px rgba(0, 0, 0, 0.5),
        0 0 32px rgba(220, 38, 38, 0.08);
}

.upload-bg-progress[hidden] { display: none; }

.upload-bg-progress.is-hiding {
    animation: ubpHide 0.38s cubic-bezier(0.4, 0, 1, 1) forwards;
    pointer-events: none;
}

/* ── Halo ambiental decorativo ───────────────────────────────────────────── */

.ubp-ambient {
    position: absolute;
    top: -30px;
    right: -20px;
    width: 160px;
    height: 120px;
    border-radius: 999px;
    background: radial-gradient(
        ellipse at center,
        rgba(79, 70, 229, 0.18) 0%,
        rgba(59, 130, 246, 0.1) 40%,
        transparent 70%
    );
    filter: blur(16px);
    animation: ubpAmbientFloat 5s ease-in-out infinite;
    pointer-events: none;
}

.upload-bg-progress[data-state="complete"] .ubp-ambient {
    background: radial-gradient(
        ellipse at center,
        rgba(5, 150, 105, 0.2) 0%,
        rgba(16, 185, 129, 0.1) 40%,
        transparent 70%
    );
}

.upload-bg-progress[data-state="error"] .ubp-ambient {
    background: radial-gradient(
        ellipse at center,
        rgba(220, 38, 38, 0.15) 0%,
        rgba(239, 68, 68, 0.08) 40%,
        transparent 70%
    );
}

/* ── Fila principal ──────────────────────────────────────────────────────── */

.ubp-row {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    padding: 0.7rem 1.1rem 0.65rem;
}

/* ── Orb animado ─────────────────────────────────────────────────────────── */

.ubp-orb {
    position: relative;
    flex-shrink: 0;
    width: 38px;
    height: 38px;
}

/* Anillo giratorio (conic-gradient) */
.ubp-orb__ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: conic-gradient(
        from 0deg,
        rgba(79, 70, 229, 0.9)  0%,
        rgba(96, 165, 250, 1)   30%,
        rgba(6, 182, 212, 0.7)  50%,
        transparent             65%
    );
    animation: ubpOrbSpin 1.6s linear infinite;
    transition: background 0.5s ease;
}

/* Actividad real: pulso rápido mientras el stream reporta progreso */
.upload-bg-progress[data-state="processing"] .ubp-orb__core {
    animation: ubpCorePulse 1.1s ease-in-out infinite;
}

/* Anillo giratorio — estado completado */
.upload-bg-progress[data-state="complete"] .ubp-orb__ring {
    background: conic-gradient(
        from 0deg,
        rgba(5, 150, 105, 0.9)  0%,
        rgba(52, 211, 153, 1)   35%,
        rgba(16, 185, 129, 0.6) 55%,
        transparent             70%
    );
    animation: ubpOrbSpin 2.5s linear infinite;
}

/* Anillo giratorio — estado error */
.upload-bg-progress[data-state="error"] .ubp-orb__ring {
    background: conic-gradient(
        from 0deg,
        rgba(220, 38, 38, 0.9)  0%,
        rgba(252, 165, 165, 1)  35%,
        rgba(239, 68, 68, 0.5)  55%,
        transparent             70%
    );
    animation: ubpOrbSpin 3s linear infinite reverse;
}

/* Onda de pulso exterior */
.ubp-orb__pulse {
    position: absolute;
    inset: 2px;
    border-radius: 50%;
    background: rgba(96, 165, 250, 0.25);
    animation: ubpOrbPulse 2.2s ease-out infinite;
}

.upload-bg-progress[data-state="complete"] .ubp-orb__pulse {
    background: rgba(16, 185, 129, 0.25);
}

.upload-bg-progress[data-state="error"] .ubp-orb__pulse {
    background: rgba(239, 68, 68, 0.2);
    animation-play-state: paused;
}

/* Núcleo del orb */
.ubp-orb__core {
    position: absolute;
    inset: 3px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: #fff;
    font-size: 0.82rem;
    /* Gradiente interior */
    background: linear-gradient(145deg, #3730a3 0%, #2563eb 60%, #0ea5e9 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.18),
        inset 0 -1px 0 rgba(0, 0, 0, 0.3),
        0 4px 16px rgba(37, 99, 235, 0.5);
    transition: background 0.5s ease, box-shadow 0.5s ease;
}

.upload-bg-progress[data-state="complete"] .ubp-orb__core {
    background: linear-gradient(145deg, #065f46 0%, #059669 60%, #10b981 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.18),
        inset 0 -1px 0 rgba(0, 0, 0, 0.3),
        0 4px 16px rgba(5, 150, 105, 0.5);
}

.upload-bg-progress[data-state="error"] .ubp-orb__core {
    background: linear-gradient(145deg, #7f1d1d 0%, #dc2626 60%, #ef4444 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.15),
        inset 0 -1px 0 rgba(0, 0, 0, 0.3),
        0 4px 16px rgba(220, 38, 38, 0.5);
}

/* Icono con morphing al cambiar estado */
.upload-bg-progress[data-state="complete"] .ubp-orb__core i,
.upload-bg-progress[data-state="error"]    .ubp-orb__core i {
    animation: ubpIconMorph 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

/* ── Texto ───────────────────────────────────────────────────────────────── */

.ubp-text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.ubp-text strong {
    display: block;
    font-family: var(--font-outfit, 'Outfit', sans-serif);
    font-size: 0.83rem;
    font-weight: 700;
    color: #e2e8f0;
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    letter-spacing: 0.01em;
}

.ubp-text span {
    display: block;
    font-size: 0.7rem;
    font-weight: 400;
    color: #64748b;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Meta derecha ────────────────────────────────────────────────────────── */

.ubp-meta {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 0.55rem;
}

.ubp-count {
    font-family: var(--font-outfit, 'Outfit', sans-serif);
    font-size: 0.68rem;
    font-weight: 700;
    color: #475569;
    letter-spacing: 0.04em;
    white-space: nowrap;
}

/* Badge de cola — amber premium */
.ubp-queue {
    display: inline-flex;
    align-items: center;
    gap: 0.28rem;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.08), rgba(245, 158, 11, 0.15));
    border: 1px solid rgba(217, 119, 6, 0.35) !important;
    color: #b45309 !important; /* Ámbar oscuro legible */
    font-family: var(--font-outfit, 'Outfit', sans-serif) !important;
    font-size: 0.62rem;
    font-weight: 800 !important;
    letter-spacing: 0.06em;
    white-space: nowrap;
    box-shadow:
        0 0 6px rgba(245, 158, 11, 0.05),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
    animation: ubpQueueBounce 0.5s ease;
    text-transform: uppercase;
}

[data-theme="dark"] .ubp-queue {
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.12), rgba(245, 158, 11, 0.18)) !important;
    border: 1px solid rgba(251, 191, 36, 0.35) !important;
    color: #fbbf24 !important; /* Ámbar brillante en modo oscuro */
    box-shadow: 0 0 8px rgba(251, 191, 36, 0.15) !important;
}

.ubp-queue[hidden] { display: none; }

/* Botón para detener/cancelar proceso */
.ubp-cancel-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #fee2e2;
    border: 1px solid #fecaca;
    color: #dc2626;
    opacity: 1;
    font-size: 0.9rem;
    cursor: pointer;
    padding: 0.25rem;
    border-radius: 6px;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    outline: none;
}

.ubp-cancel-btn:hover {
    opacity: 1;
    transform: scale(1.15);
    background: #fecaca;
    color: #b91c1c;
}

[data-theme="dark"] .ubp-cancel-btn {
    background: #7f1d1d;
    border-color: #991b1b;
    color: #fee2e2;
}

[data-theme="dark"] .ubp-cancel-btn:hover {
    background: #991b1b;
    color: #ffffff;
}

.ubp-cancel-btn:active {
    transform: scale(0.95);
}

/* Ocultar botón de cancelar si no está en estado procesando */
.upload-bg-progress:not([data-state="processing"]) .ubp-cancel-btn {
    display: none !important;
}

[data-theme="dark"] .ubp-cancel-btn {
    color: #f87171;
}

[data-theme="dark"] .ubp-cancel-btn:hover {
    background: rgba(248, 113, 113, 0.12);
    color: #ef4444;
}


/* Escudo de seguridad */
.ubp-shield {
    font-size: 0.68rem;
    color: #334155;
    opacity: 0.7;
    transition: color 0.4s ease;
}

.upload-bg-progress[data-state="complete"] .ubp-shield { color: #059669; opacity: 0.8; }
.upload-bg-progress[data-state="error"]    .ubp-shield { color: #dc2626; opacity: 0.7; }

/* ── Track de progreso ───────────────────────────────────────────────────── */

.ubp-track {
    position: relative;
    height: 4px;
    margin: 0 1.1rem 0.85rem;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.08);
    overflow: visible;
    transition: background 0.35s ease;
}

[data-theme="dark"] .ubp-track {
    background: rgba(255, 255, 255, 0.1);
}

/* ── Fill (barra de progreso) ────────────────────────────────────────────── */

.ubp-fill {
    position: relative;
    height: 100%;
    width: 0%;
    overflow: visible;
    border-radius: 999px;
    /* Gradiente animado que fluye */
    background: linear-gradient(
        90deg,
        #4f46e5 0%,
        #3b82f6 30%,
        #06b6d4 60%,
        #3b82f6 80%,
        #4f46e5 100%
    );
    background-size: 200% 100%;
    animation: ubpBarFlow 2.2s linear infinite;
    /* Glow neon bajo la barra */
    box-shadow:
        0 0 8px  rgba(59, 130, 246, 0.7),
        0 0 16px rgba(96, 165, 250, 0.35),
        0 0 2px  rgba(255, 255, 255, 0.2) inset;
    transition:
        width 0.18s cubic-bezier(0.16, 1, 0.3, 1),
        background-image 0.5s ease,
        box-shadow 0.5s ease;
}

/* Estado: completado */
.upload-bg-progress[data-state="complete"] .ubp-fill {
    background: linear-gradient(
        90deg,
        #065f46 0%,
        #059669 30%,
        #34d399 60%,
        #059669 80%,
        #065f46 100%
    );
    background-size: 200% 100%;
    box-shadow:
        0 0 8px  rgba(5, 150, 105, 0.7),
        0 0 16px rgba(52, 211, 153, 0.35),
        0 0 2px  rgba(255, 255, 255, 0.2) inset;
    animation: none;
}

/* Estado: error */
.upload-bg-progress[data-state="error"] .ubp-fill {
    background: linear-gradient(
        90deg,
        #7f1d1d 0%,
        #dc2626 40%,
        #f87171 60%,
        #dc2626 80%,
        #7f1d1d 100%
    );
    background-size: 200% 100%;
    box-shadow:
        0 0 8px  rgba(220, 38, 38, 0.6),
        0 0 14px rgba(239, 68, 68, 0.25);
    animation: none;
}

/* ── Shimmer viajero dentro del fill ─────────────────────────────────────── */

.ubp-fill__shimmer {
    position: absolute;
    top: 0;
    bottom: 0;
    left: -80px;
    width: 80px;
    border-radius: inherit;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.55) 50%,
        transparent 100%
    );
    transform: skewX(-20deg);
    animation: ubpShimmer 2.4s ease-in-out infinite;
    pointer-events: none;
}

.upload-bg-progress[data-state="complete"] .ubp-fill__shimmer,
.upload-bg-progress[data-state="error"]    .ubp-fill__shimmer {
    animation: none;
    opacity: 0;
}

/* ── Punto luminoso en el borde líder ───────────────────────────────────── */

.ubp-fill__lead {
    position: absolute;
    right: -1px;
    top: 50%;
    transform: translateY(-50%);
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #fff;
    animation: ubpLeadPulse 1.1s ease-in-out infinite;
    pointer-events: none;
}

.upload-bg-progress[data-state="complete"] .ubp-fill__lead {
    background: #d1fae5;
    animation: ubpCompleteLeadPulse 1.5s ease-in-out infinite;
}

.upload-bg-progress[data-state="error"] .ubp-fill__lead {
    display: none;
}

/* ── Responsive ──────────────────────────────────────────────────────────── */

@media (max-width: 640px) {
    .ubp-row {
        gap: 0.65rem;
        padding: 0.6rem 0.9rem 0.55rem;
    }

    .ubp-track {
        margin: 0 0.9rem 0.75rem;
    }

    .ubp-orb {
        width: 32px;
        height: 32px;
    }

    .ubp-orb__core { font-size: 0.72rem; }

    .ubp-text strong { font-size: 0.78rem; }

    .ubp-text span   { display: none; }

    .ubp-count       { display: none; }

    .ubp-shield      { display: none; }
}


@keyframes uploadBgReveal {
    from { transform: translateY(10px); max-height: 0; }
    to   { transform: translateY(0);    max-height: 200px; }
}

@keyframes uploadBgHide {
    from { transform: translateY(0);   max-height: 200px; }
    to   { transform: translateY(8px); max-height: 0; }
}

@keyframes uploadBgShimmer {
    0%   { transform: translateX(-100%); }
    100% { transform: translateX(200%); }
}

@keyframes uploadBgIconPulse {
    0%, 100% { transform: scale(1);    opacity: 1; }
    50%       { transform: scale(1.18); opacity: 0.8; }
}

@keyframes uploadBgIconCheck {
    0%   { transform: scale(0.6) rotate(-20deg); opacity: 0; }
    70%  { transform: scale(1.15) rotate(4deg);  opacity: 1; }
    100% { transform: scale(1) rotate(0deg);     opacity: 1; }
}

.upload-bg-progress {
    margin-top: 0.85rem;
    overflow: hidden;
    border-radius: 16px;
    border: 1px solid rgba(37, 99, 235, 0.18);
    background: #ffffff;
    box-shadow:
        0 4px 20px rgba(37, 99, 235, 0.08),
        0 1px 4px rgba(15, 23, 42, 0.06);
    backdrop-filter: none;
    animation: uploadBgReveal 0.38s cubic-bezier(0.16, 1, 0.3, 1) both;
    transition: border-color 0.35s ease, box-shadow 0.35s ease;
}

[data-theme="dark"] .upload-bg-progress {
    background: #0f172a;
    border-color: rgba(59, 130, 246, 0.25);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3), 0 1px 4px rgba(0, 0, 0, 0.2);
}

.upload-bg-progress[hidden] {
    display: none;
}

.upload-bg-progress.is-hiding {
    animation: uploadBgHide 0.3s ease forwards;
}

.upload-bg-progress__inner {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.05rem 1.25rem 1.15rem;
}

/* Icono circular */
.upload-bg-progress__icon-wrap {
    flex-shrink: 0;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: linear-gradient(135deg, #2563eb, #3b82f6);
    box-shadow: 0 4px 14px rgba(37, 99, 235, 0.32);
    color: #fff;
    font-size: 1.1rem;
    transition: background 0.35s ease, box-shadow 0.35s ease;
}

.upload-bg-progress[data-state="processing"] .upload-bg-progress__icon-wrap i {
    animation: uploadBgIconPulse 1.4s ease-in-out infinite;
}

.upload-bg-progress[data-state="complete"] .upload-bg-progress__icon-wrap {
    background: linear-gradient(135deg, #059669, #10b981);
    box-shadow: 0 4px 14px rgba(5, 150, 105, 0.32);
}

.upload-bg-progress[data-state="complete"] .upload-bg-progress__icon-wrap i {
    animation: uploadBgIconCheck 0.42s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

.upload-bg-progress[data-state="error"] .upload-bg-progress__icon-wrap {
    background: linear-gradient(135deg, #dc2626, #ef4444);
    box-shadow: 0 4px 14px rgba(220, 38, 38, 0.32);
}

/* Info + barra */
.upload-bg-progress__info {
    flex: 1;
    min-width: 0;
}

.upload-bg-progress__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.28rem;
    flex-wrap: wrap;
}

.upload-bg-progress__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    color: #2563eb;
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    transition: color 0.35s ease;
}

[data-theme="dark"] .upload-bg-progress__eyebrow { color: #60a5fa; }

.upload-bg-progress[data-state="complete"] .upload-bg-progress__eyebrow { color: #059669; }
.upload-bg-progress[data-state="error"]    .upload-bg-progress__eyebrow { color: #dc2626; }

.upload-bg-progress__stats {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    flex-wrap: wrap;
}

.upload-bg-progress__count {
    color: #64748b;
    font-size: 0.68rem;
    font-weight: 700;
}

[data-theme="dark"] .upload-bg-progress__count { color: #94a3b8; }

.upload-bg-progress__queue-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.18rem 0.55rem;
    border-radius: 999px;
    background: rgba(245, 158, 11, 0.12);
    border: 1px solid rgba(245, 158, 11, 0.3);
    color: #b45309;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    white-space: nowrap;
}

[data-theme="dark"] .upload-bg-progress__queue-badge {
    background: rgba(245, 158, 11, 0.15);
    border-color: rgba(245, 158, 11, 0.35);
    color: #fbbf24;
}

.upload-bg-progress__title {
    display: block;
    color: #0f172a;
    font-family: var(--font-outfit);
    font-size: 0.9rem;
    font-weight: 700;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

[data-theme="dark"] .upload-bg-progress__title { color: #f1f5f9; }

.upload-bg-progress__detail {
    margin: 0.2rem 0 0.65rem;
    color: #64748b;
    font-size: 0.76rem;
    line-height: 1.4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

[data-theme="dark"] .upload-bg-progress__detail { color: #94a3b8; }

.upload-bg-progress__track {
    height: 6px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(203, 213, 225, 0.6);
}

[data-theme="dark"] .upload-bg-progress__track {
    background: rgba(51, 65, 85, 0.8);
}

.upload-bg-progress__bar {
    position: relative;
    width: 0%;
    height: 100%;
    overflow: hidden;
    border-radius: inherit;
    background: linear-gradient(90deg, #1d4ed8, #3b82f6 72%, #93c5fd);
    transition: width 0.38s cubic-bezier(0.16, 1, 0.3, 1);
}

.upload-bg-progress__bar::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.7), transparent);
    transform: translateX(-100%);
    animation: uploadBgShimmer 1.5s ease-in-out infinite;
}

.upload-bg-progress[data-state="complete"] .upload-bg-progress__bar {
    background: linear-gradient(90deg, #047857, #059669 72%, #6ee7b7);
}

.upload-bg-progress[data-state="complete"] .upload-bg-progress__bar::after {
    animation: none;
}

.upload-bg-progress[data-state="error"] .upload-bg-progress__bar {
    background: linear-gradient(90deg, #b91c1c, #dc2626 72%, #fca5a5);
}

.upload-bg-progress[data-state="error"] .upload-bg-progress__bar::after {
    animation: none;
}

/* Responsive */
@media (max-width: 600px) {
    .upload-bg-progress__inner {
        gap: 0.75rem;
        padding: 0.9rem 1rem 1rem;
    }

    .upload-bg-progress__icon-wrap {
        width: 36px;
        height: 36px;
        font-size: 0.9rem;
    }

    .upload-bg-progress__title {
        font-size: 0.82rem;
    }

    .upload-bg-progress__detail {
        display: none;
    }
}

/* ==========================================================================
   PANEL DE GRILLA AMPLIADA (EXPANDED GRID PANEL)
   ========================================================================== */

/* Botón para expandir la grilla en la toolbar */
.btn-grid-fullscreen {
    background: var(--bg-card);
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 0.95rem;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02);
}

.btn-grid-fullscreen:hover {
    color: var(--color-blue);
    background: rgba(37, 99, 235, 0.05);
    border-color: rgba(37, 99, 235, 0.3);
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(37, 99, 235, 0.08);
}

.btn-grid-fullscreen:active {
    transform: translateY(0);
}

[data-theme="dark"] .btn-grid-fullscreen:hover {
    background: rgba(96, 165, 250, 0.1);
    border-color: rgba(96, 165, 250, 0.4);
    color: var(--color-blue-light);
}

/* Contenedor Overlay (Fondo Difuminado) */
.grid-expanded-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(15, 23, 42, 0.65);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    z-index: 2100;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.grid-expanded-overlay.active {
    opacity: 1;
    pointer-events: auto;
}

/* Panel Principal Centrado */
.grid-expanded-panel {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 24px;
    width: calc(100% - 5rem);
    max-width: 1400px;
    height: calc(100vh - 5rem);
    max-height: 860px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
    box-shadow: 
        0 24px 64px rgba(0, 0, 0, 0.35),
        0 8px 24px rgba(0, 0, 0, 0.20),
        0 0 0 1px rgba(255, 255, 255, 0.08) inset;
    transform: scale(0.96) translateY(10px);
    transition: transform 0.38s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.34s ease;
    opacity: 0;
}

.grid-expanded-overlay.active .grid-expanded-panel {
    transform: scale(1) translateY(0);
    opacity: 1;
}

/* Cabecera del Panel */
.grid-expanded-header {
    padding: 1.5rem 1.75rem 1.25rem 1.75rem;
    border-bottom: 1px solid var(--border-color);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.02), transparent);
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.grid-expanded-title-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.grid-expanded-title {
    font-family: var(--font-outfit);
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.grid-expanded-title i {
    color: var(--color-blue);
}

.grid-expanded-close {
    background: rgba(15, 23, 42, 0.04);
    border: 1px solid rgba(15, 23, 42, 0.06);
    border-radius: 50%;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--text-secondary);
    transition: all 0.2s ease;
}

.grid-expanded-close:hover {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
    border-color: rgba(239, 68, 68, 0.2);
    transform: rotate(90deg);
}

[data-theme="dark"] .grid-expanded-close {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.08);
}

/* Fila del Filtro de Búsqueda */
.grid-expanded-search-container {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
}

.grid-expanded-search-container .search-icon {
    position: absolute;
    left: 1.1rem;
    color: var(--text-muted);
    font-size: 0.95rem;
    pointer-events: none;
}

.grid-expanded-search-input {
    width: 100%;
    padding: 0.75rem 2.8rem 0.75rem 2.6rem;
    border-radius: 12px;
    border: 1px solid var(--border-color);
    background: rgba(15, 23, 42, 0.02);
    color: var(--text-primary);
    font-family: var(--font-outfit);
    font-size: 0.88rem;
    transition: all 0.25s ease;
}

[data-theme="dark"] .grid-expanded-search-input {
    background: rgba(255, 255, 255, 0.02);
}

.grid-expanded-search-input:focus {
    outline: none;
    border-color: var(--color-blue);
    background: var(--bg-card);
    box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.1);
}

.grid-expanded-search-clear {
    position: absolute;
    right: 1rem;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-muted);
    font-size: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s ease;
}

.grid-expanded-search-clear:hover {
    color: var(--text-secondary);
}

/* Cuerpo del Panel (Desplazable) */
.grid-expanded-body {
    flex: 1;
    overflow-y: auto;
    padding: 1rem 1.75rem;
}

.grid-expanded-body::-webkit-scrollbar {
    width: 6px;
}

.grid-expanded-body::-webkit-scrollbar-track {
    background: transparent;
}

.grid-expanded-body::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.15);
    border-radius: 3px;
}

[data-theme="dark"] .grid-expanded-body::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.15);
}

/* Pie del Panel */
.grid-expanded-footer {
    padding: 1rem 1.75rem 1.25rem 1.75rem;
    border-top: 1px solid var(--border-color);
    background: linear-gradient(0deg, rgba(255, 255, 255, 0.02), transparent);
}

/* Adaptación responsive */
@media (max-width: 1024px) {
    .grid-expanded-panel {
        width: calc(100% - 2rem);
        height: calc(100vh - 2rem);
    }
}

@media (max-width: 768px) {
    .grid-expanded-header {
        padding: 1rem;
    }
    .grid-expanded-body {
        padding: 0.5rem 1rem;
    }
    .grid-expanded-footer {
        padding: 1rem;
    }
}

/* Animación de entrada escalonada para las filas al filtrar o navegar */
@keyframes expandedRowFadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.invoice-row-animate {
    opacity: 0;
    animation: expandedRowFadeInUp 0.58s cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* Hover y activo específico para la pestaña de Venta (Azul Degradado) */
.table-tabs .table-tab[data-expanded-type="Venta"]:hover {
    background: linear-gradient(135deg, #60a5fa 0%, #2563eb 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 6px 14px rgba(37, 99, 235, 0.25) !important;
}

.table-tabs .table-tab[data-expanded-type="Venta"].active {
    background: linear-gradient(135deg, #60a5fa 0%, #2563eb 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 2px 8px rgba(37, 99, 235, 0.22) !important;
}

/* Hover y activo específico para la pestaña de Compra (Verde Degradado) */
.table-tabs .table-tab[data-expanded-type="Compra"]:hover {
    background: linear-gradient(135deg, #4ade80 0%, #16a34a 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 6px 14px rgba(22, 163, 74, 0.25) !important;
}

.table-tabs .table-tab[data-expanded-type="Compra"].active {
    background: linear-gradient(135deg, #4ade80 0%, #16a34a 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 2px 8px rgba(22, 163, 74, 0.22) !important;
}
/* Estilos dinámicos para el deslizador y etiquetas del panel ampliado */
#expanded-year-range-slider.accent-all {
    accent-color: #7c3aed !important; /* Violet */
    background: rgba(124, 58, 237, 0.25) !important;
}
#expanded-year-range-slider.accent-venta {
    accent-color: #2563eb !important; /* Blue */
    background: rgba(37, 99, 235, 0.25) !important;
}
#expanded-year-range-slider.accent-compra {
    accent-color: #16a34a !important; /* Green */
    background: rgba(22, 163, 74, 0.25) !important;
}

#expanded-year-slider-selected {
    font-weight: 800 !important; /* Negrita */
    font-size: 0.72rem;
    padding: 0.1rem 0.4rem;
    border-radius: 6px;
    min-width: 38px;
    text-align: center;
    margin-left: 0.3rem;
    display: inline-block;
    border: 1px solid transparent;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

#expanded-year-slider-selected.badge-all {
    color: #7c3aed !important; /* Violeta */
    background: rgba(124, 58, 237, 0.12) !important;
    border-color: rgba(124, 58, 237, 0.25) !important;
    box-shadow: 0 2px 6px rgba(124, 58, 237, 0.18), 0 1px 2px rgba(124, 58, 237, 0.08) !important;
}
#expanded-year-slider-selected.badge-venta {
    color: #2563eb !important; /* Azul */
    background: rgba(37, 99, 235, 0.12) !important;
    border-color: rgba(37, 99, 235, 0.25) !important;
    box-shadow: 0 2px 6px rgba(37, 99, 235, 0.18), 0 1px 2px rgba(37, 99, 235, 0.08) !important;
}
#expanded-year-slider-selected.badge-compra {
    color: #16a34a !important; /* Verde */
    background: rgba(22, 163, 74, 0.12) !important;
    border-color: rgba(22, 163, 74, 0.25) !important;
    box-shadow: 0 2px 6px rgba(22, 163, 74, 0.18), 0 1px 2px rgba(22, 163, 74, 0.08) !important;
}

/* Sombra y profundidad adicional para el contenedor de la barra de años */
.year-slider-container {
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.05), inset 0 1px 2px rgba(0, 0, 0, 0.03) !important;
    border: 1px solid rgba(15, 23, 42, 0.08) !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Pestaña de ventas y compras con degradado azul y verde */
.table-tabs .table-tab[data-expanded-type="all"]:hover {
    background: linear-gradient(135deg, #2563eb 0%, #16a34a 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 6px 14px rgba(22, 163, 74, 0.25) !important;
}

.table-tabs .table-tab[data-expanded-type="all"].active {
    background: linear-gradient(135deg, #2563eb 0%, #16a34a 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 2px 8px rgba(22, 163, 74, 0.22) !important;
}

.grid-expanded-footer .invoice-table-pagination {
    justify-content: center;
    margin-top: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.grid-expanded-footer .pagination-info,
.grid-expanded-footer .invoice-table-pagination__summary {
    display: none;
}

.grid-expanded-footer .pagination-controls,
.grid-expanded-footer .invoice-table-pagination__controls {
    gap: 0.5rem;
}

.grid-expanded-footer .btn-pagination-page,
.grid-expanded-footer .btn-pagination-nav,
.grid-expanded-footer .invoice-page-btn {
    min-width: 36px;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 1px solid #dbe7ff;
    border-radius: 8px;
    background: #ffffff;
    color: #1e3a8a;
    box-shadow: none;
    font-size: 0.86rem;
    font-weight: 850;
}

.grid-expanded-footer .btn-pagination-page:hover:not(:disabled):not(.active),
.grid-expanded-footer .btn-pagination-nav:hover:not(:disabled),
.grid-expanded-footer .invoice-page-btn:hover:not(:disabled):not(.is-active) {
    transform: none;
    border-color: #bfdbfe;
    background: #f8fbff;
    color: #1d4ed8;
    box-shadow: none;
}

.grid-expanded-footer .btn-pagination-page.active,
.grid-expanded-footer .invoice-page-btn.is-active {
    border-color: #2563eb;
    background: #2563eb;
    color: #ffffff;
    box-shadow: none;
}

.grid-expanded-footer .btn-pagination-nav:disabled,
.grid-expanded-footer .invoice-page-btn:disabled {
    opacity: 0.45;
}

[data-theme="dark"] .grid-expanded-footer .btn-pagination-page,
[data-theme="dark"] .grid-expanded-footer .btn-pagination-nav,
[data-theme="dark"] .grid-expanded-footer .invoice-page-btn {
    border-color: rgba(147, 197, 253, 0.2);
    background: rgba(15, 23, 42, 0.86);
    color: #bfdbfe;
}

[data-theme="dark"] .grid-expanded-footer .btn-pagination-page:hover:not(:disabled):not(.active),
[data-theme="dark"] .grid-expanded-footer .btn-pagination-nav:hover:not(:disabled),
[data-theme="dark"] .grid-expanded-footer .invoice-page-btn:hover:not(:disabled):not(.is-active) {
    border-color: rgba(147, 197, 253, 0.34);
    background: rgba(30, 41, 59, 0.92);
    color: #93c5fd;
}

[data-theme="dark"] .grid-expanded-footer .btn-pagination-page.active,
[data-theme="dark"] .grid-expanded-footer .invoice-page-btn.is-active {
    border-color: #3b82f6;
    background: #2563eb;
    color: #ffffff;
}

.btn-create-excel {
    position: relative;
    overflow: hidden;
    justify-content: center;
    padding: 0.5rem 0.9rem !important;
    font-size: 0.82rem !important;
    line-height: 1.2;
    border: 1px solid rgba(22, 163, 74, 0.26) !important;
    background:
        linear-gradient(135deg, #16a34a 0%, #15803d 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 12px 26px rgba(22, 163, 74, 0.22);
}

.btn-create-excel::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, transparent 0%, rgba(255, 255, 255, 0.22) 48%, transparent 70%);
    transform: translateX(-120%);
    transition: transform 0.55s ease;
}

.btn-create-excel:hover::after {
    transform: translateX(120%);
}

.btn-create-excel i {
    position: relative;
    z-index: 1;
    color: #dcfce7;
}

.btn-create-excel {
    z-index: 0;
}

.btn-create-excel > * {
    position: relative;
    z-index: 1;
}

.excel-export-popup__panel {
    position: relative;
    width: min(560px, calc(100vw - 2rem));
    max-width: 560px;
    padding: 2rem;
    border-radius: 14px;
    border: 1px solid rgba(34, 197, 94, 0.16);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.98)),
        radial-gradient(circle at 8% 0%, rgba(22, 163, 74, 0.1), transparent 36%);
}

.excel-export-popup__close {
    position: absolute;
    top: 1rem;
    right: 1rem;
}

.excel-export-popup__icon {
    background: rgba(22, 163, 74, 0.1) !important;
    border-color: rgba(22, 163, 74, 0.22) !important;
    color: #15803d !important;
}

.excel-export-popup__choices {
    display: grid;
    gap: 0.72rem;
    width: 100%;
    margin: 1.25rem 0 1.45rem;
}

.excel-export-filename {
    display: grid;
    gap: 0.45rem;
    width: 100%;
    margin-top: 1rem;
    text-align: left;
}

.excel-export-filename > span {
    color: var(--text-secondary);
    font-family: var(--font-outfit);
    font-size: 0.78rem;
    font-weight: 800;
}

.excel-export-filename__control {
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.55rem;
    width: 100%;
    padding: 0.72rem 0.85rem;
    border: 1px solid rgba(22, 163, 74, 0.18);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.82);
    box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.04);
}

.excel-export-filename__control i {
    color: #15803d;
}

.excel-export-filename__control input {
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--text-primary);
    font-family: var(--font-outfit);
    font-size: 0.95rem;
    font-weight: 800;
}

.excel-export-filename__control small {
    color: #15803d;
    font-family: var(--font-outfit);
    font-size: 0.84rem;
    font-weight: 900;
}

.excel-export-choice {
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr) 24px;
    align-items: center;
    gap: 0.85rem;
    width: 100%;
    padding: 0.82rem 0.95rem;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.78);
    color: var(--text-primary);
    cursor: pointer;
    text-align: left;
    transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.excel-export-choice:hover {
    transform: translateY(-1px);
    border-color: rgba(22, 163, 74, 0.28);
    box-shadow: 0 14px 30px rgba(15, 23, 42, 0.08);
}

.excel-export-choice.is-selected {
    border-color: rgba(22, 163, 74, 0.42);
    background:
        linear-gradient(180deg, rgba(240, 253, 244, 0.96), rgba(236, 253, 245, 0.86));
    box-shadow: 0 14px 30px rgba(22, 163, 74, 0.12);
}

.excel-export-choice__icon {
    display: inline-grid;
    width: 42px;
    height: 42px;
    place-items: center;
    border-radius: 10px;
    background: linear-gradient(135deg, #16a34a, #15803d);
    color: #ffffff;
    box-shadow: 0 10px 20px rgba(22, 163, 74, 0.18);
}

.excel-export-choice__icon--purchase {
    background: linear-gradient(135deg, #0f766e, #14b8a6);
}

.excel-export-choice__icon--sale {
    background: linear-gradient(135deg, #1d4ed8, #3b82f6);
}

.excel-export-choice strong {
    display: block;
    font-family: var(--font-outfit);
    font-size: 0.96rem;
    font-weight: 800;
    color: var(--text-primary);
}

.excel-export-choice small {
    display: block;
    margin-top: 0.12rem;
    color: var(--text-muted);
    font-size: 0.78rem;
    font-weight: 600;
}

.excel-export-choice__check {
    color: #16a34a;
    opacity: 0;
    transform: scale(0.8);
    transition: opacity 0.18s ease, transform 0.18s ease;
}

.excel-export-choice.is-selected .excel-export-choice__check {
    opacity: 1;
    transform: scale(1);
}

.excel-export-popup__confirm {
    background: linear-gradient(135deg, #16a34a, #15803d) !important;
    box-shadow: 0 12px 24px rgba(22, 163, 74, 0.2) !important;
}

[data-theme="dark"] .excel-export-popup__panel {
    border-color: rgba(74, 222, 128, 0.18);
    background:
        linear-gradient(180deg, rgba(15, 23, 42, 0.96), rgba(2, 6, 23, 0.97)),
        radial-gradient(circle at 8% 0%, rgba(34, 197, 94, 0.14), transparent 36%);
}

[data-theme="dark"] .excel-export-choice {
    border-color: rgba(148, 163, 184, 0.16);
    background: rgba(15, 23, 42, 0.76);
}

[data-theme="dark"] .excel-export-filename__control {
    border-color: rgba(74, 222, 128, 0.2);
    background: rgba(15, 23, 42, 0.78);
}

[data-theme="dark"] .excel-export-filename__control i,
[data-theme="dark"] .excel-export-filename__control small {
    color: #86efac;
}

[data-theme="dark"] .excel-export-choice.is-selected {
    border-color: rgba(74, 222, 128, 0.42);
    background: rgba(20, 83, 45, 0.38);
}

[data-theme="dark"] .excel-export-choice:hover {
    box-shadow: 0 16px 32px rgba(0, 0, 0, 0.22);
}

@media (max-width: 640px) {
    .invoice-table-actions {
        width: 100%;
        justify-content: flex-start;
    }

    .btn-create-excel,
    #btn-table-cargar-factura,
    #btn-delete-all-invoices {
        flex: 1 1 150px;
    }

    .excel-export-popup__panel {
        padding: 1.45rem;
    }

    .excel-export-choice {
        grid-template-columns: 40px minmax(0, 1fr) 20px;
        padding: 0.75rem;
    }

    .excel-export-choice__icon {
        width: 38px;
        height: 38px;
    }
}

.ai-config-popup__panel {
    width: min(92vw, 560px);
    text-align: left;
}

.ai-config-popup__close {
    position: absolute;
    top: 1rem;
    right: 1rem;
}

.ai-config-popup__icon {
    margin: 0 auto 0.7rem;
}

.ai-config-form {
    display: grid;
    gap: 0.85rem;
    margin-top: 1rem;
}

.ai-config-form .form-group {
    display: grid;
    gap: 0.35rem;
}

.ai-model-table {
    border: 1px solid rgba(148, 163, 184, 0.22);
    border-radius: 16px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.78);
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.06);
}

.ai-model-table__row {
    display: grid;
    grid-template-columns: minmax(0, 1.8fr) 120px 110px;
    gap: 0.75rem;
    align-items: center;
}

.ai-model-table__row--header {
    padding: 0.85rem 1rem;
    background: linear-gradient(135deg, rgba(239, 246, 255, 0.95), rgba(248, 250, 252, 0.96));
    border-bottom: 1px solid rgba(148, 163, 184, 0.18);
    font-size: 0.76rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #475569;
}

.ai-model-table__body {
    max-height: 260px;
    overflow: auto;
}

.ai-model-table__item {
    width: 100%;
    border: 0;
    background: transparent;
    padding: 0.9rem 1rem;
    text-align: left;
    cursor: pointer;
    transition: background 0.18s ease, box-shadow 0.18s ease;
    border-bottom: 1px solid rgba(226, 232, 240, 0.85);
}
.ai-model-table__empty {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 1rem;
    min-height: 64px;
    color: #64748b;
    font-size: 0.86rem;
    font-weight: 700;
}

.ai-model-table__empty i {
    color: #3b82f6;
}

.ai-model-table__empty--error {
    color: #991b1b;
    background: rgba(254, 242, 242, 0.82);
}

.ai-model-table__empty--error i {
    color: #ef4444;
}

.ai-model-table__item:last-child {
    border-bottom: 0;
}

.ai-model-table__item:hover {
    background: rgba(248, 250, 252, 0.9);
}

.ai-model-table__item.is-selected {
    background: rgba(219, 234, 254, 0.76);
    box-shadow: inset 0 0 0 1px rgba(59, 130, 246, 0.24);
}

.ai-model-table__model {
    display: grid;
    gap: 0.2rem;
    min-width: 0;
}

.ai-model-table__model-id {
    font-size: 0.94rem;
    font-weight: 700;
    color: #0f172a;
    word-break: break-word;
}

.ai-model-table__model-note {
    font-size: 0.76rem;
    color: #64748b;
}

.ai-model-table__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 28px;
    padding: 0.35rem 0.55rem;
    border-radius: 999px;
    font-size: 0.74rem;
    font-weight: 700;
    white-space: nowrap;
}

.ai-model-table__badge--recommended {
    background: rgba(37, 99, 235, 0.12);
    color: #1d4ed8;
}

.ai-model-table__badge--verified {
    background: rgba(16, 185, 129, 0.12);
    color: #047857;
}

.ai-model-table__badge--muted {
    background: rgba(148, 163, 184, 0.14);
    color: #64748b;
}

.ai-config-popup__hint {
    color: var(--text-muted);
    font-size: 0.72rem;
}

.ai-config-popup__status {
    min-height: 42px;
    border: 1px solid rgba(148, 163, 184, 0.28);
    border-radius: 8px;
    padding: 0.7rem 0.8rem;
    color: #475569;
    background: rgba(248, 250, 252, 0.78);
    font-size: 0.82rem;
    line-height: 1.35;
}

.ai-config-popup__status.is-success {
    border-color: rgba(16, 185, 129, 0.36);
    color: #047857;
    background: rgba(236, 253, 245, 0.78);
}

.ai-config-popup__status.is-error {
    border-color: rgba(239, 68, 68, 0.34);
    color: #b91c1c;
    background: rgba(254, 242, 242, 0.86);
}

.ai-config-popup__status.is-loading {
    border-color: rgba(59, 130, 246, 0.32);
    color: #1d4ed8;
    background: rgba(239, 246, 255, 0.84);
}

.ai-config-popup__credit {
    display: grid;
    gap: 0.9rem;
    padding: 1rem;
    border: 1px solid rgba(96, 165, 250, 0.18);
    border-radius: 18px;
    background:
        radial-gradient(circle at top right, rgba(96, 165, 250, 0.14), transparent 32%),
        linear-gradient(135deg, rgba(248, 250, 252, 0.96), rgba(239, 246, 255, 0.88));
    box-shadow: 0 20px 45px rgba(15, 23, 42, 0.08);
}

.ai-config-popup__credit-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}

.ai-config-popup__credit-eyebrow {
    display: inline-block;
    margin-bottom: 0.15rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #2563eb;
}

.ai-config-popup__credit-title {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    color: #0f172a;
}

.ai-config-popup__credit-icon {
    width: 42px;
    height: 42px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #2563eb;
    background: rgba(37, 99, 235, 0.12);
    box-shadow: inset 0 0 0 1px rgba(37, 99, 235, 0.12);
}

.ai-config-popup__credit-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
}

.ai-config-popup__credit-card {
    display: grid;
    gap: 0.35rem;
    padding: 0.8rem 0.85rem;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid rgba(148, 163, 184, 0.14);
}

.ai-config-popup__credit-card--highlight {
    background: linear-gradient(135deg, rgba(219, 234, 254, 0.92), rgba(239, 246, 255, 0.96));
    border-color: rgba(96, 165, 250, 0.28);
}

.ai-config-popup__credit-label {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: #64748b;
}

.ai-config-popup__credit-card strong {
    color: #0f172a;
    font-size: 0.98rem;
    line-height: 1.2;
}

.ai-config-popup__actions {
    align-items: stretch;
}

.ai-config-popup__actions .btn-premium {
    min-height: 42px;
}

.admin-ai-overview {
    position: relative;
    overflow: hidden;
    margin-bottom: 1.5rem;
    padding: clamp(1.25rem, 3vw, 2.25rem);
    border: 1px solid rgba(96, 165, 250, 0.24);
    border-radius: 24px;
    background:
        radial-gradient(circle at 92% 8%, rgba(45, 212, 191, 0.18), transparent 30%),
        radial-gradient(circle at 5% 100%, rgba(59, 130, 246, 0.16), transparent 38%),
        linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(239, 246, 255, 0.92));
    box-shadow: 0 24px 54px rgba(37, 99, 235, 0.1);
}

.admin-ai-overview.is-updating {
    animation: admin-ai-overview-refresh 850ms ease-out;
}

@keyframes admin-ai-overview-refresh {
    0% {
        filter: brightness(1);
        transform: translateY(0);
    }

    45% {
        filter: brightness(1.04);
        transform: translateY(-2px);
    }

    100% {
        filter: brightness(1);
        transform: translateY(0);
    }
}

.admin-ai-overview::after {
    content: "";
    position: absolute;
    right: -6rem;
    bottom: -7rem;
    width: 16rem;
    height: 16rem;
    border: 1px solid rgba(96, 165, 250, 0.2);
    border-radius: 50%;
    box-shadow: 0 0 0 26px rgba(96, 165, 250, 0.05), 0 0 0 52px rgba(96, 165, 250, 0.03);
    pointer-events: none;
}

.admin-ai-overview__hero,
.admin-ai-overview__grid {
    position: relative;
    z-index: 1;
}

.admin-ai-overview__hero {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.admin-ai-overview__eyebrow,
.admin-ai-overview__future {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    color: #2563eb;
    font-size: 0.72rem;
    font-weight: 850;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.admin-ai-overview__hero h2 {
    margin: 0.35rem 0 0;
    color: #10213f;
    font-family: var(--font-outfit);
    font-size: clamp(1.45rem, 3vw, 2rem);
    line-height: 1.1;
}

.admin-ai-overview__hero p {
    max-width: 42rem;
    margin: 0.5rem 0 0;
    color: #526987;
    font-size: 0.92rem;
    line-height: 1.55;
}

.admin-ai-overview__future {
    padding: 0.48rem 0.7rem;
    border: 1px solid rgba(45, 212, 191, 0.28);
    border-radius: 999px;
    background: rgba(240, 253, 250, 0.78);
    color: #0f766e;
    letter-spacing: 0.02em;
    text-transform: none;
    white-space: nowrap;
}

.admin-ai-overview__grid {
    display: grid;
    grid-template-columns: minmax(15rem, 1.25fr) repeat(2, minmax(11rem, 1fr));
    gap: 0.85rem;
}

.admin-ai-overview__status-card,
.admin-ai-overview__info-card {
    min-height: 9.5rem;
    padding: 1.1rem;
    border: 1px solid rgba(148, 163, 184, 0.2);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.76);
    box-shadow: 0 12px 24px rgba(30, 64, 175, 0.05);
}

.admin-ai-overview__status-card {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    background: linear-gradient(135deg, rgba(239, 246, 255, 0.94), rgba(255, 255, 255, 0.84));
}

.admin-ai-overview__icon {
    display: inline-flex;
    width: 2.5rem;
    height: 2.5rem;
    flex: 0 0 2.5rem;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: #dbeafe;
    color: #2563eb;
}

.admin-ai-overview__icon .fa-triangle-exclamation {
    color: #d97706;
}

.admin-ai-overview__label {
    display: block;
    margin-bottom: 0.45rem;
    color: #64748b;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.admin-ai-overview strong {
    display: block;
    overflow-wrap: anywhere;
    color: #10213f;
    font-family: var(--font-outfit);
    font-size: 1rem;
    font-weight: 850;
    line-height: 1.25;
}

.admin-ai-overview small {
    display: block;
    margin-top: 0.45rem;
    color: #60738f;
    font-size: 0.78rem;
    line-height: 1.45;
}

@media (max-width: 900px) {
    .admin-ai-overview__hero {
        flex-direction: column;
    }

    .admin-ai-overview__future {
        white-space: normal;
    }

    .admin-ai-overview__grid {
        grid-template-columns: 1fr;
    }
}

.ai-config-popup__load-btn {
    margin-top: 0.55rem;
}

.ai-config-popup .btn-premium:disabled {
    opacity: 1;
    border-color: #cbd5e1;
    background: #e2e8f0;
    color: #64748b !important;
    box-shadow: none;
    cursor: not-allowed;
}

.ai-config-popup .btn-premium:disabled i {
    color: #94a3b8;
}

[data-theme="dark"] .ai-config-popup__status {
    background: rgba(15, 23, 42, 0.74);
    color: #cbd5e1;
}

[data-theme="dark"] .ai-model-table {
    background: rgba(15, 23, 42, 0.72);
    border-color: rgba(96, 165, 250, 0.12);
    box-shadow: 0 16px 34px rgba(2, 6, 23, 0.3);
}

[data-theme="dark"] .ai-model-table__row--header {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.92), rgba(15, 23, 42, 0.94));
    border-bottom-color: rgba(96, 165, 250, 0.12);
    color: #94a3b8;
}

[data-theme="dark"] .ai-model-table__item {
    border-bottom-color: rgba(51, 65, 85, 0.82);
}

[data-theme="dark"] .ai-model-table__item:hover {
    background: rgba(30, 41, 59, 0.62);
}

[data-theme="dark"] .ai-model-table__item.is-selected {
    background: rgba(30, 64, 175, 0.24);
    box-shadow: inset 0 0 0 1px rgba(96, 165, 250, 0.24);
}

[data-theme="dark"] .ai-model-table__model-id {
    color: #f8fafc;
}

[data-theme="dark"] .ai-model-table__model-note {
    color: #94a3b8;
}

[data-theme="dark"] .ai-config-popup__credit {
    background:
        radial-gradient(circle at top right, rgba(59, 130, 246, 0.18), transparent 36%),
        linear-gradient(135deg, rgba(15, 23, 42, 0.92), rgba(30, 41, 59, 0.88));
    border-color: rgba(96, 165, 250, 0.18);
    box-shadow: 0 20px 45px rgba(2, 6, 23, 0.35);
}

[data-theme="dark"] .ai-config-popup__credit-title {
    color: #f8fafc;
}

[data-theme="dark"] .ai-config-popup__credit-card {
    background: rgba(15, 23, 42, 0.54);
    border-color: rgba(148, 163, 184, 0.12);
}

[data-theme="dark"] .ai-config-popup__credit-card--highlight {
    background: linear-gradient(135deg, rgba(30, 64, 175, 0.32), rgba(15, 23, 42, 0.72));
    border-color: rgba(96, 165, 250, 0.24);
}

[data-theme="dark"] .ai-config-popup__credit-label {
    color: #94a3b8;
}

[data-theme="dark"] .ai-config-popup__credit-card strong {
    color: #f8fafc;
}

@media (max-width: 640px) {
    .ai-model-table__row {
        grid-template-columns: minmax(0, 1fr);
    }

    .ai-model-table__row--header {
        display: none;
    }

    .ai-config-popup__credit-grid {
        grid-template-columns: 1fr;
    }
}

.ai-active-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    margin-top: 0.7rem;
    padding: 0.55rem 0.8rem;
    border-radius: 999px;
    border: 1px solid rgba(59, 130, 246, 0.18);
    background: rgba(239, 246, 255, 0.86);
    color: #1e3a8a;
    font-size: 0.82rem;
    line-height: 1.2;
}

.ai-active-badge i {
    color: #2563eb;
}

.ai-active-badge strong {
    color: #0f172a;
}

[data-theme="dark"] .ai-active-badge {
    background: rgba(30, 41, 59, 0.72);
    border-color: rgba(96, 165, 250, 0.22);
    color: #bfdbfe;
}

[data-theme="dark"] .ai-active-badge strong {
    color: #f8fafc;
}

/* --- MULTIPLE TAX RATE TABLES AND BADGES --- */
.tax-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 0.65rem;
    font-size: 0.84rem;
    background: #ffffff;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid rgba(148, 163, 184, 0.16);
}

.tax-table th {
    background: #f1f5f9;
    color: #475569;
    font-weight: 800;
    text-transform: uppercase;
    font-size: 0.68rem;
    letter-spacing: 0.05em;
    padding: 0.55rem 0.75rem;
    text-align: left;
}

.tax-table td {
    padding: 0.6rem 0.75rem;
    border-bottom: 1px solid rgba(148, 163, 184, 0.1);
    color: #334155;
}

.tax-table tr:last-child td {
    border-bottom: none;
}

.tax-rate-badge {
    display: inline-block;
    padding: 0.15rem 0.45rem;
    border-radius: 6px;
    font-weight: 800;
    font-size: 0.72rem;
    background: #e0f2fe;
    color: #0369a1;
}

.tax-badge-alert {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: #fffbeb;
    border: 1px solid #fef3c7;
    color: #d97706;
    padding: 0.55rem 0.75rem;
    border-radius: 8px;
    font-size: 0.76rem;
    font-weight: 800;
    margin-bottom: 0.65rem;
    box-shadow: 0 4px 12px rgba(217, 119, 6, 0.05);
}

.tax-badge-alert i {
    font-size: 0.9rem;
}

.tax-row--raw td {
    background: #f8fafc;
    font-style: italic;
    color: #64748b;
}

.text-right {
    text-align: right;
}

/* Dark mode styling overrides */
[data-theme="dark"] .tax-table {
    background: #1e293b;
    border-color: rgba(148, 163, 184, 0.12);
}

[data-theme="dark"] .tax-table th {
    background: #0f172a;
    color: #94a3b8;
}

[data-theme="dark"] .tax-table td {
    color: #cbd5e1;
    border-color: rgba(148, 163, 184, 0.08);
}

[data-theme="dark"] .tax-rate-badge {
    background: #0369a1;
    color: #e0f2fe;
}

[data-theme="dark"] .tax-badge-alert {
    background: rgba(120, 53, 15, 0.2);
    border-color: rgba(245, 158, 11, 0.2);
    color: #fbbf24;
}

[data-theme="dark"] .tax-row--raw td {
    background: #0f172a;
    color: #64748b;
}

/* --- TAX / RETENTION SECTION LABELS --- */
.tax-section-label,
.tree-tax-section-label {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.7rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #3b82f6;
    margin-bottom: 0.4rem;
}

.tax-section-label--retention,
.tree-tax-section-label--retention {
    color: #f59e0b;
    margin-top: 0.75rem;
}

.tree-tax-section-label + table {
    margin-bottom: 0;
}

/* Retention badge variant */
.tax-rate-badge--retention {
    background: rgba(245, 158, 11, 0.12);
    color: #b45309;
    border: 1px solid rgba(245, 158, 11, 0.3);
}

/* Retention table accent */
.tax-table--retention thead th {
    background: rgba(245, 158, 11, 0.06);
    color: #b45309;
}

.tax-table--retention tr td:last-child strong,
.tree-tax-table--retention tr td:last-child strong {
    color: #b45309;
}

/* Dark mode overrides for labels and retention */
[data-theme="dark"] .tax-section-label,
[data-theme="dark"] .tree-tax-section-label {
    color: #60a5fa;
}

[data-theme="dark"] .tax-section-label--retention,
[data-theme="dark"] .tree-tax-section-label--retention {
    color: #fbbf24;
}

[data-theme="dark"] .tax-rate-badge--retention {
    background: rgba(245, 158, 11, 0.15);
    color: #fbbf24;
    border-color: rgba(245, 158, 11, 0.2);
}

[data-theme="dark"] .tax-table--retention thead th {
    background: rgba(245, 158, 11, 0.05);
    color: #fbbf24;
}
.invoice-tree-row {
    background: #f8fafc;
    transition: background 0.25s ease;
}

.invoice-tree-row--sale {
    background: rgba(96, 165, 250, 0.035);
}

.invoice-tree-row--purchase {
    background: rgba(34, 197, 94, 0.025);
}

.invoice-tree-cell {
    padding: 0.75rem 1.5rem 1.25rem 1.5rem !important;
    border-bottom: 2px solid rgba(148, 163, 184, 0.16) !important;
}

.invoice-tree-content {
    background: #ffffff;
    border: 1px solid rgba(148, 163, 184, 0.2);
    border-radius: 12px;
    padding: 1.25rem;
    box-shadow: 0 4px 20px rgba(15, 23, 42, 0.04);
}

.invoice-tree-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin: -0.15rem 0 1rem;
    padding-bottom: 0.85rem;
    border-bottom: 1px solid rgba(148, 163, 184, 0.16);
}

.invoice-tree-toolbar__label {
    display: inline-flex;
    align-items: center;
    gap: 0.42rem;
    color: #64748b;
    font-family: var(--font-outfit);
    font-size: 0.68rem;
    font-weight: 850;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.invoice-tree-toolbar__label i {
    color: #2563eb;
}

.invoice-tree-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.42rem;
    min-height: 32px;
    padding: 0.42rem 0.72rem;
    border: 1px solid #d1d5db;
    border-radius: 9px;
    background: #ffffff;
    color: #111827;
    cursor: pointer;
    font-family: var(--font-outfit);
    font-size: 0.72rem;
    font-weight: 850;
    transition: transform 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
}

.invoice-tree-close:hover {
    background: #f9fafb;
    border-color: #9ca3af;
    box-shadow: 0 7px 16px rgba(15, 23, 42, 0.1);
    color: #111827;
    transform: translateY(-1px);
}

.invoice-tree-close:focus-visible {
    outline: 3px solid rgba(59, 130, 246, 0.35);
    outline-offset: 2px;
}

.invoice-tree-grid {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 1.5rem;
}

.tree-heading {
    margin: 0 0 0.75rem 0;
    font-size: 0.85rem;
    font-weight: 800;
    color: var(--text-primary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.tree-heading i {
    color: var(--color-primary);
}

.tree-tax-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8rem;
    border: 1px solid rgba(148, 163, 184, 0.12);
    border-radius: 6px;
    overflow: hidden;
}

.tree-tax-table th {
    background: #f8fafc;
    color: #64748b;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.64rem;
    letter-spacing: 0.05em;
    padding: 0.45rem 0.6rem;
    text-align: left;
    border-bottom: 1px solid rgba(148, 163, 184, 0.12);
}

.tree-tax-table td {
    padding: 0.5rem 0.6rem;
    border-bottom: 1px solid rgba(148, 163, 184, 0.08);
    color: #475569;
}

.tree-tax-table tr:last-child td {
    border-bottom: none;
}

.tree-tax-raw td {
    background: #f8fafc;
    font-style: italic;
    color: #94a3b8;
}

.tree-empty-msg {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    color: #94a3b8;
    font-size: 0.78rem;
    padding: 0.50rem;
    border: 1px dashed rgba(148, 163, 184, 0.22);
    border-radius: 6px;
    background: #f8fafc;
}

.tree-totals-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.55rem;
    background: #f8fafc;
    border: 1px solid rgba(148, 163, 184, 0.12);
    border-radius: 8px;
    padding: 0.85rem;
}

.tree-total-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.78rem;
    color: #475569;
}

.tree-total-item span {
    font-weight: 500;
}

.tree-total-item strong {
    color: #1e293b;
    font-weight: 700;
}

.tree-total-item--grand {
    margin-top: 0.6rem;
    padding: 0.6rem 0.9rem;
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
    border-radius: 10px;
    border: none;
    font-size: 0.88rem;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.18);
}

.tree-total-item--grand span {
    font-weight: 800;
    color: rgba(255, 255, 255, 0.72);
    letter-spacing: 0.03em;
}

.tree-total-item--grand strong {
    color: #ffffff;
    font-family: var(--font-outfit);
    font-size: 1.05rem;
    font-weight: 900;
    letter-spacing: -0.02em;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
}

.invoice-grid-row.is-expanded {
    background: rgba(15, 23, 42, 0.015) !important;
}

.invoice-grid-row.is-expanded .tree-toggle-arrow {
    transform: rotate(90deg);
}

/* Dark mode overrides for grid tree */
[data-theme="dark"] .invoice-tree-row {
    background: #1e293b;
}

[data-theme="dark"] .invoice-tree-row--sale {
    background: rgba(96, 165, 250, 0.02);
}

[data-theme="dark"] .invoice-tree-row--purchase {
    background: rgba(34, 197, 94, 0.015);
}

[data-theme="dark"] .invoice-tree-content {
    background: #0f172a;
    border-color: rgba(148, 163, 184, 0.1);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

[data-theme="dark"] .invoice-tree-toolbar {
    border-color: rgba(148, 163, 184, 0.12);
}

[data-theme="dark"] .invoice-tree-close {
    border-color: #d1d5db;
    background: #ffffff;
    color: #111827;
}

[data-theme="dark"] .tree-tax-table {
    border-color: rgba(148, 163, 184, 0.08);
}

[data-theme="dark"] .tree-tax-table th {
    background: #1e293b;
    color: #94a3b8;
    border-color: rgba(148, 163, 184, 0.08);
}

[data-theme="dark"] .tree-tax-table td {
    color: #cbd5e1;
    border-color: rgba(148, 163, 184, 0.04);
}

[data-theme="dark"] .tree-tax-raw td {
    background: #1e293b;
    color: #64748b;
}

[data-theme="dark"] .tree-empty-msg {
    background: #1e293b;
    border-color: rgba(148, 163, 184, 0.12);
}

[data-theme="dark"] .tree-totals-grid {
    background: #1e293b;
    border-color: rgba(148, 163, 184, 0.08);
}

[data-theme="dark"] .tree-total-item {
    color: #94a3b8;
}

[data-theme="dark"] .tree-total-item strong {
    color: #f8fafc;
}

[data-theme="dark"] .tree-total-item--grand {
    background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
}

[data-theme="dark"] .tree-total-item--grand span {
    color: rgba(255, 255, 255, 0.6);
}

[data-theme="dark"] .tree-total-item--grand strong {
    color: #ffffff;
}

[data-theme="dark"] .invoice-grid-row.is-expanded {
    background: rgba(255, 255, 255, 0.01) !important;
}

@media (max-width: 768px) {
    .invoice-tree-grid {
        grid-template-columns: 1fr;
        gap: 1.25rem;
    }

    .invoice-tree-toolbar { margin-bottom: 0.85rem; }
}
.table-tab[hidden] {
    display: none !important;
}