:root {
    --sia-primary: #009ba4;
    --sia-secondary: #3066be;
    --sia-canvas: #f5f6fa;
    --sia-surface: #ffffff;
    --sia-surface-subtle: #f8fafc;
    --sia-border: #e2e8f0;
    --sia-text: #1e293b;
    --sia-muted: #64748b;
    --sia-dark-canvas: #100c1d;
    --sia-dark-surface: #262432;
    --sia-dark-elevated: #3d3b48;
    --sia-dark-border: rgb(255 255 255 / 0.1);
    font-size: var(--sia-font-scale, 88%);
}

.dark {
    --sia-canvas: var(--sia-dark-canvas);
    --sia-surface: var(--sia-dark-surface);
    --sia-surface-subtle: var(--sia-dark-elevated);
    --sia-border: var(--sia-dark-border);
    --sia-text: #f8fafc;
    --sia-muted: #cbd5e1;
}

.fi-body,
.fi-main,
.fi-main-ctn {
    background: var(--sia-canvas);
}

.fi-topbar {
    border: 0;
    background: var(--sia-surface);
    box-shadow: none;
}

.fi-topbar-end {
    width: auto;
    min-width: 0;
}

.fi-topbar-collapse-sidebar-btn-ctn {
    display: flex;
    order: 2;
    width: 2.25rem;
    flex: 0 0 2.25rem;
    align-items: center;
    justify-content: center;
}

.fi-topbar-start {
    align-items: center;
    gap: 0.5rem;
}

.fi-topbar-start > a,
.fi-topbar-start > .fi-logo {
    order: 1;
}

.fi-global-search .fi-input-wrp {
    border: 0;
    border-radius: 9999px;
    background: var(--sia-surface-subtle);
}

.fi-sidebar {
    border: 0;
    background: var(--sia-surface);
}

.fi-sidebar-header {
    border: 0;
    background: var(--sia-surface);
}

/* Filament aplica x-cloak a la barra contraible mientras Alpine se inicializa.
   En escritorio debe permanecer visible desde la primera pintura. */
@media (min-width: 1024px) {
    .fi-main-sidebar[x-cloak] {
        display: flex !important;
        width: var(--sidebar-width) !important;
        transform: translateX(0) !important;
        transition: none !important;
    }

    .fi-main-sidebar[x-cloak] .fi-sidebar-nav {
        padding-inline: 1rem !important;
    }

    .fi-main-sidebar[x-cloak] .fi-sidebar-nav-groups {
        width: 100% !important;
    }

    .fi-main-sidebar[x-cloak] .fi-sidebar-item-btn {
        justify-content: flex-start !important;
        padding-inline: 0.75rem !important;
    }
}

.fi-sidebar-nav {
    overflow-x: hidden;
    padding: 1rem;
    background: var(--sia-surface);
}

.fi-sidebar-nav-groups {
    width: 100%;
    margin-inline: 0;
    gap: 1rem;
}

.fi-sidebar-group + .fi-sidebar-group {
    border: 0;
    padding-top: 0.5rem;
}

.fi-sidebar-group-btn {
    padding: 0.5rem 0.75rem;
    color: var(--sia-muted);
}

