/**
 * Fecha: 2026-01-30 11:40
 * Archivo: CustomAJE.CSS
 * Descripcion: Sobrescribe estilos NetTalk con apariencia Bootstrap 5
 * Cambio: Agregado import de login-enhancer.css para login moderno
 * Autor: Alejandro J. Elias -- Director -- DeveloperTeam Software Solutions
 *
 * Uso: Se carga automaticamente desde NetTalk
 * Ruta: themes/base/CustomAJE.CSS
 */

/* ========== IMPORTAR CSS LOGIN MODERNO ========== */
@import url("/css/login-enhancer.css");

/* ========== STICKY FOOTER - FORZAR ========== */
/* Fecha: 2026-01-17 - Footer siempre al final de la página */
html {
    height: 100% !important;
}

body {
    display: flex !important;
    flex-direction: column !important;
    min-height: 100vh !important;
}

/* Contenido principal ocupa todo el espacio disponible */
main,
.nt-main,
.nt-content,
#content,
[class*="content"],
body > div:not(.navbar):not(.site-footer):not(footer):not(.ui-dialog):not(.ui-widget-overlay) {
    flex: 1 0 auto !important;
}

/* Footer siempre al final */
footer,
.site-footer,
.nt-footer,
#footer {
    flex-shrink: 0 !important;
    margin-top: auto !important;
    width: 100% !important;
}

/* ========== VARIABLES - PALETA BOOTSTRAP/NAVY ========== */
:root {
    /* Colores Primarios - Navy profesional */
    --bs-primary: #003366;
    --bs-primary-dark: #002244;
    --bs-primary-light: #004080;
    --bs-secondary: #6c757d;
    --bs-success: #28a745;
    --bs-danger: #dc3545;
    --bs-warning: #ffc107;
    --bs-info: #17a2b8;
    --bs-light: #f8f9fa;
    --bs-dark: #343a40;
    --bs-white: #ffffff;

    /* Sobrescribir variables NetTalk */
    --color-primary: #003366;
    --darkest-primary: #001a33;
    --dark-primary: #002244;
    --light-primary: #004080;
    --lighter-primary: #0055a5;
    --lightest-primary: #e2effc;

    /* Tipografia */
    --font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --font-size: 14px;

    /* Bordes */
    --radius: 6px;
    --button-radius: 6px;
    --entry-radius: 6px;
}

/* ========== BOTONES ========== */
.nt-button,
.ui-button {
    font-family: var(--font-family) !important;
    font-weight: 500 !important;
    padding: 0.5rem 1rem !important;
    border-radius: var(--button-radius) !important;
    border: 1px solid transparent !important;
    cursor: pointer;
    transition: all 0.15s ease-in-out !important;
    min-height: 38px !important;
}

/* Boton por defecto - estilo Bootstrap secondary */
.nt-button,
.nt-default-button {
    background: var(--bs-light) !important;
    background-image: none !important;
    color: var(--bs-dark) !important;
    border-color: #dee2e6 !important;
}

.nt-button:hover,
.nt-default-button:hover {
    background: #e9ecef !important;
    border-color: #dee2e6 !important;
}

/* Boton Guardar - Bootstrap success */
.nt-save-button,
.nt-select-button,
.nt-close-button,
.nt-start-button {
    background: var(--bs-success) !important;
    background-image: none !important;
    color: var(--bs-white) !important;
    border-color: var(--bs-success) !important;
}

.nt-save-button:hover,
.nt-select-button:hover,
.nt-close-button:hover,
.nt-start-button:hover {
    background: #218838 !important;
    border-color: #1e7e34 !important;
}

/* Boton Cancelar - Bootstrap warning */
.nt-cancel-button,
.nt-logout-button {
    background: var(--bs-warning) !important;
    background-image: none !important;
    color: var(--bs-dark) !important;
    border-color: var(--bs-warning) !important;
}

