/*=============================================

MEJORAS UX/UI - SISTEMA POS FACTURADOR

Estilos modernos y limpios

=============================================*/



/* =============================================

   VARIABLES CSS - TEMA PRINCIPAL

============================================= */

:root {

    --primary-color: #34495e;

    --primary-dark: #17202a;

    --primary-light: #5d6d7e;

    --success-color: #27ae60;

    --success-dark: #1e8449;

    --danger-color: #e74c3c;

    --danger-dark: #c0392b;

    --warning-color: #f39c12;

    --warning-dark: #d68910;

    --info-color: #3498db;

    --info-dark: #2980b9;

    --text-dark: #2c3e50;

    --text-muted: #7f8c8d;

    --bg-light: #f8f9fa;

    --bg-card: #ffffff;

    --border-color: #dee2e6;

    --shadow-sm: 0 2px 4px rgba(0,0,0,0.08);

    --shadow-md: 0 4px 12px rgba(0,0,0,0.1);

    --shadow-lg: 0 8px 24px rgba(0,0,0,0.12);

    --radius-sm: 8px;

    --radius-md: 12px;

    --radius-lg: 20px;

    --transition-fast: 0.15s ease;

    --transition-normal: 0.25s ease;

}



/* =============================================

   MEJORAS GENERALES

============================================= */

body {

    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;

    -webkit-font-smoothing: antialiased;

}



/* Scrollbar personalizado */

::-webkit-scrollbar {

    width: 8px;

    height: 8px;

}



::-webkit-scrollbar-track {

    background: var(--bg-light);

    border-radius: 4px;

}



::-webkit-scrollbar-thumb {

    background: var(--primary-light);

    border-radius: 4px;

}



::-webkit-scrollbar-thumb:hover {

    background: var(--primary-color);

}



/* =============================================

   CARDS MODERNOS

============================================= */

.card {

    border: none;

    border-radius: var(--radius-md);

    box-shadow: var(--shadow-sm);

    transition: box-shadow var(--transition-normal);

}



.card:hover {

    box-shadow: var(--shadow-md);

}



