/* ==========================================================
   1. VARIABLES GLOBALES (El ADN de Cybersoft)
   ========================================================== */
:root {
    /* Nueva Paleta Esmeralda Tecnológico */
    --color-primario: #10b981;     /* Esmeralda vibrante */
    --color-secundario: #64748b;   /* Gris azulado (Slate) */
    --color-oscuro: #0f172a;       /* Azul noche muy profundo */
    --color-fondo: #f8f9fa;        /* Fondo general claro */
    
    /* Variables para que Bootstrap obedezca nuestro nuevo color */
    --bs-primary: #10b981;
    --bs-primary-rgb: 16, 185, 129;
    
    /* Sombras premium */
    --sombra-suave: 0 4px 6px rgba(0, 0, 0, 0.05);
    --sombra-fuerte: 0 10px 20px rgba(0, 0, 0, 0.12);
    
    /* Tiempos de animación */
    --transicion-rapida: all 0.2s ease-in-out;
    --transicion-suave: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* ==========================================================
   2. CUSTOM SCROLLBAR (Adiós a la barra fea por defecto)
   ========================================================== */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
::-webkit-scrollbar-track {
    background: #f1f1f1; 
}
::-webkit-scrollbar-thumb {
    background: #c1c1c1; 
    border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
    background: var(--color-primario); 
}

/* ==========================================================
   3. CLASES UTILITARIAS Y EFECTOS (Frontend y Backend)
   ========================================================== */

/* Efecto de elevación para Tarjetas (Cards) */
.hover-shadow {
    transition: var(--transicion-suave);
    box-shadow: var(--sombra-suave);
}
.hover-shadow:hover {
    transform: translateY(-5px);
    box-shadow: var(--sombra-fuerte) !important;
}

/* Transición universal para elementos interactivos */
.transition-all {
    transition: var(--transicion-rapida);
}

/* Enlaces con subrayado animado (Ideal para el menú público) */
.nav-link-animado {
    position: relative;
    display: inline-block;
}
.nav-link-animado::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    display: block;
    margin-top: 2px;
    right: 0;
    background: var(--color-primario);
    transition: width 0.3s ease;
}
.nav-link-animado:hover::after {
    width: 100%;
    left: 0;
    background: var(--color-primario);
}

/* ==========================================================
   3. AJUSTES GLOBALES Y MODO CLARO (Light Aurora)
   ========================================================== */
body {
    /* Degradado diurno ULTRA-SUAVE: Menta nube y Celeste brisa */
    background: linear-gradient(-45deg, #ffffff, #dcfce7, #e0f2fe, #fdfdfd);
    background-size: 400% 400%;
    animation: auroraLight 20s ease infinite;
    background-attachment: fixed;
    color: var(--color-oscuro);
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
    -webkit-font-smoothing: antialiased;
}

@keyframes auroraLight {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}
/* Tarjetas de Cristal Esmerilado Blanco (Día) */
.card-producto,
.card-info-contacto,
.card,
.card-cliente {
    background-color: rgba(255, 255, 255, 0.7) !important; 
    backdrop-filter: blur(16px) saturate(150%);
    -webkit-backdrop-filter: blur(16px) saturate(150%);
    border: 1px solid rgba(255, 255, 255, 0.8) !important; 
    box-shadow: 0 8px 32px rgba(16, 185, 129, 0.05) !important; /* Sombra esmeralda muy sutil */
}

.contenedor-img-producto {
    background-color: rgba(255, 255, 255, 0.4) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.6) !important;
}
/* ==========================================================
   4. EFECTOS PREMIUM PARA EL FRONTEND
   ========================================================== */

/* Efecto Cristal (Glassmorphism) para el Menú Público */
.navbar-glass {
    background: rgba(33, 37, 41, 0.85) !important; /* Fondo oscuro casi transparente */
    backdrop-filter: blur(12px); /* Desenfoca lo que hay detrás */
    -webkit-backdrop-filter: blur(12px); /* Soporte para Safari */
    border-bottom: 1px solid rgba(255, 255, 255, 0.05); /* Borde sutil brillante */
    transition: var(--transicion-suave);
}

/* Botón Premium (Degradado y resplandor) - Ideal para llamados a la acción */

.btn-premium {
    /* Degradado Esmeralda a Teal brillante */
    background: linear-gradient(135deg, var(--color-primario) 0%, #2dd4bf 100%);
    border: none;
    color: white !important;
    box-shadow: 0 4px 15px rgba(16, 185, 129, 0.4);
    transition: var(--transicion-rapida);
    position: relative;
    overflow: hidden;
    z-index: 1;
}

/* Efecto hover del Botón Premium */
.btn-premium::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(135deg, #2dd4bf 0%, var(--color-primario) 100%);
    z-index: -1;
    transition: opacity 0.3s ease;
    opacity: 0;
}
.btn-premium:hover::before {
    opacity: 1;
}
.btn-premium:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(16, 185, 129, 0.5);
}