.nt-cancel-button:hover,
.nt-logout-button:hover {
    background: #e0a800 !important;
    border-color: #d39e00 !important;
}

/* Boton Eliminar - Bootstrap danger */
.nt-delete-button,
.nt-deleteb-button,
.nt-deletef-button {
    background: var(--bs-danger) !important;
    background-image: none !important;
    color: var(--bs-white) !important;
    border-color: var(--bs-danger) !important;
}

.nt-delete-button:hover,
.nt-deleteb-button:hover,
.nt-deletef-button:hover {
    background: #c82333 !important;
    border-color: #bd2130 !important;
}

/* Botones de navegacion - Bootstrap primary outline */
.nt-first-button,
.nt-previous-button,
.nt-next-button,
.nt-last-button,
.nt-locate-button,
.nt-clear-button,
.nt-lookup-button {
    background: transparent !important;
    background-image: none !important;
    color: var(--bs-primary) !important;
    border-color: var(--bs-primary) !important;
}

.nt-first-button:hover,
.nt-previous-button:hover,
.nt-next-button:hover,
.nt-last-button:hover,
.nt-locate-button:hover,
.nt-clear-button:hover,
.nt-lookup-button:hover {
    background: var(--bs-primary) !important;
    color: var(--bs-white) !important;
}

/* Botones CRUD - Bootstrap info */
.nt-insert-button,
.nt-copy-button,
.nt-change-button,
.nt-view-button {
    background: var(--bs-primary) !important;
    background-image: none !important;
    color: var(--bs-white) !important;
    border-color: var(--bs-primary) !important;
}

.nt-insert-button:hover,
.nt-copy-button:hover,
.nt-change-button:hover,
.nt-view-button:hover {
    background: var(--bs-primary-dark) !important;
    border-color: var(--bs-primary-dark) !important;
}

/* ========== DIALOGS / MODALES ========== */
/* Fecha: 2026-01-17 - z-index alto para que popups queden sobre el navbar */
.ui-dialog {
    border: none !important;
    border-radius: 8px !important;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
    padding: 0 !important;
    z-index: 10000 !important;
}

/* Overlay detrás del popup - también sobre el navbar */
.ui-widget-overlay {
    z-index: 9999 !important;
}

/* Fecha: 2026-01-17 - Datepicker sobre Bootstrap modals */
#ui-datepicker-div,
.ui-datepicker {
    z-index: 99999 !important;
}

.ui-dialog .ui-dialog-titlebar {
    background: linear-gradient(135deg, var(--bs-primary-dark) 0%, var(--bs-primary) 100%) !important;
    border: none !important;
    border-radius: 8px 8px 0 0 !important;
    padding: 1rem 1.25rem !important;
}

.ui-dialog .ui-dialog-titlebar,
.ui-dialog .ui-dialog-title {
    color: var(--bs-white) !important;
    font-weight: 500 !important;
}

.ui-dialog .ui-dialog-titlebar-close {
    background: rgba(255, 255, 255, 0.2) !important;
    border: none !important;
    border-radius: 4px !important;
    opacity: 0.8;
}

.ui-dialog .ui-dialog-titlebar-close:hover {
    background: rgba(255, 255, 255, 0.3) !important;
    opacity: 1;
}

.ui-dialog .ui-dialog-content {
    padding: 1.25rem !important;
    border: none !important;
}

.ui-dialog .ui-dialog-buttonpane {
    background: var(--bs-light) !important;
    border-top: 1px solid #dee2e6 !important;
    padding: 0.75rem 1.25rem !important;
    margin: 0 !important;
}

/* ========== TABS ========== */
.ui-tabs {
    border: none !important;
    background: transparent !important;
    padding: 0 !important;
}

.ui-tabs .ui-tabs-nav {
    background: var(--bs-light) !important;
    border: none !important;
    border-bottom: 1px solid #dee2e6 !important;
    border-radius: 0 !important;
    padding: 0 !important;
}

