@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@500;700&family=Poppins:wght@300;400;500;600;700&display=swap');

html {
    font-size: clamp(11px, 0.7vw, 13px);
}

:root {
    /* MODIFICACIÓN REVERTIDA: Vuelve el color de acento principal a un azul vibrante (Original de la imagen) */
    --accent-blue: #3498db;
    --accent-blue-hover: #2980b9;

    /* Variable para el Título Oscuro en Modo Claro (Nuevo color más oscuro) */
    --title-dark-blue: #1a5276;
    --title-dark-blue-hover: #123d5a;

    /* Primary Colors */
    --primary-dark: #2c3e50;
    --primary-dark-light: #53789a;
    --primary-dark-hover: #1f2a38;
    --pill-bg: rgba(0, 153, 204, 0.1);

    /* Secondary & Background Colors */
    --background-main: #f0f2f5;
    --background-card: #ffffff;
    --text-dark: #34495e;
    --text-muted: #555959;
    --border-light: #e0e6eb;

    /* Action Colors */
    --success-color: #2ecc71;
    --success-light: #e8f9ed;
    --success-dark-hover: #27ae60;
    --danger-color: #e74c3c;
    --danger-light: #fdeded;
    --danger-dark-hover: #c0392b;
    --warning-color: #2ecc71;
    --warning-light: #fff8eb;
    --warning-dark-hover: #32dfad;
    --secondary-dark-hover: #6c757d;
    --info-color: #3498db;
    --info-dark-hover: #2980b9;

    /* Shadows */
    --shadow-light: rgba(44, 62, 80, 0.08);
    --shadow-medium: rgba(44, 62, 80, 0.15);
    --shadow-strong: rgba(44, 62, 80, 0.25);

    /* Gradients (Usan el azul vibrante original) */
    --gradient-primary: linear-gradient(135deg, var(--accent-blue), #1a7bb9);
    --gradient-card-border: linear-gradient(45deg, #a7c8ed, #c1e4f7);

    /* Menu & Dropdown */
    --menu-bg-gradient: linear-gradient(135deg, #2a415a, #1a2f47);
    --dropdown-item-hover-bg: var(--accent-blue);
    --dropdown-item-hover-text: #ffffff;

    /* Aquí están las nuevas variables */
    --button-bg: #fff;
    --hover-bg: #f8f9fa;

    /* VARIABLES PARA EL MODO OSCURO */
    --dm-bg-main: #121212;
    --dm-bg-card: #1f1f1f;
    --dm-text-dark: #f0f4f4;
    --dm-text-muted: #a0a0a0;
    --dm-border-light: #3a3a3a;
    --dm-shadow-light: rgba(0,0,0,0.15);
    --dm-shadow-medium: rgba(0,0,0,0.3);
    --dm-shadow-strong: rgba(0,0,0,0.5);
    --dm-navbar-bg: linear-gradient(135deg, #2a415a, #1a2f47);
    --hover-light: #f5f5f5;
    --text-dark-light: #555;
    /* MODIFICACIÓN: Color blanco para títulos en modo oscuro */
    --dm-accent-light: #eff3f3;
    --dm-background-main: #121212;
    --glow-color-light: #007bff;
    --glow-color-dark: #00bcd4;
    --glow-border-light: rgba(52, 152, 219, 0.3);
    --glow-border-dark: rgba(0, 188, 212, 0.8);
    --border-radius: 0.8rem;
}

.dark-mode {
    /* ... tus variables del modo oscuro existentes ... */
    --button-bg: #1e1e1e;
    --hover-bg: #2a2a2a;
    --pill-bg: rgba(0, 212, 255, 0.1);
}

/* --- Global Body Styles --- */
body {
    font-family: 'Poppins', sans-serif;
    background-color: var(--background-main);
    background-image: linear-gradient(135deg, rgba(255,255,255,0.05) 25%, transparent 25%, transparent 50%, rgba(255,255,255,0.05) 50%, rgba(255,255,255,0.05) 75%, transparent 75%, transparent);
    background-size: 40px 40px;
    color: var(--text-dark);
    margin: 0;
    padding: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
}

/* --- INICIO DE ESTILOS "PRO" PARA EL MENÚ --- */

/* Navbar Styles - Sleek, dark, and professional */
.navbar {
    background-image: var(--menu-bg-gradient);
    background-color: var(--primary-dark);
    box-shadow: 0 8px 25px rgba(0,0,0,0.4);
    padding: 1.2rem 2.5rem;
    transition: all 0.4s ease;
    z-index: 1030;
    border-bottom: 2px solid var(--accent-blue);
}

/* Estructura de la barra de navegación para alineación */
.navbar-collapse {
    display: flex;
    align-items: center;
    width: 100%;
}

/* Logo sin fondo blanco, se adapta al color de la navbar */
.navbar-brand {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 2rem;
    letter-spacing: 0.8px;
    transition: color 0.3s ease;
    display: flex;
    align-items: center;
    color: #ffffff;
    text-shadow: 0 2px 5px rgba(0,0,0,0.3);
    padding: 0;
    border-radius: 0;
    border: none;
    box-shadow: none;
    line-height: 1;
    margin-right: 8rem;
}

/* Asegúrate de que el texto del brand dentro del contenedor blanco no tenga un color oscuro */
.navbar-brand span {
    color: #ffffff;
    margin-left: 0.5rem;
    font-size: 1.5rem;
}

.navbar-logo {
    height: 4.5rem;
    width: auto;
    transition: transform 0.3s ease-in-out, filter 0.3s ease;
    filter: drop-shadow(0 3px 6px rgba(0,0,0,0.3));
}
.navbar-logo:hover {
    transform: scale(1.05);
    filter: drop-shadow(0 5px 10px var(--accent-blue));
}



/* El resto del código de la navbar permanece igual */

/* Estilos para los enlaces de navegación (TODOS LOS ITEMS PRINCIPALES, INCLUYENDO DROPDOWNS) */
.nav-link {
    color: rgba(255, 255, 255, 0.75) !important;
    font-weight: 500;
    padding: 0.8rem 1.5rem;
    transition: all 0.3s ease;
    border-radius: 8px;
    position: relative;
    overflow: hidden;
    text-shadow: 0 1px 2px rgba(0,0,0,0.2);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    white-space: nowrap;

    /* Estado por defecto: transparente y sin cuadro visible */
    background-color: transparent;
    border: 1px solid transparent;
    box-shadow: none;
}

.nav-link::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background-color: var(--accent-blue);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform 0.3s ease-out;
}

/* APLICACIÓN DEL HOVER DE "CUADRO" A TODOS LOS NAV-LINKS PRINCIPALES (INCLUYENDO DROPDOWNS) */
.nav-link:hover {
    color: #ffffff !important;
    background-color: rgba(255, 255, 255, 0.15);
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
    border-color: rgba(255, 255, 255, 0.1);
}

.nav-link:hover::before {
    transform: scaleX(1);
}

/* Estilo "activo" para nav-link (ITEMS PRINCIPALES) - SOLO LA LÍNEA AZUL, SIN CUADRO */
.nav-link.active {
    font-weight: 600;
    color: #ffffff !important;
    background-color: transparent;
    box-shadow: none;
    border: 1px solid transparent;
    transform: translateY(0);
    position: relative;
}

.nav-link.active::before {
    transform: scaleX(1);
    height: 4px;
}

/* REGLA ESPECIAL: Estilo permanente para el enlace "Inicio" (cuando tiene 'always-active-home') */
.nav-link.always-active-home::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background-color: var(--accent-blue);
    transform: scaleX(1);
    transform-origin: center;
}

/* PARA EL ENLACE 'INICIO' CON 'always-active-home': Sin fondo, sin sombra, sin borde permanente */
.nav-link.always-active-home {
    background-color: transparent !important;
    color: #ffffff !important;
    box-shadow: none !important;
    border-color: transparent !important;
    transform: translateY(0) !important;
}

/* PARA EL ENLACE 'INICIO' CON 'always-active-home': Mantener el efecto hover deseado */
.nav-link.always-active-home:hover {
    background-color: rgba(255, 255, 255, 0.15) !important;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2) !important;
    transform: translateY(-2px) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}


/* Asegura que el color de la flecha del dropdown sea visible y transicione */
.navbar-dark .navbar-nav .nav-link.dropdown-toggle::after {
    filter: brightness(2.5);
    vertical-align: middle;
    transition: transform 0.3s ease;
}

/* Centrar los ítems del menú principal y que ocupen más espacio */
.navbar-nav.me-auto {
    flex-grow: 1;
    display: flex;
    justify-content: center;
    flex-wrap: nowrap;
    padding: 0;
    margin: 0;
    gap: 2.5rem;
}

/* Ajustes para el grupo de usuario y cerrar sesión - Más a la derecha y más pequeños */
.navbar-nav.ms-auto {
    margin-left: auto;
    margin-right: -0.5rem !important;
    display: flex;
    align-items: center;
}

.navbar-nav.ms-auto .nav-item {
    margin-left: 1rem;
}

/* Estilo para el texto del usuario (sin borde, sin elevación al hover) - Letra un poco más pequeña */
.navbar-text {
    color: rgba(255, 255, 255, 0.95);
    margin-right: 1rem;
    font-weight: 500;
    font-size: 0.95rem;
    white-space: nowrap;
    display: flex;
    align-items: center;
    text-shadow: 0 1px 3px rgba(0,0,0,0.2);
    padding: 0.5rem 1rem;
    border-radius: 8px;
    border: 2px solid transparent;
    transition: all 0.3s ease;
    cursor: default;
}

.navbar-text:hover {
    background-color: rgba(255, 255, 255, 0.2);
    border-color: transparent;
    color: #ffffff;
    transform: translateY(0);
    box-shadow: none;
}

.navbar-text .admin-badge {
    /* Mantiene el color de acento original */
    background-color: var(--accent-blue);
    color: #ffffff;
    padding: 0.2em 0.5em;
    border-radius: 4px;
    font-size: 0.7em;
    font-weight: 600;
    margin-left: 0.4rem;
    vertical-align: middle;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

/* Botón cerrar sesión con el hover deseado - Letra un poco más pequeña */
.btn-cerrar-sesion {
    background-color: transparent;
    border: 2px solid rgba(255, 255, 255, 0.6);
    color: #ffffff;
    padding: 0.5rem 1rem;
    border-radius: 8px;
    transition: all 0.3s ease;
    box-shadow: none;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 0.3rem;
    font-weight: 600;
    font-size: 0.9rem;
    text-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

.btn-cerrar-sesion:hover {
    background-color: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.8);
    color: #ffffff;
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}


/* --- FIN DE ESTILOS "PRO" PARA EL MENÚ --- */

/* --- INICIO DE ESTILOS "PRO" PARA EL MODO OSCURO --- */

body.dark-mode {
    background-color: var(--dm-bg-main); /* Fondo base negro/oscuro */
    color: var(--dm-text-dark);

    /* ESTE ES EL NUEVO FONDO DE LÍNEAS GRISES DIAGONALES */
    background-image: repeating-linear-gradient(
        -45deg,
        rgba(255, 255, 255, 0.03),
        rgba(255, 255, 255, 0.03) 25px,
        transparent 25px,
        transparent 50px
    );
    background-size: auto; /* IMPORTANTE: Para que el repeating-linear-gradient funcione perfecto */
}

/* Contenedores y Cuadros */
body.dark-mode .container,
body.dark-mode .container.mt-5,
body.dark-mode .dashboard-card,
body.dark-mode .permisos-container,
body.dark-mode .search-add-section,
body.dark-mode .stock-filter-section,
body.dark-mode .modal-content,
body.dark-mode .modal-body-detail,
body.dark-mode .form-section,
body.dark-mode .table-section {
    background-color: var(--dm-bg-card);
    border-color: var(--dm-border-light);
    box-shadow: 0 10px 30px var(--dm-shadow-medium);
    color: var(--dm-text-dark);
}

/* Encabezados y Texto */
body.dark-mode h1,
body.dark-mode h2,
body.dark-mode h3,
body.dark-mode h4,
body.dark-mode h5,
body.dark-mode h6,
body.dark-mode .card-title,
body.dark-mode .permisos-title {
    /* MODIFICACIÓN: Usa la variable --dm-accent-light (blanco) para el modo oscuro */
    color: var(--dm-accent-light);
    text-shadow: none;
}

body.dark-mode .lead,
body.dark-mode .permisos-subtitle {
    color: var(--dm-text-muted);
}

/* Formularios */
body.dark-mode .form-label {
    color: var(--dm-text-dark);
}

body.dark-mode .form-control,
body.dark-mode .form-select,
body.dark-mode .month-year-display {
    background-color: var(--dm-bg-main);
    color: var(--dm-text-dark);
    border-color: var(--dm-border-light);
    box-shadow: inset 0 0 5px rgba(0,0,0,0.4);
}

body.dark-mode .form-control:focus,
body.dark-mode .form-select:focus {
    background-color: var(--dm-bg-card);
    /* Se mantiene el azul acento original para el glow de enfoque */
    box-shadow: 0 0 0 0.35rem rgba(52, 152, 219, 0.25);
}

body.dark-mode .form-select {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
}

/* Tablas */
body.dark-mode .table,
body.dark-mode .table-details {
    background-color: var(--dm-bg-card);
    border: 1px solid var(--dm-border-light);
    box-shadow: 0 8px 25px var(--dm-shadow-medium);
}

body.dark-mode .table thead th,
body.dark-mode .table-details thead th {
    background-color: var(--primary-dark);
    color: #ffffff;
    border-bottom-color: var(--dm-border-light);
}

body.dark-mode .table tbody tr td {
    background-color: var(--dm-bg-card);
    color: var(--dm-text-dark);
    border-bottom: 1px solid var(--dm-border-light);
}

/* También asegúrate de que las filas hover tengan un fondo visible */
body.dark-mode .table-hover tbody tr:hover {
    background-color: rgba(255, 255, 255, 0.05);
}

body.dark-mode .table-details {
    background-color: #2a2a2a;
}
body.dark-mode .table-details thead {
    background-color: #3a3a3a;
}

body.dark-mode .clickable-row:hover {
    background-color: #242424;
}

/* Estilos del Scrollbar */
body.dark-mode .table-responsive.custom-scroll {
    background-color: var(--dm-bg-card);
    border: 1px solid var(--dm-border-light);
}

body.dark-mode .table-responsive table thead {
    background-color: var(--primary-dark);
    box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.6);
}

body.dark-mode .table-responsive table th {
    border-bottom: 1px solid var(--dm-border-light);
}

body.dark-mode .custom-horizontal-scrollbar-container {
    background-color: var(--dm-border-light);
}

body.dark-mode .custom-horizontal-scrollbar-thumb {
    /* Mantiene el color de acento original */
    background-color: var(--accent-blue);
}

body.dark-mode .custom-horizontal-scrollbar-thumb:hover {
    background-color: var(--accent-blue-hover);
}

/* Botones */
body.dark-mode .btn-primary {
    /* Mantiene el color de acento original */
    background-color: var(--accent-blue);
    border-color: var(--accent-blue);
    color: #ffffff;
}

body.dark-mode .btn-primary:hover {
    background-color: var(--accent-blue-hover);
    border-color: var(--accent-blue-hover);
}

body.dark-mode .scroll-button {
    /* Mantiene el color de acento original */
    background-color: var(--accent-blue);
    color: var(--dm-text-dark);
    box-shadow: 0 4px 8px rgba(0,0,0,0.4);
}

body.dark-mode .scroll-button:hover {
    background-color: var(--accent-blue-hover);
    color: var(--dm-text-dark);
}

/* Componentes Específicos (Navegación, Modales, Permisos) */
body.dark-mode .navbar {
    background-image: var(--dm-navbar-bg);
    /* Mantiene el color de acento original */
    border-bottom: 2px solid var(--accent-blue);
    box-shadow: 0 8px 25px rgba(0,0,0,0.6);
}

body.dark-mode .modal-header {
    background-color: var(--primary-dark);
    border-bottom: 1px solid var(--primary-dark-light);
}

body.dark-mode .modal-body {
    color: var(--dm-text-dark);
}

body.dark-mode .modal-footer {
    background-color: var(--dm-bg-card);
    border-top: 1px solid var(--dm-border-light);
}

body.dark-mode .permisos-group {
    background-color: #2a2a2a;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    border: 1px solid #444444;
}

body.dark-mode .permisos-group:hover {
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.5);
}

