/**
 * TailAdmin Colors Only Override
 * Solo cambia colores, NO afecta sidebar que mantiene especificidad AdminLTE
 * Especificidad del sidebar: [class*=sidebar-dark-] .sidebar a (0,2,1)
 */

:root {
    /* Colores TailAdmin suaves - Solo para contenido */
    --ta-primary: #C78D2F;
    --ta-primary-hover: #A67325;
    --ta-primary-light: #FDF6E8;
    
    --ta-secondary: #465FFF;
    --ta-secondary-hover: #3641F5;
    --ta-secondary-light: #EEF1FF;
    
    --ta-success: #10B981;
    --ta-success-hover: #059669;
    --ta-success-light: #ECFDF5;
    
    --ta-warning: #F59E0B;
    --ta-warning-hover: #D97706;
    --ta-warning-light: #FFFBEB;
    
    --ta-danger: #EF4444;
    --ta-danger-hover: #DC2626;
    --ta-danger-light: #FEF2F2;
    
    --ta-info: #06B6D4;
    --ta-info-hover: #0891B2;
    --ta-info-light: #ECFEFF;
}

/* ========================================
   SMALL-BOXES - Preservar AdminLTE original
 ======================================== */

/* Preservar texto blanco en small-boxes bg-info, bg-success, etc */
.small-box .inner h3,
.small-box .inner p,
.small-box-footer {
    color: #ffffff !important;
}

/* Asegurar iconos blancos en small-boxes */
.small-box .icon i {
    color: rgba(255, 255, 255, 0.15) !important;
}

/* ========================================
   INFO-BOXES - Responsive Mobile Optimization
   Priorizar datos sobre iconos decorativos
 ======================================== */

