html, body {
        font-family: 'Cinzel Decorative ',sans-serif, Arial !important;
        scroll-behavior: smooth;
        overflow-x: hidden;

    }

#components-reconnect-modal {
    display: none !important;
}


    .image-rot-left, .image-rot, .image-brillo {
        transition: transform 0.3s ease;
    }

        .image-rot-left:hover {
            transform: scale(1.05) rotate(-1deg);
        }

        .image-rot:hover {
            transform: scale(1.05) rotate(1deg);
        }

        .image-brillo:hover {
            filter: brightness(1.2);
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
        }

    .carousel-item {
        transform: scale(0.95);
    }

        .carousel-item.active {
            transform: scale(1);
        }


    .carousel-indicators img {
        width: 20px;
        display: block;
        height: 10px;
        transition: all .5s cubic-bezier(.77,0,.175,1);
    }

    .carousel-indicators button {
        width: max-content !important;

    }

    .carousel-indicators{
        margin-bottom: -20px !important;
    }

    .carousel-indicators button.active img {
        width: 30px;
        height: 20px;
        border: 2px solid var(--mud-palette-primary);
    }


#scrollBtn {
    display: none;
    position: fixed;
    bottom: 150px;
    right: 20px;
    width: 42px;
    height: 42px;
    cursor: pointer;
    z-index: 99999 !important;
    opacity: 0.9;
    transition: ease-in-out .2s;

    /* Propiedades adicionales para el estilo del boton */
    background-color: var(--mud-palette-dark);
    color: var(--mud-palette-secondary);
    border: none;
    border-radius: 50%;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

    /* Degradado animado al hover */
    #scrollBtn:hover {
        background: linear-gradient(135deg, #77C79B, #204C66);
        background-size: 200% 200%;
        animation: gradientShift 2s ease infinite;
        transform: scale(1.05);
        opacity: 1;
        box-shadow: 0 6px 20px rgba(119, 199, 155, 0.3);
    }

    /* Contenedor para la flecha con mejor control */
    #scrollBtn i {
        display: inline-block;
        font-size: 18px;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        position: relative;
    }

    /* Animación artística de la flecha - movimiento de bucle */
    #scrollBtn:hover i {
        animation: artisticArrowLoop 1.5s cubic-bezier(0.68, -0.55, 0.265, 1.55) infinite;
    }

/* Keyframes para el movimiento artístico de bucle */
@keyframes artisticArrowLoop {
    0% {
        transform: translateY(0) scale(1);
        opacity: 1;
    }

    25% {
        transform: translateY(-12px) scale(1.1) rotate(5deg);
        opacity: 0.8;
    }

    50% {
        transform: translateY(-18px) scale(1.15) rotate(-3deg);
        opacity: 0.9;
    }

    75% {
        transform: translateY(-8px) scale(1.05) rotate(2deg);
        opacity: 0.95;
    }

    100% {
        transform: translateY(0) scale(1) rotate(0deg);
        opacity: 1;
    }
}

