* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    border: none; /* Quitamos los bordes para poner el nuestro personalizado */
    outline: none; /* Quitamos los bordes que tiene el input cuando esta seleccionado */
}

:root {
    --blanco:#f4f6f9;
    --blanco-semana: #f0f0f0;
    --blanco-dias-hover: #e9f2ff;
    --verde-calido: #d0e7ff;
    --gris-claro: #D6D3D1;
    --gris-oscuro: #777777;
    --azul-flechas: #007bff; 
    --azul-flechas-hover: #0056b3;
    --azul-claro: #4285F4;
    --azul-oscuro: #1C2347;
    --marron-mesa: #d6a155;
    --marron-asiento: #8b693a;
    --naranja-oscuro: #F58427;
    --naranja-brillante: #ff7300;
    --rojo-claro-error: #f8d7da;
    --rojo-oscuro-error: #842029;
    --rojo-borde-error: #dc3545;
    --rojo-claro: #EA4335;
    --rojo-oscuro: #d41111;
    --libre: rgba(0, 128, 0, 0.6);
    --mia: rgba(0, 0, 255, 0.6);
    --ocupada: rgba(255, 0, 0, 0.6);
    --rojo-prodis: #E61D05;
    --rojo-sombra: #E61D0544;
    --morado-prodis: #9E4299;
    --morado-sombra: #9E429944;
    --azul-prodis: #1F5FA6;
    --azul-sombra: #1F5FA644;
    --amarillo-prodis: #F7B810;
    --amarillo-sombra: #F7B81044;
    --verde-prodis: #5FA41F;
    --verde-sombra: #5FA41F44;
    --fondo-login: #0c192c;
}

html, body {
    overflow-x: hidden;
}

body {
    display: flex;
    flex-direction: column;
    
    height: 100vh;
    
    background: var(--blanco);
}

.header {
    width: 100%;
    padding: 16px;

    display: flex;
    align-items: center;
    justify-content: space-between;
    
    border-bottom: 2px solid var(--gris-claro);
    box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.19); /* El segundo la sombra inferior 0 horizontal 6 hacia abajo 20 difuminado 0 hacia los lados y el color */

    & img { height: 4em; }

    & nav ul { list-style: none; display: flex; gap: 20px; }

    &  ul li:last-child a {
        background-color: var(--rojo-claro);
        color: var(--blanco);
        padding: 10px;
        border-radius: 20px;
        transition: 2s;
    }

    & ul li:last-child a:hover {
        background-color: var(--rojo-oscuro);
        color: var(--blanco);
        box-shadow: 0 0 4px var(--rojo-oscuro),
                    0 0 8px var(--rojo-oscuro),
                    0 0 16px var(--rojo-claro);
    }

    & a {
        color: var(--gris-oscuro);
        text-decoration: none;
        font-size: 1.2em;
    }

    & a:hover { color: var(--azul-claro); }

    & p {
        color: var(--gris-oscuro);
        text-decoration: none;
        font-size: 1.2em;
    }
}

.menu-toggle {
    display: none;
    font-size: 2rem;
    background: none;
    color: var(--azul-oscuro);
    cursor: pointer;
}

/* Estilos fondo formulario*/
#login {
    min-height: 100vh;
    background-color: var(--fondo-login);
}

.container {
    position: relative;

    width: 100%;
    height: 100vh;
    
    overflow: hidden;

    display: flex;
    justify-content: center;
    align-items: center;
}

.bubbles {
    position: absolute;

    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    
    z-index: 0;
    overflow: hidden;

    & span {
        position: absolute;

        top: 100%;
        left: calc((100% - 30px) * var(--x));
        width: 30px;
        height: 30px;
        
        border-radius: 50%;    
        
        animation: animate 15s linear infinite;
        animation-duration: calc(350s / var(--i));
    }

    & span:nth-child(5n+1) {
        background: var(--rojo-prodis);
        box-shadow: 0 0 0 10px var(--rojo-sombra),
        0 0 50px var(--rojo-prodis),
        0 0 100px var(--rojo-prodis);
    }

    & span:nth-child(5n+2) {
        background: var(--morado-prodis);
        box-shadow: 0 0 0 10px var(--morado-sombra),
        0 0 50px var(--morado-prodis),
        0 0 100px var(--morado-prodis);
    }

    & span:nth-child(5n+3) {
        background: var(--azul-prodis);
        box-shadow: 0 0 0 10px var(--azul-sombra),
        0 0 50px var(--azul-prodis),
        0 0 100px var(--azul-prodis);
    }

    & span:nth-child(5n+4) {
        background: var(--amarillo-prodis);
        box-shadow: 0 0 0 10px var(--amarillo-sombra),
        0 0 50px var(--amarillo-prodis),
        0 0 100px var(--amarillo-prodis);
    }

    & span:nth-child(5n+5) {
        background: var(--verde-prodis);
        box-shadow: 0 0 0 10px var(--verde-sombra),
        0 0 50px var(--verde-prodis),
        0 0 100px var(--verde-prodis);
    }
}

.forms-styles {
    position: relative;
    
    border: 2px solid var(--gris-claro);
    
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), /* la sombra superior 0 horizontal 4 hacia abajo 8 difuminado 0 hacia los lados y por ultimo el color */ 
                0 6px 20px 0 rgba(0, 0, 0, 0.19); /* la sombra inferior 0 horizontal 6 hacia abajo 20 difuminado 0 hacia los lados y el color */

    padding: 40px;
    border-radius: 10px;
    
    width: 100%;
    max-width: 500px;

    margin: auto;
    background: var(--blanco);
    z-index: 1;

    & h2 { text-align: center; margin-bottom: 20px; }
}

.form-section {
    position: relative;
    text-align: center;
    margin-bottom: 20px;

    & i {
        position: absolute;
        
        right: 10px;
        top: 50%;
        
        color: var(--azul-oscuro);

        transform: translateY(-50%);
        
        cursor: pointer;
    } 
}

.celdas {
    width: 100%;
    
    padding: 10px 40px 10px 10px;
    border-bottom: 2px solid var(--gris-claro);
    
    font-size: 16px;

    &:hover { border-bottom: 2px solid var(--azul-claro); }

    &:focus { border-bottom: 2px solid var(--azul-claro); }
}

.btn {
    text-align: center;

    & input { border-radius: 20px; }

    & input:hover {
        background-color: var(--azul-claro);
        border: none;

        color: whitesmoke;
    }
}

.error {
    background-color: var(--rojo-claro-error);
    color: var(--rojo-oscuro-error);

    border-left: 5px solid var(--rojo-borde-error);
    border-bottom: 5px solid var(--rojo-borde-error);
    
    text-align: center;
    
    padding: 10px;
    border-radius: 10px;
    margin-bottom: 20px;
}

.img-form {
    text-align: center;

    & img { width: 10rem; } 
}

/* Sala estilos */
.plano-container {
    position: relative;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    display: block;
    
    & img {
        width: 100%;
        height: auto;
        display: block;
    }
}

.plano {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    & a {
        font-size: 0.7vw;
    }
}

.mesa-indicador {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
    color: var(--blanco);
    text-shadow: 0 0 3px rgba(0, 0, 0, 0.7);
    cursor: pointer;
    pointer-events: auto;
    z-index: 10;
}

.mesa-libre { background-color: var(--libre); }

.mesa-mia { background-color: var(--mia); }

.mesa-ocupada { background-color: var(--ocupada); }

/* Estilos Calendario */
.calendar {
    width: 100%;
    max-width: 600px;
    
    margin: 40px auto;
    
    background-color: whitesmoke;
    
    border-radius: 20px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.header-calendar {
    display: flex;
    justify-content: space-between;
    align-items: center;

    margin-bottom: 20px;
    padding: 10px;

    & button {
        padding: 12px 25px;
        font-size: 1em;

        border: none;
        border-radius: 8px;

        background-color: var(--azul-flechas);
        color: var(--blanco);
        
        cursor: pointer;
        transition: 2s;
    }

    & button:hover { background-color: var(--azul-flechas-hover); }
}

.month-year {
    font-size: 2rem;
    font-weight: bold;
    text-transform: capitalize;
}

.weekdays, .days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    text-align: center;
}

.weekdays div {
    font-weight: bold;
    padding: 10px 0;
    background-color: var(--blanco-semana);
    font-size: 1.25rem;
}

.days div {
    padding: 20px 0;
    margin: 4px;
    border-radius: 10px;
    cursor: pointer;
    font-size: 1.2rem;
    transition: 0.2s;

    &:hover{
        background-color: var(--blanco-dias-hover);
        color: black;
    }

}

.current-week { background-color: var(--verde-calido); }

.today {
    background-color: var(--azul-flechas);
    color: whitesmoke;
}

.selected { outline: 3px solid var(--azul-flechas); }

/* Diseño responivo */
@media (max-width: 1188px) {
    .menu-toggle {
        display: block;
        position: absolute;
        right: 20px;
        top: 20px;
    }

    .header {
        position: relative;

        flex-direction: column;
        align-items: flex-start;

        & nav { width: 100%; }
        
        & nav ul {
            display: none;

            flex-direction: column;
            
            width: 100%;
            
            padding: 20px 0;
            margin-top: 10px;
            border-top: 1px solid var(--gris-claro);

            background-color: var(--blanco);
        }

        & ul.active { display: flex; }

        & nav ul li {
            text-align: center;
            padding: 10px 0;
        }
    }

    .calendar { max-width: 500px; }

    .days div { padding: 15px 0; }

    .header-calendar button { padding: 8px 15px; }
}

/* Para que en móvil no se vea mal */ 
@media (max-width: 500px) {
    .mesa-indicador{ font-size: 0.8vw; }
}

/* Animacion fondo login */
@keyframes animate {
    0% { transform: translateY(0) scale(0); }

    100% { transform: translateY(-120vh) scale(1); opacity: 0; }
}

