/* =====================================================================
   dtp-tema.css — MOTOR VISUAL MODERNO (base)
   ---------------------------------------------------------------------
   TODO lo de este archivo cuelga de .dtp-tema-v1, la clase que el layout
   pone en <html> SÓLO cuando el tenant tiene un tema guardado. Sin esa
   clase, este archivo no aplica ni una regla: el modo clásico es
   intocable por construcción, no por disciplina.

   Los valores NO están acá: llegan como custom properties en un <style>
   inline que genera TemaVisualCss a partir de enums validados. Por eso
   este archivo es el MISMO para todos los tenants (estático, cacheado 30
   días, versionado por contenido) y no hace falta generar un CSS por
   comercio.

   Reglas de la casa:
     · Sin !important salvo donde haya que ganarle a un inline heredado,
       y con el motivo escrito al lado.
     · Sólo se animan transform y opacity.
     · --dtp-motion: 0ms apaga TODO el movimiento del sistema.
     · Nada de blur permanente sobre superficies grandes.
   ===================================================================== */


/* =====================================================================
   1) PÁGINA
   ===================================================================== */

.dtp-tema-v1 body {
    background-color: var(--dtp-bg);
    background-image: var(--dtp-bg-image);
    background-attachment: scroll;
    color: var(--dtp-text);
    font-family: var(--dtp-font-ui);
    /* Ningún ancho puede provocar scroll lateral. Es criterio de cierre. */
    overflow-x: hidden;
}

/* Suaviza el renderizado de las variables en pantallas retina sin costo. */
.dtp-tema-v1 {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}


/* =====================================================================
   1b) COMPATIBILIDAD — las custom properties HEREDADAS, reasignadas
   ---------------------------------------------------------------------
   Las hojas y los bloques <style> de la tienda vienen de 2024 y pintan
   con seis variables propias que salen de "Configuración → Apariencia":

       --color-letra-productos              --color-default-panel
       --color-iconos-descripcion-umedida   --default-bg-color
       --color-fondo-titulo                 --color-texto-buscador

   (la última se declara sobre el encabezado pegajoso, ver más abajo)

   Bajo tema esas reglas seguían usando los colores CLÁSICOS. No era una
   pelea de especificidad que se pudiera ganar regla por regla: son
   decenas de reglas repartidas en cinco archivos, y cada una que se
   olvidara volvería a mezclar los dos sistemas. Se ataca en el origen —
   se reasigna el VALOR de las variables — y todas las reglas heredadas
   pasan a seguir al tema sin tocar ni una de ellas.

   Va en `body` y no en la raíz a propósito: las heredadas se declaran en
   `:root`, que es el mismo elemento donde vive `.dtp-tema-v1`, así que
   ahí competirían por orden de aparición. En `body` no hay competencia:
   es un elemento distinto, más adentro, y las custom properties heredan.

   Los valores no son los del tema "a ojo": --dtp-icon es el color
   principal AJUSTADO hasta 3:1 contra la tarjeta (ContrasteWcag), porque
   estas variables terminan pintando glifos y bordes.
   ===================================================================== */

.dtp-tema-v1 body {
    --color-letra-productos: var(--dtp-text);
    --color-iconos-descripcion-umedida: var(--dtp-icon);
    --color-default-panel: var(--dtp-surface);
    --default-bg-color: var(--dtp-bg);
    --color-fondo-titulo: var(--dtp-surface-2);
}

/* El encabezado pegajoso declara la suya sobre sí mismo, así que hay que
   alcanzarla ahí: la usa para la línea inferior y el indicador de la
   categoría activa. */
.dtp-tema-v1 .sticky-header {
    --color-texto-buscador: var(--dtp-primary);
}

/* Los tokens internos de EstilosTarjetasPro.css, misma idea.
   -----------------------------------------------------------------
   Esa hoja pinta CHIPS translúcidos detrás del nombre y de la descripción
   (--tp-surface-soft / --tp-surface-softer) con !important y desde un
   selector más específico que el del tema. Medido en Demo con el tema
   "vibrante": cada producto mostraba dos recuadros blancos que ningún
   tema pide, y la vista previa no los mostraba porque no cargaba la hoja.

   Los chips existen para el modo clásico, donde el color de letra lo elige
   el comercio y puede caer sobre cualquier fondo. Bajo tema no hacen falta:
   --dtp-text está garantizado contra --dtp-surface por el servidor. Por eso
   las tres superficies pasan a `transparent` y las sombras de texto a
   `none` — son el mismo parche de legibilidad, y tapan el diseño elegido.

   Se declaran sobre `.dtp-tema-v1 .menu-item…` (0,3,0) para ganarle a la
   declaración original, que va sobre `.menu-item…` (0,2,0). */
.dtp-tema-v1 .menu-item.color-default-panel,
.dtp-tema-v1 .product-card.color-default-panel {
    /* --tp-surface es la superficie de la TARJETA, no un chip: si se pone en
       transparent la tarjeta desaparece (verificado en Demo, se midió
       rgba(0,0,0,0)). Va al token del tema. Los dos chips de TEXTO sí van a
       transparent: son el parche de legibilidad del modo clásico. */
    --tp-surface: var(--dtp-surface);
    --tp-surface-soft: transparent;
    --tp-surface-softer: transparent;
    --tp-text: var(--dtp-text);
    --tp-border: var(--dtp-border);
    --tp-primary: var(--dtp-primary);
    --tp-primary-2: var(--dtp-primary);
    --tp-danger: var(--dtp-danger);
    --tp-success: var(--dtp-success);
    --tp-radius: var(--dtp-radius);
    --tp-radius-sm: var(--dtp-radius-sm);
    --tp-shadow-card: var(--dtp-shadow);
    --tp-shadow-card-hv: var(--dtp-shadow-hover);
    --tp-shadow-chip: none;
    --tp-text-shadow: none;
    --tp-text-shadow-soft: none;
}

/* Y los del ENCABEZADO DE CATEGORÍA, que son otra familia (`--tc-*`) declarada
   sobre su propio contenedor con especificidad (0,4,1).
   -----------------------------------------------------------------
   Pinta una píldora blanca `rgba(255,255,255,.88)` fija. Medido en la tienda
   real de Demo con el tema Premium: el título quedaba `#f2eee6` sobre esa
   píldora blanca = **1,16:1**. Ilegible, y en la pantalla completa — no en un
   caso de borde. Es el mismo defecto que el título de categoría, una capa más
   abajo, y apareció justamente porque la vista previa ya carga esta hoja. */
.dtp-tema-v1 section[id^="category-"] > .d-flex.align-items-center.justify-content-center.text-center {
    --tc-surface: var(--dtp-surface);
    --tc-border: var(--dtp-border);
    --tc-shadow: var(--dtp-shadow);
    --tc-radius: var(--dtp-radius);
    --tc-text-shadow: none;
    --tc-img-ring: var(--dtp-border);
}


/* =====================================================================
   2) FOCO — visible SIEMPRE, en todo control
   ---------------------------------------------------------------------
   :focus-visible y no :focus: el anillo aparece con teclado y no molesta
   al tocar con el dedo. --dtp-focus está calculado para dar 3:1 contra
   el fondo (WCAG 2.4.11).
   ===================================================================== */