/* Animación del degradado de fondo */
@keyframes gradientShift {
    0% {
        background-position: 0% 50%;
        background: linear-gradient(135deg, #77C79B 0%, #204C66 100%);
    }

    25% {
        background-position: 50% 0%;
        background: linear-gradient(45deg, #77C79B 20%, #204C66 80%);
    }

    50% {
        background-position: 100% 50%;
        background: linear-gradient(225deg, #77C79B 40%, #204C66 60%);
    }

    75% {
        background-position: 50% 100%;
        background: linear-gradient(315deg, #77C79B 30%, #204C66 70%);
    }

    100% {
        background-position: 0% 50%;
        background: linear-gradient(135deg, #77C79B 0%, #204C66 100%);
    }
}

/* Efecto de pulso sutil en el botón */
#scrollBtn::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    border-radius: 50%;
    background: linear-gradient(135deg, #77C79B, #204C66);
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: -1;
}

#scrollBtn:hover::before {
    opacity: 0.3;
    animation: pulseGlow 2s ease infinite;
}

/* Animación de resplandor */
@keyframes pulseGlow {
    0%, 100% {
        transform: scale(1);
        opacity: 0.3;
    }

    50% {
        transform: scale(1.1);
        opacity: 0.1;
    }
}

/* Variante alternativa más dinámica (opcional) */
@keyframes artisticArrowBounce {
    0%, 100% {
        transform: translateY(0) scale(1) rotateZ(0deg);
        animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
    }

    20% {
        transform: translateY(-15px) scale(1.2) rotateZ(-10deg);
        animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
    }

    40% {
        transform: translateY(-25px) scale(1.1) rotateZ(5deg);
        animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
    }

    60% {
        transform: translateY(-12px) scale(1.15) rotateZ(-3deg);
        animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
    }

    80% {
        transform: translateY(-5px) scale(1.05) rotateZ(2deg);
        animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
    }
}



.nohover:hover {
    color: #00AB7C;
    transition: ease-in-out .2s;
}


    .table-responsive th, .table-responsive td {
        border: 0.3px solid ghostwhite;
    }

    .text-justify {
        text-align: justify;
    }

    .text-right {
        text-align: right !important;
    }

    .text-left {
        text-align: left !important;
    }

    a, .btn-link {
        color: #006bb7;
    }

    .btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
      box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
    }

    .content {
        padding-top: 1.1rem;
    }

    h1:focus {
        outline: none;
    }

    .valid.modified:not([type=checkbox]) {
        outline: 1px solid #26b050;
    }

    .invalid {
        outline: 1px solid #e50000;
    }

    .validation-message {
        color: #e50000;
    }

    .blazor-error-boundary {
        background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
        padding: 1rem 1rem 1rem 3.7rem;
        color: white;
    }

        .blazor-error-boundary::after {
            content: "An error has occurred."
        }

    .darker-border-checkbox.form-check-input {
        border-color: #929292;
    }



    /* Animación del panel de tarjetas */
    .panel-animate {
        animation: slideFadeIn 0.5s ease-out forwards;
        opacity: 0;
        transform: translateY(20px) scale(0.98);
        animation-fill-mode: forwards; /* 👈 evita que desaparezca */
    }

    @keyframes slideFadeIn {
        from {
            opacity: 0;
            transform: translateY(20px) scale(0.98);
        }

        to {
            opacity: 1;
            transform: translateY(0) scale(1);
        }
    }

    /* ===== Diálogo (aplica sobre el surface que genera MudDialog) =====
       Con CSS isolation hay que usar ::deep para alcanzar el elemento real. */
    ::deep .dlg-appear {
        opacity: 0;
        transform: translateY(16px) scale(0.985);
        animation: dlgIn 360ms cubic-bezier(.2,.8,.2,1) both;
        will-change: transform, opacity;
    }

    @keyframes dlgIn {
        from {
            opacity: 0;
            transform: translateY(16px) scale(0.985);
        }

        to {
            opacity: 1;
            transform: translateY(0) scale(1);
        }
    }
/* Reducir márgenes y espaciados en grids y elementos */
.mud-grid {
    margin: 0 !important; /* Elimina márgenes externos del grid */
}

.mud-grid-item {
    padding: 0; /* Elimina padding interno de los items */
    margin: 0; /* Elimina márgenes internos */
}

/* Ajustar animaciones para evitar espacios implícitos */
.img-appear, .text-appear {
    margin: 20px !important; /* Elimina márgenes adicionales */
    transform: translateY(0); /* Resetea transformaciones iniciales que puedan añadir espacio */
    animation: none; /* Desactiva animaciones si no son necesarias, o ajusta keyframes */
}

/* Reducir altura de los separadores */
hr {
    margin: 0.5rem 0 !important; /* Reduce el espacio de los hr */
}

/* Ajustar tablas para menor espaciado */
.table-responsive {
    margin-top: 0.5rem !important;
}

    /* ===== Título ===== */
    .title-appear {
        opacity: 0;
        transform: translateY(-8px);
        animation: titleIn 340ms ease-out 380ms both; /* empieza tras el diálogo */
        text-align: center;
        font-weight: 700;
    }

    @keyframes titleIn {
        to {
            opacity: 1;
            transform: none;
        }
    }

/* ===== Animación: NO fuerces el ancho aquí (antes tenía width:100%) */
.img-appear2 {
    opacity: 0;
    transform: scale(0.975);
    animation: imgIn 420ms ease-out 750ms both;
    margin: 0 auto;
}

@keyframes imgIn {
    to {
        opacity: 1;
        transform: none;
    }
}

    /* ===== Descripción ===== */
.text-appear2 {
    opacity: 0;
    transform: translateY(15px);
    animation: textIn 420ms ease-out 1000ms both;
    margin: 3px auto;
}

    @keyframes textIn {
        to {
            opacity: 1;
            transform: none;
        }
    }

/* Padding lateral solo en móvil */
@media (max-width: 768px) {
    .content-padding {
        padding-left: 1px !important;
        padding-right: 64px !important;
    }
}
/* 💻 En pantallas grandes se mantiene centrado y con margen */
@media (min-width: 769px) {
    .content-padding {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}


/* Animaciones para el home específicamente (el módulo de noticias) */
/* Hover efecto verde */
.noticia-card {
    height: 400px;
    border: .5px groove #E0E0E0;
    padding: 10px !important;
    background-color: #fff;
    display: flex;
    flex-direction: column;
    border-radius: 8px;
    transition: all 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}


    .noticia-card:hover {
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.12), 0 0 18px rgba(143, 217, 174, 0.5), inset 0 0 10px rgba(143, 217, 174, 0.15);
        border-color: #8FD9AE;
        background-color: rgba(143, 217, 174, 0.06);
    }

/* Animación al aparecer (scroll reveal) - MEJORADA */
.noticia-animate {
    opacity: 0;
    transform: translateY(70px);
    transition: opacity 0.9s ease-out, transform 0.9s ease-out;
}

    .noticia-animate.visible {
        opacity: 1;
        transform: translateY(0);
    }

/* Ajuste para la sección de noticias */
.noticias-section {
    position: relative;
    min-height: 100px; /* Asegurar que tenga altura */
}

/* Debug: Estilo para verificar elementos (REMOVER EN PRODUCCIÓN) */
.noticia-card[data-test="noticia-item"] {
    /* outline: 1px solid blue; Verifica si los elementos están en el DOM */
}
.noticia-img {
    width: 250% !important;
    height: 150px !important; /* altura fija para TODAS las imágenes */
    object-fit: cover !important; /* se muestra toda la imagen, sin recortar */
    background-color: #f5f5f5 !important; /* opcional: un fondo neutro para rellenar */
    border-radius: 6px;
}


/* Botón moderno */
div.btn-modern {
    position: relative;
    display: inline-block;
    padding: 0.75rem 1.5rem;
    font-weight: bold;
    border: none;
    outline: none;
    color: #1B4394; /* Texto oscuro sobre fondo claro  1B4394*/
    background: #DCE6DE; /* Color base */
    border-radius: 12px; /* Bordes curvos */
    cursor: pointer;
    overflow: hidden;
    transition: all 0.4s ease-in-out;
}

    /* Efecto al pasar el mouse */
    .btn-modern:hover {
        color: white; /* Texto blanco para contraste */
        background: linear-gradient(135deg, #4FDB6A, #1B4394); /* Degradado */
        transform: scale(1.05); /* Ligeramente más grande */
        box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2); /* Sombra elegante */
    }


/* Gradiente animado al hacer hover */
.custom-secondary {
    /* Cambio: Ajuste del gradiente para el Menu Secundario a #194385 a #FFFFFF desde la parte superior */
    background: linear-gradient(to bottom, #3B507A 0%, #FFFFFF 100%);
    color: white;
    background-size: 200% 200%;
    animation: gradientMove 2s ease infinite;
}

/* Animación suave del gradiente */
@keyframes gradientMove {
    0% {
        background-position: 0% 0%;
    }

    50% {
        background-position: 100% 0%;
    }

    100% {
        background-position: 0% 0%;
    }
}

.mud-popover {
    z-index: 2000 !important;
}

    .mud-popover.mud-popover-open {
        z-index: 9999 !important;
    }

/* Gradiente para AppBar */
.custom-appbar {
    background: white;
    top: 10px; /* altura del appbar */
    color: #333 !important;
    border-bottom: none !important;
    margin-bottom: 0 !important;
}

/* Animación suave del gradiente (mantenida solo para Menu Secundario) */
@keyframes gradientFlow {
    0% {
        background-position: 0% 0%;
    }

    50% {
        background-position: 100% 0%;
    }

    100% {
        background-position: 0% 0%;
    }
}

/* Botones estilo moderno (desktop + menú superior) */
.custom-appbar .mud-link,
.custom-appbar .mud-button-root,
.custom-appbar .mud-menu,
.custom-secondary .mud-link,
.custom-secondary .mud-button-root,
.custom-secondary .mud-menu {

    border-radius: 2px;
}

/* Eliminar bordes de las textboxes (MudTextField) */
.custom-appbar .mud-input,
.custom-secondary .mud-input,
.mud-input {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}
.mud-popover {
    pointer-events: auto !important;
    transition: opacity 0.2s ease-in-out;
}

/* Drawer en móviles */
.mud-drawer {
    /* Cambio: Ajuste del gradiente para consistencia con AppBar */
    background: white !important;
    color: #333 !important;
    padding-top: 20px;
    /* Cambio: Eliminación de backdrop-filter para consistencia con AppBar */
    /* backdrop-filter: blur(4px); */
}

    /* Estilo de los links dentro del Drawer */
    .mud-drawer .mud-link,
    .mud-drawer .mud-button-root {
        display: block;
        width: 100%;
        text-align: left;
        padding: 1px 1px; /*Esto es del margen de los botones en movil*/
        margin: 6px 0;
        border-radius: 6px;
        background: white !important;
        color: #333 !important;
        font-weight: 600;
        transition: all 0.3s ease-in-out;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
    }

        /* Hover animado en Drawer */
        .mud-drawer .mud-link:hover,
        .mud-drawer .mud-button-root:hover {
            transform: translateX(4px);
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
            background: ghostwhite; /* Cambio: Ajuste a los colores del AppBar */
        }

/* Eliminar bordes azules en inputs (textBox) y imágenes */
.mud-input,
.mud-image {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}

.mud-nav-link .mud-nav-link-text{
    color: #333 !important;
}

/* --- Forzar visibilidad/ocultamiento correcto en breakpoint LG (>= 992px) --- */
@media (min-width: 992px) {
    /* Forzamos que los elementos con d-lg-flex se muestren como flex (por si hay override) */
    .d-lg-flex, .d-none.d-lg-flex {
        display: flex !important;
        align-items: center;
    }

    /* Forzamos que los elementos con d-lg-none estén ocultos */
    .d-lg-none {
        display: none !important;
    }
}

/* Asegurar que el AppBar esté organizado en 3 zonas y no colapse */
.custom-appbar .appbar-inner {
    display: flex;
    align-items: center;
    width: 100%;
    gap: 0.5rem;
}

/* Zona central (menús) para mantenerlos siempre centrados y con overflow manejado */
.custom-appbar .appbar-center {
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 1 1 auto; /* ocupa espacio disponible pero puede contraerse */
    gap: 0.75rem;
    min-width: 0; /* importante para evitar overflow que empuje elementos */
}

/* Zona izquierda y derecha con ancho natural */
.custom-appbar .appbar-left,
.custom-appbar .appbar-right {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    gap: 0.5rem;
}

/* Si hay overflow (pantallas pequeñas), los menus pueden ocultarse con scroll horizontal si es necesario */
.custom-appbar .appbar-center {
    overflow: hidden;
}

/* ---------- LOGIN: icono circular (desktop) ---------- */
.login-circle {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--mud-palette-primary);
    color: ghostwhite;
    border: 1px solid rgba(255,255,255,0.12);
    box-shadow: 0 4px 10px rgba(0,0,0,0.12);
    cursor: pointer;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}

    /* efecto hover (desktop) */
    .login-circle:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 20px rgba(62,181,123,0.15);
        border: .7px groove #39c67D;
    }

/* mostrar solo en desktop >= 992px */
.d-login-desktop {
    display: none !important;
}

@media (min-width: 992px) {
    .d-login-desktop {
        display: inline-flex !important;
    }
}

/*Animacion para las tarjeta PDF de INFO RTE*/
/* Hover animación */
.hover-scale:hover {
    transform: scale(1.03);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
    border: .7px groove #39c67D;
}

.transition-all {
    transition: all 0.3s ease-in-out;
}

.cursor-pointer {
    cursor: pointer;
}

/* Ícono PDF cambio de color */
.pdf-icon {
    color: #e53935; /* Rojo inicial */
    transition: color 0.3s ease-in-out;
}

.pdf-card:hover .pdf-icon {
    color: #39C67D; /* Verde en hover */
}

/* Tarjetas del mismo tamaño */
.equal-card {
    min-height: 120px;
    display: flex;
    justify-content: center;
    align-items: center;
}


/* Quitar subrayado de los textos */
.no-underline {
    text-decoration: none !important;
}


/*------------------------------------------------*/
/* ----- Animación moderna para MudNavLink ----- */
.mud-nav-link {
    position: relative;
    display: inline-block !important;
    font-weight: 5;
    padding: 1px 1px;
    margin: 2px 2px;
    color: #333;
    border-radius: 6px; /* redondeado elegante */
    transition: color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
    text-align: center;
}
    /* subrayado animado */
    .mud-nav-link::after {
        content: "";
        position: absolute;
        left: 0;
        bottom: 4px;
        width: 0%;
        height: 2px;
        background: white;
        transition: width 0.3s ease;
        border-radius: 2px;
    }

    /* hover con animación + glow verde */
    .mud-nav-link:hover {
        color: darkgreen !important;
        transform: translateX(-2px);
    }

        .mud-nav-link:hover::after {
            width: 100%;
        }

    /* estado activo con glow permanente */
    .mud-nav-link.active {
        color: darkgreen !important;
        font-weight: 600;
        background: rgba(62, 181, 123, 0.6); /* toque extra de resalte */
    }

        .mud-nav-link.active::after {
            width: 100%;
        }



/* Asegurar que las imágenes no tengan bordes predeterminados */
/*.mud-image {
    border-radius: 0 !important;*/ /* Elimina bordes redondeados si los hay */
/*}*/

    /* Animación tablas */
    .table-animate {
        opacity: 0;
        transform: translateY(20px);
        transition: opacity 0.8s ease-out, transform 0.8s ease-out;
    }

        .table-animate.visible {
            opacity: 1;
            transform: translateY(0);
        }

            /* Filas animadas escalonadas */
            .table-animate.visible tr {
                opacity: 1;
                transform: translateY(0);
            }

        .table-animate tr {
            opacity: 0;
            transform: translateY(15px);
            transition: opacity 0.6s ease-out, transform 0.6s ease-out;
        }

        .table-animate.visible tr:nth-child(1) {
            transition-delay: 0.1s;
        }

        .table-animate.visible tr:nth-child(2) {
            transition-delay: 0.2s;
        }

        .table-animate.visible tr:nth-child(3) {
            transition-delay: 0.3s;
        }

        .table-animate.visible tr:nth-child(4) {
            transition-delay: 0.4s;
        }

        .table-animate.visible tr:nth-child(5) {
            transition-delay: 0.5s;
        }

        /* Hover moderno en filas */
        .table-animate tr:hover {
            background: linear-gradient(135deg, #f3f9f6, #e6f0f5);
            transform: scale(1.01);
            transition: all 0.3s ease-in-out;
        }

        .mud-snackbar {
            border-radius: 10px !important;
            font-weight: 500;
            font-size: 14px;
        }


    /* Encabezado con gradiente */
    .thtable {
        background: linear-gradient(135deg, #5C9173, #265C75);
        color: #fff !important;
        padding: 12px;
        text-align: center;
    }

    /* Evitar scroll horizontal en la tabla */
    .custom-table {
        width: 100%;
        overflow-x: hidden !important;
    }

        .custom-table thead,
        .custom-table tbody {
            width: 100%;
        }



.mobile-menu {
    background: rgba(255, 255, 255, 0.7); /* semi-transparente */
    backdrop-filter: blur(10px); /* efecto difuminado */
    -webkit-backdrop-filter: blur(10px); /* compatibilidad con Safari */
    border-right: 1px solid rgba(255, 255, 255, 0.3); /* borde suave */
}

/* Estilo base */
.custom-image-services {
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    border: 3px solid transparent;
    transition: all 0.3s ease-in-out; /* transición suave */
    cursor: pointer; /* indica que es seleccionable */
}

    /* Efecto al pasar el cursor */
    .custom-image-services:hover {
        border-color: #5C9173; /* borde verde */
        box-shadow: 0 8px 20px rgba(92, 145, 115, 0.6); /* resplandor verde */
        transform: scale(1.05); /* pequeño zoom */
    }

/* Card de equipos desarrollados */

.equipo-card {
    height: auto;
    border: 1px solid #B0B0B0;
    padding: 8px;
    background-color: #fff;
    flex-direction: column;
    justify-content: center !important;
    align-items: center !important;
    border-radius: 8px;
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out, border 0.3s ease-in-out, background-color 0.3s ease-in-out;
    cursor: pointer;
    box-sizing: border-box;
    overflow: hidden;
}


    .equipo-card:hover {
        transform: translateY(-6px) scale(1.02);
        border: 2px solid #54FFA8;
        box-shadow: 0 6px 18px rgba(84,255,168,0.4);
        background-color: rgba(84,255,168,0.08);
    }

/* animación al aparecer (scroll reveal) */
.equipo-animate {
    opacity: 0;
    transform: translateY(70px);
    transition: opacity 0.9s ease-out, transform 0.9s ease-out;
}

    .equipo-animate.visible {
        opacity: 1;
        transform: translateY(0);
    }

/* imagen dentro de la tarjeta */
.equipo-card .rounded {
    max-width: 100%;
    height: auto;
    object-fit: cover;
    border-radius: 6px;
}

/* pequeño ajuste responsive: tarjetas más altas en pantallas grandes */
@media (min-width: 1200px) {
    .equipo-card {
        height: 260px;
    }
}

/* CSS MEJORADO PARA EL CHAT */

/* ALERTA SUPERIOR */
.top-alert {
    position: fixed;
    top: 70px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(135deg, #FFB74D, #FF9800);
    color: white;
    padding: 12px 20px;
    border-radius: 25px;
    font-weight: 600;
    z-index: 2000;
    box-shadow: 0 4px 12px rgba(255, 152, 0, 0.3);
    animation: slideDown 0.3s ease-out;
    display: flex;
    align-items: center;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(-20px);
    }

    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

/* OVERLAY */
.chat-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1001;
    animation: fadeInOverlay 0.2s ease;
    backdrop-filter: blur(3px);
}

/* PANEL */
.chat-panel {
    width: 450px;
    max-width: 90vw;
    height: 600px;
    max-height: 85vh;
    background: white;
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
    animation: slideInUp 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* HEADER */
.chat-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    background: linear-gradient(135deg, var(--chat-primary), var(--chat-secondary));
    color: white;
}

.chat-header-content {
    display: flex;
    align-items: center;
}

.chat-header h3 {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 600;
}

/* MENSAJES */
.chat-messages {
    padding: 16px;
    flex-grow: 1;
    overflow-y: auto;
    background: #fafafa;
    scroll-behavior: smooth;
}

.message-container {
    margin-bottom: 16px;
    display: flex;
}

.user-container {
    justify-content: flex-end;
}

.bot-container {
    justify-content: flex-start;
}

.user-message, .bot-message {
    max-width: 75%;
    padding: 12px 16px;
    border-radius: 18px;
    position: relative;
}

.user-message {
    background: var(--chat-bg-user);
    color: #1976D2;
    border-bottom-right-radius: 4px;
}

.bot-message {
    background: var(--chat-bg-bot);
    color: #333;
    border-bottom-left-radius: 4px;
    border: 1px solid var(--chat-border);
}

.message-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4px;
}

    .message-header strong {
        font-size: 0.85rem;
        font-weight: 600;
    }

.timestamp {
    font-size: 0.75rem;
    color: #666;
}

.message-content {
    line-height: 1.4;
    word-wrap: break-word;
}

/* BANNER DE NO LEÍDOS */
.unread-banner {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 16px;
    margin: 8px 0 16px 0;
    background: linear-gradient(135deg, #FFE082, #FFC107);
    color: #E65100;
    font-weight: 600;
    border-radius: 25px;
    box-shadow: 0 2px 8px rgba(255, 193, 7, 0.3);
    animation: bounceIn 0.5s ease;
}

@keyframes bounceIn {
    0% {
        transform: scale(0.3);
        opacity: 0;
    }

    50% {
        transform: scale(1.05);
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

/* TYPING INDICATOR */
.bot-typing {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 0;
}

.dot {
    width: 8px;
    height: 8px;
    background: #999;
    border-radius: 50%;
    animation: typingDot 1.4s infinite;
}

    .dot:nth-child(2) {
        animation-delay: 0.2s;
    }

    .dot:nth-child(3) {
        animation-delay: 0.4s;
    }

.typing-text {
    color: #666;
    font-style: italic;
    font-size: 0.9rem;
}

@keyframes typingDot {
    0%, 80%, 100% {
        transform: scale(0.8);
        opacity: 0.5;
    }

    40% {
        transform: scale(1.2);
        opacity: 1;
    }
}

/* INPUT AREA */
.chat-input {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 16px;
    border-top: 1px solid var(--chat-border);
    background: white;
}

.emoji-container {
    position: relative;
}

.emoji-button {
    margin: 2px;
}

.input-container {
    flex-grow: 1;
}

.message-input {
    width: 100%;
}

    .message-input .mud-input-root {
        background: #f8f8f8;
        border-radius: 20px;
    }

        .message-input .mud-input-root:hover,
        .message-input .mud-input-root.mud-input-focused {
            background: white;
        }

.send-button {
    margin: 0;
}

/* --- Contenedor principal del picker --- */
.emoji-picker {
    position: absolute;
    bottom: 60px;
    left: 0;
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
    min-width: 320px; /* 👈 ya no fijo */
    max-width: 100%; /* 👈 ocupa todo el ancho disponible */
    max-height: 300px;
    display: flex;
    flex-direction: column;
    animation: fadeInUp 0.3s ease;
    z-index: 1000;
    overflow: hidden;
}

/* --- Barra de categorías --- */
.emoji-categories {
    display: flex;
    justify-content: space-around;
    padding: 8px;
    border-bottom: 1px solid #eee;
    background: #f9f9f9;
}

.emoji-category {
    font-size: 22px;
    min-width: 36px;
    min-height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
}


    .emoji-category:hover {
        background: rgba(0, 0, 0, 0.05);
        transform: scale(1.2);
    }

    .emoji-category.active {
        background: #0078ff;
        color: white;
        transform: scale(1.2);
    }


/* --- Grid de emojis --- */
.emoji-grid {
    grid-template-columns: repeat(auto-fill, minmax(32px, 1fr)); /* 👈 automático */
    gap: 8px;
    padding: 12px;
    overflow-y: auto; /* solo scroll vertical */
    overflow-x: hidden; /* 👈 no más scroll horizontal */
    flex: 1;
}


    /* Scroll moderno */
    .emoji-grid::-webkit-scrollbar {
        width: 6px;
    }

    .emoji-grid::-webkit-scrollbar-thumb {
        background: #bbb;
        border-radius: 10px;
    }

        .emoji-grid::-webkit-scrollbar-thumb:hover {
            background: #888;
        }

/* --- Botón de emoji --- */
.emoji-item {
    width: 32px;
    height: 32px;
    font-size: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    cursor: pointer;
    transition: transform 0.2s ease, background 0.2s ease;
    border-radius: 8px;
}

    .emoji-item:hover {
        transform: scale(1.3);
        background: rgba(0, 0, 0, 0.05);
    }

/* --- Animación --- */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.emoji-picker {
    width: 100%;
    max-width: 450px; /* ancho máximo */
    max-height: 300px;
    border-radius: 16px;
    overflow: hidden;
}

.emoji-categories {
    border-bottom: 1px solid #eee;
    padding: 6px;
    background: #f9f9f9;
}

.emoji-grid {
    max-height: 240px;
    overflow-y: auto;
    overflow-x: hidden;
}

.emoji-item {
    font-size: 22px;
    min-width: 36px;
    min-height: 36px;
    border-radius: 8px;
}
/* Animaciones modernas para botones del chat */
.emoji-button, .send-button {
    transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
    border-radius: 50% !important; /* más elegante */
    background: linear-gradient(135deg, var(--chat-primary), var(--chat-accent));
    color: white !important;
}

    .emoji-button:hover, .send-button:hover {
        transform: scale(1.2) rotate(-5deg);
        box-shadow: 0 6px 18px rgba(0, 0, 0, 0.2);
    }

    .emoji-button:active, .send-button:active {
        transform: scale(0.9) rotate(2deg);
        box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15);
    }




/*--------------------------------------------*/
    /* Estilos para el botón de convocatoria */
    .consultar-btn{
    font-weight: bold;
    padding: 10px 20px;
    transition: all 0.3s ease-in-out;
} .consultar-btn:hover {
        background-color: #39C67D !important;
        transform: scale(1.05);
        box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.2);
    }
    /* Estilos para el panel que se abre */
    .convocatoria-panel {
    border-left: 5px solid #39C67D;
    background-color: #f9f9f9;
    transition: all 0.3s ease-in-out;
}
    /*Estilo para carga*/
    .badge {
    background: red;
    color: white;
    border-radius: 50%;
    padding: 2px 6px;
    font-size: 12px;
    position: absolute;
    top: -5px;
    right: -5px;
}

:root {
    --chat-primary: #25D366;
    --chat-secondary: #1ebe5d; /* más verde, cero azul */
    --chat-accent: #20c35a; /* opcional, para hover o detalles */
    --chat-bg-user: #E8F8F1;
    --chat-bg-bot: #F5F5F5;
    --chat-border: #E0E0E0;
}

/* BOTÓN FLOTANTE */
.chat-button {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 1000;
    background: linear-gradient(135deg, var(--chat-primary), var(--chat-secondary));
    border: none;
    border-radius: 50%;
    width: 70px;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 10px 25px rgba(37, 211, 102, 0.35);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    color: white;
}

    .chat-button:hover {
        transform: translateY(-3px) scale(1.05);
        background: linear-gradient(135deg, var(--chat-primary), var(--chat-accent));
        box-shadow: 0 14px 35px rgba(37, 211, 102, 0.45);
    }

    .chat-button .badge {
        position: absolute;
        top: 5px;
        right: 5px;
        background: #ff4444;
        color: white;
        font-size: 11px;
        font-weight: 600;
        padding: 2px 6px;
        border-radius: 10px;
        min-width: 18px;
        text-align: center;
    }
    .top-alert {
    position: fixed;
    top: 60px; /* bajar un poco para que no choque con el appbar */
    left: 50%;
    transform: translateX(-50%);
    background: #ffcc00;
    padding: 10px 20px;
    border-radius: 8px;
    font-weight: bold;
    z-index: 2000; /* mayor al appbar */
} .bot-typing {
    display: flex;
    gap: 4px;
    padding: 8px;
} .dot {
    width: 8px;
    height: 8px;
    background-color: #666;
    border-radius: 50%;
    animation: blink 1.4s infinite both;
} .dot:nth-child(2) {
        animation-delay: 0.2s;
    } .dot:nth-child(3) {
        animation-delay: 0.4s;
    } @keyframes blink {
    0% {
        opacity: 0.2;
    }

    20% {
        opacity: 1;
    }

    100% {
        opacity: 0.2;
    }
} .timestamp {
    display: block;
    font-size: 0.75rem;
    color: gray;
    margin-top: 2px;
    text-align: right;
}
    /*Estilo para Nombre del Bot y Cliente*/
    .user-message strong, .bot-message strong {
    display: block;
    font-weight: bold;
    margin-bottom: 3px;
} .timestamp {
    display: block;
    font-size: 0.75rem;
    color: gray;
    margin-top: 2px;
    text-align: right;
}

    /*Css para el MenuSecundario*/
    .menu-secundario-gradient {
    height: auto; /* se adapta al contenido */
    padding: 2px 0; /* espacio arriba y abajo */
} .menu-secundario-gradient .mud-menu, .menu-secundario-gradient .mud-button, .menu-secundario-gradient .mud-menu-item, .menu-secundario-gradient a {
    }
    /* Botones modernos con gradiente difuminado (aplicado a los labels de MudMenu, que son buttons) */
    .menu-secundario-gradient .mud-button {
        background: linear-gradient(135deg, rgba(62, 181, 123, 0.8), rgba(67, 123, 156, 0.8)) !important;
        backdrop-filter: blur(10px);
        color: white !important;
        font-weight: 600;
        font-size: 0.85rem;
        border-radius: 8px;
        padding: 0.35em 0.8em; 
        transition: all 0.3s ease-in-out;
        box-shadow: 0 3px 6px rgba(0,0,0,0.15);
        border: 1px solid rgba(255, 255, 255, 0.1);
        text-decoration: none;
        overflow: hidden;
    }
    /* Efecto hover */
    .menu-secundario-gradient .mud-button:hover {
            background: linear-gradient(135deg, rgba(62, 181, 123, 0.9), rgba(67, 123, 156, 0.9)) !important; /* Intensifica opacidad */
            transform: translateY(-2px);
            box-shadow: 0 6px 12px rgba(62, 181, 123, 0.3); /* Resplandor con color del gradiente */
            filter: brightness(1.1);
            text-decoration: none; /* Asegura no tachado en hover */
            border-color: rgba(255, 255, 255, 0.2);
        }
    /* Estilo para el dropdown/popup del menú (mud-menu, que actúa como "textBox" expandida) */
    .menu-secundario-gradient .mud-menu {
        background: linear-gradient(135deg, rgba(62, 181, 123, 0.15), rgba(67, 123, 156, 0.15)) !important; /* Difuminado sutil con nuevos colores */
        backdrop-filter: blur(10px); /* Efecto moderno difuminado */
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 12px;
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
        color: white !important;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        overflow: hidden; /* Para que el gradiente se vea limpio */
        text-decoration: none; /* Elimina subrayados */
    }
    /* Items dentro del dropdown con fondo transparente para mostrar el gradiente del contenedor */
    .menu-secundario-gradient .mud-menu-item {
        background: transparent !important;
        color: white !important;
        border-radius: 8px;
        margin: 2px 4px; 
        transition: all 0.2s ease;
        text-decoration: none; /* Elimina tachado o subrayado */
        border: none; /* Sin bordes no deseados */
    } .menu-secundario-gradient .mud-menu-item:hover {
            background: rgba(255, 255, 255, 0.1) !important; /* Resalte sutil en hover */
            transform: translateX(4px); /* Animación moderna: deslizamiento lateral */
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
            text-decoration: none; /* Sin tachado en hover */
        }
    /* Si hay inputs reales (MudTextField) en el futuro, estos estilos aplican igual */
    .menu-secundario-gradient .mud-input-root {
        border-radius: 12px;
        /* Fondo difuminado/gradiente igual al menú (verde-azul sutil para interior) */
        background: linear-gradient(135deg, rgba(62, 181, 123, 0.15), rgba(67, 123, 156, 0.15));
        color: white;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); /* Transición suave y moderna */
        border: 1px solid rgba(255, 255, 255, 0.1); /* Borde sutil para definición */
        backdrop-filter: blur(10px); /* Efecto difuminado moderno */
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); /* Sombra ligera */
        text-decoration: none;
    }
    /* Texto dentro del input (placeholder y valor) */
    .menu-secundario-gradient .mud-input-root input, .menu-secundario-gradient .mud-input-root .mud-input-slot {
            color: white !important;
            background: transparent; /* Asegura que el interior mantenga el gradiente del root */
            text-decoration: none;
        }
    /* Placeholder con opacidad para mejor legibilidad */
    .menu-secundario-gradient .mud-input-root input::placeholder {
                color: rgba(255, 255, 255, 0.7) !important;
            }
    /* Efecto hover moderno: resalte con elevación, brillo y escala sutil */
    .menu-secundario-gradient .mud-input-root:hover {
            background: linear-gradient(135deg, rgba(62, 181, 123, 0.25), rgba(67, 123, 156, 0.25)); /* Intensifica el gradiente con nuevos colores */
            transform: translateY(-1px) scale(1.02); /* Elevación y leve zoom */
            box-shadow: 0 4px 16px rgba(62, 181, 123, 0.3); /* Resplandor con color verde */
            border-color: rgba(255, 255, 255, 0.2); /* Borde más visible */
            filter: brightness(1.05); /* Brillo sutil */
        }
    /* Al hacer focus, borde con el gradiente y animación más pronunciada */
    .menu-secundario-gradient .mud-input-root.mud-input-focused {
            border: 2px solid transparent;
            background-clip: padding-box;
            border-radius: 12px;
            /* Gradiente más intenso para focus, manteniendo el tema del menú */
            background: linear-gradient(135deg, rgba(62, 181, 123, 0.35), rgba(67, 123, 156, 0.35));
            box-shadow: 0 0 0 0.2rem rgba(62, 181, 123, 0.25), 0 4px 20px rgba(0, 0, 0, 0.2); /* Anillo de focus y sombra con verde */
            transform: translateY(-2px) scale(1.03); /* Animación de elevación en focus */
        }
    /* Iconos dentro del input (si hay, como search) */
    .menu-secundario-gradient .mud-input-root .mud-input-icon {
            color: rgba(255, 255, 255, 0.8);
            transition: color 0.3s ease;
        } .menu-secundario-gradient .mud-input-root:hover .mud-input-icon, .menu-secundario-gradient .mud-input-root.mud-input-focused .mud-input-icon {
            color: white;
        }
    /* Para el drawer móvil, aplica estilos similares si es necesario */
    .mud-drawer .mud-nav-link, .mud-drawer .mud-nav-menu {
    background: white !important;
    color: #333 !important;
    border-radius: 8px;
    transition: all 0.3s ease;
    text-decoration: none;
    border: none;
} .mud-drawer .mud-nav-link:hover {
        background: ghostwhite !important;
        transform: translateX(8px);
        text-decoration: none;
    }
    /*para los titulos*/
    h4 {
    font-size: 2.4rem; /* tamaño llamativo */
    font-weight: 700; /* negrita elegante */
    background: linear-gradient(90deg, #3EB57B, #437B9C); /* degradado bonito */
    -webkit-background-clip: text; /* aplica degradado solo al texto */
    -webkit-text-fill-color: transparent; /* hace que se vea el degradado */
    text-align: center; /* centrado */
    letter-spacing: 1px; /* espacio entre letras */
    margin: 10px 0; /* aire arriba y abajo */
    text-shadow: 0 4px 10px rgba(62, 181, 123, 0.15); /* sutil sombra */
}
    /*Animacion de Las iamgenes estaticas*/
    .image-hover-effect {
    position: relative;
    overflow: hidden;
    border-radius: 14px; /* bordes suaves */
    transition: transform 0.4s ease, box-shadow 0.4s ease;
    cursor: pointer;
    margin: 0 auto;
    position:center !important;
}
    /* La imagen en sí */
    .image-hover-effect img {
        width: 100%;
        height: auto;
        display: block;
        transition: transform 0.5s ease;
        border-radius: 14px;

    }
    /* Efecto al pasar el cursor */
    .image-hover-effect:hover {
        transform: scale(1.03); /* ligero zoom */
        box-shadow: 0 0 45px #77C79B; /* borde verde iluminado */
    }
    /* Imagen se mueve un poquito */
    .image-hover-effect:hover img {
            transform: scale(1.1); /* zoom elegante en la imagen */
        }
    /* Brillo animado en el borde */
    .image-hover-effect::after {
        content: "";
        position: absolute;
        top: -2px;
        left: -2px;
        right: -2px;
        bottom: -2px;
        border-radius: 16px;
        border: 2px solid rgba(0, 255, 120, 0.8);
        opacity: 0;
        transition: opacity 0.4s ease-in-out;
    } .image-hover-effect:hover::after {
        opacity: 1;
        animation: glow 1.5s infinite alternate;
    } @keyframes glow {
    from {
        box-shadow: 0 0 10px rgba(0, 255, 120, 0.4);
    }

    to {
        box-shadow: 0 0 25px rgba(0, 255, 120, 0.9);
    }
}
    /* Animación de botón Copiar */
    .icon-conatiner {
    width: 56px; /* Tamaño fijo para que siempre sean cuadrados */
    height: 56px; /* Igual que el ancho */
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border-radius: 12px; /* Bordes rectos con un leve redondeo */
    box-shadow: 4px 4px 8px rgba(0,0,0,0.15);
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease-in-out;
} .icon-conatiner svg {
        width: 28px;
        height: auto;
        pointer-events: none; /* Para que no interfiera con los clics */
    } .icon-conatiner svg:last-child {
            position: absolute;
        }
    /* Animación al presionar */
    .icon-conatiner:active {
        animation: press 0.1s 1 linear;
    } .icon-conatiner:active svg:last-child {
            animation: bounce 1.5s 1 linear forwards; /* se mantiene en el estado final */
        }
    /* Texto normal */
    .text {
    color: #444;
    font-family: "Segoe UI", sans-serif;
    font-size: 14px;
    font-weight: 600;
    margin-top: 10px;
    user-select: none;
}
    /* Animación de presión */
    @keyframes press {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(0.9);
    }

    100% {
        transform: scale(1);
    }
}
    /* Rebote + desvanecimiento */
    @keyframes bounce {
    0% {
        opacity: 1;
        transform: scale(1) rotate(0) translate(0, 0);
    }

    50% {
        transform: rotate(5deg) translate(20px, -30px);
        opacity: 0.7;
    }

    100% {
        transform: scale(0.9) rotate(10deg) translate(40px, -60px);
        opacity: 0; /* se desvanece */
    }
}
    /* ESTILOS PARA MEJORAR EL COMPORTAMIENTO DE HOVER EN MENÚS */
    /* Contenedor principal del menú con hover mejorado */
    .menu-hover-container {
    position: relative;
}
    /* Mejorar el área de hover para evitar que se cierre */
    .menu-hover-container ::deep .mud-menu {
        position: relative;
    }
    /* Contenedor de submenú que mantiene el hover */
    .submenu-container {
    position: relative;
}
    /* Activador de submenú con área de hover extendida */
    .submenu-activator {
    position: relative;
    padding-right: 20px !important;
}
    /* Submenú con área de hover mejorada */
    .submenu-hover ::deep .mud-menu {
    position: relative;
}
    /* Items de submenú con mejor hover */
    .submenu-item {
    padding: 8px 16px !important;
    transition: background-color 0.2s ease;
} .submenu-item:hover {
        background-color: rgba(255, 255, 255, 0.1) !important;
    }
    /* Mejorar el área clickeable de los menús */
    .menu-hover-container ::deep .mud-menu-activator {
    padding: 8px 16px !important;
    min-width: 120px;
    text-align: center;
    transition: background-color 0.2s ease;
} .menu-hover-container ::deep .mud-menu-activator:hover {
        background-color: rgba(255, 255, 255, 0.1) !important;
    }
    /* Contenedor del menú desplegable con mejor posicionamiento */
    .menu-hover-container ::deep .mud-popover {
    margin-top: -2px !important; /* Eliminar gap entre activador y menú */
}
    /* Área de conexión invisible entre menú principal y submenú */
    .submenu-container::after {
    content: '';
    position: absolute;
    top: 0;
    right: -10px;
    width: 10px;
    height: 100%;
    background: transparent;
    pointer-events: auto;
}
    /* Estilos responsivos existentes */
    @media (max-width: 640.98px) {
    .top-row:not(.auth) {
        display: none;
    }

    .top-row.auth {
        justify-content: space-between;
    }

    .top-row ::deep a, .top-row ::deep .btn-link {
        margin-left: 0;
    }
} @media (min-width: 641px) {
    .page {
        flex-direction: row;
    }

    .sidebar {
        width: 250px;
        height: 100vh;
        position: sticky;
        top: 0;
    }

    .top-row {
        position: sticky;
        top: 0;
        z-index: 1;
    }

        .top-row.auth ::deep a:first-child {
            flex: 1;
            text-align: right;
            width: 0;
        }

    .top-row, article {
        padding-left: 2rem !important;
        padding-right: 1.5rem !important;
    }
}
    /* Estilos adicionales para mejor UX */
    .menu-secundario-gradient {
    background: linear-gradient(90deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.1) 50%, rgba(255,255,255,0.05) 100%);
    border-bottom: 1px solid rgba(255,255,255,0.1);
}
    /* Animaciones suaves para menús */
    .menu-hover-container ::deep .mud-popover-open {
    animation: fadeInDown 0.3s ease-out;
} @keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* --- Estilo del contenedor del diálogo --- */
.pdf-dialog {
    background-color: rgba(0, 0, 0, 0.85) !important; /* fondo negro transparente */
    border-radius: 12px;
    max-width: 900px; /* ancho máximo en escritorio */
    margin: auto;
}

/* --- Contenedor responsivo del iframe --- */
.pdf-container {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 8px;
}

/* --- Iframe PDF responsivo --- */
.pdf-iframe {
    width: 100%;
    height: 80vh; /* escritorio */
    border: none;
    border-radius: 8px;
    background: #fff;

    overflow: auto; /* 👈 Habilita scroll interno */
    -webkit-overflow-scrolling: touch; /* 👈 Scroll suave en iOS */
    touch-action: pan-y; /* 👈 Permite scroll vertical dentro del iframe */
}

/* --- Ajustes móviles --- */
@media (max-width: 768px) {
    .pdf-dialog {
        max-width: 95% !important; /* casi toda la pantalla en móvil */
    }

    .pdf-iframe {
        height: 60vh; /* más bajo en móvil */
    }
}

/* --- Área de botones --- */
.pdf-dialog-actions {
    justify-content: flex-end;
    background: rgba(0, 0, 0, 0.7);
    border-top: 1px solid rgba(255,255,255,0.1);
}

/* fallback para evitar que el body haga scroll */
body.modal-open {
    overflow: hidden !important;
}

/* evita que el scroll se propague fuera del diálogo */
.pdf-dialog,
.pdf-container,
.pdf-iframe {
    overscroll-behavior: contain; /* evita el 'scroll chaining' */
    -webkit-overflow-scrolling: touch; /* scroll suave en iOS */
}

/* el iframe permite desplazamiento vertical */
.pdf-iframe {
    touch-action: pan-y;
    width: 100%;
    height: 80vh;
    border: none;
    border-radius: 8px;
    background: #fff;
}

/* móvil: menos alto */
@media (max-width: 768px) {
    .pdf-iframe {
        height: 60vh;
    }

    .pdf-dialog {
        max-width: 95% !important;
    }
}
.custom-paper {
    max-width: 750px;
    padding: 7px
}

/* --- Centrado global --- */
.page-container {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1rem;
}

/* --- Contenedor principal --- */
.modern-form {
    background: linear-gradient(145deg, #f9f9f9, #ffffff);
    transition: all 0.3s ease-in-out;
    max-width: 600px; /* no se estira demasiado */
    width: 100%;
    margin: auto;
}

    .modern-form:hover {
        transform: scale(1.01);
    }

/* --- Inputs ocupan todo el ancho --- */
.full-width {
    width: 100%;
}

/* --- Resultados responsivos --- */
.result-card {
    background: linear-gradient(135deg, #e3f2fd, #ffffff);
    max-width: 600px;
    width: 100%;
    margin: auto;
}

/* --- Responsivo móvil --- */
@media (max-width: 768px) {
    .modern-form {
        padding: 1.5rem;
        border-radius: 12px;
    }

    .title-animate {
        font-size: 1.2rem;
    }

    .btn-animate {
        width: 100%;
    }
}

/* --- Títulos con animación --- */
.title-animate {
    font-weight: 700;
    font-size: 1.4rem;
    animation: textPop 0.8s ease;
}

/* --- Animaciones generales --- */
.fade-in {
    animation: fadeIn 0.6s ease-in-out;
}

.fade-slide {
    animation: fadeSlide 0.8s ease-in-out;
}

/* --- Keyframes --- */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: scale(0.98);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes fadeSlide {
    from {
        opacity: 0;
        transform: translateY(15px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes textPop {
    0% {
        opacity: 0;
        transform: scale(0.8);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}


/*animacion de "carga" de Gravedad*/
/* Contenedor que centra el spinner */
.spinner-container {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 28px 0 !important; 
    padding: 28px;
}

/* Animación del cubo */
.spinner {
    width: 60px;
    height: 60px;
    animation: spinner 1.6s infinite ease;
    transform-style: preserve-3d;
    position: relative; /* NECESARIO */
}

    .spinner > div {
        background: transparent;
        height: 100%;
        position: absolute;
        width: 100%;
        border: 3.5px solid #4BEB96; /* ✅ color corregido */
        border-radius: 6px; /* opcional, bordes suaves */
    }

    .spinner div:nth-of-type(1) {
        transform: translateZ(-35px) rotateY(180deg);
    }

    .spinner div:nth-of-type(2) {
        transform: rotateY(-270deg) translateX(50%);
        transform-origin: top right;
    }

    .spinner div:nth-of-type(3) {
        transform: rotateY(270deg) translateX(-50%);
        transform-origin: center left;
    }

    .spinner div:nth-of-type(4) {
        transform: rotateX(90deg) translateY(-50%);
        transform-origin: top center;
    }

    .spinner div:nth-of-type(5) {
        transform: rotateX(-90deg) translateY(50%);
        transform-origin: bottom center;
    }

    .spinner div:nth-of-type(6) {
        transform: translateZ(35px);
    }

@keyframes spinner {
    0% {
        transform: rotate(45deg) rotateX(-25deg) rotateY(25deg);
    }

    50% {
        transform: rotate(45deg) rotateX(-385deg) rotateY(25deg);
    }

    100% {
        transform: rotate(45deg) rotateX(-385deg) rotateY(385deg);
    }
}

/*animacion de "carga" de Aire*/
/* From Uiverse.io by realrobertlogan */
.loader-container {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 30px 0; /* espacio opcional */
}

.loader {
    width: 3rem;
    height: 3rem;
    clear: both;
    margin: 1rem auto;
    border: 2px #4BEB96 solid;
    border-radius: 100%;
    overflow: hidden;
    position: relative;
}

    .loader:after,
    .loader:before {
        content: "";
        border-radius: 50%;
        position: absolute;
        width: inherit;
        height: inherit;
        animation: spVortex 2s infinite linear;
    }

    .loader:before {
        border-top: 0.5rem #4BEB96 solid;
        top: -0.1875rem;
        left: calc(-50% - 0.1875rem);
        transform-origin: right center;
    }

    .loader:after {
        border-bottom: 0.5rem #4BEB96 solid;
        top: 0.1875rem;
        right: calc(-50% - 0.1875rem);
        transform-origin: left center;
    }

@keyframes spVortex {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(359deg);
    }
}


/* From Uiverse.io by chase2k25 */
.loader-container {
    position: relative;
    width: 150px;
    height: 150px;
    perspective: 800px;
    transform-style: preserve-3d;
}

.sphere-core {
    position: absolute;
    width: 60px;
    height: 60px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle at 40% 40%, #00FF9D, #00966D);
    border-radius: 50%;
    box-shadow: 0 0 25px rgba(0, 234, 255, 0.5);
    animation: pulse 2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
}

.ring {
    position: absolute;
    width: 100%;
    height: 100%;
    border: 2px solid #00FF9D;
    border-radius: 50%;
    box-shadow: 0 0 15px #00966D;
    transform-style: preserve-3d;
}

.ring-1 {
    animation: rotateX 2.5s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}

.ring-2 {
    animation: rotateY 2s cubic-bezier(0.55, 0, 0.45, 1) infinite;
    width: 120px;
    height: 120px;
    top: 15px;
    left: 15px;
    border-color: rgba(0, 234, 255, 0.5);
}

.ring-3 {
    animation: rotateXY 3s cubic-bezier(0.7, 0, 0.3, 1) infinite;
    width: 90px;
    height: 90px;
    top: 30px;
    left: 30px;
    border-color: rgba(0, 234, 255, 0.3);
}

@keyframes rotateX {
    0% {
        transform: rotateX(0deg);
    }

    50% {
        transform: rotateX(180deg);
    }

    100% {
        transform: rotateX(360deg);
    }
}

@keyframes rotateY {
    0% {
        transform: rotateY(0deg);
    }

    50% {
        transform: rotateY(180deg);
    }

    100% {
        transform: rotateY(360deg);
    }
}

@keyframes rotateXY {
    0% {
        transform: rotateX(0deg) rotateY(0deg);
    }

    50% {
        transform: rotateX(90deg) rotateY(180deg);
    }

    100% {
        transform: rotateX(360deg) rotateY(360deg);
    }
}

@keyframes pulse {
    0%, 100% {
        transform: translate(-50%, -50%) scale(1);
        box-shadow: 0 0 25px rgba(0, 234, 255, 0.5);
    }

    50% {
        transform: translate(-50%, -50%) scale(1.1);
        box-shadow: 0 0 35px rgba(0, 234, 255, 0.7);
    }
}

.loader-container:hover .sphere-core {
    background: radial-gradient(circle at 40% 40%, #ff66ff, #6600ff);
    box-shadow: 0 0 35px rgba(255, 102, 255, 0.7);
}

.loader-container:hover .ring {
    border-color: rgba(255, 102, 255, 0.7);
    box-shadow: 0 0 20px rgba(255, 102, 255, 0.5);
}

/* From Uiverse.io by Timeless-Eve */
.loader {
    --duration: 3s;
    --primary: rgb(0, 90, 53);
    --primary-light: #001b18;
    --primary-rgba: rgba(96, 125, 211, 0);
    width: 200px;
    height: 320px;
    position: relative;
    transform-style: preserve-3d;
}

@media (max-width: 480px) {
    .loader {
        zoom: 0.44;
    }
}

.loader:before,
.loader:after {
    --r: 20.5deg;
    content: "";
    width: 320px;
    height: 140px;
    position: absolute;
    right: 32%;
    bottom: -11px;
    /* change the back groung color on switching from light to dark mood */
    background: #e8e8e8;
    transform: translateZ(200px) rotate(var(--r));
    -webkit-animation: mask var(--duration) linear forwards infinite;
    animation: mask var(--duration) linear forwards infinite;
}

.loader:after {
    --r: -20.5deg;
    right: auto;
    left: 32%;
}

.loader .ground {
    position: absolute;
    left: -50px;
    bottom: -120px;
    transform-style: preserve-3d;
    transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1);
}

    .loader .ground div {
        transform: rotateX(90deg) rotateY(0deg) translate(-48px, -120px) translateZ(100px) scale(0);
        width: 200px;
        height: 200px;
        background: var(--primary);
        background: linear-gradient( 45deg, var(--primary) 0%, var(--primary) 50%, var(--primary-light) 50%, var(--primary-light) 100% );
        transform-style: preserve-3d;
        -webkit-animation: ground var(--duration) linear forwards infinite;
        animation: ground var(--duration) linear forwards infinite;
    }

        .loader .ground div:before,
        .loader .ground div:after {
            --rx: 90deg;
            --ry: 0deg;
            --x: 44px;
            --y: 162px;
            --z: -50px;
            content: "";
            width: 156px;
            height: 300px;
            opacity: 0;
            background: linear-gradient(var(--primary), var(--primary-rgba));
            position: absolute;
            transform: rotateX(var(--rx)) rotateY(var(--ry)) translate(var(--x), var(--y)) translateZ(var(--z));
            -webkit-animation: ground-shine var(--duration) linear forwards infinite;
            animation: ground-shine var(--duration) linear forwards infinite;
        }

        .loader .ground div:after {
            --rx: 90deg;
            --ry: 90deg;
            --x: 0;
            --y: 177px;
            --z: 150px;
        }

.loader .box {
    --x: 0;
    --y: 0;
    position: absolute;
    -webkit-animation: var(--duration) linear forwards infinite;
    animation: var(--duration) linear forwards infinite;
    transform: translate(var(--x), var(--y));
}

    .loader .box div {
        background-color: var(--primary);
        width: 48px;
        height: 48px;
        position: relative;
        transform-style: preserve-3d;
        -webkit-animation: var(--duration) ease forwards infinite;
        animation: var(--duration) ease forwards infinite;
        transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0);
    }

        .loader .box div:before,
        .loader .box div:after {
            --rx: 90deg;
            --ry: 0deg;
            --z: 24px;
            --y: -24px;
            --x: 0;
            content: "";
            position: absolute;
            background-color: inherit;
            width: inherit;
            height: inherit;
            transform: rotateX(var(--rx)) rotateY(var(--ry)) translate(var(--x), var(--y)) translateZ(var(--z));
            filter: brightness(var(--b, 1.2));
        }

        .loader .box div:after {
            --rx: 0deg;
            --ry: 90deg;
            --x: 24px;
            --y: 0;
            --b: 1.4;
        }

    .loader .box.box0 {
        --x: -220px;
        --y: -120px;
        left: 58px;
        top: 108px;
    }

    .loader .box.box1 {
        --x: -260px;
        --y: 120px;
        left: 25px;
        top: 120px;
    }

    .loader .box.box2 {
        --x: 120px;
        --y: -190px;
        left: 58px;
        top: 64px;
    }

    .loader .box.box3 {
        --x: 280px;
        --y: -40px;
        left: 91px;
        top: 120px;
    }

    .loader .box.box4 {
        --x: 60px;
        --y: 200px;
        left: 58px;
        top: 132px;
    }

    .loader .box.box5 {
        --x: -220px;
        --y: -120px;
        left: 25px;
        top: 76px;
    }

    .loader .box.box6 {
        --x: -260px;
        --y: 120px;
        left: 91px;
        top: 76px;
    }

    .loader .box.box7 {
        --x: -240px;
        --y: 200px;
        left: 58px;
        top: 87px;
    }

.loader .box0 {
    -webkit-animation-name: box-move0;
    animation-name: box-move0;
}

    .loader .box0 div {
        -webkit-animation-name: box-scale0;
        animation-name: box-scale0;
    }

.loader .box1 {
    -webkit-animation-name: box-move1;
    animation-name: box-move1;
}

    .loader .box1 div {
        -webkit-animation-name: box-scale1;
        animation-name: box-scale1;
    }

.loader .box2 {
    -webkit-animation-name: box-move2;
    animation-name: box-move2;
}

    .loader .box2 div {
        -webkit-animation-name: box-scale2;
        animation-name: box-scale2;
    }

.loader .box3 {
    -webkit-animation-name: box-move3;
    animation-name: box-move3;
}

    .loader .box3 div {
        -webkit-animation-name: box-scale3;
        animation-name: box-scale3;
    }

.loader .box4 {
    -webkit-animation-name: box-move4;
    animation-name: box-move4;
}

    .loader .box4 div {
        -webkit-animation-name: box-scale4;
        animation-name: box-scale4;
    }

.loader .box5 {
    -webkit-animation-name: box-move5;
    animation-name: box-move5;
}

    .loader .box5 div {
        -webkit-animation-name: box-scale5;
        animation-name: box-scale5;
    }

.loader .box6 {
    -webkit-animation-name: box-move6;
    animation-name: box-move6;
}

    .loader .box6 div {
        -webkit-animation-name: box-scale6;
        animation-name: box-scale6;
    }

.loader .box7 {
    -webkit-animation-name: box-move7;
    animation-name: box-move7;
}

    .loader .box7 div {
        -webkit-animation-name: box-scale7;
        animation-name: box-scale7;
    }

@-webkit-keyframes box-move0 {
    12% {
        transform: translate(var(--x), var(--y));
    }

    25%, 52% {
        transform: translate(0, 0);
    }

    80% {
        transform: translate(0, -32px);
    }

    90%, 100% {
        transform: translate(0, 188px);
    }
}

@keyframes box-move0 {
    12% {
        transform: translate(var(--x), var(--y));
    }

    25%, 52% {
        transform: translate(0, 0);
    }

    80% {
        transform: translate(0, -32px);
    }

    90%, 100% {
        transform: translate(0, 188px);
    }
}

@-webkit-keyframes box-scale0 {
    6% {
        transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0);
    }

    14%, 100% {
        transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1);
    }
}

@keyframes box-scale0 {
    6% {
        transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0);
    }

    14%, 100% {
        transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1);
    }
}

@-webkit-keyframes box-move1 {
    16% {
        transform: translate(var(--x), var(--y));
    }

    29%, 52% {
        transform: translate(0, 0);
    }

    80% {
        transform: translate(0, -32px);
    }

    90%, 100% {
        transform: translate(0, 188px);
    }
}

@keyframes box-move1 {
    16% {
        transform: translate(var(--x), var(--y));
    }

    29%, 52% {
        transform: translate(0, 0);
    }

    80% {
        transform: translate(0, -32px);
    }

    90%, 100% {
        transform: translate(0, 188px);
    }
}

@-webkit-keyframes box-scale1 {
    10% {
        transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0);
    }

    18%, 100% {
        transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1);
    }
}

