/* ══════════════════════════════════════
   Custom theme overrides
   Se carga al final para sobreescribir
   Bootstrap, style.css y DataTables
   ══════════════════════════════════════ */

:root {
    --color-brand: #0a7e8c;
    --color-brand-light: #b8dde6;
    --color-brand-dark: #065862;
    --color-accent: #f5a623;
    --color-accent-dark: #e09419;
}

/* ── Tablas Bootstrap ── */

.table thead th {
    background-color: var(--color-brand) !important;
    color: #fff !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    border: none !important;
    padding: 13px 16px !important;
    white-space: nowrap;
}

.table tbody td {
    padding: 12px 16px !important;
    vertical-align: middle !important;
    border-top: 1px solid #dfe6e9 !important;
    font-size: 13px;
    color: #2d3748;
}

.table tbody tr:hover {
    background-color: #eef6f8 !important;
}

.table tbody tr:nth-child(odd) {
    background-color: #f7fbfc;
}

.table tbody tr:nth-child(even) {
    background-color: #fff;
}

/* ── DataTables thead ── */

table.dataTable thead th,
table.dataTable thead td,
.dataTables_wrapper table thead th,
.dataTables_wrapper table thead td,
#myDataTable thead th {
    background-color: var(--color-brand) !important;
    color: #fff !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    border-bottom: none !important;
    border-top: none !important;
    padding: 13px 16px !important;
    white-space: nowrap;
}

/* ── DataTables sort arrows ── */

table.dataTable thead .sorting:before,
table.dataTable thead .sorting:after,
table.dataTable thead .sorting_asc:before,
table.dataTable thead .sorting_asc:after,
table.dataTable thead .sorting_desc:before,
table.dataTable thead .sorting_desc:after {
    color: rgba(255, 255, 255, 0.6) !important;
}

table.dataTable thead .sorting_asc:after,
table.dataTable thead .sorting_desc:after {
    color: #fff !important;
}

/* ── DataTables body ── */

table.dataTable tbody td,
.dataTables_wrapper table tbody td,
#myDataTable tbody td {
    padding: 12px 16px !important;
    vertical-align: middle !important;
    font-size: 13px !important;
    color: #2d3748 !important;
    border-top: 1px solid #dfe6e9 !important;
}

table.dataTable tbody tr:hover,
.dataTables_wrapper table tbody tr:hover {
    background-color: #eef6f8 !important;
}

table.dataTable tbody tr:nth-child(odd),
table.dataTable.stripe tbody tr:nth-child(odd) {
    background-color: #f7fbfc !important;
}

table.dataTable tbody tr:nth-child(even),
table.dataTable.stripe tbody tr:nth-child(even) {
    background-color: #fff !important;
}

table.dataTable.hover tbody tr:hover,
table.dataTable.display tbody tr:hover {
    background-color: #eef6f8 !important;
}

/* ── DataTables border fix ── */

table.dataTable,
table.dataTable.no-footer {
    border-bottom: none !important;
    border-collapse: collapse !important;
}

table.dataTable thead th {
    border-bottom: none !important;
}

/* ── Paginación ── */

.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    background: var(--color-brand) !important;
    border: 1px solid var(--color-brand) !important;
    color: #fff !important;
    border-radius: 6px !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
    border-radius: 6px !important;
    margin: 0 2px !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: var(--color-brand-light) !important;
    border: 1px solid var(--color-brand-light) !important;
    color: var(--color-brand-dark) !important;
}

/* ── Search y length ── */

.dataTables_wrapper .dataTables_filter input {
    border: 1px solid #c9d4d8 !important;
    border-radius: 6px !important;
    padding: 6px 12px !important;
    font-size: 13px !important;
    outline: none !important;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.dataTables_wrapper .dataTables_filter input:focus {
    border-color: var(--color-brand) !important;
    box-shadow: 0 0 0 3px rgba(10, 126, 140, 0.15) !important;
}

.dataTables_wrapper .dataTables_length select {
    border: 1px solid #c9d4d8 !important;
    border-radius: 6px !important;
    padding: 4px 24px 4px 8px !important;
    font-size: 13px !important;
    min-width: 60px !important;
    height: 32px !important;
    appearance: auto !important;
    -webkit-appearance: menulist !important;
}

.dataTables_wrapper .dataTables_info {
    font-size: 13px !important;
    color: #6b7c85 !important;
    padding-top: 12px !important;
}

.dataTables_wrapper .dataTables_paginate {
    padding-top: 12px !important;
}

.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_length {
    margin-bottom: 16px !important;
}

/* ── Cards ── */

.card {
    border: none !important;
    border-radius: 10px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important;
}

/* ── Modales ── */

.modal-content {
    border: none !important;
    border-radius: 10px !important;
    overflow: hidden !important;
}

.modal-header {
    background-color: var(--color-brand) !important;
    color: #fff !important;
    border-bottom: none !important;
    padding: 16px 20px !important;
}

.modal-header .modal-title {
    color: #fff !important;
    font-weight: 600 !important;
}

.modal-header .close {
    color: #fff !important;
    opacity: 0.85 !important;
    text-shadow: none !important;
}

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

.modal-footer {
    border-top: 1px solid #e4eaed !important;
}

/* ── Botones ── */

.btn-primary {
    background-color: var(--color-brand) !important;
    border-color: var(--color-brand) !important;
}

.btn-primary:hover,
.btn-primary:focus {
    background-color: var(--color-brand-dark) !important;
    border-color: var(--color-brand-dark) !important;
}

.btn-info {
    background-color: var(--color-accent) !important;
    border-color: var(--color-accent) !important;
    color: #fff !important;
}

.btn-info:hover,
.btn-info:focus {
    background-color: var(--color-accent-dark) !important;
    border-color: var(--color-accent-dark) !important;
}

.btn-success {
    background-color: var(--color-brand) !important;
    border-color: var(--color-brand) !important;
}

.btn-success:hover {
    background-color: var(--color-brand-dark) !important;
    border-color: var(--color-brand-dark) !important;
}

.btn-sm {
    border-radius: 6px !important;
    font-size: 12px !important;
    padding: 5px 12px !important;
}

.btn-rounded {
    border-radius: 8px !important;
}

/* ── Títulos ── */

.page-title {
    color: var(--color-brand) !important;
    font-weight: 600 !important;
}

.card-title {
    color: var(--color-brand) !important;
    font-weight: 600 !important;
}

/* ── Sidebar icons ── */

.sidebar .nav .nav-item .nav-link .icon-bg .menu-icon {
    color: var(--color-brand-light) !important;
}

/* ── Alerts ── */

.alert-primary {
    background-color: var(--color-brand-light) !important;
    border-color: var(--color-brand) !important;
    color: var(--color-brand-dark) !important;
}

.bg-primary {
    background-color: var(--color-brand) !important;
}

/* ── Scroll horizontal tablas ── */

.table-responsive {
    overflow-x: auto !important;
    overflow-y: visible !important;
}

.dataTables_wrapper {
    overflow-x: visible !important;
}

table.dataTable {
    width: 100% !important;
}

/* ── Badge ── */

.badge {
    font-weight: 500 !important;
    padding: 5px 10px !important;
    border-radius: 4px !important;
    font-size: 11px !important;
}