.dtp-tema-v1 a:focus-visible,
.dtp-tema-v1 button:focus-visible,
.dtp-tema-v1 input:focus-visible,
.dtp-tema-v1 select:focus-visible,
.dtp-tema-v1 textarea:focus-visible,
.dtp-tema-v1 [tabindex]:focus-visible {
    outline: 3px solid var(--dtp-focus);
    outline-offset: 2px;
    border-radius: var(--dtp-radius-sm);
}


/* =====================================================================
   3) SUPERFICIE DE TARJETA — base común a las 8 variantes
   ---------------------------------------------------------------------
   Se aplica sobre las clases que YA existen en el partial de la tienda
   (.menu-item.color-default-panel y .product-card.color-default-panel),
   así no hay que tocar el HTML ni el JavaScript del catálogo.

   !important justificado: el partial emite
       .menu-item.color-default-panel { background: var(--color-default-panel) }
   en un <style> inline, y EstilosTarjetasPro.css fija borde y sombra
   también con !important. Bajo tema moderno el que manda es este archivo.
   ===================================================================== */

.dtp-tema-v1 .menu-item.color-default-panel,
.dtp-tema-v1 .product-card.color-default-panel {
    background: var(--dtp-surface) !important;
    color: var(--dtp-text);
    border: 1px solid var(--dtp-border) !important;
    border-radius: var(--dtp-radius) !important;
    box-shadow: var(--dtp-shadow) !important;
    padding: var(--dtp-space);
    isolation: isolate;
    /* contain: layout style (SIN paint) para que un badge que asome no se
       recorte. Mismo criterio que ya tenía EstilosTarjetasPro. */
    contain: layout style;
    /* Se anima SOLO transform. box-shadow repinta toda la superficie de la
       tarjeta en cada frame; el translateY ya transmite la elevación y el
       movimiento disimula el cambio instantáneo de la sombra. */
    transition: transform var(--dtp-motion) ease;
}

/* Elevación al puntero: transform, nunca top/margin (no dispara layout). */
@media (hover: hover) and (pointer: fine) {
    .dtp-tema-v1 .menu-item.color-default-panel:hover,
    .dtp-tema-v1 .product-card.color-default-panel:hover {
        transform: translateY(var(--dtp-lift));
        box-shadow: var(--dtp-shadow-hover) !important;
    }
}

/* Feedback táctil: en el dedo no hay hover, hay :active. */
.dtp-tema-v1 .menu-item.color-default-panel:active,
.dtp-tema-v1 .product-card.color-default-panel:active {
    transform: scale(.995);
}

.dtp-tema-v1 .menu-item.disabled,
.dtp-tema-v1 .product-card.disabled {
    opacity: .55;
}


/* =====================================================================
   4) TIPOGRAFÍA POR ROL
   ---------------------------------------------------------------------
   Tamaños con clamp() y respaldo en la línea anterior: un navegador que
   no entienda clamp() descarta la segunda declaración y usa la primera.
   Sin @supports y sin JavaScript.
   ===================================================================== */

