body {
    background-color: #0b111e !important;
    /* Mantenemos un fondo base oscuro y liso para el scroll infinito */
    background: #060a12;
}

/* Esta es la capa que crea la ilusión de oscurecimiento arriba al hacer scroll */
.gjsr-fade-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 35vh;
    /* Abarca el 35% superior de la pantalla */
    /* Gradiente de negro puro en el top, a transparente hacia abajo */
    background: linear-gradient(to bottom, rgba(6, 10, 18, 1) 0%, rgba(6, 10, 18, 0.8) 20%, rgba(6, 10, 18, 0) 100%);
    pointer-events: none;
    /* Permite hacer clic traspasándola */
    z-index: 10;
    /* Para que quede por encima de los elementos y los oscurezca */
    opacity: 0;
    /* Inicia invisible en el top de la página */
    transition: opacity 0.1s ease-out;
    /* Suaviza el cambio rápido de JavaScript */
}

.gjsr-page-container {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Restauramos el fondo radial para el efecto de profundidad */
    background: radial-gradient(circle at center, #131f33 0%, #060a12 100%);
    color: #e2e8f0;
    font-family: 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    padding: 20px;
    box-sizing: border-box;
}

.gjsr-content-box {
    text-align: center;
    padding: 3rem 2rem;
    /* Se mantienen eliminados los fondos y bordes de la caja */
    background: transparent;
    border: none;
    box-shadow: none;
    backdrop-filter: none;
    max-width: 650px;
    width: 100%;
    margin: auto;
}

.gjsr-logo {
    max-width: 350px;
    height: auto;
    margin-bottom: 2.5rem;
    mix-blend-mode: screen;
    opacity: 0.95;
    /* Lo hacemos más visible ya que la máscara lo atenuará */
    /* MÁSCARA MÁGICA: desvanece los bordes de la imagen circularmente hacia el centro, fundiéndola con cualquier fondo que haya detrás! */
    -webkit-mask-image: radial-gradient(circle, rgba(0, 0, 0, 1) 30%, rgba(0, 0, 0, 0) 70%);
    mask-image: radial-gradient(circle, rgba(0, 0, 0, 1) 30%, rgba(0, 0, 0, 0) 70%);
}

.gjsr-title {
    font-size: 2.5rem;
    font-weight: 800;
    margin-bottom: 0.5rem;
    /* Efecto plateado/metálico para el texto (basado en las letras GJR) */
    background: linear-gradient(135deg, #ffffff 0%, #8b9bb4 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
    letter-spacing: 1px;
}

.gjsr-subtitle {
    font-size: 1.4rem;
    font-weight: 700;
    /* Color Cyan Neón del circuito */
    color: #00f3ff;
    margin-bottom: 1.5rem;
    letter-spacing: 4px;
    text-transform: uppercase;
    text-shadow: 0 0 15px rgba(0, 243, 255, 0.4);
}

.gjsr-description {
    font-size: 1.15rem;
    color: #94a3b8;
    margin-bottom: 3.5rem;
    line-height: 1.6;
}

.gjsr-login-btn {
    display: inline-block;
    padding: 15px 40px;
    font-size: 1.1rem;
    font-weight: 700;
    color: #060a12 !important;
    background-color: #00f3ff;
    border-radius: 50px;
    text-decoration: none !important;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    box-shadow: 0 0 20px rgba(0, 243, 255, 0.2);
    border: 2px solid transparent;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.gjsr-login-btn:hover {
    background-color: transparent;
    color: #00f3ff !important;
    border-color: #00f3ff;
    box-shadow: 0 0 30px rgba(0, 243, 255, 0.5), inset 0 0 15px rgba(0, 243, 255, 0.2);
    transform: translateY(-3px);
}

/* ========================================================================= */
/* ESTILOS GLOBALES DE CABECERA Y PIE DE PÁGINA ODOO                         */
/* ========================================================================= */

header#top {
    background: rgba(4, 7, 12, 0.85) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.5) !important;
    transition: all 0.3s ease !important;
}

header#top nav.navbar {
    padding-top: 0.8rem !important;
    padding-bottom: 0.8rem !important;
    min-height: 70px !important;
}

