/* Columna, no fila: la franja de aviso (.banner-conexion, la inserta
   assets/js/main.js como primer hijo de <body>) es un ítem flex más de esta
   página. Con el flex en fila y centrado que había antes, la franja quedaba
   AL LADO de la tarjeta de ingreso — angosta, a media altura y con el texto
   cortado (se veía al salir "Hay una nueva versión disponible"). En columna
   ocupa todo el ancho arriba y la tarjeta se sigue centrando en el espacio
   que queda gracias al margin:auto. */
.pagina-login {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: linear-gradient(135deg, var(--carbon) 0%, var(--carbon-medio) 100%);
}

/* Que la franja no se encoja si la tarjeta es más alta que la pantalla. */
.pagina-login > .banner-conexion {
    flex-shrink: 0;
}

.login-contenedor {
    background: var(--fondo-tarjeta);
    border-radius: 12px;
    padding: 48px 40px;
    width: 100%;
    max-width: 400px;
    margin: auto; /* centra vertical y horizontalmente dentro de la columna */
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
}

.login-logo {
    text-align: center;
    margin-bottom: 36px;
}

/* Logo original en círculo claro (assets/img/logo-galapago-claro.svg,
   2026-10-12): el mismo en el ingreso y en recuperar contraseña. */
.login-logo h1 img,
.login-marca h1 img {
    display: block;
    height: auto;
    max-width: 100%;
    margin: 0 auto;
}

.login-logo h1 {
    font-size: 22px;
    font-weight: 700;
    color: var(--color-texto);
    margin-bottom: 4px;
}

.login-logo p {
    font-size: 14px;
    color: var(--texto-secundario);
}

.login-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.campo {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.campo label {
    font-size: 14px;
    font-weight: 600;
    color: var(--carbon);
}

.campo input {
    padding: 12px 14px;
    border: 1.5px solid var(--color-borde);
    border-radius: var(--radio-borde);
    font-size: 15px;
    font-family: var(--fuente-base);
    color: var(--color-texto);
    transition: border-color 0.2s;
    outline: none;
}

.campo input:focus {
    border-color: var(--color-primario);
}

.campo input::placeholder {
    color: var(--tierra);
}

.btn-ingresar {
    margin-top: 8px;
    padding: 13px;
    background: var(--color-primario);
    color: white;
    border: none;
    border-radius: var(--radio-borde);
    font-size: 16px;
    font-weight: 600;
    font-family: var(--fuente-base);
    cursor: pointer;
    transition: background 0.2s;
}

.btn-ingresar:hover {
    background: var(--color-secundario);
}

.mensaje-error {
    background: var(--fondo-error);
    border: 1px solid rgba(192, 57, 43, 0.25);
    color: var(--color-error);
    padding: 10px 14px;
    border-radius: var(--radio-borde);
    font-size: 14px;
    text-align: center;
}

/* ============================================================
   Login a pantalla completa (Felipe eligió la "opción B" de la
   maqueta, 2026-10-07): sin tarjeta, formulario centrado sobre el
   fondo carbón con un brillo naranja arriba a la derecha, y el botón
   "Centro de conocimiento" en esa esquina. Solo login.php; Olvidé y
   Restablecer contraseña siguen con la tarjeta de arriba.
   El botón .btn-conocimiento vive en conocimiento.css.
   ============================================================ */
.login-pantalla {
    position: relative;
    min-height: 100dvh;
    background:
        radial-gradient(ellipse at 80% 0%, rgba(240, 76, 36, 0.28), transparent 55%),
        linear-gradient(160deg, var(--carbon) 0%, var(--carbon-medio) 100%);
    color: var(--crema);
}

.login-centro {
    width: 100%;
    max-width: 360px;
    margin: auto;
    padding: 88px var(--s4) var(--s10);
    display: flex;
    flex-direction: column;
    gap: var(--s6);
}

.login-marca { text-align: center; margin-bottom: var(--s2); }

.login-marca h1 {
    font-family: var(--fuente-titulo);
    font-size: var(--text-3xl);
    font-weight: 700;
    color: var(--crema);
    margin: var(--s4) 0 var(--s1);
}

.login-marca p { color: var(--tierra-claro); margin: 0; }

.login-pantalla .campo label { color: var(--crema); }

.login-pantalla .campo input {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(233, 216, 201, 0.25);
    color: var(--blanco);
    font-size: 16px; /* 16px: menos que eso y el iPhone hace zoom al escribir */
}

.login-pantalla .campo input::placeholder { color: var(--tierra-claro); }
.login-pantalla .campo input:focus { border-color: var(--naranja); }

/* El autocompletar de Chrome pinta el campo de amarillo claro con letra
   oscura: sobre el fondo carbón quedaba un parche blanco. */
.login-pantalla .campo input:-webkit-autofill {
    -webkit-text-fill-color: var(--blanco);
    -webkit-box-shadow: 0 0 0 40px var(--carbon-medio) inset;
    caret-color: var(--blanco);
}

.login-olvide {
    text-align: center;
    font-size: var(--text-sm);
    color: var(--tierra-claro);
}

.login-olvide:hover { color: var(--crema); }

@media (max-width: 768px) {
    .login-centro { padding-top: 96px; }
}