/* ========================================================= 0) Design Tokens ========================================================= */ :root{ /* Marca (morado/rosa) */ --brand-50:#fbf7ff; --brand-100:#f4e9ff; --brand-200:#e7d0ff; --brand-300:#c77dff; --brand-400:#ae2a96; /* rosa/fucsia */ --brand-500:#7c2480; /* primario morado */ --brand-600:#51206d; /* hover */ --brand-700:#401d65; /* active */ --brand-800:#2f134f; /* Neutros */ --gray-50:#f8fafc; --gray-100:#f1f5f9; --gray-200:#e2e8f0; --gray-300:#cbd5e1; --gray-400:#94a3b8; --gray-500:#64748b; --gray-600:#475569; --gray-700:#334155; /* Accesibilidad (focus ring) */ --ring: 0 0 0 .25rem rgba(199,125,255,.22); /* basado en brand-300 */ } /* Tipografía global (asegúrate de cargar Google Fonts en el ) */ body { font-family: 'Open Sans', sans-serif; } /* ========================================================= 1) Layout base (sin sidebar) ========================================================= */ .layout-public { margin:0 !important; } .layout-public .main-content{ margin-left:0 !important; padding:0 !important; } /* ========================================================= 2) Login Layout (3/4 + 1/4) ========================================================= */ .login-wrap{ min-height:100vh; } .login-hero{ /* Overlay morado/rosa sutil sobre la imagen */ background-image: linear-gradient(rgba(124,36,128,.30), rgba(81,32,109,.30)), url("/static/public/img/dental-bg.png"); background-size: cover; background-position: center; background-repeat: no-repeat; min-height:50vh; } @media (min-width:992px){ .login-hero{ min-height:100vh; } } /* Tarjeta del formulario (glassy) */ .login-card{ background: rgba(255,255,255,0.88); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,0.6); border-radius: 20px; box-shadow: 0 12px 32px rgba(16,24,40,.14); transition: transform .2s ease, box-shadow .2s ease; } .lift-on-hover:hover{ transform: translateY(-4px); box-shadow: 0 18px 40px rgba(16,24,40,.18); } /* ========================================================= 3) Tipos, enlaces y elementos básicos ========================================================= */ .form-label { margin-bottom: .5rem; font-size: 12px; color: gray; } a { color: var(--brand-600); } a:hover { color: var(--brand-700); } /* antes tenías "darkgreen": lo cambio a un morado oscuro legible */ a.small.text-decoration-none { font-size: 12px; color: var(--brand-700); } .dashboard .footer{ display:flex; align-items:center; justify-content:center!important; padding:16px 0 26px; color:var(--gray-500); } /* Footer del login (único) */ .login-footer{ color: var(--gray-600); font-size:.86rem; } /* ========================================================= 4) Formularios e inputs ========================================================= */ .form-control:focus{ border-color: var(--brand-500); box-shadow: var(--ring); } @media (min-width: 1400px) { .container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl { max-width: 1450px!important; } } /* Iconos embebidos en inputs */ .icon-input{ position: relative; } .field-icon{ position: absolute; left: 12px; top: 50%; transform: translateY(6px); font-size: 1rem; color: var(--gray-400); } .icon-input .form-control{ padding-left: 2.2rem; border-radius: 12px; } .icon-input .password-toggle{ position: absolute; right: 8px; top: 30px; /* alineado con input */ color: var(--gray-400); text-decoration:none; } /* Switch / checkbox con acento de marca */ .form-check-input{ accent-color: var(--brand-500); } /* ========================================================= 5) Botones ========================================================= */ /* Botón principal “futurista” pero sobrio (morado/rosa) */ .btn-future{ position: relative; padding: 0.65rem 1.3rem; border: 1.5px solid transparent; border-radius: 10px; background: linear-gradient(135deg, var(--brand-500), var(--brand-400)); color: #fff; font-weight: 600; font-size: .95rem; letter-spacing: .4px; text-transform: uppercase; transition: all .25s ease; box-shadow: 0 2px 8px rgba(81,32,109,.14); } .btn-future:hover{ transform: translateY(-1px); box-shadow: 0 6px 18px rgba(81,32,109,.20); filter: brightness(1.03); } .btn-future:active{ transform: scale(.98); } /* Luz sutil en hover */ .btn-future::before{ content:""; position:absolute; inset:0; border-radius:inherit; background: linear-gradient(135deg, rgba(255,255,255,.10), transparent 70%); opacity:0; transition: opacity .3s ease; } .btn-future:hover::before{ opacity:1; } /* OLA discreta (si la usas junto a .btn-wave en el botón) */ .btn-wave{ position: relative; overflow:hidden; } .btn-wave:after{ content:""; position:absolute; top:50%; left:50%; width:0; height:0; background: rgba(255,255,255,.25); border-radius:100%; transform: translate(-50%,-50%); transition: width .4s ease, height .4s ease, opacity .4s ease; opacity:0; } .btn-wave:active:after{ width:220px; height:220px; opacity:1; transition:0s; } /* (Opcional) Botón alternativo de gradiente general */ .btn-gradient{ background: linear-gradient(135deg, var(--brand-500), var(--brand-600)); color:#fff; border:0; border-radius:12px; transition: filter .2s ease, transform .05s ease; } .btn-gradient:hover{ filter: brightness(.97); } .btn-gradient:active{ transform: scale(.99); } /* ========================================================= 6) Branding ========================================================= */ .brand-logo{ height: 42px; width: auto; } /* Badge “beta” en clave morado/rosa */ .badge-beta{ background: var(--brand-100); color: var(--brand-700); border: 1px solid var(--brand-200); } /* ========================================================= 7) Animaciones ========================================================= */ @keyframes fadeUp { from{ opacity:0; transform: translateY(6px); } to{ opacity:1; transform:none; } } .fade-up{ animation: fadeUp .6s ease forwards; }