@charset "UTF-8";

.card-title{
    color: #FF6600;
    font-family: "Raleway", sans-serif;
    font-optical-sizing: auto;
    font-size: 30px;
    font-style: normal;
    font-weight: bolder;

}

body {
    position: relative;
    background-image: url("../img/background-Login.jpg");
    overflow: hidden; /* Oculta el desborde de las figuras */
    background-size: cover;
    width: 100%;
    min-height: 100vh;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px;
    box-sizing: border-box;
}

.glass-container{
    width: 380px;
    padding: 40px;
    border-radius: 20px;
    backdrop-filter: blur(15px);
    background: rgba(128, 148, 156, 0.44);
    border: 1px solid rgb(255, 255, 255, 0.4);
    box-shadow:0 25px 45px rgb(0, 0, 0, 0.4);
    z-index: 10;
    overflow: hidden;
}

.titulo{
    font-family: "Quicksand", sans-serif;
    color: white;
    font-weight: bold;
    font-size: 30px;
}

input {
    opacity: 0.5; /* Valor entre 0 (totalmente transparente) y 1 (totalmente opaco) */
    border-radius: 50px;
    font-family: "Quicksand", sans-serif;
}

.remember-forgot{
    font-family: "Quicksand", sans-serif;
}

/* -----------------------------------------------------------------------------
   Aviso de acceso denegado
   -----------------------------------------------------------------------------
   Antes usaba .alert-danger (el rojo de Bootstrap). Se cambia al naranja #FF6600,
   que es el de la marca y el que ya traen los títulos del sistema.

   El relleno es naranja CLARO con el texto en naranja oscuro, no al revés: texto
   blanco sobre #FF6600 da 2.9:1 de contraste y no alcanza el 4.5:1 que pide la
   AA; así queda en 7:1 y además se lee sobre el cristal del formulario.
   -------------------------------------------------------------------------- */
.alert-sh {
    font-family: "Quicksand", sans-serif;
    background-color: #FFF3E8;
    border: 1px solid #FFC08F;
    border-left: 5px solid #FF6600;   /* la franja que identifica el aviso */
    color: #7A3200;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.25);
}

/* Quicksand y no Raleway: fonts/fonts.css sólo declara Itim, Quicksand, Noto Sans
   y Nunito, así que pedir Raleway (como hace .card-title) cae en la sans del
   sistema y el aviso se vería con otra tipografía que el resto del formulario. */
.alert-sh .alert-heading {
    color: #B34700;
    font-family: "Quicksand", sans-serif;
}

/* La regla de arriba pone 'input { opacity: .5 }' a TODO input de la página, y la
   X de cerrar es un <button>, así que no le pega; pero sí hereda el color del
   tema, por eso se tiñe para que no se vea negra sobre el naranja. */
.alert-sh .btn-close {
    filter: none;
    opacity: 0.6;
}

.alert-sh .btn-close:hover {
    opacity: 1;
}

.alert-sh hr {
    border-top-color: #FFC08F;
    opacity: 1;
}

/* Selector de oficina (Veracruz | México) */
.selector-oficina .btn {
    color: #fff;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, .6);
    font-weight: 600;
}
.selector-oficina .btn:hover {
    background: rgba(255, 255, 255, .15);
    color: #fff;
}
.selector-oficina .btn-check:checked + .btn {
    background: #000066;          /* mismo azul del botón Ingresar */
    border-color: #000066;
    color: #fff;
}
.selector-oficina .btn-check:focus-visible + .btn {
    box-shadow: 0 0 0 .25rem rgba(255, 102, 0, .5);   /* naranja de la casa */
}