:root {
    --sidebar-primary-width: 72px;
    --sidebar-secondary-width: 250px;
    --header-height: 56px;
    --header-bg: #f0f4f9;
    --header-font-color: #343a40;
}

body { background-color: #f8f9fa; overflow-x: hidden; font-family: 'Plus Jakarta Sans', sans-serif; }
.main-container { display: flex; }

.table {
    border-color: #dee2e6; /* Borde gris claro para la tabla */
}
.card {
    border: 1px solid rgba(0, 0, 0, 0.125); /* Borde estándar de Bootstrap */
    background-color: #fff; /* Fondo blanco para las tarjetas */
}
.card-header {
    background-color: #f8f9fa; /* Fondo ligeramente gris para cabeceras */
    border-bottom: 1px solid rgba(0, 0, 0, 0.125);
}

/* --- SIDEBAR PRIMARIO (Desktop) --- */
.sidebar-primary {
    width: var(--sidebar-primary-width); height: 100vh; position: fixed; top: 0; left: 0;
    background-color: #212529; z-index: 1031; transition: transform 0.3s ease; border-right: 1px solid #343a40;
}
.sidebar-logo {
    display: flex; justify-content: center; align-items: center;
    height: 70px; padding: 10px;
}
.sidebar-logo img { width: 50px; height: 50px; border-radius: 8px; }
.sidebar-primary .nav-menu { list-style: none; padding: 0; margin-top: 0; }
.sidebar-primary .nav-link, .sidebar-primary .nav-link:focus { display: flex; flex-direction: column; justify-content: center; align-items: center; height: 70px; padding: 0.5rem 0.25rem; color: #adb5bd; text-decoration: none; font-size: 0.65rem; background: none; border: none; width: 100%; }
.sidebar-primary .nav-link:hover, .sidebar-primary .nav-link.active { color: #fff; background-color: #343a40; }
.sidebar-primary .nav-link .bi { font-size: 1.5rem; margin-bottom: 4px; }

/* --- SIDEBAR SECUNDARIO (Desktop) --- */
.sidebar-secondary {
    width: var(--sidebar-secondary-width); height: 100vh; position: fixed; top: 0; left: var(--sidebar-primary-width);
    background-color: #343a40; z-index: 1030; transform: translateX(-100%); transition: transform 0.3s ease;
    color: #fff; border-right: 1px solid #495057;
}
.sidebar-secondary.visible { transform: translateX(0); }
.sidebar-secondary-header { display: flex; justify-content: space-between; align-items: center; padding: 0 1rem; height: var(--header-height); border-bottom: 1px solid #495057; }
.sidebar-secondary-content a {
    display: block; /* La clave para el ancho completo */
    padding: 0.85rem 1.5rem;
    color: #adb5bd;
    text-decoration: none;
    border-radius: 6px;
    margin: 2px 8px;
    transition: background-color 0.2s ease;
}
.sidebar-secondary-content a:hover {
    color: #fff;
    background-color: #495057;
}
/* Regla para el espacio del ícono en el menú secundario */
.sidebar-secondary-content a .bi {
    margin-right: 0.75rem;
}

/*
/**********************************************
/* ESTILOS PARA SUBMENÚ ACORDEÓN (SIDEBAR SECUNDARIO)
/**********************************************
*/

/* Estilo para el enlace principal que despliega el submenú */
.submenu-toggle {
    display: flex;
    align-items: center;
    padding: 0.85rem 1.5rem;
    color: #adb5bd;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.2s ease;
}
.submenu-toggle:hover {
    color: #fff;
    background-color: #495057;
}

.submenu-toggle .bi {
    margin-right: 0.75rem;
}

/* Estilo para el icono de la flecha del acordeón */
.submenu-toggle .toggle-icon {
    transition: transform 0.3s ease;
}

/* Rotación de la flecha cuando el acordeón está desplegado */
.submenu-toggle:not(.collapsed) .toggle-icon {
    transform: rotate(-180deg);
}

/* Contenedor y enlaces del submenú anidado */
.submenu-level-2 {
    font-size: 0.9rem;
    align-items: center;
    padding: 0.3rem;
}
.submenu-level-2 a {
    display: block;
    color: #adb5bd;
    text-decoration: none;
    border-radius: 6px;
    transition: background-color 0.2s ease;
}
.submenu-level-2 a:hover {
    color: #fff;
    background-color: #495057;
}

/* --- CONTENIDO PRINCIPAL --- */
.content-wrapper { margin-left: var(--sidebar-primary-width); width: calc(100% - var(--sidebar-primary-width)); transition: margin-left 0.3s ease, width 0.3s ease; }
.main-container.secondary-sidebar-visible .content-wrapper { margin-left: calc(var(--sidebar-primary-width) + var(--sidebar-secondary-width)); }
.header { height: var(--header-height); background-color: var(--header-bg); color: var(--header-font-color); border-bottom: 1px solid #dee2e6; display: flex; align-items: center; padding: 0 1rem; }
.header-content { display: flex; justify-content: space-between; align-items: center; width: 100%; }
.header-left, .header-right { display: flex; align-items: center; }
.header .btn, .header .btn:focus { color: var(--header-font-color); box-shadow: none; }
.header .nav-link { color: var(--header-font-color); }
.main-content { padding: 1.5rem; height: calc(100vh - var(--header-height)); overflow-y: auto; }

/* --- ESTADOS DE VISIBILIDAD --- */
.main-container.sidebar-hidden .sidebar-primary { transform: translateX(-100%); }
.main-container.sidebar-hidden .content-wrapper { margin-left: 0; width: 100%; }
.main-container.sidebar-hidden .sidebar-secondary { display: none; }

/* Lógica anti-pestañeo */
body.sidebar-hidden-initial .main-container .sidebar-primary { transform: translateX(-100%); }
body.sidebar-hidden-initial .main-container .content-wrapper { margin-left: 0; width: 100%; }

/* --- MENÚ MÓVIL (Off-canvas) --- */
.offcanvas { background-color: #212529; color: #fff; }
.mobile-nav { list-style: none; padding: 0; }
.mobile-nav li a { display: block; padding: 0.85rem 1rem; color: #adb5bd; text-decoration: none; font-size: 1.1rem; border-radius: 0.375rem; transition: background-color 0.2s, color 0.2s; }
.mobile-nav li a:hover, .mobile-nav li a:not(.collapsed) { background-color: #212529; color: #fff; }
.mobile-nav li a .bi { margin-right: 1rem; }
.mobile-submenu { list-style: none; padding: 0.5rem 0 0.5rem 2.5rem; background-color: #212529; border-radius: 0 0 0.375rem 0.375rem; }
.mobile-submenu a { font-size: 1rem; color: #adb5bd; text-decoration: none; padding: 0.5rem 0; display: block; }
.mobile-submenu a:hover { color: #fff; }
.logout-button { display: flex; align-items: center; width: 100%; padding: 1rem; border-radius: 0.375rem; color: #adb5bd; text-decoration: none; transition: background-color 0.2s, color 0.2s; }
.logout-button:hover { background-color: #d93025; color: #fff; }
.logout-button .bi { margin-right: 1rem; }

/*
/**********************************************
/* ESTILOS PARA TABLAS - MATERIAL DESIGN 3
/**********************************************
*/
.table-material {
    width: 100%;
    border-collapse: collapse; /* Elimina doble borde */
}

.table-material thead th {
    font-weight: 500;
    text-align: left;
    color: #6c757d; /* Color de texto secundario */
    padding: 10px;
    font-size: 0.875rem;
    border-bottom: 1px solid #dee2e6;
}

.table-material tbody tr {
    transition: background-color 0.2s ease;
}

.table-material tbody td {
    padding: 10px;
    font-size: 0.95rem;
    border-bottom: 1px solid #dee2e6; /* Líneas horizontales sutiles */
    vertical-align: middle;
}

/* Efecto al pasar el mouse por una fila */
.table-material tbody tr:hover {
    background-color: #f0f4f9; /* Mismo color del header para un look cohesivo */
}

/* Botones de acción dentro de la tabla */
.table-actions .btn-form {
    padding: 4px 12px;
    font-size: 0.75rem;
    margin-right: 8px;
}

.table-actions .btn-form {
    line-height: 1.5; /* Ayuda a centrar verticalmente el ícono cuando está solo */
}

.table-actions .btn-icon {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 36px;  /* Ancho y alto fijos para un círculo perfecto */
    height: 36px;
    border-radius: 50%; /* Esto crea el círculo */
    background-color: #f0f4f9; /* Fondo gris suave (el mismo del header) */
    color: #d93025; /* Color rojo para el ícono */
    border: none;
    cursor: pointer;
    transition: background-color 0.2s ease;
    margin: 0 4px; /* Pequeño margen entre botones */
}

.table-actions .btn-icon:hover {
    background-color: #e2e6ea; /* Un gris un poco más oscuro al pasar el mouse */
}

/* Hacemos el ícono un poco más pequeño para que encaje bien */
.table-actions .btn-icon .bi {
    font-size: 1rem;
}


/* 1. Hacer más largo el input de búsqueda */
.card-header .input-group {
    width: 300px; /* Puedes ajustar este valor si lo quieres más largo o corto */
}

/* 2. Igualar el color del borde del botón de búsqueda */
.card-header .input-group .btn {
    border-color: #ced4da; /* Color de borde estándar de Bootstrap para inputs */
}

/* 3. Reordenar el selector de "Filas por página" */
.rows-per-page-selector {
    display: flex;
    align-items: center;
}
.rows-per-page-selector .form-label-sm {
    margin-left: 0.5rem; /* Añade un pequeño espacio a la izquierda */
    margin-right: 0.5rem;
}
.rows-per-page-selector #limit-form {
    order: 1; /* Pone el formulario (con el select) en primera posición */
}

/*
/**********************************************
/* ESTILOS PARA PAGINADOR - MATERIAL DESIGN 3
/**********************************************
*/
.pagination-toolbar {
    display: flex;
    justify-content: space-between; /* Separa los elementos a los extremos */
    align-items: center;
    padding: 12px 0;
    color: #6c757d;
    font-size: 0.875rem;
}

.toolbar-left, .toolbar-right {
    display: flex;
    align-items: center;
}

.pagination-status {
    margin-right: 24px;
}

.pagination-nav a {
    display: inline-block;
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    border-radius: 50%; /* Botones de ícono circulares */
    color: #3e3e40;
    text-decoration: none;
    transition: background-color 0.2s ease;
}

/*
/**********************************************
/* ESTILOS PERSONALIZADOS PARA BADGES
/**********************************************
*/
.badge {
    padding: 0.5em 0.9em;
    border-radius: 50px; /* Misma regla que los botones para bordes redondos */
    font-size: 0.75rem;
    font-weight: 500; /* Hacemos el texto un poco más notorio */
    letter-spacing: 0.03em;
}

.pagination-nav a:hover {
    background-color: #e9ecef; /* Un fondo gris claro al pasar el mouse */
}

.pagination-nav a.disabled {
    color: #ced4da; /* Color gris claro para deshabilitado */
    pointer-events: none; /* Desactiva el clic */
}

/*
/**********************************************
/* ESTILOS PARA INDICADOR DE ESTADO (CÍRCULO CON ÍCONO)
/**********************************************
*/
.status-indicator {
    display: inline-flex; /* Usamos flex para centrar el ícono */
    justify-content: center;
    align-items: center;
    width: 36px;  /* Agrandamos el círculo para que quepa el ícono */
    height: 36px;
    border-radius: 50%; /* Lo mantiene circular */
    vertical-align: middle;
    background-color: #f0f4f9;
}

/* Estilos para el ícono que va DENTRO del círculo */
.status-indicator .bi {
    color: #fff; /* Ícono de color blanco */
    line-height: 1; /* Asegura un centrado vertical perfecto */
}

.status-indicator-success .bi {
    color: #198754; /* Ícono de color blanco */
    font-size: 1rem; /* Tamaño del ícono (ej: 14px) */
    line-height: 1; /* Asegura un centrado vertical perfecto */
}

.status-indicator-danger .bi {
    color: #d93025; /* Ícono de color blanco */
    font-size: 1rem; /* Tamaño del ícono (ej: 14px) */
    line-height: 1; /* Asegura un centrado vertical perfecto */
}

/* --- MEDIA QUERIES (Lógica Adaptativa) --- */
@media (max-width: 991.98px) { /* MÓVIL */
    .sidebar-primary, .sidebar-secondary { display: none !important; }
    .content-wrapper { width: 100%; margin-left: 0; }
    .user-name { display: none; }
    .header-logo { display: flex !important; margin-left: 0.5rem; }
    #sidebarToggleBtn { display: block !important; }
    .header-logo { margin-left: 0.5rem; }
}

@media (min-width: 992px) { /* DESKTOP */
    #sidebarToggleBtn { display: block !important; }
    .header-logo { display: none !important; }
    .user-name { display: inline-block; }
}

.mobile-submenu-level-2 {
    list-style: none;
    padding-left: 1.5rem; /* Indentación extra */
}