/* /Components/Compartido/TarjetasDeModulos.razor.rz.scp.css */
/* Las tarjetas de módulo, con los colores del logo: negro y vino.

   El relieve se hace con luz, no con bordes. Cada tarjeta lleva un degradado que va de un vino
   claro arriba a uno oscuro abajo, un filo blanco translúcido en el borde superior —el brillo
   de una superficie iluminada desde arriba— y dos sombras: una cerrada y oscura pegada a la
   caja, y otra abierta y difusa que la separa del fondo. Al pasar por encima la tarjeta sube y
   la sombra crece; al pulsarla baja y la sombra se recoge, que es lo que hace que se sienta
   como un botón físico y no como un rectángulo que cambia de color. */

.rejilla-modulos[b-in31kf8zqx] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
    gap: 1rem;
}

.tarjeta-modulo[b-in31kf8zqx] {
    border-radius: 0.7rem;

    /* El degradado del logo, en la misma dirección que la barra lateral. */
    background-image: linear-gradient(160deg, #6d0001 0%, #4a0001 55%, #260001 100%);

    /* El filo de arriba es el brillo; el de abajo, el canto en sombra. */
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.22),
        inset 0 -1px 0 rgba(0, 0, 0, 0.5),
        0 1px 2px rgba(0, 0, 0, 0.3),
        0 6px 16px rgba(38, 0, 1, 0.35);

    transition: transform 0.12s ease-out, box-shadow 0.12s ease-out;
}

    .tarjeta-modulo:hover[b-in31kf8zqx] {
        transform: translateY(-3px);

        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.3),
            inset 0 -1px 0 rgba(0, 0, 0, 0.5),
            0 2px 4px rgba(0, 0, 0, 0.3),
            0 14px 26px rgba(38, 0, 1, 0.45);
    }

    /* Pulsada: se hunde y la sombra se recoge hasta casi desaparecer. */
    .tarjeta-modulo:active[b-in31kf8zqx] {
        transform: translateY(1px);

        box-shadow:
            inset 0 2px 5px rgba(0, 0, 0, 0.45),
            0 1px 2px rgba(0, 0, 0, 0.3);
    }

    /* Los módulos que aún no existen se ven, pero apagados: la estructura está repartida
       aunque la pantalla no esté escrita. Menos saturación y menos relieve, no menos
       contraste: el texto sigue leyéndose igual. */
    .tarjeta-modulo.reservado[b-in31kf8zqx] {
        background-image: linear-gradient(160deg, #3b3b3f 0%, #2a2a2d 55%, #171719 100%);

        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.14),
            inset 0 -1px 0 rgba(0, 0, 0, 0.45),
            0 1px 2px rgba(0, 0, 0, 0.25),
            0 4px 10px rgba(0, 0, 0, 0.25);
    }

.tarjeta-cara[b-in31kf8zqx] {
    display: block;
    padding: 1rem 1.1rem 0.9rem;
    text-decoration: none;
    color: #fff;
}

    /* El subrayado lo pondría el navegador sobre toda la tarjeta; el relieve ya dice que se
       puede pulsar. */
    .tarjeta-cara:hover[b-in31kf8zqx] {
        color: #fff;
        text-decoration: none;
    }

    /* Con teclado hace falta un aro visible: el relieve solo responde al puntero. */
    .tarjeta-cara:focus-visible[b-in31kf8zqx] {
        outline: 2px solid #fff;
        outline-offset: -4px;
        border-radius: 0.7rem;
    }

.tarjeta-nombre[b-in31kf8zqx] {
    display: block;
    font-size: 1.02rem;
    font-weight: 600;

    /* La sombra bajo el texto es lo que lo despega del degradado. */
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
}

.tarjeta-descripcion[b-in31kf8zqx] {
    display: block;
    margin-top: 0.35rem;
    font-size: 0.82rem;
    line-height: 1.35;

    /* Blanco al 78 %: sobre el vino oscuro pasa de sobra el contraste mínimo y deja que el
       nombre siga mandando. */
    color: rgba(255, 255, 255, 0.78);
}