.fi-sidebar-group-label {
    color: var(--sia-muted);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.fi-sidebar-item {
    padding-inline: 0;
}

.fi-sidebar-item-btn {
    min-width: 0;
    gap: 0.75rem;
    border-radius: 0.75rem;
    padding: 0.7rem 0.75rem;
    color: var(--sia-text);
    font-weight: 600;
}

.fi-sidebar-item-btn:hover {
    background: color-mix(in srgb, var(--sia-primary) 9%, transparent);
    color: var(--sia-primary);
}

.fi-sidebar-item.fi-active > .fi-sidebar-item-btn {
    background: var(--sia-primary);
    color: #fff;
}

.fi-sidebar-item.fi-active > .fi-sidebar-item-btn :is(.fi-sidebar-item-label, .fi-sidebar-item-icon, .fi-icon) {
    color: #fff !important;
}

.fi-sidebar-item.fi-active > .fi-sidebar-item-btn .fi-icon,
.fi-sidebar-item.fi-active > .fi-sidebar-item-btn .fi-badge {
    color: #fff;
}

@media (min-width: 1024px) {
    .fi-sidebar:not(.fi-sidebar-open) .fi-sidebar-header-logo-ctn {
        display: none !important;
    }

    .fi-sidebar:not(.fi-sidebar-open) .fi-sidebar-header {
        justify-content: center;
    }

    .fi-sidebar:not(.fi-sidebar-open) .fi-sidebar-open-collapse-sidebar-btn svg {
        display: none;
    }

    .fi-sidebar:not(.fi-sidebar-open) .fi-sidebar-open-collapse-sidebar-btn::before {
        content: "☰";
        display: block;
        color: var(--sia-text);
        font-size: 1.45rem;
        font-weight: 700;
        line-height: 1;
    }

    .fi-sidebar:not(.fi-sidebar-open) .fi-sidebar-nav {
        padding-inline: 0.5rem;
    }

    .fi-sidebar:not(.fi-sidebar-open) .fi-sidebar-item-btn {
        justify-content: center;
        padding-inline: 0.5rem;
    }
}

.fi-page-header-main-ctn {
    gap: 1.5rem;
}

.fi-header-heading,
.fi-page-header-heading {
    color: var(--sia-text);
    font-weight: 700;
    letter-spacing: -0.02em;
}

.fi-section,
.fi-ta-ctn,
.fi-wi-stats-overview-stat,
.fi-dropdown-panel,
.fi-modal-window {
    border: 1px solid var(--sia-border);
    border-radius: 1rem;
    background: var(--sia-surface);
    box-shadow: 0 1px 2px rgb(15 23 42 / 0.04);
}

.fi-section-header,
.fi-ta-header,
.fi-ta-header-toolbar {
    border-color: transparent;
}

.fi-wi-widget > .fi-section .fi-section-header-heading,
.fi-ta-header-heading {
    font-weight: 700;
}

/* StatsOverview usa una sección estructural sin contenedor. Las tarjetas son las
   estadísticas individuales, por lo que no se debe dibujar una tarjeta exterior. */
.fi-wi-stats-overview > .fi-section {
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.fi-ta-content {
    padding: 0.75rem;
}

.fi-ta-table > thead > tr > th {
    background: color-mix(in srgb, var(--sia-primary) 7%, var(--sia-surface-subtle));
}

.fi-ta-table > thead > tr > th:first-child { border-radius: 0.75rem 0 0 0.75rem; }
.fi-ta-table > thead > tr > th:last-child { border-radius: 0 0.75rem 0.75rem 0; }
.fi-ta-row > .fi-ta-cell { padding-block: 0.45rem; }

.fi-btn { border-radius: 0.625rem; font-weight: 650; }
.fi-input-wrp,
.fi-select-input,
.fi-fo-field-wrp-input { border-radius: 0.625rem; }
.fi-input-wrp { background: var(--sia-surface-subtle); }
.fi-checkbox-input { border-radius: 0.375rem; }
.fi-modal-header { border-radius: 1rem 1rem 0 0; }

.dark .fi-body,
.dark .fi-main,
.dark .fi-main-ctn { background: var(--sia-dark-canvas); }

.dark .fi-topbar,
.dark .fi-sidebar,
.dark .fi-sidebar-header,
.dark .fi-sidebar-nav,
.dark .fi-section,
.dark .fi-ta-ctn,
.dark .fi-wi-stats-overview-stat,
.dark .fi-dropdown-panel,
.dark .fi-modal-window { border-color: var(--sia-dark-border); background: var(--sia-dark-surface); }

.dark .fi-sidebar-group-label { color: #cbd5e1; }
.dark .fi-sidebar-item-btn { color: #f8fafc; }
.dark .fi-sidebar-item-btn:hover { background: var(--sia-dark-elevated); color: #fff; }
.dark .fi-wi-stats-overview > .fi-section { border: 0; background: transparent; }

/* En Filament 4 la sección del resumen está dentro de fi-sc-section. El
   contenedor es estructural; solo las estadísticas deben verse como tarjetas. */
.fi-wi-stats-overview > .fi-sc-section > .fi-section {
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.fi-wi-stats-overview > .fi-sc-section > .fi-section > .fi-section-content-ctn {
    padding: 0;
}

.fi-wi-stats-overview .fi-section-content {
    gap: 1rem;
}

.fi-wi-stats-overview-stat {
    min-height: 10.75rem;
    border: 1px solid color-mix(in srgb, var(--sia-border) 90%, transparent);
    border-radius: .9rem;
    background: var(--sia-surface);
    box-shadow: 0 .2rem .7rem rgb(15 23 42 / .045);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.fi-wi-stats-overview-stat:hover {
    transform: translateY(-2px);
    border-color: color-mix(in srgb, var(--sia-primary) 32%, var(--sia-border));
    box-shadow: 0 .7rem 1.35rem rgb(15 23 42 / .09);
}

.fi-wi-stats-overview-stat-value {
    letter-spacing: -.035em;
}

.dark .fi-wi-stats-overview > .fi-sc-section > .fi-section { border: 0; background: transparent; }
.dark .fi-wi-stats-overview-stat { border-color: var(--sia-dark-border); background: var(--sia-dark-surface); }
.dark .fi-wi-stats-overview-stat:hover { border-color: color-mix(in srgb, var(--sia-primary) 42%, var(--sia-dark-border)); box-shadow: 0 .7rem 1.35rem rgb(0 0 0 / .22); }
.dark .fi-sidebar-item.fi-active > .fi-sidebar-item-btn { background: var(--sia-primary); color: #fff; }
.dark .fi-header-heading,
.dark .fi-page-header-heading { color: #fff; }
.dark .fi-input-wrp,
.dark .fi-select-input,
.dark .fi-fo-field-wrp-input { background: var(--sia-dark-elevated); }
.dark .fi-ta-table > thead > tr > th { background: var(--sia-dark-elevated); }

::-webkit-scrollbar { width: 0.5rem; height: 0.5rem; }
::-webkit-scrollbar-track { background: var(--sia-canvas); }
::-webkit-scrollbar-thumb { border-radius: 9999px; background: #cbd5e1; }
.dark ::-webkit-scrollbar-track { background: var(--sia-dark-canvas); }
.dark ::-webkit-scrollbar-thumb { background: #64748b; }

/* Inicio de sesión nativo de SIA para Filament 4. */
.fi-simple-layout > .fi-simple-main-ctn {
    position: relative;
}

.fi-simple-layout > .fi-simple-main-ctn::before {
    position: fixed;
    inset: 0;
    z-index: -1;
    background-color: #100c1d;
    background-image: var(--sia-login-background), linear-gradient(135deg, var(--sia-primary, #009ba4), #100c1d);
    background-position: center;
    background-size: cover;
    content: '';
}

.fi-simple-layout > .fi-simple-main-ctn > .fi-simple-main {
    position: relative;
    z-index: 1;
    border-radius: 1.5rem;
    background: var(--sia-login-surface, rgb(255 255 255 / 0.50));
    box-shadow: 0 1.5rem 3.5rem rgb(16 12 29 / 0.32);
    backdrop-filter: none;
    color: #0f172a;
}

.dark .fi-simple-layout > .fi-simple-main-ctn > .fi-simple-main {
    background: #fff;
    color: #0f172a;
}

.fi-simple-main .fi-simple-header-heading,
.fi-simple-main label,
.fi-simple-main legend {
    color: #0f172a;
}

.fi-simple-main .fi-simple-header-subheading,
.fi-simple-main [class*="hint"],
.fi-simple-main [class*="helper"] {
    color: #475569;
}

.fi-simple-main input,
.fi-simple-main select,
.fi-simple-main textarea {
    color: #0f172a;
}

.fi-simple-main input::placeholder,
.fi-simple-main textarea::placeholder {
    color: #64748b;
}

.dark .fi-simple-main .fi-simple-header-heading,
.dark .fi-simple-main label,
.dark .fi-simple-main legend {
    color: #0f172a;
}

.dark .fi-simple-main .fi-simple-header-subheading,
.dark .fi-simple-main [class*="hint"],
.dark .fi-simple-main [class*="helper"] {
    color: #475569;
}

.dark .fi-simple-main input,
.dark .fi-simple-main select,
.dark .fi-simple-main textarea {
    color: #0f172a;
    background: #fff;
}

.dark .fi-simple-main .fi-input-wrp,
.dark .fi-simple-main .fi-select-input,
.dark .fi-simple-main .fi-fo-field-wrp-input {
    background: #fff;
    border-color: #cbd5e1;
}

.dark .fi-simple-main input::placeholder,
.dark .fi-simple-main textarea::placeholder {
    color: #64748b;
}

/* Detalle de factura: bandas alternadas para separar cada ítem. */
.sia-factura-items-striped.fi-in-repeatable > .fi-in-repeatable-item {
    margin-block: 0.35rem;
    border: 1px solid transparent;
    border-radius: 0.75rem;
    padding: 0.85rem;
}
.sia-factura-items-striped.fi-in-repeatable > .fi-in-repeatable-item:nth-child(odd) {
    background: color-mix(in srgb, var(--sia-primary) 5%, var(--sia-surface));
    border-color: color-mix(in srgb, var(--sia-primary) 13%, var(--sia-border));
}
.sia-factura-items-striped.fi-in-repeatable > .fi-in-repeatable-item:nth-child(even) {
    background: var(--sia-surface-subtle);
    border-color: var(--sia-border);
}
.dark .sia-factura-items-striped.fi-in-repeatable > .fi-in-repeatable-item:nth-child(odd) {
    background: color-mix(in srgb, var(--sia-primary) 13%, var(--sia-dark-surface));
    border-color: color-mix(in srgb, var(--sia-primary) 28%, var(--sia-dark-border));
}
.dark .sia-factura-items-striped.fi-in-repeatable > .fi-in-repeatable-item:nth-child(even) {
    background: var(--sia-dark-elevated);
    border-color: var(--sia-dark-border);
}
/* Tarjetas Livewire de la pestaña Comercial del cliente. */
.sia-cliente-comercial { display: grid; gap: 1rem; }
.sia-cliente-comercial-heading { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.sia-cliente-comercial-heading h3 { margin: 0; color: var(--sia-text, #0f172a); font-size: 1rem; font-weight: 750; }
.sia-cliente-comercial-heading p { margin: .2rem 0 0; color: var(--sia-muted, #64748b); font-size: .875rem; }
.sia-cliente-comercial-live { display: inline-flex; align-items: center; gap: .35rem; color: var(--sia-primary); font-size: .75rem; font-weight: 700; white-space: nowrap; }
.sia-cliente-comercial-live svg { width: 1rem; height: 1rem; }
.sia-cliente-comercial-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .85rem; }
.sia-cliente-metric { min-width: 0; border: 1px solid var(--sia-border); border-radius: .9rem; padding: 1rem; background: var(--sia-surface); box-shadow: 0 .15rem .55rem rgb(15 23 42 / .04); }
.sia-cliente-metric p, .sia-cliente-metric small { display: block; margin: 0; color: var(--sia-muted, #64748b); }
.sia-cliente-metric p { margin-top: .85rem; font-size: .8rem; font-weight: 650; }
.sia-cliente-metric strong { display: block; margin: .3rem 0; color: var(--sia-text, #0f172a); font-size: 1.25rem; letter-spacing: -.025em; }
.sia-cliente-metric small { font-size: .72rem; line-height: 1.2; }
.sia-cliente-metric-icon { display: inline-grid; width: 2.25rem; height: 2.25rem; place-items: center; border-radius: .7rem; }
.sia-cliente-metric-icon svg { width: 1.2rem; height: 1.2rem; }
.sia-cliente-metric-primary { border-color: color-mix(in srgb, var(--sia-primary) 25%, var(--sia-border)); background: color-mix(in srgb, var(--sia-primary) 6%, var(--sia-surface)); }
.sia-cliente-metric-primary .sia-cliente-metric-icon { color: var(--sia-primary); background: color-mix(in srgb, var(--sia-primary) 14%, transparent); }
.sia-cliente-metric-success { border-color: #86efac; background: #f0fdf4; }
.sia-cliente-metric-success .sia-cliente-metric-icon { color: #15803d; background: #dcfce7; }
.sia-cliente-metric-warning { border-color: #fcd34d; background: #fffbeb; }
.sia-cliente-metric-warning .sia-cliente-metric-icon { color: #b45309; background: #fef3c7; }
.sia-cliente-metric-info { border-color: #93c5fd; background: #eff6ff; }
.sia-cliente-metric-info .sia-cliente-metric-icon { color: #1d4ed8; background: #dbeafe; }
.sia-cliente-metric-neutral .sia-cliente-metric-icon { color: #475569; background: #e2e8f0; }
.sia-cliente-ultima-factura { display: flex; align-items: center; flex-wrap: wrap; gap: .45rem; padding: .75rem 1rem; border-radius: .75rem; background: var(--sia-surface-subtle); color: var(--sia-muted, #64748b); font-size: .8rem; }
.sia-cliente-ultima-factura svg { width: 1.05rem; height: 1.05rem; color: var(--sia-primary); }
.sia-cliente-ultima-factura strong { color: var(--sia-text, #0f172a); }
.sia-cliente-ultima-factura small { margin-left: auto; }
.sia-cliente-comercial-empty { display: flex; align-items: center; gap: .75rem; border: 1px dashed var(--sia-border); border-radius: .9rem; padding: 1.2rem; color: var(--sia-muted, #64748b); }
.sia-cliente-comercial-empty svg { width: 1.5rem; height: 1.5rem; color: var(--sia-primary); }
.sia-cliente-comercial-empty strong { color: var(--sia-text, #0f172a); }
.sia-cliente-comercial-empty p { margin: .2rem 0 0; font-size: .8rem; }
.dark .sia-cliente-metric { border-color: var(--sia-dark-border); background: var(--sia-dark-surface); }
.dark .sia-cliente-metric strong, .dark .sia-cliente-comercial-heading h3, .dark .sia-cliente-ultima-factura strong, .dark .sia-cliente-comercial-empty strong { color: #f8fafc; }
.dark .sia-cliente-metric-success { border-color: #166534; background: rgb(20 83 45 / .32); }
.dark .sia-cliente-metric-success .sia-cliente-metric-icon { color: #86efac; background: rgb(22 163 74 / .20); }
.dark .sia-cliente-metric-warning { border-color: #92400e; background: rgb(120 53 15 / .28); }
.dark .sia-cliente-metric-warning .sia-cliente-metric-icon { color: #fcd34d; background: rgb(245 158 11 / .18); }
.dark .sia-cliente-metric-info { border-color: #1e40af; background: rgb(30 58 138 / .25); }
.dark .sia-cliente-metric-info .sia-cliente-metric-icon { color: #93c5fd; background: rgb(59 130 246 / .18); }
@media (max-width: 1024px) { .sia-cliente-comercial-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .sia-cliente-comercial-grid { grid-template-columns: 1fr; } .sia-cliente-comercial-heading { align-items: flex-start; flex-direction: column; } .sia-cliente-ultima-factura small { width: 100%; margin-left: 1.5rem; } }