.dtp-tema-v1 .titulo-producto,
.dtp-tema-v1 .titulo-producto b {
    font-size: 1.0625rem;
    font-size: var(--dtp-fs-producto);
    font-family: var(--dtp-font-ui);
    color: var(--dtp-text);
    line-height: 1.3;
    /* Nombres largos: cortan en 2 líneas en vez de estirar la tarjeta. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    overflow-wrap: anywhere;
}

/* !important JUSTIFICADO: el partial de la tienda emite
       <p class="text-primary mb-0 descripcion-producto">
   y Bootstrap define `.text-primary { color: var(--bs-primary) !important }`.
   Sin este !important la descripción sale azul Bootstrap en TODOS los temas,
   ignorando el color del tenant. Medido en el catálogo: contraste 2.99:1
   (por debajo de AA) antes de esta regla. Lo mismo pasa con `.text-danger` del
   estado de stock y con el `.text-primary` del ícono del chip de precio. */
.dtp-tema-v1 .descripcion-producto,
.dtp-tema-v1 .descripcion-producto > span {
    font-size: .875rem;
    color: var(--dtp-text-soft) !important;
    line-height: 1.45;
    overflow-wrap: anywhere;
    /* El partial de la tienda declara `.titulo-producto, .descripcion-producto
       { font-family: Georgia, serif; font-style: italic }` en un <style> que va
       después de esta hoja. Al título le ganaba la regla de arriba (dos clases
       contra una), pero la descripción no tenía ninguna: medido en Demo, salía
       en Georgia itálica bajo TODOS los temas, eligiera el comercio la
       tipografía que eligiera. */
    font-family: var(--dtp-font-ui);
    font-style: normal;
}

/* Y la cursiva heredada tampoco corresponde al nombre del producto: la fuente
   ya la manda el tema, la inclinación quedaba de la hoja vieja. */
.dtp-tema-v1 .titulo-producto,
.dtp-tema-v1 .titulo-producto b { font-style: normal; }

/* OJO: acá NO va `.precio-monto`. Esa clase existe en EstilosCartilla.css y en
   EstilosTarjetasPro.css pero NINGUNA vista de la tienda la emite: es CSS
   heredado sin elemento. Apuntarle era escribir una regla que nunca aplica.
   El precio real es el <b> de .price-option. */
.dtp-tema-v1 .price-option b {
    font-size: 1.125rem;
    font-size: var(--dtp-fs-precio);
    color: var(--dtp-text);
    font-variant-numeric: tabular-nums;
    /* Sin nowrap: el <b> lleva el nombre de la unidad y el importe como dos
       piezas, y con nowrap se salían de la tarjeta en 320px en vez de envolver.
       Medido: 325 sobre un viewport de 320 con "Botella 500ml" + "$1.234.567,89". */
    white-space: normal;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    min-width: 0;
    max-width: 100%;
}

.dtp-tema-v1 .hero-title {
    /* Respaldo SIN clamp(): un navegador que no lo entienda descarta la
       segunda declaración y se queda con ésta. Poner un clamp como respaldo
       no servía de nada — es justo lo que no se puede evaluar. */
    font-size: 2rem;
    font-size: var(--dtp-fs-marca);
    font-family: var(--dtp-font-brand);
    line-height: 1.1;
    overflow-wrap: anywhere;
}


/* =====================================================================
   5) CONTROLES DE CANTIDAD  (+ / −)
   ---------------------------------------------------------------------
   El punto crítico del proyecto. Las garantías, una por una:

     · SUPERFICIE PROPIA Y OPACA (--dtp-qty-bg). El botón nunca se apoya
       sobre el degradado de la tarjeta ni sobre la foto.
     · TINTA CALCULADA. --dtp-qty-plus / --dtp-qty-minus salen de
       ContrasteWcag.AsegurarContraste contra --dtp-qty-bg: 4.5:1 o más,
       elija el color que elija el comercio.
     · 44×44 px, no configurable. Es accesibilidad, no estética.
     · z-index 2 dentro de una tarjeta con isolation:isolate ⇒ el control
       queda por encima de imagen y overlay, y no se filtra a la tarjeta
       vecina.
     · flex: 0 0 auto ⇒ no se aplastan aunque el precio sea largo.
     · El contenedor no lleva overflow:hidden ⇒ no los puede recortar.
     · contain: layout en el contenedor ⇒ que aparezcan no cambia la
       altura de la tarjeta.
     · No dependen sólo del color: el signo es un glifo y el estado
       deshabilitado agrega una barra además de bajar la opacidad.

   !important: EstilosTarjetasPro.css fija estos mismos botones con
   !important en blanco fijo; bajo tema moderno mandan estas reglas.
   ===================================================================== */

.dtp-tema-v1 .quantity-control {
    display: flex;
    align-items: center;
    gap: 6px;
    contain: layout;
    /* Un <input type="text"> arrastra un ancho intrinseco de ~190px (size=20).
       Sin estos dos topes, el stepper se hacia mas ancho que la tarjeta y
       provocaba scroll horizontal en 320px. Medido: 296px dentro de un padre
       de 266px. */
    min-width: 0;
    max-width: 100%;
}

.dtp-tema-v1 .quantity-control button.decrease,
.dtp-tema-v1 .quantity-control button.increase {
    min-width: 44px !important;
    min-height: 44px !important;
    width: 44px !important;
    height: 44px !important;
    padding: 0 !important;
    flex: 0 0 auto !important;

    background: var(--dtp-qty-bg) !important;
    color: var(--dtp-qty-ink) !important;
    border: 1.5px solid var(--dtp-qty-border) !important;
    border-radius: var(--dtp-radius-sm) !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 1.125rem !important;
    font-weight: 700 !important;
    line-height: 1 !important;

    position: relative;
    z-index: 2;
    box-shadow: none !important;
    transition: transform var(--dtp-motion) ease,
                background-color var(--dtp-motion) ease,
                border-color var(--dtp-motion) ease;
}

.dtp-tema-v1 .quantity-control button.increase {
    color: var(--dtp-qty-plus) !important;
}

.dtp-tema-v1 .quantity-control button.decrease {
    color: var(--dtp-qty-minus) !important;
}

/* Pulsación: escala, que es transform puro. Sin cambio de tamaño real. */
.dtp-tema-v1 .quantity-control button.decrease:active,
.dtp-tema-v1 .quantity-control button.increase:active {
    transform: scale(.94);
}

@media (hover: hover) and (pointer: fine) {
    .dtp-tema-v1 .quantity-control button.decrease:hover,
    .dtp-tema-v1 .quantity-control button.increase:hover {
        border-color: currentColor !important;
    }
}

/* Deshabilitado: NO sólo opacidad. También una barra diagonal, para que
   se entienda sin depender de percibir el color. */
.dtp-tema-v1 .quantity-control button:disabled {
    opacity: .5 !important;
    cursor: not-allowed !important;
    transform: none !important;
}

    .dtp-tema-v1 .quantity-control button:disabled::after {
        content: "";
        position: absolute;
        inset: 8px;
        border-top: 2px solid currentColor;
        transform: rotate(-45deg);
        transform-origin: center;
        opacity: .8;
    }

.dtp-tema-v1 .quantity-control input.quantity {
    min-height: 44px !important;
    width: 52px !important;
    flex: 0 0 auto !important;
    text-align: center !important;
    font-weight: 700 !important;
    font-variant-numeric: tabular-nums;
    background: var(--dtp-qty-bg) !important;
    color: var(--dtp-qty-ink) !important;
    border: 1.5px solid var(--dtp-qty-border) !important;
    border-radius: var(--dtp-radius-sm) !important;
    box-shadow: none !important;
}

/* El bloque precio + cantidad envuelve antes que apretar los controles.
   Nunca overflow:hidden acá: recortaría los botones. */
.dtp-tema-v1 .price-option {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    overflow: visible;
}


/* =====================================================================
   6) ENCABEZADO (hero)
   ---------------------------------------------------------------------
   Relación de aspecto ESTABLE entre breakpoints y punto focal elegido
   por el comercio. La variación 2.5 → 2.3 → 2.1 es deliberadamente
   chica: es lo que hace que el recorte sea previsible en vez de mostrar
   el tercio central de la imagen en un teléfono.
   ===================================================================== */

.dtp-tema-v1 .hero-stage {
    aspect-ratio: var(--dtp-hero-ratio);
    border-radius: var(--dtp-radius);
    overflow: hidden;
}

.dtp-tema-v1 .hero-image {
    object-fit: cover;
    object-position: var(--dtp-hero-x) var(--dtp-hero-y);
}

@media (max-width: 768px) {
    .dtp-tema-v1 .hero-stage {
        aspect-ratio: var(--dtp-hero-ratio-md);
    }
}

@media (max-width: 480px) {
    .dtp-tema-v1 .hero-stage {
        aspect-ratio: var(--dtp-hero-ratio-sm);
    }
}


/* =====================================================================
   7) ÁREAS TÁCTILES Y SAFE AREAS
   ===================================================================== */

.dtp-tema-v1 .container {
    padding-left: max(15px, env(safe-area-inset-left));
    padding-right: max(15px, env(safe-area-inset-right));
}

/* Nada del tema puede provocar scroll lateral. */
.dtp-tema-v1 img,
.dtp-tema-v1 video,
.dtp-tema-v1 svg {
    max-width: 100%;
}


/* =====================================================================
   8) MOVIMIENTO REDUCIDO
   ---------------------------------------------------------------------
   Una sola variable apaga todo el sistema. Se deja además el corte
   explícito de transition/animation por si algún componente heredado
   define la suya.
   ===================================================================== */

@media (prefers-reduced-motion: reduce) {
    .dtp-tema-v1 {
        --dtp-motion: 0ms;
        --dtp-lift: 0px;
    }

    .dtp-tema-v1 *,
    .dtp-tema-v1 *::before,
    .dtp-tema-v1 *::after {
        transition-duration: 0ms !important;
        animation-duration: 0ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
    }
}


/* =====================================================================
   ============= SISTEMA VISUAL COMPLETO (Bloque B) ====================
   ---------------------------------------------------------------------
   Un tema no es un fondo distinto: coordina encabezado, hero, buscador,
   barra social, categorias, tarjetas, precios, ofertas, etiquetas,
   estados, botones, foco y movimiento.

   La ESTRUCTURA se escribe una sola vez; lo que cambia entre temas son
   los valores de las ~35 variables, mas unas pocas reglas de firma por
   preset. Por eso no hay una hoja por tema.
   ===================================================================== */


/* =====================================================================
   B1) HERO — parte del tema, no un elemento suelto
   ===================================================================== */

.dtp-tema-v1 .hero-cartilla {
    --hero-shadow: var(--dtp-shadow);
    --hero-stage-bg: var(--dtp-surface-2);
    margin-block: var(--dtp-space) var(--dtp-space-lg);
}

.dtp-tema-v1 .hero-stage {
    box-shadow: var(--dtp-shadow);
    border: 1px solid var(--dtp-border);
}

/* Overlay legible: oscurece solo el pie, que es donde puede caer texto. */
.dtp-tema-v1 .hero-image-overlay {
    background: linear-gradient(180deg, rgba(0,0,0,0) 45%, rgba(0,0,0,.42) 100%);
}

/* Encabezado SIN imagen: superficie SÓLIDA del color principal.
   -----------------------------------------------------------------
   Antes era un degradado de --dtp-primary a --dtp-bg. Se ve bien, pero
   el título se apoya sobre dos colores distintos y ninguna tinta cumple
   contra los dos: sobre un extremo cierra y sobre el otro no. Mientras
   el nombre llevaba el color inline heredado el problema estaba tapado
   (3 de los 4 tenants revisados lo tienen en #ffffff), pero eso es
   justamente lo que ya no se emite bajo tema.

   Con una superficie sólida la tinta se puede CALCULAR: --dtp-primary-ink
   sale de ContrasteWcag.AsegurarContraste contra --dtp-primary y está en
   la lista de pares críticos que revisa el lote. El filete de acento
   abajo es lo que evita que quede un bloque plano. */
.dtp-tema-v1 .hero-text-only .hero-stage {
    background: var(--dtp-primary);
    border-bottom: 3px solid var(--dtp-accent);
}

    .dtp-tema-v1 .hero-text-only .hero-title {
        color: var(--dtp-primary-ink);
    }

.dtp-tema-v1 .hero-title {
    color: var(--dtp-text);
    letter-spacing: -.01em;
}

/* Encabezado CON imagen: el nombre va sobre una foto, y una foto no tiene
   color conocido.
   -----------------------------------------------------------------
   `--dtp-text` es el color del texto sobre la TARJETA; sobre la foto no
   significa nada. Mientras el nombre llevaba el `color:#ffffff` heredado el
   problema estaba tapado — pero eso es justo lo que ya no se emite bajo tema,
   y se vio en el acto: el nombre de Demo salió #111827 sobre la parte oscura
   de su imagen, prácticamente invisible.

   El overlay que ya existía NO lo cubría: oscurece del 45 % hacia ABAJO y el
   título está ARRIBA. Nunca lo estuvo protegiendo.

   La solución es un velo propio detrás del título, y es lo que hace que el
   contraste vuelva a ser CALCULABLE en lugar de esperado: sobre el peor caso
   posible —una foto blanca pura— el velo compone a rgb(71,71,71) en el borde
   superior y a rgb(133,133,133) donde más se aclara, así que el blanco da
   entre 8,1:1 y 3,6:1. El mínimo cae sobre texto de 48 px, muy por encima del
   umbral de texto grande de WCAG (3:1). Sobre cualquier foto real es mayor. */
.dtp-tema-v1 .hero-with-image .hero-title-wrap {
    background: linear-gradient(180deg, rgba(0,0,0,.72) 0%, rgba(0,0,0,.48) 78%, rgba(0,0,0,0) 100%);
    padding: 10px 14px 26px;
    padding-inline: max(14px, env(safe-area-inset-left)) max(14px, env(safe-area-inset-right));
}

    .dtp-tema-v1 .hero-with-image .hero-title {
        color: #ffffff;
        text-shadow: 0 1px 3px rgba(0,0,0,.8);
    }

/* Firmas por preset: dos reglas, no una hoja aparte. */
.dtp-preset-premium .hero-stage { border-color: var(--dtp-accent); }
.dtp-preset-urbano .hero-stage { border-width: 2px; }


/* =====================================================================
   B2) ENCABEZADO PEGAJOSO Y BUSCADOR
   ===================================================================== */

.dtp-tema-v1 .sticky-header,
.dtp-tema-v1 .cart-search-wrap {
    background: var(--dtp-surface);
    border-color: var(--dtp-border);
    color: var(--dtp-text);
}

.dtp-tema-v1 .cart-search-wrap {
    border: 1px solid var(--dtp-border);
    border-radius: var(--dtp-radius-sm);
    box-shadow: var(--dtp-shadow);
    transition: border-color var(--dtp-motion) ease;
}

    .dtp-tema-v1 .cart-search-wrap:focus-within {
        border-color: var(--dtp-primary);
        box-shadow: 0 0 0 3px var(--dtp-primary-soft);
    }

.dtp-tema-v1 .cart-search-input {
    background: transparent;
    color: var(--dtp-text);
    min-height: 44px;
}

    .dtp-tema-v1 .cart-search-input::placeholder { color: var(--dtp-text-mute); }

.dtp-tema-v1 .cart-search-icon { color: var(--dtp-text-mute); }


/* =====================================================================
   B3) BARRA SOCIAL
   ---------------------------------------------------------------------
   Ademas del color, se corrige el desborde horizontal: el full-bleed con
   100vw incluye el ancho de la barra de scroll clasica y hacia scrollear
   el body en escritorio. 100% + el padding del contenedor da el mismo
   efecto sin ese defecto.
   ===================================================================== */

.dtp-tema-v1 .social-banner {
    width: 100% !important;
    margin-left: 0 !important;
    background: var(--dtp-surface);
    border: 1px solid var(--dtp-border);
    border-radius: var(--dtp-radius);
    color: var(--dtp-text);
    padding-inline: max(12px, env(safe-area-inset-left)) max(12px, env(safe-area-inset-right));
}

.dtp-tema-v1 .banner-redes a {
    color: var(--dtp-text);
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--dtp-radius-sm);
    transition: transform var(--dtp-motion) ease, background-color var(--dtp-motion) ease;
}

    .dtp-tema-v1 .banner-redes a:active { transform: scale(.92); }

