/* Variables Globales Corporativas y Generales */
:root {
    /* Colores Corporativos */
    --azul-oscuro-principal: #060f52; /* Fondo principal (sidebar, topbar) */
    --azul-acento-brillante: #38b6ff; /* Para elementos activos, hover, íconos importantes */
    --texto-blanco: #ffffff;          /* Texto principal sobre fondos oscuros */
    --texto-blanco-secundario: rgba(255, 255, 255, 0.75); /* Para texto menos prominente sobre fondos oscuros */

    /* Colores Generales (puedes ajustarlos si prefieres usar tonos de azul o gris corporativos) */
    --fondo-claro-contenido: #f0f2f5; /* Un gris azulado muy claro para el fondo del contenido principal */
    --gris-borde: #dce1e7;          /* Bordes sutiles */
    --gris-texto-contenido: #333;   /* Texto principal en áreas de contenido claro */

    /* Dimensiones Sidebar */
    --sidebar-width: 260px;
    --sidebar-width-collapsed: 80px; /* Ajustado para mejor visibilidad de íconos */

    /* Transiciones */
    --transition-speed: 0.3s;
}

body {
    display: flex;
    margin: 0;
    min-height: 100vh;
background: linear-gradient(to bottom right, #ffffff, #cdeeff, #38b6ff);
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 0.9rem; /* Un poco más pequeño para un look más compacto */
    color: var(--gris-texto-contenido);
}

/* --- Sidebar --- */
.sidebar {
    width: var(--sidebar-width);
    background-color: var(--azul-oscuro-principal);
    color: var(--texto-blanco);
    padding: 1rem;
    transition: width var(--transition-speed) ease, transform var(--transition-speed) ease;
    overflow-x: hidden;
    white-space: nowrap;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1040; /* Asegurar que esté sobre el overlay si se usa uno, y sobre el topbar en algunos casos */
    display: flex;
    flex-direction: column;
    box-shadow: 2px 0 10px rgba(0,0,0,0.1); /* Sombra sutil */
}

.sidebar.collapsed {
    width: var(--sidebar-width-collapsed);
}

.sidebar .logo {
    flex-shrink: 0;
    margin-bottom: 1.5rem; /* Más espacio debajo del logo */
}

.sidebar .logo img {
    max-width: 160px; /* Ajusta según tu logo */
    height: auto;
  /*  transition: all var(--transition-speed) ease; */
}

.logo-expandido {
    display: block;
}
.logo-colapsado {
    display: none;
    width: 40px; /* Tamaño del favicon/logo pequeño */
    filter: drop-shadow(0 0 3px var(--azul-acento-brillante)); /* Ligero brillo al logo colapsado */
}

.sidebar.collapsed .logo-expandido {
    display: none;
}
.sidebar.collapsed .logo-colapsado {
    display: block;
    margin: 0 auto;
}
.sidebar.collapsed .logo a {
    justify-content: center;
}

.sidebar-toggler { /* Este es el toggler DENTRO del sidebar para desktop */
    background: transparent;
    border: 1px solid var(--texto-blanco-secundario);
    color: var(--texto-blanco-secundario);
    font-size: 1.2rem;
    line-height: 1;
    padding: 0.3rem 0.6rem;
    border-radius: 0.25rem;
    transition: all var(--transition-speed) ease;
}
.sidebar-toggler:hover {
    color: var(--azul-acento-brillante);
    border-color: var(--azul-acento-brillante);
    background-color: rgba(56, 182, 255, 0.1);
}
.sidebar.collapsed .sidebar-toggler i { /* Cambiar icono cuando está colapsado */
    transform: rotate(180deg);
}


.sidebar .accordion-flush {
    overflow-y: auto;
    flex-grow: 1;
    /* Scrollbar styling (opcional, pero mejora la estética) */
}
.sidebar .accordion-flush::-webkit-scrollbar {
    width: 6px;
}
.sidebar .accordion-flush::-webkit-scrollbar-thumb {
    background-color: rgba(56, 182, 255, 0.3); /* Azul acento con transparencia */
    border-radius: 3px;
}
.sidebar .accordion-flush::-webkit-scrollbar-thumb:hover {
    background-color: var(--azul-acento-brillante);
}


.sidebar .nav-link,
.sidebar .accordion-button {
    color: var(--texto-blanco-secundario) !important;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    padding: 0.75rem 0.85rem; /* Ajuste de padding */
    text-decoration: none;
    transition: background-color var(--transition-speed) ease, color var(--transition-speed) ease;
    border-radius: 0.3rem;
    margin-bottom: 0.3rem;
    font-weight: 500;
}

.sidebar .nav-link:hover,
.sidebar .accordion-button:not(.collapsed):hover, /* Hover en botón de acordeón expandido */
.sidebar .accordion-button.collapsed:hover, /* Hover en botón de acordeón colapsado */
.sidebar .nav-link.active, /* Link activo directo */
.sidebar .accordion-item .accordion-collapse.show .nav-link.active, /* Link activo dentro de acordeón abierto */
.sidebar .accordion-button:not(.collapsed) { /* Botón de acordeón expandido (activo) */
    color: var(--azul-acento-brillante) !important;
    background-color: rgba(172, 178, 241, 0.1); /* Fondo sutil con color de acento */
    font-weight: 600;
}
.sidebar .nav-link.active,
.sidebar .accordion-button:not(.collapsed) {
     color: var(--texto-blanco) !important; /* Texto más brillante para el activo */
     background-color: rgba(56, 182, 255, 0.15);
}


.sidebar .accordion-button {
    box-shadow: none !important;
}
.sidebar .accordion-button::after { /* Icono de flecha del acordeón */
    font-family: "bootstrap-icons" !important;
    content: "\F282";
    margin-left: auto;
    transition: transform var(--transition-speed) ease-in-out;
    font-size: 0.8rem;
    color: var(--texto-blanco-secundario);
}
.sidebar .accordion-button:not(.collapsed)::after {
    transform: rotate(-180deg);
    color: var(--azul-acento-brillante);
}
.sidebar .accordion-button:hover::after {
    color: var(--azul-acento-brillante);
}

.sidebar .nav-icon {
    width: 28px; /* Espacio para el icono */
    margin-right: 12px;
    font-size: 1.2rem; /* Iconos un poco más grandes */
    flex-shrink: 0;
    text-align: center;
    transition: color var(--transition-speed) ease;
}
.sidebar .nav-link:hover .nav-icon,
.sidebar .accordion-button:hover .nav-icon,
.sidebar .nav-link.active .nav-icon,
.sidebar .accordion-button:not(.collapsed) .nav-icon {
    color: var(--azul-acento-brillante);
}


.sidebar.collapsed .text-label,
.sidebar.collapsed .accordion-button::after {
    display: none;
}
.sidebar.collapsed .nav-link,
.sidebar.collapsed .accordion-button {
    justify-content: center; /* Centrar icono cuando está colapsado */
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}
.sidebar.collapsed .nav-icon {
    margin-right: 0; /* Sin margen para el icono cuando está colapsado */
}


/* --- Content --- */
.content {
    flex-grow: 1;
    margin-left: var(--sidebar-width);
    transition: margin-left var(--transition-speed) ease;
    display: flex;
    flex-direction: column;
    min-width: 0; /* Evita que el contenido se desborde en flexbox */
    background-color: var(--fondo-claro-contenido); /* Asegurar fondo para el contenido */
}

.sidebar.collapsed ~ .content {
    margin-left: var(--sidebar-width-collapsed);
}

/* main.style.css */

/* ... (otros estilos) ... */

/* --- Topbar --- */
.topbar {
    background-color: var(--azul-oscuro-principal);
    color: var(--texto-blanco);
    padding: 0.75rem 1rem; /* Ajuste de padding */
    z-index: 1035; 
    box-shadow: 0 2px 5px rgba(0,0,0,0.15);
    flex-shrink: 0;
    display: flex; /* Asegurar que el topbar sea flex */
    align-items: center; /* Centrar verticalmente los elementos */
}

.topbar .container-fluid {
    display: flex;
    justify-content: space-between; /* Esto es clave */
    align-items: center;
    width: 100%; /* Ocupar todo el ancho */
    padding-left: 0.5rem;  /* Reducir padding para más espacio */
    padding-right: 0.5rem; /* Reducir padding para más espacio */
}

/* Botón de hamburguesa en móviles (el que está en el topbar) */
.topbar .sidebar-toggler#openSidebarMobile { /* Más específico */
    color: var(--texto-blanco);
    font-size: 1.5rem;
    border: none;
    background: transparent;
    padding: 0 0.5rem;
    margin-right: auto; /* Mantiene el botón a la izquierda */
}
.topbar .sidebar-toggler#openSidebarMobile:hover {
    color: var(--azul-acento-brillante);
}