/* Mobile: Info-boxes optimizadas para pantallas pequeñas */
@media (max-width: 767.98px) {
    /* Icono MÍNIMO - solo decorativo */
    .info-box .info-box-icon {
        width: 45px !important;
        min-width: 45px !important;
        max-width: 45px !important;
        font-size: 1.3rem !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex-shrink: 0 !important;
        padding: 0 !important;
    }

    .info-box .info-box-icon i {
        font-size: 1.3rem !important;
    }

    /* Contenido principal - MAXIMIZAR espacio */
    .info-box .info-box-content {
        flex: 1 !important;
        padding: 6px 8px !important;
        min-width: 0 !important;
        overflow: hidden !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
    }

    /* Texto descriptivo - compacto */
    .info-box .info-box-text {
        font-size: 0.7rem !important;
        font-weight: 600 !important;
        line-height: 1.1 !important;
        margin-bottom: 2px !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    /* Cifras - PRIORIDAD MÁXIMA - ajustadas para 7+ dígitos */
    .info-box .info-box-number {
        font-size: 0.95rem !important;
        font-weight: 700 !important;
        line-height: 1.1 !important;
        margin-bottom: 2px !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        letter-spacing: -0.5px !important;
    }

    /* Progress bar oculto en móvil para ahorrar espacio */
    .info-box .progress {
        display: none !important;
    }

    /* Descripción del progreso - una línea */
    .info-box .progress-description {
        font-size: 0.6rem !important;
        line-height: 1.1 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        color: rgba(0,0,0,0.6) !important;
    }

    /* Contenedor de info-box - compacto */
    .info-box {
        display: flex !important;
        flex-direction: row !important;
        align-items: stretch !important;
        min-height: 60px !important;
        max-height: 70px !important;
        margin-bottom: 0.5rem !important;
    }
}

/* Extra small (< 480px): Layout VERTICAL para más espacio */
@media (max-width: 480px) {
    /* Layout vertical - icono arriba, contenido abajo */
    .info-box {
        flex-direction: column !important;
        min-height: auto !important;
        max-height: none !important;
        padding: 8px !important;
    }

    /* Icono como badge pequeño en esquina */
    .info-box .info-box-icon {
        width: 100% !important;
        max-width: 100% !important;
        min-width: auto !important;
        height: 30px !important;
        min-height: 30px !important;
        font-size: 1rem !important;
        border-radius: 4px 4px 0 0 !important;
    }

    .info-box .info-box-icon i {
        font-size: 1rem !important;
    }

    /* Contenido centrado */
    .info-box .info-box-content {
        padding: 8px !important;
        text-align: center !important;
        align-items: center !important;
    }

    /* Texto visible */
    .info-box .info-box-text {
        font-size: 0.65rem !important;
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: clip !important;
    }

    /* Cifras prominentes - centradas */
    .info-box .info-box-number {
        font-size: 1.1rem !important;
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: clip !important;
        word-break: break-all !important;
    }

    /* Descripción visible */
    .info-box .progress-description {
        font-size: 0.6rem !important;
        white-space: normal !important;
        overflow: visible !important;
    }
}

/* ========================================
   CARD-HEADERS - Texto blanco SOLO en fondos de color
 ======================================== */

/* Card-headers con clases bg-* explícitas */
.card-header.bg-primary,
.card-header.bg-secondary,
.card-header.bg-success,
.card-header.bg-info,
.card-header.bg-warning,
.card-header.bg-danger,
.card-header.bg-dark {
    color: #ffffff !important;
}

.card-header.bg-primary .card-title,
.card-header.bg-secondary .card-title,
.card-header.bg-success .card-title,
.card-header.bg-info .card-title,
.card-header.bg-warning .card-title,
.card-header.bg-danger .card-title,
.card-header.bg-dark .card-title,
.card-header.bg-primary i,
.card-header.bg-secondary i,
.card-header.bg-success i,
.card-header.bg-info i,
.card-header.bg-warning i,
.card-header.bg-danger i,
.card-header.bg-dark i {
    color: #ffffff !important;
}

/* Card-headers de AdminLTE con fondo automático por clase padre */
.card-primary:not(.card-outline) > .card-header,
.card-secondary:not(.card-outline) > .card-header,
.card-info:not(.card-outline) > .card-header,
.card-success:not(.card-outline) > .card-header,
.card-warning:not(.card-outline) > .card-header,
.card-danger:not(.card-outline) > .card-header,
.card-dark:not(.card-outline) > .card-header {
    color: #ffffff !important;
}

.card-primary:not(.card-outline) > .card-header .card-title,
.card-secondary:not(.card-outline) > .card-header .card-title,
.card-info:not(.card-outline) > .card-header .card-title,
.card-success:not(.card-outline) > .card-header .card-title,
.card-warning:not(.card-outline) > .card-header .card-title,
.card-danger:not(.card-outline) > .card-header .card-title,
.card-dark:not(.card-outline) > .card-header .card-title,
.card-primary:not(.card-outline) > .card-header i,
.card-secondary:not(.card-outline) > .card-header i,
.card-info:not(.card-outline) > .card-header i,
.card-success:not(.card-outline) > .card-header i,
.card-warning:not(.card-outline) > .card-header i,
.card-danger:not(.card-outline) > .card-header i,
.card-dark:not(.card-outline) > .card-header i {
    color: #ffffff !important;
}

/* ========================================
   BOTONES - Solo en contenido principal
 ======================================== */

.content-wrapper .btn-primary,
.card .btn-primary,
.modal .btn-primary {
    background-color: var(--ta-primary) !important;
    border-color: var(--ta-primary) !important;
}

.content-wrapper .btn-primary:hover,
.card .btn-primary:hover,
.modal .btn-primary:hover {
    background-color: var(--ta-primary-hover) !important;
    border-color: var(--ta-primary-hover) !important;
}

.content-wrapper .btn-secondary,
.card .btn-secondary,
.modal .btn-secondary {
    background-color: var(--ta-secondary) !important;
    border-color: var(--ta-secondary) !important;
}

.content-wrapper .btn-secondary:hover,
.card .btn-secondary:hover,
.modal .btn-secondary:hover {
    background-color: var(--ta-secondary-hover) !important;
    border-color: var(--ta-secondary-hover) !important;
}

.content-wrapper .btn-success,
.card .btn-success,
.modal .btn-success {
    background-color: var(--ta-success) !important;
    border-color: var(--ta-success) !important;
}

.content-wrapper .btn-success:hover,
.card .btn-success:hover,
.modal .btn-success:hover {
    background-color: var(--ta-success-hover) !important;
    border-color: var(--ta-success-hover) !important;
}

.content-wrapper .btn-warning,
.card .btn-warning,
.modal .btn-warning {
    background-color: var(--ta-warning) !important;
    border-color: var(--ta-warning) !important;
}

.content-wrapper .btn-warning:hover,
.card .btn-warning:hover,
.modal .btn-warning:hover {
    background-color: var(--ta-warning-hover) !important;
    border-color: var(--ta-warning-hover) !important;
}

.content-wrapper .btn-danger,
.card .btn-danger,
.modal .btn-danger {
    background-color: var(--ta-danger) !important;
    border-color: var(--ta-danger) !important;
}

.content-wrapper .btn-danger:hover,
.card .btn-danger:hover,
.modal .btn-danger:hover {
    background-color: var(--ta-danger-hover) !important;
    border-color: var(--ta-danger-hover) !important;
}

.content-wrapper .btn-info,
.card .btn-info,
.modal .btn-info {
    background-color: var(--ta-info) !important;
    border-color: var(--ta-info) !important;
}

.content-wrapper .btn-info:hover,
.card .btn-info:hover,
.modal .btn-info:hover {
    background-color: var(--ta-info-hover) !important;
    border-color: var(--ta-info-hover) !important;
}

/* ========================================
   ALERTS - Solo en contenido principal
 ======================================== */

.content-wrapper .alert-primary,
.card .alert-primary,
.modal .alert-primary {
    background-color: var(--ta-primary-light) !important;
    border-color: var(--ta-primary) !important;
    color: #252DAE !important;
}

.content-wrapper .alert-success,
.card .alert-success,
.modal .alert-success {
    background-color: var(--ta-success-light) !important;
    border-color: var(--ta-success) !important;
    color: #047857 !important;
}

.content-wrapper .alert-warning,
.card .alert-warning,
.modal .alert-warning {
    background-color: var(--ta-warning-light) !important;
    border-color: var(--ta-warning) !important;
    color: #B45309 !important;
}

.content-wrapper .alert-danger,
.card .alert-danger,
.modal .alert-danger {
    background-color: var(--ta-danger-light) !important;
    border-color: var(--ta-danger) !important;
    color: #B91C1C !important;
}

.content-wrapper .alert-info,
.card .alert-info,
.modal .alert-info {
    background-color: var(--ta-info-light) !important;
    border-color: var(--ta-info) !important;
    color: #0E7490 !important;
}

/* Enlaces en alerts con fondo claro - color contraste */
.content-wrapper .alert a,
.card .alert a,
.modal .alert a {
    color: #dc2626 !important;
    text-decoration: underline;
}

.content-wrapper .alert a:hover,
.card .alert a:hover,
.modal .alert a:hover {
    color: #fff !important;
    text-decoration: underline;
}

/* ========================================
   BADGES - Solo en contenido principal
 ======================================== */

/* Tamaño general para todos los badges */
.content-wrapper .badge,
.card .badge,
.table .badge {
    font-size: 0.85em !important;
}

.content-wrapper .badge-primary,
.card .badge-primary,
.table .badge-primary {
    background-color: var(--ta-primary) !important;
    font-size: 0.85em !important;
}

.content-wrapper .badge-success,
.card .badge-success,
.table .badge-success {
    background-color: var(--ta-success) !important;
    font-size: 0.85em !important;
}

.content-wrapper .badge-warning,
.card .badge-warning,
.table .badge-warning {
    background-color: var(--ta-warning) !important;
    font-size: 0.85em !important;
}

.content-wrapper .badge-danger,
.card .badge-danger,
.table .badge-danger {
    background-color: var(--ta-danger) !important;
    font-size: 0.85em !important;
}

.content-wrapper .badge-info,
.card .badge-info,
.table .badge-info {
    background-color: var(--ta-info) !important;
    font-size: 0.85em !important;
}

/* ========================================
   PROGRESS BARS - Solo en contenido
 ======================================== */

.content-wrapper .progress-bar,
.card .progress-bar {
    background-color: var(--ta-primary) !important;
}

.content-wrapper .bg-primary,
.card .bg-primary {
    background-color: var(--ta-primary) !important;
}

.content-wrapper .bg-success,
.card .bg-success {
    background-color: var(--ta-success) !important;
}

.content-wrapper .bg-warning,
.card .bg-warning {
    background-color: var(--ta-warning) !important;
}

.content-wrapper .bg-danger,
.card .bg-danger {
    background-color: var(--ta-danger) !important;
}

.content-wrapper .bg-info,
.card .bg-info {
    background-color: var(--ta-info) !important;
}

/* ========================================
   TEXT COLORS - Solo en contenido
 ======================================== */

.content-wrapper .text-primary,
.card .text-primary {
    color: var(--ta-primary) !important;
}

.content-wrapper .text-success,
.card .text-success {
    color: var(--ta-success) !important;
}

.content-wrapper .text-warning,
.card .text-warning {
    color: var(--ta-warning) !important;
}

.content-wrapper .text-danger,
.card .text-danger {
    color: var(--ta-danger) !important;
}

.content-wrapper .text-info,
.card .text-info {
    color: var(--ta-info) !important;
}

/* ========================================
   ENLACES - Solo en contenido, NO sidebar
 ======================================== */

.content-wrapper a:not(.btn):not(.nav-link):not(.sidebar-toggle):not(.small-box-footer),
.card a:not(.btn):not(.nav-link):not(.sidebar-toggle):not(.small-box-footer),
.breadcrumb-item a {
    color: var(--ta-primary) !important;
}

.content-wrapper a:not(.btn):not(.nav-link):not(.sidebar-toggle):not(.small-box-footer):hover,
.card a:not(.btn):not(.nav-link):not(.sidebar-toggle):not(.small-box-footer):hover,
.breadcrumb-item a:hover {
    color: var(--ta-primary-hover) !important;
}

/* Asegurar especificidad para small-box-footer sobre AdminLTE */
.content-wrapper .small-box > a.small-box-footer {
    color: #fff !important;
}

.content-wrapper .small-box > a.small-box-footer:hover {
    color: #fff !important;
}

/* ========================================
   FORMS - Solo en contenido
 ======================================== */

.content-wrapper .form-control:focus,
.card .form-control:focus,
.modal .form-control:focus {
    border-color: var(--ta-primary) !important;
    box-shadow: 0 0 0 0.2rem rgba(70, 95, 255, 0.25) !important;
}

/* ========================================
   SMALL BOXES - Solo en dashboard/contenido
 ======================================== */

.content-wrapper .small-box.bg-primary {
    background-color: var(--ta-primary) !important;
}

.content-wrapper .small-box.bg-success {
    background-color: var(--ta-success) !important;
}

.content-wrapper .small-box.bg-warning {
    background-color: var(--ta-warning) !important;
}

.content-wrapper .small-box.bg-danger {
    background-color: var(--ta-danger) !important;
}

.content-wrapper .small-box.bg-info {
    background-color: var(--ta-info) !important;
}

/* ========================================
   SMALL BOX FOOTER LINKS - Color específico
 ======================================== */

.content-wrapper .small-box > .small-box-footer {
    color: #fff !important;
}

.content-wrapper .small-box.bg-warning > .small-box-footer {
    color: #fff !important;
}

/* Texto blanco en small-box warning */
.content-wrapper .small-box.bg-warning h3,
.content-wrapper .small-box.bg-warning p {
    color: #fff !important;
}

/* ========================================
   BOTONES DE ELIMINACIÓN (TRASH) - Estilo mejorado
 ======================================== */

/* Botones de eliminación - Color rojo intenso */
.content-wrapper .btn-eliminar-ingreso,
.content-wrapper .btn-eliminar-pago,
.content-wrapper .btn-eliminar,
.content-wrapper .btn[data-action="delete"],
.content-wrapper .btn-danger.btn-sm,
.card .btn-eliminar-ingreso,
.card .btn-eliminar-pago,
.card .btn-eliminar,
.card .btn[data-action="delete"],
.card .btn-danger.btn-sm,
.dataTable .btn-eliminar-ingreso,
.dataTable .btn-eliminar-pago,
.dataTable .btn-eliminar,
.dataTable .btn[data-action="delete"],
.dataTable .btn-danger.btn-sm {
    background-color: #dc3545 !important;
    border-color: #dc3545 !important;
    color: #ffffff !important;
    transition: all 0.15s ease-in-out !important;
}

.content-wrapper .btn-eliminar-ingreso:hover,
.content-wrapper .btn-eliminar-pago:hover,
.content-wrapper .btn-eliminar:hover,
.content-wrapper .btn[data-action="delete"]:hover,
.content-wrapper .btn-danger.btn-sm:hover,
.card .btn-eliminar-ingreso:hover,
.card .btn-eliminar-pago:hover,
.card .btn-eliminar:hover,
.card .btn[data-action="delete"]:hover,
.card .btn-danger.btn-sm:hover,
.dataTable .btn-eliminar-ingreso:hover,
.dataTable .btn-eliminar-pago:hover,
.dataTable .btn-eliminar:hover,
.dataTable .btn[data-action="delete"]:hover,
.dataTable .btn-danger.btn-sm:hover {
    background-color: #c82333 !important;
    border-color: #bd2130 !important;
    color: #ffffff !important;
    transform: scale(1.05) !important;
    box-shadow: 0 4px 8px rgba(220, 53, 69, 0.3) !important;
}

/* Iconos de basura - Asegurar visibilidad */
.btn-eliminar-ingreso i.fa-trash,
.btn-eliminar-pago i.fa-trash,
.btn-eliminar i.fa-trash,
.btn[data-action="delete"] i.fa-trash,
.btn-danger i.fa-trash,
.btn[title*="Eliminar"] i.fa-trash,
.btn[title*="eliminar"] i.fa-trash {
    color: #ffffff !important;
    font-size: 0.875rem !important;
}

/* Regla general para CUALQUIER botón con icono de basura */
.content-wrapper .btn i.fa-trash,
.card .btn i.fa-trash,
.dataTable .btn i.fa-trash {
    color: #ffffff !important;
}

/* Asegurar que todos los botones con fa-trash sean rojos */
.content-wrapper .btn:has(i.fa-trash),
.card .btn:has(i.fa-trash),
.dataTable .btn:has(i.fa-trash) {
    background-color: #dc3545 !important;
    border-color: #dc3545 !important;
    color: #ffffff !important;
}

/* ========================================
   PAGINACIÓN DATATABLES - Color dorado/bronce para página activa
 ======================================== */

/* Página activa - Fondo dorado con texto blanco */
.content-wrapper .dataTables_wrapper .pagination .page-item.active .page-link,
.card .dataTables_wrapper .pagination .page-item.active .page-link {
    background-color: var(--ta-primary) !important;
    border-color: var(--ta-primary) !important;
    color: #ffffff !important;
}

/* Hover en página activa */
.content-wrapper .dataTables_wrapper .pagination .page-item.active .page-link:hover,
.card .dataTables_wrapper .pagination .page-item.active .page-link:hover {
    background-color: var(--ta-primary-hover) !important;
    border-color: var(--ta-primary-hover) !important;
    color: #ffffff !important;
}

/* Páginas no activas mantienen el estilo original de Bootstrap/AdminLTE */
.content-wrapper .dataTables_wrapper .pagination .page-item:not(.active) .page-link,
.card .dataTables_wrapper .pagination .page-item:not(.active) .page-link {
    /* Mantener estilos AdminLTE por defecto para anterior/siguiente */
}

/* ========================================
   DATATABLES - Estilo AdminLTE Unificado
 ======================================== */

/* Base DataTables - Solo texto general */
.content-wrapper .dataTable {
    font-size: 1.1rem !important;
}

.content-wrapper .dataTable td,
.content-wrapper .dataTable th {
    font-size: 1.1rem !important;
    padding: 0.5rem !important;
    vertical-align: middle !important;
}

/* Botones en DataTables - AdminLTE estándar */
.content-wrapper .dataTable .btn-sm {
    padding: 0.25rem 0.5rem !important;
    font-size: 0.875rem !important;
    line-height: 1.5 !important;
    border-radius: 0.2rem !important;
}

/* Badges en DataTables - AdminLTE estándar */
.content-wrapper .dataTable .badge {
    font-size: 0.75rem !important;
    padding: 0.25em 0.4em !important;
    line-height: 1 !important;
}

/* Input groups y controles en DataTables */
.content-wrapper .dataTable .form-control {
    font-size: 0.875rem !important;
    padding: 0.375rem 0.75rem !important;
}

/* Dropdown menus en DataTables */
.content-wrapper .dataTable .dropdown-menu {
    font-size: 0.875rem !important;
}

.content-wrapper .dataTable .dropdown-item {
    padding: 0.25rem 1rem !important;
    font-size: 0.875rem !important;
}

/* ========================================
   TIPOGRAFÍA TAILADMIN - Todo el proyecto
 ======================================== */

/* Tipografía base TailAdmin para todo el contenido */
.content-wrapper {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
    font-size: 1.1rem !important;
    line-height: 1.6 !important;
    color: #374151 !important;
}

.content-wrapper h1, .content-wrapper h2, .content-wrapper h3, 
.content-wrapper h4, .content-wrapper h5, .content-wrapper h6 {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
    font-weight: 600 !important;
    color: #111827 !important;
}

/* Excepción: Headings dentro de botones con fondo de color deben ser blancos */
.btn-primary h1, .btn-primary h2, .btn-primary h3, .btn-primary h4, .btn-primary h5, .btn-primary h6,
.btn-secondary h1, .btn-secondary h2, .btn-secondary h3, .btn-secondary h4, .btn-secondary h5, .btn-secondary h6,
.btn-success h1, .btn-success h2, .btn-success h3, .btn-success h4, .btn-success h5, .btn-success h6,
.btn-info h1, .btn-info h2, .btn-info h3, .btn-info h4, .btn-info h5, .btn-info h6,
.btn-warning h1, .btn-warning h2, .btn-warning h3, .btn-warning h4, .btn-warning h5, .btn-warning h6,
.btn-danger h1, .btn-danger h2, .btn-danger h3, .btn-danger h4, .btn-danger h5, .btn-danger h6,
.btn-dark h1, .btn-dark h2, .btn-dark h3, .btn-dark h4, .btn-dark h5, .btn-dark h6 {
    color: #ffffff !important;
}

.content-wrapper p {
    font-size: 1.1rem !important;
    line-height: 1.6 !important;
    color: #374151 !important;
}

.content-wrapper .card-title {
    font-weight: 600 !important;
    color: #111827 !important;
}

/* ========================================
   SIDEBAR - EXPLÍCITAMENTE EXCLUIDO
   Mantiene especificidad AdminLTE original
 ======================================== */

/* NO aplicar NADA al sidebar - AdminLTE mantiene control total */
.main-sidebar,
.main-sidebar *,
.sidebar,
.sidebar *,
[class*="sidebar-dark-"] .sidebar a,
[class*="sidebar-light-"] .sidebar a {
    /* Estos elementos mantienen sus estilos AdminLTE originales */
    /* Especificidad AdminLTE: (0,2,1) se respeta completamente */
}

/* ========================================
   HEADER NAVBAR - Mantener AdminLTE
 ======================================== */

.main-header.navbar,
.main-header.navbar *,
.navbar-nav,
.navbar-nav * {
    /* Header mantiene estilos AdminLTE originales */
}

/* ============================================================================
   FORMS ALIGNMENT FIX - Solución alineación vertical inputs/selects
   Fecha: 2025-10-03
   ============================================================================ */

/* Reset y normalización */
select,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
input[type="url"],
input[type="date"],
input[type="datetime-local"],
input[type="month"],
input[type="week"],
input[type="time"],
textarea,
.form-control {
    box-sizing: border-box !important;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    display: inline-block;
    vertical-align: middle;
}

/* Inputs y selects estándar - Alineación perfecta */
select,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
input[type="url"],
input[type="date"],
input[type="datetime-local"],
input[type="month"],
input[type="week"],
input[type="time"],
.form-control {
    height: 38px !important;
    min-height: 38px !important;
    line-height: 1.5 !important;
    padding: 7px 12px !important;
    font-size: 14px;
    color: #495057;
    border: 1px solid #ced4da;
    border-radius: 4px;
    background-color: #fff;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

/* SELECT específico - Ajuste para dropdown icon */
select,
select.form-control {
    padding-top: 6px !important;
    padding-bottom: 6px !important;
    padding-right: 30px !important;
    cursor: pointer;
}

select option {
    padding: 8px 12px;
    line-height: 1.5;
}

/* TEXTAREA - Altura automática */
textarea,
textarea.form-control {
    height: auto !important;
    min-height: 80px !important;
    padding: 10px 12px !important;
    line-height: 1.5 !important;
    resize: vertical;
}

/* Estados: Focus, Disabled, Readonly */
select:focus,
input:focus,
textarea:focus,
.form-control:focus {
    border-color: #80bdff !important;
    outline: 0 !important;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25) !important;
}

select:disabled,
input:disabled,
textarea:disabled,
.form-control:disabled {
    background-color: #e9ecef !important;
    opacity: 1 !important;
    cursor: not-allowed !important;
}

select[readonly],
input[readonly],
textarea[readonly],
.form-control[readonly] {
    background-color: #f8f9fa !important;
}

/* Validación: Error y Success */
.is-invalid,
input.is-invalid,
select.is-invalid,
textarea.is-invalid {
    border-color: #dc3545 !important;
}

.is-valid,
input.is-valid,
select.is-valid,
textarea.is-valid {
    border-color: #28a745 !important;
}

/* SELECT2 Plugin - Mayor especificidad para override */
.select2-container--default .select2-selection--single,
.select2-container--bootstrap4 .select2-selection--single {
    height: 38px !important;
    line-height: 36px !important;
    padding: 0 !important;
    border: 1px solid #ced4da !important;
    border-radius: 4px !important;
    background-color: #fff !important;
    overflow: hidden !important; /* Fix: contenedor padre debe ocultar desbordamiento */
}

.select2-container--default .select2-selection--single .select2-selection__rendered,
.select2-container--bootstrap4 .select2-selection--single .select2-selection__rendered {
    line-height: 36px !important;
    padding: 0 30px 0 12px !important;
    color: #495057 !important;
    font-size: 14px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    display: block !important;
    max-width: 100% !important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow,
.select2-container--bootstrap4 .select2-selection--single .select2-selection__arrow {
    height: 36px !important;
    top: 1px !important;
    right: 1px !important;
}

.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--bootstrap4.select2-container--focus .select2-selection--single {
    border-color: #80bdff !important;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25) !important;
}

/* Input Group - Bootstrap (Ver sección INPUT-GROUP completa al final del archivo) */

/* Responsive - Mobile */
@media (max-width: 767px) {
    select,
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="number"],
    input[type="tel"],
    input[type="url"],
    input[type="date"],
    input[type="datetime-local"],
    .form-control {
        height: 44px !important;
        min-height: 44px !important;
        padding: 10px 12px !important;
        font-size: 16px !important; /* Prevenir zoom en iOS */
    }

    select.form-control {
        padding-right: 35px !important;
    }

    .select2-container--default .select2-selection--single {
        height: 44px !important;
        line-height: 42px !important;
        overflow: hidden !important;
    }

    .select2-container--default .select2-selection--single .select2-selection__rendered {
        line-height: 42px !important;
        font-size: 16px !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }
}

/* AdminLTE Form Sizes */
.form-control-sm,
.input-group-sm > .form-control {
    height: 31px !important;
    padding: 5px 10px !important;
    font-size: 13px !important;
}

.form-control-lg,
.input-group-lg > .form-control {
    height: 48px !important;
    padding: 10px 16px !important;
    font-size: 16px !important;
}

/* Placeholder */
::placeholder {
    color: #6c757d !important;
    opacity: 0.6 !important;
}

/* Date/Time Inputs */
input[type="date"],
input[type="datetime-local"],
input[type="time"] {
    padding-top: 6px !important;
    padding-bottom: 6px !important;
}

/* ========================================
   RESPONSIVE GLOBAL - Headers y Layouts
   BTS-28: Mejoras UI móvil
   ======================================== */

/* --- BREADCRUMBS - MEJORAS UX --- */

/* Base: Alineación vertical correcta del separador "/" */
.breadcrumb {
    display: flex;
    align-items: center;
    margin-bottom: 0;
}

.breadcrumb-item {
    display: flex;
    align-items: center;
}

/* Separador "/" - Alineación vertical perfecta */
.breadcrumb-item + .breadcrumb-item::before {
    display: flex;
    align-items: center;
    padding: 0 0.5rem;
    line-height: 1;
}

/* Enlaces con área táctil mínima 44px (WCAG 2.1 AA) */
.breadcrumb-item a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0.5rem 0.25rem;
    text-decoration: none;
}