.ui-tabs .ui-tabs-nav li {
    margin: 0 !important;
    border: none !important;
    background: transparent !important;
}

.ui-tabs .ui-tabs-nav li a {
    padding: 0.75rem 1.25rem !important;
    color: var(--bs-secondary) !important;
    border: none !important;
    border-bottom: 3px solid transparent !important;
    background: transparent !important;
    font-weight: 500 !important;
    border-radius: 0 !important;
}

.ui-tabs .ui-tabs-nav li.ui-tabs-active a,
.ui-tabs .ui-tabs-nav li.ui-state-active a {
    color: var(--bs-primary) !important;
    border-bottom-color: var(--bs-primary) !important;
    background: transparent !important;
}

.ui-tabs .ui-tabs-nav li a:hover {
    color: var(--bs-primary) !important;
    background: rgba(0, 51, 102, 0.05) !important;
}

.ui-tabs .ui-tabs-panel {
    border: none !important;
    padding: 1rem 0 !important;
    background: transparent !important;
}

/* ========== FORMULARIOS / ENTRIES ========== */
.nt-entry,
.nt-entry-text {
    font-family: var(--font-family) !important;
    font-size: 14px !important;
    padding: 0.5rem 0.75rem !important;
    border: 1px solid #ced4da !important;
    border-radius: var(--entry-radius) !important;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out !important;
    background-color: var(--bs-white) !important;
}

.nt-entry:focus,
.nt-entry-text:focus {
    border-color: var(--bs-primary) !important;
    outline: 0 !important;
    box-shadow: 0 0 0 0.2rem rgba(0, 51, 102, 0.25) !important;
}

.nt-entry-required {
    background-color: #fff3cd !important;
}

.nt-entry-readonly {
    background-color: #e9ecef !important;
}

.nt-entry-error {
    border-color: var(--bs-danger) !important;
    background-color: #f8d7da !important;
}

.nt-prompt {
    font-weight: 500 !important;
    color: var(--bs-dark) !important;
    margin-bottom: 0.25rem !important;
}

/* ========== BROWSE / TABLAS ========== */
.nt-browse-table,
.nt-browse-grid {
    width: 100% !important;
}

/* Headers de browse */
.nt-browse-header-selected,
.nt-browse-header-not-selected,
.nt-browse-header-cant-select,
.nt-browse-header-empty {
    background: var(--bs-primary) !important;
    background-image: none !important;
    color: var(--bs-white) !important;
    border: none !important;
    padding: 0.75rem 0.5rem !important;
    font-weight: 500 !important;
}

.nt-browse-header-selected a,
.nt-browse-header-not-selected a {
    color: var(--bs-white) !important;
}

.nt-browse-header-not-selected:hover {
    background: var(--bs-primary-light) !important;
}

/* Filas de browse */
.nt-browse-gb1,
.nt-browse-gb1 > div {
    background-color: var(--bs-white) !important;
    color: var(--bs-dark) !important;
}

.nt-browse-gb2,
.nt-browse-gb2 > div {
    background-color: #f8f9fa !important;
    color: var(--bs-dark) !important;
}

.nt-browse-mouseover,
.nt-browse-mouseover > div {
    background-color: #e2effc !important;
    color: var(--bs-dark) !important;
}

.nt-browse-selected,
.nt-browse-selected > div {
    background-color: #cce5ff !important;
    color: var(--bs-dark) !important;
}

/* Celdas de browse */
.nt-browse-cell,
.nt-browse-grid-cell,
.nt-browse-flex-cell {
    padding: 0.5rem !important;
    border-bottom: 1px solid #dee2e6 !important;
}

/* Footer de browse */
.nt-browse-table-footer,
.nt-browse-row-footer {
    background-color: var(--bs-light) !important;
    border-top: 2px solid #dee2e6 !important;
    font-weight: 600 !important;
}

.nt-browse-empty {
    background-color: #f8f9fa !important;
    color: var(--bs-secondary) !important;
    text-align: center !important;
    padding: 2rem !important;
}

