/* Las pantallas de antes de entrar: el ingreso y "olvide mi contraseña".
 *
 * Es el aspecto de la pantalla vieja (adm.css + signin.css de la app vieja), rehecho sobre
 * Bootstrap 5 y sin sus vicios: la columna ya no tiene anchos fijos por punto de corte, y el
 * candado no se acomoda con un "margin-top: 70%".
 *
 * Los grises de esta pantalla son propios de ella -el panel de adentro usa otros- y por eso se
 * declaran aca arriba, una vez, y no se suben al tema. El rojo si es el de la marca. */
.ingreso {
    --ingreso-franja: #e7e5e6;
    --ingreso-titulo: #646464;
    --ingreso-campo: #dedede;
    --ingreso-boton: #9d9d9d;
    --ingreso-boton-borde: #888;
    --ingreso-boton-hover: #666;
    --ingreso-boton-hover-borde: #444;
    --ingreso-pie: #eee;

    /* La misma columna de 1170 del panel, blanca sobre el gris de la app. */
    width: 1170px;
    max-width: 100%;
    min-height: 100vh;
    margin: 0 auto;
    background: #fff;
    display: flex;
    flex-direction: column;
}

.ingresoCabecera {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 30px;
}

/* La franja roja y, debajo, la banda gris con el nombre. */
.ingresoFranja {
    border-top: 52px solid var(--marca);
    background: var(--ingreso-franja);
    line-height: 52px;
    text-align: center;
    font-size: 28px;
    color: var(--texto);
}

.ingresoCuerpo { flex: 1; }

.ingresoCaja {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 24px;
    padding: 40px 15px 60px;
}

.ingresoForma {
    width: 100%;
    max-width: 330px;
    padding: 15px;
    text-align: center;
}

.ingresoTitulo {
    color: var(--ingreso-titulo);
    font-size: 30px;
    font-weight: 500;
    margin: 0 0 10px;
}

.ingresoError {
    color: var(--tema-peligro);
    font-size: 14px;
    margin-bottom: 10px;
}

.ingresoCampo,
.ingresoCampo:focus {
    background-color: var(--ingreso-campo);
    font-weight: bold;
    font-size: 16px;
    padding: 10px;
    margin-bottom: 10px;
    border-radius: 4px;
}

.ingresoCampo::placeholder { color: var(--ingreso-titulo); opacity: 1; }

.ingresoBoton,
.ingresoBoton:disabled {
    display: block;
    width: 100%;
    color: #fff;
    background-color: var(--ingreso-boton);
    border-color: var(--ingreso-boton-borde);
}

.ingresoBoton:hover,
.ingresoBoton:focus,
.ingresoBoton:active {
    color: #fff !important;
    background-color: var(--ingreso-boton-hover) !important;
    border-color: var(--ingreso-boton-hover-borde) !important;
}

.ingresoOlvide {
    display: inline-block;
    margin-top: 20px;
    color: var(--ingreso-boton);
    font-size: 14px;
    font-weight: bold;
    text-decoration: none;
}

.ingresoOlvide:hover,
.ingresoOlvide:focus {
    color: var(--ingreso-boton-hover);
    text-decoration: underline;
}

.ingresoCandado { max-width: 100%; height: auto; }

/* Los dos avisos de "recuperar" -enviando y listo- ocupan el lugar del formulario. */
.ingresoEstado {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    padding: 30px 0;
    color: var(--ingreso-titulo);
}

.ingresoTilde { font-size: 60px; line-height: 1; }

.ingresoPie {
    height: 85px;
    background: var(--ingreso-pie);
    text-align: center;
}

.ingresoPie img { margin-top: 20px; }

/* En el telefono: sin el logo del portal ni el candado, y el logo propio centrado. */
@media (max-width: 767px) {
    .ingresoCabecera { justify-content: center; padding: 15px; }
    .ingresoLogoMdp,
    .ingresoCandado { display: none; }
    .ingresoFranja { font-size: 22px; }
}