/* =========================================================
   CONTEXTO Y SEPARACIÓN DE CALENDARIOS
   ========================================================= */

.calendar-context {
    display: flex;
    align-items: center;
    color: var(--gris-oscuro);
    font-size: 0.95rem;
}

.calendar-context form {
    display: flex;
    align-items: center;
    gap: 6px;
}

.calendar-context select {
    max-width: 210px;
    padding: 7px 9px;
    border: 1px solid var(--gris-claro);
    border-radius: 8px;
    background: white;
    color: var(--azul-oscuro);
    cursor: pointer;
}

.calendar-context-text {
    padding: 7px 10px;
    border: 1px solid var(--gris-claro);
    border-radius: 8px;
    background: white;
}

.calendar-title,
.section-title,
.plano-info {
    width: min(100% - 32px, 1200px);
    margin: 28px auto 0;
    text-align: center;
    color: var(--azul-oscuro);
}

.calendar-title p,
.section-title p,
.plano-info p {
    margin-top: 7px;
    color: var(--gris-oscuro);
}

.plano-info {
    margin-bottom: 18px;
}

.plano-leyenda {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 18px;
    margin: 18px auto 30px;
    color: var(--gris-oscuro);
}

.plano-leyenda span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.leyenda-color {
    width: 18px;
    height: 18px;
    display: inline-block;
    border-radius: 4px;
}

.leyenda-color.libre {
    background: var(--libre);
}

.leyenda-color.mia {
    background: var(--mia);
}

.leyenda-color.ocupada {
    background: var(--ocupada);
}

.form-section label {
    display: block;
    margin-bottom: 6px;
    color: var(--gris-oscuro);
    text-align: left;
}

.success {
    background-color: #d1e7dd;
    color: #0f5132;
    border-left: 5px solid #198754;
    border-bottom: 5px solid #198754;
    text-align: center;
    padding: 10px;
    border-radius: 10px;
    margin-bottom: 20px;
}

@media (max-width: 1188px) {
    .calendar-context,
    .calendar-context form {
        justify-content: center;
    }

    .calendar-context form {
        flex-direction: column;
    }

    .calendar-context select {
        max-width: 90%;
    }
}

@media (max-width: 600px) {
    .calendar-title,
    .section-title,
    .plano-info {
        width: min(100% - 20px, 1200px);
    }

    .plano-container {
        overflow-x: auto;
    }

    .plano a {
        font-size: clamp(
            7px,
            1.5vw,
            11px
        );

        overflow: hidden;
        text-align: center;
    }
}
/*
 * Puestos de los planos.
 */
.mesa-indicador {
    box-sizing: border-box;
    padding: 5px;
    overflow: hidden;
    text-align: center;
    line-height: 1.15;
    font-size: clamp(10px, 1.25vw, 16px);
    word-break: break-word;
}

/*
 * Hace ligeramente transparentes los colores para
 * seguir viendo las divisiones de la mesa.
 */
.mesa-libre,
.mesa-mia,
.mesa-ocupada {
    opacity: 0.82;
}

/*
 * Al pasar el ratón se ve mejor el puesto seleccionado.
 */
.mesa-indicador:hover {
    opacity: 0.95;
    outline: 2px solid rgba(255, 255, 255, 0.9);
    outline-offset: -2px;
}

/* =========================================================
   DISPONIBILIDAD VISUAL DEL CALENDARIO
   ========================================================= */

.days .calendar-day {
    min-height: 82px;
    padding: 8px 5px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 5px;
    transition:
        transform 0.15s ease,
        box-shadow 0.15s ease,
        background-color 0.15s ease;
}

.calendar-day-number {
    display: block;
    font-size: 1rem;
    font-weight: 700;
}

.availability-badge {
    display: block;
    width: 100%;
    padding: 3px 4px;
    border-radius: 10px;
    font-size: 0.68rem;
    line-height: 1.15;
    text-align: center;
    background: rgba(255, 255, 255, 0.85);
}

.days .calendar-day.current-week {
    cursor: pointer;
}

.days .calendar-day.current-week:hover {
    transform: translateY(-2px);
    box-shadow:
        0 4px 10px
        rgba(0, 0, 0, 0.15);
}

.days .availability-disponible {
    background-color: #b9e7c4;
}

.days .availability-pocos {
    background-color: #ffd98a;
}

.days .availability-completo {
    background-color: #f2a6a6;
    cursor: pointer;
}

.days .availability-completo:hover {
    transform: translateY(-2px);

    box-shadow:
        0 4px 10px
        rgba(0, 0, 0, 0.15);
}

.days .calendar-closed,
.days .calendar-past {
    background-color: #e6e6e6;
    color: #7b7b7b;
}

.calendar-availability-legend {
    grid-column: 1 / -1;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 14px;
    padding: 14px 8px 4px;
    font-size: 0.85rem;
}

.calendar-availability-legend span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.legend-dot {
    width: 14px;
    height: 14px;
    display: inline-block;
    border-radius: 50%;
}

.legend-dot.disponible {
    background: #75c987;
}

.legend-dot.pocos {
    background: #f2b84b;
}

.legend-dot.completo {
    background: #df6c6c;
}

.legend-dot.cerrado {
    background: #b4b4b4;
}

/* =========================================================
   BOTONES DE ADMINISTRACIÓN
   ========================================================= */

.nav-destacado {
    font-weight: 700;
}

.acciones-vista-admin,
.selector-vista-admin {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
    margin: 18px auto 24px;
}

.boton-todos-calendarios,
.boton-ver-calendario,
.selector-vista-admin a {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 7px;
    padding: 10px 15px;
    border-radius: 8px;
    background: var(--azul-oscuro);
    color: white;
    text-decoration: none;
}

.selector-vista-admin a {
    background: #6c757d;
}

.selector-vista-admin .selector-activo {
    background: var(--azul-oscuro);
}

.boton-restaurar {
    padding: 8px 11px;
    border: 0;
    border-radius: 6px;
    background: #198754;
    color: white;
    cursor: pointer;
}

/* =========================================================
   RESERVAS AGRUPADAS POR CALENDARIO
   ========================================================= */

.grupo-calendario-reservas {
    width: min(100% - 30px, 1300px);
    margin: 28px auto;
    padding: 22px;
    border: 1px solid #dddddd;
    border-radius: 12px;
    background: white;
    box-shadow:
        0 4px 14px
        rgba(0, 0, 0, 0.08);
}

.cabecera-grupo-calendario {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 15px;
    margin-bottom: 16px;
}

.cabecera-grupo-calendario h2 {
    margin: 0 0 5px;
}

.cabecera-grupo-calendario p {
    margin: 0;
}

@media (max-width: 700px) {
    .days .calendar-day {
        min-height: 66px;
        padding: 5px 2px;
    }

    .availability-badge {
        font-size: 0.58rem;
    }

    .cabecera-grupo-calendario {
        flex-direction: column;
        align-items: flex-start;
    }
}
/* =========================================================
   VISTA ADMINISTRATIVA DE LOS DOS PLANOS
   ========================================================= */

.selector-fecha-planos {
    width: min(100% - 30px, 900px);
    margin: 20px auto 28px;
    display: flex;
    justify-content: center;
}

.selector-fecha-planos form {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    padding: 14px 18px;
    background: white;
    border: 1px solid #dddddd;
    border-radius: 10px;
    box-shadow:
        0 3px 12px
        rgba(0, 0, 0, 0.08);
}

.selector-fecha-planos label {
    font-weight: 700;
}

.selector-fecha-planos input {
    padding: 9px 11px;
    border: 1px solid #bbbbbb;
    border-radius: 7px;
}

.selector-fecha-planos button {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 14px;
    border: 0;
    border-radius: 7px;
    background: var(--azul-oscuro);
    color: white;
    cursor: pointer;
}

.planos-conjuntos {
    width: min(100% - 30px, 1800px);
    margin: 0 auto 30px;
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));
    gap: 24px;
    align-items: start;
}

.tarjeta-plano-conjunto {
    min-width: 0;
    padding: 18px;
    background: white;
    border: 1px solid #dddddd;
    border-radius: 13px;
    box-shadow:
        0 5px 18px
        rgba(0, 0, 0, 0.1);
}

.cabecera-plano-conjunto {
    margin-bottom: 14px;
}

.cabecera-plano-conjunto h2 {
    margin: 0 0 6px;
    color: var(--azul-oscuro);
}

.cabecera-plano-conjunto p {
    margin: 0;
}

