/* =================================================================
   ESTILOS TARJETAS PRO — VERSIÓN FINAL (PRODUCCIÓN)
   -----------------------------------------------------------------
   Único archivo. No depende de JS, no toca HTML, no toca C#.
   Cero animaciones nuevas, cero blur, cero filtros caros.
   Carga DESPUÉS de EstilosMasInfo.css y de los <style> inline.

   Clases sobre las que opera (todas pre-existentes):
     .menu-item.color-default-panel        (lista)
     .product-card.color-default-panel     (grilla)
     .titulo-producto / .descripcion-producto
     .price-option / .price-badge-wrapper / .precio-monto
     .quantity-control / .increase / .decrease / input.quantity
     .comment-button / .comment-icon / .comment-text
     .badge-cantidad-minima
     .stock-status
     .mi-indicator                         (badge "Info")
     .grid-imagen-container / .lista-imagen-container
     .grid-contenido (grilla)
   ================================================================= */


/* =================================================================
   0) TOKENS LOCALES — variables internas, sin contaminar el resto
   ================================================================= */
.menu-item.color-default-panel,
.product-card.color-default-panel {
    --tp-surface: rgba(255, 255, 255, .94);
    --tp-surface-soft: rgba(255, 255, 255, .85);
    --tp-surface-softer: rgba(255, 255, 255, .70);
    --tp-border: rgba(0, 0, 0, .08);
    --tp-text: #111827;
    --tp-primary: #2563eb;
    --tp-primary-2: #1d4ed8;
    --tp-danger: #dc2626;
    --tp-success: #047857;
    --tp-radius: 12px;
    --tp-radius-sm: 8px;
    --tp-radius-pill: 999px;
    --tp-shadow-card: 0 1px 2px rgba(0,0,0,.05), 0 4px 12px rgba(0,0,0,.07), inset 0 1px 0 rgba(255,255,255,.30);
    --tp-shadow-card-hv: 0 2px 4px rgba(0,0,0,.07), 0 8px 20px rgba(0,0,0,.10), inset 0 1px 0 rgba(255,255,255,.35);
    --tp-shadow-chip: 0 1px 2px rgba(0,0,0,.06);
    --tp-text-shadow: 0 0 1px rgba(0,0,0,.55), 0 1px 2px rgba(0,0,0,.35);
    --tp-text-shadow-soft: 0 0 1px rgba(0,0,0,.40), 0 1px 2px rgba(0,0,0,.25);
    /* Reserva de espacio para el badge "Info" (.mi-indicator).
       Se usa como padding-right de la cabecera, así el título
       NUNCA queda debajo del badge. Si en mobile el badge es
       más chico, se ajusta abajo. */
    --tp-info-reserve: 72px;
}


/* =================================================================
   1) TARJETA — superficie premium
   -----------------------------------------------------------------
   - Stacking context propio (isolation:isolate): aísla cualquier
     hijo con z-index, evita fugas a tarjetas vecinas.
   - overflow: visible: dejamos que el badge "cantidad mínima"
     (top:-10/right:-10) y las sombras puedan asomarse libremente.
   - contain: layout style: SIN paint para que badges y sombras
     puedan sobresalir del card. (El partial original usaba
     `contain: content` = layout style paint, lo que recortaba
     el badge "cantidad mínima". Acá lo sobreescribimos.)
   - Borde y sombra suaves, mínimo costo de pintura.
   ================================================================= */
