/* Apartado: Core (auth/login, instituciones, usuarios) */ /* ---------- Auth (login / recuperar contraseña) ---------- Layout de página completa en 3 franjas (topbar / main / footer), no un único bloque centrado con `justify-content:center` — eso dejaba la marca y el pie flotando pegados al contenido, con huecos muertos arriba/abajo en pantallas altas. Aquí .auth-topbar queda arriba, .auth-shell__foot abajo, y .auth-main (flex:1) reparte y centra el resto del alto real disponible entre ambos. .auth-container es el único que pone el ancho máximo + padding lateral fluido, compartido por las 3 franjas para que quede todo alineado en la misma columna. Los blobs de gradiente (reutiliza los tokens de chip ya definidos arriba: naranja + índigo, en vez de inventar una paleta nueva) viven en el propio .auth-shell (el body), a pantalla completa. Sin login social ni registro público: las cuentas las crea la institución/DRE, no el estudiante. */ @keyframes auth-fade-up { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } .auth-shell { position: relative; min-height: 100vh; display: flex; flex-direction: column; /* Solo horizontal: en móvil el hero + la tarjeta apilados superan fácilmente el alto de pantalla, y esto vivía en el . Con overflow:hidden a secas la página entera quedaba sin scroll vertical — el formulario se cortaba y era imposible llegar al botón. Los blobs, que son los que necesitan recorte, solo se salen por los costados (ver sus offsets negativos abajo), así que overflow-x basta. */ overflow-x: hidden; background: radial-gradient(rgba(16, 24, 40, 0.055) 1px, transparent 1.5px) 0 0 / 26px 26px, var(--dre-bg); } .auth-shell::before, .auth-shell::after { content: ''; position: absolute; border-radius: 50%; pointer-events: none; z-index: 0; } .auth-shell::before { width: 46rem; height: 46rem; top: -16rem; left: -14rem; background: var(--chip-orange-bg); filter: blur(130px); } .auth-shell::after { width: 50rem; height: 50rem; bottom: -22rem; left: 18%; background: var(--color-indigo-200); filter: blur(140px); opacity: 0.85; } .auth-container { /* .auth-main es flex y .auth-container es su único hijo: por defecto un item flex/grid no encoge más allá del ancho mínimo de su contenido (min-width:auto), así que sin este reset toda la columna se negaba a bajar de ese mínimo y en pantallas angostas el layout entero quedaba más ancho que el viewport — recortado en vez de reacomodado, por el overflow-x:hidden del .auth-shell. Mismo motivo para .auth-hero y .auth-form más abajo (hijos del grid .auth-frame__body). */ min-width: 0; width: 100%; max-width: 84rem; margin: 0 auto; padding: 0 clamp(1.5rem, 5vw, 3.5rem); } .auth-topbar { position: relative; z-index: 1; padding-top: clamp(1.75rem, 4vw, 2.75rem); animation: auth-fade-up 0.5s ease both; } .auth-main { position: relative; z-index: 1; flex: 1; display: flex; align-items: center; min-width: 0; padding: clamp(2rem, 5vw, 3.5rem) 0; } .auth-frame__nav { display: flex; align-items: center; justify-content: space-between; gap: 1rem; } .auth-frame__brand { display: flex; align-items: center; gap: 0.65rem; font-weight: 700; color: #101828; } .auth-frame__brand span { width: 2.25rem; height: 2.25rem; flex-shrink: 0; border-radius: 0.65rem; background: linear-gradient(135deg, var(--dre-primary), var(--dre-primary-dark)); box-shadow: 0 6px 16px -4px rgba(79, 110, 247, 0.45); display: flex; align-items: center; justify-content: center; } .auth-frame__brand svg { width: 1.25rem; height: 1.25rem; color: #fff; } .auth-frame__badge { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.4rem 0.85rem; border-radius: 999px; background: rgba(255, 255, 255, 0.7); border: 1px solid var(--color-indigo-100); font-size: 0.72rem; font-weight: 600; color: #475467; white-space: nowrap; } .auth-frame__badge svg { width: 0.9rem; height: 0.9rem; color: var(--dre-success); flex-shrink: 0; } .auth-frame__body { width: 100%; min-width: 0; display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(2.5rem, 6vw, 5rem); align-items: center; } .auth-hero { min-width: 0; animation: auth-fade-up 0.6s ease 0.05s both; } .auth-hero__kicker { display: inline-flex; align-items: center; gap: 0.55rem; padding: 0.4rem 0.9rem; border-radius: 999px; background: rgba(255, 255, 255, 0.7); border: 1px solid var(--color-indigo-100); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--dre-primary-dark); margin-bottom: 1.5rem; } .auth-hero__kicker span { width: 0.4rem; height: 0.4rem; border-radius: 50%; background: var(--dre-primary); flex-shrink: 0; } .auth-hero__title { font-size: 2.75rem; font-weight: 800; line-height: 1.14; letter-spacing: -0.02em; color: #101828; margin: 0 0 1.1rem; } .auth-hero__title em { font-style: normal; color: var(--dre-primary); } .auth-hero__subtitle { font-size: 1rem; color: #475467; line-height: 1.65; max-width: 30rem; margin: 0; } .auth-hero__features { list-style: none; margin: 2rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.75rem; max-width: 26rem; } .auth-hero__features li { display: flex; align-items: center; gap: 0.75rem; font-size: 0.875rem; font-weight: 500; color: #344054; padding: 0.6rem 0.85rem; border-radius: var(--radius-md); background: rgba(255, 255, 255, 0.55); border: 1px solid rgba(255, 255, 255, 0.7); } .auth-hero__features li span { width: 1.9rem; height: 1.9rem; flex-shrink: 0; border-radius: 0.55rem; background: #fff; color: var(--dre-primary); display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-xs); } .auth-hero__features li svg { width: 1.05rem; height: 1.05rem; } .auth-hero__note { margin-top: 1.75rem; font-size: 0.875rem; color: #667085; line-height: 1.6; } .auth-hero__note strong { color: var(--dre-primary); font-weight: 700; } .auth-form { width: 100%; min-width: 0; max-width: 25.5rem; margin-left: auto; position: relative; padding: 2.25rem 2.25rem 2.5rem; border-radius: 1.75rem; background: rgba(255, 255, 255, 0.72); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border: 1px solid rgba(255, 255, 255, 0.8); box-shadow: var(--shadow-xl); animation: auth-fade-up 0.6s ease 0.1s both; } .auth-form__title { margin: 0 0 0.35rem; font-size: 1.45rem; font-weight: 800; color: #101828; } .auth-form__subtitle { margin: 0 0 1.75rem; font-size: 0.875rem; color: #667085; } .auth-form__footer { margin-top: 1.75rem; text-align: center; font-size: 0.82rem; color: #667085; } .auth-form__hint { margin: 0.4rem 0 0; font-size: 0.78rem; color: #667085; } .auth-shell__foot { position: relative; z-index: 1; padding-bottom: clamp(1.5rem, 4vw, 2.5rem); text-align: center; font-size: 0.78rem; color: #667085; } /* Inputs "flotantes" sobre la tarjeta de vidrio: sin el borde gris genérico de .x-input, con relleno blanco casi sólido (contraste dentro de la propia tarjeta translúcida) y un anillo de foco a juego con la marca. */ .auth-input { background: rgba(255, 255, 255, 0.9); border-color: var(--color-indigo-100); border-radius: var(--radius-lg); padding: 0.8rem 1rem; transition: box-shadow 0.15s ease, background 0.15s ease; } .auth-input:focus { background: #fff; box-shadow: 0 0 0 4px var(--color-indigo-50); } /* ---------- Ícono dentro del campo (solo el toggle de mostrar/ocultar contraseña) ---------- */ .input-icon-group { position: relative; } .input-icon-toggle-field { padding-right: 2.75rem; } .input-icon-toggle { position: absolute; right: 0.7rem; top: 50%; transform: translateY(-50%); background: none; border: none; padding: 0.3rem; cursor: pointer; color: #98a2b3; display: flex; } .input-icon-toggle:hover { color: #475467; } .input-icon-toggle svg { width: 1.1rem; height: 1.1rem; } .auth-form-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin: -0.25rem 0 0.25rem; } .auth-form-row a { font-size: 0.82rem; font-weight: 500; color: #667085; text-decoration: none; } .auth-form-row a:hover { color: var(--dre-primary); } .auth-form-checkbox { display: flex; align-items: center; gap: 0.5rem; font-size: 0.85rem; color: #475467; } .btn-auth-submit { background: linear-gradient(135deg, var(--dre-primary), var(--dre-primary-dark)); border: none; border-radius: var(--radius-lg); padding: 0.85rem 1rem; font-size: 0.95rem; box-shadow: 0 10px 24px -8px rgba(79, 110, 247, 0.55); transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease; } .btn-auth-submit:hover { filter: brightness(1.06); transform: translateY(-1px); box-shadow: 0 14px 28px -8px rgba(79, 110, 247, 0.6); } .btn-auth-submit svg { width: 1.05rem; height: 1.05rem; } .btn-auth-submit:disabled { opacity: 0.7; cursor: progress; transform: none; } /* Tablet: al apilarse en una columna, tanto el hero como la tarjeta necesitan un ancho máximo propio y centrado — sin esto, ambos se estiraban al ancho completo del contenedor (hasta ~700px en un iPad portrait), y una tarjeta de login con inputs de 700px de ancho se ve completamente fuera de proporción, no como un formulario. */ @media (max-width: 960px) { .auth-container { padding: 0 1.5rem; } .auth-frame__body { grid-template-columns: 1fr; gap: 2.5rem; } .auth-hero { width: 100%; max-width: 34rem; margin: 0 auto; text-align: center; } .auth-hero__subtitle { margin: 0 auto; } .auth-hero__title { font-size: 2.25rem; } .auth-hero__features { display: none; } .auth-form { width: 100%; max-width: 26rem; margin: 0 auto; } } /* Teléfono: nav más compacta (la insignia de cumplimiento se sacrifica primero, el nombre de la marca se queda), blobs más chicos para que no dominen una pantalla angosta, y menos padding vertical para no alejar la tarjeta de la marca sin necesidad. */ @media (max-width: 640px) { .auth-shell::before { width: 26rem; height: 26rem; top: -9rem; left: -9rem; } .auth-shell::after { width: 28rem; height: 28rem; bottom: -12rem; left: 6%; } .auth-topbar { padding-top: 1.5rem; } .auth-main { padding: 1.75rem 0; } .auth-frame__nav { gap: 0.6rem; } .auth-frame__badge { display: none; } .auth-hero__kicker { margin-bottom: 1.1rem; } .auth-hero__title { font-size: 1.85rem; } .auth-hero__subtitle { font-size: 0.925rem; } .auth-hero__note { margin-top: 1.25rem; font-size: 0.8rem; } .auth-form { padding: 1.5rem 1.25rem 1.75rem; border-radius: 1.5rem; } } @media (max-width: 380px) { .auth-hero__title { font-size: 1.6rem; } }