header#top .navbar-brand {
    color: #ffffff !important;
    font-size: 1.25rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.5px !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}

header#top .navbar-brand img,
header#top .navbar-brand .logo {
    max-height: 40px !important;
    width: auto !important;
    filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.2)) !important;
}

header#top .nav-link,
header#top .dropdown-toggle {
    color: #94a3b8 !important;
    font-size: 0.95rem !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    transition: color 0.3s ease, text-shadow 0.3s ease !important;
    position: relative !important;
    padding: 0.5rem 1rem !important;
    margin: 0 0.2rem !important;
}

header#top .nav-link:hover,
header#top .nav-link.active,
header#top .dropdown-toggle:hover {
    color: #00f3ff !important;
    text-shadow: 0 0 10px rgba(0, 243, 255, 0.4) !important;
}

/* Efecto de subrayado animado para los enlaces */
header#top .nav-link::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: 0;
    left: 50%;
    background-color: #00f3ff;
    transition: all 0.3s ease;
    box-shadow: 0 0 10px rgba(0, 243, 255, 0.8);
    transform: translateX(-50%);
}

header#top .nav-link:hover::after,
header#top .nav-link.active::after {
    width: 80%;
}

/* Elementos del menú derecho (teléfono, iconos) */
header#top .o_header_standard .nav-item,
header#top .navbar-collapse .nav-item {
    display: flex;
    align-items: center;
}

header#top .fa-phone,
header#top .fa-search {
    color: #00f3ff !important;
    opacity: 0.8;
}

/* Forzar el color del texto en los campos de login (Odoo Bootstrap override) */
body #wrapwrap input.form-control,
.oe_website_login_container .form-control,
.form-control {
    color: #000000 !important;
    background-color: #ffffff !important;
}

/* Corregir si el navegador hace "autofill" (autocompletado) que oculta el color */
input.form-control:-webkit-autofill,
input.form-control:-webkit-autofill:hover,
input.form-control:-webkit-autofill:focus,
input.form-control:-webkit-autofill:active {
    -webkit-text-fill-color: #000000 !important;
    -webkit-box-shadow: 0 0 0 30px white inset !important;
}

/* ========================================================================= */
/* ESTILOS ESPECÍFICOS DE LA PÁGINA DE LOGIN DE ODOO                         */
/* ========================================================================= */

.oe_website_login_container {
    background-color: transparent !important;
}

/* Labels de los campos (Correo electrónico, Contraseña) */
.oe_website_login_container label,
.oe_website_login_container .field-login label,
.oe_website_login_container .field-password label {
    color: #94a3b8 !important;
    font-weight: 500 !important;
}

/* Enlaces de ayuda (Restablecer contraseña, Elija un usuario) */
.oe_website_login_container a {
    color: #00f3ff !important;
    text-decoration: none !important;
    transition: color 0.3s ease !important;
}

.oe_website_login_container a:hover {
    color: #ffffff !important;
    text-shadow: 0 0 8px rgba(0, 243, 255, 0.5) !important;
}

/* Botón principal de Iniciar Sesión de Odoo */
.oe_website_login_container .btn-primary,
.oe_website_login_container button[type="submit"] {
    background: transparent !important;
    color: #00f3ff !important;
    border: 1px solid rgba(0, 243, 255, 0.5) !important;
    border-radius: 50px !important;
    padding: 0.8rem 2rem !important;
    font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif !important;
    font-weight: bold !important;
    font-size: 1rem !important;
    transition: all 0.3s ease !important;
    width: 100% !important;
    margin-top: 1rem !important;
}

.oe_website_login_container .btn-primary:hover,
.oe_website_login_container button[type="submit"]:hover {
    background-color: rgba(0, 243, 255, 0.1) !important;
    box-shadow: 0 0 20px rgba(0, 243, 255, 0.4), inset 0 0 10px rgba(0, 243, 255, 0.2) !important;
    border-color: #00f3ff !important;
    transform: translateY(-2px) !important;
}

/* Para botones de Odoo en la cabecera (como Contáctanos) */
header#top .btn-primary {
    background-color: transparent !important;
    border: 1px solid rgba(0, 243, 255, 0.3) !important;
    color: #00f3ff !important;
    border-radius: 50px !important;
    padding: 0.25rem 1rem !important;
    font-size: 0.85rem !important;
}