.menu-item.color-default-panel,
.product-card.color-default-panel {
    position: relative;
    isolation: isolate;
    overflow: visible;
    contain: layout style;
    border: 1px solid var(--tp-border) !important;
    box-shadow: var(--tp-shadow-card) !important;
    transition: box-shadow .18s ease;
}

    .menu-item.color-default-panel:hover,
    .product-card.color-default-panel:hover {
        box-shadow: var(--tp-shadow-card-hv) !important;
    }

    .menu-item.color-default-panel.disabled,
    .product-card.color-default-panel.disabled {
        opacity: .6;
    }

    /* Hijos directos por encima de cualquier overlay interno */
    .menu-item.color-default-panel > *,
    .product-card.color-default-panel > * {
        position: relative;
        z-index: 1;
    }


    /* =================================================================
   3) BADGE INFO — POSICIONAMIENTO ESTRUCTURAL POR CONTEXTO
   -----------------------------------------------------------------
   El JS / EstilosMasInfo.css lo posicionan absolute top:10 right:10
   sobre el .menu-item (lista y grilla). En LISTA con imagen, el
   badge en la esquina derecha del card podría tapar el título.

   ESTRATEGIA DEFINITIVA - DOBLE CAPA:

   CAPA UNIVERSAL (funciona en TODOS los browsers, incluido
                   Safari iOS 14):
     - GRILLA: badge sobre la imagen (anclado a .grid-imagen-container).
     - LISTA: el badge queda en su posición default (top:10 right:10).
       Reservamos padding-right en el flex superior SIEMPRE (excepto
       cuando el card está .disabled, donde EstilosMasInfo.css oculta
       el badge). Así el badge nunca tapa el título ni el stock-status.
     - El min-width:0 + flex:1 1 auto en los flex internos garantiza
       que el bloque de texto se acomode sin desbordar.

   CAPA PROGRESIVA (Safari 15.4+ / Chrome 105+, con :has()):
     - LISTA con imagen: movemos el badge a la izquierda (sobre la
       imagen). Más estético, libera el espacio para el bloque de
       texto. La regla del padding-right se cancela en este caso
       porque ya no se necesita.
     - Si :has() no se soporta, el badge queda en su posición default
       a la derecha y la CAPA UNIVERSAL garantiza que no tape nada.

   Resultado: el badge NUNCA tapa contenido en NINGÚN browser.
   ================================================================= */

    /* GRILLA — el badge va sobre la imagen. */
    .product-card.color-default-panel .grid-imagen-container {
        position: relative;
    }

        .product-card.color-default-panel .grid-imagen-container .mi-indicator {
            position: absolute !important;
            top: 8px !important;
            right: 8px !important;
        }

/* LISTA — RESERVA UNIVERSAL de padding-right en el flex superior.
   Cuando el card NO está .disabled (porque cuando está disabled,
   EstilosMasInfo.css oculta el badge con display:none).
   Esto garantiza que el badge en su posición default (top:10 right:10)
   nunca tape el título ni el stock-status, en TODOS los browsers.

   IMPORTANTE: el partial Razor envuelve el contenido del .menu-item
   en un <div> sin clase. Por eso usamos descendiente (espacio) en
   lugar de hijo directo (>). El selector matchea cualquier nivel
   de anidamiento. */
.menu-item:not(.product-card).color-default-panel:not(.disabled)
.d-flex.align-items-stretch.justify-content-between {
    padding-right: var(--tp-info-reserve);
}

.menu-item:not(.product-card).color-default-panel:not(.disabled) .stock-status {
    margin-right: var(--tp-info-reserve);
}

/* min-width:0 + flex:1 1 auto sobre los flex items para que el
   bloque de texto se contraiga sin desbordar el card padre. */
.menu-item:not(.product-card).color-default-panel
.d-flex.align-items-stretch.justify-content-between > .d-flex {
    min-width: 0;
    flex: 1 1 auto;
}

    .menu-item:not(.product-card).color-default-panel
    .d-flex.align-items-stretch.justify-content-between > .d-flex > .d-flex.flex-column {
        min-width: 0;
        flex: 1 1 auto;
    }

/* CAPA PROGRESIVA: en LISTA con imagen, movemos el badge a la
   izquierda (sobre la imagen). Más estético. Y cancelamos el
   padding-right reservado porque ya no se necesita. Si :has()
   no se soporta, todo el bloque cae en el comportamiento de la
   CAPA UNIVERSAL. */
.menu-item:not(.product-card).color-default-panel:has(.lista-imagen-container) .mi-indicator {
    left: 8px !important;
    right: auto !important;
    top: 8px !important;
}

.menu-item:not(.product-card).color-default-panel:not(.disabled):has(.lista-imagen-container)
.d-flex.align-items-stretch.justify-content-between {
    padding-right: 0;
}

.menu-item:not(.product-card).color-default-panel:not(.disabled):has(.lista-imagen-container)
.stock-status {
    margin-right: 0;
}

