/* ========================================================================== */
/* 1. ESTILOS GLOBALES BASE                                                   */
/* ========================================================================== */

html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

a, .btn-link {
    color: #006bb7;
}

.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

/* ========================================================================== */
/* 2. SISTEMA DE VENTANAS MÚLTIPLES (MDI)                                     */
/* ========================================================================== */

.mdi-window {
    border: 1px solid rgba(0,0,0,0.15);
    background: transparent;
    display: flex;
    flex-direction: column;
    overflow: visible;
}

.mdi-header {
    display: flex;
    align-items: center;
    gap: .5rem;
    user-select: none;
}

.mdi-title {
    font-weight: 600;
    font-size: 0.95rem;
}

.mdi-body {
    background-color: LightCyan !important;
    padding: 0;
    display: flex;
    flex-direction: column;
    overflow: auto;
    overflow-x: hidden;
    box-sizing: border-box;
    -webkit-overflow-scrolling: touch;
}

    /* Eliminar márgenes y paddings por defecto dentro de MDI */
    /* 1. Mantenemos el reseteo a 0 solo para la estructura externa del MDI */
    .mdi-body .content,
    .mdi-body .classic-bg,
    .mdi-body .classic-title-bar,
    .mdi-body .classic-toolbar,
    .mdi-body .tab-content,
    .mdi-body .card,
    .mdi-body > div {
        padding: 0 !important;
        margin: 0 !important;
        border-radius: 0 !important;
    }
    /* 2. Le devolvemos el padding vital a los contenedores que alojan controles */
    .mdi-body .classic-fieldset,
    .mdi-body .card-body,
    .mdi-body > .tab-content > div {
        padding: 6px !important; /* Separación que evita el aspecto "apretado" (Regla 2) */
        /* Dejamos que los márgenes internos funcionen de forma natural */
    }
    /* ========================================================================== */
    /* 3. CONTROLES DE FORMULARIO GENÉRICOS (Estilo WinForms)                     */
    /* ========================================================================== */

    /* Cajas de texto */
    .mdi-body .form-control {
        background-color: LightCyan !important;
        border-color: #a8c7cf;
        /* border-color: #a8c7cf;*/
        color: #000 !important;
        height: 22px !important;
        min-height: 22px !important;
        font-size: 11px !important;
        padding: 1px 4px !important;
        border-radius: 2px !important;
        border: 1px solid #7a7a7a !important; /*cambia el color de la caja de texto*/
        /*border: 1px solid #7a7a7a !important;*/
    }

    /* Combos (Selects) - Se separan para proteger el espacio de la flecha */
    .mdi-body .form-select {
        background-color: LightCyan !important;
        border-color: aqua;
        /* border-color: #a8c7cf;*/
        color: #000 !important;
        height: 22px !important;
        min-height: 22px !important;
        font-size: 11px !important;
        /* IMPORTANTE: 20px de padding derecho para que el texto no pise la flecha */
        padding: 1px 20px 1px 4px !important;
        background-position: right 4px center !important; /* Alinea la flecha */
        background-size: 10px 10px !important; /* Tamaño de la flecha adaptado a 22px */
        border-radius: 2px !important;
        border: 1px solid aqua !important;/*cambia el color del vorde de los combos*/
        /*border: 1px solid #7a7a7a !important;*/
    }

        .mdi-body .form-control:disabled,
        .mdi-body .form-select:disabled {
            background-color: #e4e4e4 !important;
            border-color: #c4cbd2 !important;
            color: #333 !important;
            opacity: 1 !important;
        }

    /* Reducción de espacios genéricos */
    .mdi-body .mt-1, .mdi-body .mt-2, .mdi-body .mt-3,
    .mdi-body .mb-1, .mdi-body .mb-2, .mdi-body .mb-3 {
        margin-top: 0 !important;
        margin-bottom: 1px !important;
    }

    /* Ajuste de filas para evitar estiramientos */
    .mdi-body .row {
        margin-bottom: 0px !important;
    }

        /* Corregido: Solo aplicar comportamiento compacto a los col-auto para no romper el grid */
        .mdi-body .row > .col-auto {
            padding-right: 4px !important;
            padding-left: 4px !important;
        }

    /* -------------------------------------------------------------------------- */
    /* 3.1. RADIO BUTTONS Y CHECKBOXES (Corrección Visual)                        */
    /* -------------------------------------------------------------------------- */

    /* Contenedor flexible para alinear el circulito con el texto */
    .mdi-body .form-check {
        display: inline-flex !important;
        align-items: center !important;
        gap: 4px !important;
        margin-bottom: 0 !important;
        min-height: 22px !important; /* Misma altura que los textbox para que no descuadren la fila */
    }

    /* Botón real (input) sin seleccionar */
    .mdi-body .form-check-input {
        width: 13px !important; /* Ancho perfecto */
        height: 13px !important; /* Alto igual al ancho para no ser rectángulo */
        min-height: 13px !important;
        margin-top: 0 !important;
        padding: 0 !important;
        background-color: #fff !important; /* Blanco se ve mejor por dentro */
        border: 1px solid #7a7a7a !important;
        cursor: pointer;
    }

        /* REGLA NUEVA: Color cuando el Radio/Checkbox ESTÁ SELECCIONADO */
        .mdi-body .form-check-input:checked {
            background-color: #1b6ec2 !important; /* Azul acorde a tu btn-primary */
            border-color: #1b6ec2 !important;
        }

        /* Forzar CÍRCULO para los Radio Buttons */
        .mdi-body .form-check-input[type="radio"] {
            border-radius: 50% !important;
        }

        /* Forzar CUADRADO para los Checkboxes */
        .mdi-body .form-check-input[type="checkbox"] {
            border-radius: 2px !important;
        }

        .mdi-body .form-check-input:disabled {
            background-color: #e4e4e4 !important;
            border-color: #c4cbd2 !important;
            cursor: not-allowed;
        }

    /* Etiqueta del Radio/Checkbox */
    .mdi-body .form-check-label {
        font-size: 11px !important;
        margin-bottom: 0 !important;
        cursor: pointer;
        line-height: 1 !important;
    }