/* Botón especial para EcoFact (Verde Esmeralda) */
.btn-ecofact {
    background: linear-gradient(135deg, #198754 0%, #20c997 100%);
    border: none;
    color: white !important;
    box-shadow: 0 4px 15px rgba(25, 135, 84, 0.4);
    transition: var(--transicion-rapida);
}
.btn-ecofact:hover {
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 6px 20px rgba(25, 135, 84, 0.6);
}

/* ==========================================================
   5. TARJETAS DE PRODUCTO (Catálogo Público)
   ========================================================== */
.card-producto {
    border: none;
    border-radius: 16px;
    background: #ffffff;
    box-shadow: 0 4px 15px rgba(0,0,0,0.03);
    transition: var(--transicion-suave);
    overflow: hidden;
    position: relative;
}
.card-producto:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 25px rgba(0,0,0,0.08);
}
.contenedor-img-producto {
    height: 220px;
    background-color: #f8f9fa; /* Fondo gris muy claro para resaltar PNGs */
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
    padding: 1rem;
}
.img-zoom {
    max-height: 100%;
    max-width: 100%;
    object-fit: contain;
    transition: transform 0.6s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.card-producto:hover .img-zoom {
    transform: scale(1.1); /* Efecto de acercamiento sutil */
}
.badge-flotante {
    position: absolute;
    top: 15px;
    right: 15px;
    z-index: 10;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

/* ==========================================================
   6. ESTILOS PREMIUM PARA EL BACKEND (Panel Admin)
   ========================================================== */
.table-custom {
    border-collapse: separate !important;
    border-spacing: 0 8px !important; /* Separa las filas entre sí */
    background: transparent;
}
.table-custom thead th {
    border: none;
    text-transform: uppercase;
    font-size: 0.8rem;
    letter-spacing: 1px;
    color: var(--color-secundario);
    background: transparent !important;
}
.table-custom tbody tr {
    background-color: #ffffff;
    box-shadow: 0 2px 5px rgba(0,0,0,0.02);
    transition: var(--transicion-rapida);
}
.table-custom tbody tr:hover {
    transform: translateY(-2px) scale(1.005);
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
}
.table-custom tbody td {
    border: none;
    vertical-align: middle;
    padding: 1rem;
}
/* Redondear las esquinas de la primera y última celda de cada fila */
.table-custom tbody td:first-child { border-top-left-radius: 10px; border-bottom-left-radius: 10px; }
.table-custom tbody td:last-child { border-top-right-radius: 10px; border-bottom-right-radius: 10px; }
/* ==========================================================
   7. LOGIN GLASSMORPHISM (La Puerta del Backend)
   ========================================================== */
.bg-login {
    /* 1. REGLAS NUEVAS PARA FORZAR PANTALLA COMPLETA */
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 9999; /* Asegura que esté por encima de cualquier otro elemento blanco */
    margin: 0;
    padding: 0;

    /* 2. El degradado que ya teníamos */
    background: linear-gradient(-45deg, #0f2027, #203a43, #2c5364, #0d6efd);
    background-size: 400% 400%;
    animation: degradadoLogin 15s ease infinite;
    
    /* 3. Centrado del contenido */
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Animación sutil para que el fondo se mueva */
@keyframes degradadoLogin {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* La Tarjeta de Cristal */
.card-glass {
    background: rgba(255, 255, 255, 0.05); /* Súper transparente */
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 24px;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3);
    color: white;
}

/* Campos de texto de cristal */
.card-glass .form-control {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: white;
    border-radius: 12px;
}
.card-glass .form-control:focus {
    background: rgba(255, 255, 255, 0.1);
    color: white;
    box-shadow: 0 0 15px rgba(13, 110, 253, 0.4);
    border-color: rgba(13, 110, 253, 0.6);
}
.card-glass .form-control::placeholder {
    color: rgba(255, 255, 255, 0.5);
}
.card-glass .input-group-text {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: rgba(255, 255, 255, 0.7);
}
/* ==========================================================
   8. FONDOS TECH Y LUCES NEÓN (Para la página de Software)
   ========================================================== */
.bg-deep-tech {
    background-color: #020617; /* Slate casi negro para resaltar el neón */
    position: relative;
    overflow: hidden;
}

/* Esferas de luz desenfocadas para refractar en el cristal */
.luz-neon-verde {
    position: absolute;
    width: 400px;
    height: 400px;
    background: #10b981; /* Esmeralda */
    border-radius: 50%;
    filter: blur(120px);
    opacity: 0.3;
    top: -100px;
    left: -100px;
    z-index: 0;
}

.luz-neon-azul {
    position: absolute;
    width: 500px;
    height: 500px;
    background: #0ea5e9; /* Sky blue para dar contraste frío */
    border-radius: 50%;
    filter: blur(150px);
    opacity: 0.25;
    bottom: -150px;
    right: -100px;
    z-index: 0;
}
/* ==========================================================
   9. FOOTER PREMIUM
   ========================================================== */
.footer-link {
    transition: var(--transicion-rapida);
    display: inline-block;
}
.footer-link:hover {
    color: var(--color-primario) !important;
    padding-left: 8px; /* Pequeño desplazamiento a la derecha */
}
.hover-primary {
    display: inline-block;
    transition: var(--transicion-rapida);
}
.hover-primary:hover {
    color: var(--color-primario) !important;
    transform: translateY(-4px); /* El icono salta ligeramente */
}
/* ==========================================================
   10. MODO OSCURO (Aurora Glassmorphism)
   ========================================================== */
/* 1. Fondo Aurora Animado (Mesh Gradient) */
[data-bs-theme="dark"] body {
    /* Mezclamos Azul Noche, Verde Bosque oscuro y Teal profundo */
    background: linear-gradient(-45deg, #0f172a, #064e3b, #115e59, #0f172a) !important;
    background-size: 400% 400% !important;
    animation: auroraDark 20s ease infinite !important;
    background-attachment: fixed !important;
    color: #f8fafc;
}

@keyframes auroraDark {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* 2. Tarjetas de Cristal Esmerilado (Frosted Glass) */
[data-bs-theme="dark"] .card-producto,
[data-bs-theme="dark"] .bg-light,
[data-bs-theme="dark"] .card,
[data-bs-theme="dark"] .card-info-contacto,
[data-bs-theme="dark"] .card-cliente {
    background-color: rgba(15, 23, 42, 0.65) !important; 
    backdrop-filter: blur(16px) saturate(150%);
    -webkit-backdrop-filter: blur(16px) saturate(150%);
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

/* 3. Ajuste de contenedores para dejar pasar la luz */
[data-bs-theme="dark"] .contenedor-img-producto {
    background-color: rgba(15, 23, 42, 0.3) !important; 
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
}

/* 4. Textos claros y brillantes para contraste */
[data-bs-theme="dark"] .card-producto h5,
[data-bs-theme="dark"] .card-producto .text-dark,
[data-bs-theme="dark"] h1, 
[data-bs-theme="dark"] h2, 
[data-bs-theme="dark"] h3, 
[data-bs-theme="dark"] h4 {
    color: #ffffff !important;
}

[data-bs-theme="dark"] .text-muted {
    color: #cbd5e1 !important; 
}
/* ==========================================================
   11. ANIMACIONES EXTRA (Para la página Nosotros)
   ========================================================== */
.floating-icon {
    animation: floatAnim 6s ease-in-out infinite;
    display: inline-block;
}

@keyframes floatAnim {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-20px); }
    100% { transform: translateY(0px); }
}

/* ==========================================================
   12. CLIENTES Y ALIANZAS (Efecto Grayscale)
   ========================================================== */
.card-cliente {
    background: #ffffff;
    border: 1px solid rgba(0,0,0,0.05);
    transition: var(--transicion-suave);
    position: relative;
    overflow: hidden;
}
/* El logo inicia en gris y semi-transparente */
.card-cliente img {
    filter: grayscale(100%) opacity(60%);
    transition: var(--transicion-suave);
}
/* Al pasar el mouse, recupera su color y la tarjeta flota */
.card-cliente:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 24px rgba(0,0,0,0.06);
    border-color: var(--color-primario);
}
.card-cliente:hover img {
    filter: grayscale(0%) opacity(100%);
    transform: scale(1.05);
}

/* --- Adaptación Inteligente al Modo Oscuro --- */
[data-bs-theme="dark"] .card-cliente {
    background: rgba(255,255,255,0.02);
    border-color: #334155;
}
/* Si es modo oscuro, aumentamos el brillo del gris para que resalte en el fondo negro */
[data-bs-theme="dark"] .card-cliente img {
    filter: grayscale(100%) brightness(150%) opacity(70%); 
}
[data-bs-theme="dark"] .card-cliente:hover img {
    filter: grayscale(0%) brightness(100%) opacity(100%);
}

/* ==========================================================
   13. PÁGINA DE CONTACTO (Premium UI)
   ========================================================== */
.card-info-contacto {
    background: #ffffff;
    border: none;
    border-radius: 16px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.03);
    transition: var(--transicion-suave);
    border-left: 4px solid transparent;
}
.card-info-contacto:hover {
    transform: translateX(10px); /* Se desliza a la derecha */
    box-shadow: 0 10px 25px rgba(0,0,0,0.08);
    border-left-color: var(--color-primario);
}
.icon-circle {
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 1.5rem;
    background: rgba(13, 110, 253, 0.1); /* Fondo azul semitransparente */
    color: var(--color-primario);
    transition: var(--transicion-rapida);
}
.card-info-contacto:hover .icon-circle {
    background: var(--color-primario);
    color: #ffffff;
}

/* Inputs del formulario moderno */
.form-premium .form-control {
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    padding: 0.8rem 1.2rem;
    transition: var(--transicion-rapida);
    background-color: #f8fafc;
}
.form-premium .form-control:focus {
    border-color: var(--color-primario);
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.15);
    background-color: #ffffff;
}

/* Adaptación al Modo Oscuro */
[data-bs-theme="dark"] .card-info-contacto {
    background-color: #1e293b;
    box-shadow: 0 4px 15px rgba(0,0,0,0.4);
}
[data-bs-theme="dark"] .form-premium .form-control {
    background-color: #0f172a;
    border-color: #334155;
    color: #f8fafc;
}
[data-bs-theme="dark"] .form-premium .form-control:focus {
    border-color: var(--color-primario);
}

/* ==========================================================
   14. PANEL DE ADMINISTRACIÓN PREMIUM (SaaS Glass UI)
   ========================================================== */
/* Fondo global del Admin hereda el Aurora del Frontend */
.bg-admin-content {
    background: transparent; /* Deja ver el fondo animado del body */
}

/* Sidebar de Cristal */
.sidebar-admin {
    background: rgba(255, 255, 255, 0.6); 
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-right: 1px solid rgba(255, 255, 255, 0.4);
    box-shadow: 4px 0 25px rgba(0,0,0,0.05);
    z-index: 1040;
    transition: var(--transicion-suave);
}
.sidebar-admin .nav-link {
    color: var(--color-secundario);
    border-radius: 12px;
    margin-bottom: 5px;
    padding: 12px 20px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    font-weight: 500;
}
.sidebar-admin .nav-link:hover {
    color: var(--color-primario);
    background-color: rgba(16, 185, 129, 0.1); /* Toque esmeralda al pasar el mouse */
    transform: translateX(5px);
}
.sidebar-admin .nav-link.active {
    background: linear-gradient(135deg, var(--color-primario), #2dd4bf);
    color: #ffffff !important;
    box-shadow: 0 4px 15px rgba(16, 185, 129, 0.4);
    font-weight: 600;
}

/* Navbar Superior Admin (Glassmorphism) */
.navbar-admin {
    background: rgba(255, 255, 255, 0.5) !important;
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border-bottom: 1px solid rgba(255,255,255,0.4);
    z-index: 1030;
}

/* Tarjetas Globales del Admin (Paneles) */
.card-admin {
    background: rgba(255, 255, 255, 0.75);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: 20px;
    box-shadow: 0 8px 32px rgba(16, 185, 129, 0.05);
    transition: all 0.3s ease;
}

/* ==========================================================
   15. ADAPTACIÓN DEL PANEL ADMIN AL MODO OSCURO
   ========================================================== */
/* Sidebar y Navbar Oscuros */
[data-bs-theme="dark"] .sidebar-admin,
[data-bs-theme="dark"] .navbar-admin {
    background: rgba(15, 23, 42, 0.6) !important; 
    border-color: rgba(255, 255, 255, 0.05);
}
[data-bs-theme="dark"] .sidebar-admin .nav-link {
    color: #cbd5e1;
}

/* Tarjetas Admin en Modo Oscuro */
[data-bs-theme="dark"] .card-admin {
    background: rgba(30, 41, 59, 0.65);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

/* Corrección forzada de textos en Modo Oscuro */
[data-bs-theme="dark"] .card-admin .text-dark,
[data-bs-theme="dark"] .sidebar-admin .text-dark,
[data-bs-theme="dark"] .card-admin h1,
[data-bs-theme="dark"] .card-admin h2,
[data-bs-theme="dark"] .card-admin h3,
[data-bs-theme="dark"] .card-admin h4,
[data-bs-theme="dark"] .card-admin h5,
[data-bs-theme="dark"] .card-admin label {
    color: #ffffff !important; 
}
[data-bs-theme="dark"] .card-admin .text-muted {
    color: #94a3b8 !important; 
}

/* Tablas y Formularios en Modo Oscuro */
[data-bs-theme="dark"] .table-custom tbody tr {
    background-color: rgba(15, 23, 42, 0.4);
    color: #f8fafc;
}
[data-bs-theme="dark"] .table-custom tbody td {
    border-bottom: 1px solid rgba(255,255,255,0.05);
}
[data-bs-theme="dark"] .form-control, 
[data-bs-theme="dark"] .form-select {
    background-color: rgba(15, 23, 42, 0.5) !important;
    border-color: rgba(255,255,255,0.1);
    color: #f8fafc;
}
/* ==========================================================
   CORRECCIÓN PROFUNDA DE MODALES Y FONDOS EN MODO OSCURO
   ========================================================== */
/* 1. Anulamos los fondos blancos forzados (bg-white y bg-light) */
[data-bs-theme="dark"] .bg-white,
[data-bs-theme="dark"] .bg-light {
    background-color: rgba(15, 23, 42, 0.4) !important;
    border-color: rgba(255, 255, 255, 0.05) !important;
    color: #f8fafc !important;
}

/* 2. Convertimos los Modales (Ventanas emergentes) en Cristal Oscuro */
[data-bs-theme="dark"] .modal-content {
    background: rgba(30, 41, 59, 0.85) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 15px 35px rgba(0,0,0,0.5) !important;
}
[data-bs-theme="dark"] .modal-header, 
[data-bs-theme="dark"] .modal-footer {
    background: transparent !important;
    border-color: rgba(255, 255, 255, 0.05) !important;
}

/* 3. Forzamos lectura clara en textos dentro de Modales y tarjetas claras */
[data-bs-theme="dark"] .modal-content .text-dark,
[data-bs-theme="dark"] .modal-content label,
[data-bs-theme="dark"] .modal-content h5,
[data-bs-theme="dark"] .bg-white .text-dark,
[data-bs-theme="dark"] .bg-light .text-dark,
[data-bs-theme="dark"] .bg-white h5,
[data-bs-theme="dark"] .bg-light h5 {
    color: #ffffff !important;
}
[data-bs-theme="dark"] .modal-content .text-muted,
[data-bs-theme="dark"] .bg-white .text-muted,
[data-bs-theme="dark"] .bg-light .text-muted {
    color: #cbd5e1 !important; /* Gris claro para los subtítulos */
}

/* ==========================================================
   16. OCULTAR BADGE FLOTANTE DE RECAPTCHA V3
   ========================================================== */
.grecaptcha-badge { 
    visibility: hidden !important; 
}

/* ==========================================================
   17. SWEETALERT 2 PREMIUM (Modales de Cristal)
   ========================================================== */
/* 1. Fondo oscuro detrás de la alerta con efecto Blur de cristal */
.swal2-container.swal2-backdrop-show, 
.swal2-container.swal2-noanimation {
    background: rgba(15, 23, 42, 0.6) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
}

/* 2. La caja principal de la alerta */
.swal2-popup {
    background: rgba(255, 255, 255, 0.85) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    border: 1px solid rgba(255, 255, 255, 0.6) !important;
    border-radius: 24px !important; /* Más redondeado y amigable */
    box-shadow: 0 15px 35px rgba(0,0,0,0.1) !important;
    padding: 2em !important; /* Más aire interior */
}

/* 3. Textos y separación */
.swal2-title { 
    color: var(--color-oscuro) !important; 
    font-weight: 700 !important; 
    font-size: 1.5rem !important;
}
.swal2-html-container { 
    color: var(--color-secundario) !important; 
    font-size: 1.1rem !important;
}
.swal2-actions {
    margin-top: 1.5em !important;
}

/* 4. Forma de los botones (Heredan nuestra forma de pastilla y sombras) */
.swal2-styled {
    border-radius: 50rem !important; /* Forma redondeada premium */
    font-weight: 600 !important;
    padding: 10px 28px !important;
    transition: var(--transicion-rapida) !important;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05) !important;
}
.swal2-styled:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 15px rgba(0,0,0,0.15) !important;
}

/* 5. Adaptación inteligente al Modo Oscuro (Azul Pizarra) */
[data-bs-theme="dark"] .swal2-popup {
    background: rgba(30, 41, 59, 0.85) !important; 
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 15px 35px rgba(0,0,0,0.5) !important;
}
[data-bs-theme="dark"] .swal2-title { color: #f8fafc !important; }
[data-bs-theme="dark"] .swal2-html-container { color: #cbd5e1 !important; }
/* 6. Corrección de los bloques blancos en la animación de Success */
.swal2-success-circular-line-left,
.swal2-success-circular-line-right,
.swal2-success-fix {
    background-color: transparent !important;
}

/* 7. Colorear el "Visto Bueno" con el Esmeralda Cybersoft */
.swal2-success-ring {
    border-color: rgba(16, 185, 129, 0.3) !important; /* Anillo esmeralda suave */
}
.swal2-success-line-tip, 
.swal2-success-line-long {
    background-color: var(--color-primario) !important; /* Check esmeralda brillante */
}

/* ==========================================================
   18. RESPONSIVE BACKEND (Menú Móvil)
   ========================================================== */
@media (max-width: 768px) {
    .sidebar-admin {
        position: fixed !important;
        left: -320px; /* Oculto fuera de la pantalla por defecto */
        top: 0;
        transition: var(--transicion-suave);
    }
    .sidebar-admin.mostrar {
        left: 0; /* Entra suavemente cuando se activa */
    }
    /* Capa oscura que aparece detrás del menú en móviles */
    .sidebar-overlay {
        display: none;
        position: fixed;
        top: 0; left: 0; width: 100vw; height: 100vh;
        background: rgba(15, 23, 42, 0.6);
        backdrop-filter: blur(4px);
        -webkit-backdrop-filter: blur(4px);
        z-index: 1035;
        transition: var(--transicion-rapida);
    }
    .sidebar-overlay.mostrar {
        display: block;
    }
}

/* ==========================================================
   19. MICRO-INTERACCIONES DEL MENÚ PÚBLICO (Frontend)
   ========================================================== */

/* 1. Efecto Latido (Pulse) Esmeralda para llamar la atención */
.pulse-animado {
    animation: pulse-esmeralda 2s infinite;
}
.pulse-animado:hover {
    animation: none; 
}

@keyframes pulse-esmeralda {
    /* Combinamos la sombra base del botón con la onda que se expande */
    0% { box-shadow: 0 4px 15px rgba(16, 185, 129, 0.4), 0 0 0 0 rgba(16, 185, 129, 0.8); }
    70% { box-shadow: 0 4px 15px rgba(16, 185, 129, 0.4), 0 0 0 15px rgba(16, 185, 129, 0); }
    100% { box-shadow: 0 4px 15px rgba(16, 185, 129, 0.4), 0 0 0 0 rgba(16, 185, 129, 0); }
}

/* 2. Efecto de "Respiración Tecnológica" para el Icono CPU */
.logo-cpu-animado {
    display: inline-block;
    animation: glow-cpu 2.5s infinite alternate;
}
@keyframes glow-cpu {
    0% { filter: drop-shadow(0 0 2px rgba(13, 110, 253, 0.4)); transform: scale(1); }
    100% { filter: drop-shadow(0 0 10px rgba(13, 110, 253, 0.9)); transform: scale(1.08); }
}

/* 3. Subrayado elegante para los links del menú */
.navbar-glass .nav-link-animado {
    position: relative;
}
.navbar-glass .nav-link-animado::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: 0px; /* Ajusta qué tan pegada está la línea al texto */
    left: 50%;
    background-color: var(--color-primario);
    transition: all 0.3s ease-in-out;
    transform: translateX(-50%);
    border-radius: 2px;
}
.navbar-glass .nav-link-animado:hover::after,
.navbar-glass .nav-link-animado.active::after {
    width: 70%; /* La línea crece hasta el 70% del ancho de la palabra */
}
/* ==========================================================
   20. ENLACES DEL FOOTER
   ========================================================== */
.footer-link {
    color: rgba(255, 255, 255, 0.6);
    text-decoration: none;
    transition: all 0.3s ease;
    display: inline-block;
}
.footer-link:hover {
    color: var(--color-primario);
    transform: translateX(5px);
}
/* ==========================================================
   21. FORZAR COLORES BOOTSTRAP (Override a Esmeralda)
   ========================================================== */

/* 1. Botones Primarios (El clásico azul pasa a Esmeralda Premium) */
.btn-primary {
    background-color: var(--color-primario) !important;
    border-color: var(--color-primario) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 6px rgba(16, 185, 129, 0.2) !important;
}
.btn-primary:hover, 
.btn-primary:focus, 
.btn-primary:active {
    background-color: #059669 !important; /* Esmeralda ligeramente más oscuro para el hover */
    border-color: #059669 !important;
    box-shadow: 0 8px 15px rgba(16, 185, 129, 0.4) !important;
    transform: translateY(-2px);
}

/* 2. Botones de contorno (Outline) */
.btn-outline-primary {
    color: var(--color-primario) !important;
    border-color: var(--color-primario) !important;
}
.btn-outline-primary:hover {
    background-color: var(--color-primario) !important;
    color: #ffffff !important;
}

/* 3. Textos, Fondos y Bordes */
.text-primary { 
    color: var(--color-primario) !important; 
}
.bg-primary { 
    background-color: var(--color-primario) !important; 
}
.border-primary { 
    border-color: var(--color-primario) !important; 
}

/* 4. Badges (Etiquetas) y fondos translúcidos en el Backend */
.bg-primary.bg-opacity-10 {
    background-color: rgba(16, 185, 129, 0.1) !important;
}
.bg-primary.bg-opacity-25 {
    background-color: rgba(16, 185, 129, 0.25) !important;
}

/* 5. Corrección de Checkboxes y Switches en "Config. Contacto" */
.form-check-input:checked {
    background-color: var(--color-primario) !important;
    border-color: var(--color-primario) !important;
}
/* 6. Homologar el color "Success" al nuevo estándar Esmeralda */
.btn-success {
    background-color: var(--color-primario) !important;
    border-color: var(--color-primario) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 6px rgba(16, 185, 129, 0.2) !important;
}
.btn-success:hover, 
.btn-success:focus, 
.btn-success:active {
    background-color: #059669 !important; /* Un esmeralda ligeramente más oscuro */
    border-color: #059669 !important;
    box-shadow: 0 8px 15px rgba(16, 185, 129, 0.4) !important;
    transform: translateY(-2px);
}
.text-success { color: var(--color-primario) !important; }
.bg-success { background-color: var(--color-primario) !important; }
.border-success { border-color: var(--color-primario) !important; }

/* Ajuste fino para Badges transparentes success */
.bg-success.bg-opacity-10 { background-color: rgba(16, 185, 129, 0.1) !important; }
.bg-success.bg-opacity-25 { background-color: rgba(16, 185, 129, 0.25) !important; }
/* ==========================================================
   22. ANIMACIONES EXTRA (Catálogo)
   ========================================================== */
@keyframes fadeIn { 
    from { opacity: 0; transform: translateY(10px); } 
    to { opacity: 1; transform: translateY(0); } 
}
/* ==========================================================
   23. ESTILOS DE CONTENIDO ENRIQUECIDO (CKEditor)
   ========================================================== */
.contenido-rico h2, .contenido-rico h3 {
    color: var(--color-primario);
    font-weight: 800;
    margin-top: 3rem;
    margin-bottom: 1.5rem;
}
.contenido-rico h4 {
    font-weight: 700;
    margin-top: 2rem;
    color: var(--bs-heading-color);
}
.contenido-rico ul {
    margin-bottom: 2rem;
    padding-left: 1.5rem;
}
.contenido-rico li {
    margin-bottom: 0.8rem;
}
.contenido-rico img {
    max-width: 100%;
    height: auto;
    border-radius: 12px;
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
    margin: 2.5rem 0;
    display: block;
}
.contenido-rico a {
    color: var(--color-primario);
    text-decoration: none;
    font-weight: 600;
}
.contenido-rico a:hover {
    text-decoration: underline;
}
/* ==========================================================
   24. ESTILOS DE ARTÍCULOS DE BLOG (CKEditor)
   ========================================================== */
.contenido-articulo h2, .contenido-articulo h3 {
    color: var(--color-primario);
    font-weight: 800;
    margin-top: 3rem;
    margin-bottom: 1.5rem;
}
.contenido-articulo h4 {
    font-weight: 700;
    margin-top: 2rem;
    color: var(--bs-heading-color);
}
.contenido-articulo ul {
    margin-bottom: 2rem;
    padding-left: 1.5rem;
}
.contenido-articulo li {
    margin-bottom: 0.8rem;
}
.contenido-articulo img {
    max-width: 100%;
    height: auto;
    border-radius: 12px;
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
    margin: 2.5rem 0;
    display: block;
}
.contenido-articulo a {
    color: var(--color-primario);
    text-decoration: none;
    font-weight: 600;
}
.contenido-articulo a:hover {
    text-decoration: underline;
}
/* ==========================================================
   25. PANELES GLASSMORPHISM ADAPTABLES (Claro/Oscuro)
   ========================================================== */

/* 1. MODO CLARO: Cristal blanco translúcido (Estilo Apple/UI Moderno) */
:root[data-bs-theme="light"] {
    --glass-bg: rgba(255, 255, 255, 0.5); /* Blanco semitransparente */
    --glass-border: transparent; /* Borde blanco nítido */
    --glass-shadow: 0 8px 32px rgba(31, 38, 135, 0.05); /* Sombra muy suave */
    --glass-text-title: #0f172a; /* Textos oscuros para que se lean */
    --glass-text-p: #475569;
    --neon-opacity: 0.4; /* <-- AQUÍ BAJAMOS LA INTENSIDAD DE LAS ESFERAS */
}

/* 2. MODO OSCURO: Cristal profundo (Como lo tenías originalmente) */
:root[data-bs-theme="dark"] {
    --glass-bg: rgba(2, 6, 23, 0.6); /* Slate muy oscuro translúcido */
    --glass-border: rgba(255, 255, 255, 0.05); /* Borde muy sutil */
    --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.4); /* Sombra oscura */
    --glass-text-title: #ffffff; /* Textos blancos */
    --glass-text-p: rgba(255, 255, 255, 0.6);
    --neon-opacity: 0.3; /* Neones suaves de noche */
}

/* 3. CLASES PARA APLICAR EN EL HTML */
.panel-glassmorphism {
    background: var(--glass-bg) !important;
    border: 1px solid var(--glass-border) !important;
    box-shadow: var(--glass-shadow) !important;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    transition: all 0.4s ease;
}

.text-glass-title {
    color: var(--glass-text-title) !important;
    transition: color 0.4s ease;
}

.text-glass-p {
    color: var(--glass-text-p) !important;
    transition: color 0.4s ease;
}

/* Hacemos que las luces de neón obedezcan al modo claro/oscuro */
.luz-neon-azul, .luz-neon-verde {
    opacity: var(--neon-opacity);
    transition: opacity 0.4s ease;
}
/* ==========================================================
   26. MÓDULO BACKEND: DASHBOARD
   ========================================================== */

/* Línea superior decorativa de las tarjetas (Naranja) */
.card-admin-border-warning {
    position: relative;
    overflow: hidden;
}
.card-admin-border-warning::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 6px;
    background: linear-gradient(90deg, #f59e0b, #fbbf24);
}

/* Línea superior decorativa de las tarjetas (Esmeralda) */
.card-admin-border-success {
    position: relative;
    overflow: hidden;
}
.card-admin-border-success::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 6px;
    background: linear-gradient(90deg, #10b981, #34d399);
}

/* Tarjeta de Bienvenida del Dashboard */
.card-admin-welcome {
    background: linear-gradient(135deg, var(--color-primario), #2dd4bf) !important;
    color: white;
    position: relative;
    overflow: hidden;
}

/* Marca de agua (Icono CPU gigante) en la tarjeta de bienvenida */
.card-admin-welcome .watermark-icon {
    position: absolute;
    font-size: 10rem;
    right: -20px;
    bottom: -30px;
    opacity: 0.1;
    z-index: 0;
}
/* ==========================================================
   27. MÓDULO BACKEND: INICIO (Gestión Carrusel)
   ========================================================== */
.img-thumbnail-admin {
    width: 80px; 
    height: 45px; 
    object-fit: cover; 
    border-radius: 4px; /* Un toque sutilmente redondeado */
}
/* ==========================================================
   28. MÓDULO BACKEND: INFO EMPRESA
   ========================================================== */
.img-preview-admin {
    max-height: 80px;
    object-fit: contain;
}
/* ==========================================================
   29. MÓDULO BACKEND: CLIENTES
   ========================================================== */
/* Vista previa del logo en la tabla */
.img-logo-admin {
    height: 40px; 
    object-fit: contain;
}
/* Forzamos que el botón de eliminar no rompa la estructura de la tabla */
.form-inline-admin {
    display: inline-block;
}
/* Texto micro para las instrucciones del formulario */
.text-micro {
    font-size: 0.7rem;
}
/* ==========================================================
   30. MÓDULO BACKEND: BLOG ADMIN
   ========================================================== */
/* Miniatura de las portadas en la tabla */
.img-portada-admin {
    width: 80px; 
    height: 50px; 
    object-fit: cover;
}
/* Limitar el ancho del título en la tabla para que no se desborde */
.text-truncate-admin {
    max-width: 250px;
}
/* Vista previa de la portada en el Modal de Edición */
.img-preview-portada {
    max-height: 120px; 
    object-fit: cover;
}
/* Altura mínima para el editor de texto enriquecido (CKEditor) */
.ck-editor__editable_inline {
    min-height: 400px !important;
}
/* ==========================================================
   31. ADAPTACIÓN DE CKEDITOR AL MODO OSCURO
   ========================================================== */

/* 1. Fondo oscuro y texto claro para el área de escritura principal */
[data-bs-theme="dark"] .ck-editor__editable_inline {
    background-color: rgba(15, 23, 42, 0.5) !important; /* Azul pizarra oscuro y translúcido */
    color: #f8fafc !important; /* Texto blanco brillante para lectura perfecta */
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow: inset 0 2px 10px rgba(0,0,0,0.2) !important;
}

/* 2. Fondo oscuro para la barra de herramientas (Toolbar superior) */
[data-bs-theme="dark"] .ck.ck-toolbar {
    background-color: rgba(30, 41, 59, 0.85) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-bottom: none !important;
}

/* 3. Color de los iconos en la barra de herramientas para que se vean bien */
[data-bs-theme="dark"] .ck.ck-icon,
[data-bs-theme="dark"] .ck.ck-button__label {
    color: #cbd5e1 !important; /* Gris claro */
}

/* 4. Efecto Hover en los botones de la barra de herramientas */
[data-bs-theme="dark"] .ck.ck-button:hover,
[data-bs-theme="dark"] .ck.ck-button.ck-on {
    background-color: rgba(255, 255, 255, 0.15) !important;
    color: #ffffff !important;
}

/* 5. Los pequeños paneles desplegables (cuando abres opciones en el editor) */
[data-bs-theme="dark"] .ck.ck-dropdown__panel {
    background-color: #1e293b !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}
/* ==========================================================
   32. MÓDULO BACKEND: PRODUCTOS ADMIN
   ========================================================== */
/* Miniatura de los productos en la tabla */
.img-producto-admin {
    width: 50px; 
    height: 50px; 
    object-fit: cover;
}
/* Vista previa de la imagen en el Modal de Edición */
.img-preview-producto {
    max-height: 80px;
}
/* Ajuste de altura exclusivo para el CKEditor de Productos (sin afectar al Blog) */
#modalNuevoProducto .ck-editor__editable_inline,
#modalEditarProducto .ck-editor__editable_inline {
    min-height: 250px !important;
}
/* ==========================================================
   33. MÓDULO BACKEND: MENSAJES (Bandeja de Entrada)
   ========================================================== */
/* Ancho de la columna principal del mensaje */
.col-mensaje-admin {
    width: 40%;
}

/* Caja de lectura con scroll interno para mensajes largos */
.caja-lectura-mensaje {
    max-height: 80px; 
    overflow-y: auto; 
    font-size: 0.85rem; 
    line-height: 1.5;
}
/* ==========================================================
   34. CLASES DE UTILIDAD GENERAL (BACKEND)
   ========================================================== */
/* Forzar el cursor de puntero (manito) en elementos clickeables */
.cursor-pointer-admin {
    cursor: pointer !important;
}
/* ==========================================================
   35. MÓDULO BACKEND: AUDITORÍA
   ========================================================== */
/* Contenedor con scroll interno para tablas de gran tamaño */
.table-scroll-admin {
    max-height: 600px; 
    overflow-y: auto;
}
/* Tamaño de texto extra pequeño para los badges de rol */
.badge-rol-micro {
    font-size: 0.65rem;
}
/* ==========================================================
   36. MÓDULO BACKEND: LOGIN
   ========================================================== */
/* Brillo del icono principal del Login */
.icon-login-logo {
    font-size: 3.5rem; 
    filter: drop-shadow(0 0 10px rgba(13,110,253,0.5));
}
/* Subtítulo del panel */
.text-login-subtitle {
    color: rgba(255,255,255,0.6); 
    font-size: 0.9rem;
}
/* Textos legales pequeñitos (reCAPTCHA) */
.text-login-legal {
    font-size: 0.65rem; 
    color: rgba(255,255,255,0.4); 
    line-height: 1.4;
}
/* Enlaces legales (Privacidad y Términos) */
.link-login-legal {
    color: rgba(255,255,255,0.6); 
    border-bottom: 1px solid rgba(255,255,255,0.3);
    text-decoration: none;
    transition: all 0.3s ease;
}
.link-login-legal:hover {
    color: #ffffff;
    border-bottom-color: #ffffff;
}
/* Enlace para volver a la web */
.link-login-back {
    color: rgba(255,255,255,0.5); 
    font-size: 0.85rem;
    text-decoration: none;
    transition: all 0.3s ease;
}
.link-login-back:hover {
    color: #ffffff;
}
/* ==========================================================
   BOTONES CAMALEÓN (Glassmorphism para Botones Secundarios)
   ========================================================== */
/* Aspecto por defecto (Modo Oscuro) */
.btn-glass-action {
    background-color: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #f8fafc !important; /* Texto blanco brillante */
    backdrop-filter: blur(10px);
}
.btn-glass-action:hover {
    background-color: rgba(255, 255, 255, 0.2);
    color: #ffffff !important;
}

/* Adaptación al Modo Claro */
[data-bs-theme="light"] .btn-glass-action {
    background-color: rgba(255, 255, 255, 0.6);
    border: 1px solid rgba(0, 0, 0, 0.1);
    color: #0f172a !important; /* Texto oscuro */
}
[data-bs-theme="light"] .btn-glass-action:hover {
    background-color: rgba(255, 255, 255, 0.9);
    color: #000000 !important;
}
/* ==========================================================
   37. MÓDULO BACKEND: ESTILOS DATATABLES (Premium)
   ========================================================== */

/* --- A. ESTILOS GENERALES (Modo Claro / Estructura) --- */

/* Buscador y Selector de Cantidad */
div.dataTables_wrapper div.dataTables_filter input,
div.dataTables_wrapper div.dataTables_length select {
    border-radius: 0.5rem;
    padding: 0.4rem 0.8rem;
    border: 1px solid #dee2e6;
    background-color: #f8f9fa;
    transition: all 0.3s ease;
}
div.dataTables_wrapper div.dataTables_filter input:focus,
div.dataTables_wrapper div.dataTables_length select:focus {
    border-color: var(--color-primario);
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
    outline: none;
}

/* Paginación (Botones) */
div.dataTables_wrapper div.dataTables_paginate ul.pagination {
    justify-content: flex-end;
}
div.dataTables_wrapper div.dataTables_paginate ul.pagination .page-item .page-link {
    border-radius: 0.5rem;
    margin: 0 3px;
    border: none;
    color: #6c757d;
    background-color: #f8f9fa;
    font-weight: 600;
    transition: all 0.3s ease;
}
div.dataTables_wrapper div.dataTables_paginate ul.pagination .page-item.active .page-link {
    background-color: var(--color-primario);
    color: white;
    box-shadow: 0 4px 10px rgba(13, 110, 253, 0.3);
}
div.dataTables_wrapper div.dataTables_paginate ul.pagination .page-item:not(.active):not(.disabled) .page-link:hover {
    background-color: #e9ecef;
    color: #212529;
}


/* --- B. ADAPTACIÓN AL MODO OSCURO (Glassmorphism) --- */

/* Textos generales de información */
[data-bs-theme="dark"] div.dataTables_wrapper div.dataTables_info,
[data-bs-theme="dark"] div.dataTables_wrapper div.dataTables_filter label,
[data-bs-theme="dark"] div.dataTables_wrapper div.dataTables_length label {
    color: #cbd5e1 !important;
}

/* Buscador y Selector en Oscuro */
[data-bs-theme="dark"] div.dataTables_wrapper div.dataTables_filter input,
[data-bs-theme="dark"] div.dataTables_wrapper div.dataTables_length select {
    background-color: rgba(15, 23, 42, 0.5) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    color: #f8fafc !important;
}

/* Paginación en Oscuro */
[data-bs-theme="dark"] div.dataTables_wrapper div.dataTables_paginate ul.pagination .page-item .page-link {
    background-color: rgba(255, 255, 255, 0.05) !important;
    color: #cbd5e1 !important;
}
[data-bs-theme="dark"] div.dataTables_wrapper div.dataTables_paginate ul.pagination .page-item:not(.active):not(.disabled) .page-link:hover {
    background-color: rgba(255, 255, 255, 0.15) !important;
    color: #ffffff !important;
}
[data-bs-theme="dark"] div.dataTables_wrapper div.dataTables_paginate ul.pagination .page-item.active .page-link {
    background-color: var(--color-primario) !important;
    color: #ffffff !important;
}
[data-bs-theme="dark"] div.dataTables_wrapper div.dataTables_paginate ul.pagination .page-item.disabled .page-link {
    background-color: transparent !important;
    color: rgba(255, 255, 255, 0.2) !important;
}

/* Ajuste de los íconos de ordenamiento en la cabecera (Oscuro) */
[data-bs-theme="dark"] table.dataTable thead th {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}
/* ==========================================================
   38. AJUSTES FINALES DATATABLES (Alineación y Responsive)
   ========================================================== */

/* 1. Alineación perfecta de textos e inputs (Flexbox) */
div.dataTables_wrapper div.dataTables_length label {
    display: flex !important;
    align-items: center;
    gap: 0.5rem;
    font-weight: 500;
    margin-bottom: 1rem;
}

/* Solución 1: Empujar el buscador estrictamente a la derecha */
div.dataTables_wrapper div.dataTables_filter {
    display: flex;
    justify-content: flex-end; /* Alinea todo el bloque a la derecha */
}
div.dataTables_wrapper div.dataTables_filter label {
    display: flex !important;
    align-items: center;
    justify-content: flex-end; /* Empuja el input a la derecha */
    gap: 0.5rem;
    font-weight: 500;
    margin-bottom: 1rem;
    width: 100%;
}

/* 2. Solución a la sombra recortada (Focus Ring) */
div.dataTables_wrapper {
    padding: 0.3rem; 
}
div.dataTables_wrapper div.dataTables_filter input,
div.dataTables_wrapper div.dataTables_length select {
    margin-top: 0.2rem;
    margin-bottom: 0.2rem;
}
div.dataTables_wrapper div.dataTables_length select {
    width: auto;
    display: inline-block;
}

/* 3. Solución 2: Tabla Responsive en Móviles (Scroll horizontal independiente) */
/* DataTables envuelve la tabla en la segunda fila (.row). Le damos scroll solo a esa parte */
div.dataTables_wrapper > div.row:nth-of-type(2) > div {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch; /* Desplazamiento suave en iOS/Android */
    padding-bottom: 0.5rem; /* Evita que la barra de scroll muerda la tabla */
    width: 100%;
}