/*
 * Tema base de la aplicación (capa de modernización sobre AdminLTE 3).
 * Todas las decisiones visuales salen de las variables de :root, para que los
 * temas de temporada (public/css/themes/*.css) solo tengan que redefinirlas.
 */
:root {
    --app-accent: #007bff;
    --app-accent-contrast: #ffffff;
    --app-accent-soft: rgba(0, 123, 255, .10);
    --app-bg: #f4f6fb;
    --app-surface: #ffffff;
    --app-text: #1f2937;
    --app-muted: #6b7280;
    --app-border: #e5e7eb;
    --app-radius: 12px;
    --app-radius-sm: 8px;
    --app-shadow: 0 1px 2px rgba(16, 24, 40, .05), 0 4px 14px rgba(16, 24, 40, .06);
    --app-shadow-hover: 0 2px 4px rgba(16, 24, 40, .06), 0 10px 24px rgba(16, 24, 40, .10);
    --app-font: 'Source Sans Pro', -apple-system, 'Segoe UI', Roboto, sans-serif;
}

/* ---------- Base ---------- */
body,
.content-wrapper {
    font-family: var(--app-font);
    color: var(--app-text);
}

.content-wrapper {
    background: var(--app-bg);
    padding: 1rem 1.25rem;
}

.main-footer {
    background: transparent;
    border-top: 1px solid var(--app-border);
    color: var(--app-muted);
}

/* ---------- Barra superior ---------- */
.main-header.navbar {
    border-bottom: 1px solid var(--app-border);
    box-shadow: 0 1px 8px rgba(16, 24, 40, .05);
}

.main-header .dropdown-menu {
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius);
    box-shadow: var(--app-shadow-hover);
}

/* ---------- Menú lateral ---------- */
.main-sidebar {
    box-shadow: 2px 0 14px rgba(16, 24, 40, .12) !important;
}

.main-sidebar .brand-link {
    border-bottom-color: rgba(255, 255, 255, .15);
}

.sidebar .nav-sidebar > .nav-item > .nav-link {
    border-radius: var(--app-radius-sm);
    margin-bottom: 2px;
    transition: background-color .15s ease, transform .15s ease;
}

.sidebar .nav-sidebar .nav-link:hover {
    background-color: rgba(255, 255, 255, .14);
}

.sidebar .nav-sidebar .nav-link.active,
.sidebar .nav-sidebar .menu-open > .nav-link {
    background-color: rgba(255, 255, 255, .22) !important;
    box-shadow: none;
}

.sidebar .nav-treeview {
    padding-left: .35rem;
}

.sidebar .nav-treeview > .nav-item > .nav-link {
    border-radius: var(--app-radius-sm);
}

/* ---------- Contenedores / tarjetas ---------- */
.card,
.small-box,
.info-box {
    border: 0;
    border-radius: var(--app-radius);
    box-shadow: var(--app-shadow);
    transition: box-shadow .2s ease, transform .2s ease;
}

.small-box:hover,
.info-box:hover {
    box-shadow: var(--app-shadow-hover);
    transform: translateY(-2px);
}

.card-header {
    background: transparent;
    border-bottom: 1px solid var(--app-border);
}

/* Las pantallas usan cajas "bg-white" sueltas como panel principal. */
.content-wrapper .bg-white {
    background-color: var(--app-surface) !important;
    border-radius: var(--app-radius);
    box-shadow: var(--app-shadow);
}