/* Aspecto visual pill premium (sólo override visual; no toca pos.) */
.menu-item .mi-indicator,
.product-card .mi-indicator {
    padding: 4px 10px !important;
    font-size: .68rem !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    letter-spacing: .3px !important;
    text-transform: uppercase !important;
    color: #fff !important;
    background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%) !important;
    border: 1.5px solid rgba(255, 255, 255, .9) !important;
    border-radius: var(--tp-radius-pill) !important;
    box-shadow: 0 2px 6px rgba(79, 70, 229, .35), 0 0 0 1px rgba(0, 0, 0, .04) !important;
    white-space: nowrap !important;
    z-index: 6 !important;
    /* Sólo transform (ver la nota del mismo badge en EstilosMasInfo.css):
       animar `box-shadow` repinta en el hilo principal, una vez por
       producto. */
    transition: transform .12s ease !important;
}

    .menu-item .mi-indicator > i,
    .product-card .mi-indicator > i {
        font-size: .8rem !important;
        line-height: 1 !important;
    }

    .menu-item .mi-indicator:hover,
    .product-card .mi-indicator:hover {
        box-shadow: 0 4px 10px rgba(79, 70, 229, .45), 0 0 0 1px rgba(0, 0, 0, .04) !important;
        transform: none !important;
    }

    .menu-item .mi-indicator:active,
    .product-card .mi-indicator:active {
        transform: translateY(1px) !important;
    }


/* =================================================================
   4) BOTONES + / − — universales, contraste garantizado
   ================================================================= */
.quantity-control button.decrease,
.quantity-control button.increase {
    background: #fff !important;
    color: var(--tp-text) !important;
    border: 1.5px solid #d1d5db !important;
    border-radius: var(--tp-radius-sm) !important;
    font-weight: 800 !important;
    font-size: 1rem !important;
    line-height: 1 !important;
    min-width: 32px !important;
    min-height: 32px !important;
    padding: 0 8px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .12), inset 0 -2px 0 rgba(0, 0, 0, .05) !important;
    transition: background-color .15s, border-color .15s, color .15s, transform .1s !important;
    flex-shrink: 0 !important; /* nunca se aplastan */
}

.quantity-control button.decrease {
    color: var(--tp-danger) !important;
    border-color: #fca5a5 !important;
}

.quantity-control button.increase {
    color: var(--tp-primary) !important;
    border-color: #93c5fd !important;
}

.quantity-control button.decrease:hover {
    background: #fef2f2 !important;
    border-color: #ef4444 !important;
    color: #b91c1c !important;
}

.quantity-control button.increase:hover {
    background: #eff6ff !important;
    border-color: var(--tp-primary) !important;
    color: var(--tp-primary-2) !important;
}

.quantity-control button.decrease:active,
.quantity-control button.increase:active {
    transform: translateY(1px) !important;
    box-shadow: 0 1px 1px rgba(0,0,0,.10), inset 0 1px 2px rgba(0,0,0,.10) !important;
}

.quantity-control button:disabled {
    opacity: .45 !important;
    cursor: not-allowed !important;
}

/* Input de cantidad: legible siempre */
.quantity-control input.quantity {
    background: #fff !important;
    color: var(--tp-text) !important;
    border: 1.5px solid #d1d5db !important;
    border-radius: var(--tp-radius-sm) !important;
    font-weight: 800 !important;
    text-align: center !important;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, .06) !important;
    min-height: 32px !important;
    flex-shrink: 0 !important;
}

    .quantity-control input.quantity:focus {
        border-color: var(--tp-primary) !important;
        box-shadow: 0 0 0 3px rgba(37, 99, 235, .15), inset 0 1px 2px rgba(0,0,0,.05) !important;
        outline: none !important;
    }


/* =================================================================
   5) PRICE-OPTION — flex que envuelve si no hay espacio
   -----------------------------------------------------------------
   PROBLEMA ESTRUCTURAL: en LISTA, el price-option es
       [precio_largo] ............... [- input +]
   con justify-content:space-between. Cuando el ancho del card es
   chico o el precio es largo (ej. "Individual: $20.000,00 [3+]"),
   los botones se aprietan o salen.

   SOLUCIÓN: flex-wrap:wrap + alineación correcta del wrapper de
   precio (puede crecer) y del quantity-control (mantiene su tamaño).
   Cuando no hay espacio, el quantity-control salta abajo a la
   derecha — lectura natural. Cuando sí hay espacio, queda en línea.
   ================================================================= */

