/* ==========================================================================
   login.css (standalone)
   - NO usa layout.css
   - Todo scoping bajo .login-page para evitar conflictos
   ========================================================================== */

/* Fuente opcional (puedes quitar si no la usas) */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap');

.login-page {
    margin: 0;
    /* Paleta local */
    --primary-color: #0a5ea8;
    /* azul marca */
    --bg: #ffffff;
    --txt: #1f2733;
    --muted: #6c7a92;
    --card: #ffffff;
    --radius: 14px;
    --shadow: 0 10px 30px rgba(16, 24, 40, .08);

    font-family: 'Poppins', system-ui, -apple-system, Segoe UI, Roboto, 'Helvetica Neue', Arial, sans-serif;
    color: var(--txt);
    background: var(--bg);
}

/* Contenedor principal: form 30% / hero 70% */
.login-page .login-shell {
    min-height: 100vh;
    display: grid;
    grid-template-columns: minmax(360px, 40%) 60%;
}

/* Panel del formulario */
.login-page .login-panel {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(24px, 4vw, 64px);
}

.login-page .login-card {
    width: min(440px, 100%);
    padding: clamp(20px, 3.5vw, 36px);
}

.login-page .brand-lockup {
    display: flex;
    align-items: center;
    gap: .9rem;
    margin-bottom: 1rem;
}

.login-page .brand-lockup img {
    width: 40px;
    height: 40px;
    display: block;
}

.login-page .brand-copy h1 {
    font-size: clamp(1.15rem, 2.3vw, 1.45rem);
    margin: 0;
}

.login-page .login-sub {
    margin: .25rem 0 0;
    color: var(--muted);
}

/* Campos */
.login-page .field {
    display: block;
    margin-top: 1rem;
}

.login-page .field-label {
    display: block;
    font-weight: 600;
    margin-bottom: .4rem;
}

.login-page .field input {
    width: 100%;
    height: 48px;
    padding: 0 14px;
    border: 1px solid #d9e0ea;
    border-radius: 10px;
    background: #fff;
    color: var(--txt);
    outline: none;
    transition: border-color .2s ease, box-shadow .2s ease;
}

.login-page .field input:focus {
    border-color: color-mix(in oklab, var(--primary-color) 60%, white);
    box-shadow: 0 0 0 3px color-mix(in oklab, var(--primary-color) 25%, white);
}

/* Password + botón ojo */
.login-page .pw-wrap {
    position: relative;
}

.login-page .pw-wrap input {
    padding-right: 44px;
}

.login-page .pw-toggle {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    border: 0;
    background: transparent;
    cursor: pointer;
    color: #7b8aa0;
    border-radius: 8px;
}

.login-page .pw-toggle:hover {
    background: #f1f4f8;
}

/* Fila inferior */
.login-page .row-between {
    margin: .8rem 0 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    flex-wrap: wrap;
}

.login-page .chk {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    color: var(--muted);
}

.login-page .chk input {
    width: 18px;
    height: 18px;
}

.login-page .link {
    color: var(--primary-color);
    text-decoration: none;
}

.login-page .link:hover {
    text-decoration: underline;
}

/* Botón */
.login-page .btn-primary {
    width: 100%;
    height: 48px;
    border: 0;
    border-radius: 12px;
    background: var(--primary-color);
    color: #fff;
    font-weight: 700;
    letter-spacing: .2px;
    cursor: pointer;
    transition: transform .02s ease, filter .2s ease;
}

.login-page .btn-primary:hover {
    filter: brightness(1.03);
}

.login-page .btn-primary:active {
    transform: translateY(1px);
}

.login-page .signup-hint {
    margin: .9rem 0 0;
    color: var(--muted);
    text-align: center;
}

/* Hero 70% */
.login-page .login-hero {
    position: relative;
    overflow: hidden;
    border-left: 1px solid #e9eef5;
}

.login-page .hero-img {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    transform: scale(1.02);
}