.etiqueta-pronto[b-in31kf8zqx] {
    margin-left: 0.4rem;
    padding: 0.1rem 0.45rem;
    border-radius: 1rem;
    font-size: 0.68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    vertical-align: middle;
    color: #f2f2f2;
    background-color: rgba(255, 255, 255, 0.18);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

/* Las pantallas del módulo, en el zócalo de la tarjeta. */
.tarjeta-pantallas[b-in31kf8zqx] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem 0.9rem;
    padding: 0.5rem 1.1rem 0.7rem;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    background-color: rgba(0, 0, 0, 0.22);
    border-radius: 0 0 0.7rem 0.7rem;
    font-size: 0.79rem;
}

    .tarjeta-pantallas a[b-in31kf8zqx] {
        color: rgba(255, 255, 255, 0.85);
        text-decoration: none;
    }

    .tarjeta-pantallas a:hover[b-in31kf8zqx],
    .tarjeta-pantallas a:focus-visible[b-in31kf8zqx] {
        color: #fff;
        text-decoration: underline;
    }

/* Quien pida menos movimiento no lo tiene: el relieve se queda, la animación no. */
@media (prefers-reduced-motion: reduce) {
    .tarjeta-modulo[b-in31kf8zqx] {
        transition: none;
    }

    .tarjeta-modulo:hover[b-in31kf8zqx],
    .tarjeta-modulo:active[b-in31kf8zqx] {
        transform: none;
    }
}
/* /Components/Layout/MainLayout.razor.rz.scp.css */
.page[b-jue6d6tepv] {
    position: relative;
    display: flex;
    flex-direction: column;
}

main[b-jue6d6tepv] {
    flex: 1;
}

