/* ============================================================
   PENSIONES THEME - "Iron Road" (Azul Marino + Cobre Industrial)
   Sistema de Pensiones de Tractocamiones
   ============================================================ */

/* --- CSS Custom Properties --- */
:root {
    --p-primary: #1A237E;
    --p-primary-hover: #0D1754;
    --p-primary-medium: #283593;
    --p-secondary: #D4790E;
    --p-accent: #C62828;
    --p-surface: #E8EAF6;
    --p-success: #2E7D32;
    --p-text-on-primary: #FFFFFF;
    --p-text-dark: #212121;
    --p-border-radius: 6px;
    --p-border-radius-lg: 8px;
    --p-border-radius-xl: 12px;
    --p-transition: all 0.25s ease;
    --p-shadow-sm: 0 1px 3px rgba(26,35,126,0.12);
    --p-shadow-md: 0 4px 12px rgba(26,35,126,0.15);
    --p-shadow-lg: 0 8px 24px rgba(26,35,126,0.2);
}

/* --- Header --- */
.wrapper #header {
    background: linear-gradient(135deg, #1A237E, #283593) !important;
    box-shadow: 0 2px 8px rgba(26,35,126,0.3);
}

/* --- Navigation --- */
#nav li ul {
    border-radius: 0 0 var(--p-border-radius) var(--p-border-radius);
    box-shadow: var(--p-shadow-md);
    overflow: hidden;
}

#nav li ul li a {
    transition: var(--p-transition);
}

#nav > ul > li > a {
    transition: var(--p-transition);
}

.menucontainer .dropNav {
    border-radius: 0 0 var(--p-border-radius) var(--p-border-radius);
    box-shadow: var(--p-shadow-md);
}

/* --- Cards / Content --- */
.wrapper .content {
    border-top: 3px solid var(--p-primary) !important;
    border-radius: 0 0 var(--p-border-radius-lg) var(--p-border-radius-lg);
    box-shadow: var(--p-shadow-sm);
    transition: box-shadow 0.3s ease, transform 0.3s ease;
    will-change: transform;
}

.wrapper .content:hover {
    box-shadow: var(--p-shadow-md);
}

/* --- Tables --- */
.wrapper table thead tr th {
    background: linear-gradient(135deg, #1A237E, #283593) !important;
    color: #fff;
    font-weight: 600;
    letter-spacing: 0.3px;
}

.wrapper .table-striped tbody tr:hover,
.wrapper table tbody tr:hover {
    background-color: rgba(26,35,126,0.04) !important;
    transition: background-color 0.2s ease;
}

/* DataTables pagination */
.wrapper .dataTables_paginate .pagination li .page-link {
    border-radius: var(--p-border-radius) !important;
    margin: 0 2px;
    transition: var(--p-transition);
}

.wrapper .dataTables_paginate .pagination li.active .page-link {
    background: var(--p-primary) !important;
    border-color: var(--p-primary) !important;
    color: #fff !important;
    box-shadow: var(--p-shadow-sm);
}

.wrapper .dataTables_paginate .pagination li .page-link:hover {
    background: var(--p-surface) !important;
    color: var(--p-primary) !important;
}

/* DataTables buttons */
.dt-buttons .dt-button,
.dataTables_wrapper .dt-buttons .btn {
    border-radius: var(--p-border-radius) !important;
    transition: var(--p-transition);
}

/* --- Buttons --- */
.wrapper .btn-primary,
.btn-primary {
    border-radius: var(--p-border-radius) !important;
    transition: var(--p-transition);
}

.wrapper .btn-primary:hover,
.btn-primary:hover {
    box-shadow: var(--p-shadow-sm);
    transform: translateY(-1px);
}

.wrapper .btn-outline-primary,
.btn-outline-primary {
    border-radius: var(--p-border-radius) !important;
    transition: var(--p-transition);
}

/* --- Modals --- */
.modal-content {
    border-radius: var(--p-border-radius-xl) !important;
    box-shadow: var(--p-shadow-lg) !important;
    overflow: hidden;
    border: none !important;
}

.modal-header {
    background: linear-gradient(135deg, #1A237E, #283593) !important;
    color: #fff !important;
    border-bottom: none !important;
    padding: 15px 20px;
}

.modal-header .modal-title,
.modal-header .close,
.modal-header h4,
.modal-header h5 {
    color: #fff !important;
}

.modal-header .close {
    opacity: 0.8;
    text-shadow: none;
}

.modal-header .close:hover {
    opacity: 1;
}

.modal-footer {
    background: #f5f5f5;
    border-top: 1px solid #e0e0e0;
}

/* --- Forms --- */
.form-control:focus ~ label,
.material-label-fixed {
    color: var(--p-primary) !important;
}

.material-line:before,
.material-line:after {
    background: var(--p-primary) !important;
}

/* Solo aplicar borde/sombra a inputs NO-material (ej. login, filtros sueltos) */
.form-control:focus {
    border-color: var(--p-primary) !important;
}

/* Inputs material: linea gris inferior visible en reposo para indicar que es editable */
.form-material .form-control {
    border-bottom: 1px solid #bbb !important;
    box-shadow: none !important;
}

/* En foco: material-line se encarga del underline coloreado */
.form-material .form-control:focus {
    border-bottom-color: transparent !important;
    box-shadow: none !important;
    outline: none !important;
}

/* --- Footer --- */
#footer {
    background: var(--p-surface) !important;
    border-top: 2px solid var(--p-primary);
    color: var(--p-text-dark);
    padding: 15px 20px;
    text-align: center;
    font-size: 13px;
}

#footer a {
    color: var(--p-secondary) !important;
    font-weight: 600;
    text-decoration: none;
    transition: color 0.2s ease;
}

