/* ============================================================
   SIPECYA - SISTEMA VISUAL GENERAL PARA FORMULARIOS Y TABLAS

   Bootstrap 5 conserva la responsabilidad de estructura, grid,
   espaciado y comportamiento. Esta hoja agrega identidad visual,
   semántica, consistencia y estilos reutilizables para:

   1. Formularios sin tablas.
   2. Formularios con una tabla.
   3. Formularios con dos tablas (maestro-detalle).
   4. Formularios con tres tablas (maestro-detalle-subdetalle).

   Convención de nombres: prefijo "spc-".
   Contenedor recomendado por página: class="spc-page".
   ============================================================ */


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

:root {
    /* Identidad contable: verde hoja tabular */
    --spc-mint: #adebb3;
    --spc-mint-soft: #eaf9ec;
    --spc-mint-pale: #f4fcf5;
    --spc-mint-dark: #2f6f4e;
    --spc-mint-darker: #24573d;
    /* Colores complementarios para jerarquía maestro-detalle */
    --spc-sage: #d7ead9;
    --spc-sage-soft: #f1f8f2;
    --spc-teal-soft: #dcefeb;
    --spc-teal-pale: #f2f9f7;
    /* Texto */
    --spc-text: #212529;
    --spc-text-strong: #17211b;
    --spc-text-muted: #68736c;
    --spc-text-inverse: #ffffff;
    /* Superficies */
    --spc-background: #ffffff;
    --spc-background-soft: #f8faf8;
    --spc-background-muted: #f1f4f2;
    /* Tablas */
    --spc-table-row-alt: #f7fbf7;
    --spc-table-row-hover: #e7f7e9;
    --spc-table-row-selected: #d8f2dc;
    /* Bordes */
    --spc-border: #d7dfd9;
    --spc-border-strong: #b8c8bc;
    --spc-border-width: 1px;
    /* Estados */
    --spc-success-background: #dff3e4;
    --spc-success-text: #235b36;
    --spc-success-border: #b7dfc2;
    --spc-warning-background: #fff3cd;
    --spc-warning-text: #664d03;
    --spc-warning-border: #ffe69c;
    --spc-danger-background: #f8d7da;
    --spc-danger-text: #842029;
    --spc-danger-border: #f1aeb5;
    --spc-info-background: #dceff5;
    --spc-info-text: #174b5c;
    --spc-info-border: #acd7e4;
    /* Geometría */
    --spc-radius-sm: .375rem;
    --spc-radius-md: .55rem;
    --spc-radius-pill: 50rem;
    /* Profundidad y foco */
    --spc-shadow-sm: 0 .125rem .4rem rgba(22, 45, 30, .08);
    --spc-shadow-md: 0 .35rem 1rem rgba(22, 45, 30, .10);
    --spc-focus-shadow: 0 0 0 .2rem rgba(47, 111, 78, .20);
    /* Espaciado */
    --spc-space-1: .25rem;
    --spc-space-2: .5rem;
    --spc-space-3: .75rem;
    --spc-space-4: 1rem;
    --spc-space-5: 1.25rem;
    --spc-space-6: 1.5rem;
    --spc-space-7: 2rem;
}


/* ============================================================
   2. CONTENEDOR BASE DE PÁGINA
   ============================================================ */

.spc-page {
    color: var(--spc-text);
}

.spc-page-content {
    display: flex;
    flex-direction: column;
    gap: var(--spc-space-5);
}


/* ============================================================
   3. ENCABEZADO DE PÁGINA
   ============================================================ */

.spc-page-header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--spc-space-4);
    margin-bottom: var(--spc-space-5);
    padding: var(--spc-space-5);
    background-color: var(--spc-background);
    border: var(--spc-border-width) solid var(--spc-border);
    border-left: .35rem solid var(--spc-mint-dark);
    border-radius: var(--spc-radius-md);
    box-shadow: var(--spc-shadow-sm);
}

.spc-page-heading {
    min-width: 0;
}