body.dark-mode .toggle-checkbox-item {
    background-color: #242424;
    border: 1px solid transparent;
}

body.dark-mode .toggle-checkbox-item:hover {
    background-color: #2c2c2c;
    border-color: #555555;
}

body.dark-mode .toggle-checkbox-item .text {
    color: var(--dm-text-dark);
}

body.dark-mode .toggle-switch {
    background-color: #555555;
}

body.dark-mode .toggle-switch::after {
    background-color: var(--dm-text-dark);
    box-shadow: 0 1px 3px rgba(0,0,0,0.6);
}

body.dark-mode .toggle-checkbox-item input[type="checkbox"]:checked + .text + .toggle-switch {
    /* Mantiene el color de acento original */
    background-color: var(--accent-blue);
}

/* --- FIN DE ESTILOS PARA EL MODO OSCURO --- */

/* Main Container Styles */
.container.mt-5 {
    flex-grow: 1;
    padding: 3rem;
    background-color: var(--background-card);
    border-radius: 18px;
    box-shadow: 0 15px 40px var(--shadow-strong);
    margin-bottom: 3rem;
    animation: fadeInSlideUp 0.8s ease-out forwards;
    border: 1px solid var(--border-light);
    max-width: 105rem;
    margin-left: auto;
    margin-right: auto;
}

/* Heading Styles */
h1, h2, h3, h4, h5, h6 {
    font-family: 'Montserrat', sans-serif;
    /* MODIFICACIÓN: Usa la variable del título más oscuro en modo claro */
    color: var(--title-dark-blue);
    font-weight: 700;
    margin-bottom: 2rem;
    text-align: center;
    text-shadow: 1px 1px 3px var(--shadow-light);
}

.lead {
    color: var(--text-muted);
    font-size: 1.15rem;
    line-height: 1.7;
    text-align: center;
}

/* Form Styles */
.form-label {
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 0.6rem;
    font-size: 0.95rem;
}

.form-control, .form-select {
    border-radius: 12px;
    border: 1px solid var(--border-light);
    padding: 0.9rem 1.3rem;
    transition: all 0.4s ease;
    background-color: #fcfcfc;
    color: var(--text-dark);
    font-size: 1rem;
}

.form-control:focus, .form-select:focus {
    /* Mantiene el color de acento original */
    border-color: var(--accent-blue);
    box-shadow: 0 0 0 0.35rem rgba(52, 152, 219, 0.25);
    background-color: #ffffff;
    outline: none;
}

.form-select {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%2334495e' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
}

.form-control.is-filled,
.form-select.is-filled {
    border-color: var(--success-color);
    box-shadow: 0 0 0 0.25rem rgba(46, 204, 113, 0.25);
    background-color: #f8fdf9;
}

/* Button Styles */
.btn {
    border-radius: 12px;
    padding: 0.9rem 2rem;
    font-weight: 600;
    transition: all 0.3s ease;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-size: 1rem;
    border: none;
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255,255,255,0.1);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s ease-out;
    z-index: -1;
}

.btn:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 20px var(--shadow-medium);
}

.btn:hover::before {
    transform: scaleX(1);
}

.btn-primary {
    /* Usa el gradiente original de azul vibrante */
    background: var(--gradient-primary);
    color: #ffffff;
}

.btn-primary:hover {
    background: linear-gradient(135deg, var(--accent-blue-hover), #136da7);
    color: #ffffff;
}

.btn-secondary {
    background-color: var(--text-muted);
    color: #ffffff;
}

.btn-secondary:hover {
    color: #ffffff;
    background-color: var(--secondary-dark-hover);
}

.btn-success {
    background-color: var(--success-color);
    color: #ffffff;
}

.btn-success:hover {
    background-color: var(--success-dark-hover);
    color: #ffffff;
}

.btn-warning {
    background-color: var(--warning-color);
    color: #ffffff;
}

.btn-warning:hover {
    background-color: var(--warning-dark-hover);
    color: #ffffff;
}

.btn-danger {
    background-color: var(--danger-color);
    color: #ffffff;
}

.btn-danger:hover {
    background-color: var(--danger-dark-hover);
    color: #ffffff;
}

/* Table Styles */
.table {
    border-radius: 15px;
    overflow: hidden;
    border-collapse: separate;
    border-spacing: 0;
    margin-bottom: 2rem;
    box-shadow: 0 8px 25px var(--shadow-medium);
    background-color: var(--background-card);
}

.table thead th {
    background-color: var(--primary-dark);
    color: #ffffff;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    padding: 1.2rem 1.4rem;
    vertical-align: middle;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-size: 0.9rem;
    border-bottom: none;
}

.table thead th:first-child {
    border-top-left-radius: 15px;
}
.table thead th:last-child {
    border-top-right-radius: 15px;
}

.table tbody tr:last-child td:first-child {
    border-bottom-left-radius: 15px;
}
.table tbody tr:last-child td:last-child {
    border-bottom-right-radius: 15px;
}

.table tbody tr td {
    padding: 1rem 1.4rem;
    vertical-align: middle;
    color: var(--text-dark);
    border-bottom: 1px solid var(--border-light);
}

.table tbody tr:last-child td {
    border-bottom: none;
}

.table-hover tbody tr:hover {
    /* Usa el azul de acento original */
    background-color: rgba(52, 152, 219, 0.08);
    transform: scale(1.005);
    transition: all 0.2s ease-in-out;
}

/* Search and New Employee button section */
.search-add-section {
    background-color: var(--background-card);
    padding: 2rem;
    border-radius: 15px;
    box-shadow: 0 5px 15px var(--shadow-light);
    margin-bottom: 2.5rem;
    border: 1px solid var(--border-light);
}
.search-add-section .btn {
    padding: 0.7rem 1.5rem;
    font-size: 0.95rem;
}
.search-add-section .form-select,
.search-add-section .form-control {
    border-radius: 10px;
}

/* Stock Filter Section */
.stock-filter-section {
    background-color: var(--background-card);
    padding: 2.5rem;
    border-radius: 18px;
    box-shadow: 0 8px 25px var(--shadow-medium);
    margin-bottom: 2.5rem;
    border: 1px solid var(--border-light);
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.stock-filter-section h2 {
    font-size: 1.8rem;
    margin-bottom: 1.5rem;
    /* MODIFICACIÓN: Usa la variable del título más oscuro en modo claro */
    color: var(--title-dark-blue);
    text-align: center;
}

.filter-group-ubicacion {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 1.2rem;
}

.filter-group-ubicacion .form-group {
    flex-grow: 1;
    min-width: 14rem;
    margin-bottom: 0;
}

.month-year-display {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--background-main);
    border: 1px solid var(--border-light);
    border-radius: 12px;
    padding: 0.9rem 1.3rem;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-dark);
    white-space: nowrap;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.05);
}

.export-buttons-group {
    display: flex;
    gap: 0.8rem;
    margin-top: 1rem;
    justify-content: center;
}

.export-buttons-group .btn {
    padding: 0.7rem 1.2rem;
    font-size: 0.9rem;
    text-transform: none;
    letter-spacing: normal;
    font-weight: 500;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.export-buttons-group .btn-info {
    background-color: #007bff;
    color: #ffffff;
}
.export-buttons-group .btn-info:hover {
    background-color: #0056b3;
}

.export-buttons-group .btn-success {
    background-color: #28a745;
    color: #ffffff;
}
.export-buttons-group .btn-success:hover {
    background-color: #1e7e34;
}

.export-buttons-group .btn-secondary {
    background-color: #6c757d;
    color: #ffffff;
}
.export-buttons-group .btn-secondary:hover {
    background-color: #545b62;
}


/* Alert Message Styles */
.alert {
    border-radius: 12px;
    padding: 1.2rem 1.5rem;
    margin-top: 1.5rem;
    text-align: center;
    font-weight: 500;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    display: flex;
    align-items: center;
    justify-content: center;
}

.alert-danger {
    background-color: var(--danger-light);
    color: var(--danger-color);
    border-color: var(--danger-color);
}

.alert-success {
    background-color: var(--success-light);
    color: var(--success-color);
    border-color: var(--success-color);
}

.alert .btn-close {
    margin-left: 1rem;
    filter: none;
    opacity: 0.7;
    transition: opacity 0.2s ease;
}

.alert .btn-close:hover {
    opacity: 1;
}

/* Animations */
@keyframes fadeInSlideUp {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes highlightFade {
    0% { background-color: rgba(46, 204, 113, 0.2) !important; }
    20% { background-color: rgba(46, 204, 113, 0.2) !important; }
    100% { background-color: transparent !important; }
}

.container.mt-5, .dashboard-grid {
    animation: fadeInSlideUp 0.8s ease-out forwards;
}

.table tbody tr.animated-highlight-row {
    animation: highlightFade 10s forwards;
}

/* Custom Card Styles for Index Page (Dashboard Style) */
.dashboard-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(22rem, 1fr));
    gap: 1.8rem;
    padding: 2rem 0;
    justify-content: center;
}

.dashboard-card {
    max-width: 25rem;
    border: none;
    border-radius: 20px;
    box-shadow: 0 10px 30px var(--shadow-medium);
    transition: transform 0.4s ease-in-out, box-shadow 0.4s ease-in-out;
    background-color: var(--background-card);
    overflow: hidden;
    position: relative;
    padding: 3rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.dashboard-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 0.5rem;
    /* Usa el gradiente con el azul original */
    background: var(--gradient-primary);
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
}

.dashboard-card:hover {
    transform: translateY(-0.8rem);
    box-shadow: 0 20px 50px var(--shadow-strong);
}

.dashboard-card .card-icon {
    /* Mantiene el color de acento original para los íconos */
    color: var(--accent-blue);
    margin-bottom: 1.8rem;
    font-size: 4.5rem;
    text-shadow: 2px 2px 5px var(--shadow-light);
    transition: color 0.3s ease;
}

.dashboard-card:hover .card-icon {
    color: var(--primary-dark);
}

/* Specific icon colors for dashboard cards */
.dashboard-card.card-register .card-icon { color: var(--success-color); }
.dashboard-card.card-register:hover .card-icon { color: var(--success-dark-hover); }
.dashboard-card.card-list .card-icon { color: var(--info-color); }
.dashboard-card.card-list:hover .card-icon { color: var(--info-dark-hover); }
.dashboard-card.card-settings .card-icon { color: var(--warning-color); }
.dashboard-card.card-settings:hover .card-icon { color: var(--warning-dark-hover); }
.dashboard-card.card-list-users .card-icon { color: var(--accent-blue); }
.dashboard-card.card-list-users:hover .card-icon { color: var(--accent-blue-hover); }
.dashboard-card.card-hardware-types .card-icon { color: var(--primary-dark); }
.dashboard-card.card-hardware-types:hover .card-icon { color: var(--accent-blue); }
.dashboard-card.card-stock .card-icon { color: var(--danger-color); }
.dashboard-card.card-stock:hover .card-icon { color: var(--danger-dark-hover); }
.dashboard-card.card-history .card-icon { color: var(--success-color); }
.dashboard-card.card-history:hover .card-icon { color: var(--success-dark-hover); }
.dashboard-card.card-search-employee .card-icon { color: var(--info-color); }
.dashboard-card.card-search-employee:hover .card-icon { color: var(--info-dark-hover); }

.dashboard-card .card-title {
    /* MODIFICACIÓN: Usa la variable del título más oscuro en modo claro */
    color: var(--title-dark-blue);
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    margin-bottom: 1rem;
    font-size: 1.8rem;
    letter-spacing: 0.5px;
}

.dashboard-card .card-text {
    color: var(--text-muted);
    font-size: 1.05rem;
    line-height: 1.7;
    min-height: 4rem;
    margin-bottom: 2.5rem;
}

.dashboard-card .btn {
    width: fit-content;
    padding: 0.9rem 2.5rem;
    font-size: 1.05rem;
    box-shadow: 0 6px 15px var(--shadow-medium);
    text-transform: capitalize;
}

/* Specific button styles for dashboard cards */
.dashboard-card.card-register .btn-success,
.dashboard-card.card-settings .btn-success,
.dashboard-card.card-hardware-types .btn-success,
.dashboard-card.card-history .btn-success {
    background: linear-gradient(135deg, var(--success-color), var(--success-dark-hover));
}
.dashboard-card.card-register .btn-success:hover,
.dashboard-card.card-settings .btn-success:hover,
.dashboard-card.card-hardware-types .btn-success:hover,
.dashboard-card.card-history .btn-success:hover {
    background: linear-gradient(135deg, var(--success-dark-hover), #219d53);
}

.dashboard-card.card-list .btn-primary,
.dashboard-card.card-list-users .btn-primary,
.dashboard-card.card-stock .btn-primary,
.dashboard-card.card-search-employee .btn-primary {
    /* Usa el gradiente original de azul vibrante */
    background: var(--gradient-primary);
}
.dashboard-card.card-list .btn-primary:hover,
.dashboard-card.card-list-users .btn-primary:hover,
.dashboard-card.card-stock .btn-primary:hover,
.dashboard-card.card-search-employee .btn-primary:hover {
    background: linear-gradient(135deg, var(--accent-blue-hover), #136da7);
}

.dashboard-card .btn.stretched-link {
    position: relative;
    z-index: 1;
}

/* Modal Specific Styles */
.modal-header {
    background-color: var(--primary-dark);
    color: #ffffff;
    border-bottom: 1px solid var(--primary-dark-hover);
    padding: 1.5rem 2rem;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
}

.modal-header.bg-danger {
    background-color: var(--danger-color) !important;
    border-bottom: 1px solid var(--danger-dark-hover) !important;
}

.modal-title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 1.4rem;
}

.modal-content {
    border-radius: 15px;
    box-shadow: 0 15px 40px var(--shadow-strong);
    border: none;
    overflow: hidden;
}

.modal-body {
    color: var(--text-dark);
    font-size: 1.1rem;
    line-height: 1.6;
    padding: 2.5rem 3rem;
}

.modal-footer {
    border-top: 1px solid var(--border-light);
    padding: 1.5rem 2.5rem;
    background-color: var(--background-main);
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
}

.modal-footer .btn {
    box-shadow: none;
}

.btn-close {
    filter: invert(1);
    opacity: 0.8;
    transition: opacity 0.2s ease;
}
.btn-close:hover {
    opacity: 1;
}

/* Modal de Detalle del Cambio */
.modal-body-detail {
    background-color: var(--background-main);
    border-radius: 0;
    padding: 2.5rem;
    border-top: 1px solid var(--border-light);
    border-bottom: 1px solid var(--border-light);
}

#detalleCambioContenido {
    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;
    font-size: 0.95rem;
    line-height: 1.6;
    background-color: #f8f9fa;
    color: #212529;
    padding: 2rem;
    border-radius: 12px;
    overflow-x: auto;
    max-height: 50vh;
    overflow-y: auto;
    border: 1px solid var(--border-light);
    white-space: pre-wrap;
    word-wrap: break-word;
    box-shadow: inset 0 2px 5px rgba(0,0,0,0.05);
    transition: all 0.3s ease;
}