.topbar .navbar-nav {
    /* ms-auto ya los empuja a la derecha en pantallas grandes */
    /* En móviles, queremos que estén agrupados pero sin ser empujados excesivamente */
    flex-direction: row; /* Asegurar que los items del nav estén en fila */
    margin-left: 0; /* Quitar el ms-auto específicamente en el ul para controlarlo con el space-between del container */
}

.topbar .navbar-nav .nav-item {
    margin-left: 0.5rem; /* Pequeño espacio entre los iconos de notificación y usuario */
}
.topbar .navbar-nav .nav-item:first-child {
    margin-left: 0;
}


/* Ajustes para los dropdowns para que no sean demasiado anchos en móviles */
.topbar .dropdown-menu {
    font-size: 0.9rem;
    border-color: var(--gris-borde);
    box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.15);
    margin-top: 0.5rem !important; 
    min-width: 280px; /* Un ancho mínimo para los dropdowns */
    max-width: calc(100vw - 40px); /* Evitar que sea más ancho que la pantalla */
}

/* ... (resto de tus estilos de topbar y responsivos) ... */

/* En la sección @media (max-width: 767.98px) podrías necesitar algo como: */
@media (max-width: 767.98px) {
    /* ... otros estilos responsivos ... */

    .topbar .container-fluid {
        padding-left: 0.75rem; /* Puedes ajustar estos paddings según veas */
        padding-right: 0.75rem;
    }
    
  
}

