/* ==========================================================
   PROMOCOMBO — CATÁLOGO DE PRODUCTOS RC31.2
   Componente único, legible y sin estilos heredados
   ========================================================== */

/* ----------------------------------------------------------
   1. ESTRUCTURA DE CATEGORÍAS
   ---------------------------------------------------------- */

.catalogoCategoria {
    width: min(1180px, calc(100% - 32px));
    margin: 0 auto 42px;
}

.catalogoCategoria[hidden] {
    display: none !important;
}

.catalogoCategoria__cabecera {
    margin: 0 0 18px;
}

.catalogoCategoria__titulo {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    color: #151515;
    font-size: clamp(1.25rem, 1.55vw, 1.55rem);
    font-weight: 900;
    line-height: 1.1;
}

.catalogoCategoria__titulo::before {
    content: "";
    width: 6px;
    height: 38px;
    flex: 0 0 6px;
    border-radius: 999px;
    background: #e3131b;
}

.catalogoCategoria__icono {
    line-height: 1;
}

.catalogoProductosGrid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
    align-items: stretch;
    width: 100%;
    margin: 0;
    padding: 0;
    overflow: visible;
}

/* ----------------------------------------------------------
   2. TARJETA ÚNICA DE PRODUCTO
   ---------------------------------------------------------- */

.productoCard {
    position: relative;
    display: grid;
    grid-template-rows: auto 1fr;
    width: 100%;
    min-width: 0;
    height: 410px;
    margin: 0;
    padding: 10px;
    overflow: hidden;
    border: 1px solid #e7e8eb;
    border-radius: 22px;
    background: #ffffff;
    box-shadow: 0 8px 26px rgba(21, 29, 40, 0.08);
    color: #171717;
    transform: none;
}

.productoCard--noDisponible {
    opacity: 0.65;
}

/* ----------------------------------------------------------
   3. IMAGEN UNIFORME
   ---------------------------------------------------------- */

.productoCard__imagenMarco {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    min-height: 0;
    overflow: hidden;
    border-radius: 16px;
    background: #f2f3f5;
}

/* Distintivo de identidad para promociones.
   Se genera desde el código de la promoción (PROMO 1, PROMO 2, etc.),
   por lo que también se aplica automáticamente a promociones nuevas. */
.productoCard__promoBadge {
    position: absolute;
    left: 10px;
    bottom: 10px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 5px 11px;
    border: 1px solid rgba(255, 255, 255, 0.72);
    border-radius: 999px;
    background: rgba(183, 13, 24, 0.94);
    box-shadow: 0 5px 14px rgba(53, 7, 10, 0.22);
    color: #ffffff;
    font-size: 12px;
    font-weight: 900;
    line-height: 1;
    letter-spacing: 0.04em;
    text-transform: none;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}