@keyframes box-scale1 {
    10% {
        transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0);
    }

    18%, 100% {
        transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1);
    }
}

@-webkit-keyframes box-move2 {
    20% {
        transform: translate(var(--x), var(--y));
    }

    33%, 52% {
        transform: translate(0, 0);
    }

    80% {
        transform: translate(0, -32px);
    }

    90%, 100% {
        transform: translate(0, 188px);
    }
}

@keyframes box-move2 {
    20% {
        transform: translate(var(--x), var(--y));
    }

    33%, 52% {
        transform: translate(0, 0);
    }

    80% {
        transform: translate(0, -32px);
    }

    90%, 100% {
        transform: translate(0, 188px);
    }
}

@-webkit-keyframes box-scale2 {
    14% {
        transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0);
    }

    22%, 100% {
        transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1);
    }
}

@keyframes box-scale2 {
    14% {
        transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0);
    }

    22%, 100% {
        transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1);
    }
}

@-webkit-keyframes box-move3 {
    24% {
        transform: translate(var(--x), var(--y));
    }

    37%, 52% {
        transform: translate(0, 0);
    }

    80% {
        transform: translate(0, -32px);
    }

    90%, 100% {
        transform: translate(0, 188px);
    }
}

@keyframes box-move3 {
    24% {
        transform: translate(var(--x), var(--y));
    }

    37%, 52% {
        transform: translate(0, 0);
    }

    80% {
        transform: translate(0, -32px);
    }

    90%, 100% {
        transform: translate(0, 188px);
    }
}