.spc-page-eyebrow {
    display: block;
    margin-bottom: var(--spc-space-1);
    color: var(--spc-mint-dark);
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .04rem;
    text-transform: uppercase;
}

.spc-page-title {
    margin: 0;
    color: var(--spc-text-strong);
    font-size: clamp(1.45rem, 2vw, 2rem);
    font-weight: 650;
    line-height: 1.2;
}

.spc-page-subtitle {
    max-width: 72rem;
    margin: var(--spc-space-2) 0 0;
    color: var(--spc-text-muted);
    font-size: .95rem;
    line-height: 1.5;
}

.spc-page-note {
    margin: var(--spc-space-1) 0 0;
    color: var(--spc-text-muted);
    font-size: .82rem;
    font-style: italic;
}

.spc-page-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--spc-space-2);
}


/* ============================================================
   4. PANELES Y SECCIONES
   ============================================================ */

.spc-panel {
    overflow: hidden;
    background-color: var(--spc-background);
    border: var(--spc-border-width) solid var(--spc-border);
    border-radius: var(--spc-radius-md);
    box-shadow: var(--spc-shadow-sm);
}

.spc-panel-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--spc-space-3);
    padding: .8rem 1rem;
    background-color: var(--spc-background-soft);
    border-bottom: var(--spc-border-width) solid var(--spc-border);
}

.spc-panel-title {
    margin: 0;
    color: var(--spc-text-strong);
    font-size: 1rem;
    font-weight: 650;
}

.spc-panel-subtitle {
    margin: .15rem 0 0;
    color: var(--spc-text-muted);
    font-size: .84rem;
}

.spc-panel-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--spc-space-2);
}

.spc-panel-body {
    padding: var(--spc-space-5);
}

.spc-panel-footer {
    padding: var(--spc-space-3) var(--spc-space-5);
    background-color: var(--spc-background-soft);
    border-top: var(--spc-border-width) solid var(--spc-border);
}

/* Panel de filtros */
.spc-filter-panel {
    background-color: var(--spc-mint-pale);
    border-color: var(--spc-border-strong);
}

    .spc-filter-panel .spc-panel-header {
        background-color: var(--spc-mint-soft);
        border-bottom-color: var(--spc-border-strong);
    }

.spc-filter-grid {
    --bs-gutter-x: 1rem;
    --bs-gutter-y: .85rem;
}

.spc-filter-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    gap: var(--spc-space-2);
    height: 100%;
}

/* Secciones maestro, detalle y subdetalle */
.spc-section {
    margin-top: var(--spc-space-5);
}

    .spc-section:first-child {
        margin-top: 0;
    }

.spc-section-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--spc-space-3);
    margin-bottom: var(--spc-space-2);
}

.spc-section-heading {
    min-width: 0;
}

.spc-section-title {
    margin: 0;
    color: var(--spc-text-strong);
    font-size: 1.05rem;
    font-weight: 650;
}

.spc-section-description {
    margin: .15rem 0 0;
    color: var(--spc-text-muted);
    font-size: .84rem;
}

.spc-section-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--spc-space-2);
}

.spc-section-divider {
    margin: var(--spc-space-6) 0;
    border: 0;
    border-top: var(--spc-border-width) solid var(--spc-border);
    opacity: 1;
}


/* ============================================================
   5. FORMULARIOS
   ============================================================ */

.spc-form-card {
    padding: var(--spc-space-5);
    background-color: var(--spc-background);
    border: var(--spc-border-width) solid var(--spc-border);
    border-radius: var(--spc-radius-md);
    box-shadow: var(--spc-shadow-sm);
}

.spc-form-section {
    padding-bottom: var(--spc-space-5);
    margin-bottom: var(--spc-space-5);
    border-bottom: var(--spc-border-width) solid var(--spc-border);
}

    .spc-form-section:last-child {
        padding-bottom: 0;
        margin-bottom: 0;
        border-bottom: 0;
    }

.spc-form-section-title {
    margin: 0 0 var(--spc-space-4);
    color: var(--spc-mint-dark);
    font-size: 1rem;
    font-weight: 700;
}