/* ========================================================================== */
/* 4. CLASES UTILITARIAS DE ANCHO FIJO (Emulando WinForms)                    */
/* ========================================================================== */

/* Inputs de ancho fijo */
.input-w25 {width: 25px !important;}
.input-w40 {width: 40px !important;}
.input-w45 {width: 45px !important;}
.input-w70 {width: 70px !important;}
.input-w80 {width: 80px !important;}
.input-w88 {width: 88px !important;}
.input-w90 {width: 90px !important;}
.input-w100 {width: 100px !important;}
.input-w150 {width: 150px !important;}
.input-w200 {width: 200px !important;}
.input-w250 {width: 250px !important;}
.input-w300 {width: 300px !important;}
.input-w336 {width: 336px !important;}
.input-w400 {width: 400px !important;}
.input-w500 {width: 500px !important;}
.input-w700 {width: 700px !important;}
.input-full {width: 100% !important;}
/* Utilidad genérica para forzar el tamaño de texto estándar del sistema */
.text-11 {
    font-size: 11px !important;
}
/* Configuración base para Etiquetas */
.mdi-body .form-label {
    font-size: 11px !important;
    margin-bottom: 0;
    line-height: 1.2 !important;
}

/* Utilidades de alineación para labels */
.label-right {
    text-align: right !important;
    padding-right: 10px;
}

.label-left {
    text-align: left !important;
}

/* Labels de ancho fijo (Con protección para textos largos) */
[class*="label-w"] {
    display: inline-block !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    vertical-align: middle;
}
.label-w10 {width: 10px !important;}
.label-w20 { width: 20px !important;}
.label-w40 {width: 40px !important;}
.label-w60 {width: 60px !important;}
.label-w70 {width: 70px !important;}
.label-w80 {width: 80px !important;}
.label-w100 {width: 100px !important;}
.label-w150 {width: 150px !important;}
.label-w200 {width: 200px !important;}
.label-w250 {width: 250px !important;}
.label-w300 {width: 300px !important;}
.label-w500 {width: 500px !important;}

/* ========================================================================== */
/* 5. PANELES, FIELDSETS Y HERRAMIENTAS GENÉRICAS                             */
/* ========================================================================== */

.classic-bg {
    background-color: lightcyan;
    padding: 10px;
    border: 1px solid #cfecec;
    overflow-x: hidden;
}

.classic-title-bar {
    background: LightBlue;
    color: #123;
    padding: 6px 8px !important;
    font-weight: bold;
    font-size: 1rem;
}

.classic-toolbar {
    background: #e0ffff;
    padding: 2px !important;
    display: flex;
    gap: 1px !important;
    align-items: center;
    position: relative;
}
   
    .classic-toolbar .btn {
        height: 34px;
        min-width: 82px;
    }
    /* Botones cuadrados con icono (Tu nueva regla integrada) */
    .classic-toolbar .btn-tool {
        width: 25px !important;
        min-width: 25px !important;
        height: 25px !important;
        padding: 0 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 2px !important;
        border: 1px solid transparent;
        background: transparent;
    }
        .classic-toolbar .btn-tool:hover:not(:disabled) {
            border-color: #7f9db9;
            background-color: #e8f0fe;
        }
.classic-fieldset {
    border: 1px solid #000 !important;
    padding: 0px 0.25rem  !important;
    background: #e6ffff;
    width: fit-content;
    max-width: 100%;
    /* Agrega esta línea para la separación vertical: */
    margin-bottom: 0.25rem !important;
}