@-webkit-keyframes box-scale3 {
    18% {
        transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0);
    }

    26%, 100% {
        transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1);
    }
}

@keyframes box-scale3 {
    18% {
        transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0);
    }

    26%, 100% {
        transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1);
    }
}

@-webkit-keyframes box-move4 {
    28% {
        transform: translate(var(--x), var(--y));
    }

    41%, 52% {
        transform: translate(0, 0);
    }

    80% {
        transform: translate(0, -32px);
    }

    90%, 100% {
        transform: translate(0, 188px);
    }
}

@keyframes box-move4 {
    28% {
        transform: translate(var(--x), var(--y));
    }

    41%, 52% {
        transform: translate(0, 0);
    }

    80% {
        transform: translate(0, -32px);
    }

    90%, 100% {
        transform: translate(0, 188px);
    }
}

@-webkit-keyframes box-scale4 {
    22% {
        transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0);
    }

    30%, 100% {
        transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1);
    }
}

@keyframes box-scale4 {
    22% {
        transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0);
    }

    30%, 100% {
        transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1);
    }
}

@-webkit-keyframes box-move5 {
    32% {
        transform: translate(var(--x), var(--y));
    }

    45%, 52% {
        transform: translate(0, 0);
    }

    80% {
        transform: translate(0, -32px);
    }

    90%, 100% {
        transform: translate(0, 188px);
    }
}