.spc-form-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: var(--spc-space-2);
    margin-top: var(--spc-space-5);
    padding-top: var(--spc-space-4);
    border-top: var(--spc-border-width) solid var(--spc-border);
}

.spc-page .form-label,
.spc-page .control-label {
    margin-bottom: .35rem;
    color: var(--spc-text-strong);
    font-size: .875rem;
    font-weight: 600;
}

.spc-page .form-control,
.spc-page .form-select {
    border-color: var(--spc-border-strong);
}

    .spc-page .form-control:focus,
    .spc-page .form-select:focus,
    .spc-page .form-check-input:focus {
        border-color: var(--spc-mint-dark);
        box-shadow: var(--spc-focus-shadow);
    }

.spc-page .form-check-input:checked {
    background-color: var(--spc-mint-dark);
    border-color: var(--spc-mint-dark);
}

.spc-field-help {
    display: block;
    margin-top: .3rem;
    color: var(--spc-text-muted);
    font-size: .78rem;
}

.spc-required::after {
    margin-left: .2rem;
    color: var(--spc-danger-text);
    content: "*";
}


/* ============================================================
   6. BOTONES SEMÁNTICOS
   Bootstrap mantiene tamaños y comportamiento.
   ============================================================ */

.spc-page .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    font-weight: 600;
}

    .spc-page .btn svg,
    .spc-page .btn .bi {
        flex: 0 0 auto;
    }

.spc-btn-primary {
    --bs-btn-color: var(--spc-text-inverse);
    --bs-btn-bg: var(--spc-mint-dark);
    --bs-btn-border-color: var(--spc-mint-dark);
    --bs-btn-hover-color: var(--spc-text-inverse);
    --bs-btn-hover-bg: var(--spc-mint-darker);
    --bs-btn-hover-border-color: var(--spc-mint-darker);
    --bs-btn-focus-shadow-rgb: 47, 111, 78;
    --bs-btn-active-color: var(--spc-text-inverse);
    --bs-btn-active-bg: var(--spc-mint-darker);
    --bs-btn-active-border-color: var(--spc-mint-darker);
    --bs-btn-disabled-color: var(--spc-text-inverse);
    --bs-btn-disabled-bg: var(--spc-mint-dark);
    --bs-btn-disabled-border-color: var(--spc-mint-dark);
}

.spc-btn-secondary {
    --bs-btn-color: var(--spc-text-strong);
    --bs-btn-bg: var(--spc-mint-soft);
    --bs-btn-border-color: var(--spc-border-strong);
    --bs-btn-hover-color: var(--spc-text-strong);
    --bs-btn-hover-bg: var(--spc-mint);
    --bs-btn-hover-border-color: var(--spc-mint-dark);
    --bs-btn-focus-shadow-rgb: 173, 235, 179;
    --bs-btn-active-color: var(--spc-text-strong);
    --bs-btn-active-bg: var(--spc-mint);
    --bs-btn-active-border-color: var(--spc-mint-dark);
}

.spc-btn-compact {
    padding-inline: .65rem;
    white-space: nowrap;
}


/* ============================================================
   7. CONTENEDORES DE TABLA
   La responsividad debe aplicarse al contenedor, no al <table>.
   ============================================================ */

.spc-table-card {
    overflow: hidden;
    background-color: var(--spc-background);
    border: var(--spc-border-width) solid var(--spc-border-strong);
    border-radius: var(--spc-radius-md);
    box-shadow: var(--spc-shadow-sm);
}

.spc-table-responsive {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}


/* ============================================================
   8. TABLAS GENERALES
   Uso recomendado:
   class="table table-sm table-bordered table-hover spc-table"
   ============================================================ */