.login-page .hero-overlay {
    position: absolute;
    left: clamp(24px, 4vw, 48px);
    bottom: clamp(24px, 4vw, 48px);
    color: #fff;
    max-width: min(520px, 80%);
    text-shadow: 0 2px 12px rgba(0, 0, 0, .35);
}

.login-page .hero-overlay h2 {
    margin: 0 0 .25rem;
    font-size: clamp(1.2rem, 2.4vw, 1.8rem);
}

.login-page .hero-overlay p {
    margin: 0;
    opacity: .95;
}

/* ---------- Responsive ---------- */
@media (max-width: 992px) {
    .login-page .login-shell {
        grid-template-columns: 1fr;
    }

    .login-page .login-hero {
        display: none;
    }

    /* oculta la imagen */
    .login-page .login-panel {
        min-height: 100vh;
    }

    /* centra vertical */
}

@media (max-width: 576px) {
    .login-page .login-card {
        border-radius: 12px;
        box-shadow: 0 8px 22px rgba(16, 24, 40, .06);
    }
}
/* ===== Branding centrado en el login ===== */
.login-page .login-head{
  text-align:center;
  margin: 0 0 1rem;
}

.login-page .contact-brand{
  display:flex;
  flex-direction: column;   /* logo arriba, texto debajo */
  align-items:center;
  gap:.45rem;
  margin-bottom:.35rem;
}
.login-page .contact-brand img{
  width:56px; height:56px; border-radius:50%;
  display:block;
}
.login-page .contact-brand-text{
  display:flex; flex-direction:column; align-items:center; gap:.1rem;
}
.login-page .contact-brand-text .brand-name{
  font-weight:700; letter-spacing:.2px;
}
.login-page .contact-brand-text .brand-desc{
  color:var(--muted); font-size:.9rem;
}

/* Chip con el nombre del acceso (Intranet, Biblioteca, Aula Virtual) */
.login-page .access-label{
  display:inline-block;
  margin:.25rem 0 .35rem;
  padding:.25rem .6rem;
  border-radius:999px;
  font-weight:600;
  font-size:.9rem;
  color:#fff;
  background: var(--primary-color);
  box-shadow: 0 2px 10px rgba(10,94,168,.18);
}

/* Título bajo el chip */
.login-page .login-title{
  margin:.25rem 0 0;
  font-size: clamp(1.15rem, 2.2vw, 1.5rem);
}
/* --- FIX 1: misma caja para todos los controles --- */
.login-page *, .login-page *::before, .login-page *::after {
  box-sizing: border-box;
}

/* Alto único para campos */
.login-page { --field-h: 48px; }

/* --- FIX 2: normaliza inputs (evita estilos del UA) --- */
.login-page input[type="email"],
.login-page input[type="password"],
.login-page input[type="text"]{
  -webkit-appearance: none;
  appearance: none;
  line-height: var(--field-h);      /* asegura misma “línea” */
}

/* --- FIX 3: todos los inputs con el mismo alto exacto --- */
.login-page .field input,
.login-page .pw-wrap input{
  height: var(--field-h);
  padding-block: 0;                 /* quita padding vertical implícito */
  border-radius: 10px;              /* iguales bordes en ambos */
  display: block;                   /* evita inline quirks */
}

/* El de password solo añade espacio para el botón-ojito */
.login-page .pw-wrap{ position: relative; }
.login-page .pw-wrap input{ padding-right: 44px; }

/* Botón ojo centrado sin afectar el alto del input */
.login-page .pw-toggle{
  position: absolute;
  inset-inline-end: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 36px; height: 36px;
  display: grid; place-items: center;
  border: 0; background: transparent; color: #7b8aa0;
}
.login-page .pw-toggle:hover{ background: #f1f4f8; }

/* (Opcional) Ajuste de autofill WebKit para que no cambie el box model */
.login-page input:-webkit-autofill{
  -webkit-box-shadow: 0 0 0 1000px #fff inset !important;
  -webkit-text-fill-color: inherit !important;
}