/* --- Responsive --- */
@media (max-width: 767.98px) {
    .sidebar {
        transform: translateX(calc(-1 * var(--sidebar-width))); /* Oculto por defecto */
        box-shadow: 3px 0 10px rgba(0,0,0,0.2); /* Sombra más pronunciada cuando está abierto en móvil */
    }
    .sidebar.show {
        transform: translateX(0); /* Mostrar */
        width: var(--sidebar-width); /* Ancho completo al mostrarse */
    }

    /* En móvil, si .show está presente, ignoramos .collapsed para el visual */
    .sidebar.show.collapsed {
        width: var(--sidebar-width);
    }
    .sidebar.show.collapsed .logo-expandido {
        display: block;
    }
    .sidebar.show.collapsed .logo-colapsado {
        display: none;
    }
     .sidebar.show.collapsed .text-label {
        display: inline;
    }
    .sidebar.show.collapsed .accordion-button::after {
        display: inline-block;
    }
    .sidebar.show .sidebar-toggler { /* El toggler interno del sidebar */
        display: block !important; /* Siempre visible cuando el sidebar móvil está abierto */
    }

    .content {
        margin-left: 0 !important; /* El contenido ocupa todo el ancho */
        transition: none; /* No se necesita transición de margen en móvil */
    }

    /* El toggler del sidebar para desktop se oculta en móvil */
    .sidebar .logo .sidebar-toggler#toggleSidebar {
        display: none;
    }
    /* El toggler del topbar para móvil (openSidebarMobile) es manejado por d-md-none */
}

/* Card Dashboard */

.card {
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
}