.spc-table {
    --bs-table-bg: var(--spc-background);
    --bs-table-color: var(--spc-text);
    --bs-table-border-color: var(--spc-border);
    --bs-table-striped-bg: var(--spc-table-row-alt);
    --bs-table-striped-color: var(--spc-text);
    --bs-table-hover-bg: var(--spc-table-row-hover);
    --bs-table-hover-color: var(--spc-text);
    width: 100%;
    margin-bottom: 0;
    font-size: .84rem;
}

    .spc-table > :not(caption) > * > * {
        border-color: var(--spc-border);
    }

    .spc-table thead th {
        padding: .65rem .55rem;
        color: var(--spc-text-strong);
        font-weight: 700;
        line-height: 1.25;
        vertical-align: middle;
        white-space: nowrap;
    }

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

    .spc-table tbody tr.is-selected > * {
        background-color: var(--spc-table-row-selected);
    }

    .spc-table tfoot th,
    .spc-table tfoot td {
        padding: .6rem .55rem;
        background-color: var(--spc-background-soft);
        color: var(--spc-text-strong);
        font-weight: 700;
    }

/* Tabla principal o maestra */
.spc-table-main thead th {
    background-color: var(--spc-mint);
    border-color: var(--spc-border-strong);
}

/* Primera tabla detalle */
.spc-table-detail thead th {
    background-color: var(--spc-sage);
    border-color: var(--spc-border-strong);
}

/* Segunda tabla detalle o base fiscal */
.spc-table-subdetail thead th {
    background-color: var(--spc-teal-soft);
    border-color: var(--spc-border-strong);
}

/* Tabla compacta para catálogos densos */
.spc-table-dense {
    font-size: .79rem;
}

    .spc-table-dense thead th {
        padding: .5rem .45rem;
    }

    .spc-table-dense tbody td {
        padding: .4rem .45rem;
    }