#detalleCambioContenido:hover {
    box-shadow: inset 0 2px 8px rgba(0,0,0,0.1);
}

.json-key {
    /* Mantiene el color de acento original */
    color: var(--accent-blue);
    font-weight: 600;
}
.json-string {
    color: var(--success-color);
}
.json-number, .json-boolean {
    color: var(--danger-color);
}
.json-null {
    color: var(--text-muted);
    font-style: italic;
}
.json-punctuation {
    color: var(--text-dark);
}

.color-box {
    width: 1.5rem;
    height: 1.5rem;
    border: 1px solid #ccc;
    display: inline-block;
    vertical-align: middle;
    margin-right: 0.5rem;
    border-radius: 4px;
}

.btn-action-lg {
    padding: 0.6rem 1rem;
    font-size: 0.9rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
}

.btn-action-lg i {
    margin-right: 0.4rem;
    font-size: 0.9rem;
}

/* Responsive adjustments */
@media (min-width: 1024px) {
    .dashboard-grid {
        grid-template-columns: repeat(auto-fit, minmax(22rem, 1fr));
    }
    .stock-filter-section {
        flex-direction: row;
        justify-content: space-between;
        align-items: flex-end;
        gap: 2rem;
    }
    .stock-filter-section h2 {
        display: none;
    }
    .filter-group-ubicacion {
        flex-grow: 1;
        justify-content: flex-start;
        gap: 1rem;
    }
    .month-year-display {
        flex-grow: 0;
        justify-content: flex-start;
        width: auto;
    }
    .export-buttons-group {
        flex-grow: 0;
        margin-top: 0;
        justify-content: flex-end;
    }
}

@media (max-width: 1023.98px) {
    .dashboard-grid {
        grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
    }
}

@media (min-width: 992px) { /* Solo aplica en pantallas grandes */
    .navbar-nav .nav-item.dropdown:hover .dropdown-menu {
        display: block;
        visibility: visible;
        opacity: 1;
        transform: translateY(0);
        pointer-events: auto;
    }
    .navbar-nav .nav-item.dropdown .dropdown-menu {
        display: block;
        visibility: hidden;
        opacity: 0;
        transform: translateY(0.6rem);
        transition: visibility 0.3s, opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
        pointer-events: none;
    }
    .navbar-nav .nav-item.dropdown:hover .nav-link.dropdown-toggle::after {
        transform: rotate(-180deg);
    }
}

.dropdown-menu {
    background-image: linear-gradient(to bottom right, var(--primary-dark-hover), #0f1a26);
    background-color: var(--primary-dark-hover);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    padding: 0.7rem 0;
    min-width: 13rem;
    overflow: hidden;
}

/* Estilos para dropdown-item - SÓLO DESLIZAMIENTO DE FONDO, SIN CUADRO EXTERNO */
.dropdown-item {
    color: rgba(255, 255, 255, 0.9);
    padding: 0.9rem 1.8rem;
    transition: background-color 0.3s ease, color 0.3s ease, transform 0.2s ease;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-weight: 500;
    position: relative;
    overflow: hidden;
    z-index: 1;

    /* Aseguramos que no tengan los estilos de cuadro del nav-link principal */
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    transform: none !important;
    border-radius: 0 !important;
}

.dropdown-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Mantiene el color de acento original */
    background: var(--dropdown-item-hover-bg);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    z-index: -1;
}

.dropdown-item:hover,
.dropdown-item:focus {
    color: var(--dropdown-item-hover-text);
    transform: translateX(0.3rem);
    text-shadow: 0 0 8px rgba(255,255,255,0.5);
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

.dropdown-item:hover::before {
    transform: scaleX(1);
}

/* Iconos dentro de dropdown-item */
.dropdown-item i {
    font-size: 1rem;
    opacity: 0.8;
    transition: opacity 0.3s ease;
}
.dropdown-item:hover i {
    opacity: 1;
}
@media (max-width: 767.98px) {
    .navbar {
        padding: 0.8rem 1rem;
    }
    .navbar-brand {
        font-size: 1.5rem;
    }
    .container.mt-5 {
        padding: 2rem;
        margin-top: 2rem !important;
        margin-bottom: 2rem;
    }
    h1, h2, h3 {
        font-size: 1.8rem;
        margin-bottom: 1.5rem;
    }
    .lead {
        font-size: 1rem;
    }
    .dashboard-grid {
        grid-template-columns: 1fr;
        gap: 1.2rem;
    }
    .dashboard-card {
        padding: 2rem;
        max-width: 100%;
    }
    .dashboard-card .card-icon {
        font-size: 3.5rem;
    }
    .dashboard-card .card-title {
        font-size: 1.5rem;
    }
    .dashboard-card .card-text {
        min-height: auto;
        margin-bottom: 1.5rem;
    }
    .table th, .table td {
        padding: 0.8rem 1rem;
        font-size: 0.9rem;
    }
    .btn {
        padding: 0.7rem 1.5rem;
        font-size: 0.9rem;
    }
    .btn-action-lg {
        padding: 0.5rem 0.8rem;
        font-size: 0.8rem;
    }
}

@media (max-width: 575.98px) {
    .stock-filter-section {
        padding: 1.5rem;
        gap: 1rem;
    }
    .filter-group-ubicacion {
        flex-direction: column;
        align-items: stretch;
        gap: 0.8rem;
    }
    .filter-group-ubicacion .form-group,
    .filter-group-ubicacion .btn {
        width: 100%;
    }
    .month-year-display {
        width: 100%;
        text-align: center;
        justify-content: center;
    }
    .export-buttons-group {
        flex-direction: column;
        align-items: stretch;
        gap: 0.6rem;
    }
    .export-buttons-group .btn {
        width: 100%;
    }
    .search-add-section .row {
        flex-direction: column;
        gap: 0.9rem;
    }
    .search-add-section .col-md-auto,
    .search-add-section .col-md-3,
    .search-add-section .col-md-5 {
        width: 100%;
    }
    .search-add-section .ms-auto {
        margin-left: 0 !important;
        margin-top: 0.9rem;
    }
    .table-responsive {
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .modal-body {
        padding: 1.5rem 1.5rem;
    }
    .modal-footer {
        flex-direction: column;
        gap: 0.6rem;
    }
    .modal-footer .btn {
        width: 100%;
    }
    .color-box {
        width: 1.5rem;
        height: 1.5rem;
        border: 1px solid #ccc;
        display: inline-block;
        vertical-align: middle;
        margin-right: 0.5rem;
        border-radius: 4px;
    }
}

/* Scrollbar Styles */
.table-responsive.custom-scroll::-webkit-scrollbar {
    width: 0;
    height: 0;
    background: transparent;
}
.table-responsive.custom-scroll {
    scrollbar-width: none;
    overflow-x: scroll;
    cursor: grab;
}
.table-responsive.custom-scroll.is-dragging {
    cursor: grabbing;
}
.table-responsive table thead {
    position: sticky;
    top: 0;
    z-index: 10;
    background-color: var(--primary-dark);
    box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.4);
}
.table-responsive table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}
.table-responsive table th {
    border-bottom: 1px solid var(--border-light);
}
.custom-horizontal-scrollbar-container {
    width: 100%;
    height: 15px;
    background-color: #f0f0f0;
    border-radius: 8px;
    margin-top: 15px;
    margin-bottom: 15px;
    position: relative;
    overflow: hidden;
    display: none;
}
.custom-horizontal-scrollbar-thumb {
    height: 100%;
    background-color: #007bff;
    border-radius: 8px;
    cursor: grab;
    position: absolute;
    top: 0;
    left: 0;
    transition: background-color 0.2s ease, transform 0.1s ease;
}
.custom-horizontal-scrollbar-thumb:hover {
    background-color: #0056b3;
}
.custom-horizontal-scrollbar-thumb.active-drag {
    cursor: grabbing;
    transform: scaleY(1.1);
}
.scroll-controls {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 1050;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.scroll-button {
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    font-size: 1.5rem;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    transition: background-color 0.3s ease, transform 0.2s ease;
}
.scroll-button:hover {
    background-color: #0056b3;
    transform: scale(1.05);
}
.scroll-button:active {
    transform: scale(0.95);
}
.scroll-button.hidden {
    display: none;
}
.table th, .table td {
    white-space: nowrap;
    padding: 0.5rem 0.75rem;
}

/* Historial de Compras and other sections */
.container {
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    margin-top: 30px;
    margin-bottom: 30px;
    max-width: 95%;
    width: 100%;
}

.form-section, .table-section {
    padding: 20px;
    border: 1px solid var(--border-light);
    border-radius: 5px;
    background-color: var(--background-card);
    margin-bottom: 30px;
}

h1, h2, h3 {
    /* MODIFICACIÓN: Usa la variable del título más oscuro en modo claro */
    color: var(--title-dark-blue);
    text-align: center;
    margin-bottom: 25px;
}
.form-label {
    font-weight: bold;
    color: var(--text-dark-light);
}

.table-details {
    margin-top: 10px;
    margin-bottom: 10px;
    background-color: var(--background-main);
}
.table-details th, .table-details td {
    padding: 8px;
    vertical-align: top;
    border-top: 1px solid var(--border-light);
}
.table-details thead {
    background-color: var(--background-main);
}
.clickable-row {
    cursor: pointer;
}
.clickable-row:hover {
    background-color: var(--hover-light);
}
.badge {
    font-size: 0.875em;
    padding: 0.4em 0.6em;
}
.table .btn-sm {
    padding: 0.6rem 1rem;
    font-size: 0.9em;
    line-height: 1.5;
    border-radius: 0.25rem;
}

/* Columna de la tabla de auditoría */
.table thead th:nth-child(1), .table tbody td:nth-child(1) { width: 8%; min-width: 6rem; }
.table thead th:nth-child(2), .table tbody td:nth-child(2) { width: 12%; min-width: 7.5rem; }
.table thead th:nth-child(3), .table tbody td:nth-child(3) { width: 10%; min-width: 6rem; }
.table thead th:nth-child(4), .table tbody td:nth-child(4) { width: 8%; min-width: 6rem; }
.table thead th:nth-child(5), .table tbody td:nth-child(5) { width: 15%; min-width: 8.5rem; }
.table thead th:nth-child(6), .table tbody td:nth-child(6) { width: 22%; min-width: 10rem; }
.table thead th:nth-child(7), .table tbody td:nth-child(7) { width: 25%; min-width: 11rem; }

.table th:nth-child(1), .table td:nth-child(1) { min-width: 7.5rem; }
.table th:nth-child(2), .table td:nth-child(2) { min-width: 11.25rem; }
.table th:nth-child(5), .table td:nth-child(5) { min-width: 10rem; }
.table th:nth-last-child(1), .table td:nth-last-child(1) {
    min-width: 15.6rem;
    text-align: center;
}
.table th:nth-child(3), .table td:nth-child(3),
.table th:nth-child(4), .table td:nth-child(4),
.table th:nth-child(6), .table td:nth-child(6),
.table th:nth-child(7), .table td:nth-child(7),
.table th:nth-child(8), .table td:nth-child(8),
.table th:nth-child(9), .table td:nth-child(9),
.table th:nth-child(10), .table td:nth-child(10),
.table th:nth-child(11), .table td:nth-child(11),
.table th:nth-child(12), .table td:nth-child(12),
.table th:nth-child(13), .table td:nth-child(13),
.table th:nth-child(14), .table td:nth-child(14),
.table th:nth-child(15), .table td:nth-child(15),
.table th:nth-child(16), .table td:nth-child(16),
.table th:nth-child(17), .table td:nth-child(17),
.table th:nth-child(18), .table td:nth-child(18),
.table th:nth-child(19), .table td:nth-child(19)
{
    min-width: 9.375rem;
}

/* --- Estilos para la sección de permisos tipo Switch --- */

/* Contenedor principal de los permisos */
.permisos-container {
    margin-top: 2rem;
    padding: 1.5rem;
    background-color: var(--background-card);
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    border: 1px solid var(--border-light);
}

.permisos-title {
    text-align: center;
    margin-bottom: 0.5rem;
    font-size: 1.4rem;
    font-weight: 700;
    /* MODIFICACIÓN: Usa la variable del título más oscuro en modo claro */
    color: var(--title-dark-blue);
}

.permisos-subtitle {
    text-align: center;
    color: var(--text-muted);
    margin-bottom: 1rem;
    font-size: 0.85rem;
}

/* La cuadrícula principal para los grupos de permisos */
.permisos-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    justify-content: center;
}

/* Estilo para cada grupo de permisos */
.permisos-group {
    background-color: var(--background-main);
    padding: 1rem;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    transition: all 0.2s ease;
    border: 1px solid var(--border-light);
}

.group-title {
    font-size: 1rem;
    font-weight: 600;
    /* Mantiene el color de acento original */
    color: var(--accent-blue);
    margin-bottom: 0.7rem;
    text-align: center;
    border-bottom: 1px solid var(--border-light);
    padding-bottom: 0.4rem;
}

/* Estilo para cada ítem de la lista (el nuevo toggle) */
.toggle-checkbox-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    margin-bottom: 0.5rem;
    padding: 0.6rem 0.8rem;
    border-radius: 6px;
    background-color: var(--background-card);
    border: 1px solid transparent;
    transition: all 0.2s ease-in-out;
}

.toggle-checkbox-item:hover {
    background-color: #f8f9fa;
    border-color: #d1d8e0;
}

/* Ocultar el checkbox nativo */
.toggle-checkbox-item input[type="checkbox"] {
    opacity: 0;
    position: absolute;
    width: 0;
    height: 0;
}

/* Estilo del texto del permiso */
.toggle-checkbox-item .text {
    font-weight: 500;
    color: var(--primary-dark);
    font-size: 0.85rem;
    transition: color 0.2s ease;
}