header#top .btn-primary:hover {
    background-color: rgba(0, 243, 255, 0.1) !important;
    border-color: #00f3ff !important;
}

/* Pie de página */
footer#bottom {
    background-color: #04070c !important;
    color: #64748b !important;
    border-top: 1px solid rgba(255, 255, 255, 0.05) !important;
}

footer#bottom h1,
footer#bottom h2,
footer#bottom h3,
footer#bottom h4,
footer#bottom h5,
footer#bottom h6 {
    color: #e2e8f0 !important;
}

footer#bottom a {
    color: #00f3ff !important;
    text-decoration: none !important;
    transition: color 0.3s ease;
}

footer#bottom a:hover {
    color: #ffffff !important;
}

/* Ajustes adicionales del layout para integrar la cabecera fija de odoo */
#wrapwrap {
    padding-top: 45px !important;
    /* Compensa la altura de la cabecera fija */
}

#wrapwrap>header#top {
    position: fixed !important;
    top: 0;
    width: 100%;
    z-index: 1000 !important;
}

/* ========================================================================= */
/* ESTILOS B2B — NUEVA HOMEPAGE CORPORATIVA                                  */
/* ========================================================================= */

/* --- Hero Section --- */
.gjsr-hero-content {
    position: relative;
    z-index: 2;
    padding: 3rem 1rem;
}

.gjsr-hero-title {
    font-family: 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    text-shadow: 0 0 60px rgba(0, 243, 255, 0.1);
}

/* Botón hero principal (CTA) */
.gjsr-btn-hero {
    display: inline-block !important;
    padding: 15px 40px !important;
    font-size: 1.1rem !important;
    font-weight: 700 !important;
    color: #060a12 !important;
    background-color: #00f3ff !important;
    border: 2px solid #00f3ff !important;
    border-radius: 50px !important;
    text-decoration: none !important;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
    box-shadow: 0 0 25px rgba(0, 243, 255, 0.35) !important;
    text-transform: uppercase !important;
    letter-spacing: 1.5px !important;
}

.gjsr-btn-hero:hover {
    background-color: transparent !important;
    color: #00f3ff !important;
    box-shadow: 0 0 40px rgba(0, 243, 255, 0.6), inset 0 0 15px rgba(0, 243, 255, 0.2) !important;
    transform: translateY(-3px) !important;
}

/* --- Barra de Partners --- */
.gjsr-partners-bar {
    transition: opacity 0.3s ease;
}

.gjsr-partner-item {
    font-family: 'Segoe UI', Roboto, monospace;
    letter-spacing: 2px;
    transition: color 0.3s ease, opacity 0.3s ease;
    cursor: default;
}

.gjsr-partner-item:hover {
    color: #00f3ff !important;
    opacity: 1 !important;
}

/* --- Sección de Servicios --- */
.gjsr-section-title {
    font-family: 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    font-weight: 800;
    letter-spacing: -0.5px;
}

.gjsr-card-service {
    transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease !important;
}

.gjsr-card-service:hover {
    transform: translateY(-8px) !important;
    border-color: rgba(0, 243, 255, 0.35) !important;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5), 0 0 30px rgba(0, 243, 255, 0.08) !important;
}

.gjsr-icon-container i {
    filter: drop-shadow(0 0 12px rgba(0, 243, 255, 0.4));
    transition: filter 0.3s ease;
}

.gjsr-card-service:hover .gjsr-icon-container i {
    filter: drop-shadow(0 0 20px rgba(0, 243, 255, 0.8));
}