.plano-admin-container {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.plano-admin-container > img {
    display: block;
    width: 100%;
    height: auto;
}

.plano-admin-capa {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.puesto-admin {
    position: absolute;
    box-sizing: border-box;
    padding: 4px;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    text-align: center;
    font-size: clamp(
        7px,
        0.75vw,
        13px
    );
    font-weight: 700;
    line-height: 1.1;
    color: white;
    text-shadow:
        0 1px 3px
        rgba(0, 0, 0, 0.8);
    border: 1px solid
        rgba(255, 255, 255, 0.8);
}

.puesto-admin-libre {
    background:
        rgba(54, 159, 75, 0.75);
}

.puesto-admin-ocupado {
    background:
        rgba(211, 55, 55, 0.82);
}

.puesto-admin-fijo {
    background:
        rgba(220, 145, 30, 0.85);
}

.leyenda-planos-admin {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 18px;
    margin: 15px auto 35px;
}

.leyenda-planos-admin span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.color-plano {
    width: 17px;
    height: 17px;
    display: inline-block;
    border-radius: 4px;
}

.color-plano.libre {
    background: rgb(54, 159, 75);
}

.color-plano.ocupado {
    background: rgb(211, 55, 55);
}

.color-plano.fijo {
    background: rgb(220, 145, 30);
}

@media (max-width: 1100px) {
    .planos-conjuntos {
        grid-template-columns: 1fr;
        width: min(100% - 20px, 950px);
    }

    .puesto-admin {
        font-size: clamp(
            8px,
            1.4vw,
            14px
        );
    }
}

@media (max-width: 600px) {
    .tarjeta-plano-conjunto {
        padding: 10px;
    }

    .selector-fecha-planos form {
        flex-direction: column;
        width: 100%;
    }

    .selector-fecha-planos input,
    .selector-fecha-planos button {
        width: 100%;
    }
}
/* =========================================================
   HEADER PRINCIPAL
   ========================================================= */

.app-header,
.app-header * {
    box-sizing: border-box;
}

.app-header {
    position: relative;
    z-index: 1000;
    width: 100%;
    background: #ffffff;
    border-bottom: 1px solid #dfe3ea;
    box-shadow:
        0 3px 14px
        rgba(18, 29, 70, 0.08);
}

/*
 * Neutraliza reglas antiguas de header, ul, li o a.
 */
.app-header ul,
.app-header li {
    float: none !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    position: static !important;
}

.app-header a {
    float: none !important;
    width: auto;
    height: auto;
    margin: 0;
}

/* =========================================================
   FILA SUPERIOR
   ========================================================= */

.app-header-top {
    width: min(
        calc(100% - 32px),
        1720px
    );

    min-height: 72px;
    margin: 0 auto;
    padding: 10px 0;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.app-header-brand {
    flex: 0 1 auto;
    min-width: 0;
}

.app-header-brand-link {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: #172653;
    text-decoration: none;
}

.app-header-logo {
    display: block;
    width: auto;
    max-width: 145px;
    height: 43px;
    object-fit: contain;
}

.app-header-title {
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
}

.app-header-user-zone {
    flex: 1 1 auto;
    min-width: 0;

    display: flex;
    justify-content: flex-end;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px 18px;
}

/* =========================================================
   SELECTOR DE CALENDARIO
   ========================================================= */

.app-calendar-selector {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 !important;
}

.app-calendar-selector label {
    margin: 0;
    color: #5a6375;
    font-size: 0.9rem;
    font-weight: 600;
    white-space: nowrap;
}

.app-calendar-selector select {
    width: auto;
    min-width: 230px;
    max-width: 340px;
    height: 40px;
    margin: 0;
    padding: 0 36px 0 12px;

    border: 1px solid #cbd1dc;
    border-radius: 9px;

    background-color: #ffffff;
    color: #26324d;

    font-family: inherit;
    font-size: 0.92rem;
    cursor: pointer;
}

.app-calendar-selector select:focus {
    border-color: #465eae;
    outline: 3px solid
        rgba(70, 94, 174, 0.16);
}

.app-calendar-current {
    max-width: 340px;
    padding: 9px 12px;

    display: inline-flex;
    align-items: center;
    gap: 8px;

    border: 1px solid #d9dee8;
    border-radius: 9px;

    background: #f5f7fb;
    color: #33405d;

    font-size: 0.9rem;
    font-weight: 600;
}

.app-calendar-current span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* =========================================================
   USUARIO Y CIERRE DE SESIÓN
   ========================================================= */

.app-header-account {
    display: flex;
    align-items: center;
    gap: 10px;
}

.app-header-username {
    max-width: 190px;
    padding: 8px 10px;

    display: inline-flex;
    align-items: center;
    gap: 7px;

    color: #4d566a;
    font-size: 0.92rem;
    font-weight: 600;
}

.app-header-username span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.app-header-logout {
    min-height: 40px;
    padding: 9px 14px;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;

    border-radius: 9px;

    background: #ef4438;
    color: #ffffff !important;

    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 700;
    line-height: 1.1;

    transition:
        background-color 0.18s ease,
        transform 0.18s ease;
}

.app-header-logout:hover {
    background: #d9352b;
    transform: translateY(-1px);
}

/* =========================================================
   BOTÓN MENÚ MÓVIL
   ========================================================= */

.app-menu-toggle {
    display: none;
    min-height: 40px;
    padding: 9px 13px;

    align-items: center;
    justify-content: center;
    gap: 7px;

    border: 0;
    border-radius: 9px;

    background: #172653;
    color: #ffffff;

    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 700;
    cursor: pointer;
}

/* =========================================================
   NAVEGACIÓN
   ========================================================= */

.app-header-navigation {
    width: 100%;
    background: #f5f7fb;
    border-top: 1px solid #e6e9ef;
}

.app-header-menu {
    width: min(
        calc(100% - 32px),
        1720px
    );

    margin: 0 auto !important;
    padding: 8px 0 !important;

    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 6px;
    list-style: none;
}

.app-header-menu > li {
    display: block;
}

.app-header-menu > li > a {
    min-height: 42px;
    padding: 9px 12px;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;

    border-radius: 9px;

    color: #515b70;
    text-decoration: none;
    text-align: center;

    font-size: 0.92rem;
    font-weight: 600;
    line-height: 1.15;
    white-space: nowrap;

    transition:
        color 0.18s ease,
        background-color 0.18s ease,
        transform 0.18s ease;
}

.app-header-menu > li > a i {
    color: #6b7487;
    font-size: 0.95rem;
}

.app-header-menu > li > a:hover {
    background: #e7ebf6;
    color: #172653;
    transform: translateY(-1px);
}

.app-header-menu > li > a:hover i {
    color: #172653;
}

.app-header-menu > li > a.app-nav-active {
    background: #172653;
    color: #ffffff;
}

.app-header-menu > li > a.app-nav-active i {
    color: #ffffff;
}

/* =========================================================
   PANTALLAS MEDIAS
   ========================================================= */

@media (max-width: 1280px) {
    .app-header-top {
        align-items: flex-start;
    }

    .app-header-user-zone {
        gap: 10px;
    }

    .app-calendar-selector select {
        min-width: 210px;
        max-width: 280px;
    }

    .app-header-menu > li > a {
        padding: 8px 10px;
        font-size: 0.87rem;
    }
}

/* =========================================================
   TABLET Y MENÚ PLEGABLE
   ========================================================= */

@media (max-width: 980px) {
    .app-header-top {
        min-height: 64px;
        align-items: center;
    }

    .app-header-logo {
        max-width: 115px;
        height: 38px;
    }

    .app-header-title {
        display: none;
    }

    .app-menu-toggle {
        display: inline-flex;
    }

    .app-calendar-selector,
    .app-calendar-current {
        display: none;
    }

    .app-header-navigation {
        display: none;
    }

    .app-header-navigation.app-navigation-open {
        display: block;
    }

    .app-header-menu {
        padding: 10px !important;

        display: grid;
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    .app-header-menu > li > a {
        width: 100%;
        min-height: 46px;
        justify-content: flex-start;
        white-space: normal;
        text-align: left;
    }
}

/* =========================================================
   MÓVIL
   ========================================================= */

@media (max-width: 650px) {
    .app-header-top {
        width: calc(100% - 20px);
        gap: 8px;
    }

    .app-header-logo {
        max-width: 90px;
        height: 34px;
    }

    .app-header-user-zone {
        flex-wrap: nowrap;
        gap: 7px;
    }

    .app-header-account {
        gap: 6px;
    }

    .app-header-username {
        display: none;
    }

    .app-header-logout {
        width: 40px;
        min-width: 40px;
        height: 40px;
        padding: 0;
    }

    .app-header-logout span {
        display: none;
    }

    .app-menu-toggle {
        width: 42px;
        min-width: 42px;
        height: 40px;
        padding: 0;
    }

    .app-menu-toggle span {
        display: none;
    }

    .app-header-menu {
        width: calc(100% - 16px);
        grid-template-columns: 1fr;
    }

    .app-header-menu > li > a {
        min-height: 44px;
        padding: 10px 12px;
    }
}

/* =========================================================
   MÓVIL MUY PEQUEÑO
   ========================================================= */

@media (max-width: 400px) {
    .app-header-logo {
        max-width: 72px;
    }

    .app-header-logout,
    .app-menu-toggle {
        width: 38px;
        min-width: 38px;
        height: 38px;
    }
}
/*
 * Semana futura que todavía no ha sido desbloqueada.
 */
.days .calendar-not-yet-available {
    background-color: #e9ebef;
    color: #737986;
    cursor: not-allowed;
}

.days .calendar-not-yet-available:hover {
    transform: none;
    box-shadow: none;
}

.days .calendar-not-yet-available
.availability-badge {
    background-color: #f7f7f8;
    color: #656b76;
    font-size: 0.62rem;
}
/* =========================================================
   PANEL MI SEMANA
   ========================================================= */

.mi-semana-page,
.mi-semana-page * {
    box-sizing: border-box;
}

.mi-semana-page {
    width: min(
        calc(100% - 32px),
        1500px
    );

    margin: 30px auto 50px;
}

.mi-semana-bienvenida {
    padding: 28px 30px;

    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 25px;

    border-radius: 16px;
    background:
        linear-gradient(
            135deg,
            #172653,
            #354f9c
        );

    color: white;

    box-shadow:
        0 10px 28px
        rgba(23, 38, 83, 0.18);
}

.mi-semana-bienvenida h1 {
    margin: 4px 0 7px;
    font-size: clamp(
        1.8rem,
        3vw,
        2.6rem
    );
}

.mi-semana-bienvenida p {
    margin: 0;
}

.mi-semana-saludo {
    opacity: 0.85;
    font-size: 1.05rem;
}

.mi-semana-calendario-asignado {
    min-width: 280px;
    padding: 14px 18px;

    display: flex;
    align-items: center;
    gap: 13px;

    border: 1px solid
        rgba(255, 255, 255, 0.24);
    border-radius: 12px;

    background:
        rgba(255, 255, 255, 0.12);
}

.mi-semana-calendario-asignado i {
    font-size: 1.5rem;
}

.mi-semana-calendario-asignado span,
.mi-semana-calendario-asignado strong {
    display: block;
}

.mi-semana-calendario-asignado span {
    margin-bottom: 4px;
    opacity: 0.8;
    font-size: 0.82rem;
}

.mi-semana-resumen {
    margin-top: 24px;

    display: grid;
    grid-template-columns:
        minmax(0, 1fr) 210px;
    gap: 18px;
}

.proxima-reserva-card,
.sin-proxima-reserva-card,
.mi-semana-contador {
    background: white;
    border: 1px solid #dfe3ea;
    border-radius: 14px;

    box-shadow:
        0 5px 18px
        rgba(20, 32, 70, 0.08);
}

.proxima-reserva-card,
.sin-proxima-reserva-card {
    min-height: 145px;
    padding: 23px;

    display: flex;
    align-items: center;
    gap: 20px;
}

.proxima-reserva-icono,
.sin-proxima-reserva-card > div:first-child {
    width: 58px;
    min-width: 58px;
    height: 58px;

    display: flex;
    justify-content: center;
    align-items: center;

    border-radius: 50%;
    background: #e6ebfa;
    color: #263e88;
    font-size: 1.45rem;
}

.proxima-reserva-contenido,
.sin-proxima-reserva-card > div:nth-child(2) {
    flex: 1 1 auto;
    min-width: 0;
}

.proxima-reserva-etiqueta {
    color: #65708a;
    font-size: 0.84rem;
    font-weight: 700;
    text-transform: uppercase;
}

.proxima-reserva-card h2,
.sin-proxima-reserva-card h2 {
    margin: 5px 0 7px;
    color: #172653;
    font-size: 1.3rem;
}

.proxima-reserva-card p,
.sin-proxima-reserva-card p {
    margin: 0;
    color: #596174;
}

.boton-gestionar-reserva,
.boton-reservar-semana {
    padding: 10px 15px;

    display: inline-flex;
    justify-content: center;
    align-items: center;

    border-radius: 9px;

    background: #172653;
    color: white;

    text-decoration: none;
    font-weight: 700;
    white-space: nowrap;
}

.mi-semana-contador {
    padding: 22px;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    text-align: center;
}

.mi-semana-contador span {
    color: #687087;
    font-size: 0.9rem;
}

.mi-semana-contador strong {
    margin-top: 7px;
    color: #172653;
    font-size: 3rem;
    line-height: 1;
}

.mi-semana-dias {
    margin-top: 25px;

    display: grid;
    grid-template-columns:
        repeat(5, minmax(0, 1fr));
    gap: 14px;
}

.dia-semana-card {
    min-width: 0;
    min-height: 245px;

    display: flex;
    flex-direction: column;

    overflow: hidden;

    border: 1px solid #dfe3ea;
    border-radius: 14px;

    background: white;

    box-shadow:
        0 4px 15px
        rgba(20, 32, 70, 0.07);
}

.dia-semana-header {
    min-height: 78px;
    padding: 16px;

    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 8px;

    border-bottom: 1px solid #e8eaf0;
    background: #f5f7fb;
}

.dia-semana-header h2 {
    margin: 0 0 4px;
    color: #172653;
    font-size: 1.05rem;
}

.dia-semana-header p {
    margin: 0;
    color: #6b7282;
    font-size: 0.82rem;
}

.etiqueta-hoy {
    padding: 4px 8px;

    border-radius: 10px;
    background: #172653;
    color: white;

    font-size: 0.7rem;
    font-weight: 700;
}

.dia-semana-contenido {
    flex: 1 1 auto;
    padding: 17px;

    display: flex;
    flex-direction: column;
    gap: 13px;
}

.dia-reserva-puesto {
    display: flex;
    align-items: center;
    gap: 11px;
}

.dia-reserva-puesto i {
    width: 39px;
    height: 39px;

    display: flex;
    justify-content: center;
    align-items: center;

    border-radius: 9px;
    background: #dff1e3;
    color: #28713a;
}

.dia-reserva-puesto span,
.dia-reserva-puesto strong {
    display: block;
}

.dia-reserva-puesto span {
    color: #6c7484;
    font-size: 0.75rem;
}

.dia-reserva-puesto strong {
    margin-top: 2px;
    color: #172653;
    font-size: 1.1rem;
}

.estado-reserva-confirmada {
    display: inline-flex;
    align-items: center;
    gap: 6px;

    color: #28713a;
    font-size: 0.82rem;
    font-weight: 700;
}

.dia-sin-reserva {
    flex: 1 1 auto;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 9px;

    color: #7b8291;
    text-align: center;
}

.dia-sin-reserva i {
    font-size: 1.7rem;
}

.dia-sin-reserva.pasado {
    color: #9a9fa9;
}

.enlace-semana {
    margin-top: auto;
    padding: 9px 11px;

    display: flex;
    justify-content: center;
    align-items: center;

    border-radius: 8px;
    background: #172653;
    color: white;

    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 700;
}

.enlace-semana.secundario {
    background: #edf0f7;
    color: #172653;
}

.dia-semana-hoy {
    border: 2px solid #354f9c;
}

.dia-semana-reservado {
    border-color: #80bc8b;
}

.dia-semana-pasado {
    opacity: 0.68;
}

.mi-semana-acciones {
    margin-top: 25px;

    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
}

.accion-semana-principal,
.accion-semana-secundaria {
    min-height: 44px;
    padding: 11px 17px;

    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 8px;

    border-radius: 9px;

    text-decoration: none;
    font-weight: 700;
}

.accion-semana-principal {
    background: #172653;
    color: white;
}

.accion-semana-secundaria {
    border: 1px solid #ccd2df;
    background: white;
    color: #172653;
}

@media (max-width: 1150px) {
    .mi-semana-dias {
        grid-template-columns:
            repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 800px) {
    .mi-semana-bienvenida {
        flex-direction: column;
        align-items: flex-start;
    }

    .mi-semana-calendario-asignado {
        width: 100%;
        min-width: 0;
    }

    .mi-semana-resumen {
        grid-template-columns: 1fr;
    }

    .mi-semana-contador {
        min-height: 120px;
    }

    .mi-semana-dias {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .proxima-reserva-card,
    .sin-proxima-reserva-card {
        flex-wrap: wrap;
    }
}

@media (max-width: 520px) {
    .mi-semana-page {
        width: calc(100% - 18px);
        margin-top: 18px;
    }

    .mi-semana-bienvenida {
        padding: 22px 18px;
    }

    .mi-semana-dias {
        grid-template-columns: 1fr;
    }

    .proxima-reserva-card,
    .sin-proxima-reserva-card {
        align-items: flex-start;
    }

    .boton-gestionar-reserva,
    .boton-reservar-semana {
        width: 100%;
    }
}
/*
 * El número de puestos del día actual debe verse
 * permanentemente, sin pasar el ratón.
 */
.days .calendar-day.today .availability-badge,
.days .calendar-day.today:hover .availability-badge {
    color: #172653 !important;
    background-color: #ffffff !important;

    opacity: 1 !important;
    visibility: visible !important;

    -webkit-text-fill-color: #172653 !important;
}
.days .calendar-day.today.availability-disponible
.availability-badge,

.days .calendar-day.today.availability-pocos
.availability-badge,

.days .calendar-day.today.availability-completo
.availability-badge {
    color: #172653 !important;
    opacity: 1 !important;
    visibility: visible !important;
}
/* =========================================================
   CANCELACIÓN DESDE MI SEMANA
   ========================================================= */

.acciones-reserva-semana {
    margin-top: auto;

    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.acciones-reserva-semana .enlace-semana {
    margin-top: 0;
}

.boton-cancelar-semana {
    min-height: 38px;
    padding: 8px 10px;

    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 6px;

    border: 1px solid #d55761;
    border-radius: 8px;

    background-color: #ffffff;
    color: #a82935;

    font: inherit;
    font-size: 0.84rem;
    font-weight: 700;

    cursor: pointer;

    transition:
        background-color 0.2s ease,
        color 0.2s ease,
        transform 0.2s ease;
}

.boton-cancelar-semana:hover {
    background-color: #b93440;
    color: #ffffff;

    transform: translateY(-1px);
}

.mensaje-cancelacion-correcta {
    margin-bottom: 18px;
    padding: 14px 18px;

    display: flex;
    align-items: center;
    gap: 12px;

    border: 1px solid #75bd83;
    border-radius: 11px;

    background-color: #ecf8ef;
    color: #226c32;
}

.mensaje-cancelacion-correcta i {
    font-size: 1.35rem;
}

.mensaje-cancelacion-correcta strong,
.mensaje-cancelacion-correcta span {
    display: block;
}

.mensaje-cancelacion-correcta span {
    margin-top: 2px;
    font-size: 0.86rem;
}

.modal-cancelacion-abierto {
    overflow: hidden;
}

.modal-cancelar-reserva {
    position: fixed;
    inset: 0;
    z-index: 5000;

    padding: 18px;

    display: flex;
    justify-content: center;
    align-items: center;
}

.modal-cancelar-reserva[hidden] {
    display: none;
}

.modal-cancelar-fondo {
    position: absolute;
    inset: 0;

    background-color:
        rgba(12, 20, 45, 0.68);

    backdrop-filter: blur(3px);
}

.modal-cancelar-contenido {
    position: relative;
    z-index: 1;

    width: min(100%, 520px);
    padding: 30px;

    border-radius: 16px;

    background-color: #ffffff;
    color: #172653;

    text-align: center;

    box-shadow:
        0 22px 60px
        rgba(10, 19, 45, 0.3);
}

.modal-cancelar-cerrar {
    position: absolute;
    top: 13px;
    right: 13px;

    width: 36px;
    height: 36px;

    display: flex;
    justify-content: center;
    align-items: center;

    border: 0;
    border-radius: 50%;

    background-color: #f0f2f6;
    color: #596174;

    cursor: pointer;
}

.modal-cancelar-icono {
    width: 64px;
    height: 64px;
    margin: 0 auto 16px;

    display: flex;
    justify-content: center;
    align-items: center;

    border-radius: 50%;

    background-color: #fdebec;
    color: #b93440;

    font-size: 1.65rem;
}

.modal-cancelar-contenido h2 {
    margin: 0 0 8px;

    color: #172653;
    font-size: 1.55rem;
}

.modal-cancelar-contenido > p {
    margin: 0;

    color: #646d7e;
}

.modal-cancelar-datos {
    margin: 22px 0 16px;
    padding: 16px;

    display: grid;
    grid-template-columns:
        repeat(3, minmax(0, 1fr));
    gap: 12px;

    border-radius: 11px;
    background-color: #f5f7fb;

    text-align: left;
}

.modal-cancelar-datos span,
.modal-cancelar-datos strong {
    display: block;
}

.modal-cancelar-datos span {
    margin-bottom: 4px;

    color: #70788a;
    font-size: 0.75rem;
}

.modal-cancelar-datos strong {
    color: #172653;
    font-size: 0.9rem;
    overflow-wrap: anywhere;
}

.modal-cancelar-advertencia {
    padding: 10px 12px;

    border-left: 4px solid #dc9a30;

    background-color: #fff8e8;
    color: #71521e !important;

    text-align: left;
    font-size: 0.86rem;
    line-height: 1.45;
}

.modal-cancelar-acciones {
    margin-top: 22px;

    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.boton-volver-cancelacion,
.boton-confirmar-cancelacion {
    min-height: 44px;
    padding: 10px 14px;

    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 7px;

    border-radius: 9px;

    font: inherit;
    font-weight: 700;

    cursor: pointer;
}

.boton-volver-cancelacion {
    border: 1px solid #ccd2df;

    background-color: #ffffff;
    color: #172653;
}

.boton-confirmar-cancelacion {
    border: 1px solid #b93440;

    background-color: #b93440;
    color: #ffffff;
}

.boton-confirmar-cancelacion:hover {
    background-color: #972630;
}

.boton-confirmar-cancelacion:disabled {
    opacity: 0.7;
    cursor: wait;
}

@media (max-width: 600px) {
    .acciones-reserva-semana {
        grid-template-columns: 1fr;
    }

    .modal-cancelar-contenido {
        padding: 26px 18px 20px;
    }

    .modal-cancelar-datos {
        grid-template-columns: 1fr;
    }

    .modal-cancelar-acciones {
        grid-template-columns: 1fr;
    }
}
/* =========================================================
   DETALLE DE UNA RESERVA
   ========================================================= */

.detalle-reserva-page,
.detalle-reserva-page * {
    box-sizing: border-box;
}

.detalle-reserva-page {
    width: min(
        calc(100% - 32px),
        850px
    );

    margin: 35px auto 60px;
}

.detalle-reserva-volver {
    margin-bottom: 18px;

    display: inline-flex;
    align-items: center;
    gap: 8px;

    color: #172653;

    text-decoration: none;
    font-weight: 700;
}

.detalle-reserva-card {
    padding: 30px;

    border: 1px solid #dfe3ea;
    border-radius: 16px;

    background-color: #ffffff;

    box-shadow:
        0 10px 30px
        rgba(23, 38, 83, 0.12);
}

.detalle-reserva-cabecera {
    padding-bottom: 24px;

    display: flex;
    align-items: center;
    gap: 17px;

    border-bottom: 1px solid #e2e5eb;
}

.detalle-reserva-icono {
    width: 62px;
    min-width: 62px;
    height: 62px;

    display: flex;
    justify-content: center;
    align-items: center;

    border-radius: 50%;

    background-color: #e6ebfa;
    color: #263e88;

    font-size: 1.5rem;
}

.detalle-reserva-cabecera span {
    color: #28713a;

    font-size: 0.82rem;
    font-weight: 700;
    text-transform: uppercase;
}

.detalle-reserva-cabecera h1 {
    margin: 5px 0 0;

    color: #172653;
    font-size: 1.65rem;
}

.detalle-reserva-datos {
    margin-top: 25px;

    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));
    gap: 15px;
}

.detalle-reserva-dato {
    min-height: 110px;
    padding: 17px;

    display: grid;
    grid-template-columns: 36px 1fr;
    grid-template-rows: auto auto;
    column-gap: 11px;

    border: 1px solid #e0e3ea;
    border-radius: 11px;

    background-color: #f7f8fb;
}

.detalle-reserva-dato i {
    grid-row: 1 / 3;

    width: 36px;
    height: 36px;

    display: flex;
    justify-content: center;
    align-items: center;

    border-radius: 8px;

    background-color: #e4e9f7;
    color: #263e88;
}

.detalle-reserva-dato span {
    color: #70788a;
    font-size: 0.78rem;
}

.detalle-reserva-dato strong {
    margin-top: 3px;

    color: #172653;
    overflow-wrap: anywhere;
}

.detalle-reserva-acciones {
    margin-top: 27px;

    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 11px;
}

.detalle-reserva-todas,
.detalle-reserva-cancelar {
    min-height: 43px;
    padding: 10px 15px;

    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 7px;

    border-radius: 9px;

    text-decoration: none;
    font-weight: 700;
}

.detalle-reserva-todas {
    background-color: #172653;
    color: #ffffff;
}

.detalle-reserva-cancelar {
    border: 1px solid #d55761;

    background-color: #ffffff;
    color: #a82935;
}

@media (max-width: 600px) {
    .detalle-reserva-page {
        width: calc(100% - 18px);
        margin-top: 20px;
    }

    .detalle-reserva-card {
        padding: 22px 16px;
    }

    .detalle-reserva-datos {
        grid-template-columns: 1fr;
    }

    .detalle-reserva-cabecera {
        align-items: flex-start;
    }

    .detalle-reserva-acciones {
        flex-direction: column;
    }

    .detalle-reserva-todas,
    .detalle-reserva-cancelar {
        width: 100%;
    }
}
/* =========================================================
   GESTIÓN DE DÍAS CERRADOS
   ========================================================= */

.dias-cerrados-page,
.dias-cerrados-page * {
    box-sizing: border-box;
}

.dias-cerrados-page {
    width: min(
        calc(100% - 32px),
        1250px
    );

    margin: 30px auto 60px;
}

.dias-cerrados-cabecera {
    padding: 26px 30px;

    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;

    border-radius: 15px;

    background:
        linear-gradient(
            135deg,
            #172653,
            #354f9c
        );

    color: white;
}

.dias-cerrados-cabecera h1 {
    margin: 4px 0;
}

.dias-cerrados-cabecera p,
.dias-cerrados-cabecera span {
    margin: 0;
}

.dias-cerrados-cabecera > i {
    font-size: 2.4rem;
}

.dias-cerrados-mensaje {
    margin-top: 18px;
    padding: 13px 16px;

    display: flex;
    align-items: center;
    gap: 9px;

    border-radius: 9px;
}

.dias-cerrados-mensaje.correcto {
    border: 1px solid #79bd86;
    background: #edf8ef;
    color: #236f33;
}

.dias-cerrados-mensaje.error {
    border: 1px solid #dc8a91;
    background: #fff0f1;
    color: #9d2833;
}

.dias-cerrados-contenido {
    margin-top: 22px;

    display: grid;
    grid-template-columns: 370px 1fr;
    gap: 22px;

    align-items: start;
}

.dias-cerrados-formulario,
.dias-cerrados-listado {
    padding: 23px;

    border: 1px solid #dfe3ea;
    border-radius: 14px;

    background: white;

    box-shadow:
        0 6px 20px
        rgba(23, 38, 83, 0.08);
}

.dias-cerrados-formulario {
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.dias-cerrados-formulario h2,
.dias-cerrados-listado h2 {
    margin-top: 0;
    color: #172653;
}

.dias-cerrados-formulario label {
    margin-top: 7px;
    color: #3f485b;
    font-weight: 700;
}

.dias-cerrados-formulario select,
.dias-cerrados-formulario input,
.dias-cerrados-formulario textarea {
    width: 100%;
    padding: 10px;

    border: 1px solid #cbd1dc;
    border-radius: 8px;

    font: inherit;
}

.dias-cerrados-formulario textarea {
    resize: vertical;
}

.dias-cerrados-formulario button {
    min-height: 43px;
    margin-top: 12px;

    border: 0;
    border-radius: 8px;

    background: #172653;
    color: white;

    font-weight: 700;
    cursor: pointer;
}

.dias-cerrados-vacio {
    padding: 40px 20px;

    color: #747c8d;
    text-align: center;
}

.dias-cerrados-vacio i {
    font-size: 2rem;
}

.dia-cerrado-card {
    margin-top: 11px;
    padding: 14px;

    display: grid;
    grid-template-columns: 130px 1fr auto;
    align-items: center;
    gap: 14px;

    border: 1px solid #e0e3ea;
    border-radius: 10px;

    background: #f8f9fc;
}

.dia-cerrado-fecha {
    display: flex;
    align-items: center;
    gap: 8px;

    color: #a52e39;
}

.dia-cerrado-informacion p {
    margin: 4px 0 0;
    color: #626b7d;
}

.boton-reabrir-dia {
    min-height: 38px;
    padding: 8px 12px;

    border: 1px solid #477550;
    border-radius: 8px;

    background: white;
    color: #286236;

    font-weight: 700;
    cursor: pointer;
}

/*
 * Día cerrado por un administrador en el calendario.
 */
.days .calendar-day.calendar-closed-admin {
    background: #dddfe5 !important;
    color: #686e79 !important;
    cursor: not-allowed !important;
}

.days .calendar-day.calendar-closed-admin:hover {
    transform: none !important;
    box-shadow: none !important;
}

.days .calendar-day.calendar-closed-admin
.availability-badge {
    background: #f5f5f6 !important;
    color: #a52e39 !important;

    opacity: 1 !important;
    visibility: visible !important;
}

@media (max-width: 850px) {
    .dias-cerrados-contenido {
        grid-template-columns: 1fr;
    }

    .dia-cerrado-card {
        grid-template-columns: 1fr;
    }

    .boton-reabrir-dia {
        width: 100%;
    }
}
/* =========================================================
   RESERVA ADMINISTRATIVA
   ========================================================= */

.reserva-admin-page,
.reserva-admin-page * {
    box-sizing: border-box;
}

.reserva-admin-page {
    width: min(
        calc(100% - 32px),
        1150px
    );

    margin: 30px auto 60px;
}

.reserva-admin-cabecera {
    padding: 26px 30px;

    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;

    border-radius: 15px;

    background:
        linear-gradient(
            135deg,
            #172653,
            #354f9c
        );

    color: #ffffff;
}

.reserva-admin-cabecera span {
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    opacity: 0.82;
}

.reserva-admin-cabecera h1 {
    margin: 5px 0;
}

.reserva-admin-cabecera p {
    margin: 0;
}

.reserva-admin-cabecera > i {
    font-size: 2.5rem;
}

.reserva-admin-mensaje {
    margin-top: 18px;
    padding: 14px 17px;

    display: flex;
    align-items: center;
    gap: 10px;

    border-radius: 10px;
}

.reserva-admin-mensaje.correcto {
    border: 1px solid #79bd86;
    background-color: #edf8ef;
    color: #236f33;
}

.reserva-admin-mensaje.error {
    border: 1px solid #dc8a91;
    background-color: #fff0f1;
    color: #9d2833;
}

.reserva-admin-contenido {
    margin-top: 22px;

    display: grid;
    grid-template-columns:
        minmax(0, 1fr) 350px;
    gap: 22px;

    align-items: start;
}

.reserva-admin-formulario,
.reserva-admin-informacion {
    padding: 24px;

    border: 1px solid #dfe3ea;
    border-radius: 14px;

    background-color: #ffffff;

    box-shadow:
        0 6px 20px
        rgba(23, 38, 83, 0.08);
}

.reserva-admin-formulario {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.reserva-admin-campo {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.reserva-admin-campo label {
    color: #30394c;
    font-weight: 700;
}

.reserva-admin-campo select,
.reserva-admin-campo input {
    width: 100%;
    min-height: 43px;
    padding: 9px 11px;

    border: 1px solid #cbd1dc;
    border-radius: 8px;

    background-color: #ffffff;
    color: #172653;

    font: inherit;
}

.reserva-admin-campo select:disabled {
    background-color: #eef0f4;
    color: #737b89;
    cursor: not-allowed;
}

.reserva-admin-campo small {
    color: #6b7382;
}

.reserva-admin-calendario {
    min-height: 47px;
    padding: 11px 13px;

    display: flex;
    align-items: center;
    gap: 9px;

    border: 1px solid #d6dbe5;
    border-radius: 8px;

    background-color: #f5f7fb;
    color: #172653;

    font-weight: 700;
}

.reserva-admin-calendario i {
    color: #354f9c;
}

.reserva-admin-estado {
    padding: 12px 14px;

    border-radius: 8px;

    background-color: #f2f4f8;
    color: #626b7c;

    font-size: 0.9rem;
}

.reserva-admin-estado.cargando {
    background-color: #eef2fb;
    color: #354f9c;
}

.reserva-admin-estado.correcto {
    background-color: #edf8ef;
    color: #286b36;
}

.reserva-admin-estado.error {
    background-color: #fff0f1;
    color: #9d2833;
}

.boton-crear-reserva-admin {
    min-height: 46px;
    padding: 10px 16px;

    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 8px;

    border: 0;
    border-radius: 9px;

    background-color: #172653;
    color: #ffffff;

    font: inherit;
    font-weight: 700;

    cursor: pointer;
}

.boton-crear-reserva-admin:hover:not(:disabled) {
    background-color: #263e88;
}

.boton-crear-reserva-admin:disabled {
    background-color: #aeb4c0;
    cursor: not-allowed;
}

.reserva-admin-informacion h2 {
    margin-top: 0;
    color: #172653;
}

.reserva-admin-informacion ul {
    margin: 0;
    padding-left: 20px;

    color: #596174;
    line-height: 1.55;
}

.reserva-admin-informacion li {
    margin-bottom: 11px;
}

@media (max-width: 850px) {
    .reserva-admin-contenido {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 600px) {
    .reserva-admin-page {
        width: calc(100% - 18px);
        margin-top: 18px;
    }

    .reserva-admin-cabecera {
        padding: 22px 18px;
    }

    .reserva-admin-cabecera > i {
        display: none;
    }

    .reserva-admin-formulario,
    .reserva-admin-informacion {
        padding: 18px;
    }
}
/* =========================================================
   LOGIN CORPORATIVO
   ========================================================= */

#login,
#login * {
    box-sizing: border-box;
}

#login {
    min-height: 100vh;
    margin: 0;
    overflow: hidden;

    background:
        radial-gradient(
            circle at 18% 18%,
            rgba(31, 95, 166, 0.20),
            transparent 29%
        ),
        radial-gradient(
            circle at 82% 78%,
            rgba(53, 79, 156, 0.16),
            transparent 32%
        ),
        linear-gradient(
            145deg,
            #071326 0%,
            #0c192c 48%,
            #10213a 100%
        );

    color: #172653;

    font-family:
        Inter,
        ui-sans-serif,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;
}

/* Contenedor completo de la pantalla */
#login .login-shell {
    position: relative;
    isolation: isolate;

    width: 100%;
    min-height: 100vh;
    padding: 32px 20px;

    display: flex;
    align-items: center;
    justify-content: center;

    overflow: hidden;
}

/* Cuadrícula muy suave del fondo */
#login .login-shell::before {
    content: "";

    position: absolute;
    inset: 0;
    z-index: -2;

    pointer-events: none;

    background-image:
        linear-gradient(
            rgba(255, 255, 255, 0.025) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.025) 1px,
            transparent 1px
        );

    background-size: 48px 48px;

    mask-image:
        linear-gradient(
            to bottom,
            transparent,
            rgba(0, 0, 0, 0.7),
            transparent
        );
}

/* =========================================================
   PARTÍCULAS ASCENDENTES
   ========================================================= */

#login .login-particles {
    position: absolute;
    inset: 0;
    z-index: -1;

    overflow: hidden;
    pointer-events: none;
}

#login .login-particles span {
    position: absolute;

    /*
     * Nacen debajo del límite inferior.
     */
    top: calc(100% + 30px);

    left:
        calc(
            (100% - 20px)
            * var(--x)
        );

    width: 18px;
    height: 18px;

    border-radius: 999px;

    opacity: 0.72;
    filter: saturate(0.92);

    animation-name: animate;
    animation-timing-function: linear;
    animation-iteration-count: infinite;

    /*
     * Cada partícula tiene una velocidad diferente.
     */
    animation-duration:
        calc(
            360s
            / var(--i)
        );

    animation-delay:
        calc(
            -1s
            * var(--i)
        );
}

/* Rojo */
#login .login-particles span:nth-child(5n+1) {
    background:
        var(--rojo-prodis);

    box-shadow:
        0 0 0 6px
        rgba(230, 29, 5, 0.13),

        0 0 22px
        rgba(230, 29, 5, 0.62);
}

/* Morado */
#login .login-particles span:nth-child(5n+2) {
    background:
        var(--morado-prodis);

    box-shadow:
        0 0 0 6px
        rgba(158, 66, 153, 0.13),

        0 0 22px
        rgba(158, 66, 153, 0.62);
}

/* Azul */
#login .login-particles span:nth-child(5n+3) {
    background:
        var(--azul-prodis);

    box-shadow:
        0 0 0 6px
        rgba(31, 95, 166, 0.13),

        0 0 22px
        rgba(31, 95, 166, 0.62);
}