/* Estilo del switch (el círculo y el fondo) */
.toggle-switch {
    position: relative;
    display: inline-block;
    width: 38px;
    height: 20px;
    background-color: #ccc;
    border-radius: 20px;
    transition: background-color 0.2s;
}

/* El círculo del switch */
.toggle-switch::after {
    content: '';
    position: absolute;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background-color: white;
    top: 2px;
    left: 2px;
    transition: transform 0.2s, background-color 0.2s;
    box-shadow: 0 1px 3px rgba(0,0,0,0.4);
}

/* Estado cuando el checkbox está seleccionado */
.toggle-checkbox-item input[type="checkbox"]:checked + .text {
    /* Mantiene el color de acento original */
    color: var(--accent-blue);
}

.toggle-checkbox-item input[type="checkbox"]:checked + .text + .toggle-switch {
    /* Mantiene el color de acento original */
    background-color: var(--accent-blue);
}

.toggle-checkbox-item input[type="checkbox"]:checked + .text + .toggle-switch::after {
    transform: translateX(18px);
}
/* --- Estilos del Modo Oscuro para los Switches de Permisos --- */
body.dark-mode .permisos-container {
    background-color: var(--dm-bg-card);
    border-color: var(--dm-border-light);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
}

body.dark-mode .permisos-group {
    background-color: var(--dm-bg-card);
    border-color: var(--dm-border-light);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

body.dark-mode .group-title {
    /* MODIFICACIÓN: Usa la variable --dm-accent-light (blanco) para el modo oscuro */
    color: var(--dm-accent-light);
    border-bottom-color: var(--dm-border-light);
}

body.dark-mode .toggle-checkbox-item {
    background-color: var(--dm-bg-card);
    border-color: var(--dm-border-dark);
}

body.dark-mode .toggle-checkbox-item:hover {
    background-color: rgba(255, 255, 255, 0.05);
    /* Borde de hover con el blanco de acento */
    border-color: var(--dm-accent-light);
}

body.dark-mode .toggle-checkbox-item .text {
    color: var(--dm-text-dark);
}

/* El fondo del switch cuando está APAGADO en modo oscuro */
body.dark-mode .toggle-switch {
    background-color: var(--dm-border-dark);
}

/* El círculo del switch cuando está APAGADO en modo oscuro */
body.dark-mode .toggle-switch::after {
    background-color: var(--dm-bg-card);
    box-shadow: 0 1px 3px rgba(0,0,0,0.6);
}

/* El fondo del switch cuando está ENCENDIDO en modo oscuro */
body.dark-mode .toggle-checkbox-item input[type="checkbox"]:checked + .text + .toggle-switch {
    /* Mantiene el color de acento original */
    background-color: var(--accent-blue);
}

/* El círculo del switch cuando está ENCENDIDO en modo oscuro */
body.dark-mode .toggle-checkbox-item input[type="checkbox"]:checked + .text + .toggle-switch::after {
    background-color: #fff;
    transform: translateX(18px);
}

/* --- Estilo Específico para Formularios y Tarjetas Secundarias --- */
.form-card {
    background-color: var(--background-card);
    border: 1px solid var(--border-light);
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}

/* Modo oscuro para el nuevo estilo */
body.dark-mode .form-card {
    background-color: var(--dm-bg-card);
    border-color: var(--dm-border-dark);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
}

/* --- Estilos para la página Buscador de Empleados-Inventario --- */

.container {
    max-width: 1500px;
}
.main-card {
    border-radius: 1rem;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    background-color: #ffffff;
    padding: 20px;
}
.main-card .card-body {
    padding: 0;
}
h1 {
    /* MODIFICACIÓN: Usa la variable del título más oscuro en modo claro */
    color: var(--title-dark-blue);
    font-weight: 700;
}
.lead {
    color: #7f8c8d;
}

/* Contenedor principal de los dos cuadros */
.name-input-display-container {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-bottom: 25px;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

/* Estilo general para el cuadro de visualización (display-box) */
.display-box {
    border: 1px solid #c0d3eb;
    border-radius: 0.8rem;
    padding: 12px;
    transition: all 0.3s ease-in-out;
    background-color: #e6f2ff;
    box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.03);
    order: 2;
    min-height: 80px;
    max-height: 140px;
    overflow-y: auto;
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    gap: 8px;
    border: 1px dashed #a8c1d9;
}

/* Estilo para el campo de entrada #nameInput */
#nameInput {
    width: 100%;
    padding: 16px 18px;
    font-size: 1em;
    color: #34495e;
    border: 1px solid #c0d3eb;
    border-radius: 0.8rem;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
    background: linear-gradient(145deg, #fefefe, #f5f8fc);
    outline: none;
    transition: all 0.3s ease-in-out;
}

#nameInput:focus {
    /* Se mantiene el color de acento original */
    border-color: #6366f1;
    box-shadow: 0 0 0 0.25rem rgba(99, 102, 241, 0.25), 0 8px 20px rgba(0, 0, 0, 0.15);
}

#nameInput::placeholder {
    color: #92a4b8;
    font-style: italic;
}

.form-label {
    color: #2c3e50;
    font-weight: 600;
    margin-bottom: 8px;
    display: block;
}

.name-input-container .form-text {
    margin-top: 10px;
    font-size: 0.85em;
    color: var(--text-muted) !important;
    opacity: 0.8;
}

.display-box p {
    font-style: italic;
    color: #8899aa;
    font-size: 1em;
    width: 100%;
    text-align: center;
    margin-bottom: 0;
    padding: 5px 0;
}
.display-box .form-text {
    margin-top: 10px;
    font-size: 0.9em;
    color: var(--text-muted) !important;
    opacity: 0.8;
}

/* Estilo de los tags individuales */
.tag {
    display: inline-flex;
    align-items: center;
    background-color: #7ea3e0;
    color: #ffffff;
    padding: 8px 15px;
    border-radius: 0.5rem;
    font-size: 0.95em;
    font-weight: 600;
    white-space: nowrap;
    box-shadow: 0 2px 7px rgba(0, 0, 0, 0.12);
    transition: all 0.2s ease-in-out;
    cursor: default;
}
.tag:hover {
    background-color: #6a92d4;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}
.tag .remove-tag {
    margin-left: 10px;
    cursor: pointer;
    color: rgba(255, 255, 255, 0.8);
    font-weight: bold;
    font-size: 1.1em;
    transition: color 0.2s, transform 0.2s;
}
.tag .remove-tag:hover {
    color: #ff6b6b;
    transform: scale(1.3);
}

/* --- ESTILOS PARA LA TABLA DE RESULTADOS DE BÚSQUEDA --- */
.table-responsive {
    margin-top: 2rem;
    overflow: hidden;
    margin-left: auto;
    margin-right: auto;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
    border-radius: 0.75rem;
    box-sizing: border-box;
    transition: max-width 0.5s ease-in-out, min-width 0.5s ease-in-out,
    height 0.5s ease-in-out, padding 0.5s ease-in-out,
    opacity 0.5s ease-in-out, box-shadow 0.5s ease-in-out;
}

.table-responsive-collapsed {
    max-width: 100px !important;
    min-width: 100px !important;
    height: 0 !important;
    padding: 0 !important;
    opacity: 0 !important;
    pointer-events: none !important;
    box-shadow: none !important;
    border: none !important;
}

.table-responsive-expanded {
    max-width: 1400px;
    min-width: 1000px;
    height: auto;
    padding: 1rem;
    opacity: 1;
    pointer-events: auto;
    max-height: 500px;
    overflow-y: auto;
}

.table {
    width: 100%;
    margin-bottom: 0;
    border-collapse: separate;
    border-spacing: 0;
}

.table thead th {
    background-color: var(--primary-dark);
    color: #ecf0f1;
    text-align: center;
    padding: 15px 10px;
    font-weight: 600;
    font-size: 0.95em;
    border-bottom: 2px solid var(--primary-dark-light);
    white-space: nowrap;
}

.table thead th:first-child {
    border-top-left-radius: 0.75rem;
}
.table thead th:last-child {
    border-top-right-radius: 0.75rem;
}

.table tbody td {
    vertical-align: middle;
    padding: 12px 10px;
    font-size: 0.9em;
    color: var(--text-dark);
    border-top: 1px solid var(--border-light);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}


.table-striped tbody tr:nth-of-type(odd) {
    background-color: rgba(220, 220, 220, 0.1);
}

.table-hover tbody tr:hover {
    background-color: rgba(46, 204, 113, 0.1);
    cursor: pointer;
}

.table-bordered {
    border: 1px solid var(--border-light);
}
.table-bordered th,
.table-bordered td {
    border: 1px solid var(--border-light);
}

/* --- Estilos para los botones de búsqueda y exportación --- */
.btn-custom-lg,
.btn-export {
    transition: all 0.2s ease-in-out;
}

.btn-custom-lg {
    padding: 1rem 2.5rem;
    font-size: 1.15rem;
    line-height: 1.5;
    border-radius: 0.5rem;
    font-weight: bold;
    min-width: 220px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}

.btn-custom-lg:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
}

.btn-export {
    padding: 0.75rem 1.5rem;
    font-size: 1.05rem;
    line-height: 1.5;
    border-radius: 0.4rem;
    font-weight: bold;
    min-width: 120px;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.1);
}

.btn-export:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2);
}

.alert-dismissible .btn-close {
    padding: 0.75rem 1rem;
}


/* --- ESTILOS DEL MODO OSCURO PARA EL BUSCADOR DE EMPLEADOS --- */
body.dark-mode h1,
body.dark-mode .lead,
body.dark-mode .form-label,
body.dark-mode .display-box .form-text,
body.dark-mode .display-box p {
    color: var(--dm-text-dark) !important;
}

body.dark-mode .main-card {
    background-color: var(--dm-bg-card);
    border-color: var(--dm-border-dark);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
}

body.dark-mode #nameInput {
    background: var(--dm-bg-card);
    color: var(--dm-text-dark);
    border-color: var(--dm-border-dark);
    box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.15);
}

body.dark-mode #nameInput:focus {
    /* Mantiene el color de acento original */
    border-color: var(--accent-blue);
    box-shadow: 0 0 0 0.25rem rgba(52, 152, 219, 0.25), 0 8px 20px rgba(0, 0, 0, 0.2);
}

body.dark-mode #nameInput::placeholder {
    color: var(--dm-text-muted);
}

body.dark-mode .display-box {
    background-color: var(--dm-bg-card);
    border: 1px dashed var(--dm-border-dark);
    box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.15);
}

body.dark-mode .tag {
    /* Mantiene el color de acento original */
    background-color: var(--accent-blue);
    box-shadow: 0 2px 7px rgba(0, 0, 0, 0.2);
}