/* Contenedor flexible para agrupar múltiples classic-fieldset uno al lado del otro */
.classic-fieldset-group {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 0px !important; /* Equivale al gap-1 de Bootstrap (0.25rem) */
    align-items: flex-start; /* Opcional: alinea los paneles por su base si tienen distintas alturas */
}
/* ========================================================================== */
/* ESPACIADO AUTOMÁTICO DENTRO DE LOS PANELES (Emulando WinForms)             */
/* ========================================================================== */

/* Aplica a cualquier contenedor (fila) directamente dentro de un panel */
.classic-fieldset > div {
    margin-bottom: 4px !important; /* Separación VERTICAL entre filas */
    gap: 4px !important; /* Separación HORIZONTAL entre los controles (Labels, Inputs, etc.) */
}

    /* Le damos un pequeñísimo respiro al primer elemento respecto al borde de arriba */
    .classic-fieldset > div:first-child {
        margin-top: 4px !important;
    }

    /* Y un respiro al último elemento respecto al borde de abajo */
    .classic-fieldset > div:last-child {
        margin-bottom: 4px !important;
    }

/* Excepción: Si el panel tiene título superpuesto (I.G.V., I.S.C.), anulamos el margin-top 
   para no sumar doble espacio con el pt-2 que ya tiene el panel */
.classic-fieldset.position-relative > div:first-of-type {
    margin-top: 0px !important;
}
/* ========================================================================== */
/* CENTRALIZACIÓN FLUIDA DE BARRA DE FILTROS (Anulación de Grid Bootstrap)    */
/* ========================================================================== */

/* 1. Forzamos a la fila contenedora a ser un Flexbox de una sola línea */
.clientes-filtros-top .row {
    display: flex !important;
    flex-wrap: nowrap !important; /* Evita que el buscador o el botón bajen */
    align-items: center !important;
    gap: 4px !important; /* Separación uniforme entre controles */
    width: 100% !important;
    margin: 0 !important;
    padding: 2px 0 !important;
}

    /* 2. Neutralizamos las columnas modulares (col-md-3, col-md-4, etc.) */
    .clientes-filtros-top .row > [class*="col-"] {
        width: auto !important; /* Anula el ancho porcentual de Bootstrap */
        max-width: none !important;
        flex: none !important;
        padding: 0 !important;
        margin: 0 !important;
        display: flex !important;
        align-items: center !important;
    }

    /* 3. Forzamos a la columna del contador (originalmente col-md-5) a irse a la derecha */
    .clientes-filtros-top .row > .text-end {
        margin-left: auto !important; /* Empuja el total de registros al extremo derecho */
    }

/* 4. Desarmamos el 'input-group' para que no altere las alturas */
.clientes-filtros-top .input-group {
    display: flex !important;
    flex-wrap: nowrap !important;
    width: auto !important;
    gap: 2px !important; /* Junta el botón "Buscar" al input */
}

    .clientes-filtros-top .input-group .form-control {
        width: 250px !important; /* Unificamos un ancho estándar para el buscador */
    }

/* Fuerza a que todos los combos (select) de la barra de filtros tengan un ancho uniforme */
.clientes-filtros-top select.form-select {
    width: 100px !important;
    min-width: 100px !important;
    max-width: 100px !important;
}

/* 5. Forzamos al botón "Buscar" (y cualquier botón de esa barra) a medir estrictamente 22px */
.clientes-filtros-top .btn {
    height: 22px !important;
    min-height: 22px !important;
    max-height: 22px !important;
    font-size: 11px !important;
    padding: 0 12px !important;
    line-height: 1 !important;
    border-radius: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    border: 1px solid #1861ac !important; /* Mantiene la estética WinForms */
}

/* ========================================================================== */
/* 6. TABLAS GLOBALES                                                         */
/* ========================================================================== */

.table-local, .table {
    width: 100%;
    table-layout: fixed;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 11px;
}

.mdi-body .table-responsive {
    overflow: auto;
    max-width: 100%;
    margin: 0 !important;
    padding: 0 !important;
    max-height: unset;
}

.table thead th, .table-local thead th {
    background: #222;
    color: #fff;
    padding: 6px 8px;
    font-weight: 700;
    text-align: left;
    vertical-align: middle;
    position: sticky;
    top: 0;
    z-index: 20;
    height: 30px;
}