@media (hover: hover) and (pointer: fine) {
    .dtp-tema-v1 .banner-redes a:hover {
        background: var(--dtp-primary-soft);
        color: var(--dtp-primary);
    }
}

.dtp-tema-v1 .status-button {
    background: var(--dtp-surface-2);
    color: var(--dtp-text);
    border: 1px solid var(--dtp-border);
    border-radius: var(--dtp-radius-sm);
    min-height: 44px;
}

/* Barra "suave": sin bordes duros, apoyada en el fondo. */
.dtp-bar-suave .social-banner {
    border-color: transparent;
    background: var(--dtp-surface-2);
}

/* CRISTAL: el UNICO efecto de vidrio del sistema, y solo en la barra
   (superficie chica). Con @supports y superficie opaca de respaldo: en un
   equipo sin backdrop-filter se ve una barra solida, no una rota. Nunca
   en las tarjetas, que es donde mata a la gama baja. */
@supports ((backdrop-filter: blur(10px)) or (-webkit-backdrop-filter: blur(10px))) {
    .dtp-bar-cristal .social-banner {
        background: var(--dtp-surface-2);
        -webkit-backdrop-filter: blur(10px);
        backdrop-filter: blur(10px);
        opacity: .96;
    }
}


/* =====================================================================
   B4) CATEGORIAS — 4 formatos sobre el DOM que YA existe
   ---------------------------------------------------------------------
   En movil TODOS se comportan igual: un carril con scroll-snap. Eso es
   lo que da la sensacion de app; el "formato" decide la FORMA de cada
   ficha, no el gesto.
   ===================================================================== */