.card-header {

    background: linear-gradient(135deg, #2980b9 0%, #1a5276 100%) !important;

    border-radius: var(--radius-md) var(--radius-md) 0 0 !important;

    border-bottom: none;

    padding: 0.85rem 1.25rem !important;

    color: #ffffff !important;

}



.card-header .card-title {

    font-weight: 700 !important;

    font-size: 1rem;

    letter-spacing: 0.5px;

    color: #ffffff !important;

    text-shadow: 1px 1px 2px rgba(0,0,0,0.2);

}



.card-header .card-title i {

    color: #ffffff !important;

}



.card-header.bg-primary,

.card-primary > .card-header {

    background: linear-gradient(135deg, #2980b9 0%, #1a5276 100%) !important;

}



.card-header.bg-success,

.card-success > .card-header {

    background: linear-gradient(135deg, #27ae60 0%, #1e8449 100%) !important;

}



.card-header.bg-info,

.card-info > .card-header {

    background: linear-gradient(135deg, #3498db 0%, #2471a3 100%) !important;

}



.card-header.bg-warning,

.card-warning > .card-header {

    background: linear-gradient(135deg, #f39c12 0%, #d68910 100%) !important;

    color: #2c3e50 !important;

}



.card-header.bg-warning .card-title {

    color: #2c3e50 !important;

    text-shadow: none;

}



.card-body {

    padding: 1rem 1.25rem;

}



/* Cards de estadísticas del dashboard */

.small-box {

    border-radius: var(--radius-md) !important;

    border: none !important;

    overflow: hidden;

    transition: transform var(--transition-normal), box-shadow var(--transition-normal);

}



.small-box:hover {

    transform: translateY(-3px);

    box-shadow: var(--shadow-lg);

}



.small-box .icon {

    opacity: 0.2;

    transition: opacity var(--transition-normal);

}



.small-box:hover .icon {

    opacity: 0.3;

}



.small-box .inner h6 {

    font-size: 1.1rem;

    font-weight: 700;

}



.small-box .inner p {

    font-size: 0.85rem;

    font-weight: 500;

    opacity: 0.9;

}



/* Gradientes para cards de estadísticas */

.small-box.bg-info {

    background: linear-gradient(135deg, #3498db 0%, #2980b9 100%) !important;

}



.small-box.bg-success {

    background: linear-gradient(135deg, #27ae60 0%, #1e8449 100%) !important;

}



.small-box.bg-warning {

    background: linear-gradient(135deg, #f39c12 0%, #d68910 100%) !important;

}



.small-box.bg-danger {

    background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%) !important;

}



/* =============================================

   BOTONES MEJORADOS

============================================= */

.btn {

    font-weight: 500;

    letter-spacing: 0.3px;

    transition: all var(--transition-fast);

    border-radius: var(--radius-lg) !important;

    padding: 0.4rem 1rem;

}



.btn:active {

    transform: scale(0.97);

}



.btn-primary {

    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);

    border: none;

}



.btn-primary:hover {

    background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary-color) 100%);

    box-shadow: 0 4px 12px rgba(52, 73, 94, 0.3);

}



.btn-success {

    background: linear-gradient(135deg, var(--success-color) 0%, var(--success-dark) 100%);

    border: none;

}



.btn-success:hover {

    background: linear-gradient(135deg, var(--success-dark) 0%, var(--success-color) 100%);

    box-shadow: 0 4px 12px rgba(39, 174, 96, 0.3);

}



.btn-danger {

    background: linear-gradient(135deg, var(--danger-color) 0%, var(--danger-dark) 100%);

    border: none;

}



.btn-danger:hover {

    background: linear-gradient(135deg, var(--danger-dark) 0%, var(--danger-color) 100%);

    box-shadow: 0 4px 12px rgba(231, 76, 60, 0.3);

}



.btn-info {

    background: linear-gradient(135deg, var(--info-color) 0%, var(--info-dark) 100%) !important;

    border: none !important;

}



.btn-info:hover {

    background: linear-gradient(135deg, var(--info-dark) 0%, var(--info-color) 100%) !important;

    box-shadow: 0 4px 12px rgba(52, 152, 219, 0.3);

}



/* Botones pequeños en tablas */

.btn-sm {

    padding: 0.25rem 0.6rem;

    font-size: 0.8rem;

}



/* =============================================

   FORMULARIOS MEJORADOS

============================================= */

.form-control, .form-select {

    border: 1.5px solid var(--border-color) !important;

    border-radius: var(--radius-lg) !important;

    padding: 0.5rem 1rem !important;

    font-size: 0.9rem !important;

    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);

}



.form-control:focus, .form-select:focus {

    border-color: var(--primary-color) !important;

    box-shadow: 0 0 0 3px rgba(52, 73, 94, 0.15) !important;

    outline: none;

}



.form-control::placeholder {

    color: var(--text-muted);

    font-size: 0.85rem;

}



/* Labels */

label {

    font-weight: 500;

    color: var(--text-dark);

    font-size: 0.85rem;

    margin-bottom: 0.3rem !important;

}



/* Input groups */

.input-group-text {

    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%) !important;

    border: none !important;

    color: white !important;

}



/* Select2 mejoras */

.select2-container--default .select2-selection--single {

    border: 1.5px solid var(--border-color) !important;

    border-radius: var(--radius-lg) !important;

    height: 38px !important;

    transition: border-color var(--transition-fast);

}



.select2-container--default .select2-selection--single:hover {

    border-color: var(--primary-light) !important;

}



.select2-container--default.select2-container--focus .select2-selection--single {

    border-color: var(--primary-color) !important;

    box-shadow: 0 0 0 3px rgba(52, 73, 94, 0.15);

}



/* =============================================

   TABLAS DATATABLES

============================================= */

.table {

    border-collapse: separate;

    border-spacing: 0;

}



/* Cabecera de tabla - FONDO UNIFICADO */

.table thead {

    background: linear-gradient(135deg, #1a5276 0%, #0e3d5a 100%) !important;

}



.table thead tr {

    background: transparent !important;

}



.table thead th {

    background: transparent !important;

    color: #ffffff !important;

    font-weight: 700 !important;

    font-size: 0.85rem !important;

    text-transform: uppercase;

    letter-spacing: 0.8px;

    padding: 1rem 0.75rem !important;

    border: none !important;

    white-space: nowrap;

    text-shadow: 1px 1px 2px rgba(0,0,0,0.3);

}



/* Cabecera primaria/info - FONDO UNIFICADO EN THEAD */

.table thead.bg-primary,

.table thead.thead-dark,

.card-primary .table thead {

    background: linear-gradient(135deg, #2980b9 0%, #1a5276 100%) !important;

}



.table thead.bg-primary th,

.table thead.thead-dark th,

.card-primary .table thead th,

.table thead.bg-primary tr,

.table thead.thead-dark tr {

    background: transparent !important;

    color: #ffffff !important;

    font-weight: 700 !important;

    text-shadow: 1px 1px 2px rgba(0,0,0,0.4);

}



/* Variante azul claro - FONDO EN THEAD */

.table thead.bg-info {

    background: linear-gradient(135deg, #3498db 0%, #2471a3 100%) !important;

}



.table thead.bg-info th,

.table thead.bg-info tr {

    background: transparent !important;

    color: #ffffff !important;

}



/* Variante éxito */

.table thead.bg-success {

    background: linear-gradient(135deg, #27ae60 0%, #1e8449 100%) !important;

}



.table thead.bg-success th,

.table thead.bg-success tr {

    background: transparent !important;

    color: #ffffff !important;

}



/* Variante peligro */  

.table thead.bg-danger {

    background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%) !important;

}



.table thead.bg-danger th,

.table thead.bg-danger tr {

    background: transparent !important;

    color: #ffffff !important;

}



/* Variante secundaria */

.table thead.bg-secondary {

    background: linear-gradient(135deg, #5d6d7e 0%, #34495e 100%) !important;

}



.table thead.bg-secondary th,

.table thead.bg-secondary tr {

    background: transparent !important;

    color: #ffffff !important;

}



/* Remover bordes redondeados individuales - usar en thead */

.table thead th:first-child {

    border-radius: 0 !important;

}



.table thead th:last-child {

    border-radius: 0 !important;

}



/* Bordes redondeados en el thead completo */

.table thead {

    border-radius: var(--radius-sm) var(--radius-sm) 0 0;

    overflow: hidden;

}



.table tbody tr {

    transition: background-color var(--transition-fast);

}



.table tbody tr:hover {

    background-color: rgba(52, 152, 219, 0.08) !important;

}



.table tbody td {

    padding: 0.65rem 0.6rem !important;

    vertical-align: middle;

    font-size: 0.88rem;

    border-bottom: 1px solid var(--border-color);

    color: #2c3e50;

}



/* Paginación DataTables */

.dataTables_wrapper .dataTables_paginate .paginate_button {

    border-radius: var(--radius-lg) !important;

    margin: 0 2px;

    padding: 0.3em 0.8em !important;

    transition: all var(--transition-fast);

}



.dataTables_wrapper .dataTables_paginate .paginate_button.current {

    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%) !important;

    border: none !important;

    color: white !important;

}



.dataTables_wrapper .dataTables_paginate .paginate_button:hover {

    background: var(--primary-light) !important;

    border: none !important;

    color: white !important;

}



/* Búsqueda DataTables */

.dataTables_filter input {

    border-radius: var(--radius-lg) !important;

    border: 1.5px solid var(--border-color) !important;

    padding: 0.4rem 1rem !important;

    margin-left: 0.5rem;

}



.dataTables_filter input:focus {

    border-color: var(--primary-color) !important;

    box-shadow: 0 0 0 3px rgba(52, 73, 94, 0.15);

    outline: none;

}



/* Botones export DataTables */

.dt-buttons .btn {

    margin-right: 5px !important;

    font-size: 0.8rem !important;

}



.buttons-excel {

    background: linear-gradient(135deg, #27ae60 0%, #1e8449 100%) !important;

    border: none !important;

}



.buttons-print {

    background: linear-gradient(135deg, #f39c12 0%, #d68910 100%) !important;

    border: none !important;

    color: white !important;

}



/* =============================================

   SIDEBAR MEJORADO - Menú Lateral Profesional

============================================= */

.main-sidebar {

    box-shadow: 2px 0 10px rgba(0,0,0,0.1);

}



/* Resetear estilos que puedan afectar el sidebar */

.main-sidebar .nav-link,

.nav-sidebar .nav-link {

    border-radius: 0 !important;

    background: transparent !important;

    border: none !important;

    padding: 0.6rem 1rem !important;

    margin: 0 !important;

}



.nav-sidebar .nav-item > .nav-link {

    border-radius: 8px !important;

    margin: 3px 10px !important;

    transition: all 0.2s ease !important;

    color: rgba(255,255,255,0.85) !important;

    font-weight: 500 !important;

}



.nav-sidebar .nav-item > .nav-link:hover {

    background-color: rgba(255, 255, 255, 0.12) !important;

    color: #ffffff !important;

}



.nav-sidebar .nav-item > .nav-link.active {

    background: linear-gradient(135deg, #3498db 0%, #2980b9 100%) !important;

    box-shadow: 0 3px 10px rgba(52, 152, 219, 0.4) !important;

    color: #ffffff !important;

}



/* Iconos del sidebar */

.nav-sidebar .nav-link .nav-icon {

    margin-right: 10px;

    width: 20px;

    text-align: center;

}



/* Submenús */

.nav-sidebar .nav-treeview {

    background: rgba(0,0,0,0.15);

    border-radius: 0 0 8px 8px;

    margin: 0 10px 5px 10px;

    padding: 5px 0;

}



.nav-sidebar .nav-treeview > .nav-item > .nav-link {

    padding: 0.5rem 1rem 0.5rem 1rem !important;

    margin: 2px 5px 2px 20px !important;

    font-size: 0.9rem !important;

    border-radius: 6px !important;

    color: rgba(255,255,255,0.75) !important;

}



.nav-sidebar .nav-treeview > .nav-item > .nav-link:hover {

    background-color: rgba(255, 255, 255, 0.1) !important;

    color: #ffffff !important;

}



.nav-sidebar .nav-treeview > .nav-item > .nav-link.active {

    background: rgba(52, 152, 219, 0.5) !important;

    color: #ffffff !important;

}



/* =============================================

   BADGES Y PILLS

============================================= */

.badge {

    padding: 0.4em 0.8em;

    font-weight: 500;

    border-radius: var(--radius-lg);

}



.badge.bg-success, .badge.badge-success {

    background: linear-gradient(135deg, var(--success-color) 0%, var(--success-dark) 100%) !important;

}



.badge.bg-danger, .badge.badge-danger {

    background: linear-gradient(135deg, var(--danger-color) 0%, var(--danger-dark) 100%) !important;

}



.badge.bg-warning, .badge.badge-warning {

    background: linear-gradient(135deg, var(--warning-color) 0%, var(--warning-dark) 100%) !important;

}



.badge.bg-info, .badge.badge-info {

    background: linear-gradient(135deg, var(--info-color) 0%, var(--info-dark) 100%) !important;

}



.badge.bg-primary, .badge.badge-primary {

    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%) !important;

}



/* =============================================

   MODALES

============================================= */

.modal-content {

    border: none;

    border-radius: var(--radius-md);

    box-shadow: var(--shadow-lg);

}



.modal-header {

    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);

    color: white;

    border-radius: var(--radius-md) var(--radius-md) 0 0;

    border-bottom: none;

}



.modal-header .modal-title {

    font-weight: 600;

}



.modal-header .close, .modal-header .btn-close {

    color: white;

    opacity: 0.8;

}



.modal-header .close:hover, .modal-header .btn-close:hover {

    opacity: 1;

}



.modal-footer {

    border-top: 1px solid var(--border-color);

    background: var(--bg-light);

    border-radius: 0 0 var(--radius-md) var(--radius-md);

}



/* =============================================

   ALERTAS

============================================= */

.alert {

    border: none;

    border-radius: var(--radius-md);

    padding: 1rem 1.25rem;

}



.alert-info {

    background: linear-gradient(135deg, rgba(52, 152, 219, 0.1) 0%, rgba(41, 128, 185, 0.15) 100%);

    color: var(--info-dark);

    border-left: 4px solid var(--info-color);

}



.alert-success {

    background: linear-gradient(135deg, rgba(39, 174, 96, 0.1) 0%, rgba(30, 132, 73, 0.15) 100%);

    color: var(--success-dark);

    border-left: 4px solid var(--success-color);

}



.alert-warning {

    background: linear-gradient(135deg, rgba(243, 156, 18, 0.1) 0%, rgba(214, 137, 16, 0.15) 100%);

    color: var(--warning-dark);

    border-left: 4px solid var(--warning-color);

}



.alert-danger {

    background: linear-gradient(135deg, rgba(231, 76, 60, 0.1) 0%, rgba(192, 57, 43, 0.15) 100%);

    color: var(--danger-dark);

    border-left: 4px solid var(--danger-color);

}



/* =============================================

   LOADING STATES

============================================= */

.btn-loading {

    position: relative;

    pointer-events: none;

}



.btn-loading::after {

    content: "";

    position: absolute;

    width: 16px;

    height: 16px;

    top: 50%;

    left: 50%;

    margin-left: -8px;

    margin-top: -8px;

    border: 2px solid transparent;

    border-top-color: white;

    border-radius: 50%;

    animation: btn-spin 0.6s linear infinite;

}



.btn-loading .btn-text {

    visibility: hidden;

}



@keyframes btn-spin {

    to {

        transform: rotate(360deg);

    }

}



/* Skeleton loading para tablas */

.skeleton {

    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);

    background-size: 200% 100%;

    animation: skeleton-loading 1.5s infinite;

    border-radius: 4px;

}



@keyframes skeleton-loading {

    0% {

        background-position: 200% 0;

    }

    100% {

        background-position: -200% 0;

    }

}



/* =============================================

   TOOLTIPS MEJORADOS

============================================= */

.tooltip-inner {

    background: var(--primary-dark);

    border-radius: var(--radius-sm);

    font-size: 0.8rem;

    padding: 0.4rem 0.8rem;

}



/* =============================================

   BREADCRUMBS

============================================= */

.breadcrumb {

    background: transparent;

    padding: 0;

    margin: 0;

}



.breadcrumb-item a {

    color: var(--primary-color);

    text-decoration: none;

    transition: color var(--transition-fast);

}



.breadcrumb-item a:hover {

    color: var(--primary-dark);

}



.breadcrumb-item.active {

    color: var(--text-muted);

}



/* =============================================

   ANIMACIONES ÚTILES

============================================= */

.fade-in {

    animation: fadeIn 0.3s ease-in;

}



@keyframes fadeIn {

    from {

        opacity: 0;

        transform: translateY(-10px);

    }

    to {

        opacity: 1;

        transform: translateY(0);

    }

}



.slide-in {

    animation: slideIn 0.3s ease-out;

}



@keyframes slideIn {

    from {

        opacity: 0;

        transform: translateX(-20px);

    }

    to {

        opacity: 1;

        transform: translateX(0);

    }

}



/* =============================================

   TABS DE NAVEGACIÓN MEJORADOS

   Solo aplica a tabs dentro de cards, no al sidebar

============================================= */

.card .nav-tabs,

.card-header .nav-tabs,

.tab-content + .nav-tabs,

.content .nav-tabs {

    border-bottom: 2px solid #e9ecef !important;

    gap: 5px;

    flex-wrap: nowrap;

    overflow-x: auto;

    padding-bottom: 2px;

    background: transparent !important;

}



.card .nav-tabs .nav-link,

.card-header .nav-tabs .nav-link,

.content .nav-tabs .nav-link {

    border: none !important;

    border-radius: 10px 10px 0 0 !important;

    padding: 12px 20px !important;

    font-weight: 600 !important;

    color: #5d6d7e !important;

    background: linear-gradient(180deg, #f8f9fa 0%, #e9ecef 100%) !important;

    transition: all 0.25s ease !important;

    white-space: nowrap;

    margin-bottom: -2px;

    border-bottom: 3px solid transparent !important;

}



.card .nav-tabs .nav-link:hover,

.card-header .nav-tabs .nav-link:hover,

.content .nav-tabs .nav-link:hover {

    color: #2980b9 !important;

    background: linear-gradient(180deg, #ffffff 0%, #f8f9fa 100%) !important;

    border-bottom-color: #bdc3c7 !important;

}



.card .nav-tabs .nav-link.active,

.card-header .nav-tabs .nav-link.active,

.content .nav-tabs .nav-link.active {

    color: #ffffff !important;

    background: linear-gradient(135deg, #2980b9 0%, #1a5276 100%) !important;

    border-bottom-color: #1a5276 !important;

    box-shadow: 0 -2px 10px rgba(41, 128, 185, 0.3);

}



.card .nav-tabs .nav-link i,

.content .nav-tabs .nav-link i {

    margin-right: 8px;

}



/* Pills tabs alternativo - Solo en cards */

.card .nav-pills .nav-link {

    border-radius: 25px !important;

    padding: 10px 20px !important;

    font-weight: 600 !important;

    color: #5d6d7e !important;

    background: #f1f3f4 !important;

    margin: 0 3px;

    transition: all 0.25s ease !important;

}



.card .nav-pills .nav-link:hover {

    color: #2980b9 !important;

    background: #e3e7ea !important;

}



.card .nav-pills .nav-link.active {

    color: #ffffff !important;

    background: linear-gradient(135deg, #2980b9 0%, #1a5276 100%) !important;

    box-shadow: 0 4px 12px rgba(41, 128, 185, 0.35);

}



/* =============================================

   RESPONSIVE MEJORAS

============================================= */

@media (max-width: 768px) {

    .card-body {

        padding: 0.75rem;

    }

    

    .table tbody td {

        font-size: 0.8rem;

        padding: 0.4rem !important;

    }

    

    .btn {

        padding: 0.35rem 0.8rem;

        font-size: 0.85rem;

    }

    

    .content-header h2 {

        font-size: 1.3rem !important;

    }

}



/* =============================================

   ESTADO VACÍO

============================================= */

.empty-state {

    text-align: center;

    padding: 3rem 1rem;

    color: var(--text-muted);

}



.empty-state i {

    font-size: 4rem;

    opacity: 0.3;

    margin-bottom: 1rem;

}



.empty-state h5 {

    color: var(--text-dark);

    margin-bottom: 0.5rem;

}



.empty-state p {

    font-size: 0.9rem;

}



/* =============================================

   INDICADORES DE ESTADO

============================================= */

.status-dot {

    display: inline-block;

    width: 8px;

    height: 8px;

    border-radius: 50%;

    margin-right: 6px;

}



.status-dot.success {

    background-color: var(--success-color);

    box-shadow: 0 0 0 3px rgba(39, 174, 96, 0.2);

}



.status-dot.danger {

    background-color: var(--danger-color);

    box-shadow: 0 0 0 3px rgba(231, 76, 60, 0.2);

}



.status-dot.warning {

    background-color: var(--warning-color);

    box-shadow: 0 0 0 3px rgba(243, 156, 18, 0.2);

}



.status-dot.info {

    background-color: var(--info-color);

    box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.2);

}



/* =============================================

   DATEPICKER / CALENDARIOS

============================================= */

/* Bootstrap Datepicker */

.datepicker {

    z-index: 1060 !important;

    border-radius: var(--radius-md) !important;

    box-shadow: var(--shadow-lg) !important;

    border: none !important;

    padding: 10px !important;

}



.datepicker table {

    width: 100% !important;

}



.datepicker table thead th {

    background: transparent !important;

    color: var(--text-dark) !important;

    font-weight: 600 !important;

    text-shadow: none !important;

    padding: 8px !important;

    font-size: 0.85rem !important;

    text-transform: none !important;

    letter-spacing: normal !important;

}



.datepicker table tbody td {

    padding: 8px !important;

    border: none !important;

    color: var(--text-dark) !important;

}



.datepicker table tbody td.day:hover {

    background: var(--bg-light) !important;

    border-radius: 50% !important;

}



.datepicker table tbody td.active,

.datepicker table tbody td.active:hover {

    background: var(--info-color) !important;

    color: white !important;

    border-radius: 50% !important;

}



.datepicker table tbody td.today {

    background: rgba(52, 152, 219, 0.2) !important;

    border-radius: 50% !important;

}



/* Tempus Dominus (Bootstrap 4/5 Datepicker) */

.bootstrap-datetimepicker-widget {

    z-index: 1060 !important;

    border-radius: var(--radius-md) !important;

    box-shadow: var(--shadow-lg) !important;

    border: 1px solid var(--border-color) !important;

    min-width: 300px !important;

}



.bootstrap-datetimepicker-widget table thead th {

    background: transparent !important;

    color: var(--text-dark) !important;

    font-weight: 600 !important;

    text-shadow: none !important;

    text-transform: none !important;

    letter-spacing: normal !important;

    font-size: 0.9rem !important;

    padding: 10px !important;

}



.bootstrap-datetimepicker-widget table thead tr:first-child th {

    background: var(--info-color) !important;

    color: white !important;

    border-radius: var(--radius-sm) var(--radius-sm) 0 0 !important;

}



/* Días de la semana (Lu, Ma, Mi...) - segunda fila */

.bootstrap-datetimepicker-widget table thead tr:nth-child(2) th,

.bootstrap-datetimepicker-widget .dow {

    color: #2c3e50 !important;

    font-weight: 700 !important;

    font-size: 0.85rem !important;

    background: #f8f9fa !important;

    padding: 10px 5px !important;

    text-transform: uppercase !important;

}



/* Vista de MESES - Tempus Dominus - Cuadrícula 3x4 */

.bootstrap-datetimepicker-widget .datepicker-months,

.bootstrap-datetimepicker-widget .datepicker-years,

.bootstrap-datetimepicker-widget .datepicker-decades {

    width: 280px !important;

    min-width: 280px !important;

}



.bootstrap-datetimepicker-widget .datepicker-months table,

.bootstrap-datetimepicker-widget .datepicker-years table,

.bootstrap-datetimepicker-widget .datepicker-decades table {

    width: 100% !important;

}



.bootstrap-datetimepicker-widget .datepicker-months td,

.bootstrap-datetimepicker-widget .datepicker-years td,

.bootstrap-datetimepicker-widget .datepicker-decades td {

    padding: 5px !important;

    text-align: center !important;

}



/* Contenedor de los spans de meses - usar flexbox para cuadrícula */

.bootstrap-datetimepicker-widget .datepicker-months td span,

.bootstrap-datetimepicker-widget .datepicker-years td span,

.bootstrap-datetimepicker-widget .datepicker-decades td span {

    display: inline-flex !important;

    align-items: center !important;

    justify-content: center !important;

    width: 70px !important;

    height: 38px !important;

    margin: 4px 2px !important;

    border-radius: 8px !important;

    cursor: pointer !important;

    color: #2c3e50 !important;

    font-weight: 500 !important;

    font-size: 0.85rem !important;

    background: #f8f9fa !important;

    transition: all 0.2s ease !important;

}



.bootstrap-datetimepicker-widget .datepicker-months span:hover,

.bootstrap-datetimepicker-widget .datepicker-years span:hover,

.bootstrap-datetimepicker-widget .datepicker-decades span:hover {

    background: #e3e7ea !important;

    color: #2980b9 !important;

}



.bootstrap-datetimepicker-widget .datepicker-months span.active,

.bootstrap-datetimepicker-widget .datepicker-years span.active,

.bootstrap-datetimepicker-widget .datepicker-decades span.active {

    background: linear-gradient(135deg, #2980b9 0%, #1a5276 100%) !important;

    color: #ffffff !important;

    box-shadow: 0 2px 8px rgba(41, 128, 185, 0.4) !important;

}



.bootstrap-datetimepicker-widget .datepicker-months span.old,

.bootstrap-datetimepicker-widget .datepicker-months span.new,

.bootstrap-datetimepicker-widget .datepicker-years span.old,

.bootstrap-datetimepicker-widget .datepicker-years span.new {

    color: #95a5a6 !important;

    background: transparent !important;

}



.bootstrap-datetimepicker-widget table td,

.bootstrap-datetimepicker-widget table th {

    border: none !important;

    padding: 8px !important;

}



.bootstrap-datetimepicker-widget table td.day {

    color: var(--text-dark) !important;

    background: transparent !important;

}



.bootstrap-datetimepicker-widget table td.day:hover {

    background: var(--bg-light) !important;

    border-radius: 50% !important;

}



.bootstrap-datetimepicker-widget table td.active,

.bootstrap-datetimepicker-widget table td.active:hover {

    background: var(--info-color) !important;

    color: white !important;

    border-radius: 50% !important;

    text-shadow: none !important;

}



.bootstrap-datetimepicker-widget table td.today::before {

    border-bottom-color: var(--info-color) !important;

}



/* jQuery UI Datepicker */

.ui-datepicker {

    z-index: 1060 !important;

    border-radius: var(--radius-md) !important;

    box-shadow: var(--shadow-lg) !important;

    border: 1px solid var(--border-color) !important;

    padding: 10px !important;

    background: white !important;

    width: auto !important;

    min-width: 280px !important;

}



.ui-datepicker-header {

    background: var(--info-color) !important;

    border: none !important;

    border-radius: var(--radius-sm) var(--radius-sm) 0 0 !important;

    padding: 10px !important;

    color: white !important;

}



.ui-datepicker-title {

    font-weight: 600 !important;

    color: white !important;

}



.ui-datepicker-prev,

.ui-datepicker-next {

    cursor: pointer !important;

    top: 10px !important;

}



.ui-datepicker-prev:hover,

.ui-datepicker-next:hover {

    background: rgba(255,255,255,0.2) !important;

    border-radius: var(--radius-sm) !important;

}



.ui-datepicker table {

    margin: 0 !important;

}



.ui-datepicker th {

    background: transparent !important;

    color: var(--text-muted) !important;

    font-weight: 600 !important;

    padding: 8px 5px !important;

    font-size: 0.8rem !important;

    text-transform: uppercase !important;

}



.ui-datepicker td {

    padding: 2px !important;

}



.ui-datepicker td a,

.ui-datepicker td span {

    padding: 8px !important;

    text-align: center !important;

    border-radius: 50% !important;

    display: block !important;

    color: var(--text-dark) !important;

    background: transparent !important;

    border: none !important;

}



.ui-datepicker td a:hover {

    background: var(--bg-light) !important;

}



.ui-datepicker td a.ui-state-active,

.ui-datepicker td a.ui-state-highlight {

    background: var(--info-color) !important;

    color: white !important;

}



.ui-datepicker td.ui-datepicker-today a {

    background: rgba(52, 152, 219, 0.2) !important;

    color: var(--info-color) !important;

}



/* =============================================

   INPUT GROUP MEJORAS

============================================= */

.input-group .form-control {

    border-radius: var(--radius-lg) !important;

}



.input-group > .form-control:not(:last-child) {

    border-top-right-radius: 0 !important;

    border-bottom-right-radius: 0 !important;

}



.input-group > .form-control:not(:first-child) {

    border-top-left-radius: 0 !important;

    border-bottom-left-radius: 0 !important;

}



.input-group-text {

    border-radius: var(--radius-lg) !important;

}



.input-group > .input-group-text:first-child {

    border-top-right-radius: 0 !important;

    border-bottom-right-radius: 0 !important;

}



.input-group > .input-group-text:last-child {

    border-top-left-radius: 0 !important;

    border-bottom-left-radius: 0 !important;

}



/* =============================================

   LOADING OVERLAY

============================================= */

.loading-overlay {

    position: fixed;

    top: 0;

    left: 0;

    right: 0;

    bottom: 0;

    background: rgba(255,255,255,0.8);

    z-index: 9999;

    display: flex;

    align-items: center;

    justify-content: center;

    flex-direction: column;

}



.loading-overlay .spinner-border {

    width: 3rem;

    height: 3rem;

}



.loading-overlay p {

    margin-top: 1rem;

    font-weight: 500;

    color: var(--text-dark);

}