.breadcrumb-item.active {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0.5rem 0.25rem;
}

/* Mobile: Breadcrumbs responsivos - se apilan cuando no caben */
@media (max-width: 767.98px) {
    /* Contenedor se mueve abajo del título */
    .content-header .float-sm-right {
        float: none !important;
        width: 100%;
        margin-top: 0.5rem;
    }

    /* Breadcrumbs en wrap para apilarse */
    .breadcrumb {
        flex-wrap: wrap !important;
        justify-content: flex-start !important;
        padding: 0 !important;
        margin: 0 !important;
        background-color: transparent !important;
        font-size: 0.85rem !important;
    }

    .breadcrumb-item {
        margin-bottom: 0.25rem;
    }

    /* Enlaces más grandes para touch - mínimo 44px */
    .breadcrumb-item a {
        min-height: 44px;
        padding: 0.5rem 0.5rem;
        border-radius: 4px;
        transition: background-color 0.15s ease;
    }

    .breadcrumb-item a:hover,
    .breadcrumb-item a:focus {
        background-color: rgba(0, 123, 255, 0.15);
    }

    /* Elemento activo con estilo distintivo */
    .breadcrumb-item.active {
        min-height: 44px;
        padding: 0.5rem 0.5rem;
        font-weight: 600;
        color: #495057;
    }

    /* Separador "/" - Visible y alineado */
    .breadcrumb-item + .breadcrumb-item::before {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0 0.35rem !important;
        font-size: 0.9rem !important;
        color: #6c757d;
        line-height: 1;
    }

    /* Texto truncado si es muy largo */
    .breadcrumb-item a,
    .breadcrumb-item.active {
        max-width: 150px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}

/* Extra small: Breadcrumbs en columna vertical */
@media (max-width: 480px) {
    .breadcrumb {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .breadcrumb-item a,
    .breadcrumb-item.active {
        max-width: 120px;
        font-size: 0.8rem;
    }
}

/* --- HEADERS RESPONSIVE GLOBAL --- */
@media (max-width: 767.98px) {
    /* Headers con d-flex justify-content-between se convierten en columna */
    .content-wrapper .d-flex.justify-content-between.align-items-center.mb-3 {
        flex-direction: column !important;
        align-items: flex-start !important;
    }

    /* Título ocupa ancho completo en móvil */
    .content-wrapper .d-flex.justify-content-between h1,
    .content-wrapper .d-flex.justify-content-between h2,
    .content-wrapper .d-flex.justify-content-between h3 {
        width: 100% !important;
        font-size: 1.25rem !important;
        margin-bottom: 0.75rem !important;
    }

    /* Botones de header en fila debajo del título */
    .content-wrapper .d-flex.justify-content-between > .btn-group,
    .content-wrapper .d-flex.justify-content-between > .btn,
    .content-wrapper .d-flex.justify-content-between > div:last-child {
        width: 100% !important;
        margin-top: 0.5rem !important;
    }

    /* Botones dentro de btn-group ocupan espacio equitativo */
    .content-wrapper .d-flex.justify-content-between > .btn-group .btn {
        flex: 1 !important;
    }
}

/* --- CENTRADO DE ICONOS EN BOTONES (GLOBAL) --- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.btn i.fas,
.btn i.far,
.btn i.fa {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    line-height: 1;
}

/* Botones con solo icono (sin texto) */
.btn-group-sm .btn:not(:has(span)):not(:has(text)) {
    min-width: 32px;
    min-height: 32px;
    padding: 0.25rem !important;
}

/* --- TEXT TRUNCATE GLOBAL --- */
.text-truncate-responsive {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}

@media (max-width: 767.98px) {
    .text-truncate-responsive {
        max-width: 200px;
    }
}

/* --- CARD HEADERS RESPONSIVE --- */
@media (max-width: 575.98px) {
    .card-header .d-flex.justify-content-between {
        flex-direction: column !important;
        gap: 0.5rem;
    }

    .card-header .d-flex.justify-content-between .card-tools {
        width: 100%;
        text-align: right;
    }
}

/* ========================================
   CARD-TOOLS - Botones Múltiples Responsive
   BTS-28: Alineación de botones en móvil
   ======================================== */

/* Mobile: Card-tools con múltiples botones */
@media (max-width: 767.98px) {
    /* Card header en columna */
    .card-header {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
    }

    .card-header .card-title {
        margin-bottom: 0.75rem !important;
        width: 100%;
    }

    /* Card tools ocupa ancho completo */
    .card-header .card-tools {
        width: 100% !important;
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 0.5rem !important;
        justify-content: flex-start !important;
        margin-left: 0 !important;
    }

    /* Botones en card-tools */
    .card-header .card-tools .btn {
        margin: 0 !important;
        padding: 0.5rem 0.75rem !important;
        font-size: 0.8rem !important;
        flex: 0 0 auto;
    }

    /* Btn-group también con wrap */
    .card-header .card-tools .btn-group {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 0.25rem;
        margin: 0 !important;
    }

    .card-header .card-tools .btn-group .btn {
        border-radius: 4px !important;
    }

    /* mr-2 en móvil se elimina (usa gap) */
    .card-header .card-tools .mr-2,
    .card-header .card-tools .ml-2 {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}

/* Mobile: Botones en grilla uniforme 2 columnas */
@media (max-width: 767.98px) {
    .card-header .card-tools .btn:not(.btn-tool):not(.dropdown-toggle) {
        flex: 1 1 calc(50% - 0.25rem) !important;
        min-width: 120px;
        max-width: calc(50% - 0.25rem);
        text-align: center;
        justify-content: center;
    }

    /* Btn-group de exportar ocupa fila completa */
    .card-header .card-tools .btn-group:not(.dropdown) {
        flex: 1 1 100% !important;
        display: flex !important;
    }

    .card-header .card-tools .btn-group:not(.dropdown) .btn {
        flex: 1 !important;
        border-radius: 0 !important;
    }

    .card-header .card-tools .btn-group:not(.dropdown) .btn:first-child {
        border-radius: 4px 0 0 4px !important;
    }

    .card-header .card-tools .btn-group:not(.dropdown) .btn:last-child {
        border-radius: 0 4px 4px 0 !important;
    }
}

/* Extra small: Botones full width (1 por fila) */
@media (max-width: 400px) {
    .card-header .card-tools .btn:not(.btn-tool):not(.dropdown-toggle) {
        flex: 1 1 100% !important;
        max-width: 100%;
    }
}

/* ========================================
   DATATABLES CONTROLS - Responsive
   BTS-28: Controles Mostrar/Buscar en móvil
   ======================================== */

/* Mobile: DataTables wrapper */
@media (max-width: 767.98px) {
    /* Row de controles DataTables */
    .dataTables_wrapper .row:first-child {
        flex-direction: column !important;
    }

    .dataTables_wrapper .row:first-child > div {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
        margin-bottom: 0.5rem;
    }

    /* Mostrar X entradas - centrado */
    .dataTables_length {
        text-align: center !important;
    }

    .dataTables_length label {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 0.5rem;
        flex-wrap: wrap;
    }

    .dataTables_length select {
        width: auto !important;
        min-width: 70px;
    }

    /* Buscar - ancho completo */
    .dataTables_filter {
        text-align: center !important;
    }

    .dataTables_filter label {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 0.5rem;
        width: 100%;
    }

    .dataTables_filter input {
        flex: 1 !important;
        max-width: 200px;
    }
}

/* ========================================
   NAV-TABS - Distribución Uniforme Responsive
   BTS-28: Tabs en grilla para móvil
   ======================================== */

/* Mobile: Tabs en grilla uniforme */
@media (max-width: 767.98px) {
    /* Contenedor de tabs - flexbox con wrap */
    .nav-tabs {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 0.5rem !important;
        border-bottom: none !important;
        padding: 0.5rem;
        background-color: #f8f9fa;
        border-radius: 8px;
    }

    /* Cada tab ocupa espacio uniforme */
    .nav-tabs .nav-item {
        flex: 1 1 calc(50% - 0.25rem) !important;
        min-width: 0;
    }

    /* Link del tab - estilo botón */
    .nav-tabs .nav-link {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        padding: 0.75rem 0.5rem !important;
        border: 1px solid #dee2e6 !important;
        border-radius: 6px !important;
        background-color: #fff;
        font-size: 0.8rem !important;
        line-height: 1.3;
        min-height: 70px;
        transition: all 0.15s ease;
    }

    /* Icono arriba del texto */
    .nav-tabs .nav-link i {
        font-size: 1.2rem !important;
        margin-right: 0 !important;
        margin-bottom: 0.35rem !important;
        display: block;
    }

    /* Badge debajo o al lado */
    .nav-tabs .nav-link .badge {
        margin-left: 0 !important;
        margin-top: 0.25rem !important;
        font-size: 0.7rem !important;
    }

    /* Tab activo */
    .nav-tabs .nav-link.active {
        background-color: #007bff !important;
        border-color: #007bff !important;
        color: #fff !important;
    }

    .nav-tabs .nav-link.active i,
    .nav-tabs .nav-link.active .badge {
        color: #fff !important;
    }

    .nav-tabs .nav-link.active .badge {
        background-color: rgba(255, 255, 255, 0.3) !important;
    }

    /* Hover en tabs no activos */
    .nav-tabs .nav-link:not(.active):hover {
        background-color: #e9ecef;
        border-color: #adb5bd;
    }
}

/* Extra small: 1 columna o texto más compacto */
@media (max-width: 480px) {
    .nav-tabs .nav-item {
        flex: 1 1 100% !important;
    }

    .nav-tabs .nav-link {
        flex-direction: row !important;
        min-height: 50px;
        padding: 0.5rem 0.75rem !important;
    }

    .nav-tabs .nav-link i {
        margin-bottom: 0 !important;
        margin-right: 0.5rem !important;
        font-size: 1rem !important;
    }

    .nav-tabs .nav-link .badge {
        margin-top: 0 !important;
        margin-left: 0.5rem !important;
    }
}

/* ========================================
   INPUT-GROUP - Altura Consistente Global
   BTS-28: Fix altura prepend/append/input
   ======================================== */

/* Input Group - Contenedor principal */
.input-group {
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
}

/* Prepend y Append - Altura y alineación consistente */
.input-group-prepend,
.input-group-append {
    display: flex;
    align-items: stretch;
}

/* Input Group Text - Elemento visual ($, %, etc) */
.input-group-text {
    height: 38px !important;
    min-height: 38px !important;
    max-height: 38px !important;
    line-height: 1 !important;
    padding: 0 12px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 14px !important;
    font-weight: 400;
    color: #495057;
    text-align: center;
    white-space: nowrap;
    background-color: #e9ecef;
    border: 1px solid #ced4da;
    border-radius: 0;
    box-sizing: border-box !important;
}

/* Input dentro de input-group - Altura consistente */
.input-group > .form-control,
.input-group > .custom-select,
.input-group > .custom-file {
    height: 38px !important;
    min-height: 38px !important;
    max-height: 38px !important;
    padding: 6px 12px !important;
    line-height: 1.5 !important;
    box-sizing: border-box !important;
}

/* Border radius para prepend (izquierda) */
.input-group > .input-group-prepend > .input-group-text,
.input-group > .input-group-prepend > .btn {
    border-top-left-radius: 4px !important;
    border-bottom-left-radius: 4px !important;
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

/* Border radius para append (derecha) */
.input-group > .input-group-append > .input-group-text,
.input-group > .input-group-append > .btn {
    border-top-right-radius: 4px !important;
    border-bottom-right-radius: 4px !important;
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
}

/* Input con prepend - Sin border-radius izquierdo */
.input-group > .input-group-prepend + .form-control,
.input-group > .input-group-prepend + .custom-select {
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
}

/* Input con append - Sin border-radius derecho */
.input-group:not(.has-validation) > .form-control:not(:last-child),
.input-group:not(.has-validation) > .custom-select:not(:last-child) {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

/* Input-group con prepend - Evitar doble border */
.input-group-prepend + .form-control,
.input-group-prepend + .custom-select {
    border-left: 0 !important;
}

/* Focus state dentro de input-group */
.input-group .form-control:focus {
    z-index: 3;
    border-color: var(--ta-primary) !important;
    box-shadow: 0 0 0 0.2rem rgba(199, 141, 47, 0.25) !important;
}

/* Mobile - Input-group altura aumentada para touch */
@media (max-width: 767.98px) {
    .input-group-text {
        height: 44px !important;
        min-height: 44px !important;
        max-height: 44px !important;
        padding: 0 12px !important;
        font-size: 16px !important;
    }

    .input-group > .form-control,
    .input-group > .custom-select {
        height: 44px !important;
        min-height: 44px !important;
        max-height: 44px !important;
        font-size: 16px !important;
    }
}

/* ========================================
   OVERFLOW FIX - Prevenir desbordamiento
   BTS-28: Fix overflow en forms/cards
   ======================================== */

/* Contenedor principal - prevenir overflow horizontal */
.content-wrapper {
    overflow-x: hidden;
}

/* Cards - prevenir overflow */
.card {
    overflow: hidden;
}

.card-body {
    overflow-x: auto;
    overflow-y: visible;
}

/* Forms - permitir que el contenido fluya naturalmente */
.form-group {
    overflow: visible;
    width: 100%;
}

/* Labels - permitir wrap para labels largos, no truncar */
.form-group > label {
    display: block;
    word-wrap: break-word;
    overflow-wrap: break-word;
    max-width: 100%;
    /* NOTA: Se eliminó white-space: nowrap que truncaba labels largos */
}

/* Inputs readonly con texto largo */
.form-control[readonly],
.form-control:disabled {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Select2 - prevenir overflow */
.select2-container {
    max-width: 100% !important;
}

.select2-selection__rendered {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

/* Tables - responsive por defecto */
.table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* NOTA: Se eliminó regla global de .row margins que rompía compensación Bootstrap.
   Bootstrap usa margin: -15px con padding: 15px en columnas para alineación correcta.
   Modificar estos valores globalmente causa desalineación en formularios. */

/* Mobile - Ajustes adicionales */
@media (max-width: 767.98px) {
    /* Form groups más compactos */
    .form-group {
        margin-bottom: 0.75rem;
    }

    /* Labels más pequeños en móvil */
    .form-group > label {
        font-size: 0.875rem;
        margin-bottom: 0.25rem;
    }

    /* Cards sin margin negativo en móvil */
    .card-body {
        padding: 1rem;
    }

    /* Botones de acción - full width en móvil cuando están solos */
    .card-footer .btn:only-child {
        width: 100%;
    }

    /* Content wrapper - ancho completo en móvil */
    .content-wrapper {
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
    }

    .content-wrapper .container-fluid {
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
    }

    /* Cards - ancho completo en móvil */
    .card {
        margin-bottom: 1rem;
        border-radius: 0.5rem;
    }

    /* Rows sin margin negativo excesivo */
    .content-wrapper .row {
        margin-left: -0.5rem !important;
        margin-right: -0.5rem !important;
    }

    .content-wrapper .row > [class*="col-"] {
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
    }

    /* Content header más compacto */
    .content-header {
        padding: 0.75rem 0.5rem !important;
    }

    .content-header h1 {
        font-size: 1.25rem !important;
        margin-bottom: 0.25rem !important;
    }

    .content-header .text-muted {
        font-size: 0.75rem !important;
    }

    /* Section content más compacto */
    .content {
        padding: 0.5rem !important;
    }
}

/* ========================================
   DOCUMENTO-ITEM - Responsive Cards
   BTS-28: Fix botones de acciones documento
   ======================================== */

/* Desktop: Layout horizontal normal */
.documento-item {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.documento-item .btn-group {
    flex-shrink: 0;
}

/* Mobile: Stack vertical */
@media (max-width: 767.98px) {
    .documento-item {
        flex-direction: column !important;
        align-items: stretch !important;
    }

    .documento-item > .d-flex.align-items-center {
        width: 100%;
        margin-bottom: 0.75rem;
    }

    /* Nombre del archivo truncado */
    .documento-item strong {
        display: block;
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* Btn-group en columna con botones full width */
    .documento-item .btn-group {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        width: 100% !important;
        gap: 0.5rem;
    }

    .documento-item .btn-group .btn {
        flex: 1 1 auto !important;
        min-width: 70px !important;
        padding: 0.375rem 0.5rem !important;
        font-size: 0.8rem !important;
        white-space: nowrap;
        border-radius: 0.25rem !important;
    }

    /* AdminLTE btn-group en móvil - sin border-radius anidados */
    .documento-item .btn-group .btn:first-child {
        border-top-left-radius: 0.25rem !important;
        border-bottom-left-radius: 0.25rem !important;
    }

    .documento-item .btn-group .btn:last-child {
        border-top-right-radius: 0.25rem !important;
        border-bottom-right-radius: 0.25rem !important;
    }
}

/* ========================================
   CARD-FOOTER - Responsive Buttons
   BTS-28: Fix alineación botones footer
   ======================================== */

/* Desktop: Layout inline normal */
.card-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

/* Texto informativo inline */
.card-footer .text-muted:not(.d-block) {
    display: inline-flex;
    align-items: center;
}

/* Mobile: Stack vertical */
@media (max-width: 767.98px) {
    .card-footer {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 0.75rem !important;
    }

    /* Todos los botones full width */
    .card-footer .btn {
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding: 0.75rem 1rem !important;
        font-size: 1rem !important;
    }

    /* Texto "No disponible" centrado y debajo */
    .card-footer .text-muted {
        width: 100%;
        text-align: center;
        margin-left: 0 !important;
        padding: 0.5rem;
        background: #f8f9fa;
        border-radius: 4px;
        font-size: 0.875rem;
    }

    /* Small info block también centrado */
    .card-footer small.d-block {
        text-align: center;
        width: 100%;
    }
}

/* Extra small - Botones más compactos */
@media (max-width: 400px) {
    .card-footer .btn {
        padding: 0.6rem 0.75rem !important;
        font-size: 0.875rem !important;
    }

    .card-footer .btn i {
        margin-right: 0.25rem !important;
    }
}

/* ========================================
   CUSTOM-FILE - Responsive Upload Input
   BTS-28: Fix file input en móvil
   ======================================== */

@media (max-width: 767.98px) {
    .custom-file {
        width: 100%;
    }

    .custom-file-label {
        font-size: 0.875rem;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        padding-right: 90px;
    }

    .custom-file-label::after {
        padding: 0.375rem 0.5rem;
        font-size: 0.875rem;
    }
}

/* ========================================
   BTN-ACTION - Botones de Acción Responsive
   BTS-28: Fix alineación botones en cards
   ======================================== */

/* Desktop: Botones en línea con gap */
.card-body .btn-action {
    margin-right: 0.5rem;
    margin-bottom: 0.5rem;
}

/* Contenedor de botones - Flexbox para mejor alineación */
.card-body > .btn-action:first-child {
    margin-left: 0;
}

/* Mobile: Botones de acción - SIN afectar formularios */
@media (max-width: 767.98px) {
    /* SOLO contenedores de botones de acción (NO formularios) */
    .card-body > .btn-action {
        display: inline-block;
        width: calc(50% - 0.25rem);
        margin-bottom: 0.5rem;
        padding: 0.625rem 0.75rem;
        font-size: 0.875rem;
        text-align: center;
        white-space: nowrap;
        box-sizing: border-box;
    }

    /* Iconos dentro de botones */
    .card-body > .btn-action i {
        margin-right: 0.35rem;
    }
}

/* Extra small: Botones full width */
@media (max-width: 480px) {
    .card-body > .btn-action {
        width: 100%;
        display: block;
    }
}

/* ========================================
   DATATABLES - Responsive Improvements
   BTS-28: Fix tablas DataTables en móvil
   ======================================== */

/* Table responsive - Asegurar scroll horizontal */
.table-responsive {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    margin: 0;
}

/* Card body con tabla - Sin padding para bordes pegados */
.card-body.p-0 .table-responsive {
    border-radius: 0;
}

/* Tabla dentro de responsive - ancho mínimo para evitar compresión */
.table-responsive > .table {
    min-width: 600px;
}

/* ========================================
   DATATABLES - UX MEJORAS: Checkbox + dtr-control
   Separar visualmente para evitar clics accidentales
   ======================================== */

/* Celda con dtr-control - Layout para separar elementos */
.dataTable td.dtr-control {
    position: relative;
    padding-left: 35px !important; /* Espacio para el icono +/- */
    min-width: 70px !important;
}

/* Icono de expansión (+/-) - Posición absoluta a la izquierda */
.dataTable td.dtr-control::before {
    position: absolute !important;
    left: 8px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 20px !important;
    height: 20px !important;
    line-height: 20px !important;
    text-align: center !important;
    font-size: 14px !important;
    background-color: #007bff !important;
    color: #fff !important;
    border-radius: 4px !important;
    cursor: pointer !important;
}

/* Checkbox dentro de dtr-control - Área táctil grande */
.dataTable td.dtr-control input[type="checkbox"] {
    width: 22px !important;
    height: 22px !important;
    cursor: pointer !important;
    margin: 0 !important;
    vertical-align: middle !important;
    accent-color: #28a745;
}

/* Wrapper para checkbox - Área táctil mínima 44px */
.dataTable td.dtr-control {
    vertical-align: middle !important;
}

/* Hover en la celda - Feedback visual */
.dataTable td.dtr-control:hover::before {
    background-color: #0056b3 !important;
    transform: translateY(-50%) scale(1.1) !important;
}

/* Mobile: Mejoras adicionales para touch */
@media (max-width: 767.98px) {
    /* Celda más grande para área táctil */
    .dataTable td.dtr-control {
        padding: 12px 8px 12px 40px !important;
        min-width: 80px !important;
    }

    /* Icono de expansión más grande en móvil */
    .dataTable td.dtr-control::before {
        width: 26px !important;
        height: 26px !important;
        line-height: 26px !important;
        font-size: 16px !important;
        left: 6px !important;
    }

    /* Checkbox más grande en móvil */
    .dataTable td.dtr-control input[type="checkbox"] {
        width: 26px !important;
        height: 26px !important;
        min-width: 44px; /* Área táctil */
        min-height: 44px;
        padding: 9px; /* Expandir área clickeable */
    }

    /* Separación visual clara entre icono y checkbox */
    .dataTable td.dtr-control::after {
        content: '';
        position: absolute;
        left: 32px;
        top: 25%;
        height: 50%;
        width: 1px;
        background-color: #dee2e6;
    }
}

/* Mobile: Ocultar columnas menos importantes */
@media (max-width: 767.98px) {
    /* DataTables - Reducir tamaño de fuente */
    .dataTable td,
    .dataTable th {
        font-size: 0.8rem !important;
        padding: 0.5rem 0.4rem !important;
    }

    /* Badges más pequeños */
    .dataTable .badge {
        font-size: 0.7rem !important;
        padding: 0.2em 0.4em !important;
    }

    /* Ocultar texto en botones de acción, solo iconos */
    .dataTable .btn-group-sm .btn {
        padding: 0.25rem 0.35rem !important;
    }

    /* Reducir ancho mínimo de columna acciones */
    .dataTable th:last-child,
    .dataTable td:last-child {
        min-width: 90px !important;
    }

    /* Info y paginación de DataTables */
    .dataTables_info {
        font-size: 0.75rem !important;
        text-align: center !important;
        padding: 0.5rem !important;
    }

    .dataTables_paginate {
        text-align: center !important;
        padding: 0.5rem !important;
    }

    .dataTables_paginate .pagination {
        justify-content: center !important;
        flex-wrap: wrap !important;
    }

    .dataTables_paginate .page-item .page-link {
        padding: 0.35rem 0.6rem !important;
        font-size: 0.8rem !important;
    }

    /* Length selector más compacto */
    .dataTables_length {
        font-size: 0.8rem !important;
    }

    .dataTables_length select {
        padding: 0.25rem 0.5rem !important;
        font-size: 0.8rem !important;
    }

    /* Search input */
    .dataTables_filter {
        text-align: center !important;
        margin-bottom: 0.5rem !important;
    }

    .dataTables_filter input {
        width: 150px !important;
        font-size: 0.875rem !important;
    }

    /* Wrapper layout en móvil */
    .dataTables_wrapper .row:first-child,
    .dataTables_wrapper .row:last-child {
        flex-direction: column !important;
    }

    .dataTables_wrapper .row:first-child > div,
    .dataTables_wrapper .row:last-child > div {
        width: 100% !important;
        text-align: center !important;
        margin-bottom: 0.5rem !important;
    }
}

/* Extra small: Tabla más compacta */
@media (max-width: 480px) {
    .table-responsive > .table {
        min-width: 500px;
    }

    .dataTable td,
    .dataTable th {
        font-size: 0.75rem !important;
        padding: 0.4rem 0.3rem !important;
    }
}

/* ========================================
   FORMS FINANCIERO - Mobile Optimization
   BTS-28: Fix formularios pagos/ingresos
   ======================================== */

/* Card header - Asegurar visibilidad del texto */
.card-danger > .card-header,
.card-primary > .card-header,
.card-success > .card-header,
.card-warning > .card-header,
.card-info > .card-header {
    color: #fff !important;
}

.card-danger > .card-header .card-title,
.card-primary > .card-header .card-title,
.card-success > .card-header .card-title,
.card-warning > .card-header .card-title,
.card-info > .card-header .card-title {
    color: #fff !important;
}

/* Card tools - Botón Volver visible */
.card-header .card-tools .btn-tool {
    color: rgba(255, 255, 255, 0.9) !important;
}

.card-header .card-tools .btn-tool:hover {
    color: #fff !important;
    background-color: rgba(255, 255, 255, 0.1) !important;
}

/* Mobile: Forms sin overflow horizontal */
@media (max-width: 767.98px) {
    /* Contenedor principal sin overflow */
    .content-wrapper,
    .content,
    .container-fluid {
        overflow-x: hidden !important;
    }

    /* FIX CRÍTICO: Eliminar márgenes negativos de Bootstrap .row en móvil */
    .card-body > .row {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* FIX CRÍTICO: Padding consistente en columnas */
    .card-body > .row > [class*="col-"] {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* Columnas a full width en móvil */
    .card-body .col-md-4,
    .card-body .col-md-6,
    .card-body .col-md-12 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        margin-bottom: 0.75rem;
    }

    /* Form groups - Full width sin overflow */
    .form-group {
        width: 100% !important;
        max-width: 100% !important;
        margin-bottom: 0.75rem !important;
    }

    /* Labels - Visibles al 100% */
    .card-body .form-group > label {
        font-size: 0.875rem;
        margin-bottom: 0.25rem;
        display: block;
        width: 100%;
    }

    /* Form controls - Full width */
    .form-control,
    .form-control-plaintext,
    textarea.form-control {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Select2 - Ancho máximo */
    .select2-container {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Input groups - Full width sin overflow */
    .input-group {
        flex-wrap: nowrap !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Custom file input - Full width */
    .custom-file {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Small text más compacto */
    .card-body .form-text {
        font-size: 0.75rem;
        margin-top: 0.15rem;
    }

    /* Card header responsive */
    .card-header {
        padding: 0.5rem 0.75rem !important;
    }

    .card-header .card-title {
        font-size: 1rem !important;
        display: flex;
        align-items: center;
    }

    .card-header .card-title i {
        font-size: 0.875rem;
        margin-right: 0.5rem !important;
    }

    /* Card tools - Botón Volver compacto */
    .card-header .card-tools .btn-tool {
        padding: 0.25rem 0.5rem !important;
        font-size: 0.8rem !important;
    }

    /* Card body padding - Suficiente para evitar cortes */
    .card-body {
        padding: 1rem !important;
    }

    /* Textarea height reducido */
    textarea.form-control {
        min-height: 60px !important;
    }
}

/* Extra small: Más compacto pero sin cortar contenido */
@media (max-width: 480px) {
    .card-header .card-title {
        font-size: 0.9rem !important;
    }

    .card-header .card-tools .btn-tool {
        padding: 0.2rem 0.4rem !important;
        font-size: 0.75rem !important;
        white-space: nowrap;
    }

    /* Card body - Padding mínimo pero suficiente */
    .card-body {
        padding: 0.75rem !important;
    }

    /* Form groups - Mantener full width */
    .form-group {
        margin-bottom: 0.5rem !important;
        width: 100% !important;
    }

    /* Labels - Legibles y sin cortes */
    label {
        font-size: 0.8rem !important;
        display: block;
        width: 100%;
    }

    /* Form controls - Full width */
    .form-control {
        font-size: 0.875rem !important;
        width: 100% !important;
    }
    /* NOTA: Reglas de .card-body > .row ya definidas en @media 767.98px, no duplicar */
}