/* Amarillo */
#login .login-particles span:nth-child(5n+4) {
    background:
        var(--amarillo-prodis);

    box-shadow:
        0 0 0 6px
        rgba(247, 184, 16, 0.13),

        0 0 22px
        rgba(247, 184, 16, 0.62);
}

/* Verde */
#login .login-particles span:nth-child(5n+5) {
    background:
        var(--verde-prodis);

    box-shadow:
        0 0 0 6px
        rgba(95, 164, 31, 0.13),

        0 0 22px
        rgba(95, 164, 31, 0.62);
}

/* =========================================================
   TARJETA DEL LOGIN
   ========================================================= */

#login .login-card {
    position: relative;
    z-index: 5;

    width:
        min(
            100%,
            470px
        );

    overflow: hidden;

    border:
        1px solid
        rgba(255, 255, 255, 0.74);

    border-radius: 20px;

    background:
        linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.985),
            rgba(247, 249, 253, 0.985)
        );

    box-shadow:
        0 28px 70px
        rgba(0, 0, 0, 0.34),

        0 8px 24px
        rgba(0, 0, 0, 0.18),

        inset 0 1px 0
        rgba(255, 255, 255, 0.90);

    backdrop-filter:
        blur(12px);
}

/* Franja superior corporativa */
#login .login-brand-strip {
    width: 100%;
    height: 6px;

    display: grid;
    grid-template-columns:
        repeat(
            5,
            1fr
        );
}