.sidebar[b-jue6d6tepv] {
    /* Negro y rojo vino del logo, en vez del degradado azul de la plantilla. */
    background-image: linear-gradient(180deg, #010102 0%, #3a0001 70%, #5c0001 100%);
}

.top-row[b-jue6d6tepv] {
    background-color: #f7f7f7;
    border-bottom: 1px solid #d6d5d5;
    justify-content: flex-end;
    height: 3.5rem;
    display: flex;
    align-items: center;
}

    .top-row[b-jue6d6tepv]  a, .top-row[b-jue6d6tepv]  .btn-link {
        white-space: nowrap;
        margin-left: 1.5rem;
        text-decoration: none;
    }

    .top-row[b-jue6d6tepv]  a:hover, .top-row[b-jue6d6tepv]  .btn-link:hover {
        text-decoration: underline;
    }

    .top-row[b-jue6d6tepv]  a:first-child {
        overflow: hidden;
        text-overflow: ellipsis;
    }

@media (max-width: 640.98px) {
    /* En móvil la barra lleva ahora cuatro cosas —el correo, «Mi cuenta», «Salir» y
       «Configuración»— sobre una altura fija y sin poder partirse, así que lo último se salía
       de la pantalla y «Salir» quedaba fuera de alcance. Se deja crecer en alto, se retira el
       rótulo de compañía y zona horaria —que en un teléfono no aporta y ocupa media barra— y
       el nombre de la persona se recorta en vez de empujar. */
    .top-row[b-jue6d6tepv] {
        justify-content: space-between;
        flex-wrap: wrap;
        height: auto;
        min-height: 3.5rem;
        row-gap: 0.25rem;
        padding-top: 0.35rem;
        padding-bottom: 0.35rem;
    }

    .top-row[b-jue6d6tepv]  a, .top-row[b-jue6d6tepv]  .btn-link {
        margin-left: 0;
    }

    .top-row > span:first-child[b-jue6d6tepv] {
        display: none;
    }

    .top-row[b-jue6d6tepv]  .barra-sesion > span {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}

@media (min-width: 641px) {
    .page[b-jue6d6tepv] {
        flex-direction: row;
    }

    .sidebar[b-jue6d6tepv] {
        width: 250px;
        height: 100vh;
        position: sticky;
        top: 0;
    }

    .top-row[b-jue6d6tepv] {
        position: sticky;
        top: 0;
        z-index: 1;
    }

    .top-row.auth[b-jue6d6tepv]  a:first-child {
        flex: 1;
        text-align: right;
        width: 0;
    }

    .top-row[b-jue6d6tepv], article[b-jue6d6tepv] {
        padding-left: 2rem !important;
        padding-right: 1.5rem !important;
    }
}

#blazor-error-ui[b-jue6d6tepv] {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss[b-jue6d6tepv] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }
/* /Components/Layout/NavMenu.razor.rz.scp.css */
.navbar-toggler[b-a0nmuslo3l] {
    appearance: none;
    cursor: pointer;
    width: 3.5rem;
    height: 2.5rem;
    color: white;
    position: absolute;
    top: 0.5rem;
    right: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") no-repeat center/1.75rem rgba(255, 255, 255, 0.1);
}

.navbar-toggler:checked[b-a0nmuslo3l] {
    background-color: rgba(255, 255, 255, 0.5);
}

.top-row[b-a0nmuslo3l] {
    min-height: 3.5rem;
    background-color: rgba(0,0,0,0.4);
}

.navbar-brand[b-a0nmuslo3l] {
    font-size: 1.1rem;
}

.bi[b-a0nmuslo3l] {
    display: inline-block;
    position: relative;
    width: 1.25rem;
    height: 1.25rem;
    margin-right: 0.75rem;
    top: -1px;
    background-size: cover;
}

.bi-house-door-fill-nav-menu[b-a0nmuslo3l] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-house-door-fill' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 14.5v-3.505c0-.245.25-.495.5-.495h2c.25 0 .5.25.5.5v3.5a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5Z'/%3E%3C/svg%3E");
}

.bi-plus-square-fill-nav-menu[b-a0nmuslo3l] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-plus-square-fill' viewBox='0 0 16 16'%3E%3Cpath d='M2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2zm6.5 4.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3a.5.5 0 0 1 1 0z'/%3E%3C/svg%3E");
}

.bi-list-nested-nav-menu[b-a0nmuslo3l] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-list-nested' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M4.5 11.5A.5.5 0 0 1 5 11h10a.5.5 0 0 1 0 1H5a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 3 7h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 1 3h10a.5.5 0 0 1 0 1H1a.5.5 0 0 1-.5-.5z'/%3E%3C/svg%3E");
}

.nav-item[b-a0nmuslo3l] {
    font-size: 0.9rem;
    padding-bottom: 0.5rem;
}

    .nav-item:first-of-type[b-a0nmuslo3l] {
        padding-top: 1rem;
    }

    .nav-item:last-of-type[b-a0nmuslo3l] {
        padding-bottom: 1rem;
    }

    .nav-item[b-a0nmuslo3l]  .nav-link {
        color: #d7d7d7;
        background: none;
        border: none;
        border-radius: 4px;
        height: 3rem;
        display: flex;
        align-items: center;
        line-height: 3rem;
        width: 100%;
    }

/* La página activa se marca con el rojo del logo y una guía blanca al borde. */
.nav-item[b-a0nmuslo3l]  a.active {
    background-color: #830001;
    border-left: 3px solid #fff;
    color: white;
}

.nav-item[b-a0nmuslo3l]  .nav-link:hover {
    background-color: rgba(255,255,255,0.12);
    color: white;
}

.nav-scrollable[b-a0nmuslo3l] {
    display: none;
}

.navbar-toggler:checked ~ .nav-scrollable[b-a0nmuslo3l] {
    display: block;
}