/* Encabezados de sección (barras azules con texto blanco). */
.content-wrapper .bg-primary.text-white:not(thead),
.content-wrapper .container-fluid.bg-primary {
    background: linear-gradient(135deg, var(--app-accent), color-mix(in srgb, var(--app-accent) 70%, #000)) !important;
    border-radius: var(--app-radius-sm);
    padding: .4rem .9rem;
    box-shadow: 0 4px 12px var(--app-accent-soft);
}

/* Celdas con d-flex (logos, botones de acción) rompen el layout de la tabla: se dejan como celda. */
.table > tbody > tr > td.d-flex,
.table > tbody > tr > th.d-flex {
    display: table-cell !important;
    vertical-align: middle;
}

.table td.d-flex .btn,
.table td.d-flex a {
    vertical-align: middle;
}

.content-wrapper h3,
.content-wrapper h4 {
    font-weight: 600;
}

/* ---------- Tablas ---------- */
.table {
    color: var(--app-text);
}

.table thead th {
    border-top: 0;
    border-bottom: 2px solid var(--app-border);
    color: var(--app-muted);
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    white-space: nowrap;
}

.table td,
.table th {
    vertical-align: middle;
    border-top: 1px solid var(--app-border);
}

.table-hover tbody tr {
    transition: background-color .12s ease;
}

.table-hover tbody tr:hover {
    background-color: var(--app-accent-soft);
}

.table-striped > tbody > tr:nth-of-type(odd),
.table-striped > tbody > tr:nth-child(odd) > td,
.table-striped > tbody > tr:nth-child(odd) > th {
    background-color: rgba(16, 24, 40, .022);
}

/* Encabezado de tabla con color (thead.bg-primary): plano, texto blanco legible. */
.table thead.bg-primary th,
.table thead.bg-primary td {
    background-color: var(--app-accent) !important;
    color: var(--app-accent-contrast) !important;
    border-color: rgba(255, 255, 255, .18);
    border-bottom: 0;
    font-size: .8rem;
}

.table thead.bg-primary th:first-child {
    border-top-left-radius: var(--app-radius-sm);
}

.table thead.bg-primary th:last-child {
    border-top-right-radius: var(--app-radius-sm);
}

/* Celdas de estado: de bloque sólido a color suave, legible y alineado con la fila. */
.table td.bg-success, .table td.alert-success { background-color: rgba(34, 197, 94, .14) !important; color: #15803d !important; }
.table td.bg-danger { background-color: rgba(239, 68, 68, .13) !important; color: #b91c1c !important; }
.table td.bg-warning, .table td.alert-warning { background-color: rgba(245, 158, 11, .16) !important; color: #b45309 !important; }
.table td.bg-primary { background-color: var(--app-accent-soft) !important; color: var(--app-accent) !important; }
.table td.bg-success, .table td.bg-danger, .table td.bg-warning, .table td.bg-primary,
.table td.alert-success, .table td.alert-warning {
    font-weight: 700;
    text-align: center;
}

.table-bordered td,
.table-bordered th {
    border-color: var(--app-border);
}

/* ---------- DataTables ---------- */
.dataTables_wrapper {
    padding-top: .25rem;
}

.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_info {
    color: var(--app-muted);
    font-size: .88rem;
}

.dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_filter input {
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius-sm);
    padding: .3rem .6rem;
    height: auto;
    background-color: var(--app-surface);
    color: var(--app-text);
}

.dataTables_wrapper .dataTables_filter input:focus,
.dataTables_wrapper .dataTables_length select:focus {
    outline: 0;
    border-color: var(--app-accent);
    box-shadow: 0 0 0 3px var(--app-accent-soft);
}

table.dataTable {
    border-collapse: separate !important;
    border-spacing: 0;
    margin-top: .75rem !important;
    margin-bottom: .75rem !important;
}

table.dataTable thead .sorting,
table.dataTable thead .sorting_asc,
table.dataTable thead .sorting_desc {
    cursor: pointer;
}

/* Las flechas de orden se ven sobre el encabezado de color. */
table.dataTable thead.bg-primary .sorting:before,
table.dataTable thead.bg-primary .sorting:after,
table.dataTable thead.bg-primary .sorting_asc:before,
table.dataTable thead.bg-primary .sorting_asc:after,
table.dataTable thead.bg-primary .sorting_desc:before,
table.dataTable thead.bg-primary .sorting_desc:after {
    color: #fff;
}

.dataTables_wrapper .page-link {
    color: var(--app-accent);
    border-color: var(--app-border);
    margin: 0 2px;
    border-radius: var(--app-radius-sm);
}

.dataTables_wrapper .page-item.active .page-link {
    background-color: var(--app-accent);
    border-color: var(--app-accent);
    color: var(--app-accent-contrast);
}

.dataTables_wrapper .page-item.disabled .page-link {
    color: var(--app-muted);
    background: transparent;
}

.dataTables_wrapper .page-link:hover {
    background-color: var(--app-accent-soft);
}

/* ---------- Formularios ---------- */
.form-control,
.custom-select,
.input-group-text {
    border-color: var(--app-border);
    border-radius: var(--app-radius-sm);
}

.form-control:focus,
.custom-select:focus {
    border-color: var(--app-accent);
    box-shadow: 0 0 0 3px var(--app-accent-soft);
}

form label,
.form-group label {
    font-weight: 600;
    font-size: .88rem;
    color: var(--app-text);
}

/* ---------- Botones y etiquetas ---------- */
.btn {
    border-radius: var(--app-radius-sm);
    font-weight: 600;
    transition: box-shadow .15s ease, transform .1s ease, filter .15s ease;
}

.btn:hover:not(:disabled) {
    box-shadow: 0 3px 10px rgba(16, 24, 40, .15);
    filter: brightness(1.04);
}

.btn:active:not(:disabled) {
    transform: translateY(1px);
}

.badge {
    border-radius: 999px;
    padding: .4em .75em;
    font-weight: 600;
}

/* ---------- Modales y alertas ---------- */
.modal-content {
    border: 0;
    border-radius: var(--app-radius);
    box-shadow: var(--app-shadow-hover);
}

.modal-header {
    border-bottom: 1px solid var(--app-border);
}

.alert {
    border: 0;
    border-radius: var(--app-radius-sm);
}

.swal2-popup {
    border-radius: var(--app-radius) !important;
}

/* ---------- Ancho uniforme de las pantallas ---------- */
.content-wrapper .content > .container-fluid > .container,
.content-wrapper .content > .container-fluid > .container-fluid,
.content-wrapper .content > .container-fluid > .mx-lg-5,
.content-wrapper .content > .container-fluid > .mx-5,
.content-wrapper .content > .container-fluid > .card,
.content-wrapper .content > .container-fluid > #app {
    max-width: 1400px;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 0;
    padding-right: 0;
}

/* Listados antiguos con letra de 12px y encabezados en <td>. */
.table tr[style*="font-size: 12px"] > td,
.table tr[style*="font-size: 12px"] > th {
    font-size: .88rem !important;
    padding: .6rem .5rem !important;
}

.table thead td {
    border-top: 0;
    border-bottom: 2px solid var(--app-border);
    color: var(--app-muted);
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    white-space: nowrap;
}

/* Interruptor Activo/Desactivo (bootstrap-toggle) sin ancho fijo de 175px. */
.table .toggle.btn {
    width: 120px !important;
    min-width: 0;
    height: 34px !important;
}

.table .toggle .toggle-group label,
.table .toggle .toggle-group span {
    line-height: 1.6;
}

/* ---------- Detalles ---------- */
::selection {
    background: var(--app-accent-soft);
}

@media (max-width: 767.98px) {
    .content-wrapper {
        padding: .75rem;
    }
}