/* ============================================================ MacadaLab · Login Moderno (overlay) — v9 (final) Reviste el template Colorlib cuando config('login.design')==='moderno'. NO altera el Clásico. Activado con . Cubre los 3 portales (admin/medico/paciente) por compartir layouts.auth. ============================================================ */ /* ---------- tokens (claro) ---------- */ body.login-moderno{ --accent:#2f8bcd; --accent-strong:#1c6fac; --accent-tint:rgba(64,150,211,.14); --accent-glow:rgba(64,150,211,.5); --bg:#eef4f9; --surface:#ffffff; --surface-2:#eff5fb; --ink:#0c1f2e; --ink-soft:#3c5567; --muted:#6d8598; --line:#dbe6ef; --line-strong:#c4d5e3; --field:#f4f8fc; --scrim:rgba(7,23,38,0); --shadow:0 1px 2px rgba(12,31,46,.05), 0 16px 46px -14px rgba(12,31,46,.24); } body.login-moderno.login-dark{ --bg:#071726; --surface:#0e2233; --surface-2:#0b1d2c; --ink:#eaf3fb; --ink-soft:#c6d8e6; --muted:#9fb6c8; --line:#1b3346; --line-strong:#274a63; --field:#0a1e2e; --accent:#4aa6e4; --accent-strong:#6bb8ec; --accent-tint:rgba(74,166,228,.16); --scrim:rgba(7,23,38,.32); --shadow:0 1px 2px rgba(0,0,0,.4), 0 26px 64px -20px rgba(0,0,0,.72); } @media (prefers-color-scheme:dark){ body.login-moderno.login-auto{ --bg:#071726; --surface:#0e2233; --surface-2:#0b1d2c; --ink:#eaf3fb; --ink-soft:#c6d8e6; --muted:#9fb6c8; --line:#1b3346; --line-strong:#274a63; --field:#0a1e2e; --accent:#4aa6e4; --accent-strong:#6bb8ec; --accent-tint:rgba(74,166,228,.16); --scrim:rgba(7,23,38,.32); --shadow:0 1px 2px rgba(0,0,0,.4), 0 26px 64px -20px rgba(0,0,0,.72); } } /* ---------- estructura ---------- */ body.login-moderno .container-login100{ background:var(--bg); } body.login-moderno .wrap-login100{ background:var(--surface); } body.login-moderno .login100-more{ width:calc(100% - 520px); } body.login-moderno .login100-more::before{ background:var(--scrim); } body.login-moderno .login100-form{ width:520px; background-color:var(--surface); display:flex; flex-direction:column; align-items:center; justify-content:center; padding:40px; } body.login-moderno.login-dark .login100-form{ background-image:none; } @media (prefers-color-scheme:dark){ body.login-moderno.login-auto .login100-form{ background-image:none; } } /* ---------- tarjeta cristal ---------- */ body.login-moderno .mod-card{ width:100%; max-width:404px; background:color-mix(in srgb, var(--surface) 74%, transparent); -webkit-backdrop-filter:blur(16px) saturate(1.1); backdrop-filter:blur(16px) saturate(1.1); border:1px solid color-mix(in srgb, var(--line) 70%, transparent); border-radius:24px; padding:38px 34px; box-shadow:var(--shadow); display:flex; flex-direction:column; align-items:stretch; } /* ---------- cabecera: marca + controles ---------- */ body.login-moderno .mcl-topbar{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:24px; } body.login-moderno .mcl-brand{ display:inline-flex; align-items:center; gap:9px; font-weight:700; font-size:18px; color:var(--ink); letter-spacing:-.3px; } body.login-moderno .mcl-brand img{ width:34px; height:34px; object-fit:contain; } body.login-moderno .mcl-controls{ display:inline-flex; align-items:center; gap:8px; } body.login-moderno .dropdown-toggle{ background:transparent; border:1px solid var(--line); color:var(--ink-soft); border-radius:999px; height:34px; padding:0 12px; font-size:13px; } body.login-moderno .dropdown-toggle:hover{ border-color:var(--accent); color:var(--ink); } body.login-moderno .mcl-theme-btn{ width:34px; height:34px; border-radius:999px; border:1px solid var(--line); background:transparent; color:var(--ink-soft); cursor:pointer; display:inline-flex; align-items:center; justify-content:center; font-size:14px; transition:border-color .2s, color .2s; } body.login-moderno .mcl-theme-btn:hover{ border-color:var(--accent); color:var(--accent); } /* ---------- pestañas de portal ---------- */ body.login-moderno .mcl-roles{ display:flex; gap:4px; padding:4px; margin-bottom:30px; background:var(--surface-2); border:1px solid var(--line); border-radius:999px; } body.login-moderno .mcl-roles a{ flex:1; display:inline-flex; align-items:center; justify-content:center; gap:6px; padding:9px 0; border-radius:999px; font-size:13.5px; font-weight:600; color:var(--muted); text-decoration:none; transition:color .2s, background .2s; } body.login-moderno .mcl-roles a:hover{ color:var(--ink-soft); } body.login-moderno .mcl-roles a.is-active{ background:var(--surface); color:var(--accent); box-shadow:0 1px 3px rgba(12,31,46,.14); border:1px solid var(--line); } /* oscuro: máximo contraste en las pestañas (a prueba de overrides) */ body.login-moderno.login-dark .mcl-roles{ background:#0e2c46; border-color:#37618a; } body.login-moderno.login-dark .mcl-roles a{ color:#cfe0ee !important; } body.login-moderno.login-dark .mcl-roles a i{ color:inherit !important; } body.login-moderno.login-dark .mcl-roles a:hover{ color:#ffffff !important; } body.login-moderno.login-dark .mcl-roles a.is-active{ background:#3a86c4 !important; color:#ffffff !important; border-color:#5aa0d8 !important; box-shadow:0 2px 8px rgba(0,0,0,.4); } body.login-moderno.login-dark .mcl-roles a.is-active i{ color:#ffffff !important; } @media (prefers-color-scheme:dark){ body.login-moderno.login-auto .mcl-roles{ background:#0e2c46; border-color:#37618a; } body.login-moderno.login-auto .mcl-roles a{ color:#cfe0ee !important; } body.login-moderno.login-auto .mcl-roles a i{ color:inherit !important; } body.login-moderno.login-auto .mcl-roles a:hover{ color:#ffffff !important; } body.login-moderno.login-auto .mcl-roles a.is-active{ background:#3a86c4 !important; color:#ffffff !important; border-color:#5aa0d8 !important; box-shadow:0 2px 8px rgba(0,0,0,.4); } body.login-moderno.login-auto .mcl-roles a.is-active i{ color:#ffffff !important; } } /* ---------- título + subtítulo (izquierda) ---------- */ body.login-moderno .login100-form-title{ color:var(--ink); } body.login-moderno .login100-form-title.p-b-43{ text-align:left; font-size:27px; font-weight:700; line-height:1.15; letter-spacing:-.5px; padding-bottom:6px!important; } body.login-moderno .mcl-subtitle{ margin:0 0 30px; text-align:left; color:var(--muted); font-size:15px; line-height:1.55; } /* ---------- inputs: etiqueta ARRIBA del recuadro ---------- */ body.login-moderno .wrap-input100{ position:relative; height:56px; border:1.5px solid var(--line); border-radius:12px; background:var(--field); margin:44px 0 22px; transition:border-color .2s, box-shadow .2s, background .2s; } body.login-moderno .wrap-input100:focus-within{ border-color:var(--accent); background:var(--surface); box-shadow:0 0 0 4px var(--accent-tint); } /* etiqueta encima del campo (fija, no flotante) */ body.login-moderno .label-input100, body.login-moderno .input100:focus + .focus-input100 + .label-input100{ top:-31px!important; left:0; width:auto; padding-left:0; font-size:14px; font-weight:600; color:var(--ink-soft); } /* input llena el recuadro */ body.login-moderno .input100{ top:0!important; height:100%!important; font-size:17px; color:var(--ink); padding-left:48px; padding-right:44px; } body.login-moderno .input100::placeholder{ color:var(--muted); } body.login-moderno .wrap-input100.error-validation{ border-color:#e0524d; } /* íconos dentro de los campos (Font Awesome 5 solid) */ body.login-moderno .wrap-input100::before{ position:absolute; left:18px; top:50%; transform:translateY(-50%); font-family:"Font Awesome 5 Free"; font-weight:900; color:var(--muted); font-size:15px; z-index:2; pointer-events:none; transition:color .2s; } body.login-moderno .wrap-input100:nth-of-type(1)::before{ content:"\f0e0"; } body.login-moderno .wrap-input100:nth-of-type(2)::before{ content:"\f023"; } body.login-moderno .wrap-input100:focus-within::before{ color:var(--accent); } /* mostrar/ocultar contraseña */ body.login-moderno .mod-reveal{ position:absolute; right:14px; top:50%; transform:translateY(-50%); border:0; background:transparent; color:var(--muted); cursor:pointer; font-size:16px; padding:6px; z-index:3; line-height:1; } body.login-moderno .mod-reveal:hover{ color:var(--accent); } /* ---------- fila Recordarme ---------- */ body.login-moderno .flex-sb-m{ display:flex; justify-content:space-between; align-items:center; margin:16px 0 20px; } body.login-moderno .label-checkbox100{ font-size:14px; color:var(--ink-soft); padding-left:28px; } body.login-moderno .label-checkbox100::before{ border-color:var(--line-strong); border-radius:5px; width:19px; height:19px; } body.login-moderno .input-checkbox100:checked + .label-checkbox100::before{ background:var(--accent); border-color:var(--accent); color:#fff; } body.login-moderno .txt1{ color:var(--accent); font-size:14px; font-weight:600; text-decoration:none; } body.login-moderno .txt1:hover{ text-decoration:underline; } /* ---------- botón ---------- */ body.login-moderno .login100-form-btn{ height:54px; margin-top:14px; border-radius:12px; font-size:15px; letter-spacing:.5px; background:linear-gradient(135deg, var(--accent) 0%, var(--accent-strong) 100%); box-shadow:0 12px 26px -8px var(--accent-glow); transition:filter .2s, box-shadow .2s, transform .1s; } body.login-moderno .login100-form-btn:hover{ background:linear-gradient(135deg, var(--accent) 0%, var(--accent-strong) 100%); filter:brightness(1.07); box-shadow:0 16px 32px -8px var(--accent-glow); } body.login-moderno .login100-form-btn:active{ transform:translateY(1px); } body.login-moderno .login100-form-btn::after{ content:"\f061"; font-family:"Font Awesome 5 Free"; font-weight:900; font-size:13px; margin-left:10px; } /* ---------- link "Inicio de sesión de Pacientes" (alt con divisoria) ---------- */ body.login-moderno .login100-form-title.p-t-30{ text-align:center; border-top:1px solid var(--line); margin-top:20px; padding-top:26px!important; padding-bottom:6px!important; } body.login-moderno a h5.d-inline{ color:var(--ink-soft); font-size:15px; font-weight:600; transition:color .2s; } body.login-moderno a:hover h5.d-inline{ color:var(--accent); } body.login-moderno a h5.d-inline .fas{ color:var(--accent); } /* ---------- redes (imágenes que sirve el sistema) ---------- */ body.login-moderno .social{ padding-left:0; display:flex; justify-content:center; gap:10px; } body.login-moderno .social li{ list-style:none; } body.login-moderno .social img{ border-radius:10px; transition:transform .15s; } body.login-moderno .social a:hover img{ transform:translateY(-2px); } body.login-moderno h6{ color:var(--muted); } body.login-moderno .alert{ border-radius:12px; } @media (prefers-reduced-motion:reduce){ body.login-moderno *{ transition-duration:.01ms!important; } }