/* --- Sección de Casos de Éxito --- */
.gjsr-case-study {
    padding: 2.5rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.gjsr-case-study:last-child {
    border-bottom: none;
}

/* Padding para secciones de contenido extenso (similar a Odoo pt104/pb104) */
.pt104 {
    padding-top: 104px !important;
}

.pb104 {
    padding-bottom: 104px !important;
}

/* --- CTA Final --- */
.gjsr-cta-box {
    transition: box-shadow 0.3s ease;
}

.gjsr-cta-box:hover {
    box-shadow: 0 0 60px rgba(0, 243, 255, 0.07);
}

/* --- Responsivo: títulos en móvil --- */
@media (max-width: 768px) {
    .gjsr-hero-title {
        font-size: 2.2rem !important;
    }

    .gjsr-section-title {
        font-size: 1.8rem !important;
    }

    .gjsr-case-study h3 {
        font-size: 1.5rem !important;
    }

    .pt104 {
        padding-top: 56px !important;
    }

    .pb104 {
        padding-bottom: 56px !important;
    }
}

/* ========================================================================= */
/* ESTILOS PÁGINA /CONTACTUS (NATIVA DE ODOO)                                */
/* ========================================================================= */

/* Fondo general de la página de contacto */
.o_website_contact,
#wrapwrap .o_website_contact {
    background: #060a12 !important;
}

/* Títulos en la página de contacto */
.o_website_contact h1,
.o_website_contact h2,
.o_website_contact h3 {
    color: #ffffff !important;
}

/* Párrafos y texto de descripción */
.o_website_contact p,
.o_website_contact address {
    color: #94a3b8 !important;
}

/* Campo de formulario (input/textarea) */
.o_website_contact .form-control,
.o_website_contact textarea,
.o_website_contact input[type="text"],
.o_website_contact input[type="email"],
.o_website_contact input[type="tel"] {
    background-color: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #e2e8f0 !important;
    border-radius: 8px !important;
    padding: 0.7rem 1rem !important;
    transition: border-color 0.3s ease, box-shadow 0.3s ease !important;
}

.o_website_contact .form-control:focus,
.o_website_contact textarea:focus,
.o_website_contact input:focus {
    border-color: rgba(0, 243, 255, 0.4) !important;
    box-shadow: 0 0 0 3px rgba(0, 243, 255, 0.08) !important;
    background-color: rgba(255, 255, 255, 0.06) !important;
    outline: none !important;
}

/* Placeholder text */
.o_website_contact .form-control::placeholder {
    color: #64748b !important;
}

/* Labels de los campos */
.o_website_contact label,
.o_website_contact .col-form-label {
    color: #94a3b8 !important;
    font-weight: 500 !important;
    font-size: 0.9rem !important;
}

/* Botón de envío */
.o_website_contact .btn-primary,
.o_website_contact button[type="submit"] {
    background-color: #00f3ff !important;
    color: #060a12 !important;
    border: 2px solid #00f3ff !important;
    border-radius: 50px !important;
    padding: 0.75rem 2.5rem !important;
    font-weight: 700 !important;
    font-size: 1rem !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 0 20px rgba(0, 243, 255, 0.25) !important;
}

.o_website_contact .btn-primary:hover,
.o_website_contact button[type="submit"]:hover {
    background-color: transparent !important;
    color: #00f3ff !important;
    box-shadow: 0 0 35px rgba(0, 243, 255, 0.5) !important;
    transform: translateY(-2px) !important;
}

/* Datos de contacto (dirección, teléfono) al lado del formulario */
.o_website_contact .s_contact_info,
.o_website_contact .contact-info {
    color: #94a3b8 !important;
}

/* Íconos de contacto */
.o_website_contact .fa {
    color: #00f3ff !important;
}

/* Separadores o lineas */
.o_website_contact hr {
    border-color: rgba(255, 255, 255, 0.07) !important;
}

/* ========================================================================= */
/* ANIMACIONES DE SCROLL Y EFECTOS 3D                                        */
/* ========================================================================= */

.gjsr-fade-in-up {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.gjsr-fade-in-up.gjsr-visible {
    opacity: 1;
    transform: translateY(0);
}

.gjsr-glare {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    transition: opacity 0.2s ease;
    mix-blend-mode: overlay;
}

/* ========================================================================= */
/* MEGA FOOTER CORPORATIVO                                                   */
/* ========================================================================= */

footer#bottom {
    background: #020408 !important; /* Más oscuro que el fondo principal */
    border-top: 1px solid rgba(0, 243, 255, 0.2) !important;
    position: relative;
}

footer#bottom::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, transparent, #00f3ff, transparent);
    opacity: 0.5;
}