.dtp-tema-v1 .categorias-circular-wrapper,
.dtp-tema-v1 .categorias-cuadro-wrapper,
.dtp-tema-v1 .pillCategorias {
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    padding-block: 4px;
}

    .dtp-tema-v1 .categorias-circular-wrapper::-webkit-scrollbar,
    .dtp-tema-v1 .categorias-cuadro-wrapper::-webkit-scrollbar { display: none; }

.dtp-tema-v1 .categoria-circular,
.dtp-tema-v1 .categoria-cuadro {
    scroll-snap-align: center;
    transition: transform var(--dtp-motion) ease;
}

    .dtp-tema-v1 .categoria-circular:active,
    .dtp-tema-v1 .categoria-cuadro:active { transform: scale(.95); }

.dtp-tema-v1 .circulo-contenedor,
.dtp-tema-v1 .cuadro-contenedor {
    background: var(--dtp-surface-2);
    border: 1px solid var(--dtp-border);
    box-shadow: var(--dtp-shadow);
    transition: border-color var(--dtp-motion) ease;
}

.dtp-tema-v1 .circulo-nombre,
.dtp-tema-v1 .cuadro-nombre,
.dtp-tema-v1 .sticky-cat-name {
    font-family: var(--dtp-font-ui);
    font-size: .8125rem;
    font-size: clamp(.75rem, 2.6vw, .875rem);
    line-height: 1.25;
    overflow-wrap: anywhere;
    /* Explícito y no heredado: es un color que se MIDE en el lote de
       pruebas. Antes lo fijaba un `style="color:…"` inline con el valor
       clásico, que le ganaba a esta hoja. */
    color: var(--dtp-text);
}

/* =====================================================================
   5b) TÍTULO DE SECCIÓN DE CATEGORÍA  (<h1 class="titulo-categoria">)
   ---------------------------------------------------------------------
   Es el encabezado que separa las secciones del catálogo. Hasta ahora el
   tema no lo trataba: lo pintaba el estilo inline heredado de la
   configuración clásica (EstiloCategoria), que por ser inline le ganaba a
   cualquier hoja. Resultado medido en Demo con el tema "vibrante":
   #d1d1d1 sobre #eef2f9 = 1.36:1 — ilegible, y sin manera de arreglarlo
   desde el diseñador.

   Con esta regla el título entra al sistema: color con contraste
   verificado, fuente de marca y la escala que el comercio elige. Es
   además lo que le da uso a --dtp-fs-categoria, que se emitía desde el
   primer día y no la consumía nadie: el selector "Tamaño de los títulos
   de categoría" del modo avanzado no hacía absolutamente nada.
   ===================================================================== */

.dtp-tema-v1 .titulo-categoria {
    /* Respaldo sin clamp() en la línea anterior, como el resto de la hoja. */
    font-size: 1.35rem;
    font-size: var(--dtp-fs-categoria);
    font-family: var(--dtp-font-brand);
    color: var(--dtp-text);
    line-height: 1.2;
    margin: 0;
    overflow-wrap: anywhere;
    /* El clásico usaba tamaños fijos (34-48 px) que a 320 px desbordaban.
       Con clamp() el título acompaña al ancho y nunca empuja el documento. */
    max-width: 100%;
}

    .dtp-tema-v1 .titulo-categoria b { font-weight: 700; }

/* Seleccionada: se distingue por borde + halo, no solo por color. */
.dtp-tema-v1 .categoria-circular.activa .circulo-contenedor,
.dtp-tema-v1 .categoria-cuadro.activa .cuadro-contenedor,
.dtp-tema-v1 .categoria-circular[aria-current="true"] .circulo-contenedor {
    border-color: var(--dtp-primary);
    box-shadow: 0 0 0 3px var(--dtp-primary-soft);
}

/* CIRCULO — el unico formato que usan hoy los 11 tenants. */
.dtp-cat-circulo .circulo-contenedor { border-radius: 50%; }

/* PILDORA — chip alargado. */
.dtp-cat-pildora .circulo-contenedor,
.dtp-cat-pildora .cuadro-contenedor { border-radius: 999px; }

.dtp-tema-v1 .pillCategorias .pill {
    background: var(--dtp-surface);
    color: var(--dtp-text);
    border: 1px solid var(--dtp-border);
    border-radius: 999px;
    padding: 10px 16px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    scroll-snap-align: center;
    transition: transform var(--dtp-motion) ease, background-color var(--dtp-motion) ease;
}

    .dtp-tema-v1 .pillCategorias .pill:active { transform: scale(.95); }

/* CUADRO */
.dtp-cat-cuadro .cuadro-contenedor { border-radius: var(--dtp-radius); }

/* CHIP CON BORDE — resuelve el caso "categoria sin imagen", que es el
   que ninguno de los tres formatos historicos manejaba bien. */
.dtp-cat-chip-borde .circulo-contenedor,
.dtp-cat-chip-borde .cuadro-contenedor {
    border-radius: var(--dtp-radius-sm);
    border: 2px solid var(--dtp-primary);
    background: transparent;
    box-shadow: none;
}

.dtp-cat-chip-borde .icono-fallback { color: var(--dtp-primary); }

.dtp-tema-v1 .icono-fallback {
    background: var(--dtp-surface-2);
    color: var(--dtp-text-mute);
}

.dtp-tema-v1 .slider-arrow {
    background: var(--dtp-surface);
    color: var(--dtp-text);
    border: 1px solid var(--dtp-border);
    min-width: 44px;
    min-height: 44px;
    border-radius: 50%;
}


/* =====================================================================
   B5) TARJETAS — 8 variantes con DIFERENCIAS REALES
   ---------------------------------------------------------------------
   Todas comparten el MISMO HTML (el partial de la tienda no se toca), los
   mismos controles, la misma accesibilidad y los mismos estados. Lo que
   cambia en cada una es una decision de composicion concreta:
   distribucion, protagonismo de la imagen, densidad, borde, elevacion y
   relacion precio/accion.

   DOM real sobre el que operan (del partial de la tienda):
     .menu-item.color-default-panel
       > div
         > div.d-flex.align-items-stretch.justify-content-between  [cabecera]
             > div.d-flex.align-items-stretch                      [medio]
                 > div.lista-imagen-container > img.lista-imagen
                 > div.d-flex.flex-column.justify-content-center   [textos]
             > span.stock-status
         > div.price-list > div.price-option
   ===================================================================== */

/* -- Base comun de la composicion -- */
.dtp-tema-v1 .menu-item.color-default-panel > div > .d-flex.justify-content-between {
    gap: 10px;
    align-items: flex-start;
}

.dtp-tema-v1 .lista-imagen-container {
    flex: 0 0 auto;
    width: 84px;
    height: 84px;
    border-radius: var(--dtp-radius-sm);
    overflow: hidden;
    background: var(--dtp-surface-2);
    margin-right: 12px;
}

