/* ================= THEME AZUL (responsive + tablas confiables) ================= */
:root {
    --azul-50: #E3F2FD;
    --azul-100: #BBDEFB;
    --azul-200: #90CAF9;
    --azul-300: #64B5F6;
    --azul-400: #42A5F5;
    --azul-600: #1976D2;
    --azul-700: #1565C0;
    --azul-800: #0D47A1;

    --txt: #0F172A;
    /* azul grisáceo muy oscuro para legibilidad */
    --txt-inv: #ffffff;
    --borde: rgba(13, 71, 161, .15);
    --elev: #ffffff;
    --shadow: 0 2px 6px rgba(2, 6, 23, .08);

    --grad-th: linear-gradient(135deg, #E8F1FE, #D7E6FD);
}

/* ======== Base / Layout ======== */
html,
body {
    height: 100%;
}

html,
body {
    overflow-x: hidden !important;
}

body {
    background: var(--azul-50);
    font-family: 'Poppins', sans-serif;
    color: var(--txt);
    margin: 0;
}

/* CLAVE para layouts con navbar + sidebar + main en flex */
.d-flex>main {
    min-width: 0;
    /* permite que el main se encoja dentro de flex */
    overflow-x: clip;
    /* evita sangrados laterales en móviles */
}

/* ======== Masthead ======== */
.masthead {
    background-color: var(--azul-600);
    color: var(--txt-inv) !important;
    min-height: 30rem;
    padding-top: 1rem;
}

.masthead h1 {
    font-size: 2rem;
    font-weight: 700;
    text-shadow: 2px 2px 5px rgba(0, 0, 0, .5);
    color: var(--azul-100);
}

@media (min-width: 992px) {
    .masthead h1 {
        font-size: 3.5rem;
    }
}

/* ======== Navbar / Header ======== */
header {
    background-color: var(--azul-800);
    box-shadow: var(--shadow);
    border-bottom: 1px solid var(--borde);
}

.text-end {
    text-align: right;
    color: var(--azul-200);
}

.text-end div:first-child {
    font-weight: 600;
    color: #EAF2FF;
}

.text-end div:last-child {
    color: var(--azul-100);
}

.rounded-circle {
    border: 2px solid var(--azul-200);
    object-fit: cover;
}

.navbar-toggler {
    border-color: var(--azul-300) !important;
}

.icon-actions i {
    color: var(--azul-300) !important;
}

.icon-actions a {
    margin-left: .75rem;
    text-decoration: none;
}

/* ======== Sidebar ======== */
#sidebar {
    background-color: var(--azul-100);
    border-right: 1px solid var(--borde);
}

#sidebar .nav-link {
    color: #1A237E !important;
    border-radius: .5rem;
    padding: .55rem .75rem;
}

#sidebar .nav-link:hover {
    background-color: var(--azul-200) !important;
}

#sidebar .nav-link.active {
    position: relative;
    background-color: var(--azul-600) !important;
    color: #fff !important;
    font-weight: 700 !important;
}

#sidebar .nav-link.active::before {
    content: "";
    position: absolute;
    left: 6px;
    top: 6px;
    bottom: 6px;
    width: 3px;
    border-radius: 3px;
    background: #fff3;
}

/* Sidebar sticky en desktop */
#sidebar.sidebar {
    position: sticky;
    top: 56px;
    /* altura de navbar */
    height: calc(100dvh - 56px);
}

/* ======== Botones ======== */
.btn-primary {
    background-color: var(--azul-600) !important;
    border-color: var(--azul-600) !important;
    color: #fff !important;
}

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

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

.btn-info:hover {
    background-color: var(--azul-400) !important;
    border-color: var(--azul-400) !important;
}

/* ======== Flash / Alerts centradas arriba ======== */
.alert-container {
    position: fixed;
    top: 1rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2000;
    width: auto;
    max-width: 90%;
    pointer-events: none;
}

.alert-container .alert {
    pointer-events: auto;
}

/* ======== TABLAS (solo responsive/legibilidad, sin colores) ======== */
.table {
    margin-bottom: 0;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 14px;
    background: transparent;
    /* sin color de fondo */
}

.table th {
    /* sin colores ni gradientes */
    border: none;
    padding: 14px 12px;
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: .5px;
    white-space: nowrap;
    /* cabecera compacta */
}

.table td {
    border: none;
    padding: 14px 12px;
    vertical-align: middle;
    transition: background .2s ease;
    white-space: normal;
    /* el contenido puede partirse */
    word-break: break-word;
    /* evita overflow en textos largos */
}

