.elementor-755 .elementor-element.elementor-element-1c28eef2{--display:flex;}.elementor-755 .elementor-element.elementor-element-1c28eef2.e-con{--flex-grow:0;--flex-shrink:0;}.elementor-755 .elementor-element.elementor-element-48accc3d > .elementor-widget-container{margin:10px 0px 16px 0px;}body.elementor-page-755{margin:134px 134px 134px 134px;}@media(min-width:768px){.elementor-755 .elementor-element.elementor-element-1c28eef2{--width:61.479%;}}/* Start custom CSS */<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Login Personalizado</title>
    <style>
        /* ===== RESET ESPECÍFICO PARA LOGIN ===== */
        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        /* ===== FONDO DE LA PÁGINA ===== */
        body {
            margin: 0;
            padding: 0;
            font-family: 'Inter', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
            min-height: 100vh;
            color: #ffffff; /* Texto general en blanco */
        }

        /* ===== FONDO ANIMADO ===== */
        body::before {
            content: '';
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-image: 
                radial-gradient(circle at 20% 80%, rgba(255, 107, 53, 0.15) 0%, transparent 50%),
                radial-gradient(circle at 80% 20%, rgba(255, 142, 53, 0.15) 0%, transparent 50%);
            background-size: 600px 600px, 800px 800px;
            animation: backgroundFloat 12s ease-in-out infinite;
            z-index: -1;
        }

        @keyframes backgroundFloat {
            0%, 100% { 
                background-position: 0% 0%, 100% 100%; 
                transform: rotate(0deg);
            }
            50% { 
                background-position: 100% 100%, 0% 0%; 
                transform: rotate(1deg);
            }
        }

        /* ===== HEADER CORREGIDO ===== */
        .site-header {
            background: rgba(10, 15, 30, 0.95) !important;
            backdrop-filter: blur(20px) !important;
            border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
            position: fixed !important;
            top: 0 !important;
            left: 0 !important;
            right: 0 !important;
            width: 100% !important;
            z-index: 9999 !important;
            box-shadow: 0 4px 30px rgba(0, 0, 0, 0.15) !important;
            height: 70px !important;
            padding: 0.5rem 2rem !important;
            color: #ffffff !important;
            display: flex !important;
            align-items: center !important;
            justify-content: space-between !important;
        }

        .header-container {
            width: 100%;
            max-width: 1200px;
            margin: 0 auto;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        /* ===== LOGO RMAV ===== */
        .logo-container {
            display: flex !important;
            align-items: center !important;
        }

        .logo-rmav {
            font-size: 2rem !important;
            font-weight: 800 !important;
            color: #ffffff !important;
            text-decoration: none !important;
            letter-spacing: 1px !important;
            text-transform: uppercase !important;
        }

        /* ===== OCULTAR ELEMENTOS NO DESEADOS ===== */
        .main-navigation,
        .menu-primary-container,
        .main-nav,
        .primary-menu,
        .menu-menu-1-container,
        #primary-menu,
        .main-menu,
        nav,
        .access-button, 
        a[href*="acceso-a-usuarios"],
        a[href*="acceso"] {
            display: none !important;
        }

        /* ===== CONTENEDOR PRINCIPAL DE LA PÁGINA ===== */
        .login-page-wrapper {
            padding-top: 100px !important;
            min-height: 100vh !important;
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
            padding: 120px 2rem 2rem 2rem !important;
        }

        /* ===== CONTENEDOR DEL LOGIN CARD ===== */
        .login-card-wrapper {
            width: 100% !important;
            max-width: 1000px !important;
            margin: 0 auto !important;
            display: flex !important;
            border-radius: 24px !important;
            overflow: hidden !important;
            box-shadow: 
                0 32px 64px rgba(0, 0, 0, 0.12),
                0 16px 32px rgba(0, 0, 0, 0.08),
                0 0 0 1px rgba(255, 255, 255, 0.05) !important;
            min-height: 600px !important;
            position: relative !important;
            animation: slideInScale 0.8s cubic-bezier(0.4, 0, 0.2, 1) !important;
        }

        @keyframes slideInScale {
            0% {
                opacity: 0;
                transform: translateY(40px) scale(0.96);
            }
            100% {
                opacity: 1;
                transform: translateY(0) scale(1);
            }
        }

        /* ===== PARTE IZQUIERDA CON FONDO ===== */
        .login-left {
            flex: 1;
            background: linear-gradient(135deg, #ff6b35 0%, #ff4757 100%);
            background-image: 
                linear-gradient(45deg, rgba(255, 255, 255, 0.1) 25%, transparent 25%),
                linear-gradient(-45deg, rgba(255, 255, 255, 0.1) 25%, transparent 25%),
                linear-gradient(45deg, transparent 75%, rgba(255, 255, 255, 0.1) 75%),
                linear-gradient(-45deg, transparent 75%, rgba(255, 255, 255, 0.1) 75%);
            background-size: 40px 40px;
            background-position: 0 0, 0 20px, 20px -20px, -20px 0px;
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 2rem;
        }

        .welcome-text {
            color: #ffffff; /* Texto en blanco */
            font-size: 2.2rem;
            font-weight: 700;
            line-height: 1.3;
            text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
            white-space: pre-line;
            z-index: 10;
            text-align: left;
            max-width: 90%;
        }

        /* ===== PARTE DERECHA CON FORMULARIO ===== */
        .login-right {
            flex: 1;
            background: #1a1a2e; /* Fondo oscuro para mejor contraste con texto blanco */
            padding: 4rem 3rem;
            display: flex;
            flex-direction: column;
            justify-content: center;
            color: #ffffff; /* Texto en blanco */
        }

        /* ===== TÍTULO ===== */
        h1, h2, h3 {
            color: #ffffff !important; /* Texto en blanco */
            font-size: 2rem !important;
            font-weight: 700 !important;
            text-align: center !important;
            margin-bottom: 2.5rem !important;
            letter-spacing: -0.02em !important;
        }

        /* ===== CAMPOS DE ENTRADA ===== */
        input[type="text"],
        input[type="email"],
        input[type="password"] {
            width: 100% !important;
            padding: 1.2rem 1.5rem !important;
            background: #2d3748 !important; /* Fondo más oscuro para inputs */
            border: 2px solid #4a5568 !important;
            border-radius: 12px !important;
            color: #ffffff !important; /* Texto en blanco */
            font-size: 1rem !important;
            font-weight: 500 !important;
            margin-bottom: 1.5rem !important;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
            outline: none !important;
        }

        input::placeholder {
            color: #a0aec0 !important; /* Placeholder en gris claro */
            font-weight: 400 !important;
        }

        input:focus {
            border-color: #ff6b35 !important;
            background: #2d3748 !important;
            box-shadow: 0 0 0 4px rgba(255, 107, 53, 0.1) !important;
            transform: translateY(-1px) !important;
        }

        /* ===== LABELS ===== */
        label {
            color: #ffffff !important; /* Texto en blanco */
            font-weight: 600 !important;
            font-size: 0.95rem !important;
            margin-bottom: 0.5rem !important;
            display: block !important;
        }

        /* ===== CHECKBOX CORREGIDO - WORDPRESS ESPECÍFICO ===== */
        input[type="checkbox"] {
            width: auto !important;
            margin-right: 0.75rem !important;
            margin-bottom: 0 !important;
            margin-top: 0 !important;
            transform: scale(1.2) !important;
            accent-color: #ff6b35 !important;
            vertical-align: middle !important;
        }

        /* Selectores más específicos para WordPress */
        .remember,
        .login-remember,
        label[for*="remember"],
        .wp-login-remember,
        p.forgetmenot {
            display: flex !important;
            align-items: center !important;
            flex-direction: row !important;
            color: #e2e8f0 !important; /* Texto en gris claro */
            font-weight: 500 !important;
            margin-bottom: 2rem !important;
            cursor: pointer !important;
            gap: 0.5rem !important;
        }

        /* Forzar alineación horizontal para elementos comunes de WordPress */
        .login form .forgetmenot,
        .login form p.forgetmenot {
            display: flex !important;
            align-items: center !important;
            flex-direction: row !important;
        }

        /* Asegurar que el texto del checkbox esté alineado */
        .remember span,
        .login-remember span,
        .forgetmenot label,
        label[for*="remember"] {
            display: inline !important;
            margin: 0 !important;
            padding: 0 !important;
            line-height: 1 !important;
            color: #e2e8f0 !important; /* Texto en gris claro */
        }

        /* ===== BOTÓN PRINCIPAL ===== */
        button[type="submit"],
        input[type="submit"] {
            width: 100% !important;
            padding: 1.3rem 2rem !important;
            background: linear-gradient(135deg, #ff6b35 0%, #ff4757 100%) !important;
            color: #ffffff !important;
            border: none !important;
            border-radius: 12px !important;
            font-size: 1.1rem !important;
            font-weight: 700 !important;
            cursor: pointer !important;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
            text-transform: uppercase !important;
            letter-spacing: 0.5px !important;
            margin: 1.5rem 0 2rem 0 !important;
            box-shadow: 0 8px 20px rgba(255, 107, 53, 0.3) !important;
        }

        button[type="submit"]:hover,
        input[type="submit"]:hover {
            transform: translateY(-2px) !important;
            box-shadow: 0 12px 30px rgba(255, 107, 53, 0.4) !important;
            background: linear-gradient(135deg, #ff4757 0%, #ff3742 100%) !important;
        }

        /* ===== ENLACES ===== */
        a {
            color: #ffd8a8 !important; /* Color naranja claro para mejor contraste */
            text-decoration: none !important;
            font-weight: 600 !important;
            font-size: 0.9rem !important;
            text-align: center !important;
            display: block !important;
            transition: all 0.3s ease !important;
        }

        a:hover {
            color: #ffb47b !important; /* Color naranja más claro al pasar el mouse */
            transform: translateY(-1px) !important;
        }

        /* ===== RESPONSIVE ===== */
        @media (max-width: 768px) {
            .login-card-wrapper {
                flex-direction: column !important;
                max-width: 400px !important;
                min-height: auto !important;
            }
            
            .login-left {
                padding: 2.5rem 2rem !important;
                min-height: 200px;
            }
            
            .welcome-text {
                font-size: 1.5rem !important;
                text-align: center !important;
            }
            
            .login-right {
                padding: 2rem !important;
            }
            
            .site-header {
                padding: 0.5rem 1rem !important;
            }
            
            .logo-rmav {
                font-size: 1.5rem !important;
            }
        }
        /* OCULTAR botón "Área de Clientes" en Elementor Header */
        .elementor-button-text {
          /* Esto por sí solo ocultaría el texto en todos los botones, pero lo afinamos abajo */
        }

        /* Selector más seguro para ocultar solo el botón con ese texto */
        .elementor-button-text:after {
          /* No hace nada, solo referencia */
        }

        /* Opción segura por jerarquía - oculta el botón completo */
        .elementor-button .elementor-button-text {
          /* No hace nada, referencia */
        }

        /* Lo más específico y seguro usando el texto, SOLO si tu maquetador lo soporta */
        .elementor-button-text:contains("Área de Clientes") {
          display: none !important;
        }
        /* Esto puede no funcionar en todos los navegadores. */

        /* La opción que SIEMPRE funciona y es segura para Elementor:
           Oculta todo el botón que contiene ese texto, solo si es el único botón de tipo "elementor-button" en el header.
           Si tienes más botones y solo quieres ocultar ese, puedes usar el ID del widget si lo tienes. Si no, este body.elementor-page-755 es seguro si solo hay uno:
        */
        header .elementor-button {
          display: none !important;
        }
        
        /* OCULTAR LA BARRA DE BÚSQUEDA DE WORDPRESS ADMIN BAR */
        #wpadminbar #adminbarsearch,
        #wpadminbar .adminbar-input,
        #wpadminbar #adminbar-search {
            display: none !important;
        }

        /* Ajustar el margen superior si es necesario */
        html {
            margin-top: 0 !important;
        }

        /* ===== NUEVO TÍTULO "INICIAR SESIÓN" ===== */
        .login-title-card {
            position: absolute;
            top: -25px;
            left: 50%;
            transform: translateX(-50%);
            background: transparent;
            padding: 15px 30px;
            border-radius: 15px;
            z-index: 10;
            text-align: center;
        }

        .login-title-card h2 {
            color: #ffffff !important;
            font-size: 1.8rem !important;
            font-weight: 700 !important;
            margin: 0 !important;
            text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
            letter-spacing: 1px;
            position: relative;
        }

        .login-title-card h2::after {
            content: '';
            position: absolute;
            bottom: -8px;
            left: 50%;
            transform: translateX(-50%);
            width: 50px;
            height: 3px;
            background: linear-gradient(135deg, #ff6b35 0%, #ff4757 100%);
            border-radius: 2px;
        }
    </style>
</head>
<body>
    <!-- Header con solo el logo -->
    <header class="site-header">
        <div class="header-container">
            <div class="logo-container">
                <a href="#" class="logo-rmav">rmav</a>
            </div>
            <!-- El menú de navegación está oculto mediante CSS -->
        </div>
    </header>

    <!-- Contenido principal de login -->
    <div class="login-page-wrapper">
        <div class="login-card-wrapper">
            <!-- Título "Iniciar Sesión" encima de la tarjeta -->
            <div class="login-title-card">
                <h2>Iniciar Sesión</h2>
            </div>
            
            <div class="login-left">
                <div class="welcome-text">Bienvenido al Sistema</div>
            </div>
            <div class="login-right">
                <form>
                    <label for="user_login">Nombre de usuario o correo electrónico</label>
                    <input type="text" name="log" id="user_login" value="rmavdata">
                    
                    <label for="user_pass">Contraseña</label>
                    <input type="password" name="pwd" id="user_pass" value="······">
                    
                    <p class="forgetmenot">
                        <input name="rememberme" type="checkbox" id="rememberme" value="forever">
                        <label for="rememberme">Recuérdame</label>
                    </p>
                    
                    <input type="submit" name="wp-submit" id="wp-submit" value="ACCEDER">
                    
                    <a href="#">¿Has olvidado tu contraseña?</a>
                    <a href="#">Únete a nosotros</a>
                </form>
            </div>
        </div>
    </div>
</body>
</html>/* End custom CSS */