/* ========================= SolidumHouse Login CSS (clean) ========================= */ /* Paleta y tokens */ :root{ --navy:#0A2540; --emerald:#00A676; --ink:#1b263b; --petrol:#0f3d3e; --muted:#6b7280; --card-bg:#ffffff; --ring:#e5e7eb; } /* Fondo moderno institucional */ body { background: /* vignette suave en bordes */ radial-gradient(1200px 600px at 50% 40%, rgba(13,27,42,0.15) 0%, rgba(13,27,42,0.55) 70%, rgba(13,27,42,0.75) 100%), /* overlay diagonal corporativo */ linear-gradient(135deg, rgba(13,27,42,0.65) 0%, rgba(15,61,62,0.55) 100%), /* imagen de skyline */ url('/assets/media/miami-skyline.png') center/cover no-repeat; background-attachment: fixed; } /* Layout wrapper */ .custom-d-flex-form { padding: clamp(24px, 4vw, 40px); } /* Tarjeta estilo “glass” sobrio */ .card.card-custom{ border-radius: 16px; border: 1px solid rgba(10,37,64,.08); box-shadow: 0 18px 50px rgba(10,37,64,.20); background: var(--card-bg); overflow: hidden; } .card.card-custom::before{ content:""; display:block; height:6px; background: linear-gradient(90deg, var(--emerald), #19b68a); } /* Logo dentro de formularios */ .card .login-form .img_devices{ display:block; max-width:min(80%, 260px); max-height:110px; width:auto; height:auto; object-fit:contain; margin:8px auto 14px; } @media (max-width:480px){ .card .login-form .img_devices{ max-width:72%; max-height:95px; } } /* Títulos y enlaces */ .align-titles{ text-align:center; color:#111827; } a.blue{ color:var(--emerald); font-weight:700; text-decoration:none; } a.blue:hover{ text-decoration:underline; } /* Inputs modernos */ .login-form .form-control{ background:#f3f4f6; border:1px solid transparent; border-radius:12px; transition: box-shadow .2s, border-color .2s, background-color .2s; } .login-form .form-control:focus{ background:#fff; border-color:var(--emerald); box-shadow:0 0 0 4px rgba(0,166,118,.12); } label.font-size-h6{ color:#111827; } .bg-gray{ background:#f3f4f6 !important; } /* Botón primario */ .btn-blue.btn{ background:var(--emerald); color:#fff; border-radius:12px; border:none; transition: transform .05s ease, box-shadow .2s ease, background .2s ease; box-shadow:0 8px 20px rgba(0,166,118,.25); } .btn-blue.btn:hover{ background:#0aa87a; box-shadow:0 10px 22px rgba(0,166,118,.30); transform:translateY(-1px); } .btn-blue.btn:active{ transform:translateY(0); } /* Checkbox (marcado con color de marca) */ .checkbox > input:checked ~ span { background-color: var(--emerald); } /* Espaciado general de bloques */ .login-custom, .register-custom{ margin-top:40px !important; } /* ========================= Visibilidad de vistas (solo una activa) ========================= */ /* Estado base (login visible) */ #login-signin{ display:block; opacity:1; transition:opacity .4s ease; } #login-forgot{ display:none; opacity:0; transition:opacity .4s ease; } .register-custom{ display:none; opacity:0; transition:opacity .4s ease; } /* Clases utilitarias */ .hide{ display:none !important; } .show{ display:block !important; opacity:1 !important; } /* Modos por clase en (por si lo manejas con JS) */ .mode-forgot #login-signin{ display:none; opacity:0; } .mode-forgot #login-forgot{ display:block; opacity:1; } .mode-register .login-custom{ display:none; opacity:0; } .mode-register .register-custom{ display:flex; opacity:1; } /* ========================= Responsivo ========================= */ @media (min-width:992px){ .login.login-3 .login-aside{ width:50%; max-width:50%; } .login.login-3 .login-content .login-form{ width:100%; max-width:1000px !important; } } @media (max-width:1100px){ .login-custom{ width:auto; margin-top:115px; } .register-custom{ width:100%; margin-top:115px; } } .login, .login-3, .login-content, .custom-d-flex-form { background: transparent !important; background-color: transparent !important; }