/* ================================================================
   RESET Y BASE
================================================================ */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* ================================================================
   BREADCRUMB
================================================================ */

.breadcrumb {
    background-color: white !important;
    padding: 5px 20px !important;
    margin-bottom: 0;
    list-style: none;
    border: 1px solid #e9ecef;
}

.breadcrumb a {
    color: #4a4a4a;
    font-weight: 400;
}

/* ================================================================
   TITULOS DE CARDS Y MODALES
================================================================ */

.card .card-header .card-title,
.modal .modal-title {
    font-size: 1.3rem;
    font-weight: bold;
}

/* ================================================================
   TABLAS — THEAD ESTILO GENERAL
================================================================ */

.table thead tr {
    background-color: #ececec !important;
    color: #000 !important;
}

.table thead th {
    border-top-width: 0 !important;
    border-bottom-width: 0 !important;
}

/* ================================================================
   INPUTS Y ESTILOS GENERALES
================================================================ */

.password-progress {
    margin-top: 10px;
    margin-bottom: 0;
}

.form-control-checkbox {
    height: 25px;
    width: 25px;
    position: relative;
    top: -1px;
}

.cursor-pointer {
    cursor: pointer;
}

/* ================================================================
   ICON CARDS
================================================================ */

a.card-icon {
    text-decoration: none !important;
    color: black !important;
    border: 1px solid #dee2e6 !important;
}

a.card-icon p.desc {
    text-align: center;
    font-size: 12px !important;
}

.card-icon-selected {
    background-color: #fdedbc;
}

a.card-icon:hover {
    background-color: #fdedbc;
    animation: shakeY;
    animation-duration: 2s;
}

/* ================================================================
   COLUMNA de OPCIONES (acciones CRUD)
================================================================ */

.opciones-col {
    width: 120px !important;
    min-width: 120px !important;
    max-width: 120px !important;
    text-align: center !important;
    white-space: normal !important;
}

.opciones-col .dropdown-menu {
    min-width: 150px !important;
    max-width: 200px !important;
    padding: 5px 10px !important;
}

.opciones-col .btn-group .btn {
    width: 100% !important;
}

/* ================================================================
   DATATABLES — AJUSTES GLOBALES
================================================================ */

table.dataTable td,
table.dataTable th {
    vertical-align: middle !important;
}

table.dataTable {
    table-layout: auto !important;
}

table.dataTable td {
    white-space: nowrap;
}

table.dataTable td.opciones-col {
    white-space: normal !important;
}

/* ================================================================
   VISTA MÓVIL
================================================================ */

@media (max-width: 768px) {
    .opciones-col {
        width: 100px !important;
        min-width: 100px !important;
        max-width: 150px !important;
    }

    .opciones-col .dropdown-menu {
        min-width: 130px !important;
        font-size: 0.9rem !important;
    }
}

/* ================================================================
   SELECCIÓN Y EFECTO DE FILAS
================================================================ */

table.dataTable tbody tr:hover {
    background-color: #e2f7e6 !important;
    cursor: pointer;
    transition: background-color 0.25s ease-in-out;
}

table.dataTable tbody tr.selected-row {
    background-color: #c1e9c8 !important;
    box-shadow: inset 0 0 6px rgba(0,0,0,0.15);
    outline: 2px solid #7ccf8c !important;
    position: relative !important;
    z-index: 1 !important;
}

table.dataTable tbody tr {
    user-select: none;
}

/* ================================================================
   DROPDOWNS dentro de DataTables — FIX DEFINITIVO
================================================================ */

table.dataTable td.opciones-col {
    position: relative !important;
    overflow: visible !important;
}

table.dataTable .dropdown-menu {
    z-index: 999999 !important;
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
}

/* ================================================================
   HEADERS FIJOS PARA TODAS LAS TABLAS
================================================================ */

table.dataTable thead th,
table.dataTable thead td {
    position: sticky;
    top: 0;
    z-index: 20 !important;
    background-color: #ececec !important;
}

.dataTables_scrollHead {
    position: sticky;
    top: 0;
    z-index: 25 !important;
}

/* ================================================================
   ⚠️ OCULTAR INFO DE DATATABLES (por si acaso)
================================================================ */

.dataTables_info {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    font-size: 0 !important;
}

/* ================================================================
   MENÚ LATERAL
================================================================ */

.nav__link {
    color: #303440;
    display: block;
    padding: 0.5rem 1rem;
    text-decoration: none;
}

.nav__link--inside {
    border-radius: 6px;
    padding-left: 20px;
    text-align: left;
}

.nav__link--inside:hover {
    background: #F6F8FA;
}

.list {
    width: 100%;
    height: 83vh;
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 0 16px 16px 0;
}

.list__item {
    list-style: none;
    width: 100%;
    text-align: center;
    overflow: hidden;
}

.list__item--click {
    cursor: pointer;
}

.list__button {
    display: flex;
    align-items: center;
    gap: 1em;
    width: 70%;
    margin: 0 auto;
}

.arrow .list__arrow {
    transform: rotate(90deg);
}

.list__arrow {
    margin-left: auto;
    transition: transform .3s;
}

.list__show {
    width: 80%;
    margin-left: auto;
    border-left: 2px solid #303440;
    list-style: none;
    height: 0;
    transition: height .4s;
}

/* ================================================================
   FINAL DEL ARCHIVO
================================================================ */
/* ================================================================
   TABLAS EN MODALES — ESTILO PROFESIONAL
   Para: #tblDet u otras tablas dentro de modales
================================================================ */

/* Contenedor del modal: permite scroll interno */
.modal .modal-body {
    max-height: 70vh;
    overflow-y: auto;
    padding: 10px 15px;
}

/* DataTables dentro del modal */
.modal .dataTable {
    width: 100% !important;
    border-collapse: collapse !important;
}

/* Sticky Header SOLO para tablas dentro de modales */
.modal .dataTable thead th {
    position: sticky;
    top: 0;
    background-color: #ececec !important;
    z-index: 30 !important;
    border-bottom: 1px solid #d4d4d4 !important;
    padding: 8px !important;
}

/* Filas del modal */
.modal .dataTable tbody tr:hover {
    background-color: #f0f8ff !important; /* azul suave */
}

/* NUMEROS alineados */
.modal .dataTable td {
    padding: 6px 8px !important;
    white-space: nowrap;
}

/* Forzar dropdown visible (por si en el futuro agregas opciones) */
.modal .dropdown-menu {
    z-index: 999999 !important;
    position: absolute !important;
}

/* Quitamos cualquier info dentro del modal también */
.modal .dataTables_info {
    display: none !important;
}

/* Paginación más compacta dentro del modal */
.modal .dataTables_paginate {
    font-size: 0.85rem !important;
}

/* Ajustar controles responsivos */
.modal .dtr-control {
    cursor: pointer !important;
}

/* Desactivar sombras raras en modal */
.modal table.dataTable {
    box-shadow: none !important;
}
.modal-body {
    overflow-x: auto !important;
}
table.dataTable {
    width: 100% !important;
}
.modal-full {
    max-width: 60% !important;
    width: 60% !important;
}

/* Nivel 1 seleccionado */
.nav-sidebar .nav-link.active {
    background-color: #2a78b8 !important;
    color: #fff !important;
}

/* Nivel 2 */
.nav-sidebar .nav-treeview .nav-link.active {
    background-color: #d6dde4 !important;
    color: #000 !important;
}

/* Nivel 3 */
.nav-sidebar .nav-treeview .nav-treeview .nav-link.active {
    background-color: #c4ccd4 !important;
    color: #000 !important;
}