.table-local tbody td,
.table tbody td,
.table-responsive table tbody td {
    background: #e9ffff;
    color: #123;
    padding: 1px 1px !important;
    vertical-align: middle;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/*reduce el alto de los rgistros de una tabla*/
.table-local tbody tr, .table tbody tr, .table-responsive table tbody tr {
    height: 15px;
}

    .table-primary, tr.table-primary, .table .table-primary, .table tbody tr.table-primary {
        background-color: #fff7b2 !important;
        color: #000 !important;
    }

        .table-primary td, tr.table-primary td, .table .table-primary td, .table tbody tr.table-primary td {
            background-color: #fff7b2 !important;
            color: #000 !important;
        }

.row-highlight {
    background-color: #e6f7ff;
    box-shadow: 0 0 12px rgba(0,123,255,0.45);
    transition: background-color 0.9s ease, box-shadow 0.9s ease;
}

/* ========================================================================== */
/* 7. MENSAJERÍA Y MODALES GLOBALES                                           */
/* ========================================================================== */

.siac-top-messages-host {
    position: fixed;
    top: 8px;
    left: 0;
    right: 0;
    z-index: 999999;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    pointer-events: none;
}

.siac-top-message {
    min-width: 340px;
    max-width: min(980px, 92vw);
    padding: 8px 12px;
    border: 1px solid #7f9db9;
    border-radius: 4px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .25);
    font-size: 13px;
    pointer-events: auto;
}

    .siac-top-message.info {
        background: #d9ecff;
        color: #0b3868;
        border-color: #7fb1e6;
    }

    .siac-top-message.warning {
        background: #fff4cc;
        color: #5c4700;
        border-color: #e6cc66;
    }

    .siac-top-message.error {
        background: #ffdede;
        color: #7a1010;
        border-color: #d68b8b;
    }

.siac-confirm-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .35);
    z-index: 21000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.siac-confirm-modal {
    width: min(520px, 92vw);
    background: #f3fbff;
    border: 1px solid #7f9db9;
    border-radius: 6px;
    box-shadow: 0 10px 28px rgba(0, 0, 0, .35);
    overflow: hidden;
}

.siac-confirm-title {
    background: #c8e6ff;
    color: #0b3868;
    font-weight: 700;
    padding: 8px 12px;
    border-bottom: 1px solid #8fb7dd;
}

.siac-confirm-body {
    padding: 14px 12px;
    color: #1f2937;
    font-size: 14px;
    white-space: pre-line;
}

.siac-confirm-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 10px 12px 12px;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

/* ========================================================================== */
/* 8. ADAPTACIÓN TÁCTIL GLOBAL (Para Celulares, Tablets o Punto de Venta)     */
/* ========================================================================== */

@media (pointer: coarse) {
    .mdi-body .form-control,
    .mdi-body .form-select,
    .mdi-body .input-group > .btn {
        height: 48px !important;
        min-height: 48px !important;
        font-size: 16px !important;
    }

    .mdi-body .classic-fieldset > div,
    .mdi-body .card-body > div {
        margin-bottom: 12px !important;
        padding-bottom: 4px !important;
    }

    .table-local tbody tr,
    .table tbody tr,
    .table-responsive table tbody tr {
        height: 48px !important;
    }

    .btn, .classic-toolbar .btn {
        min-height: 44px !important;
        min-width: 44px !important;
    }

    /* Corrección táctil también para radios/checkbox */
    .mdi-body .form-check-input {
        width: 24px !important;
        height: 24px !important;
        min-height: 24px !important;
        margin-top: 0 !important;
    }
}

/* ========================================================================== */
/* 9. FORZAR TAMAÑO DE ÍCONOS DE ORDENAMIENTO EN TABLAS                       */
/* ========================================================================== */

th.sortable .header-cell {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
}

    th.sortable .header-cell .sort-icon {
        display: inline-flex !important;
        align-items: center !important;
    }

        th.sortable .header-cell .sort-icon svg {
            width: 16px !important;
            height: 16px !important;
            min-width: 16px !important;
            min-height: 16px !important;
            max-width: 16px !important;
            max-height: 16px !important;
            fill: currentColor;
            vertical-align: middle;
        }

@media (pointer: coarse) {
    th.sortable .header-cell .sort-icon svg {
        width: 24px !important;
        height: 24px !important;
        min-width: 24px !important;
        min-height: 24px !important;
        max-width: 24px !important;
        max-height: 24px !important;
    }
}

/* ========================================================================== */
/* INDICADOR GLOBAL DE FILA SELECCIONADA (Flechita negra)                     */
/* ========================================================================== */

/* Preparamos la primera celda de la fila seleccionada */
.table-local tbody tr.table-primary > td:first-child,
.table tbody tr.table-primary > td:first-child {
    position: relative !important;
}

    /* Inyectamos el triángulo negro dinámicamente */
    .table-local tbody tr.table-primary > td:first-child::before,
    .table tbody tr.table-primary > td:first-child::before {
        content: "\25B6"; /* Código Unicode para el triángulo (▶) */
        font-size: 9px;
        color: red;
        position: absolute;
        left: 4px; /* Distancia desde el borde izquierdo */
        top: 50%;
        transform: translateY(-50%); /* Lo centra verticalmente perfecto */
    }

/* ========================================================================== */
/* DISEÑO CENTRALIZADO DE ENCABEZADOS DE TABLA                                */
/* ========================================================================== */