#login .login-brand-strip span:nth-child(1) {
    background:
        var(--rojo-prodis);
}

#login .login-brand-strip span:nth-child(2) {
    background:
        var(--morado-prodis);
}

#login .login-brand-strip span:nth-child(3) {
    background:
        var(--azul-prodis);
}

#login .login-brand-strip span:nth-child(4) {
    background:
        var(--amarillo-prodis);
}

#login .login-brand-strip span:nth-child(5) {
    background:
        var(--verde-prodis);
}

#login .login-card-content {
    padding:
        34px
        38px
        28px;
}

/* =========================================================
   CABECERA
   ========================================================= */

#login .login-heading {
    text-align: center;
}

#login .login-logo {
    display: block;

    width: 170px;
    height: auto;

    margin:
        0
        auto
        16px;
}

#login .login-eyebrow {
    margin:
        0
        0
        7px;

    color: #354f9c;

    font-size: 0.76rem;
    font-weight: 800;

    letter-spacing: 0.16em;
    text-transform: uppercase;
}

#login .login-heading h1 {
    margin: 0;

    color: #172653;

    font-size:
        clamp(
            1.72rem,
            4vw,
            2.08rem
        );

    font-weight: 780;
    letter-spacing: -0.035em;
    line-height: 1.1;
}