body.dark-mode .tag:hover {
    background-color: var(--accent-blue-hover);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

body.dark-mode .tag .remove-tag {
    color: rgba(255, 255, 255, 0.7);
}


body.dark-mode .table tbody td {
    color: var(--dm-text-dark);
    border-color: var(--dm-border-dark);
}

body.dark-mode .table-striped tbody tr:nth-of-type(odd) {
    background-color: rgba(255, 255, 255, 0.05);
}

body.dark-mode .table-hover tbody tr:hover {
    background-color: rgba(46, 204, 113, 0.15);
}

body.dark-mode .btn-custom-lg {
    /* Mantiene el color de acento original */
    background-color: var(--accent-blue);
    border-color: var(--accent-blue);
    color: #fff;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
}
/* --- Estilos para la página Editar Hardware en modo oscuro --- */

body.dark-mode .card {
    background-color: var(--dm-bg-card);
    border: 1px solid var(--dm-border-dark);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
}

body.dark-mode .form-label,
body.dark-mode .form-check-label {
    color: var(--dm-text-dark);
}

body.dark-mode .form-control,
body.dark-mode .form-select,
body.dark-mode .form-check-input {
    background-color: var(--dm-bg-card);
    color: var(--dm-text-dark);
    border-color: var(--dm-border-dark);
}

body.dark-mode .form-control:focus,
body.dark-mode .form-select:focus {
    background-color: var(--dm-bg-card);
    color: var(--dm-text-dark);
    /* Mantiene el color de acento original */
    border-color: var(--accent-blue);
    box-shadow: 0 0 0 0.25rem rgba(52, 152, 219, 0.25);
}

body.dark-mode .form-control::placeholder {
    color: var(--dm-text-muted);
}

body.dark-mode .alert-danger {
    background-color: #5d1c24;
    color: #f8d7da;
    border-color: #7b2730;
}

/* Estilos de botones para modo oscuro */
body.dark-mode .btn-primary {
    /* Mantiene el color de acento original */
    background-color: var(--accent-blue);
    border-color: var(--accent-blue);
    color: #fff;
}

body.dark-mode .btn-primary:hover {
    background-color: var(--accent-blue-hover);
    border-color: var(--accent-blue-hover);
}

body.dark-mode .btn-secondary {
    background-color: #4a4d52;
    border-color: #4a4d52;
    color: #fff;
}

body.dark-mode .btn-secondary:hover {
    background-color: #5d6166;
    border-color: #5d6166;
}

/* --- Estilos para la página Registrar Nueva Compra --- */
.body-register {
    background-color: #f4f7f6;
}
.container-register {
    background-color: #fff;
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    margin-top: 30px;
    margin-bottom: 30px;
}
.h1-register, .h2-register, .h3-register {
    /* MODIFICACIÓN: Usa la variable del título más oscuro en modo claro */
    color: var(--title-dark-blue);
    text-align: center;
    margin-bottom: 25px;
}
.form-section {
    padding: 20px;
    border: 1px solid #ddd;
    border-radius: 5px;
    background-color: #fdfdfd;
    margin-bottom: 30px;
}
.form-label {
    font-weight: bold;
    color: #555;
}
.btn-primary {
    background-color: #007bff;
    border-color: #007bff;
}
.btn-primary:hover {
    background-color: #0056b3;
    border-color: #0056b3;
}
.alert {
    display: flex;
    align-items: center;
}
.alert .fas {
    margin-right: 0.5rem;
}
/* Estilos para los detalles de hardware dinámicos */
.detalle-item {
    border: 1px dashed #ccc;
    padding: 15px;
    margin-bottom: 15px;
    border-radius: 8px;
    background-color: #f8f8f8;
}
.detalle-item:last-child {
    margin-bottom: 0;
}

/* Ajustar columna para el botón de eliminar para centrarlo vertical y horizontalmente */
.col-btn-delete {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Estilo personalizado para el botón pequeño de eliminar */
.btn-delete-item {
    white-space: nowrap;
    padding: .25rem .5rem;
    font-size: .875rem;
    line-height: 1.5;
    border-radius: .2rem;
}

/* --- ESTILOS PARA LA PÁGINA REGISTRAR COMPRA EN MODO OSCURO --- */
body.dark-mode .body-register {
    background-color: var(--dm-background-main);
}
body.dark-mode .container-register {
    background-color: var(--dm-bg-card);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
}
body.dark-mode .h1-register, body.dark-mode .h2-register, body.dark-mode .h3-register {
    /* MODIFICACIÓN: Usa la variable --dm-accent-light (blanco) para el modo oscuro */
    color: var(--dm-accent-light);
}
body.dark-mode .form-section {
    background-color: var(--dm-bg-card);
    border-color: var(--dm-border-dark);
}
body.dark-mode .form-label {
    color: var(--dm-text-dark);
}
body.dark-mode .form-control,
body.dark-mode .form-select {
    background-color: var(--dm-bg-card);
    color: var(--dm-text-dark);
    border-color: var(--dm-border-dark);
}
body.dark-mode .form-control:focus,
body.dark-mode .form-select:focus {
    background-color: var(--dm-bg-card);
    color: var(--dm-text-dark);
    /* Mantiene el color de acento original */
    border-color: var(--accent-blue);
    box-shadow: 0 0 0 0.25rem rgba(52, 152, 219, 0.25);
}
body.dark-mode .form-control::placeholder {
    color: var(--dm-text-muted);
}
body.dark-mode .detalle-item {
    background-color: var(--dm-bg-card);
    border-color: var(--dm-border-dark);
}
body.dark-mode .alert-success {
    background-color: #214d33;
    border-color: #1a3d28;
    color: #d1e7dd;
}
body.dark-mode .alert-danger {
    background-color: #5d1c24;
    border-color: #7b2730;
    color: #f8d7da;
}
body.dark-mode .btn-primary {
    /* Mantiene el color de acento original */
    background-color: var(--accent-blue);
    border-color: var(--accent-blue);
    color: #fff;
}
body.dark-mode .btn-primary:hover {
    background-color: var(--accent-blue-hover);
    border-color: var(--accent-blue-hover);
}
body.dark-mode .btn-secondary {
    background-color: #4a4d52;
    border-color: #4a4d52;
    color: #fff;
}
body.dark-mode .btn-secondary:hover {
    background-color: #5d6166;
    border-color: #5d6166;
}
/* ====================================================================== */
/* --- ESTILOS GENERALES PARA LA PÁGINA 'STOCK ACTUAL' --- */
/* ====================================================================== */
.container-stock .form-control-cantidad {
    width: 90px;
    padding: .5rem .5rem;
    text-align: center; !important;
    font-size: 1rem;
    color: #333;
    background-color: #e0f7fa;
    border: 1px solid #a7d9f7;
    margin-left: auto;
    margin-right: auto;
    display: block;
}

.container-stock .form-control-notas {
    white-space: normal;
    word-wrap: break-word;
    min-width: 200px;
    width: 100%;
    height: auto;
    min-height: 80px;
    resize: vertical;
    overflow: auto;
    padding: .5rem .75rem;
    font-size: 0.95rem;
    color: #333;
    background-color: #e9ecef;
    border: 1px solid #ced4da;
}

.container-stock .table-responsive {
    overflow-x: auto;
    margin-bottom: 1rem;
}

.container-stock .table-responsive table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    border-color: #dee2e6;
}

.container-stock .table-responsive th, .container-stock .table-responsive td {
    vertical-align: middle;
    padding: 1rem;
    color: #333;
    border-color: #c9c9c9;
}

.container-stock .table-responsive thead th {
    background-color: #d8dee9;
    color: #212529;
    font-weight: bold;
}
/* ====================================================================== */
/* --- ESTILOS PARA LA TABLA DE 'STOCK ACTUAL' (.container-stock) --- */
/* ====================================================================== */

/* Columna 1: NOMBRE HARDWARE */
.container-stock th:nth-child(1), .container-stock td:nth-child(1) {
    /* Aumentado el ancho para que el nombre del hardware se vea completo */
    width: 175px !important;    /* Forzar un ancho de 400px */
    min-width: 280px !important; /* Forzar un ancho mínimo de 380px */
}

/* Columna 2, 3, 4 (NUEVO, USADO, ASIGNABLE) - Mantener estrechas */
.container-stock th:nth-child(2), .container-stock td:nth-child(2) {
    width: 110px !important;
    min-width: 90px !important;
    text-align: center;
}
.container-stock th:nth-child(3), .container-stock td:nth-child(3) {
    width: 110px !important;
    min-width: 90px !important;
    text-align: center;
}
.container-stock th:nth-child(4), .container-stock td:nth-child(4) {
    width: 110px !important;
    min-width: 90px !important;
}

/* Columna 5: NOTAS */
.container-stock th:nth-child(5), .container-stock td:nth-child(5) {
    /* Reducido para compensar el aumento de la columna Nombre Hardware */
    width: 200px !important;   /* Reducido y forzado a 200px */
    min-width: 180px !important; /* Reducido y forzado a 180px */
    max-width: 350px !important;
    white-space: normal;
    word-wrap: break-word;
}


.container-stock .assignable-cell.stock-low { background-color: #ffcdd2; }
.container-stock .assignable-cell.stock-medium { background-color: #ffe0b2; }
.container-stock .assignable-cell.stock-high { background-color: #c8e6c9; }
.container-stock .assignable-cell {
    text-align: center;
    font-weight: bold;
    font-size: 1.1em;
    color: #333;
}

.container-stock .month-display {
    font-size: 1.2rem;
    font-weight: 500;
    color: #333;
    padding: .5rem 1rem;
    border: 1px solid #ced4da;
    border-radius: .375rem;
    background-color: #e9ecef;
    display: inline-block;
    box-shadow: inset 0 1px 2px rgba(0,0,0,.075);
    text-align: center;
    min-width: 140px;
}

.container-stock .filter-group {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
@media (max-width: 767.98px) {
    .container-stock .filter-group { flex-direction: column; align-items: flex-start; }
    .container-stock .filter-group .form-label { margin-bottom: 5px; }
    .container-stock .filter-group .form-select,
    .container-stock .filter-group .btn { width: 100%; }
}

.container-stock .page-title-section {
    padding: 20px;
    border-radius: 8px;
    margin-bottom: 25px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.05);
    text-align: right;
    color: #2c3e50;
}

.container-stock .page-title-section h1 {
    font-size: 2.5rem;
    font-weight: 600;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    /* MODIFICACIÓN: Usa la variable del título más oscuro en modo claro */
    color: var(--title-dark-blue);
}

.container-stock .color-box {
    width: 25px;
    height: 25px;
    border: 1px solid #ccc;
    display: inline-block;
    vertical-align: middle;
    margin-right: 8px;
    border-radius: 4px;
}

/* ====================================================================== */
/* --- ESTILOS PARA LA PÁGINA 'STOCK ACTUAL' EN MODO OSCURO --- */
/* ====================================================================== */
body.dark-mode .container-stock .color-box {
    border-color: var(--dm-border-dark);
}

body.dark-mode .container-stock .card {
    background-color: var(--dm-bg-card);
    border: 1px solid var(--dm-border-dark);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
}

body.dark-mode .container-stock .table-responsive thead th {
    background-color: #2c3e50 !important;
    color: var(--dm-text-dark) !important;
    border-color: var(--dm-border-dark) !important;
}

body.dark-mode .container-stock .table-responsive tbody td {
    color: var(--dm-text-dark);
    border-color: var(--dm-border-dark);
}

body.dark-mode .container-stock .table-striped tbody tr:nth-of-type(odd) {
    background-color: rgba(255, 255, 255, 0.05);
}

body.dark-mode .container-stock .table-hover tbody tr:hover {
    background-color: rgba(46, 204, 113, 0.15);
}

body.dark-mode .container-stock .form-control-cantidad,
body.dark-mode .container-stock .form-control-notas,
body.dark-mode .container-stock .form-select,
body.dark-mode .container-stock .month-display {
    background-color: var(--dm-bg-card) !important;
    color: var(--dm-text-dark) !important;
    border-color: var(--dm-border-dark) !important;
}

body.dark-mode .container-stock .btn-info {
    background-color: #17a2b8 !important;
    border-color: #17a2b8 !important;
    color: #101211 !important;
}

body.dark-mode .container-stock .btn-success {
    background-color: #28a745 !important;
    border-color: #28a745 !important;
    color: #fff !important;
}

body.dark-mode .container-stock .btn-secondary {
    background-color: #6c757d !important;
    border-color: #6c757d !important;
    color: #fff !important;
}

body.dark-mode .container-stock .btn-primary {
    /* Mantiene el color de acento original */
    background-color: var(--accent-blue) !important;
    border-color: var(--accent-blue) !important;
    color: #fff !important;
}

body.dark-mode .container-stock .assignable-cell.stock-low { background-color: #e83f58 !important; color: #f8d7da !important; }
body.dark-mode .container-stock .assignable-cell.stock-medium { background-color: #d3842e !important; color: #fff3cd !important; }
body.dark-mode .container-stock .assignable-cell.stock-high { background-color: #2fe475 !important; color: #d1e7dd !important; }

/* ====================================================================== */
/* --- ESTILOS GENERALES PARA LA TABLA DE HISTORIAL DE STOCK --- */
/* ====================================================================== */

.container {
    padding-left: 15px;
    padding-right: 15px;
}

.table-scroll-container {
    -webkit-overflow-scrolling: touch;
    margin-bottom: 1rem;
    position: relative;
    border: 1px solid #cce5ff;
    border-radius: 0.5rem;
    box-shadow: 0 0.75rem 1.5rem rgba(0, 0, 0, 0.1);
}

.historial-table {
    width: 100%;
    min-width: 900px;
    border-collapse: separate;
    border-spacing: 5px 0;
    table-layout: fixed;
    margin-bottom: 0;
}

.table-scroll-container thead {
    position: sticky;
    top: 0;
    z-index: 10;
    background-color: #2c3e50;
    background: linear-gradient(to right, #34495e, #2c3e50);
}

.table-scroll-container th {
    background-color: transparent !important;
    color: white !important;
    padding: 1rem 0.8rem !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    text-align: center;
    vertical-align: middle;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    border-radius: 0.4rem;
    font-weight: 600;
    letter-spacing: 0.03em;
}

.table-scroll-container thead th:first-child {
    position: sticky;
    left: 0;
    z-index: 12;
    width: 90px !important;
    min-width: 220px !important;
    max-width: 280px !important;
    text-align: left;
    white-space: normal !important;
    word-wrap: break-word !important;
    border-right: 1px solid rgba(255, 255, 255, 0.2) !important;
    background-color: #2c3e50 !important;
    color: white !important;
}

.table-scroll-container thead th:nth-child(2) {
    position: sticky;
    left: 250px;
    z-index: 12;
    width: 80px !important;
    min-width: 160px !important;
    max-width: 200px !important;
    text-align: left;
    white-space: normal !important;
    word-wrap: break-word !important;
    border-right: 1px solid rgba(255, 255, 255, 0.2) !important;
    background-color: #2c3e50 !important;
    color: white !important;
}

.table-scroll-container tbody td:first-child {
    position: sticky;
    left: 0;
    z-index: 11;
    background-color: #f0f8ff !important;
    color: #212529 !important;
    font-weight: 500;
    vertical-align: middle !important;
    padding: 0.75rem 1rem !important;
    border-radius: 0.3rem;
    border-right: 1px solid #e0e0e0 !important;
}

.table-scroll-container tbody td:nth-child(2) {
    position: sticky;
    left: 250px;
    z-index: 11;
    background-color: #e6f3ff !important;
    color: #212529 !important;
    font-weight: 500;
    vertical-align: middle !important;
    padding: 0.75rem 1rem !important;
    border-radius: 0.3rem;
    border-right: 1px solid #e0e0e0 !important;
}

.table-scroll-container td {
    vertical-align: top !important;
    padding: 0.6rem !important;
    border: 1px solid #e0e0e0 !important;
    border-radius: 0.3rem;
    background-color: #ffffff;
}

.historial-table tbody tr:nth-child(odd) {
    background-color: #f9f9f9;
}

.historial-table tbody tr:nth-child(even) {
    background-color: #ffffff;
}

.week-data {
    font-size: 0.95em;
    line-height: 1.4;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    padding: 12px;
    border: 1px solid #b3d9ff;
    border-radius: 10px;
    background-color: #f8fcff;
    min-height: 110px;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.08);
    transition: all 0.2s ease-in-out;
}

.week-data:hover {
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.15);
    transform: translateY(-2px);
}

.week-data div {
    display: flex;
    align-items: baseline;
}

.week-data strong {
    display: inline-block;
    min-width: 65px;
    text-align: right;
    margin-right: 8px;
    color: #0056b3;
    font-weight: 600;
}

.week-data span {
    display: inline-block;
    font-weight: 500;
    color: #007bff;
}

.notes-text {
    display: block;
    font-style: italic;
    color: #6c757d;
    white-space: normal;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed #ced4da;
    font-size: 0.9em;
}

.notes-text[title]:hover {
    cursor: help;
}

.table-scroll-container th:not(:first-child):not(:nth-child(2)),
.table-scroll-container td:not(:first-child):not(:nth-child(2)) {
    width: 220px;
    min-width: 200px;
}

.no-data-option {
    color: #888;
    font-style: italic;
}

.card-header h3 {
    /* MODIFICACIÓN: Usa la variable del título más oscuro en modo claro */
    color: var(--title-dark-blue);
    margin-bottom: 0;
    font-weight: 600;
    padding: 1rem 0;
}

.week-data-empty {
    background-color: #f8f9fa;
    color: #a0a0a0;
    font-style: italic;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 110px;
    border: 1px dashed #dcdcdc;
    border-radius: 10px;
}

.row.align-items-center.mb-4 {
    flex-wrap: wrap;
}

.row.align-items-center.mb-4 > .col-12.col-md-6 {
    flex-grow: 1;
}

.form-group-filter {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    width: 100%;
}

.form-label {
    margin-right: 8px;
    flex-shrink: 0;
    font-weight: 500;
}

label[for="monthSelect"] {
    color: #1a5276;
}

label[for="ubicacionSelect"] {
    color: #1a5276;
}

.custom-filter-select {
    width: auto;
    min-width: 200px;
    max-width: 250px;
    margin-bottom: 8px;
    margin-right: 12px;
    padding: 0.75rem 1.25rem;
    font-size: 1.1em;
    border: 2px solid;
    border-radius: 0.5rem;
    color: #333;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: all 0.2s ease-in-out;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-repeat: no-repeat;
    background-position: right 1rem center;
    background-size: 0.8em;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3E%3C/svg%3E");
}

.select-month-custom:hover {
    border-color: #123d5a;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}

.select-month-custom:focus {
    outline: none;
    border-color: #123d5a;
    box-shadow: 0 0 0 0.25rem rgba(26, 82, 118, 0.25);
    background-color: #fff;
}

.select-ubicacion-custom {
    /* Mantiene el color de acento original */
    max-width: 400px;
    min-width: 250px;
    border-color: var(--accent-blue);
    background-color: #e6f0f8;
    color: var(--accent-blue);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%231a5276' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3E%3C/svg%3E");
}

.select-ubicacion-custom:hover {
    border-color: #123d5a;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}

.select-ubicacion-custom:focus {
    outline: none;
    border-color: #123d5a;
    box-shadow: 0 0 0 0.25rem rgba(26, 82, 118, 0.25);
    background-color: #fff;
}

.custom-filter-select option {
    color: #333;
    background-color: #fff;
}

.col-12.col-md-auto.ms-auto.d-flex.justify-content-end.mt-md-0.mt-3 {
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 1rem !important;
}

@media (min-width: 768px) {
    .col-12.col-md-auto.ms-auto.d-flex.justify-content-end.mt-md-0.mt-3 {
        flex-wrap: nowrap;
        margin-top: 0 !important;
    }
}

@media (min-width: 768px) {
    .form-group-filter {
        flex-wrap: nowrap;
    }
    .custom-filter-select {
        margin-bottom: 0;
    }
    .form-label.ms-md-3 {
        margin-left: 1.5rem !important;
    }
}

@media (max-width: 576px) {
    .form-group-filter {
        flex-direction: column;
        align-items: flex-start;
    }
    .form-label {
        width: 100%;
        margin-bottom: 4px;
    }
    .custom-filter-select {
        width: 100%;
        max-width: 100%;
        margin-right: 0;
        margin-bottom: 12px;
    }
    .form-label.ms-md-3 {
        margin-left: 0 !important;
    }
}

.page-title-section {
    padding: 20px;
    border-radius: 8px;
    margin-bottom: 25px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
    text-align: center;
    color: #2c3e50;
}


body.dark-mode .table-scroll-container {
    border: 1px solid var(--dm-border-dark);
    box-shadow: 0 0.75rem 1.5rem var(--dm-shadow-medium);
}

body.dark-mode .historial-table thead {
    background: linear-gradient(to right, #1f1f1f, #121212);
}

body.dark-mode .historial-table thead th {
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

body.dark-mode .historial-table thead th:first-child,
body.dark-mode .historial-table thead th:nth-child(2) {
    background: linear-gradient(to right, #1f1f1f, #121212) !important;
    border-right: 1px solid rgba(255, 255, 255, 0.1) !important;
}

body.dark-mode .historial-table td {
    border: 1px solid var(--dm-border-dark) !important;
    background-color: var(--dm-bg-card);
}

body.dark-mode .historial-table tbody td:first-child,
body.dark-mode .historial-table tbody td:nth-child(2) {
    background-color: var(--dm-bg-card) !important;
    color: var(--dm-text-dark) !important;
    border-right: 1px solid var(--dm-border-dark) !important;
}

body.dark-mode .historial-table tbody tr:nth-child(odd) {
    background-color: var(--dm-bg-card);
}

body.dark-mode .historial-table tbody tr:nth-child(even) {
    background-color: var(--dm-bg-card);
}

body.dark-mode .week-data {
    border: 1px solid var(--dm-border-dark);
    background-color: #2a2a2a;
    box-shadow: 0 3px 6px var(--dm-shadow-light);
}

body.dark-mode .week-data strong {
    /* MODIFICACIÓN: Usa la variable --dm-accent-light (blanco) para el modo oscuro */
    color: var(--dm-accent-light);
}

body.dark-mode .week-data span {
    color: var(--dm-text-dark);
}

body.dark-mode .notes-text {
    color: var(--dm-text-muted);
    border-top: 1px dashed var(--dm-border-dark);
}

body.dark-mode .week-data-empty {
    background-color: var(--dm-bg-card);
    color: var(--dm-text-muted);
    border: 1px dashed var(--dm-border-dark);
}

body.dark-mode .custom-filter-select {
    /* Borde de color de acento original */
    border-color: var(--accent-blue);
    background-color: var(--dm-bg-card);
    color: var(--dm-text-dark);
    box-shadow: 0 4px 8px var(--dm-shadow-light);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23e0e0e0' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3E%3C/svg%3E");
}

body.dark-mode .custom-filter-select:hover {
    border-color: var(--accent-blue);
    box-shadow: 0 6px 12px var(--dm-shadow-medium);
}

body.dark-mode .custom-filter-select:focus {
    outline: none;
    border-color: var(--accent-blue);
    box-shadow: 0 0 0 0.25rem rgba(52, 152, 219, 0.25);
    background-color: #2a2a2a;
}

body.dark-mode .custom-filter-select option {
    color: var(--dm-text-dark);
    background-color: var(--dm-bg-card);
}

body.dark-mode .page-title-section {
    background-color: var(--dm-bg-card);
    box-shadow: 0 4px 8px var(--dm-shadow-light);
    /* MODIFICACIÓN: Usa la variable --dm-accent-light (blanco) para el modo oscuro */
    color: var(--dm-accent-light);
}


/* --- Estilos del Body para la página de Login (Modo Claro) --- */
/* --- Estilos del Body para la página de Login --- */
body.login-page {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background-color: var(--background-main);
    background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.05) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.05) 50%, rgba(255, 255, 255, 0.05) 75%, transparent 75%, transparent);
    background-size: 40px 40px;
    overflow: hidden;
    position: relative;
}

.login-container {
    max-width: 900px;
    min-height: 560px;
    padding: 4rem 5rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    border-radius: 20px;
    /* Usa el azul original para el glow */
    box-shadow: 0 0 25px 5px var(--glow-border-light), 0 15px 40px var(--shadow-strong);
    background-color: var(--background-card);
    border: 1px solid var(--border-light);
    transition: all 0.5s ease;
    position: relative;
    z-index: 1;
}

.login-logo-img {
    max-width: 250px;
    height: auto;
    display: block;
    margin: -1rem auto 0 auto;
    transition: none;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.header-content {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem; /* Reducimos el espacio a la mitad */
    margin-bottom: 1.5rem; /* Ajustamos también el margen inferior */
}

.login-title {
    font-size: 2.5rem;
    /* MODIFICACIÓN: Usa la variable del título más oscuro en modo claro */
    color: var(--title-dark-blue);
    transition: color 0.5s ease;
    margin-top: 3rem;
    margin-bottom: 0;
}

.login-form {
    width: 100%;
}

.form-label {
    font-size: 1.1rem;
    color: var(--text-dark);
    transition: color 0.5s ease;
}

.form-control {
    padding: 1rem 1.5rem;
    font-size: 1.1rem;
    border-radius: 10px;
    border: 1px solid var(--border-light);
    background-color: var(--background-main);
    color: var(--text-dark);
    transition: all 0.3s ease;
}

.form-control:focus {
    /* Mantiene el color de acento original */
    border-color: var(--accent-blue);
    box-shadow: 0 0 0 0.25rem rgba(0, 123, 255, 0.25);
    background-color: var(--background-card);
}

.form-button-container {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-top: 3rem;
}

.login-button {
    padding: 1.2rem 2.5rem;
    font-size: 1.2rem;
    border-radius: 10px;
    font-weight: 600;
    transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
}

.login-button:hover {
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

/* --- Estilos del botón de modo oscuro --- */
/* Estilos para el botón de modo oscuro (el elemento <a>) */
.theme-toggle-btn {
    position: fixed;
    top: 2rem;
    right: 2rem;
    z-index: 9999;
    background: var(--button-bg);
    border: none;
    cursor: pointer;
    font-size: 2rem;
    color: var(--text-dark);
    transition: color 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
    padding: 0.5rem 0.8rem;
    border-radius: 0.5rem;
}

/* Estilo para el estado hover del botón */
.theme-toggle-btn:hover {
    /* Mantiene el color de acento original */
    color: var(--accent-blue);
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
    background-color: var(--hover-bg);
}

/* Restablece cualquier estilo no deseado en el ícono (opcional) */
.theme-toggle-btn i {
    border: none;
    box-shadow: none;
}

/* ====================================================================== */
/* --- FONDO CON CUADRÍCULA (COLOR BASE AJUSTADO PARA MEJOR CONTRASTE) --- */
/* ====================================================================== */
body.dark-mode,
body.login-page.dark-mode {
    /* Mantenemos tus variables a salvo */
    --background-main: var(--dm-background-main);
    --background-card: var(--dm-bg-card);
    --text-dark: var(--dm-text-dark);
    --text-muted: var(--dm-text-muted);
    --border-light: var(--dm-border-dark);
    --shadow-strong: var(--dm-shadow-strong);
    --accent-blue: #3498db;

    /* Fondo base menos agresivo (Gris carbón muy oscuro) */
    background-color: #14161a !important;

    /* 1. Brillo un poco más suave en la parte superior para empatar
       2. Líneas horizontales (0.05 para que no chillen con el nuevo fondo)
       3. Líneas verticales (0.05)
    */
    background-image:
        radial-gradient(circle at 50% -20%, #253040 0%, transparent 70%),
        linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px) !important;

    /* El tamaño de la cuadrícula es de 40x40 píxeles */
    background-size: 100% 100%, 40px 40px, 40px 40px !important;
    background-attachment: fixed !important;
}
body.dark-mode .login-logo-img {
    content: url("../img/TA-Logo-1-A-2.png");
}

body.dark-mode .login-container {
    /* Eliminamos el box-shadow de luz de aquí */
    box-shadow: 0 15px 40px var(--dm-shadow-strong);
}

/* --- Efecto de luz ALREDEDOR del contenedor de login (::before) - MODO OSCURO --- */
body.dark-mode .login-container::before {
    content: '';
    position: absolute;
    top: -5px;
    left: -5px;
    right: -5px;
    bottom: -5px;
    background: transparent;
    border: 3px solid var(--glow-border-dark);
    border-radius: 25px;
    filter: blur(5px);
    z-index: -1;
    opacity: 1;
    transition: all 0.5s ease;
}

body.dark-mode .form-control {
    background-color: var(--dm-background-main);
    color: var(--dm-text-dark);
    border-color: var(--dm-border-dark);
}

body.dark-mode .form-control:focus {
    background-color: var(--dm-bg-card);
    /* Mantiene el color de acento original */
    border-color: var(--accent-blue);
    box-shadow: 0 0 0 0.25rem rgba(52, 152, 219, 0.25);
}

body.dark-mode .login-button {
    /* Mantiene el color de acento original */
    background-color: var(--accent-blue);
    border-color: var(--accent-blue);
}

body.dark-mode .login-button:hover {
    background-color: var(--accent-blue-hover);
    border-color: var(--accent-blue-hover);
}

body.dark-mode .theme-toggle-btn {
    color: var(--dm-text-dark);
}

body.dark-mode .theme-toggle-btn:hover {
    /* MODIFICACIÓN: Usa la variable --dm-accent-light (blanco) para el modo oscuro */
    color: var(--dm-accent-light);
}

/* --- Ajustes Responsivos --- */
@media (max-width: 576px) {
    .login-container {
        padding: 2rem !important;
        max-width: 90% !important;
    }

    .login-logo-img {
        max-width: 150px !important;
    }

    .login-title {
        font-size: 1.6rem !important;
        margin-bottom: 2rem !important;
    }

    .login-button {
        padding: 0.8rem !important;
        font-size: 1rem !important;
    }
}

/* --- Estilos para la página de 2FA (Autenticación de Dos Factores) --- */

/* Ajustes para el contenedor principal de 2FA */
.login-container.login-container-responsive-fix {
    max-width: 400px;
    min-height: 400px;
    padding: 2.5rem;
    align-items: center;
}

/* Ajustes para el logo en la página de 2FA */
.login-logo-img-responsive-fix {
    max-width: 150px;
    margin: 0 auto 1.5rem auto;
}

/* Ajustes para el título en la página de 2FA */
.login-title-responsive-fix {
    font-size: 1.75rem;
    margin-bottom: 1.5rem;
    /* MODIFICACIÓN: Usa la variable del título más oscuro en modo claro */
    color: var(--title-dark-blue);
    text-align: center;
}

/* Reducimos el espacio de la descripción del QR */
p.text-center.text-muted {
    margin-bottom: 1rem;
}

/* Estilos para el formulario del 2FA */
.login-container-responsive-fix .login-form {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.25rem;
}

/* Ajustamos el padding y el margen del campo de texto */
.login-container-responsive-fix .login-form .form-control {
    padding: 1rem 1.5rem;
    font-size: 1.1rem;
    margin-bottom: 0;
}

/* Estilos específicos para la imagen del código QR */
.qr-image {
    max-width: 200px;
    height: auto;
    border: 1px solid var(--border-light);
    border-radius: 10px;
    margin-top: 1rem;
    margin-bottom: 1rem;
    padding: 1rem;
    background-color: white;
}

/* Estilo para el botón */
.login-button-responsive-fix {
    margin-top: 1rem;
    padding: 1rem 2rem;
    font-size: 1.1rem;
    width: auto;
}

.text-center code {
    background-color: var(--background-card);
    word-break: break-all;
    border-radius: 10px;
}

/* --- Estilos para el Modo Oscuro de la página de 2FA --- */

/* Ajuste para el color de fondo del QR en modo oscuro */
body.dark-mode .qr-image {
    background-color: var(--dm-background-main);
}

/* Estilo específico para la descripción en modo oscuro */
body.dark-mode .text-muted {
    color: var(--dm-text-muted) !important;
}

body.dark-mode .login-logo-img-responsive-fix {
    content: url("../img/TA-Logo-1-A-2.png");
}

/* --- Estilos para la página de 2FA (Autenticación de Dos Factores) --- */

/* Ajustes para el contenedor principal de 2FA */
.login-container.login-container-responsive-fix {
    max-width: 400px;
    min-height: 450px;
    padding: 2.5rem;
    align-items: center;
}

/* Ajustes para el logo en la página de 2FA */
.login-logo-img-responsive-fix {
    max-width: 150px;
    margin: 0 auto 1.5rem auto;
}

/* Ajustes para el título en la página de 2FA */
.login-title-responsive-fix {
    font-size: 1.75rem;
    margin-bottom: 1.5rem;
    text-align: center;
    /* MODIFICACIÓN: Usa la variable del título más oscuro en modo claro */
    color: var(--title-dark-blue);
}

/* Reducimos el espacio de la descripción del QR */
p.text-center.text-muted {
    margin-bottom: 1rem;
}

/* Estilos para el formulario del 2FA */
.login-container-responsive-fix .login-form {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.25rem;
}

/* Ajustamos el padding del campo de texto */
.login-container-responsive-fix .login-form .form-control {
    padding: 1rem 1.5rem;
    font-size: 1.1rem;
    margin-bottom: 0;
}

/* Estilos específicos para la imagen del código QR */
.qr-image {
    max-width: 200px;
    height: auto;
    border: 1px solid var(--border-light);
    border-radius: 10px;
    margin-top: 0.5rem;
    margin-bottom: 1rem;
    padding: 1rem;
    background-color: white;
}

/* Estilo para el botón */
.login-button-responsive-fix {
    margin-top: 1rem;
    padding: 1rem 2rem;
    font-size: 1.1rem;
    width: auto;
}

/* Estilos del modo oscuro */
body.dark-mode .text-muted {
    color: var(--dm-text-muted) !important;
}

body.dark-mode .qr-image {
    background-color: var(--dm-background-main);
}

body.dark-mode .login-logo-img-responsive-fix {
    content: url("../img/TA-Logo-1-A-2.png");
}



.container-register {
    background-color: #fff;
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    margin: 30px auto;
    max-width: 1250px;
}
h1, h2, h3 {
    /* MODIFICACIÓN: Usa la variable del título más oscuro en modo claro */
    color: var(--title-dark-blue);
    text-align: center;
    margin-bottom: 25px;
}
.form-section {
    padding: 20px;
    border: 1px solid #ddd;
    border-radius: 5px;
    background-color: #fdfdfd;
    margin-bottom: 30px;
}
.form-label {
    font-weight: bold;
    color: #555;
}
.btn-primary {
    background-color: #007bff;
    border-color: #007bff;
}
.btn-primary:hover {
    background-color: #0056b3;
    border-color: #0056b3;
}
.alert {
    display: flex;
    align-items: center;
}
.alert .fas {
    margin-right: 0.5rem;
}
/* Estilos para los detalles de hardware dinámicos */
.detalle-item {
    border: 1px dashed #ccc;
    padding: 15px;
    margin-bottom: 15px;
    border-radius: 8px;
    background-color: #f8f8f8;
}
.detalle-item:last-child {
    margin-bottom: 0;
}

/* Ajustar columna para el botón de eliminar para centrarlo vertical y horizontalmente */
.col-btn-delete {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Estilo personalizado para el botón pequeño de eliminar */
.btn-delete-item {
    white-space: nowrap;
    padding: .25rem .5rem;
    font-size: .875rem;
    line-height: 1.5;
    border-radius: .2rem;
}

/* MODIFICACIÓN: Estilo para el input de archivo personalizado */
.input-group {
    border-radius: 12px;
    overflow: hidden;
}

.input-group > .form-control[readonly] {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.input-group > .input-group-text {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    cursor: pointer;
    padding: .9rem 1.3rem;
    line-height: 1.5;
}

/* Estilos para el modo oscuro */
body.dark-mode .container-register {
    background-color: #1f1f1f;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
}
body.dark-mode h1, body.dark-mode h2, body.dark-mode h3 {
    /* MODIFICACIÓN: Usa la variable --dm-accent-light (blanco) para el modo oscuro */
    color: var(--dm-accent-light);
}
body.dark-mode .form-section {
    background-color: #1f1f1f;
    border-color: #3a3a3a;
}
body.dark-mode .form-label {
    color: #e0e0e0;
}
body.dark-mode .form-control,
body.dark-mode .form-select {
    background-color: #2a2a2a;
    color: #e0e0e0;
    border-color: #444;
}
body.dark-mode .form-control:focus,
body.dark-mode .form-select:focus {
    background-color: #333;
    color: #e0e0e0;
    /* Mantiene el color de acento original */
    border-color: var(--accent-blue);
    box-shadow: 0 0 0 0.25rem rgba(52, 152, 219, 0.25);
}
body.dark-mode .form-control::placeholder {
    color: var(--dm-text-muted);
}
body.dark-mode .detalle-item {
    background-color: #2a2a2a;
    border-color: var(--dm-border-dark);
}
body.dark-mode .subtotal-item {
    color: #e0e0e0;
}
body.dark-mode .form-control[readonly] {
    background-color: #2a2a2a;
    color: #e0e0e0;
    border-color: #444;
}
body.dark-mode .btn-primary, body.dark-mode .input-group-text {
    /* Mantiene el color de acento original */
    background-color: var(--accent-blue);
    border-color: var(--accent-blue);
}
body.dark-mode .btn-primary:hover, body.dark-mode .input-group-text:hover {
    background-color: var(--accent-blue-hover);
    border-color: var(--accent-blue-hover);
}


/* --- ESTILOS UNIFICADOS DE LISTADO DE HARDWARE --- */

/* Contenedor Principal (Asegura centrado y ancho) */
.page-container {
    padding: 3rem;
    background-color: var(--background-light);
    min-height: 100vh;
    max-width: 1400px;
    margin-left: auto;
    margin-right: auto;
}

/* Control Bar (Fondo, Bordes y Inputs) */
.control-bar {
    padding: 1.5rem 1.5rem;
    border-radius: 10px;
    border: 1px solid var(--border-light);
    margin-bottom: 3rem; /* Espaciado debajo del control bar */
    background-color: var(--background-card);
}

.control-bar .form-control,
.control-bar .form-select {
    height: calc(2.25rem + 10px);
    padding: 0.75rem 1.25rem;
    font-size: 1rem;
    border-radius: 8px;
    background-color: var(--background-card);
    color: var(--text-dark);
    border-color: var(--border-light);
}

/* Espaciado del Botón "Registrar Nuevo Activo" */
.container.page-container > .row:nth-child(3) {
    margin-top: 2.5rem !important; /* Separación de la barra de control */
    margin-bottom: 1.5rem !important;
}

/* --- Consistencia de Encabezados (Tabla y Modal) --- */

/* Encabezado de la Tabla (THEAD) - Base de color para ambos modos */
.table-custom thead th,
.table-dark thead th {
    background-color: var(--primary-dark) !important;
    color: #ffffff !important;
    font-weight: 600;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--primary-dark-light);
}

/* Encabezado del Modal (QuickView) - Mismo color que la tabla */
.modal-header.bg-info,
.modal-header.bg-info.text-white {
    background-color: var(--primary-dark) !important;
    color: #ffffff !important;
    border-bottom: 1px solid var(--primary-dark-hover);
}
.modal-header.bg-info .modal-title {
    color: #ffffff !important;
}
.modal-header.bg-info .modal-title .fas {
    /* Mantiene el color de acento original */
    color: var(--accent-blue) !important;
}
.modal-header.bg-info .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}

/* --- Botones de Acción --- */

/* Botones de Filtro (Aplicar y Limpiar) - Compactos */
.btn-action-sm {
    padding: 0.6rem 0.9rem !important;
    font-size: 0.95rem !important;
    font-weight: 600;
}

/* Botones de la Tabla (Ver, Editar, Eliminar) - Tamaño estandarizado */
.table-custom .btn-action {
    font-size: 1.2em;
    padding: 0.8rem 1.5rem;
    border-radius: 8px;
    margin-right: 0.9rem !important;
    font-weight: 600;
    box-shadow: 0 1px 3px var(--shadow-light);
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.table-custom .btn-action i {
    margin: 0;
}

/* --- Modo Oscuro (Asegurando la consistencia) --- */

body.dark-mode .control-bar {
    background-color: var(--dm-bg-card);
    border-color: var(--dm-border-dark);
}
body.dark-mode .control-bar .form-control,
body.dark-mode .control-bar .form-select {
    background-color: #2a2a2a;
    color: var(--dm-text-dark);
    border-color: var(--dm-border-dark);
}

/* El thead en modo oscuro ya usa primary-dark de la regla unificada */
body.dark-mode .modal-header.bg-info {
    background-color: var(--primary-dark) !important;
}

/* ====================================================================== */
/* --- ESTILOS UNIFICADOS DE FORMULARIOS (create_hardware.jsp) --- */
/* ====================================================================== */

.form-card {
    background-color: var(--card-background-light);
    padding: 2.5rem; /* Más padding interno */
    border-radius: 12px;
    box-shadow: 0 4px 15px var(--shadow-light);
    border: 1px solid var(--border-color);
}

/* Aumento del espacio vertical entre filas del formulario */
.row.g-4 {
    --bs-gutter-y: 1.5rem;
}

.form-header {
    display: flex;
    align-items: center;
    margin-bottom: 2rem;
    position: relative;
}
.form-header h2 {
    font-weight: 700;
    color: var(--text-dark);
}

.form-label {
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 0.6rem;
}
.form-control, .form-select {
    border-radius: 8px;
    border: 1px solid var(--border-color);
    padding: 0.8rem 1.2rem;
}
.input-group-text {
    cursor: pointer;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    padding: 0.8rem 1.2rem;
}

/* Ajuste para que los inputs con + mantengan bordes redondeados en la izquierda */
.input-group > .form-control:not(:last-child),
.input-group > .form-select:not(:last-child) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}
/* Ajuste para el botón + para que se vea como parte del input */
.input-group-append .btn-primary,
.input-group-prepend .btn-primary {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    padding: 0.8rem 1.2rem;
}

.form-text {
    font-size: 0.8em;
    color: var(--text-muted);
    margin-top: 0.25rem;
}

/* Estilos de botones */
.btn-primary {
    background-color: var(--primary-blue);
    border-color: var(--primary-blue);
    font-weight: 600;
    box-shadow: 0 4px 10px var(--shadow-light);
}
.btn-primary:hover {
    background-color: var(--primary-blue-hover);
    border-color: var(--primary-blue-hover);
}
.btn-secondary {
    background-color: var(--text-muted);
    border-color: var(--text-muted);
    color: #fff;
}
.btn-cancel {
    background: none;
    color: var(--text-dark);
    font-weight: 600;
    border: none;
}
.btn-cancel:hover {
    color: var(--primary-blue);
    background: none;
}

/* --- ESTILO PARA SUBIR ARCHIVO PERSONALIZADO --- */
.custom-file-upload-container {
    display: flex;
    align-items: center;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    overflow: hidden;
    background-color: var(--background-card);
}

/* El input real se oculta visualmente pero se mantiene accesible */
.custom-file-upload-container input[type="file"] {
    display: none;
}

/* Estilo para el botón simulado (Choose File) */
.custom-file-label {
    cursor: pointer;
    padding: 0.8rem 1.2rem;
    background-color: var(--background-light); /* Fondo más claro para el botón */
    color: var(--text-dark);
    font-weight: 600;
    border-right: 1px solid var(--border-color);
    white-space: nowrap;
    min-width: 120px;
    text-align: center;
    transition: background-color 0.2s;
}
.custom-file-label:hover {
    background-color: #e0e4e7;
}

/* Estilo para el texto del nombre del archivo */
.file-name-display {
    flex-grow: 1;
    padding: 0.8rem 1rem;
    color: var(--text-muted);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* Acordeón */
.accordion-button {
    font-weight: 600;
    color: var(--text-dark);
    background-color: var(--background-light);
    border-radius: 8px;
    margin-bottom: 0.5rem;
}
.accordion-button:not(.collapsed) {
    color: #ffffff;
    background-color: var(--primary-blue);
    box-shadow: none;
}
.accordion-button .fas {
    transition: transform 0.3s ease;
}
.accordion-button:not(.collapsed) .fas {
    transform: rotate(90deg);
}

/* Estilos del Modo Oscuro */
body.dark-mode {
    --dm-background-dark: #121212;
    --dm-card-background-dark: #1f1f1f;
    --dm-text-light: #e0e0e0;
    --dm-border-dark: #3a3a3a;
}
body.dark-mode .page-container {
    background-color: var(--dm-background-dark);
}
body.dark-mode .form-card {
    background-color: var(--dm-card-background-dark);
    border-color: var(--dm-border-dark);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
}
body.dark-mode .form-header h2,
body.dark-mode .form-label {
    color: var(--dm-text-light);
}
body.dark-mode .form-control,
body.dark-mode .form-select {
    background-color: #2a2a2a;
    color: var(--dm-text-light);
    border-color: #444;
}
body.dark-mode .input-group-text {
    background-color: #2a2a2a;
    color: var(--dm-text-light);
    border-color: #444;
}
body.dark-mode .btn-cancel {
    color: var(--dm-text-light);
}
body.dark-mode .accordion-button {
    color: var(--dm-text-light);
    background-color: #2a2a2a;
}
body.dark-mode .accordion-body {
    background-color: #242424;
    border-color: var(--dm-border-dark);
}

/* --- ESTILO PARA SUBIR ARCHIVO PERSONALIZADO (MODO OSCURO) --- */
body.dark-mode .custom-file-upload-container {
    border-color: var(--dm-border-dark);
    background-color: #2a2a2a;
}
body.dark-mode .custom-file-label {
    background-color: #1f1f1f; /* Fondo más oscuro para el botón */
    color: var(--dm-text-light);
    border-right: 1px solid var(--dm-border-dark);
}
body.dark-mode .custom-file-label:hover {
    background-color: #121212;
}
body.dark-mode .file-name-display {
    color: var(--dm-text-muted);
}

/* ====================================================================== */
/* --- ESTILOS DE PAGINACIÓN PERSONALIZADA (pagination) --- */
/* ====================================================================== */

/* Contenedor principal */
.pagination {
    --bs-pagination-padding-x: 1.2rem;
    --bs-pagination-padding-y: 0.8rem;
    --bs-pagination-font-size: 1rem;
    --bs-pagination-color: var(--primary-dark);
    --bs-pagination-bg: var(--background-card);
    --bs-pagination-border-width: 1px;
    --bs-pagination-border-color: var(--border-light);
    --bs-pagination-border-radius: 10px;
    --bs-pagination-hover-color: #ffffff;
    --bs-pagination-hover-bg: var(--accent-blue-hover);
    --bs-pagination-hover-border-color: var(--accent-blue-hover);
    --bs-pagination-focus-box-shadow: 0 0 0 0.25rem rgba(52, 152, 219, 0.25);
    --bs-pagination-active-color: #ffffff;
    --bs-pagination-active-bg: var(--accent-blue);
    --bs-pagination-active-border-color: var(--accent-blue);
    --bs-pagination-disabled-color: var(--text-muted);
    --bs-pagination-disabled-bg: var(--background-main);
    --bs-pagination-disabled-border-color: var(--border-light);

    box-shadow: 0 4px 12px var(--shadow-light); /* Sombra ligera al contenedor */
    border-radius: 12px;
}

/* Item individual de paginación */
.page-item {
    transition: all 0.2s ease;
}

/* Enlace (los botones Anterior, 1, 2, Siguiente) */
.page-link {
    font-weight: 600;
    margin: 0 2px;
    border-radius: 8px !important; /* Bordes más suaves en los enlaces */
    min-width: 45px;
    text-align: center;
}

/* Botón activo (la página actual) */
.page-item.active .page-link {
    /* Usamos el gradiente principal para destacar */
    background: var(--gradient-primary);
    border-color: var(--accent-blue);
    color: #ffffff;
    box-shadow: 0 2px 8px rgba(0,0,0,0.25);
    transform: translateY(-1px);
}

/* Botones Anterior/Siguiente (mayor padding lateral) */
.page-link[title="Página Anterior"],
.page-link[title="Página Siguiente"] {
    padding-left: 1.2rem;
    padding-right: 1.2rem;
}

/* Estado de visualización de registros */
.content-card small.text-muted {
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--text-dark) !important; /* Asegurar que se vea bien en modo claro */
}


/* ====================================================================== */
/* --- ESTILOS DE PAGINACIÓN PERSONALIZADA EN MODO OSCURO --- */
/* ====================================================================== */

body.dark-mode .pagination {
    --bs-pagination-color: var(--dm-text-dark);
    --bs-pagination-bg: var(--dm-bg-card);
    --bs-pagination-border-color: var(--dm-border-light);
    --bs-pagination-hover-bg: var(--primary-dark); /* Un gris azulado oscuro */
    --bs-pagination-hover-border-color: var(--dm-border-light);
    --bs-pagination-active-bg: var(--accent-blue);
    --bs-pagination-active-border-color: var(--accent-blue);
    --bs-pagination-disabled-color: var(--dm-text-muted); /* Gris claro para el texto */
    --bs-pagination-disabled-bg: #1A1A1A; /* Fondo más oscuro que el fondo del card */
    --bs-pagination-disabled-border-color: #3A3A3A; /* Borde más oscuro */
    background-color: var(--dm-bg-card);
    box-shadow: 0 4px 12px var(--dm-shadow-medium);
}

body.dark-mode .page-link {
    background-color: var(--dm-bg-card);
    color: var(--dm-text-dark);
}

body.dark-mode .page-item.disabled .page-link {
    background-color: var(--bs-pagination-disabled-bg) !important;
    border-color: var(--bs-pagination-disabled-border-color) !important;
    color: var(--bs-pagination-disabled-color) !important;
    box-shadow: none;
    cursor: not-allowed;
}

body.dark-mode .content-card small.text-muted {
    color: var(--dm-text-muted) !important;
}



/* ====================================================================== */
/* --- 2. DISTRIBUCIÓN Y ANCHO DE COLUMNAS (LISTADO DE HARDWARE) --- */
/* ====================================================================== */

/* Aplicación de anchos fijos para la tabla de 7 columnas del listado */
.table:not(.tab-content .table) thead th:nth-child(1), .table:not(.tab-content .table) tbody td:nth-child(1) {
    width: 17%;
} /* ASSET TAG: Más espacio */
.table:not(.tab-content .table) thead th:nth-child(2), .table:not(.tab-content .table) tbody td:nth-child(2) {
    width: 15%;
} /* SERIAL: Buen espacio */
.table:not(.tab-content .table) thead th:nth-child(3), .table:not(.tab-content .table) tbody td:nth-child(3) {
    width: 12%;
} /* CATEGORÍA */
.table:not(.tab-content .table) thead th:nth-child(4), .table:not(.tab-content .table) tbody td:nth-child(4) {
    width: 10%;
} /* MODELO */
.table:not(.tab-content .table) thead th:nth-child(5), .table:not(.tab-content .table) tbody td:nth-child(5) {
    width: 12%;
    text-align: center;
} /* ESTADO: Centrado */
.table:not(.tab-content .table) thead th:nth-child(6), .table:not(.tab-content .table) tbody td:nth-child(6) {
    width: 10%;
} /* UBICACIÓN */
.table:not(.tab-content .table) thead th:nth-child(7), .table:not(.tab-content .table) tbody td:nth-child(7) {
    width: 18%; /* ACCIONES: Suficiente espacio para 3 botones */
    text-align: center;
}

/* Revertir el tamaño de los botones de acción para Listado de Hardware (3 botones) */
.table:not(.tab-content .table) td:last-child .btn-sm {
    padding: 0.4rem 0.6rem !important;
    margin: 0 3px !important;
    font-size: 0.95em !important;
}
.table:not(.tab-content .table) td:last-child .btn-sm i {
    font-size: 1em !important;
}

/* ====================================================================== */
/* --- 3. ESTILOS CORREGIDOS DE CATÁLOGOS (.tab-content) --- */
/* ====================================================================== */

/* CLAVE: Flexibilidad de ancho solo para Catálogos */
.tab-content .table {
    table-layout: auto;
    width: 100%;
}

/* PADDING DE CELDAS DE CATÁLOGOS (más alto para más aire) */
.tab-content .table th,
.tab-content .table td {
    padding: 1rem 1.4rem;
    font-size: 0.95em;
    vertical-align: middle;
}

/* 4. COLUMNA DE ACCIÓN DE CATÁLOGOS (Compacta y Centrada) */

/* Cabecera y celda de ACCIÓN de Catálogos */
.tab-content .table th.action-col,
.tab-content .table td.action-col-td {
    width: 100px;
    min-width: 90px;
    text-align: center !important;
    white-space: nowrap;
    padding: 0.6rem 0.3rem !important;
}

/* Botones de acción de Catálogos (Más grandes) */
.tab-content .table td.action-col-td .btn-sm {
    margin: 0 1px;
    padding: 0.6rem 0.9rem;
    line-height: 1;
    border-radius: 6px;
    /* REFUERZO: Aseguramos que el color de texto sea blanco en todos los botones de acción de catálogo */
    color: #ffffff !important;
}

/* ✅ CORRECCIÓN CLAVE: Reestablece el color de fondo para el botón DESACTIVAR/Danger */
.tab-content .table td.action-col-td .btn-danger {
    background-color: var(--danger-color) !important;
}
.tab-content .table td.action-col-td .btn-danger:hover {
    background-color: var(--danger-dark-hover) !important;
}

/* ✅ CORRECCIÓN CLAVE: Reestablece el color de fondo para el botón EDITAR/Activar/Success */
.tab-content .table td.action-col-td .btn-success {
    background-color: var(--success-color) !important;
}
.tab-content .table td.action-col-td .btn-success:hover {
    background-color: var(--success-dark-hover) !important;
}


/* ÍCONO de Catálogos */
.tab-content .table td.action-col-td .btn-sm i {
    font-size: 1.8em;
}



/* ====================================================================== */
/* --- ESTILOS DE COLUMNAS DE ACCIÓN (GENERAL) --- */
/* ====================================================================== */

/* Cabecera y celda de ACCIÓN (ajustamos el ancho mínimo para dar espacio al margen de los botones) */
.tab-content .table th.action-col,
.tab-content .table td.action-col-td {
    width: 190px; /* Ancho fijo para esta columna */
    min-width: 190px; /* Mínimo para que quepan los dos botones con espacio */
    text-align: center !important;
    white-space: nowrap;
    padding: 0.9rem 1.1rem !important; /* Padding pequeño para centrar los botones */
}

/* Botones de acción de Catálogos (Añadimos margen para separarlos) */
.tab-content .table td.action-col-td .btn-sm {
    /* 🔥 REGLA CLAVE: Margen a la derecha e izquierda para separarlos */
    margin: 0 5px !important;

    padding: 0.9rem 1.3rem !important;
    line-height: 1;
    border-radius: 6px;
    color: #ffffff !important; /* Asegurar texto blanco */
}

/* ÍCONO de Catálogos */
.tab-content .table td.action-col-td .btn-sm i {
    font-size: 1.2em;
}

/* ====================================================================== */
/* --- REGLAS ESPECÍFICAS POR PESTAÑA (SIN MODIFICAR) --- */
/* ====================================================================== */

/* --- PESTAÑA 1: CATEGORÍAS (#categories) --- */
#categories .table th:nth-child(1), #categories .table td:nth-child(1) {text-align: left; min-width: 250px; }
#categories .table th:nth-child(2), #categories .table td:nth-child(2) { text-align:left; width: 150px; min-width: 110px; }


/* --- PESTAÑA 2: ETIQUETAS DE ESTADO (#statuses) --- */
#statuses .table th:nth-child(1), #statuses .table td:nth-child(1) { text-align: left; min-width: 200px; }
#statuses .table th:nth-child(2), #statuses .table td:nth-child(2) { text-align: left; min-width: 150px; }


/* --- PESTAÑA 3: UBICACIONES (#locations) --- */
#locations .table th:nth-child(1), #locations .table td:nth-child(1) { min-width: 200px; }
#locations .table th:nth-child(2), #locations .table td:nth-child(2) { min-width: 180px; }
#locations .table th:nth-child(3), #locations .table td:nth-child(3) { min-width: 180px; }


/* --- PESTAÑA 4: MODELOS DE ACTIVO (#models) --- */
#models .table th:nth-child(1), #models .table td:nth-child(1) { text-align: left; min-width: 180px; }
#models .table th:nth-child(2), #models .table td:nth-child(2) { text-align: left; min-width: 160px; }
#models .table th:nth-child(3), #models .table td:nth-child(3) { text-align: left; min-width: 150px; }
#models .table th:nth-child(4), #models .table td:nth-child(4) { text-align: center; min-width: 180px; }

/* ====================================================================== */
/* --- 6. AJUSTES DE VISIBILIDAD DE PESTAÑAS (TABS) --- */
/* ====================================================================== */

/* Pestañas inactivas (no seleccionadas) */
.nav-tabs .nav-link {
    font-weight: 600;
    color: var(--primary-dark);
    background-color: #53789a;
    border: 1px solid var(--border-light);
    border-bottom-color: transparent !important;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    padding: 1rem 1.5rem;
    transition: all 0.3s ease;
}

/* Pestaña activa (seleccionada) */
.nav-tabs .nav-link.active {
    background-color: var(--accent-blue) !important;
    color: #ffffff;
    border-color: var(--accent-blue) !important;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

/* MODO OSCURO */
body.dark-mode .nav-tabs .nav-link {
    color: #ADB5BD;
    background-color: #242424;
    border-color: #3d3d3d;
}

body.dark-mode .tab-content {
    background-color: var(--dm-bg-card);
    border-color: #3d3d3d;
}

/* ====================================================================== */
/* --- ARREGLO DE SUPERPOSICIÓN Y ESTANDARIZACIÓN DE TÍTULOS --- */
/* ====================================================================== */

/* Arreglo para la superposición: Asegura que la navegación de pestañas tenga margen inferior */
.nav-tabs {
    /* CLAVE: Añade un margen inferior para separar las pestañas del contenido que sigue */
    margin-bottom: 1.5rem !important;
    padding-top: 0.5rem; /* Pequeño ajuste para alinear visualmente */
}

/* Título de la tabla dentro de la pestaña (ej: Lista de Categorías) */
.tab-content .tab-title {
    /* CLAVE: Empujar el título hacia abajo con margen superior e inferior */
    margin-top: 1rem;
    margin-bottom: 1.5rem !important;

    font-size: 1.25rem;
    font-weight: 600;
    color: var(--primary-dark); /* MODO CLARO: Color oscuro por defecto */
}

/* Título principal de la página (Gestión de Catálogos) */
.page-title {
    /* CLAVE: MODO CLARO: Color de acento azul */
    color: var(--primary-dark);
    font-weight: 700;
}

/* Espacio debajo del botón de acción "Añadir Nueva Categoría" */
.tab-content .btn-success {
    margin-bottom: 1.5rem !important;
}

/* ====================================================================== */
/* --- AJUSTES EN MODO OSCURO (Estandarización de colores) --- */
/* ====================================================================== */

/* Título principal en MODO OSCURO */
body.dark-mode .page-title {
    /* Color blanco en MODO OSCURO */
    color: var(--dm-accent-light) !important;
}

/* Título de la tabla dentro de la pestaña en MODO OSCURO */
body.dark-mode .tab-content .tab-title {
    color: var(--dm-text-dark);
}

/* MODO OSCURO para las pestañas inactivas (ya definidas) */
body.dark-mode .nav-tabs .nav-link {
    color: #ADB5BD;
    background-color: #242424;
    border-color: #3d3d3d;
}

/* MODO OSCURO para el fondo de contenido (ya definido) */
body.dark-mode .tab-content {
    background-color: var(--dm-bg-card);
    border-color: #3d3d3d;
}



/* 1. Fondo y Texto del Modal */
body.dark-mode .swal2-popup {
    background-color: var(--dm-bg-card) !important;
    color: var(--dm-text-dark) !important;
    border: 1px solid var(--dm-border-light) !important;
}
body.dark-mode .swal2-title,
body.dark-mode .swal2-content {
    color: var(--dm-text-dark) !important;
}

/* 2. ✅ Visibilidad de Botones del Modal */
/* Fuerza el color de texto a blanco para los botones de SweetAlert en modo oscuro */
body.dark-mode .swal2-actions button {
    color: #ffffff !important;
}

.page-container.page-container-wide {
    max-width: 1700px; /* <-- ¡Cámbialo al ancho que quieras! */
}
/* ====================================================================== */
/* --- MODIFICACIÓN: APLICAR BRILLO CELESTE UNIFICADO A CUADROS --- */
/* ====================================================================== */

/* --- MODO CLARO --- */
/* Esta es la lista de todos los selectores de "cuadros" principales.
  Puedes añadir o quitar selectores si lo necesitas.
*/
.login-container,
.container.mt-5,
.dashboard-card,
.permisos-container,
.search-add-section,
.stock-filter-section,
.modal-content,
.form-section,
.table-section,
.form-card,
.main-card,
.container-register,
.control-bar,
.tab-content,
.table-scroll-container,
.container-stock .page-title-section,
.card {
    /* Esta regla UNIFICA la sombra para todos los cuadros.
      Combina tu sombra de "brillo" (glow) con una sombra de "elevación" estándar.
    */
    box-shadow: 0 0 15px 1px var(--glow-border-light), 0 10px 30px var(--shadow-medium);
}

/* --- MODO OSCURO --- */
/* Aplicamos la misma lógica, pero usando las variables de brillo
  y sombra del modo oscuro.
*/
body.dark-mode .login-container,
body.dark-mode .container.mt-5,
body.dark-mode .dashboard-card,
body.dark-mode .permisos-container,
body.dark-mode .search-add-section,
body.dark-mode .stock-filter-section,
body.dark-mode .modal-content,
body.dark-mode .form-section,
body.dark-mode .table-section,
body.dark-mode .form-card,
body.dark-mode .main-card,
body.dark-mode .container-register,
body.dark-mode .control-bar,
body.dark-mode .tab-content,
body.dark-mode .table-scroll-container,
body.dark-mode .container-stock .page-title-section,
body.dark-mode .card {
    /* Usamos el 'glow' cian (var(--glow-border-dark))
      + la sombra de elevación oscura (var(--dm-shadow-medium)).
    */
    box-shadow: 0 0 9px 3px var(--glow-border-dark), 0 10px 30px var(--dm-shadow-medium);
}

/* NOTA: Tu login en modo oscuro usaba un truco con '::before' y 'border'.
   Lo anulamos aquí para que use 'box-shadow' igual que el resto y
   sea consistente.
*/
body.dark-mode .login-container::before {
    display: none; /* Desactiva el brillo de borde antiguo */
}

/* Estilos para el Avatar en el Navbar */
.nav-avatar {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #00d4ff; /* Borde neón a juego */
    margin-right: 10px;
    background-color: #000;
}

.user-dropdown-link {
    display: flex;
    align-items: center;
    color: rgba(255,255,255,0.9) !important;
    padding-right: 0 !important;
}

.user-dropdown-link:hover {
    color: #fff !important;
}
/* Estilo para la Tarjeta de Infraestructura */
.dashboard-card.card-infrastructure .card-icon { color: #088395; }
.dashboard-card.card-infrastructure:hover .card-icon { color: #066a7a; }
.dashboard-card.card-infrastructure .btn-primary {
  background: linear-gradient(135deg, #088395, #066a7a);
  border: none;
}
.forgot-link {
    color: #3498db; /* El azul brillante de la imagen */
    text-decoration: underline; /* Subrayado */
    font-size: 0.9rem;
    transition: color 0.3s ease;
    font-weight: 500;
}

.forgot-link:hover {
    color: #217dbb; /* Un tono un poco más oscuro al pasar el mouse */
    text-decoration: underline;
}

/* Asegura que el contenedor no tenga márgenes extraños */
.text-end {
    text-align: right !important;
    margin-top: -5px; /* Ajuste opcional para pegarlo un poco más al input */
}