.table-local thead th,
.table thead th {
    /* 1. Colores */
    background-color: #222222 !important; /* Color de fondo (Gris muy oscuro/Negro) */
    color: #ffffff !important; /* Color del texto (Blanco) */
    /* 2. Tipografía */
    font-size: 11px !important; /* Tamaño de la letra */
    font-weight: bold !important; /* Texto en negrita */
    /* 3. Tamaños y Espaciados */
    height: 22px !important; /* Altura estricta de la cabecera */
    padding: 2px 4px !important; /* Espacio interno (arriba/abajo 4px, lados 8px) */
    /* 4. Alineación y Comportamiento */
    vertical-align: middle !important; /* Centrado vertical del texto */
    white-space: nowrap !important; /* Evita que el texto se parta en dos líneas */
    /* 5. Cabecera Fija (Sticky) para que no se pierda al hacer scroll hacia abajo */
    position: sticky !important;
    top: 0 !important;
    z-index: 20 !important;
    /* Opcional: Un borde inferior sutil para separar el encabezado de los datos */
    border-bottom: 2px solid #1861ac !important;
}

/* ========================================================================== */
/* TAMAÑOS CENTRALIZADOS DE COLUMNAS (Para usar en <colgroup>)                */
/* ========================================================================== */
.c-ee {width: 18px !important;}
/* Columna de Estado / Indicador */
.c-e {width: 24px !important;}
.c-w30 {width: 30px !important;}
/* Columnas de Fechas */
.c-fecha, .c-femi, .c-fven {width: 80px !important;}
/* Columnas de Documentos y Series */
.c-td {width: 40px !important;}
.c-serie {width: 50px !important;}
.c-numdoc, .c-numcomp {width: 70px !important;}
/* Columnas de Moneda y Totales */
.c-moneda {width: 50px !important;}
.c-total {width: 70px !important;}
/* Columnas de Textos Largos */
.c-proveedor {width: 250px !important;}
.c-c300 {width: 300px !important;}
.c-concepto, .c-nota {width: 200px !important;}
.c-tcomp {width: 120px !important;}
.c-xll {width: 500px !important;}

/* ========================================================================== */
/* LÍNEAS VERTICALES DE LA TABLA (Cuadrículas)                                */
/* ========================================================================== */

/* 1. Líneas para los encabezados (fondo negro) */
.table-local thead th,
.table thead th {
    border-right: 1px solid #05efe8 !important;
}

/* 2. Líneas para las celdas de datos (fondo celeste claro) */
.table-local tbody td,
.table tbody td {
    border-right: 1px solid #bfe3e3 !important; /* Un tono un poquito más oscuro que el fondo de tus filas */
}

/* 3. Limpieza: Le quitamos la línea a la ÚLTIMA columna para que no manche el borde derecho de la pantalla */
.table-local th:last-child,
.table-local td:last-child,
.table th:last-child,
.table td:last-child {
    border-right: none !important;
}

/* ========================================================================== */
/* ALINEACIÓN DE ENCABEZADOS CON BOTÓN DE ORDENAMIENTO                        */
/* ========================================================================== */

/* Forzamos a que el contenedor interno ocupe todo el ancho de la celda */
th .header-cell {
    width: 100% !important;
}

/* Alineación a la izquierda (Proveedor, Conceptos) */
th.text-start .header-cell,
th.text-left .header-cell {
    justify-content: flex-start !important;
}

/* Alineación al centro (Fechas, Series) */
th.text-center .header-cell {
    justify-content: center !important;
}

/* Alineación a la derecha (Montos, Totales) */
th.text-end .header-cell,
th.text-right .header-cell {
    justify-content: flex-end !important;
}
/* ========================================================================== */
/* CONTROL CENTRALIZADO PARA BOTONES DE DETALLE (Sub-Grillas WinForms)        */
/* ========================================================================== */

.btn-detalle {
    height: 22px !important;
    min-height: 22px !important;
    max-height: 22px !important;
    font-size: 11px !important;
    padding: 0 10px !important;
    line-height: 1 !important;
    border-radius: 5px !important; /* Esquinas rectas estilo WinForms */
    background-color: lightcyan !important; /* Fondo gris claro plano */
    border: 1px solid aqua !important; /* Borde gris idéntico a tus inputs */
    color: #000000 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer;
    font-weight: normal !important;
    margin: 0 !important;
}

    /* Estado Hover (Cuando pasas el mouse por encima) */
    .btn-detalle:hover:not(:disabled) {
        background-color: #e2f0ff !important; /* Resaltado celeste sutil */
        border-color: #1861ac !important; /* Borde azul corporativo */
        color: #000000 !important;
    }

    /* Estado Activo (Al hacer clic sobre el botón) */
    .btn-detalle:active:not(:disabled) {
       /* background-color: #cce4ff !important;*/
        background-color: aqua !important;
        border-color: #104f8a !important;
    }

    /* Estado Deshabilitado (Garantiza consistencia con inputs inactivos) */
    .btn-detalle:disabled {
        background-color: #e4e4e4 !important; /* Mismo gris que tus controles bloqueados */
        border-color: #c4cbd2 !important;
        color: #888888 !important; /* Texto opaco */
        cursor: not-allowed !important;
        opacity: 1 !important;
    }

    /* Variante especial para el botón 'Termina' (Estilo Alerta/Warning) */
    .btn-detalle.btn-detalle-warning {
        background-color: #fff3cd !important;
        border-color: #ffc107 !important;
        color: #664d03 !important;
    }

        .btn-detalle.btn-detalle-warning:hover:not(:disabled) {
            background-color: #ffecb5 !important;
            border-color: #ffb300 !important;
        }