/* Utilidades semánticas para columnas */
.spc-number {
    text-align: right;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.spc-date {
    text-align: center;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.spc-center {
    text-align: center;
}

.spc-nowrap {
    white-space: nowrap;
}

.spc-operations {
    width: 1%;
    text-align: center;
    white-space: nowrap;
}

.spc-code {
    white-space: nowrap;
    font-family: var(--bs-font-monospace);
    font-size: .95em;
}

.spc-text-truncate-cell {
    max-width: 22rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}


/* ============================================================
   9. DATATABLES
   Estilos acotados a tablas dentro de .spc-page.
   ============================================================ */

.spc-page .dataTables_wrapper,
.spc-page .dt-container {
    color: var(--spc-text);
}

    .spc-page .dataTables_wrapper .dataTables_length,
    .spc-page .dataTables_wrapper .dataTables_filter,
    .spc-page .dataTables_wrapper .dataTables_info,
    .spc-page .dataTables_wrapper .dataTables_paginate,
    .spc-page .dt-container .dt-length,
    .spc-page .dt-container .dt-search,
    .spc-page .dt-container .dt-info,
    .spc-page .dt-container .dt-paging {
        padding: var(--spc-space-3);
        color: var(--spc-text-muted);
        font-size: .84rem;
    }

        .spc-page .dataTables_wrapper .dataTables_filter input,
        .spc-page .dataTables_wrapper .dataTables_length select,
        .spc-page .dt-container .dt-search input,
        .spc-page .dt-container .dt-length select {
            border: var(--spc-border-width) solid var(--spc-border-strong);
            border-radius: var(--spc-radius-sm);
        }

            .spc-page .dataTables_wrapper .dataTables_filter input:focus,
            .spc-page .dataTables_wrapper .dataTables_length select:focus,
            .spc-page .dt-container .dt-search input:focus,
            .spc-page .dt-container .dt-length select:focus {
                border-color: var(--spc-mint-dark);
                outline: 0;
                box-shadow: var(--spc-focus-shadow);
            }

.spc-page .page-link {
    color: var(--spc-mint-dark);
}

    .spc-page .active > .page-link,
    .spc-page .page-link.active {
        background-color: var(--spc-mint-dark);
        border-color: var(--spc-mint-dark);
        color: var(--spc-text-inverse);
    }

    .spc-page .page-link:focus {
        box-shadow: var(--spc-focus-shadow);
    }

/* DataTables: fila seleccionada */
.spc-page table.dataTable tbody tr.selected > * {
    box-shadow: inset 0 0 0 9999px var(--spc-table-row-selected);
    color: var(--spc-text-strong);
}


/* ============================================================
   10. BADGES Y ESTADOS
   ============================================================ */

.spc-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .3rem;
    padding: .3rem .6rem;
    border: var(--spc-border-width) solid transparent;
    border-radius: var(--spc-radius-pill);
    font-size: .75rem;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
}

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

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

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

.spc-badge-info {
    background-color: var(--spc-info-background);
    color: var(--spc-info-text);
    border-color: var(--spc-info-border);
}

.spc-badge-neutral {
    background-color: var(--spc-background-muted);
    color: var(--spc-text);
    border-color: var(--spc-border);
}


/* ============================================================
   11. MENSAJES, ESTADOS VACÍOS Y CARGA
   ============================================================ */

.spc-empty {
    padding: 2.75rem 1rem;
    background-color: var(--spc-background);
    border: var(--spc-border-width) dashed var(--spc-border-strong);
    border-radius: var(--spc-radius-md);
    text-align: center;
}

.spc-empty-title {
    margin-bottom: .35rem;
    color: var(--spc-text-strong);
    font-size: 1.05rem;
    font-weight: 650;
}

.spc-empty-text {
    max-width: 42rem;
    margin: 0 auto;
    color: var(--spc-text-muted);
    font-size: .9rem;
}

.spc-loading {
    display: inline-flex;
    align-items: center;
    gap: var(--spc-space-2);
    color: var(--spc-text-muted);
    font-size: .85rem;
}


/* ============================================================
   12. MODALES
   ============================================================ */

.spc-page .modal-content {
    border-color: var(--spc-border);
    border-radius: var(--spc-radius-md);
    box-shadow: var(--spc-shadow-md);
}

.spc-page .modal-header {
    background-color: var(--spc-mint-soft);
    border-bottom-color: var(--spc-border);
}

.spc-page .modal-title {
    color: var(--spc-text-strong);
    font-weight: 650;
}

.spc-page .modal-footer {
    background-color: var(--spc-background-soft);
    border-top-color: var(--spc-border);
}


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

@media (max-width: 991.98px) {
    .spc-page-header {
        padding: var(--spc-space-4);
    }

    .spc-panel-body,
    .spc-form-card {
        padding: var(--spc-space-4);
    }

    .spc-page-actions,
    .spc-section-actions,
    .spc-panel-actions,
    .spc-filter-actions {
        width: 100%;
    }
}

@media (max-width: 575.98px) {
    .spc-page-header,
    .spc-panel-header,
    .spc-section-header {
        align-items: stretch;
    }

    .spc-page-actions .btn,
    .spc-section-actions .btn,
    .spc-panel-actions .btn,
    .spc-filter-actions .btn,
    .spc-form-actions .btn {
        flex: 1 1 auto;
    }

    .spc-form-actions {
        justify-content: stretch;
    }

    .spc-table {
        font-size: .8rem;
    }
}


/* ============================================================
   14. ACCESIBILIDAD Y PREFERENCIAS DEL USUARIO
   ============================================================ */

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


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

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

    .spc-page-header,
    .spc-panel,
    .spc-form-card,
    .spc-table-card {
        border-color: #808080;
        box-shadow: none !important;
        break-inside: avoid;
    }

    .spc-page-actions,
    .spc-section-actions,
    .spc-panel-actions,
    .spc-filter-actions,
    .dataTables_length,
    .dataTables_filter,
    .dataTables_paginate,
    .dt-length,
    .dt-search,
    .dt-paging {
        display: none !important;
    }

    .spc-table-responsive {
        overflow: visible !important;
    }

    .spc-table {
        font-size: 8.5pt;
    }

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

        .spc-table tr {
            break-inside: avoid;
        }

    .spc-table-main thead th,
    .spc-table-detail thead th,
    .spc-table-subdetail thead th {
        background-color: #e8e8e8 !important;
        color: #000000 !important;
        print-color-adjust: exact;
        -webkit-print-color-adjust: exact;
    }
}