#login .login-intro {
    max-width: 360px;

    margin:
        12px
        auto
        0;

    color: #687184;

    font-size: 0.96rem;
    line-height: 1.55;
}

/* =========================================================
   MENSAJES
   ========================================================= */

#login .login-alert {
    margin:
        22px
        0
        0;

    padding:
        12px
        14px;

    display: flex;
    align-items: flex-start;
    gap: 10px;

    border:
        1px solid
        transparent;

    border-radius: 10px;

    font-size: 0.91rem;
    line-height: 1.4;
}

#login .login-alert i {
    margin-top: 2px;
    flex: 0 0 auto;
}

#login .login-alert-error {
    border-color: #e6a1a8;
    background: #fff0f1;
    color: #922c36;
}

#login .login-alert-warning {
    border-color: #e1c67f;
    background: #fff8e5;
    color: #765a12;
}

#login .login-alert-success {
    border-color: #91c79c;
    background: #edf8ef;
    color: #286b36;
}

/* =========================================================
   FORMULARIO
   ========================================================= */

#login .login-form {
    margin-top: 24px;

    display: flex;
    flex-direction: column;
    gap: 18px;
}

#login .login-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

#login .login-field label {
    color: #30394c;

    font-size: 0.91rem;
    font-weight: 720;
}