.card-dashboard {
    border-left: 4px solid var(--azul-acento-brillante);
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}
.card-dashboard:hover {
    transform: translateY(-3px);
    box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.1);
}
.card-dashboard h2 {
    font-size: 2rem;
    margin-bottom: 0;
    font-weight: 600;
    color: var(--azul-oscuro-principal);
}
.card-dashboard p {
    margin-top: 0.25rem;
    font-size: 0.9rem;
    color: #555;
}
.card-dashboard .bi { /* Iconos dentro de las cards del dashboard */
    font-size: 2.5rem;
    color: var(--azul-acento-brillante);
    opacity: 0.7;
}

/* Modal Headers con colores corporativos */
.modal-header.bg-primary,
.modal-header.bg-success,
.modal-header.bg-info,
.modal-header.bg-dark {
    background-color: var(--azul-oscuro-principal) !important; /* Usar el fondo corporativo */
    color: var(--texto-blanco);
}
.modal-header .btn-close-white { /* Asegurar que el botón de cerrar sea visible */
    filter: invert(1) grayscale(100%) brightness(200%);
}
.modal-header.bg-success { /* Si quieres diferenciar success, puedes usar un tono de azul más claro o el acento */
    background-color: var(--azul-acento-brillante) !important;
    color: var(--azul-oscuro-principal); /* Texto oscuro para contraste con azul brillante */
}
.modal-header.bg-success .btn-close { /* Botón de cerrar para fondo de acento */
     filter: none; /* Resetear filtro si es necesario, o ajustar a oscuro */
     opacity: 0.7;
}
.modal-header.bg-success .btn-close:hover {
    opacity: 1;
}


/* DataTables */
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
    padding: 0.35rem 0.6rem; /* Ajuste de padding */
    border-radius: 0.25rem;
    border: 1px solid var(--gris-borde);
    background-color: var(--blanco); /* Fondo blanco para los inputs */
}
.dataTables_wrapper .dataTables_filter input:focus,
.dataTables_wrapper .dataTables_length select:focus {
    border-color: var(--azul-acento-brillante);
    box-shadow: 0 0 0 0.2rem rgba(56, 182, 255, 0.25);
}