.gjsr-mega-footer .footer-title {
    color: #ffffff;
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.gjsr-mega-footer .footer-text {
    color: #94a3b8;
    font-size: 0.95rem;
    line-height: 1.6;
}

.gjsr-mega-footer .footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
}

.gjsr-mega-footer .footer-links li {
    margin-bottom: 0.8rem;
}

.gjsr-mega-footer .footer-links a {
    color: #94a3b8 !important;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
}

.gjsr-mega-footer .footer-links a::before {
    content: '›';
    color: #00f3ff;
    margin-right: 8px;
    font-size: 1.2rem;
    line-height: 0;
    transition: transform 0.3s ease;
}

.gjsr-mega-footer .footer-links a:hover {
    color: #00f3ff !important;
    padding-left: 5px;
}

.gjsr-mega-footer .social-icons a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.05);
    color: #00f3ff !important;
    margin-right: 10px;
    transition: all 0.3s ease;
    border: 1px solid rgba(0, 243, 255, 0.1);
}

.gjsr-mega-footer .social-icons a:hover {
    background: #00f3ff;
    color: #020408 !important;
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(0, 243, 255, 0.4);
}

/* ========================================================================= */
/* BOTÓN FLOTANTE DE CONTACTO                                                */
/* ========================================================================= */

.gjsr-floating-btn {
    position: fixed;
    bottom: 30px;
    right: 30px;
    height: 60px;
    background-color: #00f3ff !important;
    color: #060a12 !important;
    border-radius: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5), 0 0 20px rgba(0, 243, 255, 0.4);
    z-index: 1000;
    text-decoration: none !important;
    transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    padding: 0 18px;
    overflow: hidden;
    white-space: nowrap;
}

.gjsr-floating-btn i {
    transition: transform 0.3s ease;
    color: #060a12 !important; /* Forzar el sobre del color oscuro original */
}

.gjsr-floating-text {
    max-width: 0;
    opacity: 0;
    font-size: 1rem;
    font-weight: 700;
    font-family: 'Segoe UI', Roboto, sans-serif;
    text-transform: uppercase;
    transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    margin-left: 0;
    letter-spacing: 1px;
    color: #060a12 !important;
}

.gjsr-floating-btn:hover {
    transform: translateY(-5px);
    color: #ffffff !important;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.6), 0 0 30px rgba(0, 243, 255, 0.8);
    padding: 0 25px;
}

.gjsr-floating-btn:hover i {
    color: #ffffff !important;
}

.gjsr-floating-btn:hover .gjsr-floating-text {
    max-width: 150px;
    opacity: 1;
    margin-left: 10px;
    color: #ffffff !important;
}

/* Animación de pulso infinito */
.gjsr-floating-btn::before {
    content: '';
    position: absolute;
    width: 60px;
    height: 60px;
    right: 0; /* Align to the right where the icon is usually at start */
    background-color: #00f3ff;
    border-radius: 50px;
    z-index: -1;
    animation: gjsr-pulse 2s infinite;
    opacity: 0.7;
}

@keyframes gjsr-pulse {
    0% { transform: scale(1); opacity: 0.7; }
    50% { transform: scale(1.5); opacity: 0; }
    100% { transform: scale(1); opacity: 0; }
}

/* =====================================================
   PÁGINA DE LOGIN - TEMA OSCURO B2B
   ===================================================== */