#login .login-input-wrap {
    position: relative;
}

/* Icono izquierdo de cada campo */
#login .login-input-wrap > i {
    position: absolute;

    top: 50%;
    left: 15px;
    z-index: 2;

    color: #65708a;
    font-size: 0.96rem;

    transform:
        translateY(-50%);

    pointer-events: none;
}

/* Campos */
#login .login-input-wrap input {
    width: 100%;
    min-height: 50px;

    padding:
        11px
        48px
        11px
        43px;

    border:
        1px solid
        #cbd3e1;

    border-radius: 11px;
    outline: none;

    background: #ffffff;
    color: #172653;

    font: inherit;
    font-size: 0.98rem;

    box-shadow:
        inset 0 1px 2px
        rgba(23, 38, 83, 0.035);

    transition:
        border-color 160ms ease,
        box-shadow 160ms ease,
        background-color 160ms ease;
}

#login .login-input-wrap input::placeholder {
    color: #99a2b3;
}

#login .login-input-wrap input:hover:not(:disabled) {
    border-color: #95a6c1;
}

#login .login-input-wrap input:focus {
    border-color: #354f9c;

    box-shadow:
        0 0 0 4px
        rgba(53, 79, 156, 0.13),

        inset 0 1px 2px
        rgba(23, 38, 83, 0.035);
}

#login .login-input-wrap input:disabled {
    background: #edf0f5;
    color: #7c8492;

    cursor: not-allowed;
}

/* Botón para mostrar u ocultar contraseña */
#login .login-password-toggle {
    position: absolute;

    top: 50%;
    right: 7px;

    width: 38px;
    height: 38px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border: 0;
    border-radius: 8px;

    background: transparent;
    color: #50617f;

    cursor: pointer;

    transform:
        translateY(-50%);

    transition:
        background-color 150ms ease,
        color 150ms ease;
}

#login .login-password-toggle:hover:not(:disabled),
#login .login-password-toggle:focus-visible {
    background: #edf2fa;
    color: #263e88;
}

#login .login-password-toggle:disabled {
    color: #a2a9b4;
    cursor: not-allowed;
}

/* =========================================================
   BOTÓN PRINCIPAL
   ========================================================= */

#login .login-submit {
    width: 100%;
    min-height: 50px;

    padding:
        12px
        18px;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;

    border: 0;
    border-radius: 11px;

    background:
        linear-gradient(
            135deg,
            #172653,
            #354f9c
        );

    color: #ffffff;

    font: inherit;
    font-size: 0.98rem;
    font-weight: 760;

    box-shadow:
        0 10px 22px
        rgba(23, 38, 83, 0.22);

    cursor: pointer;

    transition:
        transform 150ms ease,
        box-shadow 150ms ease,
        filter 150ms ease;
}

#login .login-submit:hover:not(:disabled) {
    transform:
        translateY(-1px);

    filter:
        brightness(1.06);

    box-shadow:
        0 13px 26px
        rgba(23, 38, 83, 0.28);
}

#login .login-submit:active:not(:disabled) {
    transform:
        translateY(0);
}

#login .login-submit:focus-visible {
    outline:
        3px solid
        rgba(53, 79, 156, 0.28);

    outline-offset: 3px;
}

#login .login-submit:disabled {
    background: #a9b0bd;
    box-shadow: none;

    cursor: not-allowed;
}

/* =========================================================
   PIE DE LA TARJETA
   ========================================================= */

#login .login-footer {
    margin-top: 22px;
    padding-top: 18px;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    border-top:
        1px solid
        #e1e5ed;

    color: #737c8e;

    font-size: 0.82rem;
    text-align: center;
}

#login .login-footer i {
    color: #5d6f91;
}

/* =========================================================
   ADAPTACIÓN A MÓVIL
   ========================================================= */

@media (max-width: 560px) {

    #login .login-shell {
        padding:
            18px
            12px;

        align-items: center;
    }

    #login .login-card {
        border-radius: 16px;
    }

    #login .login-card-content {
        padding:
            28px
            20px
            22px;
    }

    #login .login-logo {
        width: 148px;
        margin-bottom: 13px;
    }

    #login .login-intro {
        font-size: 0.91rem;
    }

    #login .login-form {
        margin-top: 21px;
        gap: 16px;
    }

    #login .login-particles span {
        width: 14px;
        height: 14px;

        opacity: 0.58;
    }
}

/* Pantallas con poca altura */
@media
    (max-height: 720px)
    and
    (min-width: 561px) {

    #login .login-shell {
        padding-top: 18px;
        padding-bottom: 18px;
    }

    #login .login-card-content {
        padding-top: 24px;
        padding-bottom: 22px;
    }

    #login .login-logo {
        width: 145px;
        margin-bottom: 10px;
    }

    #login .login-intro {
        margin-top: 8px;
    }

    #login .login-form {
        margin-top: 18px;
        gap: 14px;
    }

    #login .login-footer {
        margin-top: 17px;
        padding-top: 14px;
    }
}

/*
 * Respeta la configuración de accesibilidad
 * del usuario cuando pide menos movimiento.
 */
@media (prefers-reduced-motion: reduce) {

    #login .login-particles span {
        animation-duration: 1ms;
        animation-iteration-count: 1;

        opacity: 0.18;
    }

    #login .login-submit,
    #login .login-input-wrap input,
    #login .login-password-toggle {
        transition: none;
    }
}
/* =========================================================
   ANIMACIONES PREMIUM DEL LOGIN
   ========================================================= */

/*
 * Luz ambiental situada detrás de la tarjeta.
 */
#login .login-shell::after {
    content: "";

    position: absolute;
    top: 50%;
    left: 50%;
    z-index: -1;

    width: min(70vw, 760px);
    height: min(70vw, 760px);

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(53, 79, 156, 0.24) 0%,
            rgba(31, 95, 166, 0.12) 36%,
            transparent 70%
        );

    filter: blur(42px);
    pointer-events: none;

    animation:
        loginAmbientGlow
        9s
        ease-in-out
        infinite alternate;
}

@keyframes loginAmbientGlow {
    0% {
        transform:
            translate(-53%, -48%)
            scale(0.92);

        opacity: 0.58;
    }

    50% {
        transform:
            translate(-47%, -52%)
            scale(1.06);

        opacity: 0.82;
    }

    100% {
        transform:
            translate(-51%, -46%)
            scale(0.98);

        opacity: 0.65;
    }
}

/* =========================================================
   ENTRADA DE LA TARJETA
   ========================================================= */

#login .login-card {
    transform-origin: center center;

    animation:
        loginCardEnter
        780ms
        cubic-bezier(
            0.22,
            1,
            0.36,
            1
        )
        both;
}

@keyframes loginCardEnter {
    0% {
        opacity: 0;

        transform:
            translateY(38px)
            scale(0.965);

        filter: blur(7px);
    }

    60% {
        opacity: 1;

        transform:
            translateY(-4px)
            scale(1.006);

        filter: blur(0);
    }

    100% {
        opacity: 1;

        transform:
            translateY(0)
            scale(1);

        filter: blur(0);
    }
}

/*
 * Reflejo muy suave que aparece
 * sobre la tarjeta al cargar.
 */
#login .login-card::after {
    content: "";

    position: absolute;
    top: -40%;
    left: -80%;
    z-index: 10;

    width: 45%;
    height: 190%;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255, 255, 255, 0.30),
            transparent
        );

    transform:
        rotate(18deg);

    pointer-events: none;

    animation:
        loginCardReflection
        1.5s
        ease-out
        650ms
        both;
}

@keyframes loginCardReflection {
    0% {
        left: -80%;
        opacity: 0;
    }

    25% {
        opacity: 0.75;
    }

    100% {
        left: 145%;
        opacity: 0;
    }
}

/* =========================================================
   FRANJA CORPORATIVA ANIMADA
   ========================================================= */

#login .login-brand-strip {
    position: relative;
    overflow: hidden;
}

#login .login-brand-strip span {
    transform-origin: center;

    animation:
        loginBrandStripPulse
        4.5s
        ease-in-out
        infinite;
}

#login .login-brand-strip span:nth-child(1) {
    animation-delay: 0s;
}