/* ========== HEADERS ========== */
.nt-header,
.nt-form-header,
.nt-browse-header {
    color: var(--bs-primary) !important;
    font-weight: 600 !important;
    border-bottom: 2px solid var(--bs-primary) !important;
    padding-bottom: 0.5rem !important;
    margin-bottom: 1rem !important;
}

.nt-sub-header,
.nt-form-header-sub,
.nt-browse-header-sub {
    color: var(--bs-secondary) !important;
    font-weight: 500 !important;
}

/* ========== ALERTAS Y ERRORES ========== */
.nt-alert {
    border-radius: var(--radius) !important;
    padding: 1rem !important;
}

.nt-error-dialog {
    background: #f8d7da !important;
}

.nt-error-dialog .ui-dialog-titlebar {
    background: var(--bs-danger) !important;
    background-image: none !important;
}

.nt-warning-dialog {
    background: #fff3cd !important;
}

.nt-warning-dialog .ui-dialog-titlebar {
    background: var(--bs-warning) !important;
    background-image: none !important;
    color: var(--bs-dark) !important;
}

/* ========== MENUS ========== */
.nt-menu a {
    background: var(--bs-primary) !important;
    background-image: none !important;
    color: var(--bs-white) !important;
    border-radius: var(--radius) !important;
}

.nt-menu a:hover {
    background: var(--bs-primary-light) !important;
}

.nt-menu-items {
    background: var(--bs-white) !important;
    background-image: none !important;
    border: 1px solid #dee2e6 !important;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
}

.nt-menu-item a {
    color: var(--bs-dark) !important;
    background: transparent !important;
}

.nt-menu-item a:hover {
    background: var(--bs-primary) !important;
    color: var(--bs-white) !important;
}

/* ========== ACCORDION ========== */
.ui-accordion .ui-accordion-header {
    background: var(--bs-light) !important;
    background-image: none !important;
    border: 1px solid #dee2e6 !important;
    color: var(--bs-dark) !important;
    font-weight: 500 !important;
}

.ui-accordion .ui-accordion-header:hover {
    background: #e9ecef !important;
}

.ui-accordion .ui-accordion-header-active {
    background: var(--bs-primary) !important;
    color: var(--bs-white) !important;
}

.ui-accordion .ui-accordion-content {
    border: 1px solid #dee2e6 !important;
    border-top: none !important;
}

/* ========== PROGRESS BAR ========== */
.nt-progress {
    background-color: #e9ecef !important;
    border-radius: var(--radius) !important;
    overflow: hidden !important;
}

.ui-progressbar-value {
    background: var(--bs-primary) !important;
    background-image: none !important;
}

/* ========== DATEPICKER ========== */
.ui-datepicker {
    border: 1px solid #dee2e6 !important;
    border-radius: var(--radius) !important;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
}

.ui-datepicker .ui-datepicker-header {
    background: var(--bs-primary) !important;
    background-image: none !important;
    color: var(--bs-white) !important;
    border: none !important;
    border-radius: var(--radius) var(--radius) 0 0 !important;
}

.ui-datepicker td a {
    text-align: center !important;
}

.ui-datepicker td a:hover {
    background: var(--bs-primary) !important;
    color: var(--bs-white) !important;
}

.ui-datepicker .ui-datepicker-current-day a {
    background: var(--bs-primary) !important;
    color: var(--bs-white) !important;
}

/* ========== CHECKBOX Y RADIO ========== */
.nt-naked-checkbox {
    border-color: var(--bs-primary) !important;
}

.nt-naked-checkbox:checked::after {
    color: var(--bs-primary) !important;
}

.nt-naked-radio {
    border-color: var(--bs-primary) !important;
}

.nt-naked-radio:checked {
    border-color: var(--bs-primary) !important;
}