/* ==========================================================================
   ESTADOS VISUALES DE GRILLAS (Centralizado - FontAwesome 6.6.0)
   ========================================================================== */

/* Clase base que inicializa la fuente de FontAwesome 6 */
.icono-estado {
    font-family: "Font Awesome 6 Free";
    font-weight: 900; /* Obligatorio en FA6 para iconos 'Solid' */
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    display: var(--fa-display, inline-block);
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    line-height: 1;
}

    /* Definición de formas (Unicode) y colores por estado */
    .icono-estado.estado-candado {
        color: var(--bs-dark);
    }

        .icono-estado.estado-candado::before {
            content: "\f023";
        }
    /* fa-lock */

    .icono-estado.estado-ekis {
        color: var(--bs-secondary);
    }

        .icono-estado.estado-ekis::before {
            content: "\f00d";
        }
    /* fa-xmark */

    .icono-estado.estado-foco {
        color: var(--bs-warning);
    }

        .icono-estado.estado-foco::before {
            content: "\f0eb";
        }
    /* fa-lightbulb */

    .icono-estado.estado-check {
        color: var(--bs-success);
    }

        .icono-estado.estado-check::before {
            content: "\f00c";
        }
    /* fa-check */

    .icono-estado.estado-tijera {
        color: var(--bs-danger);
    }

        .icono-estado.estado-tijera::before {
            content: "\f0c4";
        }
    /* fa-scissors */

    .icono-estado.estado-lapiz {
        color: var(--bs-primary);
    }

        .icono-estado.estado-lapiz::before {
            content: "\f304";
        }
/* fa-pen */
/* ========================================================================== */
/* 10. NAVEGADOR DE REGISTROS EN TABS (Ej: < 1 / 3 >)                         */
/* ========================================================================== */

.mdi-nav-registros {
    position: absolute;
    top: 8px;
    right: 12px;
    z-index: 10;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 4px !important; /* Usamos px en lugar de rem para mantener tu estándar */
}

/* Botones de retroceso y avance */
.btn-nav-registro {
    height: 18px !important;
    min-height: 18px !important; /* Forzamos la altura estándar de tu sistema */
    padding: 0 4px !important;
    font-size: 11px !important; /* Igualado a tus form-control */
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
    cursor: pointer;
    /* 1. ESTADO ACTIVO / HABILITADO (Normal) */
    background-color: #ffffff !important; /* Fondo blanco limpio para resaltar del fondo celeste */
    border: 1px solid aqua !important; /* Borde gris azulado suave que combina con tus inputs */
    color: red !important; /* Texto o icono rojo */
    /*color: #000000 !important;*/ /* Texto negro nítido */
}

    /* ESTADO HOVER (Cuando el usuario pasa el mouse por encima) */
    .btn-nav-registro:hover:not(:disabled) {
        background-color: #e2f0ff !important; /* Resaltado celeste sutil (Mismo estilo que tus btn-detalle) */
        border-color: #1861ac !important; /* Borde azul corporativo */
        color: darkred !important; /* Opcional: un rojo más oscuro al pasar el mouse */
       /* color: #000000 !important;*/
    }

    /* 2. ESTADO DESACTIVADO / INACTIVO (disabled) */
    .btn-nav-registro:disabled {
        background-color: #e4e4e4 !important; /* Gris estándar de tu Sección 3 y 5 para controles bloqueados */
        border-color: #c4cbd2 !important; /* Borde gris opaco */
        color: #888888 !important; /* Texto gris tenue */
        cursor: not-allowed !important; /* Cursor de prohibido */
    }
/* Texto del indicador de posición */
.nav-registro-contador {
    font-size: 11px !important; /* Igualado al estándar WinForms de tu CSS */
    min-width: 70px;
    text-align: center;
    font-weight: bold;
}
/* ========================================================================== */
/* 11. TABS / PESTAÑAS COMPACTAS (Estilo WinForms)                            */
/* ========================================================================== */

