/* ========================= BODY LOGIN ========================= */ body.login-page{ margin:0; padding:0; min-height:100vh; display:flex; justify-content:flex-end; align-items:center; overflow:hidden; position:relative; /* Fondo principal: rosa muy claro → rosa → lila La transición es amplia para evitar que parezcan dos colores separados. */ background: radial-gradient( ellipse at 15% 20%, rgba(255,255,255,.95) 0%, rgba(255,255,255,.45) 20%, transparent 48% ), radial-gradient( ellipse at 45% 80%, rgba(244,190,214,.45) 0%, rgba(244,190,214,.18) 28%, transparent 65% ), linear-gradient( 105deg, #f6dce8 0%, #f7e1eb 28%, #f4dce8 50%, #e7d4e7 72%, #bca2c8 100% ); } /* ========================= CAPA DE LUZ / SOMBRA SOBRE TODO EL FONDO ========================= */ body.login-page::after{ content:""; position:absolute; inset:0; pointer-events:none; background: radial-gradient( ellipse at 20% 45%, rgba(255,255,255,.65) 0%, rgba(255,255,255,.25) 30%, transparent 65% ), linear-gradient( 90deg, rgba(255,255,255,.10) 0%, transparent 45%, rgba(137,105,153,.10) 100% ); z-index:1; } /* ========================= WALLPAPER IZQUIERDO ========================= */ body.login-page::before{ content:""; position:absolute; left:0; top:0; width:72%; height:100%; background-image: linear-gradient( 90deg, rgba(255,255,255,.10) 0%, rgba(255,235,243,.18) 35%, rgba(246,216,231,.30) 62%, rgba(218,190,218,.55) 100% ), url("../../img/imagen_login.jpeg"); background-repeat:no-repeat; background-position:center; background-size: cover, 75%; opacity:.95; z-index:2; /* --- DIFUMINAR BORDES --- */ -webkit-mask-image: radial-gradient(circle, black 10%, transparent 95%); mask-image: radial-gradient(circle, black 10%, transparent 95%); } /* ========================= CONTENEDOR LOGIN ========================= */ .login-box{ width:100%; max-width:420px; position:absolute; right:9%; top:50%; transform:translateY(-50%); z-index:10; } /* ========================= CARD LOGIN ========================= */ .login-card-body{ border:none; background:rgba(255,255,255,.86); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); border-radius:26px; padding:28px; box-shadow: 0 20px 50px rgba(116,78,108,.16), 0 5px 20px rgba(255,255,255,.35); border:1px solid rgba(255,255,255,.55); } .login-card{ border:none; background:transparent; box-shadow:none; } /* ========================= CARD TITULO ========================= */ .login-title-card{ background: linear-gradient( 145deg, rgba(255,255,255,.98), rgba(252,239,246,.90) ); border-radius:20px; padding:20px; text-align:center; margin-bottom:20px; box-shadow: 0 10px 28px rgba(150,100,130,.08); border:1px solid rgba(255,255,255,.75); } /* ========================= TITULO PRINCIPAL ========================= */ .titulo-login{ font-family:"Poppins", sans-serif; font-size:28px; font-weight:800; color:#754866 !important; letter-spacing:1.5px; text-transform:uppercase; margin-bottom:6px; text-shadow: 0 1px 1px rgba(255,255,255,.8); } /* ========================= SUBTITULO ========================= */ .subtitulo-login{ font-family: "Segoe UI", sans-serif; font-size:14px; font-weight:500; color:#8d7187 !important; letter-spacing:.4px; margin-bottom:6px; } /* ========================= NOMBRE DOCTORA ========================= */ .salon-login{ font-family:"Poppins", sans-serif; font-size:18px; font-weight:700; color:#c06b91 !important; letter-spacing:.4px; } /* ========================= INPUTS ========================= */ .login-card-body .form-control{ height:46px; border-radius:14px; border:1px solid #eadce4; background:rgba(255,255,255,.78); color:#5f4b58; transition: all .25s ease; } /* PLACEHOLDER */ .login-card-body .form-control::placeholder{ color:#a995a2; } /* ========================= FOCUS ========================= */ .login-card-body .form-control:focus{ border-color:#d18aaa; background:#ffffff; box-shadow: 0 0 0 4px rgba(209,138,170,.13); } /* ========================= PASSWORD ICON ========================= */ .toggle-password{ background:#fbf5f8; border-radius:0 14px 14px 0; cursor:pointer; color:#b47b99; transition:all .25s ease; } .toggle-password:hover{ background:#f6e6ee; color:#a45f81; } /* ========================= CHECKBOX ========================= */ .icheck-primary label{ color:#74646f; font-size:14px; font-weight:500; } /* ========================= CHECK ACTIVO ========================= */ .icheck-primary input:checked + label::before{ background-color:#c9789d; border-color:#c9789d; } /* ========================= BOTON LOGIN ========================= */ .btn-login{ width:100%; height:50px; border:none; border-radius:15px; /* Rosa → rosado → lila para que combine con el fondo. */ background: linear-gradient( 135deg, #d986aa 0%, #c96f99 48%, #a987b7 100% ); color:#ffffff; font-size:15px; font-weight:700; letter-spacing:.3px; box-shadow: 0 8px 20px rgba(190,105,145,.22); transition: all .3s ease; } /* ========================= HOVER BOTON ========================= */ .btn-login:hover{ transform:translateY(-2px); background: linear-gradient( 135deg, #d57fa5 0%, #c36591 48%, #9d7cad 100% ); box-shadow: 0 12px 28px rgba(181,91,133,.30); color:#ffffff; } /* ========================= ICONO BOTON ========================= */ .btn-login i{ margin-right:7px; } /* ========================= RESPONSIVE TABLET ========================= */ @media (max-width:992px){ body.login-page{ justify-content:center; background: radial-gradient( ellipse at 30% 20%, #ffffff 0%, transparent 45% ), linear-gradient( 135deg, #f6dce8, #ead5e7, #c2a7ca ); } body.login-page::before{ opacity:.10; width:100%; background-size:cover; } .login-box{ position:relative; right:auto; top:auto; transform:none; margin:0 auto; padding:20px; } } /* ========================= RESPONSIVE MOBILE ========================= */ @media (max-width:576px){ .login-card-body{ padding:22px; border-radius:22px; } .titulo-login{ font-size:22px; letter-spacing:1px; } .login-title-card{ padding:17px; } }