@keyframes box-move5 {
    32% {
        transform: translate(var(--x), var(--y));
    }

    45%, 52% {
        transform: translate(0, 0);
    }

    80% {
        transform: translate(0, -32px);
    }

    90%, 100% {
        transform: translate(0, 188px);
    }
}

@-webkit-keyframes box-scale5 {
    26% {
        transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0);
    }

    34%, 100% {
        transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1);
    }
}

@keyframes box-scale5 {
    26% {
        transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0);
    }

    34%, 100% {
        transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1);
    }
}

@-webkit-keyframes box-move6 {
    36% {
        transform: translate(var(--x), var(--y));
    }

    49%, 52% {
        transform: translate(0, 0);
    }

    80% {
        transform: translate(0, -32px);
    }

    90%, 100% {
        transform: translate(0, 188px);
    }
}

@keyframes box-move6 {
    36% {
        transform: translate(var(--x), var(--y));
    }

    49%, 52% {
        transform: translate(0, 0);
    }

    80% {
        transform: translate(0, -32px);
    }

    90%, 100% {
        transform: translate(0, 188px);
    }
}

@-webkit-keyframes box-scale6 {
    30% {
        transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0);
    }

    38%, 100% {
        transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1);
    }
}

@keyframes box-scale6 {
    30% {
        transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0);
    }

    38%, 100% {
        transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1);
    }
}

