/* ================= FONDO DEGRADADO (ya lo tenías) ================= */
:root {
    --bg-start: #e6f0f2;
    --bg-mid: #9bb6bf;
    --bg-end: #ceb8d1;
}

html, body {
    height: 100%;
}

body {
    margin: 0;
    background: #e6f0f2;
    background: linear-gradient(115deg, var(--bg-start), var(--bg-mid), var(--bg-end));
    background-attachment: fixed;
    background-repeat: no-repeat;
    min-height: 100vh;
}

/* ================= HEADER (Contacto / Ayuda) ================= */
.auth-header {
    position: absolute;
    top: 16px;
    right: 24px;
    left: auto;
    z-index: 10;
}

.auth-nav {
    display: flex;
    gap: 32px;
}

    .auth-nav a {
        color: #0f172a;
        text-decoration: none;
        font-weight: 600;
    }

        .auth-nav a:hover {
            text-decoration: underline;
        }

/* ================= COLUMNA IZQUIERDA (LOGO) ================= */
/* Si quieres que el logo NO cambie de tamaño en escritorio, usa ancho fijo */
.brand-img {
    width: 800px; /* ← AJUSTA AQUÍ el tamaño de tu logo en desktop */
    height: auto;
    object-fit: contain;
}

@media (max-width: 992px) {
    .brand-img {
        width: clamp(220px, 70vw, 480px);
    }
    /* reduce en móviles */
}

/* ================= TARJETA (CARD) DEL LOGIN ================= */
.login-card {
    position: relative;
    border-radius: 24px;
    /* Sombra suave */
    box-shadow: 0 18px 50px rgba(0,0,0,.18);
}

/* Título principal dentro del card */
.login-title {
    font-size: 28px;
    color: #0f172a;
}

/* Avatar/ícono flotante arriba del card (tú pones la imagen) */
.login-avatar {
    position: absolute;
    top: -44px; /* lo hace sobresalir */
    left: 50%;
    transform: translateX(-50%);
    width: 92px;
    height: 92px;
    border-radius: 50%;
/*    border: 4px solid #0f172a;
  */  
    background: #e3efe7;
    display: grid;
    place-items: center;
    overflow: hidden; /* por si tu icono es redondo y grande */
}
/* Si ya tienes imagen de avatar, dale esta clase */
.avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Placeholder (círculo) por si aún no pones imagen */
/*.avatar-placeholder {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: #2e5b4a;
}*/

/* Opcional: Inputs más “suaves” */
.input-group .form-control {
    background: #f8fafc;
    border-color: #cbd5e1;
    border-radius: 12px;
}

.input-group-text {
    background: #eef2f7;
    border-color: #cbd5e1;
    border-top-left-radius: 12px;
    border-bottom-left-radius: 12px;
}

.btn.btn-outline-secondary {
    border-top-right-radius: 12px;
    border-bottom-right-radius: 12px;
}

/* Botón primario con borde oscuro (estilo de tu mock) */
.btn-primary {
    background-color: #6f95a1;
    border-color: #0f172a;
}

    .btn-primary:hover {
        background-color: #5e8390;
    }

/* Ajustes de separación general en el card para que respire */
@media (min-width: 992px) {
    .login-card {
        padding-top: 56px !important;
    }
    /* espacio por el avatar */
}

/* Tamaño del card de Login */
.login-card {
    /* ANCHO: mínimo 400px, fluido al 42% del viewport, máximo 560px */
    width: clamp(400px, 42vw, 460px); /* ← sube/baja estos números para ajustar */
    max-width: 100%; /* no exceder su columna */
    /* ALTO: asegúrate de que se vea “más largo” */
    min-height: 460px; /* ← aumenta para más altura */
    /* Espacio interno (da sensación de “más alto” también) */
    padding: 40px !important; /* si usas p-4/p-5 en la vista, este gana */
}


/* Separación extra entre columnas (logo vs card) */
/*.login-row{ column-gap: 64px; }*/       /* ← ajusta 64px a tu gusto */
/*@media (min-width: 1400px){
  .login-row{ column-gap: 80px; }*/     /* un poco más en pantallas muy grandes */
/*}*/

/* Texto del botón Ingresar (y que no cambie al hover/focus) */
.btn-primary,
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
    color: #000000; /* ← cambia aquí el color del texto */
}

    /* El ícono usa el mismo color del texto */
    .btn-primary i,
    .btn-primary .fa-solid,
    .btn-primary .bi {
        color: currentColor;
    }


/* Contenedor más ancho solo para esta pantalla */
.login-wrap {
    max-width: 95vw; /* ← ocupa el 95% del ancho de la ventana */
}

@media (min-width: 1400px) {
    .login-wrap {
        max-width: 92vw;
    }
    /* en pantallas grandes deja márgenes discretos */
}


/* Sube solo el logo en pantallas ≥992px (desktop) */
@media (min-width: 992px) {
    .logo-up {
        transform: translateY(-36px); /* AJUSTA: -24, -36, -48px... */
    }
}