.productoCard__imagen {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* ----------------------------------------------------------
   4. CONTENIDO INTERNO
   ---------------------------------------------------------- */

.productoCard__contenido {
    display: grid;
    grid-template-rows: minmax(44px, auto) 38px 48px;
    gap: 8px;
    min-height: 0;
    padding: 12px 2px 0;
}

.productoCard__nombre {
    display: -webkit-box;
    align-self: start;
    min-width: 0;
    margin: 0;
    overflow: hidden;
    color: #1a1a1a;
    font-size: 16px;
    font-weight: 800;
    line-height: 1.28;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.productoCard__precio {
    align-self: center;
    min-width: 0;
    margin: 0;
    color: #d70e18;
    font-size: 23px;
    font-weight: 900;
    line-height: 1;
    white-space: nowrap;
}

.productoCard__precio--consultar {
    font-size: 17px;
    white-space: normal;
}

/* ----------------------------------------------------------
   5. CONTROL DE CANTIDAD NATIVO
   ---------------------------------------------------------- */

.productoCard__cantidad {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    width: 100%;
    height: 48px;
    overflow: hidden;
    border: 1px solid #dfe1e5;
    border-radius: 15px;
    background: #ffffff;
}

.productoCard__botonCantidad,
.productoCard__valorCantidad {
    display: grid;
    place-items: center;
    min-width: 0;
    height: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    border-right: 1px solid #e4e5e8;
    background: transparent;
    font: inherit;
    font-size: 24px;
    font-weight: 900;
    line-height: 1;
}

.productoCard__valorCantidad {
    color: #171717;
    font-size: 18px;
}

.productoCard__botonCantidad:last-child {
    border-right: 0;
}

.productoCard__botonCantidad--menos {
    color: #c1c4c9 !important;
    background: transparent !important;
    width: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

.productoCard__botonCantidad--mas {
    color: #dc101b !important;
    background: transparent !important;
    width: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    cursor: pointer;
}

.productoCard__botonCantidad:disabled {
    cursor: not-allowed;
    opacity: 0.42;
}

.productoCard__botonCantidad:not(:disabled):active {
    background: #fff1f2;
    transform: scale(0.94);
}

/* ----------------------------------------------------------
   6. TABLET
   ---------------------------------------------------------- */

@media (max-width: 1100px) {
    .catalogoProductosGrid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* ----------------------------------------------------------
   7. CELULAR
   ---------------------------------------------------------- */

@media (max-width: 768px) {
    .productoCard__promoBadge {
        left: 8px;
        bottom: 8px;
        min-height: 25px;
        padding: 4px 9px;
        font-size: 11px;
    }
    .catalogoCategoria {
        width: calc(100% - 28px);
        margin-bottom: 28px;
    }

    .catalogoCategoria__cabecera {
        margin-bottom: 14px;
    }

    .catalogoCategoria__titulo {
        gap: 7px;
        font-size: 1.15rem;
    }

    .catalogoCategoria__titulo::before {
        width: 5px;
        height: 25px;
        flex-basis: 5px;
    }

    .catalogoProductosGrid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }

    .productoCard {
        height: 350px;
        padding: 8px;
        border-radius: 18px;
        box-shadow: 0 6px 18px rgba(21, 29, 40, 0.07);
    }

    .productoCard__imagenMarco {
        border-radius: 14px;
    }

    .productoCard__contenido {
        grid-template-rows: 42px 34px 44px;
        gap: 7px;
        padding-top: 10px;
    }

    .productoCard__nombre {
        font-size: 14px;
    }

    .productoCard__precio {
        font-size: 20px;
    }

    .productoCard__precio--consultar {
        font-size: 15px;
    }

    .productoCard__cantidad {
        height: 44px;
        border-radius: 13px;
    }

    .productoCard__botonCantidad {
        font-size: 22px;
    }

    .productoCard__valorCantidad {
        font-size: 17px;
    }
}

/* ----------------------------------------------------------
   8. CELULARES ANGOSTOS
   ---------------------------------------------------------- */

@media (max-width: 380px) {
    .catalogoCategoria {
        width: calc(100% - 20px);
    }

    .catalogoProductosGrid {
        gap: 9px;
    }

    .productoCard {
        height: 326px;
        padding: 7px;
    }

    .productoCard__contenido {
        grid-template-rows: 38px 31px 42px;
        gap: 6px;
    }

    .productoCard__nombre {
        font-size: 13px;
    }

    .productoCard__precio {
        font-size: 18px;
    }

    .productoCard__precio--consultar {
        font-size: 14px;
    }
}


/* ==========================================================
   RC31.2 — AJUSTES FINALES DE LEGIBILIDAD Y CONTROLES
   ========================================================== */

.catalogoCategoria__icono {
    font-size: 0.95em;
}

.productoCard .productoCard__botonCantidad {
    display: grid !important;
    place-items: center !important;
    position: static !important;
    inset: auto !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
}

.productoCard .productoCard__botonCantidad--mas::before,
.productoCard .productoCard__botonCantidad--mas::after,
.productoCard .productoCard__botonCantidad--menos::before,
.productoCard .productoCard__botonCantidad--menos::after {
    content: none !important;
}

@media (max-width: 768px) {
    .catalogoCategoria__titulo {
        font-size: 1.15rem;
    }

    .catalogoCategoria__icono {
        font-size: 1rem;
    }
}

/* ----------------------------------------------------------
   RC31.2 — CONTROL DE CANTIDAD MÁS COMPACTO
   Mantiene intacta la lógica + / − y reduce solo el ancho visual.
   ---------------------------------------------------------- */
.productoCard__cantidad {
    width: 88%;
    justify-self: center;
}

@media (max-width: 520px) {
    .productoCard__cantidad {
        width: 86%;
    }
}

/* ----------------------------------------------------------
   RC31.3 — TARJETAS MÁS COMPACTAS EN ALTURA
   Reduce únicamente la zona inferior (nombre/precio/cantidad).
   La fotografía conserva su tamaño y proporción 1:1.
   Se aplica a todas las tarjetas del catálogo móvil.
   ---------------------------------------------------------- */
@media (max-width: 768px) {
    .productoCard {
        height: 318px;
    }

    .productoCard__contenido {
        grid-template-rows: 38px 30px 40px;
        gap: 5px;
        padding-top: 7px;
    }

    .productoCard__cantidad {
        height: 40px;
    }
}

@media (max-width: 380px) {
    .productoCard {
        height: 300px;
    }

    .productoCard__contenido {
        grid-template-rows: 36px 29px 38px;
        gap: 4px;
        padding-top: 6px;
    }

    .productoCard__cantidad {
        height: 38px;
    }
}

/* ==========================================================
   RC31.4 — FOTOS DE TARJETAS +20%
   Aumenta únicamente el área visible de imagen del catálogo.
   Mantiene dos columnas, controles, tipografías y lógica.
   ========================================================== */
.productoCard {
    height: 460px;
}

.productoCard__imagenMarco {
    aspect-ratio: 5 / 6;
}

@media (max-width: 700px) {
    .productoCard {
        height: 395px;
    }
}

/* ==========================================================
   RC31.5 — FOTOS DE TARJETAS +10% ADICIONAL
   Incrementa el área visible de imagen sobre RC31.4.
   Mantiene dos columnas, controles, tipografías y lógica.
   ========================================================== */
.productoCard {
    height: 492px;
}

.productoCard__imagenMarco {
    aspect-ratio: 5 / 6.6;
}

@media (max-width: 700px) {
    .productoCard {
        height: 422px;
    }
}


/* =====================================================
   RC31.6 — SINCRONIZACIÓN DE CANTIDAD Y AVISO DEL CARRITO
   1. El número de la tarjeta se actualiza al sumar/restar.
   2. La confirmación aparece junto al carrito durante 2 s.
   3. El aviso es visualmente liviano y no tapa el catálogo.
   ===================================================== */













@media (max-width: 420px) {
    
}


/* ==========================================================
   RC31.8 — TARJETA COMPACTA + FOTO GRANDE
   Base funcional: RC31.7
   Recupera la altura compacta de RC31.3 conservando fotos grandes.
   ========================================================== */
@media (max-width: 768px) {
    .productoCard { height: 318px; padding: 7px; grid-template-rows: minmax(0, 1fr) auto; }
    .productoCard__imagenMarco { width: 100%; height: 100%; min-height: 0; aspect-ratio: auto; border-radius: 15px; }
    .productoCard__contenido { grid-template-rows: 36px 28px 38px; gap: 4px; padding: 6px 1px 0; }
    .productoCard__cantidad { height: 38px; }
}
@media (max-width: 380px) {
    .productoCard { height: 300px; padding: 6px; }
    .productoCard__contenido { grid-template-rows: 34px 27px 36px; gap: 3px; padding-top: 5px; }
    .productoCard__cantidad { height: 36px; }
}

/* ==========================================================
   RC31.9 — EXPERIENCIA WEB Y TABLET NORMALIZADA
   Aplica el componente de tarjeta limpio también en pantallas
   grandes, sin modificar las medidas aprobadas para celular.
   ========================================================== */

/* ----------------------------------------------------------
   1. ESCRITORIO — CONTENEDOR Y GRILLA
   ---------------------------------------------------------- */
@media (min-width: 1101px) {
    .catalogoCategoria {
        width: min(1280px, calc(100% - 64px));
        margin: 0 auto 48px;
    }

    .catalogoCategoria__cabecera {
        margin-bottom: 20px;
    }

    .catalogoCategoria__titulo {
        font-size: 1.55rem;
    }

    .catalogoProductosGrid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 22px;
    }

    .productoCard {
        height: 430px;
        padding: 11px;
        border-radius: 22px;
    }

    .productoCard__imagenMarco {
        height: 270px;
        aspect-ratio: auto;
        border-radius: 16px;
    }

    .productoCard__contenido {
        grid-template-rows: 46px 36px 44px;
        gap: 7px;
        padding: 10px 3px 0;
    }

    .productoCard__nombre {
        font-size: 16px;
    }

    .productoCard__precio {
        font-size: 22px;
    }

    .productoCard__cantidad {
        width: 82%;
        height: 44px;
    }
}

/* ----------------------------------------------------------
   2. ESCRITORIOS MUY ANCHOS
   ---------------------------------------------------------- */
@media (min-width: 1500px) {
    .catalogoCategoria {
        width: min(1420px, calc(100% - 80px));
    }

    .catalogoProductosGrid {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }

    .productoCard {
        height: 420px;
    }

    .productoCard__imagenMarco {
        height: 258px;
    }
}

/* ----------------------------------------------------------
   3. TABLET HORIZONTAL Y NOTEBOOKS PEQUEÑAS
   ---------------------------------------------------------- */
@media (min-width: 769px) and (max-width: 1100px) {
    .catalogoCategoria {
        width: min(980px, calc(100% - 40px));
        margin-bottom: 40px;
    }

    .catalogoProductosGrid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 18px;
    }

    .productoCard {
        height: 405px;
        padding: 10px;
    }

    .productoCard__imagenMarco {
        height: 246px;
        aspect-ratio: auto;
    }

    .productoCard__contenido {
        grid-template-rows: 43px 34px 43px;
        gap: 6px;
        padding-top: 9px;
    }

    .productoCard__cantidad {
        width: 84%;
        height: 43px;
    }
}

/* ----------------------------------------------------------
   4. CONSISTENCIA VISUAL WEB
   ---------------------------------------------------------- */
@media (min-width: 769px) {
    .productoCard__imagen {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
    }

    .productoCard__nombre,
    .productoCard__precio {
        max-width: 100%;
        overflow: hidden;
    }

    .productoCard__cantidad {
        align-self: end;
        justify-self: center;
    }

    .productoCard__botonCantidad,
    .productoCard__valorCantidad {
        min-width: 0;
    }
}

/* ==========================================================
   RC31.10 — CORRECCIÓN ESTRUCTURAL REAL PARA WEB Y TABLET
   Separa el contenedor de categorías de la grilla de productos.
   Evita que cada categoría sea tratada como una tarjeta angosta.
   ========================================================== */

@media (min-width: 769px) {
    /* 1. El contenedor general apila categorías verticalmente. */
    body #contenedorPromos {
        display: block !important;
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 0 72px !important;
        overflow: visible !important;
    }

    /* 2. Cada categoría recupera todo el ancho disponible. */
    body #contenedorPromos > .categoriaProductos.catalogoCategoria {
        display: block !important;
        width: min(1280px, calc(100% - 48px)) !important;
        max-width: 1280px !important;
        min-width: 0 !important;
        margin: 34px auto 52px !important;
        padding: 0 !important;
        overflow: visible !important;
    }

    body #contenedorPromos > .categoriaProductos.catalogoCategoria[hidden] {
        display: none !important;
    }

    /* 3. Cabecera limpia y proporcionada. */
    body .catalogoCategoria__cabecera {
        display: block !important;
        width: 100% !important;
        margin: 0 0 18px !important;
        padding: 0 !important;
    }

    body .catalogoCategoria__titulo {
        display: flex !important;
        align-items: center !important;
        gap: 9px !important;
        width: auto !important;
        margin: 0 !important;
        color: #17191c !important;
        font-size: 24px !important;
        font-weight: 900 !important;
        line-height: 1.15 !important;
        letter-spacing: -0.025em !important;
        white-space: normal !important;
    }

    body .catalogoCategoria__titulo::before {
        display: block !important;
        width: 5px !important;
        height: 30px !important;
        flex: 0 0 5px !important;
        background: #e3131b !important;
    }

    body .catalogoCategoria__icono {
        font-size: 21px !important;
        line-height: 1 !important;
    }

    /* 4. Solo los productos forman una grilla. */
    body .catalogoProductosGrid {
        display: grid !important;
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        grid-auto-flow: row !important;
        align-items: stretch !important;
        gap: 20px !important;
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: visible !important;
        transform: none !important;
    }

    /* 5. Tarjetas web uniformes, sin herencias del carrusel viejo. */
    body .catalogoProductosGrid > .productoCard {
        position: relative !important;
        display: grid !important;
        grid-template-rows: 238px 1fr !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        height: 390px !important;
        min-height: 390px !important;
        margin: 0 !important;
        padding: 10px !important;
        overflow: hidden !important;
        border: 1px solid #e5e7eb !important;
        border-radius: 20px !important;
        background: #fff !important;
        box-shadow: 0 10px 28px rgba(20, 27, 38, .08) !important;
        transform: none !important;
    }

    body .productoCard__imagenMarco {
        width: 100% !important;
        height: 238px !important;
        min-height: 238px !important;
        aspect-ratio: auto !important;
        overflow: hidden !important;
        border-radius: 15px !important;
    }

    body .productoCard__imagen {
        display: block !important;
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        object-position: center !important;
    }

    body .productoCard__contenido {
        display: grid !important;
        grid-template-rows: 42px 32px 42px !important;
        gap: 5px !important;
        min-height: 0 !important;
        padding: 8px 2px 0 !important;
    }

    body .productoCard__nombre {
        margin: 0 !important;
        color: #1a1a1a !important;
        font-size: 15px !important;
        line-height: 1.25 !important;
        font-weight: 850 !important;
    }

    body .productoCard__precio {
        margin: 0 !important;
        color: #d70e18 !important;
        font-size: 21px !important;
        line-height: 1 !important;
        font-weight: 900 !important;
    }

    body .productoCard__precio--consultar {
        font-size: 15px !important;
    }

    body .productoCard__cantidad {
        width: 82% !important;
        height: 42px !important;
        justify-self: center !important;
        align-self: end !important;
    }
}