/* Fondo oscuro en la página de login */
body.o_login_page,
.o_login_page body {
    background-color: #04070c !important;
    background-image: radial-gradient(ellipse at 50% 0%, #0d1b2a 0%, #04070c 70%) !important;
    min-height: 100vh;
}

/* Tarjeta principal del formulario (Transparente por petición) */
.o_login_page .oe_login_form,
.o_login_page .card,
.o_login_page .card-body {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    padding: 2.5rem !important;
}

/* Quitar por completo el logo de la barra superior (navbar) en todo el sitio */
.navbar-brand,
.navbar-brand img,
.navbar-brand .navbar-logo,
header .navbar-brand,
header .navbar-brand img {
    display: none !important;
}

/* Títulos */
.o_login_page h3,
.o_login_page .card h3 {
    color: #ffffff !important;
    font-weight: 700 !important;
    letter-spacing: 0.5px !important;
    margin-bottom: 1.5rem !important;
}

/* Etiquetas */
.o_login_page label {
    color: #94a3b8 !important;
    font-size: 0.85rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.5px !important;
    text-transform: uppercase !important;
    margin-bottom: 0.4rem !important;
    display: block !important;
}

/* Inputs — máxima especificidad para ganar a Odoo */
body.o_login_page .form-control,
body.o_login_page input[type="text"],
body.o_login_page input[type="password"],
body.o_login_page input[type="email"],
body.o_login_page input.form-control,
html body.o_login_page input,
/* Selectores por ID — únicos del formulario de login */
input#login,
input#password,
.oe_login_form input,
.oe_login_form .form-control,
form[action="/web/login"] input,
form[action*="login"] input[type="text"],
form[action*="login"] input[type="password"],
form[action*="login"] input[type="email"] {
    background: #0a0e15 !important;
    background-color: #0a0e15 !important;
    border: 1px solid #2d3748 !important;
    color: #e2e8f0 !important;
    border-radius: 8px !important;
    padding: 0.75rem 1rem !important;
    font-size: 0.95rem !important;
    transition: border-color 0.3s ease, box-shadow 0.3s ease !important;
    width: 100% !important;
    -webkit-text-fill-color: #e2e8f0 !important;
}

/* Autocompletado del navegador — también oscuro */
body.o_login_page input:-webkit-autofill,
body.o_login_page input:-webkit-autofill:hover,
body.o_login_page input:-webkit-autofill:focus,
input#login:-webkit-autofill,
input#login:-webkit-autofill:hover,
input#login:-webkit-autofill:focus,
input#password:-webkit-autofill,
input#password:-webkit-autofill:hover,
input#password:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0px 1000px #0a0e15 inset !important;
    -webkit-text-fill-color: #e2e8f0 !important;
    border-color: #2d3748 !important;
    caret-color: #00f3ff;
}

/* Focus state */
input#login:focus,
input#password:focus,
.oe_login_form input:focus,
body.o_login_page .form-control:focus,
body.o_login_page input:focus {
    background: #0d1520 !important;
    background-color: #0d1520 !important;
    border-color: #00f3ff !important;
    box-shadow: 0 0 12px rgba(0,243,255,0.2) !important;
    outline: none !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

/* Placeholders */
input#login::placeholder,
input#password::placeholder,
.oe_login_form input::placeholder {
    color: #475569 !important;
    opacity: 1 !important;
}
.o_login_page .form-control:focus,
.o_login_page input:focus {
    background: #0d1520 !important;
    border-color: #00f3ff !important;
    box-shadow: 0 0 12px rgba(0,243,255,0.2) !important;
    outline: none !important;
    color: #ffffff !important;
}

.o_login_page .form-control::placeholder {
    color: #475569 !important;
}

/* Botón Iniciar Sesión */
.o_login_page .btn-primary,
.o_login_page button[type="submit"] {
    background: transparent !important;
    border: 1px solid #00f3ff !important;
    color: #00f3ff !important;
    border-radius: 50px !important;
    padding: 12px 30px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 1.5px !important;
    font-size: 0.9rem !important;
    width: 100% !important;
    transition: all 0.3s ease !important;
    margin-top: 0.5rem !important;
}

.o_login_page .btn-primary:hover,
.o_login_page button[type="submit"]:hover {
    background: rgba(0,243,255,0.1) !important;
    box-shadow: 0 0 20px rgba(0,243,255,0.4) !important;
    transform: translateY(-2px) !important;
    color: #ffffff !important;
}

/* Enlaces */
.o_login_page a {
    color: #00f3ff !important;
    text-decoration: none !important;
    transition: text-shadow 0.3s ease !important;
}

.o_login_page a:hover {
    text-shadow: 0 0 8px rgba(0,243,255,0.6) !important;
    color: #ffffff !important;
}

/* Alertas de error */
.o_login_page .alert-danger {
    background: rgba(239,68,68,0.1) !important;
    border: 1px solid rgba(239,68,68,0.3) !important;
    color: #fca5a5 !important;
    border-radius: 8px !important;
}

/* Texto muted */
.o_login_page .text-muted,
.o_login_page small {
    color: #64748b !important;
}