@media (min-width: 641px) {
    .navbar-toggler[b-a0nmuslo3l] {
        display: none;
    }

    .nav-scrollable[b-a0nmuslo3l] {
        /* Never collapse the sidebar for wide screens */
        display: block;

        /* Allow sidebar to scroll for tall menus */
        height: calc(100vh - 3.5rem);
        overflow-y: auto;
    }
}

/* El logo manda sobre el alto de la fila; se limita para que no la desborde. */
.marca-lateral[b-a0nmuslo3l] {
    max-height: 3rem;
    max-width: 13rem;
    object-fit: contain;
}

.top-row[b-a0nmuslo3l] {
    background-color: rgba(0,0,0,0.55);
}

/* --- La estructura por áreas ---
   El menú reproduce el organigrama, así que hay tres niveles: área, módulo y, solo del módulo
   en el que se está, sus pantallas. Con una veintena de módulos, el alto de 3rem del primer nivel
   dejaba el menú sin caber en la pantalla; dentro de un área se aprieta. */

.nav-area[b-a0nmuslo3l] {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.nav-area-titulo[b-a0nmuslo3l] {
    color: #a9a9a9;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 0.8rem 0;
    cursor: pointer;
    user-select: none;

    /* El triángulo propio de <summary> se sustituye por uno que gira con el estado. */
    list-style: none;
}

    .nav-area-titulo[b-a0nmuslo3l]::-webkit-details-marker {
        display: none;
    }

    .nav-area-titulo[b-a0nmuslo3l]::before {
        content: "›";
        display: inline-block;
        width: 1rem;
        font-size: 1rem;
        line-height: 0;
        transition: transform 0.12s ease-in-out;
    }

    .nav-area-titulo:hover[b-a0nmuslo3l] {
        color: #fff;
    }

.nav-area[open] > .nav-area-titulo[b-a0nmuslo3l]::before {
    transform: rotate(90deg);
}

.nav-area .nav-item[b-a0nmuslo3l] {
    padding-bottom: 0.1rem;
}

    .nav-area .nav-item:first-of-type[b-a0nmuslo3l] {
        padding-top: 0;
    }

    .nav-area .nav-item:last-of-type[b-a0nmuslo3l] {
        padding-bottom: 0.6rem;
    }

    .nav-area .nav-item[b-a0nmuslo3l]  .nav-link {
        height: 2.4rem;
        line-height: 2.4rem;
        padding-left: 1rem;
    }

/* Los módulos reservados se ven algo más apagados que los demás, pero no por debajo del
   contraste mínimo: el gris anterior (#8b8b8b) daba 4,23:1 sobre la parte baja del degradado
   de la barra, y quien comunica el estado es la etiqueta «pronto», no el color. */
.nav-area .nav-item[b-a0nmuslo3l]  a.nav-pendiente {
    color: #a9a9a9;
}

/* Con la sublista abierta, el módulo es el encabezado de sus pantallas: ni enlaza ni se
   marca, porque la página actual es una de las de abajo. */
.nav-area .nav-item .nav-modulo-abierto[b-a0nmuslo3l] {
    color: #d7d7d7;
    font-weight: 600;
    cursor: default;
}

    /* No es un enlace: no debe responder al puntero como si lo fuera. */
    .nav-area .nav-item .nav-modulo-abierto:hover[b-a0nmuslo3l] {
        background: none;
    }

/* Las pantallas de dentro de un módulo, un escalón más adentro y más pequeñas. */
.nav-pantallas[b-a0nmuslo3l] {
    border-left: 2px solid rgba(255, 255, 255, 0.12);
    margin-left: 1.75rem;
}

    .nav-pantallas .nav-item[b-a0nmuslo3l]  .nav-link {
        height: 2rem;
        line-height: 2rem;
        font-size: 0.82rem;
        padding-left: 0.75rem;
        color: #bdbdbd;
    }

/* El renglón seleccionado, en cualquiera de los tres niveles.
   Va al final y con la misma especificidad que las reglas de arriba porque, si no, el gris de
   .nav-pendiente y el de .nav-pantallas ganaban por orden y dejaban el texto apagado sobre el
   fondo rojo de la selección: menos contraste seleccionado que sin seleccionar. */
.nav-area .nav-item a.active[b-a0nmuslo3l],
.nav-area .nav-item a.nav-pendiente.active[b-a0nmuslo3l],
.nav-pantallas .nav-item a.nav-sub.active[b-a0nmuslo3l] {
    color: #fff;
}

/* Relieve en el menú lateral, a juego con las tarjetas del tablero.
   El renglón seleccionado se ve hundido —luz arriba, sombra dentro— y los demás suben un poco
   al pasar por encima. Los colores son los del logo, que ya son los del degradado de la barra. */

.nav-item[b-a0nmuslo3l]  a.active {
    background-image: linear-gradient(180deg, #9a0002 0%, #700001 100%);
    border-left: 3px solid #fff;

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.25),
        inset 0 -2px 4px rgba(0, 0, 0, 0.35),
        0 1px 2px rgba(0, 0, 0, 0.3);

    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

.nav-item[b-a0nmuslo3l]  a:not(.active):hover {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

/* El encabezado de área, como un relieve grabado en la barra. */
.nav-area-titulo[b-a0nmuslo3l] {
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.6);
}
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-85jtm84zrf],
.components-reconnect-repeated-attempt-visible[b-85jtm84zrf],
.components-reconnect-failed-visible[b-85jtm84zrf],
.components-pause-visible[b-85jtm84zrf],
.components-resume-failed-visible[b-85jtm84zrf],
.components-rejoining-animation[b-85jtm84zrf] {
    display: none;
}

#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible[b-85jtm84zrf],
#components-reconnect-modal.components-reconnect-show .components-rejoining-animation[b-85jtm84zrf],
#components-reconnect-modal.components-reconnect-paused .components-pause-visible[b-85jtm84zrf],
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible[b-85jtm84zrf],
#components-reconnect-modal.components-reconnect-retrying[b-85jtm84zrf],
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible[b-85jtm84zrf],
#components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation[b-85jtm84zrf],
#components-reconnect-modal.components-reconnect-failed[b-85jtm84zrf],
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible[b-85jtm84zrf] {
    display: block;
}


#components-reconnect-modal[b-85jtm84zrf] {
    background-color: white;
    width: 20rem;
    margin: 20vh auto;
    padding: 2rem;
    border: 0;
    border-radius: 0.5rem;
    box-shadow: 0 3px 6px 2px rgba(0, 0, 0, 0.3);
    opacity: 0;
    transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete;
    animation: components-reconnect-modal-fadeOutOpacity-b-85jtm84zrf 0.5s both;
    &[open]

{
    animation: components-reconnect-modal-slideUp-b-85jtm84zrf 1.5s cubic-bezier(.05, .89, .25, 1.02) 0.3s, components-reconnect-modal-fadeInOpacity-b-85jtm84zrf 0.5s ease-in-out 0.3s;
    animation-fill-mode: both;
}

}

