/* ============================================================
   REPORTES SAT - SISTEMA VISUAL PARA REPORTES FISCALES
   Bootstrap se utiliza para estructura, grid, espaciado y
   comportamiento. Estas clases aportan identidad visual,
   contraste, semántica y presentación para reportes SAT.
   ============================================================ */


/* ============================================================
   1. DESIGN TOKENS
   ============================================================ */

:root {
    /* Colores institucionales */
    --sat-wine: #8a2948;
    --sat-wine-dark: #6f1f39;
    --sat-wine-light: #f5e9ed;
    /* Texto */
    --sat-text: #212529;
    --sat-text-muted: #6c757d;
    --sat-text-inverse: #ffffff;
    /* Superficies */
    --sat-background: #ffffff;
    --sat-background-soft: #f8f9fa;
    --sat-row-alt: #f3f3f3;
    --sat-row-hover: #f9eef2;
    /* Bordes */
    --sat-border: #dee2e6;
    --sat-border-width: 1px;
    /* Estados */
    --sat-success-background: #dcebe2;
    --sat-success-text: #1f5132;
    --sat-success-border: #badbcc;
    --sat-danger-background: #f6dfe3;
    --sat-danger-text: #842029;
    --sat-danger-border: #efb8c0;
    --sat-warning-background: #fff0c7;
    --sat-warning-text: #664d03;
    --sat-warning-border: #ffe69c;
    /* Geometría y profundidad */
    --sat-radius-sm: .35rem;
    --sat-radius-pill: 50rem;
    --sat-shadow-sm: 0 .125rem .35rem rgba(0, 0, 0, .08);
    --sat-focus-shadow: 0 0 0 .2rem rgba(138, 41, 72, .20);
    /* Espaciado */
    --sat-space-1: .25rem;
    --sat-space-2: .5rem;
    --sat-space-3: .75rem;
    --sat-space-4: 1rem;
    --sat-space-5: 1.25rem;
    --sat-space-6: 1.5rem;
}


/* ============================================================
   2. CONTENEDOR BASE
   ============================================================ */

.sat-report {
    color: var(--sat-text);
    background-color: var(--sat-background);
}


/* ============================================================
   3. ENCABEZADO GENERAL
   ============================================================ */

.sat-report-header {
    padding: var(--sat-space-5);
    background-color: var(--sat-background);
    border: var(--sat-border-width) solid var(--sat-border);
    border-radius: var(--sat-radius-sm);
    box-shadow: var(--sat-shadow-sm);
}

.sat-report-caption {
    display: block;
    margin-bottom: var(--sat-space-1);
    color: var(--sat-text-muted);
    font-size: .75rem;
    font-weight: 500;
    letter-spacing: .025rem;
    text-transform: uppercase;
}

.sat-report-company {
    margin-bottom: .35rem;
    color: var(--sat-text);
    font-size: 1.5rem;
    font-weight: 600;
}

.sat-report-rfc {
    margin-bottom: 0;
    color: var(--sat-text-muted);
    font-size: .95rem;
}


/* ============================================================
   4. INDICADORES DEL ENCABEZADO
   ============================================================ */

.sat-stat {
    min-width: 125px;
    padding: .65rem .9rem;
    background-color: var(--sat-background);
    border: var(--sat-border-width) solid var(--sat-border);
    border-radius: var(--sat-radius-sm);
    text-align: center;
}

.sat-stat-label {
    display: block;
    margin-bottom: .15rem;
    color: var(--sat-text-muted);
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .025rem;
    text-transform: uppercase;
}

.sat-stat-value {
    display: block;
    color: var(--sat-text);
    font-size: .95rem;
    font-weight: 700;
}


/* ============================================================
   5. ENCABEZADOS DE SECCIÓN
   ============================================================ */

.sat-section-title {
    margin: 0;
    padding: .85rem 1rem;
    background-color: var(--sat-wine);
    color: var(--sat-text-inverse);
    font-size: 1rem;
    font-weight: 600;
}

    .sat-section-title:hover {
        background-color: var(--sat-wine-dark);
    }


/* ============================================================
   6. ACCORDION ESTILO SAT
   Bootstrap controla la interacción; estas reglas definen
   únicamente la identidad visual.
   ============================================================ */

