/* ===================================================================== dtp-contrast.css — Reglas defensivas de contraste (catálogo público) --------------------------------------------------------------------- Trabaja en conjunto con dtp-contrast.js. El JS clasifica cada color configurado por el usuario como "claro" u "oscuro" (luminancia WCAG) y agrega clases en . Este CSS elige la SUPERFICIE adecuada detrás de cada texto para garantizar contraste, sin alterar nunca el color elegido por el usuario. Polaridades (clases en ): dtp-letra-clara / dtp-letra-oscura ← ColorLetraProductos dtp-desc-clara / dtp-desc-oscura ← ColorIconosDescripcionUMedida dtp-cat-clara / dtp-cat-oscura ← color de EstiloCategoria dtp-busc-clara / dtp-busc-oscura ← ColorTextoBuscadorCategorias dtp-fondo-claro / dtp-fondo-oscuro ← ColorDefault (fondo página) dtp-contrast-ready ← JS activo (clase maestra) Si JS no corre, dtp-contrast-ready no existe y aplican los fallbacks históricos con prefers-color-scheme (gateados con :not()). ===================================================================== */ /* --------------------------------------------------------------------- 0) PROTECCIÓN CONTRA DARK MODE FORZADO DEL NAVEGADOR --------------------------------------------------------------------- "only light" desactiva el Auto Dark Theme de Chrome Android y la inversión de controles de formulario del UA. Los colores que ve el cliente son SIEMPRE los configurados por el comercio: el dark mode del dispositivo no puede reinterpretarlos. ------------------------------------------------------------------- */ :root { color-scheme: only light; } /* ===================================================================== 1) TÍTULOS DE PRODUCTO — chip según polaridad de ColorLetraProductos ----------------------------------------------------------------- Letra OSCURA → chip claro (en light Y dark mode del SO) Letra CLARA → chip oscuro (en light Y dark mode del SO) Así se elimina el caso reportado "letra oscura sobre chip oscuro" cuando el celular está en modo oscuro. ===================================================================== */ html.dtp-contrast-ready.dtp-letra-oscura .product-card.color-default-panel .titulo-producto, html.dtp-contrast-ready.dtp-letra-oscura .menu-item.color-default-panel .titulo-producto { background: rgba(255, 255, 255, 0.92) !important; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.12) !important; } html.dtp-contrast-ready.dtp-letra-clara .product-card.color-default-panel .titulo-producto, html.dtp-contrast-ready.dtp-letra-clara .menu-item.color-default-panel .titulo-producto { background: rgba(17, 24, 39, 0.86) !important; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6) !important; } /* En grilla el color de letra configurado se aplica igual que en lista (el chip de atrás ya garantiza el contraste). Sin JS se mantiene el color fijo histórico. `:not(.dtp-tema-v1)`: las reglas de polaridad de esta hoja ya quedan inertes bajo tema porque el script no agrega las clases dtp-*-clara / dtp-*-oscura. Estas tres NO dependen de la polaridad, así que hay que apagarlas a mano: pintan con los colores CLÁSICOS y, por especificidad, le ganaban al tema. Ver dtp-contrast.js y Helpers/Visual/CapaClasica.cs. */ html.dtp-contrast-ready:not(.dtp-tema-v1) .card-grid .grid-titulo { color: var(--color-letra-productos, #1a1a1a); } /* ===================================================================== 2) DESCRIPCIONES — chip según polaridad de ColorIconosDescripcionUMedida ===================================================================== */ html.dtp-contrast-ready.dtp-desc-oscura .product-card.color-default-panel .descripcion-producto, html.dtp-contrast-ready.dtp-desc-oscura .menu-item.color-default-panel .descripcion-producto { background: rgba(255, 255, 255, 0.82) !important; text-shadow: none !important; } html.dtp-contrast-ready.dtp-desc-clara .product-card.color-default-panel .descripcion-producto, html.dtp-contrast-ready.dtp-desc-clara .menu-item.color-default-panel .descripcion-producto { background: rgba(17, 24, 39, 0.78) !important; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5) !important; } html.dtp-contrast-ready:not(.dtp-tema-v1) .card-grid .grid-descripcion { color: var(--color-iconos-descripcion-umedida, #666); } /* ===================================================================== 3) BURBUJA DE PRECIO — contiene la unidad (color del usuario) y el monto (color propio). La superficie sigue la polaridad del color de iconos/unidades; el monto recibe el texto de máximo contraste. ===================================================================== */ html.dtp-contrast-ready.dtp-desc-oscura .price-option .price-badge-wrapper, html.dtp-contrast-ready.dtp-desc-oscura .price-option > b > span { background: rgba(255, 255, 255, 0.95) !important; color: #111827 !important; border-color: rgba(0, 0, 0, 0.08) !important; } html.dtp-contrast-ready.dtp-desc-clara .price-option .price-badge-wrapper, html.dtp-contrast-ready.dtp-desc-clara .price-option > b > span { background: rgba(17, 24, 39, 0.92) !important; color: #f9fafb !important; border-color: rgba(255, 255, 255, 0.16) !important; } html.dtp-contrast-ready.dtp-desc-oscura .price-option .precio-monto { color: #111827 !important; } html.dtp-contrast-ready.dtp-desc-clara .price-option .precio-monto { color: #f9fafb !important; } /* Superficie de la fila de precio en LISTA: acompaña la polaridad para no encerrar una burbuja oscura dentro de una banda blanca. */ html.dtp-contrast-ready.dtp-desc-clara .menu-item:not(.product-card).color-default-panel .price-option { background: rgba(17, 24, 39, 0.35) !important; } html.dtp-contrast-ready.dtp-desc-clara .card-grid .product-card.color-default-panel .price-option.vertical-option { background: rgba(17, 24, 39, 0.35) !important; border-color: rgba(255, 255, 255, 0.14) !important; } /* ===================================================================== 4) PILL DE CATEGORÍA — superficie según polaridad del color del título de categoría (EstiloCategoria). ===================================================================== */ html.dtp-contrast-ready.dtp-cat-oscura section[id^="category-"] > .d-flex.align-items-center.justify-content-center.text-center { --tc-surface: rgba(255, 255, 255, 0.92); --tc-border: rgba(0, 0, 0, 0.08); --tc-text-shadow: 0 1px 2px rgba(0, 0, 0, 0.12); --tc-img-ring: rgba(255, 255, 255, 0.9); } html.dtp-contrast-ready.dtp-cat-clara section[id^="category-"] > .d-flex.align-items-center.justify-content-center.text-center { --tc-surface: rgba(17, 24, 39, 0.86); --tc-border: rgba(255, 255, 255, 0.14); --tc-text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55); --tc-img-ring: rgba(255, 255, 255, 0.85); } /* ===================================================================== 5) NOMBRES DE CATEGORÍA EN FORMATO CIRCULAR / CUADRO ----------------------------------------------------------------- Estos nombres usan el color del usuario directamente sobre el fondo de página (también configurable). Un halo del color OPUESTO al texto garantiza lectura sobre cualquier fondo, incluso imágenes. ===================================================================== */ html.dtp-contrast-ready.dtp-cat-oscura .circulo-nombre, html.dtp-contrast-ready.dtp-cat-oscura .cuadro-nombre { text-shadow: 0 0 2px rgba(255, 255, 255, 0.95), 0 0 6px rgba(255, 255, 255, 0.8), 0 1px 2px rgba(255, 255, 255, 0.7); } html.dtp-contrast-ready.dtp-cat-clara .circulo-nombre, html.dtp-contrast-ready.dtp-cat-clara .cuadro-nombre { text-shadow: 0 0 2px rgba(0, 0, 0, 0.9), 0 0 6px rgba(0, 0, 0, 0.65), 0 1px 2px rgba(0, 0, 0, 0.55); } /* Pills de categoría (formato Píldora): fondo fijo #f0f0f0 con texto oscuro de Bootstrap. Se fija explícitamente para que ningún modo del SO pueda invertirlo. */ html.dtp-contrast-ready:not(.dtp-tema-v1) .pillCategorias .pill { color: #1a1a1a; } /* ===================================================================== 6) STICKY HEADER — fondo según polaridad del color de texto del buscador/categorías (ColorTextoBuscadorCategorias). ----------------------------------------------------------------- El sticky header histórico es SIEMPRE oscuro. Si el usuario eligió un color de texto oscuro quedaba ilegible. Ahora: texto claro → header oscuro (histórico); texto oscuro → header claro. ===================================================================== */ html.dtp-contrast-ready.dtp-busc-oscura .sticky-header { background: rgba(248, 249, 251, 0.97); } html.dtp-contrast-ready.dtp-busc-oscura .sticky-bottom-line { opacity: 0.5; } html.dtp-contrast-ready.dtp-busc-oscura .sticky-search-toggle { background: rgba(0, 0, 0, 0.06); color: rgba(0, 0, 0, 0.55); } html.dtp-contrast-ready.dtp-busc-oscura .sticky-search-toggle:active:not(:disabled) { background: rgba(0, 0, 0, 0.12); } html.dtp-contrast-ready.dtp-busc-oscura .sticky-search-icon { color: rgba(0, 0, 0, 0.4); } html.dtp-contrast-ready.dtp-busc-oscura .sticky-search-input { background: rgba(0, 0, 0, 0.05); border-color: rgba(0, 0, 0, 0.14); color: #111827; } html.dtp-contrast-ready.dtp-busc-oscura .sticky-search-input::placeholder { color: rgba(0, 0, 0, 0.38); } html.dtp-contrast-ready.dtp-busc-oscura .sticky-search-close { color: rgba(0, 0, 0, 0.5); } html.dtp-contrast-ready.dtp-busc-oscura .sticky-search-close:active { background: rgba(0, 0, 0, 0.08); } html.dtp-contrast-ready.dtp-busc-oscura .sticky-cat.active { background: rgba(0, 0, 0, 0.05); } html.dtp-contrast-ready.dtp-busc-oscura .sticky-cat-img-wrap { background: #e5e7eb; } html.dtp-contrast-ready.dtp-busc-oscura .sticky-shape-circular .sticky-cat-img-wrap, html.dtp-contrast-ready.dtp-busc-oscura .sticky-shape-cuadro .sticky-cat-img-wrap { border-color: rgba(0, 0, 0, 0.14); } html.dtp-contrast-ready.dtp-busc-oscura .sticky-shape-pildora .sticky-cat { border-color: rgba(0, 0, 0, 0.12); background: rgba(0, 0, 0, 0.04); } html.dtp-contrast-ready.dtp-busc-oscura .sticky-shape-pildora .sticky-cat.active { border-color: var(--color-texto-buscador, #4f46e5); background: rgba(0, 0, 0, 0.06); } /* ===================================================================== 7) NOMBRE DEL NEGOCIO (HERO) — halo automático ----------------------------------------------------------------- --dtp-halo-nombre la setea el JS SOLO cuando el contraste entre el color del nombre y el fondo del título es < 3:1. En ese caso el texto recibe un halo del color opuesto. Si el contraste es bueno, la variable no existe y el text-shadow es transparente (sin costo). ===================================================================== */ html.dtp-contrast-ready .hero-title { text-shadow: 0 0 2px var(--dtp-halo-nombre, transparent), 0 0 8px var(--dtp-halo-nombre, transparent), 0 1px 3px var(--dtp-halo-nombre, transparent); } /* ===================================================================== 8) MENSAJES DE ESTADO SOBRE FONDO DE PÁGINA CONFIGURABLE ----------------------------------------------------------------- El mensaje "sin resultados" del buscador y textos sueltos que se apoyan directamente sobre el fondo configurado reciben halo según la polaridad del fondo. ===================================================================== */ html.dtp-contrast-ready.dtp-fondo-oscuro .cart-search-empty { color: #f9fafb; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7); } html.dtp-contrast-ready.dtp-fondo-claro .cart-search-empty { color: #1f2937; text-shadow: 0 1px 2px rgba(255, 255, 255, 0.6); }