:root {
    --whatsapp-green: #25D366;
    --whatsapp-dark: #128C7E;
    --whatsapp-light: #DCF8C6;
}

body {
    margin: 0;
    box-sizing: border-box;
    overflow: hidden; /* evitar scroll global, el contenido se ajusta dinámicamente */
    /* background: #2b2b2b; fondo gris oscuro */
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    /* Poner la textura (imagen) como capa inferior y el degradado encima. */
    background-image: linear-gradient(to bottom, rgba(180, 180, 180, 0.7), rgba(74, 74, 74, 0.7)), url("../images/protruding-squares.11581c5c8efd.svg");
    background-repeat: no-repeat, repeat;
    background-blend-mode: multiply;
    background-attachment: fixed;
    min-height: 100vh;
}

.btn-whatsapp {
    background: #EE5522;
    color: white;
    border: none;
}

.btn-whatsapp:hover {
    background: #AB3D18;
    color: white;
}

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

.card-header {
    background: #333333;
    color: white;
    border-radius: 10px 10px 0 0 !important;
}

/* Estilos para el menú lateral AdminLTE */
.sidebar {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: 250px;
    background-color: #343a40;
    color: white;
    transition: width 0.3s;
    z-index: 1000;
    box-shadow: 8px 0 10px rgba(0, 0, 0, 0.2);
}
.sidebar.collapsed {
    width: 70px;
}
.sidebar .user-info {
    padding: 20px;
    text-align: center;
    border-bottom: 1px solid #495057;
}
.sidebar.collapsed .user-info {
    padding: 10px;
}
.sidebar.collapsed .user-info .user-name,
.sidebar.collapsed .user-info .user-role {
    display: none;
}
.sidebar .menu {
    list-style: none;
    padding: 0;
    margin: 0;
}
.sidebar .menu li {
    border-bottom: 1px solid #495057;
}
.sidebar .menu a {
    display: flex;
    align-items: center;
    padding: 15px 20px;
    color: white;
    text-decoration: none;
    transition: background-color 0.3s;
}
.sidebar .menu a:hover {
    background-color: #495057;
}
.sidebar .menu a i {
    margin-right: 10px;
    width: 20px;
}
.sidebar.collapsed .menu a {
    justify-content: center;
    padding: 15px;
}
.sidebar.collapsed .menu a span {
    display: none;
}
.main-content {
    margin-left: 250px;
    /* margin-top se calcula dinámicamente vía JS para ajustarse a la altura real de la top-bar */
    margin-top: 0;
    transition: margin-left 0.3s;
    min-height: 0;
    padding: 20px;
    box-sizing: border-box;
}
.main-content.expanded {
    margin-left: 70px;
}
.top-bar {
    position: fixed;
    top: 0;
    left: 250px;
    width: calc(100% - 250px);
    height: 60px; /* altura fija para que el fondo sea visible */
    background: #282828;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    transition: left 0.3s, width 0.3s;
}
.top-bar.expanded {
    left: 70px;
    width: calc(100% - 70px);
}
.logo-center {
    height: auto;
    max-height: none;
    max-width: 100%;
    display: block;
}
.home-center {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
}

/* Estilos para tabla oscura en user_list */
/* .table-dark thead th { */
    /* background-color: #54595d; Gris oscuro para el header de la tabla */
    /* color: white; */
    /* border-color: #6c757d; */
/* } */
.table-dark tbody td {
    color: white;
    background-color: #434343;
}

/* Estilos para DataTable en tema oscuro */
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_length label,
.dataTables_wrapper .dataTables_filter label {
    color: white !important;
}
.dataTables_wrapper .dataTables_filter input {
    background-color: #343a40;
    color: white;
    border-color: #495057;
}
.dataTables_wrapper .dataTables_length select {
    background-color: #343a40;
    color: white;
    border-color: #495057;
}
.dataTables_wrapper .dataTables_length select option {
    background-color: #343a40;
    color: white;
}

/* Estilos para select múltiple en tema oscuro */
.form-select {
    background-color: #343a40;
    color: white;
    border-color: #495057;
}
.form-select option {
    background-color: #343a40;
    color: white;
}

.dataTables_wrapper .paginate_button {
    color: white !important;
    background: #495057 !important;
    border-color: #6c757d !important;
}
.dataTables_wrapper .paginate_button:hover {
    background: #6c757d !important;
}
.dataTables_wrapper .paginate_button.disabled,
.dataTables_wrapper .paginate_button.disabled * {
    color: #ccc !important;
    background: transparent !important;
    border: none !important;
}