/* Reduce el tamaño del texto y el alto (padding) de todas las pestañas */
.siac-tabs-host .nav-link {
    font-size: 11px !important;
    padding: 4px 12px !important; /* 4px arriba y abajo reduce drásticamente el alto */
    line-height: 1.2 !important;
    color: #495057 !important; /* Gris oscuro para pestañas inactivas */
    border-radius: 4px 4px 0 0 !important; /* Esquinas ligeramente redondeadas arriba */
}

    /* Resalta visualmente la pestaña que está seleccionada actualmente */
    .siac-tabs-host .nav-link.active {
        color: #000000 !important; /* Texto negro nítido */
        background-color: #ffffff !important; /* Fondo blanco para que resalte del fondo celeste */
        border-color: #c4cbd2 #c4cbd2 #ffffff !important; /* Bordes sutiles */
    }

    /* Estilo para las pestañas deshabilitadas */
    .siac-tabs-host .nav-link.disabled {
        color: #a0a0a0 !important; /* Texto gris claro */
        background-color: transparent !important;
    }
    /*las medidas para cada formulario de ModoCompacto*/
/* La regla es universal, pero el valor lo define cada componente */
/* 1. Definición de variables globales para el formulario */
/* ========================================================================== */
/* REGLAS PARA FORMULARIO MODO COMPACTO                                       */
/* ========================================================================== */

/* Anula los 82px de ancho mínimo para que los botones sean iconos cuadrados */
.siac-form-base.compact-mode .classic-toolbar .btn {
    width: 25px !important;
    min-width: 25px !important;
    height: 25px !important;
    max-height: 25px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}
/* ==========================================================================
   BOTONES DE FILTRO CENTRALIZADOS (Grillas y Consultas)
   ========================================================================== */

/* 1. Estructura Base del Botón */
.btn-filtro {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 22px; /* Controla la altura global de los botones */
    min-width: 22px; /* Controla el ancho mínimo (para botones con solo icono) */
    padding: 0 4px; /* Espaciado interno horizontal */
    border-radius: 4px; /* Curvatura de los bordes */
    border: 1px solid transparent;
    background-color: transparent;
    cursor: pointer;
    font-size: 11px;
    font-weight: bold;
    transition: all 0.2s ease-in-out;
}

/* 2. Definición de colores por tipo (Inactivo vs Activo/Hover) */

/* -- Candado (Negro/Gris Oscuro) -- */
.btn-filtro-candado {
    border-color: black;
    color: black;
}

    .btn-filtro-candado.activo, .btn-filtro-candado:hover {
        background-color: #343a40;
        color: #ffffff;
    }

/* -- Foco (Amarillo/Naranja) -- */
.btn-filtro-foco {
    border-color: gold;
    color: gold;
}
    /* Letra un poco más oscura para contraste */
    .btn-filtro-foco.activo, .btn-filtro-foco:hover {
        background-color: #ffc107;
        color: #000000;
    }

/* -- Check (Verde) -- */
.btn-filtro-check {
    border-color: #28a745;
    color: #28a745;
}

    .btn-filtro-check.activo, .btn-filtro-check:hover {
        background-color: #28a745;
        color: #ffffff;
    }

/* -- Tijera (Rojo) -- */
.btn-filtro-tijera {
    border-color: #dc3545;
    color: #dc3545;
}

    .btn-filtro-tijera.activo, .btn-filtro-tijera:hover {
        background-color: #dc3545;
        color: #ffffff;
    }

/* -- Editar (Azul) -- */
.btn-filtro-editar {
    border-color: #007bff;
    color: #007bff;
}

    .btn-filtro-editar.activo, .btn-filtro-editar:hover {
        background-color: #007bff;
        color: #ffffff;
    }

/* -- Ekis / Limpiar (Gris Claro) -- */
.btn-filtro-ekis {
    border-color: #6c757d;
    color: #6c757d;
}

    .btn-filtro-ekis.activo, .btn-filtro-ekis:hover {
        background-color: #6c757d;
        color: #ffffff;
    }

/* -- Todos (Celeste) -- */
.btn-filtro-todos {
    border-color: #17a2b8;
    color: #17a2b8;
}

    .btn-filtro-todos.activo, .btn-filtro-todos:hover {
        background-color: #17a2b8;
        color: #ffffff;
    }

/* 3. Asegurar que los íconos hereden el color del botón */
.btn-filtro i {
    color: inherit;
}