/* ========== SPINNER ========== */
.ui-spinner {
    border: 1px solid #ced4da !important;
    border-radius: var(--entry-radius) !important;
}

.ui-spinner-button {
    background: var(--bs-light) !important;
    background-image: none !important;
    border-color: #ced4da !important;
}

.ui-spinner-button:hover {
    background: #e9ecef !important;
}

/* ========== AUTOCOMPLETE ========== */
.ui-autocomplete {
    border: 1px solid #dee2e6 !important;
    border-radius: var(--radius) !important;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
}

.ui-autocomplete .ui-menu-item-wrapper:hover {
    background: var(--bs-primary) !important;
    color: var(--bs-white) !important;
}

/* ========== TOOLTIPS ========== */
#vtip {
    background-color: var(--bs-dark) !important;
    color: var(--bs-white) !important;
    border: none !important;
    border-radius: var(--radius) !important;
}

/* ========== BREADCRUMBS ========== */
.nt-bread {
    background-color: var(--bs-light) !important;
    border: none !important;
    border-radius: var(--radius) !important;
    padding: 0.75rem 1rem !important;
}

.nt-crumb,
.nt-crumb-first,
.nt-crumb-last {
    background: var(--bs-primary) !important;
    color: var(--bs-white) !important;
}

.nt-whole-crumb:hover a {
    background: var(--bs-primary-dark) !important;
}

/* ========== USUARIO CONECTADO / USER WELCOME ========== */
/* Fecha: 2026-01-17 - Fondo oscuro para integrarse con hero navy */

.user-welcome {
    background: rgba(0, 20, 50, 0.6) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    border-radius: 12px !important;
    padding: 1rem 1.5rem !important;
    color: #fff !important;
}

.user-welcome * {
    color: #fff !important;
}

.user-welcome small {
    opacity: 0.8 !important;
}

.user-welcome strong {
    font-weight: 600 !important;
    font-size: 1.05rem !important;
}

/* Círculo del avatar */
.user-welcome .bg-white {
    background: #fff !important;
}

.user-welcome .bi-person-circle {
    color: var(--bs-primary) !important;
}

/* ========== ÁREA DE BÚSQUEDA / LOCALIZAR ========== */
/* Estilos básicos - sin modificar estructura de tablas */

/* ========== UTILIDADES ========== */
.ui-widget {
    font-family: var(--font-family) !important;
}

.ui-state-highlight {
    background: #cce5ff !important;
    border-color: #b8daff !important;
}

.ui-state-error {
    background: #f8d7da !important;
    border-color: #f5c6cb !important;
    color: #721c24 !important;
}

/* Overlay mas oscuro */
.ui-widget-overlay {
    background: rgba(0, 0, 0, 0.5) !important;
    opacity: 1 !important;
}

/* ========== RESPONSIVE BROWSE CONTAINERS ========== */
/* Fecha: 2026-01-17 - Fix responsive para divs browse */
/* Fecha: 2026-01-17 - Corregido doble scroll horizontal - AGRESIVO */

/* TODOS los elementos internos del browse - SIN scroll propio */
div[id^="browse"] *:not(div[id^="browse"]) {
    overflow-x: visible !important;
    overflow-y: visible !important;
}

/* Contenedor principal del browse - ÚNICO con scroll */
div[id^="browse"] {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    -webkit-overflow-scrolling: touch;
}

/* Wrapper interno - SIN scroll */
div[id^="browse"] .nt-browse-grid,
div[id^="browse"] .nt-browse-table,
div[id^="browse"] > table,
div[id^="browse"] .nt-browse-scroll,
div[id^="browse"] .nt-browse-body,
div[id^="browse"] > div,
div[id^="browse"] > div > div {
    overflow: visible !important;
}