@media (min-width: 769px) and (max-width: 1100px) {
    body #contenedorPromos > .categoriaProductos.catalogoCategoria {
        width: min(960px, calc(100% - 36px)) !important;
    }

    body .catalogoProductosGrid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 17px !important;
    }

    body .catalogoProductosGrid > .productoCard {
        grid-template-rows: 220px 1fr !important;
        height: 370px !important;
        min-height: 370px !important;
    }

    body .productoCard__imagenMarco {
        height: 220px !important;
        min-height: 220px !important;
    }
}

@media (min-width: 1500px) {
    body #contenedorPromos > .categoriaProductos.catalogoCategoria {
        width: min(1420px, calc(100% - 64px)) !important;
        max-width: 1420px !important;
    }

    body .catalogoProductosGrid {
        grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    }
}

/* ==========================================================
   RC31.11 — CARRITO Y PANELES LATERALES NORMALIZADOS EN WEB
   Corrige la zona derecha sin modificar las tarjetas.
   ========================================================== */

@media (min-width: 769px) {
    html,
    body {
        overflow-x: clip !important;
    }

    /* Botón flotante del carrito: compacto y sin ocupar una franja lateral. */
    body #carrito {
        position: fixed !important;
        top: 18px !important;
        right: 22px !important;
        left: auto !important;
        width: auto !important;
        min-width: 76px !important;
        max-width: 110px !important;
        height: 48px !important;
        margin: 0 !important;
        padding: 0 16px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
        border-radius: 999px !important;
        overflow: visible !important;
        white-space: nowrap !important;
        z-index: 21020 !important;
        transform: none !important;
    }

    body #carrito:hover {
        transform: translateY(-2px) !important;
    }

    /* Los paneles cerrados salen completamente de la pantalla.
       Se evita la franja negra visible en el borde derecho. */
    body #panelCarrito,
    body #panelDatos {
        position: fixed !important;
        top: 0 !important;
        right: 0 !important;
        left: auto !important;
        width: min(420px, 92vw) !important;
        max-width: 420px !important;
        height: 100dvh !important;
        margin: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
        transform: translate3d(106%, 0, 0) !important;
        transition:
            transform .34s cubic-bezier(.22,.8,.25,1),
            visibility 0s linear .34s !important;
        will-change: transform !important;
        z-index: 22000 !important;
    }

    body #panelCarrito.abierto,
    body #panelDatos.abierto {
        visibility: visible !important;
        pointer-events: auto !important;
        transform: translate3d(0, 0, 0) !important;
        transition:
            transform .34s cubic-bezier(.22,.8,.25,1),
            visibility 0s linear 0s !important;
    }

    /* Estructura interna estable del carrito en escritorio. */
    body #panelCarrito {
        display: grid !important;
        grid-template-rows: auto minmax(0, 1fr) auto !important;
        overflow: hidden !important;
    }

    body #contenidoCarrito {
        min-height: 0 !important;
        overflow-y: auto !important;
        overscroll-behavior: contain !important;
    }

    body #footerCarrito {
        position: relative !important;
        inset: auto !important;
        width: 100% !important;
        flex: 0 0 auto !important;
    }

    /* El formulario final también queda contenido en su panel. */
    body #panelDatos {
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important;
    }

    body #panelDatos .contenidoDatos {
        min-height: 0 !important;
        overflow-y: auto !important;
        overscroll-behavior: contain !important;
    }
}