@-webkit-keyframes box-move7 {
    40% {
        transform: translate(var(--x), var(--y));
    }

    53%, 52% {
        transform: translate(0, 0);
    }

    80% {
        transform: translate(0, -32px);
    }

    90%, 100% {
        transform: translate(0, 188px);
    }
}

@keyframes box-move7 {
    40% {
        transform: translate(var(--x), var(--y));
    }

    53%, 52% {
        transform: translate(0, 0);
    }

    80% {
        transform: translate(0, -32px);
    }

    90%, 100% {
        transform: translate(0, 188px);
    }
}

@-webkit-keyframes box-scale7 {
    34% {
        transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0);
    }

    42%, 100% {
        transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1);
    }
}

@keyframes box-scale7 {
    34% {
        transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0);
    }

    42%, 100% {
        transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1);
    }
}

@-webkit-keyframes ground {
    0%, 65% {
        transform: rotateX(90deg) rotateY(0deg) translate(-48px, -120px) translateZ(100px) scale(0);
    }

    75%, 90% {
        transform: rotateX(90deg) rotateY(0deg) translate(-48px, -120px) translateZ(100px) scale(1);
    }

    100% {
        transform: rotateX(90deg) rotateY(0deg) translate(-48px, -120px) translateZ(100px) scale(0);
    }
}

@keyframes ground {
    0%, 65% {
        transform: rotateX(90deg) rotateY(0deg) translate(-48px, -120px) translateZ(100px) scale(0);
    }

    75%, 90% {
        transform: rotateX(90deg) rotateY(0deg) translate(-48px, -120px) translateZ(100px) scale(1);
    }

    100% {
        transform: rotateX(90deg) rotateY(0deg) translate(-48px, -120px) translateZ(100px) scale(0);
    }
}

@-webkit-keyframes ground-shine {
    0%, 70% {
        opacity: 0;
    }

    75%, 87% {
        opacity: 0.2;
    }

    100% {
        opacity: 0;
    }
}

@keyframes ground-shine {
    0%, 70% {
        opacity: 0;
    }

    75%, 87% {
        opacity: 0.2;
    }

    100% {
        opacity: 0;
    }
}

@-webkit-keyframes mask {
    0%, 65% {
        opacity: 0;
    }

    66%, 100% {
        opacity: 1;
    }
}

@keyframes mask {
    0%, 65% {
        opacity: 0;
    }

    66%, 100% {
        opacity: 1;
    }
}

/* From Uiverse.io by SalladShooter */
.loaderA {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

.circleA {
    background: #39c67D;
    width: 15px;
    height: 15px;
    position: absolute;
    border-radius: 50%;
    animation: figureEight 1.5s linear infinite;
}

    .circleA:nth-child(2) {
        animation-delay: 0.1s;
        width: 12px;
        height: 12px;
        background: #39c67D;
    }

    .circleA:nth-child(3) {
        animation-delay: 0.2s;
        width: 10px;
        height: 10px;
        background: #39c67D;
    }

    .circleA:nth-child(4) {
        animation-delay: 0.3s;
        width: 10px;
        height: 10px;
        background: #39c67D;
    }

    .circleA:nth-child(5) {
        animation-delay: 0.4s;
        width: 10px;
        height: 10px;
        background: #39c67D;
    }

    .circleA:nth-child(6) {
        animation-delay: 0.5s;
        width: 10px;
        height: 10px;
        background: #39c67D;
    }

    .circleA:nth-child(7) {
        animation-delay: 0.6s;
        width: 10px;
        height: 10px;
        background: #39c67D;
    }

    .circleA:nth-child(8) {
        animation-delay: 0.7s;
        width: 10px;
        height: 10px;
        background: #39c67D;
    }

@keyframes figureEight {
    0%, 100% {
        transform: translate(0, 0);
    }

    12.5% {
        transform: translate(50px, -25px);
    }

    25% {
        transform: translate(100px, 0);
    }

    37.5% {
        transform: translate(50px, 25px);
    }

    50% {
        transform: translate(0, 0);
    }

    62.5% {
        transform: translate(-50px, -25px);
    }

    75% {
        transform: translate(-100px, 0);
    }

    87.5% {
        transform: translate(-50px, 25px);
    }
}


/* From Uiverse.io by alexmaracinaru */
.pyramid-loader {
    position: relative;
    width: 300px;
    height: 150px;
    display: block;
    transform-style: preserve-3d;
    transform: rotateX(-20deg);
}

.wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    animation: spin 4s linear infinite;
}

@keyframes spin {
    100% {
        transform: rotateY(360deg);
    }
}