.dt-buttons .btn {
    font-size: 0.85rem;
    padding: 0.3rem 0.75rem;
    transition: all 0.2s ease;
}
/* Colores corporativos para botones de DataTables (ejemplos) */
.dt-buttons .buttons-copy { background-color: #6c757d; border-color: #6c757d; color: var(--texto-blanco); }
.dt-buttons .buttons-copy:hover { background-color: #5a6268; border-color: #545b62; }

.dt-buttons .buttons-excel { background-color: #198754; border-color: #198754; color: var(--texto-blanco);}
.dt-buttons .buttons-excel:hover { background-color: #157347; border-color: #146c43; }

.dt-buttons .buttons-csv { background-color: var(--azul-acento-brillante); border-color: var(--azul-acento-brillante); color: var(--azul-oscuro-principal); }
.dt-buttons .buttons-csv:hover { background-color: #2aa3e8; border-color: #2088c9; color: var(--azul-oscuro-principal); }

.dt-buttons .buttons-pdf { background-color: #dc3545; border-color: #dc3545; color: var(--texto-blanco);}
.dt-buttons .buttons-pdf:hover { background-color: #bb2d3b; border-color: #b02a37; }

.dt-buttons .buttons-print { background-color: var(--azul-oscuro-principal); border-color: var(--azul-oscuro-principal); color: var(--texto-blanco); }
.dt-buttons .buttons-print:hover { background-color: #0e103a; border-color: #0c0e33; }

.dt-buttons .btn i.bi { color: inherit; margin-right: 0.3rem; } /* Íconos heredan color del botón */
.dt-buttons .buttons-csv i.bi { color: var(--azul-oscuro-principal); }


/* SweetAlert2 */
.swal2-popup {
    font-size: 0.95rem;
    border-radius: 0.5rem; /* Bordes más redondeados */
}
.swal2-confirm, .swal2-cancel, .swal2-deny {
    padding: 0.5rem 1.2rem !important;
    font-weight: 500 !important;
    border-radius: 0.3rem !important;
}
.swal2-confirm { background-color: var(--azul-acento-brillante) !important; }
.swal2-cancel { background-color: #6c757d !important; }
.swal2-title { color: var(--azul-oscuro-principal) !important; }


/* Estilos para Pestañas (Tabs) con colores corporativos */
.nav-tabs { /* Contenedor de las pestañas */
    border-bottom: 2px solid var(--azul-acento-brillante) !important;
    margin-bottom: 1.5rem;
}

.nav-tabs .nav-link {
    color: var(--azul-oscuro-principal) !important;
    background-color: transparent; /* Fondo transparente para inactivas */
    border: 1px solid transparent; /* Borde transparente inicialmente */
    border-bottom: none;
    padding: 0.75rem 1.25rem;
    margin-right: 2px;
    font-weight: 500;
    transition: all var(--transition-speed) ease-in-out;
    border-radius: 0.3rem 0.3rem 0 0;
}

.nav-tabs .nav-link:hover:not(.active) {
    color: var(--azul-acento-brillante) !important;
    background-color: rgba(56, 182, 255, 0.05); /* Ligero fondo azulado al pasar el mouse */
    border-color: rgba(56, 182, 255, 0.2) rgba(56, 182, 255, 0.2) transparent;
}

.nav-tabs .nav-link.active {
    color: var(--texto-blanco) !important;
    background-color: var(--azul-acento-brillante) !important;
    border-color: var(--azul-acento-brillante) var(--azul-acento-brillante) var(--azul-acento-brillante) !important;
    font-weight: 600; /* Ligeramente más grueso */
    box-shadow: none;
    position: relative;
}

.tab-content {
    background-color: var(--blanco);
    border: 1px solid var(--gris-borde);
    border-top: none;
    padding: 1.5rem;
    border-radius: 0 0 0.3rem 0.3rem;
    box-shadow: 0 0.125rem 0.25rem rgba(0,0,0,.05);
    clear: both;
}

/* =================================================================== */
/* ESTILOS GENERALES PARA BOTONES CORPORATIVOS             */
/* =================================================================== */

/* --- Estilo Base para Todos los Botones --- */
.btn {
    border-radius: 0.3rem;
    font-weight: 500;
    padding: 0.5rem 1rem;
    transition: all 0.2s ease-in-out;
    border: 1px solid transparent;
}

.btn i {
    margin-right: 0.4rem; /* Espacio entre el ícono y el texto */
}

/* --- Botón Primario (Acción Principal) --- */
.btn-primary {
    background-color: var(--azul-acento-brillante);
    border-color: var(--azul-acento-brillante);
    color: var(--azul-oscuro-principal); /* Texto oscuro para alto contraste */
    font-weight: 600;
}

.btn-primary:hover {
    background-color: #2fa5e6; /* Un tono ligeramente más oscuro del acento */
    border-color: #2fa5e6;
    color: var(--azul-oscuro-principal);
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

/* --- Botón Secundario (Cancelar, Volver) --- */
.btn-secondary {
    background-color: #6c757d;
    border-color: #6c757d;
    color: var(--texto-blanco);
}

.btn-secondary:hover {
    background-color: #5a6268;
    border-color: #545b62;
    color: var(--texto-blanco);
}

/* --- Botón Pequeño (Para Acciones en Tablas) --- */
.btn-sm {
    padding: 0.25rem 0.6rem;
    font-size: 0.8rem;
}

/* --- Estilos para Botones de Íconos (Ver, Editar, Eliminar) --- */
.btn.btn-info, .btn.btn-warning, .btn.btn-danger {
    color: #fff; /* Asegura que el ícono sea blanco */
}

.btn-info { background-color: #0dcaf0; border-color: #0dcaf0; }
.btn-warning { background-color: #ffc107; border-color: #ffc107; }
.btn-danger { background-color: #dc3545; border-color: #dc3545; }

.btn-info:hover, .btn-warning:hover, .btn-danger:hover {
    color: #fff;
    opacity: 0.9;
}

/* Ajuste para que los íconos solos en botones pequeños se vean bien */
.btn-sm i.fas, .btn-sm i.bi {
    margin-right: 0; /* Sin margen si el botón solo tiene un ícono */
}