.menu-item.color-default-panel .price-option,
.product-card.color-default-panel .price-option {
    flex-wrap: wrap !important;
    row-gap: 8px !important;
    column-gap: 10px !important;
}

    /* El wrapper "<b><span>...</span></b>" del precio puede crecer y
   ocupar todo el ancho si hace falta */
    .menu-item.color-default-panel .price-option > b,
    .product-card.color-default-panel .price-option > b {
        flex: 1 1 auto !important;
        min-width: 0 !important;
    }

    /* El quantity-control mantiene su tamaño, alineado al final */
    .menu-item.color-default-panel .price-option .quantity-control,
    .product-card.color-default-panel .price-option .quantity-control {
        flex: 0 0 auto !important;
        margin-left: auto !important;
    }

    /* En vertical-option (grilla), el quantity queda centrado abajo */
    .product-card.color-default-panel .price-option.vertical-option .quantity-control {
        margin-left: 0 !important;
        justify-content: center !important;
        width: 100% !important;
    }


/* =================================================================
   6) PRECIO — burbuja blanca legible sobre cualquier panel
   -----------------------------------------------------------------
   El span del precio incluye el badge "cantidad mínima" como hijo
   absolute (top:-10 right:-10). Le damos al span padding-right
   reservado SIEMPRE (ver más abajo) para que el badge nunca pise
   el texto, sin depender de :has().

   Permitimos flex-wrap dentro del wrapper para que en cards muy
   angostos (mobile a 2 columnas) el texto del precio pueda saltar
   a una segunda línea en lugar de ser tapado por el badge
   cantidad-mínima.
   ================================================================= */
.price-option .price-badge-wrapper,
.price-option > b > span {
    background: var(--tp-surface) !important;
    color: var(--tp-text) !important;
    border: 1.5px solid var(--tp-border) !important;
    border-radius: var(--tp-radius) !important;
    padding: 7px 14px !important;
    font-weight: 700 !important;
    box-shadow: var(--tp-shadow-chip) !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    flex-wrap: wrap !important; /* el contenido salta a 2 líneas si no entra */
    max-width: 100% !important; /* nunca desborda al padre */
    overflow: visible !important; /* el badge "cantidad mínima" se ve */
}

/* Reservamos padding-right en TODOS los wrappers de precio
   (no solo en los que tienen badge cantidad-mínima). Así, en
   browsers sin :has(), el padding está siempre presente y el
   badge nunca tapa el texto. El "costo" es ~14px de padding
   extra cuando no hay badge — invisible porque el wrapper se
   contrae al contenido (inline-flex).

   En browsers modernos (con :has) podríamos optimizar, pero el
   beneficio cosmético es mínimo y no vale la complejidad. Mejor
   una sola regla universal. */
.price-option .price-badge-wrapper,
.price-option > b > span {
    padding-right: 36px !important;
}

    .price-option .price-badge-wrapper > i,
    .price-option > b > span > i {
        color: var(--color-iconos-descripcion-umedida, var(--tp-primary)) !important;
        font-style: normal !important;
        font-weight: 600 !important;
        font-size: .85rem !important;
        flex-shrink: 0 !important;
    }

.price-option .precio-monto {
    color: var(--tp-text) !important;
}


/* =================================================================
   7) BADGE "CANTIDAD MÍNIMA" — anclaje seguro DENTRO del precio
   -----------------------------------------------------------------
   El HTML lo coloca dentro del .price-badge-wrapper con position
   absolute top:-10 right:-10. Mantenemos esa posición pero
   reforzamos el anillo blanco para que destaque sobre fondos
   oscuros, y el padding del wrapper (sección 6) ya garantiza
   que no solape con texto.
   ================================================================= */
.badge-cantidad-minima {
    box-shadow: 0 0 0 2.5px #fff, 0 0 0 4px rgba(0, 0, 0, .15), 0 3px 8px rgba(220, 38, 38, .45) !important;
    z-index: 4 !important; /* siempre arriba del wrapper */
}

/* En cards muy angostos (grilla mobile a 2 columnas, ~150-180px),
   el badge corre el riesgo de tapar el final del precio. Lo
   movemos un poco más arriba y reducimos su salida lateral, así
   queda en una esquina propia sin solapar texto. */