#footer a:hover {
    color: var(--p-primary) !important;
    text-decoration: underline;
}

#footer .footer-truck-icon {
    color: var(--p-primary);
    opacity: 0.3;
    margin-right: 8px;
    font-size: 16px;
}

/* --- Breadcrumbs --- */
.site-content-title {
    background: var(--p-surface) !important;
    border-bottom: 1px solid rgba(26,35,126,0.1);
}

.site-content-title.primary-breadcrumbs {
    background: var(--p-primary) !important;
}

/* --- Scrollbar (Webkit) --- */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb {
    background: #b0b0b0;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--p-primary);
}

/* --- Accessibility: Focus Rings --- */
a:focus-visible,
button:focus-visible {
    outline: 2px solid var(--p-primary) !important;
    outline-offset: 2px;
}

/* Inputs/selects/textareas: solo fuera de formularios material */
.form-control:focus-visible {
    outline: none !important;
}

/* --- Select2 --- */
.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: var(--p-primary) !important;
    color: #fff !important;
}

.select2-container--default .select2-selection--single:focus,
.select2-container--default.select2-container--focus .select2-selection,
.select2-container--default.select2-container--open .select2-selection {
    border-color: var(--p-primary) !important;
}

.select2-dropdown {
    border-color: var(--p-primary) !important;
    border-radius: 0 0 var(--p-border-radius) var(--p-border-radius);
    box-shadow: var(--p-shadow-sm);
}

/* --- Flatpickr --- */
.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange {
    background: var(--p-primary) !important;
    border-color: var(--p-primary) !important;
}

.flatpickr-months .flatpickr-month,
.flatpickr-current-month .flatpickr-monthDropdown-months,
span.flatpickr-weekday {
    color: var(--p-primary);
}

/* --- SweetAlert2 --- */
.swal2-confirm.swal2-styled {
    background-color: var(--p-primary) !important;
    border-radius: var(--p-border-radius) !important;
    transition: var(--p-transition);
}

.swal2-confirm.swal2-styled:hover {
    background-color: var(--p-primary-hover) !important;
}

.swal2-cancel.swal2-styled {
    border-radius: var(--p-border-radius) !important;
}

/* --- Loader Overlay --- */
.loader-overlay {
    background-color: var(--p-primary) !important;
}

/* --- User Dropdown --- */
.drop-profile {
    border-radius: var(--p-border-radius-lg) !important;
    box-shadow: var(--p-shadow-md) !important;
    overflow: hidden;
}

/* --- Animated Arrow (Mobile Menu) --- */
@media (max-width: 991px) {
    .wsoffcanvasopener .animated-arrow span:before,
    .wsoffcanvasopener .animated-arrow span:after {
        background: #fff !important;
    }
}