#components-reconnect-modal[b-85jtm84zrf]::backdrop {
    background-color: rgba(0, 0, 0, 0.4);
    animation: components-reconnect-modal-fadeInOpacity-b-85jtm84zrf 0.5s ease-in-out;
    opacity: 1;
}

@keyframes components-reconnect-modal-slideUp-b-85jtm84zrf {
    0% {
        transform: translateY(30px) scale(0.95);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes components-reconnect-modal-fadeInOpacity-b-85jtm84zrf {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes components-reconnect-modal-fadeOutOpacity-b-85jtm84zrf {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.components-reconnect-container[b-85jtm84zrf] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

#components-reconnect-modal p[b-85jtm84zrf] {
    margin: 0;
    text-align: center;
}

#components-reconnect-modal button[b-85jtm84zrf] {
    border: 0;
    background-color: #6b9ed2;
    color: white;
    padding: 4px 24px;
    border-radius: 4px;
}

    #components-reconnect-modal button:hover[b-85jtm84zrf] {
        background-color: #3b6ea2;
    }

    #components-reconnect-modal button:active[b-85jtm84zrf] {
        background-color: #6b9ed2;
    }

.components-rejoining-animation[b-85jtm84zrf] {
    position: relative;
    width: 80px;
    height: 80px;
}

    .components-rejoining-animation div[b-85jtm84zrf] {
        position: absolute;
        border: 3px solid #0087ff;
        opacity: 1;
        border-radius: 50%;
        animation: components-rejoining-animation-b-85jtm84zrf 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
    }

        .components-rejoining-animation div:nth-child(2)[b-85jtm84zrf] {
            animation-delay: -0.5s;
        }