@media (max-width: 575px) {
    .card-grid .badge-cantidad-minima {
        top: -8px !important;
        right: -4px !important;
        width: 26px !important;
        height: 26px !important;
        font-size: .6rem !important;
    }
}


/* =================================================================
   8) TÍTULO + DESCRIPCIÓN — chip de lectura premium
   -----------------------------------------------------------------
   Cada uno con su chip blanco translúcido + doble text-shadow:
   funciona con cualquier color de letra que el usuario elija
   (negro, blanco, custom) en cualquier panel.
   ================================================================= */

/* GRILLA */
.product-card.color-default-panel .titulo-producto {
    background: var(--tp-surface-soft) !important;
    padding: 6px 10px !important;
    border-radius: var(--tp-radius-sm) !important;
    margin: 0 0 6px 0 !important;
    box-shadow: var(--tp-shadow-chip);
    text-shadow: var(--tp-text-shadow) !important;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.product-card.color-default-panel .descripcion-producto {
    background: var(--tp-surface-softer) !important;
    padding: 5px 10px !important;
    border-radius: var(--tp-radius-sm) !important;
    box-shadow: var(--tp-shadow-chip);
    text-shadow: var(--tp-text-shadow-soft) !important;
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* LISTA */
.menu-item:not(.product-card).color-default-panel .titulo-producto {
    background: var(--tp-surface-soft) !important;
    padding: 4px 10px !important;
    border-radius: var(--tp-radius-sm) !important;
    margin: 0 0 5px 0 !important;
    /* No tocamos `display`: el partial usa display:-webkit-box para
       el line-clamp:2; mantenerlo es clave para que el título wrappee
       en 2 líneas y el chip se acomode bien al contenido. */
    width: fit-content;
    max-width: 100%;
    box-shadow: var(--tp-shadow-chip);
    text-shadow: var(--tp-text-shadow) !important;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.menu-item:not(.product-card).color-default-panel .descripcion-producto {
    background: var(--tp-surface-softer) !important;
    padding: 4px 10px !important;
    border-radius: var(--tp-radius-sm) !important;
    /* Igual que arriba: sin tocar display, sólo width:fit-content. */
    width: fit-content;
    max-width: 100%;
    box-shadow: var(--tp-shadow-chip);
    text-shadow: var(--tp-text-shadow-soft) !important;
    overflow-wrap: anywhere;
    word-break: break-word;
}


/* =================================================================
   9) BOTÓN COMENTARIO — pill liviano premium
   ================================================================= */
.menu-item.color-default-panel .comment-button,
.product-card.color-default-panel .comment-button {
    background: var(--tp-surface) !important;
    border: 1px dashed rgba(37, 99, 235, .55) !important;
    border-radius: var(--tp-radius) !important;
    padding: 8px 12px !important;
    margin-top: 8px !important;
    box-shadow: var(--tp-shadow-chip) !important;
    transition: background-color .15s, border-color .15s, border-style .15s !important;
}

    .menu-item.color-default-panel .comment-button:hover,
    .product-card.color-default-panel .comment-button:hover {
        background: #fff !important;
        border-style: solid !important;
        border-color: var(--tp-primary) !important;
    }

    .menu-item.color-default-panel .comment-button .comment-icon,
    .product-card.color-default-panel .comment-button .comment-icon {
        color: var(--tp-primary) !important;
    }

    /* Texto del comment: el HTML viene con style="color: green/red".
   Lo mejoramos a tonos accesibles sobre fondo blanco. */
    .menu-item.color-default-panel .comment-button .comment-text span[style*="color: green"],
    .product-card.color-default-panel .comment-button .comment-text span[style*="color: green"] {
        color: var(--tp-success) !important;
    }

    .menu-item.color-default-panel .comment-button .comment-text span[style*="color: red"],
    .product-card.color-default-panel .comment-button .comment-text span[style*="color: red"] {
        color: #b91c1c !important;
    }


/* =================================================================
   10) STOCK STATUS — chip rojo legible, no se rompe
   -----------------------------------------------------------------
   - white-space: nowrap → icono y texto siempre en una línea.
   - flex-shrink: 0 (sección 3) → no se comprime.
   - margin-right (sección 3) → respeta el badge Info.
   ================================================================= */
.menu-item.color-default-panel .stock-status,
.product-card.color-default-panel .stock-status {
    background: var(--tp-surface) !important;
    color: #b91c1c !important;
    padding: 4px 10px !important;
    border-radius: var(--tp-radius-sm) !important;
    border: 1px solid rgba(220, 38, 38, .30) !important;
    box-shadow: var(--tp-shadow-chip) !important;
    font-weight: 700 !important;
    font-size: .85rem !important;
    white-space: nowrap !important;
    align-self: flex-start;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
}


/* =================================================================
   11) FORMATO LISTA — superficie de price-option pulida
   ================================================================= */
.menu-item:not(.product-card).color-default-panel .price-option {
    background: rgba(255, 255, 255, .55) !important;
    border-radius: var(--tp-radius) !important;
    padding: 8px 10px !important;
    margin-bottom: 8px !important;
    transition: background-color .15s !important;
}

    .menu-item:not(.product-card).color-default-panel .price-option:hover {
        background: rgba(255, 255, 255, .75) !important;
    }


/* =================================================================
   12) FORMATO GRILLA — superficie de price-option vertical
   ================================================================= */
.card-grid .product-card.color-default-panel .price-option.vertical-option {
    background: rgba(255, 255, 255, .58) !important;
    border: 1px solid var(--tp-border) !important;
    border-radius: var(--tp-radius) !important;
    padding: 10px 8px !important;
    transition: background-color .15s !important;
}

    .card-grid .product-card.color-default-panel .price-option.vertical-option:hover {
        background: rgba(255, 255, 255, .78) !important;
    }


/* =================================================================
   13) ESTADO SELECTED — visible en cualquier panel
   ================================================================= */
.menu-item.color-default-panel.selected,
.product-card.color-default-panel.selected {
    outline: 3px solid #10b981 !important;
    outline-offset: -1px !important;
    background-color: #d1fae5 !important;
    background-image: none !important;
}


/* =================================================================
   14) MOBILE — táctil cómodo, badge ajustado, reserva ajustada
   ================================================================= */
@media (max-width: 575px) {

    .menu-item.color-default-panel,
    .product-card.color-default-panel {
        --tp-info-reserve: 60px;
    }

    /* Botones +/- ligeramente más grandes para tap target */
    .quantity-control button.decrease,
    .quantity-control button.increase {
        min-width: 36px !important;
        min-height: 36px !important;
        font-size: 1.05rem !important;
    }

    .quantity-control input.quantity {
        min-height: 36px !important;
        width: 44px !important;
    }

    .price-option .price-badge-wrapper,
    .price-option > b > span {
        padding: 6px 12px !important;
        font-size: .9rem !important;
    }

    /* Padding-right reservado en mobile (igual que desktop, ahora
       siempre aplicado para no depender de :has). 32px alcanza con
       el badge mobile más chico (26px en right:-4). */
    .price-option .price-badge-wrapper,
    .price-option > b > span {
        padding-right: 32px !important;
    }

    /* Badge Info más compacto */
    .menu-item .mi-indicator,
    .product-card .mi-indicator {
        padding: 3px 8px !important;
        font-size: .62rem !important;
    }

        .menu-item .mi-indicator > i,
        .product-card .mi-indicator > i {
            font-size: .72rem !important;
        }

    /* Comment button compacto */
    .menu-item.color-default-panel .comment-button,
    .product-card.color-default-panel .comment-button {
        padding: 7px 10px !important;
        font-size: .82rem !important;
    }

    /* Stock status más chico */
    .menu-item.color-default-panel .stock-status,
    .product-card.color-default-panel .stock-status {
        font-size: .78rem !important;
        padding: 3px 8px !important;
    }
}


/* =================================================================
   15) MODO OSCURO DEL SO — chips se vuelven oscuros (SOLO FALLBACK)
   -----------------------------------------------------------------
   Aplica únicamente cuando dtp-contrast.js NO corrió (JS desactivado):
   con el sistema de contraste activo, la polaridad de los chips la
   deciden las clases dtp-* según los colores configurados, porque
   invertir los chips a oscuro rompía la legibilidad cuando el usuario
   había elegido letra oscura (texto oscuro sobre chip oscuro).
   ================================================================= */
@media (prefers-color-scheme: dark) {

    html:not(.dtp-contrast-ready) .menu-item.color-default-panel,
    html:not(.dtp-contrast-ready) .product-card.color-default-panel {
        --tp-surface: rgba(17, 24, 39, .92);
        --tp-surface-soft: rgba(17, 24, 39, .82);
        --tp-surface-softer: rgba(17, 24, 39, .68);
        --tp-text: #f9fafb;
        --tp-border: rgba(255, 255, 255, .14);
        --tp-text-shadow: 0 0 1px rgba(255, 255, 255, .35), 0 1px 2px rgba(255, 255, 255, .20);
        --tp-text-shadow-soft: 0 0 1px rgba(255, 255, 255, .25);
    }

    html:not(.dtp-contrast-ready) .quantity-control button.decrease,
    html:not(.dtp-contrast-ready) .quantity-control button.increase {
        background: #1f2937 !important;
        border-color: #4b5563 !important;
    }

    html:not(.dtp-contrast-ready) .quantity-control button.decrease {
        color: #fca5a5 !important;
    }

    html:not(.dtp-contrast-ready) .quantity-control button.increase {
        color: #93c5fd !important;
    }

    html:not(.dtp-contrast-ready) .quantity-control input.quantity {
        background: #111827 !important;
        color: #f9fafb !important;
        border-color: #4b5563 !important;
    }

    html:not(.dtp-contrast-ready) .price-option .price-badge-wrapper > i,
    html:not(.dtp-contrast-ready) .price-option > b > span > i {
        color: var(--color-iconos-descripcion-umedida, #93c5fd) !important;
    }

    html:not(.dtp-contrast-ready) .menu-item.color-default-panel .comment-button .comment-text span[style*="color: green"],
    html:not(.dtp-contrast-ready) .product-card.color-default-panel .comment-button .comment-text span[style*="color: green"] {
        color: #6ee7b7 !important;
    }

    html:not(.dtp-contrast-ready) .menu-item.color-default-panel .comment-button .comment-text span[style*="color: red"],
    html:not(.dtp-contrast-ready) .product-card.color-default-panel .comment-button .comment-text span[style*="color: red"] {
        color: #fca5a5 !important;
    }
}


/* =================================================================
   16) ACCESIBILIDAD — respeta reduce-motion
   ================================================================= */
@media (prefers-reduced-motion: reduce) {
    .menu-item.color-default-panel,
    .product-card.color-default-panel,
    .menu-item .mi-indicator,
    .product-card .mi-indicator,
    .quantity-control button.decrease,
    .quantity-control button.increase,
    .menu-item.color-default-panel .comment-button,
    .product-card.color-default-panel .comment-button {
        transition: none !important;
    }
}


/* =================================================================
   17) CATEGORÍAS — encabezado premium
   -----------------------------------------------------------------
   Refactor visual del header de categoría para que acompañe a las
   tarjetas. Sin tocar HTML ni JS.

   HTML real sobre el que opera (del partial Razor):
       <section id="category-N" class="mb-4">
         <div class="d-flex align-items-center justify-content-center
                     text-center" style="margin-bottom:10px;...">
           <img class="category-image img-thumbnail me-2"
                style="width:60px; height:60px; ...">
           <h1 style="@ViewBag.EstiloCategoria"><b>Nombre</b></h1>
         </div>
         ... productos ...
       </section>

   Decisiones:
   - Selector raíz: section[id^="category-"] > div.d-flex...text-center
     → exclusivo del header de categoría, NO matchea a productos.
   - Convertimos ese div en una "pill" premium: fondo blanco
     translúcido + borde sutil + sombra suave + radius coherente
     con las tarjetas (--tp-radius si está disponible, fallback 12px).
   - Ancho fit-content centrado: el chip se contrae al contenido
     (no roba ancho horizontal).
   - max-width: min(720px, calc(100% - 16px)) → en mobile respeta
     márgenes; en desktop nunca queda tan ancho que pierda jerarquía.
   - Imagen circular con anillo blanco fino + sombra sutil.
   - <h1> recibe text-shadow doble para legibilidad sobre paneles
     oscuros, SIN tocar color/font-size/font-family (esos los
     controla @ViewBag.EstiloCategoria desde el admin).
   - Wrapping seguro para nombres muy largos
     (overflow-wrap:anywhere + word-break:break-word).
   - Separación vertical entre categorías sin sumar al .mb-4 que
     ya tiene el <section>: solo refuerzo el margin-top a partir
     de la 2ª categoría con + selector universal.
   - Respeta @media (prefers-reduced-motion) heredando.

   Cero animaciones nuevas, cero blur, cero filtros, cero JS.
   ================================================================= */

/* Variables locales del header de categoría (independientes de las
   de la tarjeta — no contaminan ni dependen de ellas). */
section[id^="category-"] > .d-flex.align-items-center.justify-content-center.text-center {
    --tc-surface: rgba(255, 255, 255, .88);
    --tc-border: rgba(0, 0, 0, .08);
    --tc-shadow: 0 1px 2px rgba(0,0,0,.05), 0 4px 12px rgba(0,0,0,.07);
    --tc-radius: 14px;
    --tc-text-shadow: 0 0 1px rgba(0,0,0,.45), 0 1px 2px rgba(0,0,0,.30);
    --tc-img-ring: rgba(255, 255, 255, .9);
    /* Pill */
    background: var(--tc-surface);
    border: 1px solid var(--tc-border);
    border-radius: var(--tc-radius);
    box-shadow: var(--tc-shadow);
    padding: 10px 20px 10px 12px;
    /* Centrado y ancho controlado */
    width: fit-content;
    max-width: min(720px, calc(100% - 16px));
    margin-left: auto !important;
    margin-right: auto !important;
    /* Wrapping seguro para nombres muy largos */
    overflow-wrap: anywhere;
    word-break: break-word;
    /* Aislamiento de stacking (cero costo, evita fugas) */
    isolation: isolate;
}

    /* Imagen circular dentro del header — solo dentro del header,
   NUNCA toca .category-image de la grilla de productos. */
    section[id^="category-"] > .d-flex.align-items-center.justify-content-center.text-center > .category-image {
        border: 2px solid var(--tc-img-ring) !important;
        box-shadow: 0 0 0 1px var(--tc-border), 0 2px 6px rgba(0, 0, 0, .15);
        background-color: #fff;
        /* No tocamos width/height/border-radius: vienen del style inline
       (60x60 + border-radius:50%). */
    }

    /* <h1> del nombre de la categoría: legibilidad sobre cualquier fondo
   sin tocar color/font-size/font-family (los maneja el admin). */
    section[id^="category-"] > .d-flex.align-items-center.justify-content-center.text-center > h1 {
        margin: 0;
        line-height: 1.15;
        text-shadow: var(--tc-text-shadow);
        /* Wrapping seguro */
        overflow-wrap: anywhere;
        word-break: break-word;
        min-width: 0;
    }

/* Separación vertical reforzada a partir de la 2ª categoría
   (la 1ª usa el margin natural de la página). El .mb-4 del
   <section> ya provee el margen inferior. */
section[id^="category-"] + section[id^="category-"] {
    margin-top: 8px;
}

/* Mobile: pill más compacto, imagen un toque más chica
   (el style inline de la imagen es 60x60, dejamos eso intacto;
   solo ajustamos padding del pill). */
@media (max-width: 575px) {
    section[id^="category-"] > .d-flex.align-items-center.justify-content-center.text-center {
        padding: 6px 14px 6px 8px;
        max-width: calc(100% - 12px);
    }
}

/* Modo oscuro del SO (SOLO FALLBACK sin JS): el pill se vuelve oscuro
   translúcido. Con dtp-contrast.js activo, la polaridad del pill la
   decide la clase dtp-cat-* según el color del título de categoría
   (oscurecer el pill rompía la legibilidad con títulos oscuros). */
@media (prefers-color-scheme: dark) {
    html:not(.dtp-contrast-ready) section[id^="category-"] > .d-flex.align-items-center.justify-content-center.text-center {
        --tc-surface: rgba(17, 24, 39, .82);
        --tc-border: rgba(255, 255, 255, .14);
        --tc-text-shadow: 0 0 1px rgba(255,255,255,.30), 0 1px 2px rgba(255,255,255,.18);
        --tc-img-ring: rgba(255, 255, 255, .85);
    }
}