/* Mantener alineaciones sin forzar colores */
.table th.text-center,
.table td.text-center,
.table th.text-end,
.table td.text-end {
    white-space: nowrap;
}

/* Sin hover con color */
/* .table tbody tr:hover { } */

/* DataTables: evitar “saltos” y habilitar scroll horizontal suave */
.dataTables_wrapper .dataTables_scrollHead {
    overflow: hidden;
}

.dataTables_wrapper .dataTables_scrollHead table {
    margin: 0 !important;
}

.dataTables_wrapper .dataTables_scrollBody {
    overflow-x: auto !important;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.dataTables_wrapper .dataTables_scrollBody table {
    margin: 0 !important;
}

.dataTables_wrapper .dataTables_scroll {
    overflow: auto;
}

/* Opcional: FixedHeader (sin color, solo z-index y sombra sutil si la quieres) */
.fixedHeader-floating {
    z-index: 1030;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .08);
}

/* Si usas .nowrap, fuerza no cortar horizontalmente */
table.nowrap td,
table.nowrap th {
    white-space: nowrap;
}

/* ======== Responsivo ======== */
@media (max-width: 992px) {

    .table th,
    .table td {
        padding: 12px 10px;
    }
}

@media (max-width: 768px) {

    th,
    td {
        font-size: .9rem;
        padding: 8px;
    }
}

/* Contenedor auxiliar para tablas muy anchas */
.dt-container {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Asegurar que el main no derrame en layouts flex */
.d-flex>main {
    min-width: 0;
    overflow-x: clip;
}

/* ======== Responsivo ======== */
@media (max-width: 992px) {

    /* mejora densidad en tablets */
    .table th,
    .table td {
        padding: 12px 10px;
    }
}

@media (max-width: 768px) {
    .masthead {
        min-height: 20rem;
    }

    .masthead h1 {
        font-size: 2rem;
    }

    th,
    td {
        font-size: .9rem;
        padding: 8px;
    }

    .nav-link {
        font-size: .95rem;
    }

    /* permite que columnas y tarjetas respiren */
    .container,
    .container-fluid,
    .container-xxl {
        padding-left: 12px;
        padding-right: 12px;
    }
}

/* ======== Utilidades ======== */
.roles-btn {
    margin-top: 20px;
}

.roles-btn button {
    margin: 10px;
}

.hide-scrollbar {
    overflow: hidden;
}

/* ======== Footer (tema azul) ======== */
.footer-greenlinks {
    background-color: var(--azul-800);
    color: var(--azul-50);
    width: 100%;
    padding-top: 3rem;
    padding-bottom: 2rem;
    font-family: 'Poppins', sans-serif;
}

.footer-greenlinks h4 {
    color: var(--azul-300) !important;
    font-weight: 700;
    letter-spacing: 1px;
    margin-bottom: 1rem;
    text-transform: uppercase;
}

.footer-greenlinks p,
.footer-greenlinks a,
.footer-greenlinks i,
.footer-greenlinks span {
    color: var(--azul-100) !important;
    opacity: 1 !important;
    font-size: .95rem;
    transition: color .3s ease;
}

.footer-greenlinks a:hover {
    color: var(--azul-50) !important;
    text-decoration: none;
}

.footer-greenlinks .btn-outline-light {
    border-color: var(--azul-300) !important;
    color: var(--azul-300) !important;
    margin-right: .5rem;
    transition: all .3s ease-in-out;
}

.footer-greenlinks .btn-outline-light:hover {
    background-color: var(--azul-300) !important;
    color: var(--azul-800) !important;
}

.footer-greenlinks .container-xxl {
    max-width: 1320px;
    margin: 0 auto;
}

.footer-greenlinks .border-top {
    border-top: 1px solid rgba(255, 255, 255, .15);
    font-size: .85rem;
    color: var(--azul-100);
}

.footer-greenlinks .link-item {
    color: var(--azul-200) !important;
    font-weight: 600;
}

.footer-greenlinks .link-item:hover {
    color: var(--azul-50) !important;
}

/* ======== Tablas específicas (ej. productos) ======== */
#productosTable tbody tr td {
    background-color: transparent !important;
}

.d-flex>main {
    min-width: 0;
    overflow-x: clip;
}

.dt-container {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.table th {
    white-space: nowrap;
}

.table td {
    word-break: break-word;
    white-space: normal;
}

.dataTables_wrapper .dataTables_scroll {
    overflow: auto;
}