/* Reglas extra de alta especificidad para forzar color en los "..." y enlaces
   de paginación (incluye Bootstrap .page-link y SVG dentro de los botones) */
.dataTables_wrapper .dataTables_paginate .pagination li .page-link,
.dataTables_wrapper .dataTables_paginate .pagination li a.page-link,
.dataTables_wrapper .dataTables_paginate .pagination li span.page-link,
.dataTables_wrapper .dataTables_paginate .pagination li .page-link *,
.dataTables_wrapper .dataTables_paginate .pagination li a,
.dataTables_wrapper .dataTables_paginate .pagination li span,
.dataTables_wrapper .dataTables_paginate .pagination li,
.dataTables_wrapper .dataTables_paginate .pagination {
    color: #fff !important;
}

/* SVG/iconos dentro de paginación */
.dataTables_wrapper .dataTables_paginate .pagination li .page-link svg,
.dataTables_wrapper .dataTables_paginate .pagination li a.page-link svg,
.dataTables_wrapper .dataTables_paginate .pagination li span.page-link svg {
    fill: #fff !important;
}

/* Estados deshabilitados específicos */
.dataTables_wrapper .dataTables_paginate .pagination li.disabled .page-link,
.dataTables_wrapper .dataTables_paginate .pagination li.disabled a.page-link,
.dataTables_wrapper .dataTables_paginate .pagination li.disabled span.page-link {
    color: #ccc !important;
}
.dataTables_wrapper .dataTables_paginate .pagination li.disabled .page-link svg,
.dataTables_wrapper .dataTables_paginate .pagination li.disabled a.page-link svg,
.dataTables_wrapper .dataTables_paginate .pagination li.disabled span.page-link svg {
    fill: #ccc !important;
}

/* Color específico para los puntos suspensivos de DataTables */
.dataTables_wrapper .dataTables_paginate span.ellipsis,
.dataTables_wrapper span.ellipsis,
.dataTables_wrapper .ellipsis {
    color: #fff !important;
}

/* Colores consistentes para enlaces de paginación (Bootstrap 5) */
.dataTables_wrapper .dataTables_paginate .page-item .page-link {
    color: #fff !important;
    background-color: #495057 !important;
    border-color: #6c757d !important;
}
.dataTables_wrapper .dataTables_paginate .page-item .page-link:hover {
    color: #fff !important;
    background-color: #6c757d !important;
    border-color: #868e96 !important;
}
.dataTables_wrapper .dataTables_paginate .page-item.disabled .page-link,
.dataTables_wrapper .dataTables_paginate .page-item.disabled .page-link:hover,
.dataTables_wrapper .dataTables_paginate .page-item.disabled .page-link:focus {
    color: #ccc !important;
    background-color: #495057 !important;
    border-color: #6c757d !important;
    opacity: 1 !important;
}
.dataTables_wrapper .pagination .disabled a {
    color: #ccc !important;
}

/* Estilo para la página actual en el paginador */
.dataTables_wrapper .paginate_button.current {
    background: #EE5522 !important; /* Azul para destacar */
    color: white !important;
    border-color: #EE5522 !important;
}
.dataTables_wrapper .paginate_button.current:hover {
    background: #EE5522 !important; /* Azul más oscuro al hover */
    color: white !important;
}

.toggle-btn {
    position: fixed;
    top: 10px;
    left: 260px;
    z-index: 1001;
    background-color: #343a40;
    color: white;
    border: none;
    padding: 10px;
    cursor: pointer;
    transition: left 0.3s;
}
.toggle-btn.collapsed {
    left: 80px;
}

/* Footer fijo */
.footer {
    position: fixed;
    bottom: 0;
    left: 250px;
    width: calc(100% - 250px);
    background-color: #282828; /* Gris más claro para distinguirlo del sidebar */
    color: white;
    text-align: center;
    padding: 4px;
    z-index: 999;
    transition: left 0.3s, width 0.3s;    display: flex;
    align-items: center;
    justify-content: center;}
.footer.collapsed {
    left: 70px;
    width: calc(100% - 70px);
}
.footer p {
    margin: 0;
}

/* Logo fijo en esquina inferior derecha (GIGA Net Soft) */
.logo-giganet {
    position: fixed;
    right: 16px;
    bottom: 16px; /* ajustado dinámicamente por JS para quedar encima del footer */
    max-height: 64px;
    width: auto;
    z-index: 1002;
    opacity: 0.95;
    transition: bottom 0.2s, right 0.2s, transform 0.2s;
}

@media (max-width: 768px) {
    .logo-giganet { max-height: 48px; right: 8px; }
}