/* Mapeados en los DOS modos a propósito: el tenant claro no hereda
           ningún fondo oscuro suelto (regla "modo claro: todo o nada").
           El hook `html.theme-light` lo pone config.js antes del primer
           paint, igual que el resto de la página. */
        #resenasTitle { color: #e5e7eb; }
        html.theme-light #resenasTitle { color: #1f2937; }
        .rev-prom      { color: #e5e7eb; }
        html.theme-light .rev-prom { color: #111827; }
        .rev-sub       { color: rgba(255,255,255,0.42); }
        html.theme-light .rev-sub { color: rgba(15,23,42,0.52); }
        .rev-card {
          border-radius: 1rem;
          padding: 1rem 1.1rem;
          background: rgba(255,255,255,0.035);
          border: 1px solid rgba(255,255,255,0.09);
        }
        html.theme-light .rev-card {
          background: #ffffff;
          border-color: rgba(15,23,42,0.08);
          box-shadow: 0 1px 2px rgba(15,23,42,0.03);
        }
        .rev-texto { color: rgba(255,255,255,0.80); font-size: 0.9rem; line-height: 1.55; }
        html.theme-light .rev-texto { color: rgba(15,23,42,0.78); }
        .rev-autor { color: rgba(255,255,255,0.48); font-size: 0.75rem; }
        html.theme-light .rev-autor { color: rgba(15,23,42,0.50); }
        /* Ámbar fijo, no var(--accent): en los temas cuyo acento es blanco o
           plata las estrellas desaparecían. Además es el mismo tono con el
           que el cliente calificó en rate.html. */
        .rev-star-on  { fill: #fbbf24; }
        .rev-star-off { fill: rgba(255,255,255,0.16); }
        html.theme-light .rev-star-off { fill: rgba(15,23,42,0.14); }

        /* ── Casilla "Avísame por WhatsApp" en los temas CLAROS ───────────
           El bloque nace con el fondo negro puesto en el `style` inline
           (#0a0807) y el texto en grises de tema oscuro. Sobre el fondo blanco
           de los tenants claros quedaba una caja negra con letra gris oscuro
           encima — ilegible, y visualmente de otra marca. No tenía override
           para NINGÚN tenant claro: pasaba igual en aura, oren, alfamen,
           latincaribe, sion, omega, infinity, renacer y clinicalglow.

           Se arregla por `html.theme-light`, que es el hook que ya pone
           config.js antes del primer paint, en vez de repetirlo por slug. El
           `[style]` en el selector es para ganarle al inline. */
        html.theme-light #waOptInWrap,
        html.theme-light #waOptInWrap[style] {
          background: #ffffff !important;
          border: 1px solid rgba(15,23,42,0.12) !important;
        }
        html.theme-light #waOptInWrap span { color: rgba(15,23,42,0.62) !important; }
        html.theme-light #waOptInWrap b    { color: rgba(15,23,42,0.88) !important; }
        html.theme-light #waOptInWrap .text-gray-600 { color: rgba(15,23,42,0.45) !important; }
        html.theme-light #waOptInCheck {
          border-color: rgba(15,23,42,0.28) !important;
          background: #ffffff !important;
        }

        /* ── Fila agrupada + hoja de medidas (ver _agruparVariantes) ──────
           Reemplazó a los chips dentro de la fila: eran controles dentro de un
           control, de 21px de alto contra los 44px mínimos de un objetivo
           táctil, y tocar al lado seleccionaba la medida más barata sin avisar.
           Acá la fila es un control y la elección ocurre en su propia capa,
           con opciones de 56px. Mapeado en los dos modos de tema. */
        .svc-familia-nota {
          display: inline-flex;
          align-items: center;
          gap: 5px;
          margin-top: 2px;
          font-size: 11px;
          font-weight: 600;
          color: rgba(255,255,255,0.45);
        }
        .svc-familia-nota.is-elegido { color: rgba(255,255,255,0.85); }
        .svc-familia-nota b { font-weight: 800; }
        .svc-familia-cambiar {
          font-weight: 600;
          text-decoration: underline;
          text-underline-offset: 2px;
          opacity: .65;
        }
        html.theme-light .svc-familia-nota { color: rgba(15,23,42,0.50); }
        html.theme-light .svc-familia-nota.is-elegido { color: rgba(15,23,42,0.80); }

        #hojaVariantes, #hojaCruce { position: fixed; inset: 0; z-index: 5002; }
        #hojaVariantes.hidden, #hojaCruce.hidden { display: none; }
        #hojaCruce .hv-sub { line-height: 1.65; }
        #hojaCruce .hv-opcion { justify-content: center; }
        #hojaCruce .hv-cruce-solo { border-color: #eab308; background: rgba(234,179,8,0.12); }
        html.theme-light #hojaCruce .hv-cruce-solo { border-color: #b8860b; background: rgba(184,134,11,0.08); }
        .tenant-newglow.tenant-aura #hojaCruce .hv-cruce-solo {
          border-color: #c2559b !important; background: rgba(246,172,221,0.20) !important;
        }
        .tenant-cleanpups.tenant-aura #hojaCruce .hv-cruce-solo {
          border-color: #232B63 !important; background: rgba(179,233,250,0.40) !important;
        }
        #hojaVariantes .hv-fondo, #hojaCruce .hv-fondo {
          position: absolute; inset: 0;
          background: rgba(0,0,0,0.5);
          opacity: 0; transition: opacity .22s ease;
        }
        #hojaVariantes.abierta .hv-fondo, #hojaCruce.abierta .hv-fondo { opacity: 1; }
        #hojaVariantes .hv-panel, #hojaCruce .hv-panel {
          position: absolute; left: 0; right: 0; bottom: 0;
          max-height: 82vh; overflow-y: auto;
          padding: 10px 16px calc(20px + env(safe-area-inset-bottom));
          border-radius: 22px 22px 0 0;
          background: #121215;
          border-top: 1px solid rgba(255,255,255,0.10);
          transform: translateY(100%);
          transition: transform .24s cubic-bezier(0.16,1,0.3,1);
        }
        #hojaVariantes.abierta .hv-panel, #hojaCruce.abierta .hv-panel { transform: translateY(0); }
        .hv-asa {
          width: 38px; height: 4px; border-radius: 99px;
          background: rgba(255,255,255,0.22);
          margin: 2px auto 14px;
        }
        .hv-titulo { font-size: 15px; font-weight: 800; line-height: 1.3; color: #f4f4f5; }
        .hv-sub    { font-size: 12.5px; margin-top: 3px; margin-bottom: 14px; color: rgba(255,255,255,0.55); }
        .hv-lista  { display: flex; flex-direction: column; gap: 8px; }
        .hv-opcion {
          display: flex; align-items: center; justify-content: space-between; gap: 12px;
          width: 100%; min-height: 56px;            /* objetivo táctil holgado */
          padding: 10px 14px;
          border-radius: 14px;
          text-align: left;
          border: 1px solid rgba(255,255,255,0.12);
          background: rgba(255,255,255,0.04);
          transition: border-color .15s, background-color .15s;
        }
        .hv-opcion:active { background: rgba(255,255,255,0.09); }
        .hv-opcion.is-on  { border-color: #eab308; background: rgba(234,179,8,0.12); }
        .hv-medida { font-size: 14px; font-weight: 700; color: #e5e5e5; text-transform: capitalize; flex: 1; }
        .hv-datos  { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.25; }
        .hv-precio { font-size: 15px; font-weight: 800; color: #eab308; white-space: nowrap; }
        .hv-dur    { font-size: 11px; color: rgba(255,255,255,0.45); white-space: nowrap; }
        .hv-hint   { opacity: .75; }

        /* Casilla: el estado marcado tiene que leerse sin comparar colores de
           borde. Con varias medidas posibles, el check es lo que separa "esta
           la llevo" de "esta no". */
        .hv-check {
          width: 20px; height: 20px; flex-shrink: 0;
          border-radius: 6px;
          border: 1.5px solid rgba(255,255,255,0.25);
          display: flex; align-items: center; justify-content: center;
          font-size: 11px; color: transparent;
          transition: background-color .15s, border-color .15s, color .15s;
        }
        .hv-opcion.is-on .hv-check {
          background: #eab308; border-color: #eab308; color: #18181b;
        }

        .hv-pie {
          position: sticky; bottom: 0;
          display: flex; align-items: center; justify-content: space-between; gap: 12px;
          margin: 14px -16px -20px;
          padding: 12px 16px calc(14px + env(safe-area-inset-bottom));
          background: #121215;
          border-top: 1px solid rgba(255,255,255,0.10);
        }
        .hv-total { font-size: 13px; font-weight: 700; color: #e5e5e5; }
        .hv-total.vacio { color: rgba(255,255,255,0.45); font-weight: 600; }
        .hv-listo {
          min-height: 44px; padding: 0 22px;
          border-radius: 12px;
          font-size: 14px; font-weight: 800;
          background: #eab308; color: #18181b;
        }

        html.theme-light .hv-check { border-color: rgba(15,23,42,0.22); }
        html.theme-light .hv-opcion.is-on .hv-check { background: #b8860b; border-color: #b8860b; color: #fff; }
        html.theme-light .hv-pie { background: #ffffff; border-top-color: rgba(15,23,42,0.08); }
        html.theme-light .hv-total { color: #18181b; }
        html.theme-light .hv-total.vacio { color: rgba(15,23,42,0.45); }
        html.theme-light .hv-listo { background: #b8860b; color: #ffffff; }

        html.theme-light #hojaVariantes .hv-panel, html.theme-light #hojaCruce .hv-panel {
          background: #ffffff;
          border-top-color: rgba(15,23,42,0.08);
        }
        html.theme-light .hv-asa    { background: rgba(15,23,42,0.18); }
        html.theme-light .hv-titulo { color: #111827; }
        html.theme-light .hv-sub    { color: rgba(15,23,42,0.58); }
        html.theme-light .hv-opcion {
          border-color: rgba(15,23,42,0.10);
          background: #ffffff;
        }
        html.theme-light .hv-opcion:active { background: rgba(15,23,42,0.04); }
        html.theme-light .hv-opcion.is-on  { border-color: #b8860b; background: rgba(184,134,11,0.08); }
        html.theme-light .hv-medida { color: #18181b; }
        html.theme-light .hv-precio { color: #8a6508; }
        html.theme-light .hv-dur    { color: rgba(15,23,42,0.50); }

        /* Recap de selección múltiple (chip "N servicios · $X" + detalle).
           Más marcado que los otros chips a propósito: es la respuesta a
           "¿cuánto llevo?" y tiene que leerse sin buscarla. */
        .recap-multi {
          display: inline-flex;
          align-items: center;
          gap: 5px;
          padding: 3px 10px;
          border-radius: 9999px;
          cursor: pointer;
          user-select: none;
          font-size: 11px;
          border: 1px solid rgba(255,255,255,0.22);
          background: rgba(255,255,255,0.10);
          color: rgba(255,255,255,0.92);
        }
        .recap-multi b { font-weight: 800; }
        .recap-multi-caret { transition: transform .18s; }
        .recap-multi-detalle {
          width: 100%;
          margin-top: 6px;
          padding: 8px 10px;
          border-radius: 12px;
          border: 1px solid rgba(255,255,255,0.12);
          background: rgba(255,255,255,0.04);
        }
        .recap-multi-item {
          display: flex;
          align-items: baseline;
          justify-content: space-between;
          gap: 10px;
          font-size: 11px;
          line-height: 1.7;
          color: rgba(255,255,255,0.75);
        }
        .recap-multi-precio { font-weight: 700; white-space: nowrap; }

        html.theme-light .recap-multi {
          border-color: rgba(15,23,42,0.16);
          background: rgba(15,23,42,0.04);
          color: rgba(15,23,42,0.82);
        }
        html.theme-light .recap-multi-detalle {
          border-color: rgba(15,23,42,0.10);
          background: rgba(15,23,42,0.025);
        }
        html.theme-light .recap-multi-item { color: rgba(15,23,42,0.72); }