/* ========================================================= FUENTE ========================================================= */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap'); /* ========================================================= CONFIGURACIÓN GENERAL ========================================================= */ html, body { margin: 0; padding: 0; width: 100%; min-height: 100%; font-family: 'Inter', sans-serif; } /* ========================================================= FONDO COMPLETO DEL LOGIN ========================================================= */ html body.login-page { width: 100vw; min-height: 100vh; margin: 0; background: linear-gradient( rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8) ), url('https://www.c3carecarcenter.com/wp-content/uploads/2025/04/taller-automotriz-1024x576.webp') center center / cover no-repeat fixed !important; display: flex !important; justify-content: center !important; align-items: center !important; overflow-x: hidden; } /* ========================================================= CONTENEDOR LOGIN Sobrescribe el ancho fijo de AdminLTE ========================================================= */ html body.login-page .login-box { width: 100% !important; max-width: 420px !important; margin: 0 auto !important; padding: 0 !important; } /* ========================================================= OCULTAR LOGO ORIGINAL DE ADMINLTE El texto SERVISTAR está definido en el layout ========================================================= */ html body.login-page .login-logo { display: none !important; } /* ========================================================= TARJETA PRINCIPAL ========================================================= */ html body.login-page .login-box .card { width: 100% !important; margin: 0 !important; background: rgba(255, 255, 255, 0.08) !important; border: 1px solid rgba(255, 255, 255, 0.12) !important; border-radius: 20px !important; box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5) !important; backdrop-filter: blur(25px); -webkit-backdrop-filter: blur(25px); overflow: hidden; animation: fadeIn 0.8s ease-out; } /* ========================================================= CUERPO DE LA TARJETA ========================================================= */ html body.login-page .login-card-body { width: 100% !important; background: transparent !important; padding: 50px 35px !important; border-radius: 20px !important; color: white; } /* ========================================================= MENSAJE PRINCIPAL ========================================================= */ html body.login-page .login-box-msg { color: rgba(255, 255, 255, 0.75) !important; text-align: center; font-size: 14px; margin: 0 0 30px 0 !important; padding: 0 !important; } /* ========================================================= GRUPOS DE CAMPOS ========================================================= */ html body.login-page .form-group.has-feedback { margin-bottom: 0 !important; } html body.login-page .input-group { width: 100% !important; margin-bottom: 25px !important; } /* ========================================================= CAMPOS ========================================================= */ html body.login-page .input-group .form-control { width: 100% !important; height: auto !important; min-height: 52px; padding: 16px 60px 16px 20px !important; border-radius: 12px !important; border: 1px solid rgba(255, 255, 255, 0.15) !important; background: rgba(255, 255, 255, 0.05) !important; color: white !important; font-size: 16px; box-shadow: none !important; } /* ========================================================= PLACEHOLDER ========================================================= */ html body.login-page .input-group .form-control::placeholder { color: rgba(255, 255, 255, 0.5) !important; } /* ========================================================= CAMPO ACTIVO ========================================================= */ html body.login-page .input-group .form-control:focus { outline: none !important; color: white !important; background: rgba(255, 255, 255, 0.08) !important; border-color: #e74c3c !important; box-shadow: 0 0 0 2px rgba(231, 76, 60, 0.2) !important; } /* ========================================================= CONTENEDOR DE ICONOS ========================================================= */ html body.login-page .input-group-append { position: absolute !important; top: 0 !important; right: 0 !important; height: 100% !important; z-index: 5; } /* ========================================================= ICONOS ========================================================= */ html body.login-page .input-group-text { height: 100% !important; width: 55px !important; display: flex !important; align-items: center !important; justify-content: center !important; background: transparent !important; border: none !important; color: rgba(255, 255, 255, 0.8) !important; } /* ========================================================= CHECKBOX / RECORDARME ========================================================= */ html body.login-page .row { align-items: center; } html body.login-page .row .col-6:first-child { padding-top: 12px; } html body.login-page .icheck-primary { color: rgba(255, 255, 255, 0.75); font-size: 14px; } html body.login-page .icheck-primary label { color: rgba(255, 255, 255, 0.75) !important; cursor: pointer; } /* ========================================================= BOTÓN ========================================================= */ html body.login-page .btn-primary { width: 100% !important; min-height: 52px; padding: 14px 16px !important; margin: 10px 0 0 0 !important; background: linear-gradient( 135deg, #e74c3c, #c0392b ) !important; border: none !important; border-radius: 12px !important; color: white !important; font-size: 16px; font-weight: 600; letter-spacing: 0.5px; box-shadow: 0 5px 15px rgba(231, 76, 60, 0.3) !important; transition: all 0.3s ease; } html body.login-page .btn-primary:hover { background: linear-gradient( 135deg, #c0392b, #e74c3c ) !important; transform: translateY(-2px); box-shadow: 0 8px 20px rgba(231, 76, 60, 0.4) !important; } html body.login-page .btn-primary:active { transform: translateY(0); } /* ========================================================= ENLACE OLVIDÉ MI CONTRASEÑA ========================================================= */ html body.login-page .login-card-body p.mb-1 { margin: 25px 0 0 0 !important; text-align: center; } html body.login-page .login-card-body p.mb-1 a { color: #e74c3c !important; text-decoration: none; font-size: 13px; } html body.login-page .login-card-body p.mb-1 a:hover { text-decoration: underline; } /* ========================================================= MENSAJES DE ERROR ========================================================= */ html body.login-page .help-block { color: #ff6b6b !important; font-size: 12px; margin-top: 5px; } html body.login-page .has-error .form-control { border-color: #ff6b6b !important; } /* ========================================================= ANIMACIÓN ========================================================= */ @keyframes fadeIn { from { opacity: 0; transform: translateY(-20px); } to { opacity: 1; transform: translateY(0); } } /* ========================================================= RESPONSIVE ========================================================= */ @media (max-width: 576px) { html body.login-page { padding: 20px; } html body.login-page .login-box { max-width: 100% !important; } html body.login-page .login-card-body { padding: 40px 25px !important; } }