/* ==========================================================
   RC31.12 — CARRITO WEB SIN FRANJA LATERAL
   1. El botón queda dentro del ancho útil del sitio.
   2. Los paneles cerrados no ocupan ni muestran ningún píxel.
   3. Los paneles abiertos aparecen completos sobre la página.
   ========================================================== */
@media (min-width: 769px) {
    body #carrito {
        top: 18px !important;
        right: max(22px, calc((100vw - 1320px) / 2 + 22px)) !important;
        bottom: auto !important;
        width: 96px !important;
        min-width: 96px !important;
        max-width: 96px !important;
        height: 48px !important;
        padding: 0 12px !important;
        overflow: hidden !important;
    }

    body #carrito::after {
        content: none !important;
        display: none !important;
    }

    body #panelCarrito,
    body #panelDatos {
        display: none !important;
        visibility: hidden !important;
        pointer-events: none !important;
        transform: none !important;
        right: 0 !important;
    }

    body #panelCarrito.abierto {
        display: grid !important;
        visibility: visible !important;
        pointer-events: auto !important;
        grid-template-rows: auto minmax(0, 1fr) auto !important;
    }

    body #panelDatos.abierto {
        display: flex !important;
        visibility: visible !important;
        pointer-events: auto !important;
        flex-direction: column !important;
    }
}