.pyramid-loader .wrapper .side {
    width: 70px;
    height: 70px;
    background: linear-gradient(to bottom right, #FFA500, #FF4500);
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    transform-origin: center top;
    clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}

.pyramid-loader .wrapper .side1 {
    transform: rotateZ(-30deg) rotateY(90deg);
    background: linear-gradient(to bottom right, #00FF95, #1895C7);
}

.pyramid-loader .wrapper .side2 {
    transform: rotateZ(30deg) rotateY(90deg);
    background: linear-gradient(to bottom right, #00FF37, #1653A1);
}

.pyramid-loader .wrapper .side3 {
    transform: rotateX(30deg);
    background: linear-gradient(to bottom right, #00FFC3, #1030B5);
}

.pyramid-loader .wrapper .side4 {
    transform: rotateX(-30deg);
    background: linear-gradient(to bottom right, #00FFEA, #1634C9);
}

.pyramid-loader .wrapper .shadow {
    width: 60px;
    height: 60px;
    background: #33FFA2;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    transform: rotateX(90deg) translateZ(-40px);
    filter: blur(12px);
}

/**/
/* From Uiverse.io by Shoh2008 */
.loaderI {
    position: relative;
    width: 120px;
    height: 140px;
    background-image: radial-gradient(circle 30px, #2B62B3 100%, transparent 0), radial-gradient(circle 5px, #2B62B3 100%, transparent 0), radial-gradient(circle 5px, #2B62B3 100%, transparent 0), linear-gradient(#2B62B3 20px, transparent 0);
    background-position: center 127px, 94px 102px, 16px 18px, center 114px;
    background-size: 60px 60px, 10px 10px, 10px 10px, 4px 14px;
    background-repeat: no-repeat;
    z-index: 10;
    perspective: 500px;
}

    .loaderI::before {
        content: '';
        position: absolute;
        width: 100px;
        height: 100px;
        border-radius: 50%;
        border: 3px solid #2B62B3;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -55%) rotate(-45deg);
        border-right-color: transparent;
        box-sizing: border-box;
    }

    .loaderI::after {
        content: '';
        position: absolute;
        height: 80px;
        width: 80px;
        transform: translate(-50%, -55%) rotate(-45deg) rotateY(0deg);
        left: 50%;
        top: 50%;
        box-sizing: border-box;
        border: 7px solid #40D696;
        border-radius: 50%;
        animation: rotate_4191 0.5s linear infinite;
    }

@keyframes rotate_4191 {
    to {
        transform: translate(-50%, -55%) rotate(-45deg) rotateY(360deg)
    }
}

/*Para el carrito de compras*/
.btn-cart {
    width: 44px; /* Tamaño del botón */
    height: 44px;
    border-radius: 50% !important; /* Lo hace circular */
    color: white; /* Color del icono */
    display: flex;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

    .btn-cart:hover {
        transform: scale(1.1);
        box-shadow: 0 6px 14px rgba(0,0,0,0.3);
        background-color: #5c6bc0; /* tono más claro al hover */
    }

/*=============================================================*/
/* ═══════════════════════════════════════════════════════ */
/* WRAPPER - Da espacio para las sugerencias debajo */
/* ═══════════════════════════════════════════════════════ */
.input-wrapper {
    position: relative;
    overflow: visible;
    margin-bottom: 60px; /* ✅ ESPACIO para las sugerencias debajo */
}

/* ═══════════════════════════════════════════════════════ */
/* CONTENEDOR DE SUGERENCIAS - Debajo del input sin tapar */
/* ═══════════════════════════════════════════════════════ */
.sugerencias-container {
    position: absolute;
    top: calc(100% + 8px); /* 8px debajo del input */
    left: 0;
    right: 0;
    z-index: 999;
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-width: 100%;
}

.sugerencia-item {
    width: 100%;
    animation: slideDownSugerencia 0.2s ease-out;
}

/* ═══════════════════════════════════════════════════════ */
/* CARD DE SUGERENCIA */
/* ═══════════════════════════════════════════════════════ */
.sugerencia-card {
    background: white;
    border-left: 4px solid #ff9800 !important;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    transition: all 0.2s ease;
}

    .sugerencia-card:hover {
        box-shadow: 0 6px 16px rgba(255, 152, 0, 0.15);
        border-left-color: #ff6f00 !important;
    }

/* ═══════════════════════════════════════════════════════ */
/* CONTENIDO DE SUGERENCIA */
/* ═══════════════════════════════════════════════════════ */
.sugerencia-content {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 12px;
    font-size: 0.9rem;
}

.sugerencia-icon {
    min-width: 24px;
    font-size: 1.1rem;
    margin-top: 2px;
}

.sugerencia-text {
    flex: 1;
    text-align: left;
    color: #333;
    line-height: 1.4;
}

    .sugerencia-text > div {
        font-weight: 500;
        margin-bottom: 3px;
    }

.sugerencia-btn {
    margin-left: auto;
    text-transform: none !important;
    padding: 4px 8px !important;
    font-size: 0.8rem;
    white-space: nowrap;
}

/* ═══════════════════════════════════════════════════════ */
/* SUGERENCIAS EN ÁREA DE ERROR */
/* ═══════════════════════════════════════════════════════ */
.error-sugerencia-item {
    margin-bottom: 8px;
    animation: slideDownSugerencia 0.2s ease-out;
}

.error-sugerencia-card {
    background: #f5f5f5;
    border: 1px solid #ffb74d;
    border-left: 4px solid #ff9800 !important;
    border-radius: 6px;
    transition: all 0.2s ease;
}

    .error-sugerencia-card:hover {
        background: #fafafa;
        box-shadow: 0 2px 8px rgba(255, 152, 0, 0.15);
    }

/* ═══════════════════════════════════════════════════════ */
/* ANIMACIONES */
/* ═══════════════════════════════════════════════════════ */
@keyframes slideDownSugerencia {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ═══════════════════════════════════════════════════════ */
/* GENERAL STYLES */
/* ═══════════════════════════════════════════════════════ */
.bg-gradient {
    background: linear-gradient(135deg, #e8f5e9 0%, #f1f8e9 100%);
}

/* Evita que las sugerencias tapen contenido siguiente */
.input-wrapper:last-child {
    margin-bottom: 20px;
}

/*Tienda*/

/* Animación sutil al pasar el mouse por las cards */
.hover-scale {
    transition: transform 0.2s ease-in-out, box-shadow 0.2s;
    cursor: pointer;
}

    .hover-scale:hover {
        transform: scale(1.03);
        box-shadow: 0 6px 12px rgba(0,0,0,0.15);
    }

/* Drawer personalizado */
.product-drawer {
    width: 380px;
    backdrop-filter: blur(10px);
    background-color: rgba(30,30,30,0.9);
    color: white;
    border-radius: 12px 0 0 12px;
}
.dialog-content {
    display: flex;
    flex-direction: row;
    gap: 25px;
    align-items: flex-start;
    padding: 25px;
    min-width: 600px;
}

.dialog-img-container {
    flex-shrink: 0;
}

.dialog-img {
    width: 280px;
    border-radius: 10px;
    object-fit: cover;
}

.dialog-info {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    flex: 1;
}

.titulo-producto {
    font-weight: 600;
}

.precio-producto {
    font-weight: bold;
}

.dialog-btn {
    margin-top: auto;
    align-self: flex-start;
}

.close-btn {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 10;
}

.tienda-card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    min-height: 360px;
    margin-bottom: 20px; /* separación entre cards */
}

/* Espaciado entre las cards */
.mud-grid-item {
    padding: 12px; /* espacio interno entre columnas */
}

/* Espacio y sombra más suaves */
.tienda-card {
    transition: transform 0.2s ease, box-shadow 0.3s ease;
    border-radius: 12px;
    overflow: hidden;
}

    /* Hover con efecto leve */
    .tienda-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
    }

/* Imagen superior */
.mud-card-media {
    border-bottom: 1px solid #e5e5e5;
}

/* Contenido de la card */
.mud-card-content {
    padding: 16px;
}

/* Fondo general más limpio */
body {
    background-color: #f6f8fb;
}

.tienda-card {
    transition: transform 0.2s ease-in-out;
}
.tienda-card:hover {
    transform: scale(1.02);
}
.close-btn {
    position: absolute !important;
    top: 8px !important;
    right: 8px !important;
    z-index: 10;
}
.dialog-content {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.dialog-img-container {
    width: 100%;
    max-width: 300px;
}
.dialog-img {
    width: 100%;
    height: auto;
    border-radius: 8px;
}


.product-detail-dialog {
    max-height: 90vh!important;
    overflow-y: auto;
}

.product-image-container {
    width: 100% !important; 
}

.product-content {
    position: relative !important;
}


/* Dialog Product Container */
.product-dialog {
    width: 100% !important;
    max-width: 900px !important;
    border-radius: 12px !important;
}

.dialog-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    padding: 30px;
    position: relative;
}

/* Close Button */
.close-btn {
    position: absolute !important;
    top: 15px !important;
    right: 15px !important;
    z-index: 10;
}

/* Sección Izquierda - Imagen */
.dialog-left-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.dialog-img-container {
    width: 100%;
    height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f5f5f5;
    border-radius: 12px;
    margin-bottom: 15px;
    overflow: hidden;
}

.dialog-img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

/* Thumbnails */
.thumbnails-container {
    display: flex;
    gap: 10px;
    width: 100%;
    justify-content: center;
}

.thumbnail {
    width: 60px;
    height: 60px;
    border: 2px solid transparent;
    border-radius: 8px;
    cursor: pointer;
    object-fit: contain;
    padding: 5px;
    background-color: #f5f5f5;
    transition: all 0.3s ease;
}

    .thumbnail:hover {
        border-color: #1976d2;
        background-color: #e3f2fd;
    }

/* Sección Derecha - Información */
.dialog-right-section {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding: 10px 0;
}

.header-section {
    display: flex;
    flex-direction: column;
}

.titulo-producto {
    line-height: 1.3;
    color: #212121;
}

/* Rating */
.rating-section {
    display: flex;
    align-items: center;
    gap: 8px;
}

    .rating-section .mud-rating {
        color: #ffc400;
    }

/* Precio */
.precio-producto {
    color: #1976d2;
    font-size: 2rem;
}

/* Color Section */
.color-section {
    padding: 15px 0;
    border-top: 1px solid #e0e0e0;
    border-bottom: 1px solid #e0e0e0;
}

.color-options {
    display: flex;
    gap: 10px;
}

.color-box {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    border: 2px solid #e0e0e0;
    cursor: pointer;
    transition: all 0.3s ease;
}

    .color-box:hover {
        border-color: #1976d2;
        transform: scale(1.1);
    }

/* Stock Section */
.stock-section {
    padding: 15px;
    background-color: #f5f5f5;
    border-radius: 8px;
}

    .stock-section .mud-numeric-field {
        max-width: 150px;
    }

/* Botones */
.dialog-btn-group {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 20px;
}

    .dialog-btn-group .mud-button {
        padding: 12px !important;
        font-size: 1rem !important;
        font-weight: 600;
        text-transform: none;
        letter-spacing: 0;
    }

    .dialog-btn-group .mud-button-filled-primary {
        background-color: #1976d2 !important;
    }

        .dialog-btn-group .mud-button-filled-primary:hover {
            background-color: #1565c0 !important;
        }

/* Responsive */
@media (max-width: 768px) {
    .dialog-content {
        grid-template-columns: 1fr;
        gap: 20px;
        padding: 20px;
    }

    .dialog-img-container {
        height: 300px;
    }

    .dialog-right-section {
        padding: 0;
    }

    .dialog-btn-group {
        margin-top: 15px;
    }
}

/* Responsive para móviles */
@media (max-width: 960px) {
    div[style*="grid-template-columns: 1fr 1fr"] {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }
}

.rating-appear {
    animation: ratingPop 0.6s ease-in-out;
    transform-origin: center;
}

@keyframes ratingPop {
    0% {
        transform: scale(0.6);
        opacity: 0;
    }

    60% {
        transform: scale(1.15);
        opacity: 1;
    }

    100% {
        transform: scale(1);
    }
}

.cursor-pointer {
    cursor: pointer;
}

.mud-rating svg {
    transition: transform 0.2s ease-in-out;
}

    .mud-rating svg:hover {
        transform: scale(1.15);
    }




    .image-zoom-container {
    position: relative;
    overflow: hidden;
}
.image-zoom-container img {
    transition: transform 0.1s ease;
}
.zoom-container img {
    pointer-events: none; /* evita fallos al mover */
    will-change: transform;
}

.dot {
    transition: background-color 0.3s ease;
}


/* Contenedor del carrusel */
.carousel-wrapper {
    position: relative;
    width: 100%;
    overflow: visible;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Viewport: oculta lo que sale del contenedor */
.carousel-viewport {
    width: 100%;
    overflow: hidden;
    border-radius: 8px;
}

/* Track: contiene todos los items y hace la animación */
.carousel-track {
    display: flex;
    transition: transform 600ms cubic-bezier(0.2, 0.8, 0.2, 1);
    will-change: transform;
}

/* Cada item ocupa 25% = 4 items por página */
.carousel-item {
    flex: 0 0 25%;
    box-sizing: border-box;
    padding: 0 10px;
    /* El translateX del track se aplica automáticamente */
}

/* Botones prev/next */
.carousel-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 20;
    background: rgba(0, 0, 0, 0.5);
    color: white;
    border: none;
    padding: 0;
    width: 48px;
    height: 48px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
}

    .carousel-btn:hover {
        background: rgba(0, 0, 0, 0.8);
        transform: translateY(-50%) scale(1.1);
    }

    .carousel-btn.prev {
        left: 16px;
    }

    .carousel-btn.next {
        right: 16px;
    }

/* Dots de navegación */
.carousel-dots {
    display: flex;
    gap: 8px;
    justify-content: center;
    align-items: center;
    margin-top: 16px;
}

.dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: rgba(25, 118, 210, 0.3);
    cursor: pointer;
    transition: all 0.3s ease;
}

    .dot:hover {
        background: rgba(25, 118, 210, 0.6);
        transform: scale(1.2);
    }

    .dot.active {
        background: #1976d2;
        transform: scale(1.3);
    }

/* RESPONSIVE: Ajusta items por página según pantalla */

/* Pantallas grandes (1200px+): 4 items */
.carousel-item {
    flex: 0 0 25%;
}

/* Pantallas medianas (900px - 1199px): 3 items */
@media (max-width: 1199px) {
    .carousel-item {
        flex: 0 0 33.333%;
    }
}

/* Pantallas pequeñas (600px - 899px): 2 items */
@media (max-width: 899px) {
    .carousel-item {
        flex: 0 0 50%;
    }
}

/* Pantallas móviles (<600px): 1 item */
@media (max-width: 599px) {
    .carousel-item {
        flex: 0 0 100%;
    }

    .carousel-btn {
        width: 40px;
        height: 40px;
    }
}
.carousel-wrapper {
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.carousel-viewport {
    width: 100%;
    overflow: hidden;
}

.carousel-track {
    display: flex;
    transition: transform 600ms cubic-bezier(0.2,0.8,0.2,1);
    will-change: transform;
}

/* cada "page" ocupa 100vw, y contiene los items */
.carousel-page {
    flex: 0 0 100vw;
    display: flex;
    justify-content: center;
    box-sizing: border-box;
    padding: 0 12px;
}

.page-items {
    display: flex;
    gap: 18px;
    align-items: flex-start;
    width: 100%;
    max-width: 1200px;
}

/* items dentro de la page: 4 por vista → 25% */
.carousel-item {
    flex: 0 0 25%;
    box-sizing: border-box;
    padding: 0 6px;
}

/* responsive: ajustar número de items por página (opcional) */
@media (max-width:1199px) {
    .carousel-item {
        flex: 0 0 33.3333%;
    }
}
/* 3 */
@media (max-width:899px) {
    .carousel-item {
        flex: 0 0 50%;
    }
}
/* 2 */
@media (max-width:599px) {
    .carousel-item {
        flex: 0 0 100%;
    }
}
/* 1 */

/* botones/dots like before */
.carousel-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 20;
}

    .carousel-btn.prev {
        left: 16px;
    }

    .carousel-btn.next {
        right: 16px;
    }

.dot {
    width: 12px;
    height: 12px;
    border-radius: 6px;
    background: rgba(25,118,210,0.3);
}

    .dot.active {
        background: #1976d2;
        transform: scale(1.2);
    }

/* Shared editorial surfaces for content-heavy pages */
.site-shell {
    padding: clamp(2rem, 5vw, 4rem) clamp(1rem, 3.5vw, 2.5rem);
}

.site-shell--compact {
    padding-top: 0;
}

.site-shell__inner {
    width: min(1180px, 100%);
    margin: 0 auto;
}

.site-card {
    position: relative;
    overflow: hidden;
    border-radius: 30px;
    border: 1px solid rgba(23, 54, 78, 0.1);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(246, 249, 251, 0.98));
    box-shadow: 0 22px 54px rgba(16, 43, 67, 0.1);
    backdrop-filter: blur(14px);
}

.site-card--soft {
    background:
        radial-gradient(circle at top right, rgba(119, 199, 155, 0.16), transparent 28%),
        linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(232, 241, 246, 0.98));
}

.site-media-card {
    position: relative;
    overflow: hidden;
    border-radius: 30px;
    border: 1px solid rgba(23, 54, 78, 0.1);
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.88), rgba(222, 233, 240, 0.96));
    box-shadow: 0 24px 56px rgba(16, 43, 67, 0.12);
}

.site-prose {
    color: #4e6474;
    font-family: "Segoe UI", "Trebuchet MS", sans-serif;
    font-size: clamp(1rem, 1.2vw, 1.08rem);
    line-height: 1.85;
    letter-spacing: 0.01em;
}

.site-prose--wide {
    /*max-width: 74ch;*/
}

.site-link-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    min-height: 3.25rem;
    padding: 0.7rem 1.15rem;
    border-radius: 999px;
    border: 1px solid rgba(43, 98, 179, 0.18);
    background: rgba(255, 255, 255, 0.92);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
    font-family: "Segoe UI", "Trebuchet MS", sans-serif;
    font-size: 0.96rem;
    font-weight: 600;
    transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease, background-color 200ms ease;
}

.site-link-chip:hover {
    transform: translateY(-2px);
    border-color: rgba(119, 199, 155, 0.46);
    background: #ffffff;
    box-shadow: 0 12px 28px rgba(16, 43, 67, 0.1);
}

.site-loading-panel {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 12rem;
    padding: 1.5rem;
    border-radius: 30px;
    border: 1px dashed rgba(23, 54, 78, 0.18);
    background: rgba(255, 255, 255, 0.76);
}

.site-loading-panel .mud-progress-linear {
    width: min(28rem, 100%);
}

@media (max-width: 768px) {
    .site-shell {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .site-card,
    .site-media-card,
    .site-loading-panel {
        border-radius: 24px;
    }

    .site-link-chip {
        width: 100%;
        justify-content: center;
    }
}

/* Shared layouts for editorial and magazine pages */
.editorial-page {
    background:
        radial-gradient(circle at top left, rgba(43, 98, 179, 0.08), transparent 24%),
        radial-gradient(circle at top right, rgba(119, 199, 155, 0.14), transparent 28%),
        linear-gradient(180deg, #f8fbfd 0%, #eef5f8 100%);
}

.editorial-hero-shell {
    padding-top: clamp(5.4rem, 8vw, 7rem);
    padding-bottom: clamp(2rem, 4vw, 3rem);
}

.editorial-hero {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(1.4rem, 3vw, 2.45rem);
    align-items: stretch;
}

.editorial-hero__content {
    display: grid;
    gap: 1rem;
    align-content: start;
}

.editorial-hero__badge {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    width: fit-content;
    min-height: 2.35rem;
    padding: 0.45rem 0.9rem;
    border-radius: 999px;
    border: 1px solid rgba(43, 98, 179, 0.16);
    background: rgba(43, 98, 179, 0.08);
    color: #2b62b3;
    font-family: "Segoe UI", "Trebuchet MS", sans-serif;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.editorial-hero__title {
    margin: 0;
    color: #16344c;
    font-family: "Cambria", Georgia, serif;
    font-size: clamp(2.35rem, 4.8vw, 4.1rem);
    font-weight: 700;
    letter-spacing: -0.05em;
    line-height: 0.98;
}

.editorial-hero__lead {
    margin: 0;
    /*max-width: 70ch;*/
    color: #51697b;
    font-family: "Segoe UI", "Trebuchet MS", sans-serif;
    font-size: clamp(1rem, 1.4vw, 1.08rem);
    line-height: 1.85;
}

.editorial-hero__aside {
    display: grid;
    gap: 0.75rem;
    align-content: start;
    padding: 1.45rem;
}

.editorial-hero__aside-icon {
    display: inline-grid;
    place-items: center;
    width: 3.45rem;
    height: 3.45rem;
    border-radius: 22px;
    background: rgba(43, 98, 179, 0.12);
    color: #2b62b3;
}

.editorial-hero__aside-label,
.editorial-hero__aside-copy {
    margin: 0;
    color: #51697b;
    font-family: "Segoe UI", "Trebuchet MS", sans-serif;
}

.editorial-hero__aside-label {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.editorial-hero__aside-value {
    margin: 0;
    color: #16344c;
    font-family: "Cambria", Georgia, serif;
    font-size: clamp(2.15rem, 4.2vw, 3rem);
    font-weight: 700;
    line-height: 1;
}

.editorial-hero__aside-copy {
    line-height: 1.75;
}

.editorial-content-shell {
    padding-top: 0;
}

.editorial-section-header {
    max-width: 54rem;
    display: grid;
    gap: 0.7rem;
    margin-bottom: 1.25rem;
}

.editorial-section-header__eyebrow {
    margin: 0;
    color: #2b62b3;
    font-family: "Segoe UI", "Trebuchet MS", sans-serif;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.editorial-section-header__title {
    margin: 0;
    color: #16344c;
    font-family: "Cambria", Georgia, serif;
    font-size: clamp(1.95rem, 3.4vw, 2.9rem);
    font-weight: 700;
    letter-spacing: -0.05em;
    line-height: 1;
}

.editorial-section-header__lead {
    margin: 0;
    color: #51697b;
    font-family: "Segoe UI", "Trebuchet MS", sans-serif;
    line-height: 1.8;
}

.editorial-copy-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(18rem, 0.7fr);
    gap: 1.3rem;
    align-items: start;
}

.editorial-stack {
    display: grid;
    gap: 1.3rem;
}

.editorial-copy-card,
.editorial-note-card {
    display: grid;
    gap: 1rem;
    padding: clamp(1.35rem, 2.6vw, 1.8rem);
}

.editorial-copy-card__header {
    display: grid;
    gap: 0.55rem;
}

.editorial-copy-card__eyebrow {
    margin: 0;
    color: #2b62b3;
    font-family: "Segoe UI", "Trebuchet MS", sans-serif;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.editorial-copy-card__title,
.editorial-note-card__title {
    margin: 0;
    color: #16344c;
    font-family: "Cambria", Georgia, serif;
    font-size: clamp(1.45rem, 2.4vw, 2rem);
    font-weight: 700;
    line-height: 1.15;
}

.editorial-copy-card__body {
    display: grid;
    gap: 1rem;
}

.editorial-copy-card__segment {
    margin: 0;
}

.editorial-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem;
}

.editorial-empty {
    display: grid;
    justify-items: center;
    gap: 0.7rem;
    padding: 2rem;
    color: #51697b;
    text-align: center;
}

@media (max-width: 1040px) {
    .editorial-hero,
    .editorial-copy-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .editorial-hero__aside,
    .editorial-copy-card,
    .editorial-note-card {
        padding: 1.2rem;
    }
}