.dtp-tema-v1 .lista-imagen {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.dtp-tema-v1 .price-list { margin-top: 10px; }


/* ---- 1. LIMPIA — plana, ordenada, sin distracciones ---- */
.dtp-card-limpia .menu-item.color-default-panel,
.dtp-card-limpia .product-card.color-default-panel {
    box-shadow: none !important;
    border-color: var(--dtp-border) !important;
}

.dtp-card-limpia .lista-imagen-container { width: 76px; height: 76px; }


/* ---- 2. ELEVADA — superficie y profundidad suave ---- */
.dtp-card-elevada .menu-item.color-default-panel,
.dtp-card-elevada .product-card.color-default-panel {
    background: var(--dtp-surface-2) !important;
    box-shadow: var(--dtp-shadow) !important;
}


/* ---- 3. CONTORNO — borde de marca, fondo liviano ---- */
.dtp-card-contorno .menu-item.color-default-panel,
.dtp-card-contorno .product-card.color-default-panel {
    background: transparent !important;
    border: 2px solid var(--dtp-primary) !important;
    box-shadow: none !important;
}

.dtp-card-contorno .lista-imagen-container { border: 1px solid var(--dtp-border); }


/* ---- 4. IMAGEN PROTAGONISTA — imagen dominante arriba, texto debajo ----
   Cambio ESTRUCTURAL, no de color: la cabecera pasa a columna y la imagen
   ocupa todo el ancho en 16:9. */
.dtp-card-imagen-protagonista .menu-item.color-default-panel > div > .d-flex.justify-content-between {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
}

.dtp-card-imagen-protagonista .menu-item.color-default-panel > div > .d-flex > .d-flex.align-items-stretch {
    flex-direction: column;
    align-items: stretch;
}

.dtp-card-imagen-protagonista .lista-imagen-container {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    margin: 0 0 12px 0;
    border-radius: var(--dtp-radius);
}

.dtp-card-imagen-protagonista .stock-status { align-self: flex-start; margin-top: 6px; }


/* ---- 5. COMPACTA — mas productos visibles de un vistazo ----
   La descripcion a UNA linea es lo que realmente sube la densidad. */
.dtp-card-compacta .menu-item.color-default-panel,
.dtp-card-compacta .product-card.color-default-panel {
    padding: 10px 12px;
    box-shadow: none !important;
}

.dtp-card-compacta .lista-imagen-container { width: 56px; height: 56px; margin-right: 10px; }

.dtp-card-compacta .titulo-producto { font-size: .9375rem; -webkit-line-clamp: 1; line-clamp: 1; }

.dtp-card-compacta .descripcion-producto {
    font-size: .8125rem;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.dtp-card-compacta .price-list { margin-top: 6px; }


/* ---- 6. PREMIUM — superficie sobria, aire y acento refinado ---- */
.dtp-card-premium .menu-item.color-default-panel,
.dtp-card-premium .product-card.color-default-panel {
    padding: calc(var(--dtp-space) + 6px);
    border: 1px solid var(--dtp-accent) !important;
    background: var(--dtp-surface) !important;
    box-shadow: var(--dtp-shadow) !important;
}

.dtp-card-premium .titulo-producto { letter-spacing: .01em; }

/* El precio dorado es LA firma del tema Premium. Estaba escrito contra
   `.precio-monto`, que la tienda no emite: la firma no aparecía nunca. Va sobre
   el elemento que sí existe. */
.dtp-card-premium .price-option b { color: var(--dtp-accent); }

.dtp-card-premium .lista-imagen-container { border-radius: var(--dtp-radius); }


/* ---- 7. DEGRADADO SUAVE — color de marca sin tapar el contenido ----
   El degradado va en la TARJETA, y el bloque de precio+accion se apoya en
   una superficie opaca propia: el color de marca se ve, pero nunca compite
   con el texto ni con los controles. */
.dtp-card-degradado-suave .menu-item.color-default-panel,
.dtp-card-degradado-suave .product-card.color-default-panel {
    background: linear-gradient(135deg, var(--dtp-surface-brand) 0%, var(--dtp-surface) 58%) !important;
}

.dtp-card-degradado-suave .price-option {
    background: var(--dtp-surface);
    border: 1px solid var(--dtp-border);
    border-radius: var(--dtp-radius-sm);
    padding: 8px 10px;
}


/* ---- 8. EDITORIAL — imagen lateral derecha, tipografia protagonista ---- */
.dtp-card-editorial .menu-item.color-default-panel > div > .d-flex > .d-flex.align-items-stretch {
    flex-direction: row-reverse;
    align-items: flex-start;
    gap: 14px;
}

.dtp-card-editorial .lista-imagen-container {
    width: 96px;
    height: 96px;
    margin-right: 0;
    border-radius: var(--dtp-radius);
}

.dtp-card-editorial .titulo-producto {
    font-family: var(--dtp-font-brand);
    font-size: 1.1875rem;
    -webkit-line-clamp: 3;
    line-clamp: 3;
}

.dtp-card-editorial .menu-item.color-default-panel {
    padding: calc(var(--dtp-space) + 4px);
    box-shadow: none !important;
    border-bottom: 1px solid var(--dtp-border) !important;
}


/* =====================================================================
   B5-bis) BADGE "Ver más" (.mi-indicator) — ANCLAJE ESTABLE
   ---------------------------------------------------------------------
   `EstilosMasInfo.css` lo posiciona absoluto contra la tarjeta y
   `EstilosTarjetasPro.css` lo empuja a `left:8px; top:8px` cuando la
   tarjeta tiene miniatura. Ese 8/8 cae sobre la imagen SÓLO con los
   números del modo clásico (miniatura 100x100, padding 13 px). Medido en
   la tienda real, misma tarjeta y mismo producto, cambiando la variante:

     variante                imagen   el badge sobresale de la imagen
     limpia                   76 px   +18 px
     elevada/contorno/degr.   84 px   +10 px
     premium                  84 px   +10 px
     compacta                 56 px   +38 px   (se come el título)
     editorial                96 px   la imagen se va a la DERECHA
                                      (row-reverse) y el badge se queda a
                                      la izquierda: 1093 px de distancia
     imagen protagonista     100 %    entra, pero desalineado 13/5

   El defecto es de fondo y no se arregla corrigiendo un caso: el badge
   se ancla a una esquina FIJA de la tarjeta, mientras que dónde cae la
   imagen depende del padding y de la dirección del flex — que es
   exactamente lo que cambia cada variante. Y con miniaturas de 56 px no
   existe ninguna posición "sobre la imagen" capaz de contener una
   píldora de 81 px.

   Regla bajo tema, la misma para las 8 variantes, con imagen y sin
   imagen, en lista y en grilla, en celular y en escritorio:

     · vértice superior DERECHO del área de contenido de la tarjeta, o
       sea separado del borde por el propio padding del tema;
     · la cabecera reserva su ancho, así nunca tapa el título ni el
       estado de stock (y la reserva es `padding-right`, que sigue siendo
       la derecha visual aunque la fila interna esté en `row-reverse`);
     · excepción: donde la imagen SÍ puede contenerlo —grilla e imagen
       protagonista— se queda sobre la imagen, que es lo que se espera.

   !important: las reglas que hay que ganar están escritas con
   !important en `EstilosTarjetasPro.css` (`left/right/top` del bloque
   `:has(.lista-imagen-container)`). Mismo criterio que el resto de este
   archivo.
   ===================================================================== */

.dtp-tema-v1 {
    --dtp-info-reserva: 92px;
}

/* `html.` al frente NO es decoración: las reglas heredadas de
   `EstilosTarjetasPro.css` tienen exactamente la misma especificidad
   (5 clases) y también van con `!important`, y esa hoja se enlaza DENTRO
   del partial del catálogo — o sea, DESPUÉS de ésta. En un empate manda
   el orden del documento, así que sin el selector de elemento estas
   reglas se escribían pero no se aplicaban. Verificado en la tienda real:
   con el empate, `left` seguía computando 8px. */

/* LISTA — vértice superior derecho del contenido. */
html.dtp-tema-v1 .menu-item:not(.product-card).color-default-panel .mi-indicator {
    top: 0 !important;
    right: 0 !important;
    left: auto !important;
    bottom: auto !important;
}

/* Reserva de ancho en la cabecera. Gana al `padding-right: 0` que pone
   el bloque `:has()` heredado. */
html.dtp-tema-v1 .menu-item:not(.product-card).color-default-panel:not(.disabled) > div > .d-flex.align-items-stretch.justify-content-between {
    padding-right: var(--dtp-info-reserva) !important;
}

/* El estado de stock ya viaja DENTRO de la cabecera reservada: el margen
   heredado de 72 px lo empujaría una segunda vez. */
html.dtp-tema-v1 .menu-item:not(.product-card).color-default-panel .stock-status {
    margin-right: 0 !important;
}

/* IMAGEN PROTAGONISTA — la imagen ocupa todo el ancho: el badge vuelve
   sobre ella y la reserva sobra (la cabecera es una columna, un
   padding-right le comería ancho a la imagen). */
html.dtp-card-imagen-protagonista .menu-item:not(.product-card).color-default-panel .mi-indicator {
    top: 8px !important;
    right: 8px !important;
    left: auto !important;
}

html.dtp-card-imagen-protagonista .menu-item:not(.product-card).color-default-panel:not(.disabled) > div > .d-flex.align-items-stretch.justify-content-between {
    padding-right: 0 !important;
}

/* GRILLA — `EstilosTarjetasPro` ya lo ancla a `.grid-imagen-container`,
   que es su propio contenedor posicionado: ahí el anclaje nunca estuvo
   roto y no se toca. Sólo se garantiza que no se salga del recuadro. */
html.dtp-tema-v1 .product-card.color-default-panel .grid-imagen-container .mi-indicator {
    max-width: calc(100% - 16px);
}

/* Pantallas angostas: la píldora se compacta para que la reserva no le
   coma el renglón al título. El texto se mantiene — es lo que la hace
   descubrible—, se achica el envoltorio. */
@media (max-width: 420px) {
    .dtp-tema-v1 {
        --dtp-info-reserva: 76px;
    }

    html.dtp-tema-v1 .menu-item.color-default-panel .mi-indicator,
    html.dtp-tema-v1 .product-card.color-default-panel .mi-indicator {
        padding: 4px 8px !important;
        font-size: .62rem !important;
    }

        html.dtp-tema-v1 .menu-item.color-default-panel .mi-indicator > i,
        html.dtp-tema-v1 .product-card.color-default-panel .mi-indicator > i {
            font-size: .72rem !important;
        }
}


/* =====================================================================
   B6) PRECIOS, OFERTAS, ETIQUETAS, STOCK
   ===================================================================== */

.dtp-tema-v1 .price-badge-wrapper {
    background: var(--dtp-surface-2);
    color: var(--dtp-text);
    border: 1px solid var(--dtp-border);
    border-radius: var(--dtp-radius-sm);
    padding: 7px 12px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-variant-numeric: tabular-nums;
    /* Un precio largo ("Individual: $1.234.567,89") no puede empujar la
       tarjeta: envuelve dentro del propio chip. */
    flex-wrap: wrap;
    max-width: 100%;
    min-width: 0;
    overflow-wrap: anywhere;
}


    /* !important: el ícono lleva `.text-primary` de Bootstrap (ver nota en
       .descripcion-producto). */
    .dtp-tema-v1 .price-badge-wrapper > i {
        color: var(--dtp-accent) !important;
        font-style: normal;
    }

/* Pill de disponibilidad ("Disponibles: 29"). La versión heredada trae
   tres paletas fijas claras (#e8f7ee / #fff7e6 / #fdecec) que sobre un
   tema oscuro quedan como tres parches pegados. Se lleva a los tokens del
   tema conservando el CÓDIGO DE COLOR — verde disponible, ámbar quedan
   pocas, rojo agotado —, que es la información que transmite el pill. */
.dtp-tema-v1 .dtp-stock-pill {
    background: var(--dtp-surface-2);
    color: var(--dtp-success);
    box-shadow: inset 0 0 0 1px var(--dtp-border);
}

    .dtp-tema-v1 .dtp-stock-pill.low { color: var(--dtp-warn); }
    .dtp-tema-v1 .dtp-stock-pill.agotado { color: var(--dtp-danger); }

/* "Sin stock".
   Esta regla existía desde el Bloque B y NUNCA se aplicaba. La versión
   heredada de `EstilosTarjetasPro.css` es
   `.menu-item.color-default-panel .stock-status` — TRES clases con
   !important contra las DOS de aquí: no era un empate, ganaba de largo.
   Resultado medido en la tienda real con el tema Oscuro elegante: el
   texto salía `#b91c1c` fijo (no `--dtp-danger`) sobre la superficie del
   tema => **2,55:1**, por debajo del mínimo, en las 8 variantes. No lo
   detectó el barrido de contraste anterior porque se corrió sobre un tema
   CLARO, donde ese rojo fijo sí cumple, y porque el cartel sólo aparece en
   productos agotados.
   Por eso el selector lleva `html.` y el nombre de la tarjeta: tiene que
   ganarle a la heredada, no empatarle. */
html.dtp-tema-v1 .menu-item.color-default-panel .stock-status,
html.dtp-tema-v1 .product-card.color-default-panel .stock-status,
.dtp-tema-v1 .stock-status {
    background: var(--dtp-surface-2) !important;
    /* !important: lleva `.text-danger` de Bootstrap (ver .descripcion-producto). */
    color: var(--dtp-danger) !important;
    border: 1px solid var(--dtp-border) !important;
    border-radius: 999px !important;
    padding: 4px 10px !important;
    font-size: .8125rem !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
    box-shadow: none !important;
    flex: 0 0 auto;
}

/* Accesos de la tienda: "Mis compras", "Reservas", "Conocénos".
   Se pintaban con colores literales —tarjeta `rgba(255,255,255,.95)`,
   texto `#1e1b4b`, "Conocénos" en `#64748b`— y NO seguían al tema: sobre
   Oscuro elegante, Premium o Urbano quedaban tres pastillas BLANCAS
   pegadas encima de un fondo negro, y el texto de "Conocénos" medía
   3,93:1 contra el fondo de página (lo encontró el barrido de contraste
   de todo el documento, no una revisión a ojo).
   Van a los tokens del tema. `--dtp-text` y `--dtp-text-soft` contra
   `--dtp-surface-2` son dos de los pares que la matriz de contraste ya
   verifica para los 8 presets, así que la legibilidad no depende de
   estas reglas. Los avatares indigo y azul se dejan como están: son la
   identidad del componente, no color de tema. */
.dtp-tema-v1 .dtp-acc {
    background: var(--dtp-surface-2);
    border: 1px solid var(--dtp-border);
    color: var(--dtp-text);
    box-shadow: var(--dtp-shadow);
}

.dtp-tema-v1 .dtp-acc--ghost {
    background: var(--dtp-surface-2);
    box-shadow: none;
}

    .dtp-tema-v1 .dtp-acc--ghost .dtp-acc__tx {
        color: var(--dtp-text-soft);
    }

    .dtp-tema-v1 .dtp-acc--ghost .dtp-acc__ic {
        background: var(--dtp-surface);
        color: var(--dtp-text-soft);
    }

/* Meta: minimos, maximos, combinable, disponibilidad. */
.dtp-tema-v1 .dtp-meta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 6px;
}

.dtp-tema-v1 .dtp-mm-pill,
.dtp-tema-v1 .badge-combinable {
    background: var(--dtp-surface-2);
    color: var(--dtp-text-soft);
    border: 1px solid var(--dtp-border);
    border-radius: 999px;
    min-height: 32px;
    padding: 4px 10px;
    font-size: .75rem;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.dtp-tema-v1 .badge-combinable {
    color: var(--dtp-primary);
    border-color: var(--dtp-primary);
}

/* Sin stock: se entiende SIN depender de percibir el color. */
.dtp-tema-v1 .menu-item.disabled .titulo-producto,
.dtp-tema-v1 .product-card.disabled .titulo-producto { text-decoration: line-through; }


/* =====================================================================
   B7) BOTONES DE ACCION
   ===================================================================== */

.dtp-tema-v1 .comment-button {
    background: var(--dtp-surface-2);
    color: var(--dtp-text-soft);
    border: 1px solid var(--dtp-border);
    border-radius: var(--dtp-radius-sm);
    min-height: 44px;
    padding: 8px 12px;
    transition: transform var(--dtp-motion) ease, background-color var(--dtp-motion) ease;
}

    .dtp-tema-v1 .comment-button:active { transform: scale(.97); }

    /* El "Agregar comentario" y la leyenda van con `style="color: green;"` y
       `style="color: red;"` ESCRITOS A MANO en el partial (no salen de la
       configuración, así que CapaClasica no los filtra). No hace falta una regla
       nueva: EstilosTarjetasPro.css ya los captura por atributo y los pinta con
       --tp-success / --tp-danger, y esos dos tokens ya apuntan al tema (ver el
       bloque de compatibilidad). Se probó agregar una regla propia y perdía por
       especificidad y orden — dos reglas para lo mismo, una de ellas muerta.
       Atacar el token en el origen es lo que evita esa acumulación. */

    /* La cursiva serif del comentario sí viene de la hoja vieja y no de un token;
       la fuente la manda el tema. */
    .dtp-tema-v1 .comment-button,
    .dtp-tema-v1 .comment-text,
    .dtp-tema-v1 .comment-text span {
        font-family: var(--dtp-font-ui);
        font-style: normal;
    }

/* Botón "Ampliar" del carrusel de Novedades.
   -----------------------------------------------------------------
   Tiene superficie BLANCA fija y su texto lo HEREDA. Bajo un tema oscuro
   heredaba la tinta clara del tema y quedaba blanco sobre blanco: medido en la
   tienda real de Demo con el tema Premium, **1,16:1**. Lo encontró un barrido
   automático de todo el texto del documento contra su fondo pintado real, no
   una revisión a ojo — por eso vale la pena tenerlo escrito.

   El resto del bloque de Novedades no lo toca el tema (son fotos con su propio
   velo, y se ven bien en los dos modos): acá sólo se corrige el par que estaba
   roto, con una combinación que el servidor ya garantiza. */
.dtp-tema-v1 .expand-btn {
    background: var(--dtp-surface);
    color: var(--dtp-text);
    border: 1px solid var(--dtp-border);
    min-height: 44px;
}

/* SELECCIONADO — el producto que ya está en el pedido.
   -----------------------------------------------------------------
   El partial lo pinta con `#d4f5e9 !important`: un verde menta fijo que
   sobre un tema oscuro queda como un bloque ajeno y sobre uno claro no
   tiene nada que ver con la paleta elegida. Se lleva al color de marca,
   que es además lo que el comercio espera que signifique "elegido".
   Mantiene el borde para que la selección no dependa SÓLO del color
   (WCAG 1.4.1: la información no se transmite sólo con el color).

   Tres clases y no dos: EstilosTarjetasPro.css lo declara con
   `.menu-item.color-default-panel.selected` (0,3,0) e !important, y esa hoja
   se carga DESPUÉS del tema. Con la misma especificidad ganaba por orden.
   Medido en Demo: la tarjeta seleccionada seguía saliendo #d1fae5. */
.dtp-tema-v1 .menu-item.color-default-panel.selected,
.dtp-tema-v1 .product-card.color-default-panel.selected {
    background: var(--dtp-primary-soft) !important;
    border-color: var(--dtp-primary) !important;
    box-shadow: 0 0 0 2px var(--dtp-primary-soft) !important;
}


/* =====================================================================
   B8) DENSIDAD — el ritmo vertical del catalogo
   ===================================================================== */

.dtp-dens-compacta .menu-item.color-default-panel { margin-bottom: 8px; }
.dtp-dens-normal .menu-item.color-default-panel { margin-bottom: 12px; }
.dtp-dens-amplia .menu-item.color-default-panel { margin-bottom: 18px; }


/* =====================================================================
   B9) MOVIL — es lo que decide si "se siente una app"
   ===================================================================== */

@media (max-width: 575px) {

    /* Ningun control principal por debajo del area tactil. */
    .dtp-tema-v1 .quantity-control button.decrease,
    .dtp-tema-v1 .quantity-control button.increase {
        min-width: 44px !important;
        min-height: 44px !important;
        width: 44px !important;
        height: 44px !important;
    }

    /* Precio arriba y accion abajo, cada uno en su linea: en 320 px es la
       unica forma de que ni el precio se corte ni el stepper se apriete. */
    .dtp-tema-v1 .price-option {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }

    .dtp-tema-v1 .quantity-control { justify-content: space-between; }

        /* flex-basis 0, NO auto: con `auto` el input parte de su ancho
           intrinseco (~190px) y el stepper desborda la tarjeta. Con base 0
           crece desde cero y `min-width` le pone el piso real. */
        .dtp-tema-v1 .quantity-control input.quantity {
            flex: 1 1 0 !important;
            width: auto !important;
            min-width: 56px !important;
        }

    .dtp-card-editorial .lista-imagen-container,
    .dtp-card-premium .lista-imagen-container { width: 72px; height: 72px; }
}

/* Escritorio: precio y accion vuelven a convivir en una linea. */
@media (min-width: 576px) {
    .dtp-tema-v1 .price-option { flex-direction: row; }
}