/* 4. Colores exactos para iconos de grillas (Sincronizados con .btn-filtro) */
.icono-candado {color: black;}
.icono-foco {color: gold;}
.icono-check {color: #28a745;}
.icono-tijera {color: #dc3545;}
.icono-editar {color: #007bff;}
.icono-ekis {color: #6c757d;}
/* Pegar esto en wwwroot/app.css */
@keyframes oscilacion {
    0%, 100% {
        opacity: 1;
      /*  transform: scale(1);*/
    }

    50% {
        opacity: 0.4;
       /* transform: scale(1.05);*/
    }
}

.animacion-oscilacion {
    animation: oscilacion 0.8s ease-in-out infinite;
}

/* ========================================================================== */
/* 12. LAYOUT ESTRICTO DEFINITIVO PARA FORMULARIOS CON GRILLAS Y PANELES FIJOS*/
/* ========================================================================== */

/* 1. Formulario Rígido al 100% de la ventana. Anula el crecimiento infinito. */
.siac-form-base.layout-estricto {
    height: 100% !important;
    max-height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
}

    /* 2. Proteger las barras superiores (Toolbar y Pestañas) para que no se aplasten */
    .siac-form-base.layout-estricto > .classic-toolbar,
    .siac-form-base.layout-estricto > .siac-tabs-host {
        flex-shrink: 0 !important;
    }

    /* 3. El contenedor de la pestaña: Toma el sobrante y se vuelve ancla absoluta */
    .siac-form-base.layout-estricto > .siac-form-content {
        flex-grow: 1 !important;
        min-height: 0 !important;
        position: relative !important; /* EL SECRETO: Sirve de ancla para la tabla */
        overflow: hidden !important;
        padding: 0 !important;
    }

/* 4. Panel Mágico: Al ser absoluto (pegado a los 4 bordes), JAMÁS podrá estirar la ventana */
.panel-grilla-estricto {
    position: absolute !important;
    top: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
}

    /* 5. La tabla absorbe el excedente interno y por fin crea su propio scroll */
    .panel-grilla-estricto > .table-responsive {
        flex-grow: 1 !important;
        min-height: 0 !important;
        overflow-y: auto !important;
        overflow-x: auto !important;
        margin: 0 !important;
    }

    /* 6. El panel inferior queda anclado y nunca desaparece */
    .panel-grilla-estricto > .clientes-filtros-top {
        flex-shrink: 0 !important;
        margin: 0 !important;
    }

/* ========================================================================== */
/* Cambia el color del borde cuando la caja es de solo lectura*/
/* ========================================================================== */

.form-control[readonly] {
    /* border-color: #a5a5a5 !important;  Color del borde inactivo */
    border-color: red !important; /* Color del borde inactivo */
    border-style: solid !important;
    border-width: 1px !important;
}

    /* Neutraliza el brillo azul de Bootstrap si el usuario hace clic dentro de la caja inactiva */
    .form-control[readonly]:focus {
        border-color: #a5a5a5 !important;
        box-shadow: none !important;
        outline: 0 !important;
    }
/* Normalizar el tamaño de los títulos de los paneles (Group Box) */
/* Títulos de los Fieldsets clásicos */
.legend-title {
    font-size: 11.5px !important;
    line-height: 1 !important;
    color: #212529;
    padding-bottom: 0 !important;
}
/* Clase global para modales dinámicos en SiacEntornoWeb */
.siac-modal-dinamico {
    position: fixed !important;
    z-index: 10500;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    /* SOLUCIÓN A LA TRANSPARENCIA: Fondo gris sólido obligatorio */
   /* background-color: #F0F0F0 !important;*/
    background-color: lightcyan !important;
    border: 1px solid #A9A9A9;
    border-radius: 4px; /* Un borde ligeramente redondeado */
    overflow: hidden;
    /* Efecto Backdrop oscuro para bloquear el formulario padre */
    box-shadow: 0 0 0 100vw rgba(0,0,0,0.4), 0 10px 25px rgba(0,0,0,0.4);
}/*.classic-fieldset legend {
    font-size: 11px !important;*/ /* Mismo tamaño de tus etiquetas form-label */
    /*line-height: 1 !important;
    color: #212529;*/ /* Color de texto oscuro estándar */
    /*padding-bottom: 0 !important;
}*/
/* ==========================================================================
   NAVEGACIÓN DE REGISTROS (FormularioBase)
   ========================================================================== */

/*.siac-nav-registros {
    background-color: #f8f9fa;*/ /* Color de fondo sutil si lo deseas */
    /*border: 1px solid #ced4da;
    border-radius: 4px;
    padding: 2px 4px;
}

    .siac-nav-registros .btn-nav-registro {
        width: 28px;
        height: 24px;
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 12px;
        font-weight: bold;
        color: #495057;
        background-color: #ffffff;
        border: 1px solid #ced4da;
        border-radius: 3px;
        transition: all 0.2s ease;
    }

        .siac-nav-registros .btn-nav-registro:hover:not(:disabled) {
            background-color: #e2e6ea;
            color: #000;
        }

        .siac-nav-registros .btn-nav-registro:disabled {
            background-color: #e9ecef;
            color: #adb5bd;
            cursor: not-allowed;
            border-color: #e9ecef;
        }

    .siac-nav-registros .nav-registro-contador {
        min-width: 65px;
        text-align: center;
        font-size: 12px;
        font-weight: 600;
        color: #333;
        user-select: none;*/ /* Evita que el texto se sombree accidentalmente */
    /*}*/