/* Responsive en móviles - SCROLL HORIZONTAL */
@media (max-width: 767.98px) {
    /* Contenedor con scroll horizontal - ÚNICO scroll */
    div[id^="browse"] {
        margin: 0 !important;
        padding: 0 !important;
        overflow-x: auto !important;
        overflow-y: visible !important;
        -webkit-overflow-scrolling: touch;
        background: var(--bs-white);
    }

    /* Elementos internos SIN scroll */
    div[id^="browse"] .nt-browse-scroll,
    div[id^="browse"] .nt-browse-body,
    div[id^="browse"] .nt-browse-grid,
    div[id^="browse"] .nt-browse-table {
        overflow: visible !important;
    }

    /* Tabla con ancho mínimo para forzar scroll */
    div[id^="browse"] .nt-browse-grid,
    div[id^="browse"] .nt-browse-table,
    div[id^="browse"] > table {
        min-width: 600px !important;
        width: max-content !important;
    }

    /* Ocultar prompts en flex cells */
    div[id^="browse"] .nt-browse-flex-cell-prompt {
        display: none !important;
    }

    /* Headers compactos */
    div[id^="browse"] .nt-browse-header-selected,
    div[id^="browse"] .nt-browse-header-not-selected,
    div[id^="browse"] .nt-browse-header-cant-select {
        padding: 0.6rem 0.5rem !important;
        font-size: 0.75rem !important;
        white-space: nowrap !important;
    }

    /* Celdas compactas */
    div[id^="browse"] .nt-browse-cell,
    div[id^="browse"] .nt-browse-grid-cell,
    div[id^="browse"] .nt-browse-flex-cell,
    div[id^="browse"] td {
        padding: 0.5rem 0.4rem !important;
        font-size: 0.8rem !important;
        white-space: nowrap !important;
    }

    /* Botones de acción más pequeños */
    div[id^="browse"] .nt-button {
        padding: 0.35rem 0.6rem !important;
        font-size: 0.75rem !important;
        min-height: 32px !important;
    }

    /* Barra de botones de navegación */
    div[id^="browse"] .nt-browse-buttons,
    div[id^="browse"] .nt-button-bar {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 0.4rem !important;
        justify-content: center !important;
        padding: 0.5rem !important;
        background: var(--bs-light) !important;
        border-top: 1px solid #dee2e6 !important;
    }
}

/* Tablets */
@media (min-width: 768px) and (max-width: 991.98px) {
    div[id^="browse"] .nt-browse-cell,
    div[id^="browse"] .nt-browse-grid-cell {
        padding: 0.45rem !important;
        font-size: 0.9rem !important;
    }
}

/* Contenedor relativo para indicadores */
div[id^="browse"] {
    position: relative;
}

/* ========== FIX HEADER CON BOOTSTRAP MODAL ========== */
/* Fecha: 2026-01-17 - Header visible cuando modal está abierto */

/* Cuando hay modal abierto, el body tiene overflow:hidden - esto afecta sticky */
/* Cambiamos navbar de sticky-top a fixed-top cuando hay modal */
body.modal-open .navbar.sticky-top {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 1030 !important;
}

/* Compensar el padding-right que Bootstrap agrega al body */
body.modal-open .navbar.sticky-top {
    padding-right: inherit !important;
}

/* Asegurar que el modal no cubra el header - backdrop debajo del navbar */
.modal-backdrop {
    z-index: 1020 !important;
}

/* Modal encima del backdrop pero debajo de datepicker */
.modal {
    z-index: 1050 !important;
}

/* Bootstrap modal dialog - asegurar que no suba demasiado */
.modal-dialog {
    margin-top: 80px !important;
}

/* En móvil, menos margen */
@media (max-width: 767.98px) {
    .modal-dialog {
        margin-top: 70px !important;
    }
}
.nt-busy {
    position: fixed; /* Se mantiene fijo en la pantalla */
    top: 50%;
    left: 50%;
    width: 32px;
    height: 32px;
    z-index: 9999;
    background-color: transparent;
    transform: translate(-50%, -50%); /* Centra exactamente */
}
.sum-rgy-total {
    font-weight: bold;
    color: black;
}