#login .login-brand-strip span:nth-child(2) {
    animation-delay: 0.16s;
}

#login .login-brand-strip span:nth-child(3) {
    animation-delay: 0.32s;
}

#login .login-brand-strip span:nth-child(4) {
    animation-delay: 0.48s;
}

#login .login-brand-strip span:nth-child(5) {
    animation-delay: 0.64s;
}

@keyframes loginBrandStripPulse {
    0%,
    70%,
    100% {
        filter: brightness(1);
        transform: scaleY(1);
    }

    35% {
        filter: brightness(1.26);
        transform: scaleY(1.35);
    }
}

/* =========================================================
   LOGOTIPO
   ========================================================= */

#login .login-logo {
    transform-origin: center;

    animation:
        loginLogoFloat
        5s
        ease-in-out
        1.2s
        infinite;
}

@keyframes loginLogoFloat {
    0%,
    100% {
        transform:
            translateY(0)
            scale(1);
    }

    50% {
        transform:
            translateY(-5px)
            scale(1.012);
    }
}

/* =========================================================
   APARICIÓN ESCALONADA DEL CONTENIDO
   ========================================================= */

#login .login-heading,
#login .login-alert,
#login .login-form .login-field,
#login .login-submit,
#login .login-footer {
    opacity: 0;

    animation-name:
        loginContentEnter;

    animation-duration:
        620ms;

    animation-timing-function:
        cubic-bezier(
            0.22,
            1,
            0.36,
            1
        );

    animation-fill-mode:
        forwards;
}

/* Cabecera */
#login .login-heading {
    animation-delay: 260ms;
}

/* Mensaje de error o bloqueo */
#login .login-alert {
    animation-delay: 390ms;
}

/* Campo del correo */
#login .login-form .login-field:nth-of-type(1) {
    animation-delay: 430ms;
}

/* Campo de contraseña */
#login .login-form .login-field:nth-of-type(2) {
    animation-delay: 520ms;
}

/* Botón */
#login .login-submit {
    animation-delay: 610ms;
}

/* Pie inferior */
#login .login-footer {
    animation-delay: 700ms;
}

@keyframes loginContentEnter {
    0% {
        opacity: 0;

        transform:
            translateY(18px);
    }

    100% {
        opacity: 1;

        transform:
            translateY(0);
    }
}

/* =========================================================
   CAMPOS DEL FORMULARIO
   ========================================================= */

/*
 * El icono cambia ligeramente cuando
 * el usuario entra en el campo.
 */
#login .login-input-wrap:focus-within > i {
    color: #354f9c;

    animation:
        loginInputIcon
        360ms
        ease-out;
}

@keyframes loginInputIcon {
    0% {
        transform:
            translateY(-50%)
            scale(1);
    }

    50% {
        transform:
            translateY(-50%)
            scale(1.18);
    }

    100% {
        transform:
            translateY(-50%)
            scale(1);
    }
}

/*
 * Brillo interior sutil al escribir.
 */
#login .login-input-wrap:focus-within {
    filter:
        drop-shadow(
            0 8px 15px
            rgba(53, 79, 156, 0.08)
        );
}

/* =========================================================
   BOTÓN DE INICIO DE SESIÓN
   ========================================================= */

#login .login-submit {
    position: relative;
    overflow: hidden;
}

/*
 * Brillo que atraviesa periódicamente el botón.
 */
#login .login-submit::before {
    content: "";

    position: absolute;
    top: -50%;
    left: -75%;

    width: 38%;
    height: 200%;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255, 255, 255, 0.34),
            transparent
        );

    transform:
        rotate(18deg);

    pointer-events: none;

    animation:
        loginButtonShine
        4.5s
        ease-in-out
        1.8s
        infinite;
}

@keyframes loginButtonShine {
    0%,
    65% {
        left: -75%;
        opacity: 0;
    }

    72% {
        opacity: 1;
    }

    88% {
        left: 135%;
        opacity: 0;
    }

    100% {
        left: 135%;
        opacity: 0;
    }
}

/*
 * Mantiene texto e icono por encima
 * del reflejo animado.
 */
#login .login-submit span,
#login .login-submit > i {
    position: relative;
    z-index: 2;
}

/*
 * La flecha avanza ligeramente
 * al colocar el ratón encima.
 */
#login .login-submit > i {
    transition:
        transform
        180ms
        ease;
}

#login .login-submit:hover:not(:disabled) > i {
    transform:
        translateX(5px);
}

#login .login-submit:active:not(:disabled) > i {
    transform:
        translateX(2px);
}

/* =========================================================
   ICONO DE SEGURIDAD
   ========================================================= */

#login .login-footer i {
    animation:
        loginShieldPulse
        3.5s
        ease-in-out
        1.5s
        infinite;
}

@keyframes loginShieldPulse {
    0%,
    100% {
        transform: scale(1);
        opacity: 0.72;
    }

    50% {
        transform: scale(1.12);
        opacity: 1;
    }
}

/* =========================================================
   MENSAJES DE ERROR
   ========================================================= */

/*
 * El error entra con un pequeño movimiento lateral,
 * sin resultar agresivo.
 */
#login .login-alert-error {
    animation:
        loginErrorEnter
        620ms
        cubic-bezier(
            0.22,
            1,
            0.36,
            1
        )
        390ms
        both;
}

@keyframes loginErrorEnter {
    0% {
        opacity: 0;

        transform:
            translateY(12px);
    }

    45% {
        opacity: 1;

        transform:
            translateX(-4px);
    }

    65% {
        transform:
            translateX(4px);
    }

    82% {
        transform:
            translateX(-2px);
    }

    100% {
        opacity: 1;

        transform:
            translateX(0);
    }
}

/* =========================================================
   PARTÍCULAS: VARIACIÓN DE TAMAÑO
   ========================================================= */

/*
 * Algunas partículas son algo más pequeñas
 * y otras algo más grandes para dar profundidad.
 */
#login .login-particles span:nth-child(3n+1) {
    transform-origin: center;
}

#login .login-particles span:nth-child(3n+2) {
    width: 12px;
    height: 12px;
}

#login .login-particles span:nth-child(3n+3) {
    width: 22px;
    height: 22px;
}

/*
 * Las partículas situadas visualmente más lejos
 * tienen menor intensidad.
 */
#login .login-particles span:nth-child(4n) {
    opacity: 0.42;
    filter: blur(0.5px);
}

/* =========================================================
   ACCESIBILIDAD: REDUCIR MOVIMIENTO
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    #login .login-shell::after,
    #login .login-card,
    #login .login-card::after,
    #login .login-brand-strip span,
    #login .login-logo,
    #login .login-heading,
    #login .login-alert,
    #login .login-form .login-field,
    #login .login-submit,
    #login .login-submit::before,
    #login .login-footer,
    #login .login-footer i {
        animation: none !important;
    }

    #login .login-heading,
    #login .login-alert,
    #login .login-form .login-field,
    #login .login-submit,
    #login .login-footer {
        opacity: 1;
        transform: none;
    }

    #login .login-card {
        opacity: 1;
        transform: none;
        filter: none;
    }
}
/* =========================================================
   MOSTRAR CONTRASEÑA EN REGISTRO
   ========================================================= */

.form-section-password {
    position: relative;
}

.form-section-password .celdas {
    padding-right: 52px;
}

.form-section-password .registro-password-toggle {
    position: absolute;

    top: 50%;
    right: 6px;

    width: 38px;
    height: 38px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border: 0;
    border-radius: 8px;

    background: transparent;
    color: var(--azul-oscuro);

    cursor: pointer;

    transform: translateY(-50%);

    transition:
        background-color 150ms ease,
        color 150ms ease;
}

.form-section-password
.registro-password-toggle:hover {
    background-color: #edf2fa;
    color: #263e88;
}

.form-section-password
.registro-password-toggle:focus-visible {
    outline: 3px solid
        rgba(53, 79, 156, 0.22);

    outline-offset: 1px;
}

/*
 * Anula el posicionamiento antiguo aplicado
 * directamente a los iconos del formulario.
 */
.form-section-password
.registro-password-toggle i {
    position: static;

    top: auto;
    right: auto;

    color: inherit;

    transform: none;
}
/* =========================================================
   VISITAS - ACCIONES DE DISPONIBILIDAD
   ========================================================= */

.parking-consulta-acciones {
    display: flex;
    align-items: stretch;
    gap: 10px;
    flex-wrap: wrap;
}


.parking-boton-dia-completo {
    min-width: 205px;
    height: 46px;
    padding: 0 18px;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;

    border: 1px solid #172653;
    border-radius: 11px;

    background: #ffffff;
    color: #172653;

    box-shadow:
        0 4px 11px
        rgba(23, 38, 83, 0.08);

    font: inherit;
    font-size: 0.94rem;
    font-weight: 700;

    cursor: pointer;
    white-space: nowrap;

    transition:
        background 0.16s ease,
        color 0.16s ease,
        box-shadow 0.16s ease,
        transform 0.16s ease;
}


.parking-boton-dia-completo:hover:not(:disabled) {
    background: #eef2fb;

    transform:
        translateY(-1px);

    box-shadow:
        0 6px 15px
        rgba(23, 38, 83, 0.15);
}


.parking-boton-dia-completo:disabled {
    opacity: 0.65;
    cursor: wait;
}


.parking-boton-dia-completo-icono {
    width: 28px;
    height: 28px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border-radius: 8px;

    background: #eef2fb;
}


@media (max-width: 850px) {

    .parking-consulta-acciones {
        width: 100%;
    }

    .parking-boton-consultar,
    .parking-boton-dia-completo {
        flex: 1 1 220px;
    }
}


@media (max-width: 540px) {

    .parking-consulta-acciones {
        flex-direction: column;
    }

    .parking-boton-consultar,
    .parking-boton-dia-completo {
        width: 100%;
        min-width: 0;
    }
}