@keyframes components-rejoining-animation-b-85jtm84zrf {
    0% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    4.9% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    5% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 1;
    }

    100% {
        top: 0px;
        left: 0px;
        width: 80px;
        height: 80px;
        opacity: 0;
    }
}
/* /Components/Pages/AreaDetalle.razor.rz.scp.css */
/* El encabezado de cada área del tablero, con los colores del logo.

   Es una barra de vino con relieve, no un simple título: separa visualmente un área de la
   siguiente cuando hay seis seguidas, que es lo que pasa con una cuenta de administrador. */

.area-tablero[b-b95ra8i6vy] {
    margin-bottom: 1.75rem;
}

.area-titulo[b-b95ra8i6vy] {
    margin-bottom: 0.35rem;
    padding: 0.45rem 0.85rem;
    border-radius: 0.5rem;
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0.01em;

    background-image: linear-gradient(180deg, #3a0001 0%, #240001 100%);

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.18),
        0 2px 5px rgba(0, 0, 0, 0.25);
}

    .area-titulo a[b-b95ra8i6vy] {
        color: #fff;
        text-decoration: none;
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
    }

    .area-titulo a:hover[b-b95ra8i6vy],
    .area-titulo a:focus-visible[b-b95ra8i6vy] {
        color: #fff;
        text-decoration: underline;
    }

.area-descripcion[b-b95ra8i6vy] {
    margin: 0 0 0.6rem 0.15rem;
    font-size: 0.83rem;
    color: var(--bs-secondary-color, #6c757d);
}

/* La misma etiqueta de la tarjeta, para que el párrafo que la explica la enseñe igual. */
.etiqueta-pronto[b-b95ra8i6vy] {
    padding: 0.1rem 0.45rem;
    border-radius: 1rem;
    font-size: 0.68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #fff;
    background-color: #4a0001;
}
/* /Components/Pages/Home.razor.rz.scp.css */
/* El encabezado de cada área del tablero, con los colores del logo.

   Es una barra de vino con relieve, no un simple título: separa visualmente un área de la
   siguiente cuando hay seis seguidas, que es lo que pasa con una cuenta de administrador. */

.area-tablero[b-ok8f6gc9kh] {
    margin-bottom: 1.75rem;
}

.area-titulo[b-ok8f6gc9kh] {
    margin-bottom: 0.35rem;
    padding: 0.45rem 0.85rem;
    border-radius: 0.5rem;
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0.01em;

    background-image: linear-gradient(180deg, #3a0001 0%, #240001 100%);

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.18),
        0 2px 5px rgba(0, 0, 0, 0.25);
}

    .area-titulo a[b-ok8f6gc9kh] {
        color: #fff;
        text-decoration: none;
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
    }

    .area-titulo a:hover[b-ok8f6gc9kh],
    .area-titulo a:focus-visible[b-ok8f6gc9kh] {
        color: #fff;
        text-decoration: underline;
    }

.area-descripcion[b-ok8f6gc9kh] {
    margin: 0 0 0.6rem 0.15rem;
    font-size: 0.83rem;
    color: var(--bs-secondary-color, #6c757d);
}