.sat-accordion {
    overflow: hidden;
    border: var(--sat-border-width) solid var(--sat-border);
    border-radius: var(--sat-radius-sm);
}

    .sat-accordion .accordion-item {
        border: 0;
        border-bottom: var(--sat-border-width) solid var(--sat-border);
    }

        .sat-accordion .accordion-item:last-child {
            border-bottom: 0;
        }

    .sat-accordion .accordion-button {
        padding: 1rem 1.25rem;
        background-color: var(--sat-background) !important;
        color: var(--sat-text) !important;
        font-size: 1rem;
        font-weight: 500;
        box-shadow: none !important;
    }

        .sat-accordion .accordion-button:not(.collapsed) {
            background-color: var(--sat-wine) !important;
            color: var(--sat-text-inverse) !important;
        }

        .sat-accordion .accordion-button:focus {
            border-color: var(--sat-wine);
            box-shadow: var(--sat-focus-shadow) !important;
        }

        .sat-accordion .accordion-button:not(.collapsed)::after {
            filter: brightness(0) invert(1);
        }

        .sat-accordion .accordion-button.collapsed::after {
            filter: none;
        }

    .sat-accordion .accordion-body {
        padding: var(--sat-space-6);
        background-color: var(--sat-background);
    }


/* ============================================================
   7. BLOQUE DESCRIPTIVO
   ============================================================ */

.sat-description {
    margin-bottom: var(--sat-space-6);
    padding: var(--sat-space-4);
    background-color: var(--sat-background);
    border: var(--sat-border-width) solid var(--sat-border);
    border-radius: var(--sat-radius-sm);
}

.sat-description-title {
    margin-bottom: .4rem;
    color: var(--sat-text);
    font-size: .95rem;
    font-weight: 600;
}

.sat-description-text {
    margin-bottom: 0;
    color: var(--sat-text-muted);
    font-size: .9rem;
    line-height: 1.55;
}


/* ============================================================
   8. BADGES SEMÁNTICOS
   No dependen de .badge de Bootstrap.
   ============================================================ */

.sat-badge {
    display: inline-block;
    padding: .3rem .6rem;
    border: var(--sat-border-width) solid transparent;
    border-radius: var(--sat-radius-pill);
    font-size: .75rem;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
}

.sat-badge-success {
    background-color: var(--sat-success-background);
    color: var(--sat-success-text);
    border-color: var(--sat-success-border);
}

.sat-badge-danger {
    background-color: var(--sat-danger-background);
    color: var(--sat-danger-text);
    border-color: var(--sat-danger-border);
}

.sat-badge-warning {
    background-color: var(--sat-warning-background);
    color: var(--sat-warning-text);
    border-color: var(--sat-warning-border);
}

.sat-badge-wine {
    background-color: var(--sat-wine);
    color: var(--sat-text-inverse);
    border-color: var(--sat-wine-dark);
}

.sat-badge-neutral {
    background-color: var(--sat-background-soft);
    color: var(--sat-text);
    border-color: var(--sat-border);
}

/* ============================================================
   9. CONTADORES TABULARES
   ============================================================ */

.sat-count {
    text-align: center;
    white-space: nowrap;
}

.sat-count-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2rem;
    height: 1.65rem;
    padding: 0 .55rem;
    border: var(--sat-border-width) solid transparent;
    border-radius: var(--sat-radius-pill);
    font-size: .78rem;
    font-weight: 700;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.sat-count-badge-danger {
    background-color: var(--sat-danger-background);
    color: var(--sat-danger-text);
    border-color: var(--sat-danger-border);
}

.sat-count-badge-success {
    background-color: var(--sat-success-background);
    color: var(--sat-success-text);
    border-color: var(--sat-success-border);
}


/* ============================================================
   10. TABLAS
   Debe utilizarse junto con las clases estructurales de
   Bootstrap, por ejemplo:
   class="table table-sm table-bordered sat-table"
   ============================================================ */

.sat-table {
    --bs-table-bg: var(--sat-background);
    --bs-table-striped-bg: var(--sat-row-alt);
    --bs-table-hover-bg: var(--sat-row-hover);
    --bs-table-border-color: var(--sat-border);
    margin-bottom: 0;
    color: var(--sat-text);
    font-size: .86rem;
}

    .sat-table thead th {
        padding: .65rem .5rem;
        background-color: var(--sat-background-soft);
        color: var(--sat-text);
        font-weight: 700;
        vertical-align: bottom;
    }

    .sat-table tbody td {
        padding: .55rem .5rem;
        vertical-align: middle;
    }

    .sat-table tbody tr:nth-child(even) > * {
        background-color: var(--sat-row-alt);
    }

.sat-number {
    text-align: right;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}


/* ============================================================
   BOTÓN DE DESCARGA
   ============================================================ */

