/* ═══════════════════════════════════════════════════════════
   CASIA — pantallas públicas
   assets/css/auth.css

   Solo la carga templates/header_publico.php: login, recuperar,
   restablecer y logout. Depende de los tokens de main.css.

   Una columna, tarjeta centrada. En el teléfono ocupa el ancho con
   márgenes cómodos; en escritorio se para en 420 px, que es donde
   una línea de formulario deja de leerse bien.
   ═══════════════════════════════════════════════════════════ */

.pagina-publica {
    min-height: 100vh;
    min-height: 100dvh;
    background-color: var(--casia-lienzo);
    /* Dos manchas muy tenues: dan profundidad sin ruido y no
       dependen de ninguna imagen. */
    background-image:
        radial-gradient(60rem 32rem at 12% -12%, rgba(18, 92, 75, .10), transparent 62%),
        radial-gradient(48rem 30rem at 92% 108%, rgba(192, 98, 58, .09), transparent 60%);
    background-attachment: fixed;
}

.casia-auth {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 100vh;
    min-height: 100dvh;
    padding: 1.5rem 1.25rem;
}

@media (min-width: 576px) {
    .casia-auth {
        padding: 2.5rem 1.5rem;
    }
}

.casia-auth__caja {
    width: 100%;
    max-width: 26.25rem;   /* 420 px */
    margin-inline: auto;
}

.casia-auth__marca {
    text-align: center;
    margin-bottom: 1.5rem;
}

.casia-auth__lema {
    margin: .875rem 0 0;
    color: var(--casia-tinta-suave);
    font-size: .875rem;
}

.casia-auth__tarjeta {
    border-color: var(--casia-linea);
    border-radius: var(--bs-border-radius-xl);
    box-shadow: var(--casia-sombra-2);
}

.casia-auth__tarjeta > .card-body {
    padding: 1.5rem;
}

@media (min-width: 576px) {
    .casia-auth__tarjeta > .card-body {
        padding: 2rem;
    }
}

.casia-auth__titulo {
    margin-bottom: 1.5rem;
}

/* Si la página escribe una frase de entrada, el título se le pega.
   Donde :has() no exista queda el margen amplio: más aire, nada roto. */
.casia-auth__titulo:has(+ .casia-auth__entrada) {
    margin-bottom: .375rem;
}

.casia-auth__entrada {
    margin: 0 0 1.5rem;
    color: var(--casia-tinta-suave);
    font-size: .9375rem;
}

/* Casilla "recordar este dispositivo": el texto de apoyo va debajo
   de la etiqueta, no en un tooltip que en el teléfono no existe. */
/* .form-check trae padding-left: 1.5em; se sustituye por el hueco que
   necesita una casilla de 1.25em dentro de una caja con 14 px de aire.
   Dos clases para ganarle en especificidad a .form-check. */
.casia-auth__recordar.form-check {
    padding: .875rem .875rem .875rem 2.625rem;
    border: 1px solid var(--casia-linea);
    border-radius: var(--bs-border-radius);
    background-color: var(--casia-lienzo);
}

/* Casilla algo más grande: se marca con el pulgar, de pie y con prisa. */
.casia-auth__recordar .form-check-input {
    width: 1.25em;
    height: 1.25em;
    margin-top: .125rem;
    margin-left: -1.75em;
}

.casia-auth__recordar .form-check-label {
    font-weight: 500;
    cursor: pointer;
}

.casia-auth__nota {
    display: block;
    margin-top: .125rem;
    font-weight: 400;
    font-size: .8125rem;
    color: var(--casia-tinta-suave);
}

.casia-auth__enlaces {
    margin-top: 1.5rem;
    text-align: center;
    font-size: .9375rem;
}

/* Área táctil de 44 px sin que el enlace parezca un botón. */
.casia-auth__enlaces a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--casia-tactil-min);
    padding-inline: .5rem;
    font-weight: 500;
}

.casia-auth__pie {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 1.75rem 0 0;
    text-align: center;
    font-size: .8125rem;
    line-height: 1.4;
    color: var(--casia-tinta-suave);
}

.casia-auth__pie-marca,
.casia-auth__pie-credito {
    display: block;
    max-width: 100%;
}

.casia-auth__pie-credito {
    margin-top: .25rem;
}

/* Mismo tratamiento táctil que .casia-auth__enlaces a. El color
   lo hereda de --bs-link-color (pino), no el azul de agente. */
.casia-auth__pie-contacto {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--casia-tactil-min);
    margin-top: .125rem;
    padding-inline: .5rem;
    font-weight: 500;
    letter-spacing: .02em;
}

@media print {
    .pagina-publica {
        background: #fff;
    }
}