.sat-download-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    padding: .45rem .8rem;
    background-color: var(--sat-wine);
    border: var(--sat-border-width) solid var(--sat-wine);
    color: var(--sat-text-inverse);
    font-size: .82rem;
    font-weight: 600;
    line-height: 1.25;
    white-space: nowrap;
}

    .sat-download-button:hover {
        background-color: var(--sat-wine-dark);
        border-color: var(--sat-wine-dark);
        color: var(--sat-text-inverse);
    }

    .sat-download-button:focus {
        background-color: var(--sat-wine-dark);
        border-color: var(--sat-wine-dark);
        color: var(--sat-text-inverse);
        box-shadow: var(--sat-focus-shadow);
    }

    .sat-download-button:active {
        background-color: var(--sat-wine-dark) !important;
        border-color: var(--sat-wine-dark) !important;
        color: var(--sat-text-inverse) !important;
    }

    .sat-download-button svg {
        flex-shrink: 0;
    }




/* ============================================================
   11. INTEGRACIÓN DEL RESULTADO
   ============================================================ */

.sat-summary {
    overflow: hidden;
    border: var(--sat-border-width) solid var(--sat-border);
    border-radius: var(--sat-radius-sm);
}

.sat-summary-header {
    padding: .75rem 1rem;
    background-color: var(--sat-background-soft);
    border-bottom: var(--sat-border-width) solid var(--sat-border);
    color: var(--sat-text);
    font-weight: 600;
}

.sat-summary-table {
    width: 100%;
    margin-bottom: 0;
    border-collapse: collapse;
    color: var(--sat-text);
    font-size: .9rem;
}

    .sat-summary-table td {
        padding: .55rem .75rem;
        border-bottom: var(--sat-border-width) solid var(--sat-border);
    }

    .sat-summary-table tr:last-child td {
        border-bottom: 0;
    }

.sat-summary-operator {
    width: 50px;
    text-align: center;
    font-weight: 700;
}

.sat-summary-amount {
    width: 150px;
    text-align: right;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.sat-summary-total td {
    background-color: var(--sat-success-background);
    color: var(--sat-text);
    font-weight: 700;
}


/* ============================================================
   12. ESTADO SIN DATOS
   ============================================================ */

.sat-empty {
    padding: 3rem 1rem;
    background-color: var(--sat-background);
    border: var(--sat-border-width) solid var(--sat-border);
    border-radius: var(--sat-radius-sm);
    text-align: center;
}

.sat-empty-title {
    margin-bottom: .4rem;
    font-size: 1.1rem;
    font-weight: 600;
}

.sat-empty-text {
    margin-bottom: 0;
    color: var(--sat-text-muted);
}


/* ============================================================
   13. RESPONSIVIDAD
   ============================================================ */

@media (max-width: 767.98px) {
    .sat-report-company {
        font-size: 1.2rem;
    }

    .sat-stat {
        width: 100%;
        min-width: 0;
    }

    .sat-accordion .accordion-body {
        padding: var(--sat-space-4);
    }

    .sat-summary-amount {
        width: auto;
    }

    .sat-table-toolbar {
        align-items: stretch;
        flex-direction: column;
    }

    .sat-table-toolbar-actions {
        justify-content: stretch;
    }

    .sat-download-button {
        width: 100%;
    }
}


/* ============================================================
   14. ACCESIBILIDAD Y PREFERENCIAS DEL USUARIO
   Se aplicará cuando se incorporen transiciones o animaciones.
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
    .sat-report *,
    .sat-report *::before,
    .sat-report *::after {
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
    }
}


/* ============================================================
   15. IMPRESIÓN
   ============================================================ */

@media print {
    .sat-report {
        color: #000000;
        background-color: #ffffff;
        font-size: 10pt;
    }

    .sat-report-header,
    .sat-summary {
        box-shadow: none !important;
        break-inside: avoid;
    }

    .sat-accordion {
        box-shadow: none !important;
    }

        .sat-accordion .accordion-collapse {
            display: block !important;
            height: auto !important;
            visibility: visible !important;
        }

        .sat-accordion .accordion-button,
        .sat-accordion .accordion-button:not(.collapsed) {
            background-color: #ffffff !important;
            color: #000000 !important;
            border-bottom: 1px solid #000000;
            box-shadow: none !important;
        }

            .sat-accordion .accordion-button::after {
                display: none;
            }

    .sat-table {
        font-size: 9pt;
    }

        .sat-table thead {
            display: table-header-group;
        }

        .sat-table tr,
        .sat-summary-table tr {
            break-inside: avoid;
        }
}