/* =====================================================================
   MegaVentas · sistema de diseño

   Marca: el violeta (#60097B) y el naranja (#D06B2E) del logo.
   Todo color sale de un token: ningún componente escribe un hex.
   Modo oscuro: sigue al sistema, o lo fuerza data-tema en <html>.
   Pensado primero para el celular; desde 900px se acomoda en escritorio.

   Tipografía: Schibsted Grotesk (SIL OFL, ver assets/fonts/LICENCIAS.txt),
   servida desde acá: la CSP sólo deja fuentes propias. Es variable (un solo
   archivo cubre del 400 al 900). La de "latin-ext" se baja sólo si la página
   tiene algún carácter de ese rango (unicode-range).
   ===================================================================== */

@font-face {
  font-family: "Schibsted Grotesk";
  src: url("../fonts/schibsted-grotesk-5.3.woff2") format("woff2");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Schibsted Grotesk";
  src: url("../fonts/schibsted-grotesk-ext-5.3.woff2") format("woff2");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Las tipografías de los textos del editor de estados (Google Fonts, servidas
   desde acá; licencias en fonts/LICENCIAS-TEXTOS.txt). El navegador sólo las
   baja cuando se usan: no pesan en el resto del sitio. */
@font-face { font-family: "Bebas Neue"; src: url("../fonts/bebas-neue.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Anton"; src: url("../fonts/anton.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Playfair Display"; src: url("../fonts/playfair-display.woff2") format("woff2"); font-weight: 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Pacifico"; src: url("../fonts/pacifico.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Lobster"; src: url("../fonts/lobster.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Caveat"; src: url("../fonts/caveat.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Permanent Marker"; src: url("../fonts/permanent-marker.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Fredoka"; src: url("../fonts/fredoka.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Special Elite"; src: url("../fonts/special-elite.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }

:root {
  --marca: #60097b;
  --marca-fuerte: #4a065f;
  --marca-suave: #f4ecf8;
  --marca-borde: #dcc6e6;
  --sobre-marca: #ffffff;
  --acento: #d06b2e;
  --acento-fuerte: #b35620;
  --acento-suave: #fbeee5;

  --fondo: #f6f4f8;
  --superficie: #ffffff;
  --superficie-2: #faf8fb;
  --texto: #1e1524;
  --texto-suave: #5d5466;
  --texto-tenue: #8a8193;
  --borde: #e5dfe9;
  --borde-fuerte: #cfc6d6;

  --exito: #18794e;
  --exito-suave: #e6f4ec;
  --error: #c4302b;
  --error-suave: #fbeaea;
  --info: #2a5bd7;
  --info-suave: #e9effc;

  /* Serie de los gráficos: dentro de la banda de luminosidad y con contraste
     >= 3:1 contra la superficie (validado con el script de dataviz). */
  --grafico: #7d2a9b;
  --sombra-1: 0 1px 2px rgba(30, 21, 36, .06), 0 1px 3px rgba(30, 21, 36, .08);
  --sombra-2: 0 4px 12px rgba(30, 21, 36, .08), 0 2px 4px rgba(30, 21, 36, .06);
  --sombra-3: 0 12px 32px rgba(30, 21, 36, .14);
  --foco: 0 0 0 3px rgba(96, 9, 123, .28);

  --radio-s: 8px;
  --radio: 12px;
  --radio-l: 18px;
  --radio-redondo: 999px;

  --fuente: "Schibsted Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --alto-encabezado: 60px;
  --alto-nav: 64px;
  --ancho-max: 1120px;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    --marca: #c084e0;
    --grafico: #a96bc8;
    --marca-fuerte: #d4a5ec;
    --marca-suave: #2a1d33;
    --marca-borde: #4a3557;
    --sobre-marca: #1a0f20;
    --acento: #ef9a62;
    --acento-fuerte: #f4b083;
    --acento-suave: #3a2418;
    --fondo: #120e15;
    --superficie: #1c1720;
    --superficie-2: #221c27;
    --texto: #f3eef6;
    --texto-suave: #b9afc2;
    --texto-tenue: #8c8296;
    --borde: #322a38;
    --borde-fuerte: #463c4e;
    --exito: #4cc38a;
    --exito-suave: #15291f;
    --error: #f2726d;
    --error-suave: #331817;
    --info: #7da2f5;
    --info-suave: #17213a;
    --sombra-1: 0 1px 2px rgba(0, 0, 0, .4);
    --sombra-2: 0 4px 12px rgba(0, 0, 0, .45);
    --sombra-3: 0 12px 32px rgba(0, 0, 0, .55);
    --foco: 0 0 0 3px rgba(192, 132, 224, .4);
    color-scheme: dark;
  }
}

:root[data-tema="oscuro"] {
  --marca: #c084e0;
  --grafico: #a96bc8;
  --marca-fuerte: #d4a5ec;
  --marca-suave: #2a1d33;
  --marca-borde: #4a3557;
  --sobre-marca: #1a0f20;
  --acento: #ef9a62;
  --acento-fuerte: #f4b083;
  --acento-suave: #3a2418;
  --fondo: #120e15;
  --superficie: #1c1720;
  --superficie-2: #221c27;
  --texto: #f3eef6;
  --texto-suave: #b9afc2;
  --texto-tenue: #8c8296;
  --borde: #322a38;
  --borde-fuerte: #463c4e;
  --exito: #4cc38a;
  --exito-suave: #15291f;
  --error: #f2726d;
  --error-suave: #331817;
  --info: #7da2f5;
  --info-suave: #17213a;
  --sombra-1: 0 1px 2px rgba(0, 0, 0, .4);
  --sombra-2: 0 4px 12px rgba(0, 0, 0, .45);
  --sombra-3: 0 12px 32px rgba(0, 0, 0, .55);
  --foco: 0 0 0 3px rgba(192, 132, 224, .4);
  color-scheme: dark;
}

/* ---------------------------------------------------------------------
   Base
   --------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
/* Una entrada del historial que quedó de más: se pasa de largo sin mostrarla (app.js). */
html.mv-saltando body { visibility: hidden; }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--fondo);
  color: var(--texto);
  font-family: var(--fuente);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

img, svg { display: block; max-width: 100%; }

/* Que "hidden" gane siempre: un display:flex de un componente lo pisaba y
   aparecían botones que tenían que estar ocultos. */
[hidden] { display: none !important; }
a { color: var(--marca); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--marca-fuerte); }

h1, h2, h3 { line-height: 1.2; margin: 0 0 .5em; letter-spacing: -.01em; }
h1 { font-size: clamp(1.5rem, 1.2rem + 1.5vw, 2rem); font-weight: 800; }
h2 { font-size: 1.25rem; font-weight: 700; }
h3 { font-size: 1.05rem; font-weight: 700; }
p { margin: 0 0 1em; }

:focus-visible { outline: none; box-shadow: var(--foco); border-radius: var(--radio-s); }

.icono {
  width: 22px; height: 22px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.icono-s { width: 18px; height: 18px; }

.visualmente-oculto {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

.saltar-contenido {
  position: absolute; left: 12px; top: -48px; z-index: 100;
  background: var(--marca); color: var(--sobre-marca); padding: 10px 16px; border-radius: var(--radio-s);
}
.saltar-contenido:focus { top: 12px; }

/* ---------------------------------------------------------------------
   Estructura
   --------------------------------------------------------------------- */

.contenedor { width: 100%; max-width: var(--ancho-max); margin: 0 auto; padding: 0 16px; }

.encabezado {
  position: sticky; top: 0; z-index: 40;
  height: var(--alto-encabezado);
  background: color-mix(in srgb, var(--superficie) 88%, transparent);
  backdrop-filter: saturate(1.4) blur(10px);
  -webkit-backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--borde);
}
.encabezado .contenedor { height: 100%; display: flex; align-items: center; gap: 12px; }
.encabezado-logo { display: flex; align-items: center; height: 36px; margin-right: auto; }
.encabezado-logo img { height: 34px; width: auto; }
/* El logo violeta no se lee sobre fondo oscuro: ahí va la versión blanca. */
.logo-oscuro { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) .logo-claro { display: none; }
  :root:not([data-tema="claro"]) .logo-oscuro { display: block; }
}
:root[data-tema="oscuro"] .logo-claro { display: none; }
:root[data-tema="oscuro"] .logo-oscuro { display: block; }

.nav-principal { display: none; gap: 4px; align-items: center; }
.nav-principal a, .nav-principal button {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 12px; border-radius: var(--radio-redondo);
  color: var(--texto-suave); text-decoration: none; font-weight: 600; font-size: .95rem;
  background: none; border: 0; cursor: pointer; font-family: inherit;
}
.nav-principal a:hover, .nav-principal button:hover { background: var(--marca-suave); color: var(--marca); }
.nav-principal a[aria-current="page"] { color: var(--marca); background: var(--marca-suave); }

.boton-icono {
  display: inline-grid; place-items: center;
  width: 42px; height: 42px; border-radius: var(--radio-redondo);
  border: 0; background: none; color: var(--texto-suave); cursor: pointer;
}
.boton-icono:hover { background: var(--marca-suave); color: var(--marca); }

main { padding: 20px 0 calc(var(--alto-nav) + 32px); }

/* Barra inferior: la navegación del celular, al alcance del pulgar. */
.nav-inferior {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  height: calc(var(--alto-nav) + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom);
  display: grid; grid-template-columns: repeat(4, 1fr);
  background: var(--superficie);
  border-top: 1px solid var(--borde);
  box-shadow: 0 -2px 12px rgba(30, 21, 36, .05);
}
.nav-inferior a {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  color: var(--texto-tenue); text-decoration: none; font-size: .72rem; font-weight: 600;
}
.nav-inferior a[aria-current="page"] { color: var(--marca); }
.nav-inferior a[aria-current="page"] .icono { stroke-width: 2.4; }

.pie {
  border-top: 1px solid var(--borde); color: var(--texto-tenue);
  font-size: .85rem; padding: 24px 0 calc(var(--alto-nav) + 24px);
}
.pie .contenedor { display: flex; flex-wrap: wrap; gap: 8px 20px; justify-content: space-between; }
.pie a { color: var(--texto-suave); text-decoration: none; }
.pie a:hover { color: var(--marca); }

@media (min-width: 900px) {
  .nav-principal { display: flex; }
  .nav-inferior { display: none; }
  main { padding-bottom: 48px; }
  .pie { padding-bottom: 24px; }
}

/* ---------------------------------------------------------------------
   Botones
   --------------------------------------------------------------------- */

.boton {
  --b-fondo: var(--marca); --b-texto: var(--sobre-marca); --b-borde: transparent;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 20px;
  border: 1px solid var(--b-borde); border-radius: var(--radio);
  background: var(--b-fondo); color: var(--b-texto);
  font: inherit; font-weight: 700; font-size: 1rem; text-decoration: none;
  cursor: pointer; user-select: none;
  transition: background-color .15s, border-color .15s, transform .05s, box-shadow .15s;
}
.boton:hover { --b-fondo: var(--marca-fuerte); color: var(--b-texto); }
.boton:active { transform: translateY(1px); }
.boton[disabled], .boton[aria-busy="true"] { opacity: .65; cursor: progress; }

.boton-secundario { --b-fondo: var(--superficie); --b-texto: var(--marca); --b-borde: var(--marca-borde); }
.boton-secundario:hover { --b-fondo: var(--marca-suave); --b-texto: var(--marca); }
.boton-acento { --b-fondo: var(--acento); --b-texto: #fff; }
.boton-acento:hover { --b-fondo: var(--acento-fuerte); }
.boton-fantasma { --b-fondo: transparent; --b-texto: var(--texto-suave); }
.boton-fantasma:hover { --b-fondo: var(--marca-suave); --b-texto: var(--marca); }
.boton-peligro { --b-fondo: var(--error); --b-texto: #fff; }
.boton-bloque { display: flex; width: 100%; }
.boton-chico { min-height: 38px; padding: 0 14px; font-size: .9rem; border-radius: var(--radio-s); }

.boton[aria-busy="true"]::before {
  content: ""; width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid currentColor; border-right-color: transparent;
  animation: girar .7s linear infinite;
}
@keyframes girar { to { transform: rotate(360deg); } }

/* La ruedita de "cargando" (los comentarios del visor, el paso de página). */
.ruedita {
  display: block; width: 36px; height: 36px; border-radius: 50%;
  border: 3px solid var(--marca-borde); border-top-color: var(--marca);
  animation: girar .8s linear infinite;
}
/* Pasar de página (app.js): blanca y desenfocada, encima de todo. */
.cargando-pagina {
  position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center;
  background: color-mix(in srgb, var(--fondo) 55%, transparent);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  opacity: 0; visibility: hidden; transition: opacity .15s, visibility 0s .15s;
}
.cargando-pagina.visible { opacity: 1; visibility: visible; transition: opacity .15s; }
.cargando-pagina .ruedita { width: 44px; height: 44px; }

.enlace-boton {
  background: none; border: 0; padding: 0; color: var(--marca);
  font: inherit; font-weight: 600; cursor: pointer; text-decoration: underline; text-underline-offset: 2px;
}

/* ---------------------------------------------------------------------
   Formularios
   --------------------------------------------------------------------- */

.formulario { display: grid; gap: 18px; }

.campo { display: grid; gap: 6px; }
.campo > label, .campo-etiqueta { font-weight: 650; font-size: .92rem; color: var(--texto); }
.campo-ayuda { font-size: .84rem; color: var(--texto-tenue); margin: 0; }
.campo-error {
  display: flex; gap: 6px; align-items: flex-start;
  font-size: .86rem; color: var(--error); font-weight: 600; margin: 0;
}
.campo-error .icono { width: 16px; height: 16px; margin-top: 2px; }

.entrada, .selector, .area {
  width: 100%; min-height: 48px; padding: 12px 14px;
  border: 1px solid var(--borde-fuerte); border-radius: var(--radio);
  background: var(--superficie); color: var(--texto);
  font: inherit; font-size: 1rem;
  transition: border-color .15s, box-shadow .15s;
}
.area { min-height: 110px; resize: vertical; }
.selector {
  appearance: none; padding-right: 40px; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--texto-suave) 50%),
                    linear-gradient(135deg, var(--texto-suave) 50%, transparent 50%);
  background-position: calc(100% - 20px) 21px, calc(100% - 15px) 21px;
  background-size: 5px 5px; background-repeat: no-repeat;
}
.entrada::placeholder, .area::placeholder { color: var(--texto-tenue); }
.entrada:hover, .selector:hover, .area:hover { border-color: var(--marca-borde); }
.entrada:focus, .selector:focus, .area:focus { outline: none; border-color: var(--marca); box-shadow: var(--foco); }
.campo-con-error .entrada, .campo-con-error .selector, .campo-con-error .area { border-color: var(--error); }

.entrada-con-boton { position: relative; }
.entrada-con-boton .entrada { padding-right: 52px; }
.entrada-con-boton .boton-icono { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); }

.casilla { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; font-size: .95rem; }
.casilla input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--marca); flex: none; }

/* El código de 6 números: grande, centrado y con espacio entre dígitos. */
.entrada-codigo {
  text-align: center; font-size: 1.9rem; font-weight: 800;
  letter-spacing: .45em; padding-left: .45em; font-variant-numeric: tabular-nums;
}

.separador {
  display: flex; align-items: center; gap: 12px;
  color: var(--texto-tenue); font-size: .85rem; margin: 4px 0;
}
.separador::before, .separador::after { content: ""; flex: 1; height: 1px; background: var(--borde); }

/* ---------------------------------------------------------------------
   Tarjetas y avisos
   --------------------------------------------------------------------- */

.tarjeta {
  background: var(--superficie); border: 1px solid var(--borde);
  border-radius: var(--radio-l); box-shadow: var(--sombra-1);
  padding: 20px;
}
@media (min-width: 600px) { .tarjeta { padding: 28px; } }
.tarjeta + .tarjeta { margin-top: 16px; }
.tarjeta-titulo { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.tarjeta-titulo h2 { margin: 0; }

.aviso {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 12px 14px; border-radius: var(--radio);
  border: 1px solid transparent; font-size: .95rem; font-weight: 550;
}
.aviso .icono { margin-top: 1px; }
.aviso-exito { background: var(--exito-suave); color: var(--exito); border-color: color-mix(in srgb, var(--exito) 25%, transparent); }
.aviso-error { background: var(--error-suave); color: var(--error); border-color: color-mix(in srgb, var(--error) 25%, transparent); }
.aviso-info  { background: var(--info-suave);  color: var(--info);  border-color: color-mix(in srgb, var(--info) 25%, transparent); }

/* El banner para instalar la app: sobre la barra del celular; en la PC, una
   tarjeta abajo a la derecha. Con la barra del pedido a la vista, no aparece. */
.instalar {
  position: fixed; z-index: 50; left: 12px; right: 12px;
  bottom: calc(var(--alto-nav) + 12px + env(safe-area-inset-bottom));
  display: flex; align-items: center; gap: 12px; padding: 12px 8px 12px 12px;
  background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio-l); box-shadow: var(--sombra-3);
  animation: instalar-entra .25s ease-out;
}
.instalar[hidden], html.con-pedido .instalar { display: none; }
.instalar > img { width: 48px; height: 48px; border-radius: 12px; flex: none; }
.instalar-texto { flex: 1; min-width: 0; display: grid; gap: 2px; font-size: .88rem; color: var(--texto-suave); line-height: 1.35; }
.instalar-texto strong { color: var(--texto); font-size: .98rem; }
.instalar-texto .icono { display: inline-block; width: 1.05em; height: 1.05em; vertical-align: -3px; color: var(--marca); }
.instalar .boton { flex: none; }
.instalar-cerrar { flex: none; }
@keyframes instalar-entra { from { transform: translateY(16px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .instalar { animation: none; } }
@media (min-width: 900px) {
  .instalar { left: auto; right: 24px; bottom: 24px; width: 400px; }
}

/* Avisos flotantes (toasts): arriba en escritorio, sobre la barra en el celular. */
.avisos-flotantes {
  position: fixed; z-index: 120; left: 12px; right: 12px;
  bottom: calc(var(--alto-nav) + 12px + env(safe-area-inset-bottom));
  display: grid; gap: 8px; pointer-events: none;
}
.avisos-flotantes .aviso {
  pointer-events: auto; box-shadow: var(--sombra-3);
  background: var(--superficie); color: var(--texto); border-color: var(--borde);
  animation: aparecer .25s ease-out;
}
.avisos-flotantes .aviso-exito .icono { color: var(--exito); }
.avisos-flotantes .aviso-error .icono { color: var(--error); }
.avisos-flotantes .aviso-info .icono { color: var(--info); }
/* Todo centrado en vertical: la cruz es un botón de 42 px (cómodo para el
   dedo) y con flex-start el texto de un renglón quedaba arriba, corrido. */
.avisos-flotantes .aviso { align-items: center; padding-top: 6px; padding-bottom: 6px; min-height: 54px; }
.avisos-flotantes .aviso > .icono { margin-top: 0; flex: none; }
.avisos-flotantes .aviso span { flex: 1; padding: 6px 0; }
.avisos-flotantes .aviso button { margin: -2px -8px -2px auto; flex: none; }
/* Un aviso con acción ("Cambiar"): texto en el color de la marca, antes de la cruz. */
.avisos-flotantes .aviso .aviso-accion {
  margin: 0; padding: 10px 8px; min-height: 42px; border: 0; background: none;
  color: var(--marca); font: inherit; font-weight: 700; cursor: pointer;
}
.avisos-flotantes .aviso .aviso-accion + button { margin-left: 0; }
@media (min-width: 900px) {
  .avisos-flotantes { left: auto; right: 24px; bottom: auto; top: calc(var(--alto-encabezado) + 16px); width: 380px; }
}
@keyframes aparecer { from { opacity: 0; transform: translateY(8px); } }
.aviso-saliendo { opacity: 0; transform: translateY(8px); transition: opacity .2s, transform .2s; }

/* ---------------------------------------------------------------------
   Pantallas de cuenta (ingresar, registrarse…)
   --------------------------------------------------------------------- */

.auth { display: grid; place-items: start center; padding: 8px 0 24px; }
.auth-caja { width: 100%; max-width: 440px; }
.auth-cabecera { text-align: center; margin-bottom: 20px; }
.auth-cabecera .icono-grande {
  width: 56px; height: 56px; margin: 0 auto 14px; border-radius: 16px;
  display: grid; place-items: center; background: var(--marca-suave); color: var(--marca);
}
.auth-cabecera .icono-grande .icono { width: 28px; height: 28px; }
.auth-cabecera p { color: var(--texto-suave); margin: 0; }
.auth-pie { text-align: center; margin-top: 20px; color: var(--texto-suave); font-size: .95rem; }

/* "Continuar con Google": blanco con el logo a color, como pide la guía de Google. */
.boton-google { --b-fondo: #fff; --b-texto: #1f1f1f; --b-borde: #747775; font-weight: 600; }
.boton-google:hover { --b-fondo: #f2f2f2; --b-texto: #1f1f1f; }
.boton-google .logo-google { width: 20px; height: 20px; flex: none; }
.nota-google { margin: 8px 0 0; text-align: center; }
.separador-o { display: flex; align-items: center; gap: 12px; margin: 18px 0; color: var(--texto-suave); font-size: .9rem; }
.separador-o::before, .separador-o::after { content: ""; flex: 1; height: 1px; background: var(--borde); }
.fila-entre { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }

/* ---------------------------------------------------------------------
   Portada
   --------------------------------------------------------------------- */

.portada-cabecera {
  border-radius: var(--radio-l);
  background:
    radial-gradient(120% 140% at 100% 0%, color-mix(in srgb, var(--acento) 30%, transparent) 0%, transparent 55%),
    linear-gradient(135deg, #60097b 0%, #3b0550 100%);
  color: #fff; padding: 28px 22px; margin-bottom: 24px; overflow: hidden; position: relative;
}
.portada-cabecera h1 { font-size: clamp(1.6rem, 1.2rem + 2vw, 2.4rem); margin-bottom: 8px; }
.portada-cabecera p { opacity: .9; max-width: 540px; margin-bottom: 18px; }
.portada-cabecera .boton { --b-fondo: #fff; --b-texto: #60097b; }
.portada-cabecera .boton:hover { --b-fondo: #f4ecf8; }
@media (min-width: 900px) { .portada-cabecera { padding: 44px 40px; } }

.seccion-titulo { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 8px 0 14px; }
.seccion-titulo h2 { margin: 0; }
.seccion-titulo span { color: var(--texto-tenue); font-size: .9rem; }

.grilla-empresas { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
@media (min-width: 600px) { .grilla-empresas { gap: 16px; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); } }

.tarjeta-empresa {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px;
  padding: 18px 12px 16px; border-radius: var(--radio-l);
  background: var(--superficie); border: 1px solid var(--borde); box-shadow: var(--sombra-1);
  color: var(--texto); text-decoration: none;
  transition: transform .15s, box-shadow .15s, border-color .15s;
}
.tarjeta-empresa:hover { transform: translateY(-2px); box-shadow: var(--sombra-2); border-color: var(--marca-borde); color: var(--texto); }
.tarjeta-empresa img {
  width: 84px; height: 84px; border-radius: 50%; object-fit: cover;
  background: var(--superficie-2); border: 3px solid var(--superficie); box-shadow: 0 0 0 2px var(--marca-borde);
}
.tarjeta-empresa strong { font-size: .98rem; line-height: 1.25; }
.tarjeta-empresa small { color: var(--texto-tenue); font-size: .8rem; line-height: 1.3; }

.vacio { text-align: center; color: var(--texto-suave); padding: 40px 16px; }
.vacio .icono { width: 40px; height: 40px; margin: 0 auto 10px; color: var(--texto-tenue); }

/* ---------------------------------------------------------------------
   Mi cuenta
   --------------------------------------------------------------------- */

.cuenta { display: grid; gap: 16px; max-width: 720px; margin: 0 auto; }
.cuenta-cabecera { display: flex; align-items: center; gap: 14px; }
.avatar {
  width: 56px; height: 56px; border-radius: 50%; flex: none;
  display: grid; place-items: center;
  background: linear-gradient(135deg, var(--marca), var(--acento)); color: #fff;
  font-weight: 800; font-size: 1.3rem;
}
.cuenta-cabecera h1 { margin: 0; font-size: 1.4rem; }
/* La foto de perfil: una imagen en el mismo círculo que la inicial. */
img.avatar { object-fit: cover; background: var(--superficie-2); }
.avatar-menu { width: 24px; height: 24px; font-size: .75rem; }
.avatar-editable { position: relative; flex: none; }
.avatar-editable .avatar:not(.avatar-chico) { width: 84px; height: 84px; font-size: 2rem; }
.avatar-camara {
  position: absolute; right: -4px; bottom: -4px; width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer;
  background: var(--superficie); color: var(--marca); border: 2px solid var(--marca-borde); box-shadow: var(--sombra-1);
}
.avatar-camara:hover { background: var(--marca-suave); }
.avatar-camara[aria-busy="true"] { opacity: .6; cursor: progress; }
.avatar-camara .icono { width: 18px; height: 18px; }
.cuenta-cabecera form { margin: 4px 0 0; }
.cuenta-cabecera .campo-ayuda { margin: 4px 0 0; }
.cuenta-cabecera p { margin: 0; color: var(--texto-suave); }
.etiqueta {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 10px; border-radius: var(--radio-redondo);
  font-size: .78rem; font-weight: 700;
}
.etiqueta-exito { background: var(--exito-suave); color: var(--exito); }
.etiqueta-alerta { background: var(--acento-suave); color: var(--acento-fuerte); }

/* ---------------------------------------------------------------------
   Errores
   --------------------------------------------------------------------- */

.pagina-error { text-align: center; padding: 48px 16px; max-width: 520px; margin: 0 auto; }
.pagina-error .codigo { font-size: 4.5rem; font-weight: 900; line-height: 1; color: var(--marca); opacity: .9; }
.pagina-error pre { text-align: left; font-size: .75rem; overflow: auto; background: var(--superficie-2); padding: 12px; border-radius: var(--radio); }

/* ---------------------------------------------------------------------
   Piezas comunes de las pantallas de gestión
   --------------------------------------------------------------------- */

.volver {
  display: inline-flex; align-items: center; gap: 4px; margin-bottom: 12px;
  color: var(--texto-suave); text-decoration: none; font-weight: 600; font-size: .92rem;
}
.volver:hover { color: var(--marca); }

.pagina-cabecera { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }
.pagina-cabecera h1 { margin: 0; }
.pagina-cabecera p { margin: 4px 0 0; color: var(--texto-suave); }
.bajada { color: var(--texto-suave); margin-top: -4px; }
.formulario-angosto { max-width: 560px; margin: 0 auto; }

.vacio-grande { text-align: center; max-width: 520px; margin: 24px auto; }
.vacio-grande .icono-grande {
  width: 64px; height: 64px; margin: 0 auto 14px; border-radius: 18px;
  display: grid; place-items: center; background: var(--marca-suave); color: var(--marca);
}
.vacio-grande .icono-grande .icono { width: 32px; height: 32px; }
.vacio-grande p { color: var(--texto-suave); }

.etiqueta-suave { background: var(--marca-suave); color: var(--marca); }
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 12px; border-radius: var(--radio-redondo);
  background: var(--superficie-2); border: 1px solid var(--borde);
  font-size: .85rem; font-weight: 600; color: var(--texto-suave);
}
.chip .icono { width: 15px; height: 15px; }
.chip-abierto { color: var(--exito); border-color: color-mix(in srgb, var(--exito) 35%, transparent); background: var(--exito-suave); }
.chip-cerrado { color: var(--texto-suave); }
.chip .punto { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }

.campo-ok { color: var(--exito); font-weight: 600; font-size: .86rem; margin: 0; }
.casilla-chica { font-size: .88rem; }
/* Panel › Estados: el que la administración promocionó. */
.estado-publicidad { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 6px; font-size: .82rem; color: var(--texto-suave); }
/* Notificaciones: activar y, con los avisos activos, la prueba. */
.avisos-push-botones { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
/* Administración › Imágenes: cómo viene la revisión y el botón de probar. */
.revision-estado { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 14px; padding: 12px 14px; border: 1px solid var(--borde); border-radius: var(--radio); background: var(--superficie); }
.revision-estado p { margin: 0; color: var(--texto-suave); font-size: .9rem; }
/* Administración › Publicidad (migración 028). */
.buscar-admin { display: flex; gap: 8px; margin-bottom: 14px; }
.buscar-admin input { flex: 1; min-width: 0; min-height: 38px; padding: 0 12px; border: 1px solid var(--borde); border-radius: var(--radio-s); background: var(--superficie); color: var(--texto); font: inherit; }
.promocion-alta { display: grid; gap: 16px; }
.promocion-alta fieldset { min-width: 0; }
.promocion-estados { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 4px; }
/* position: relative: el radio va absoluto (escondido) y, sin un padre posicionado, se ubicaba contra la página y la ensanchaba a 835 px. */
.promocion-estado { position: relative; flex: none; width: 96px; display: grid; gap: 4px; justify-items: center; cursor: pointer; font-size: .78rem; color: var(--texto-suave); text-align: center; }
.promocion-estado img { width: 72px; height: 128px; object-fit: cover; border-radius: 8px; border: 3px solid transparent; background: var(--superficie-2); }
.promocion-estado input { position: absolute; opacity: 0; pointer-events: none; }
.promocion-estado input:checked + img { border-color: var(--marca); }
.promocion-estado input:focus-visible + img { outline: 2px solid var(--marca); outline-offset: 2px; }
.promocion-estado span { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.promocion-fechas { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.promocion-localidades { display: flex; flex-wrap: wrap; gap: 8px 16px; }
/* Panel › Estados › Programados (migración 026). */
.lista-programados { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.programado { display: flex; gap: 12px; padding: 10px; border: 1px solid var(--borde); border-radius: var(--radio); background: var(--superficie); }
.programado img { width: 54px; height: 96px; object-fit: cover; border-radius: 8px; flex: none; background: var(--superficie-2); }
.programado-cuerpo { min-width: 0; display: grid; gap: 6px; align-content: start; }
.programado-cuerpo p { margin: 0; overflow-wrap: anywhere; }
.programado-cuando { display: flex; align-items: center; gap: 6px; font-weight: 700; }
.programado-fallo .programado-cuando { color: var(--error); }
.programado-texto { color: var(--texto-suave); font-size: .92rem; }
.programado-acciones { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-start; }
.programado-acciones > form { display: contents; }
.programado-cambiar summary { list-style: none; }
.programado-cambiar summary::-webkit-details-marker { display: none; }
.programado-cambiar[open] { flex-basis: 100%; }
.programado-cambiar form { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.programado-cambiar input { min-height: 38px; padding: 0 10px; border: 1px solid var(--borde); border-radius: var(--radio-s); background: var(--superficie); color: var(--texto); font: inherit; }
/* Mi cuenta › Avisos al celular: un grupo de opciones por tipo de aviso. */
.avisos-grupo { border: 0; margin: 0; padding: 0; display: grid; gap: 8px; }
.avisos-grupo legend { font-weight: 700; margin-bottom: 8px; padding: 0; }
.avisos-cuenta { display: grid; gap: 18px; }
.valor-fijo { margin: 0; font-weight: 700; font-size: 1.05rem; }
.contador-caracteres { text-align: right; margin-top: -2px; }
.grupo-campos { border: 0; padding: 0; margin: 0; display: grid; gap: 14px; min-width: 0; }
.grupo-campos legend { font-weight: 700; padding: 0; margin-bottom: 4px; }
.fila-campos { display: grid; grid-template-columns: 1fr 120px; gap: 12px; }

/* El @: el arroba fijo adelante, como parte del campo. */
.entrada-arroba { position: relative; }
.entrada-arroba > span {
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  font-weight: 800; color: var(--marca); pointer-events: none;
}
.entrada-arroba .entrada { padding-left: 32px; font-weight: 650; }
.estado-usuario { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; min-height: 1.4em; }
.estado-usuario.campo-ayuda strong { color: var(--texto-suave); }
.nota-arroba { margin-top: -10px; }

.entrada-buscar { min-height: 42px; padding-top: 8px; padding-bottom: 8px; border-radius: var(--radio) var(--radio) 0 0; border-bottom-style: dashed; }
.entrada-buscar + .selector { border-top-left-radius: 0; border-top-right-radius: 0; margin-top: -7px; }

.logo-editor { display: flex; gap: 16px; align-items: center; }
.logo-vista {
  width: 96px; height: 96px; border-radius: 50%; object-fit: cover; flex: none;
  background: var(--superficie-2); border: 3px solid var(--superficie); box-shadow: 0 0 0 2px var(--marca-borde);
}
.logo-acciones { display: grid; gap: 8px; justify-items: start; }
.logo-acciones .campo-ayuda { margin: 0; }

.ubicacion-fila { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }

/* "Guardar" siempre a mano: en el celular queda pegado sobre la barra inferior. */
.barra-guardar {
  position: sticky; bottom: calc(var(--alto-nav) + env(safe-area-inset-bottom) + 8px); z-index: 20;
  display: flex; justify-content: flex-end; margin-top: 16px;
}
.barra-guardar .boton { box-shadow: var(--sombra-3); }
@media (max-width: 899px) { .barra-guardar .boton { width: 100%; } }
@media (min-width: 900px) { .barra-guardar { bottom: 16px; } }

.zona-peligro { margin-top: 28px; border-color: color-mix(in srgb, var(--error) 30%, var(--borde)); }
.zona-peligro h2 { font-size: 1.05rem; }
.zona-peligro p { color: var(--texto-suave); }
.boton-peligro-suave { --b-fondo: var(--error-suave); --b-texto: var(--error); --b-borde: color-mix(in srgb, var(--error) 30%, transparent); }
.boton-peligro-suave:hover { --b-fondo: var(--error); --b-texto: #fff; }
.boton-peligro:hover { --b-fondo: color-mix(in srgb, var(--error) 85%, #000); }
.boton-whatsapp { --b-fondo: #1f9d55; --b-texto: #fff; }
.boton-whatsapp:hover { --b-fondo: #188046; }

/* ---------------------------------------------------------------------
   Mis comercios y panel
   --------------------------------------------------------------------- */

.lista-comercios { display: grid; gap: 12px; }
.tarjeta-comercio {
  display: flex; align-items: center; gap: 14px; padding: 14px 16px;
  background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio-l);
  box-shadow: var(--sombra-1); color: var(--texto); text-decoration: none;
  transition: border-color .15s, box-shadow .15s;
}
.tarjeta-comercio:hover { border-color: var(--marca-borde); box-shadow: var(--sombra-2); color: var(--texto); }
.tarjeta-comercio img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; flex: none; background: var(--superficie-2); }
.tarjeta-comercio-texto { display: grid; gap: 2px; min-width: 0; flex: 1; }
.tarjeta-comercio-texto strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tarjeta-comercio-texto > span:not(.estado-abono) { color: var(--texto-tenue); font-size: .88rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tarjeta-comercio .flecha { color: var(--texto-tenue); }

.estado-abono { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: .85rem; font-weight: 600; margin: 0; }
.estado-abono .icono { width: 16px; height: 16px; }
.estado-abono-ok { color: var(--exito); }
.estado-abono-vencido { color: var(--error); }

.panel-cabecera { margin-bottom: 16px; }
.panel-identidad { display: flex; align-items: center; gap: 14px; margin-bottom: 8px; }
.panel-identidad img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; background: var(--superficie-2); flex: none; }
.panel-identidad h1 { margin: 0; font-size: 1.35rem; }
.arroba { display: inline-flex; align-items: center; gap: 2px; color: var(--marca); font-weight: 700; text-decoration: none; margin: 0; }

.solapas {
  display: flex; gap: 4px; margin-top: 14px; overflow-x: auto; scrollbar-width: none;
  border-bottom: 1px solid var(--borde);
}
.solapas a {
  padding: 10px 14px; white-space: nowrap; text-decoration: none; font-weight: 650;
  color: var(--texto-suave); border-bottom: 3px solid transparent; margin-bottom: -1px;
}
.solapas a:hover { color: var(--marca); }
.solapas a[aria-current="page"] { color: var(--marca); border-bottom-color: var(--marca); }

.panel-formulario { display: grid; gap: 16px; }
.panel-formulario .tarjeta + .tarjeta { margin-top: 0; }

/* Horarios */
.semana { display: grid; gap: 10px; margin: 16px 0; }
.dia {
  border: 1px solid var(--borde); border-radius: var(--radio); padding: 10px 12px; margin: 0;
  display: grid; grid-template-columns: 96px 1fr; gap: 6px 12px; align-items: start;
}
.dia legend { float: left; padding: 0; font-weight: 700; padding-top: 10px; }
.dia .turnos { display: grid; gap: 8px; grid-column: 2; min-width: 0; }
.dia-acciones { grid-column: 2; display: flex; flex-wrap: wrap; gap: 4px 18px; font-size: .88rem; }
.dia .campo-error { grid-column: 1 / -1; }
/* Desde/hasta y la cruz en una grilla: las dos horas se reparten lo que
   haya y nunca pasan del borde (en el iPhone el campo de hora trae un ancho
   propio que, en una fila flex, empujaba la cruz afuera). En la PC no se
   estiran: una hora no necesita 400 px. */
.turno {
  display: grid; grid-template-columns: minmax(0, 150px) auto minmax(0, 150px) auto;
  align-items: center; gap: 8px; justify-content: start;
}
.turno[hidden] { display: none; }
.entrada-hora {
  min-height: 42px; padding: 8px 10px; width: 100%; min-width: 0; display: block;
  -webkit-appearance: none; appearance: none;
}
.entrada-hora::-webkit-date-and-time-value { text-align: left; }
@media (max-width: 480px) {
  .dia { grid-template-columns: minmax(0, 1fr); padding: 10px; }
  .dia .turnos, .dia-acciones { grid-column: 1; }
  .dia legend { padding-top: 0; }
  .turno { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto; gap: 6px; justify-content: stretch; }
  .entrada-hora { padding-left: 8px; padding-right: 6px; text-align: center; }
  /* El relojito de Chrome se come la mitad del campo; en el celular tocar el
     campo ya abre el selector de hora del teléfono. */
  .entrada-hora::-webkit-calendar-picker-indicator { display: none; }
  .entrada-hora::-webkit-date-and-time-value { text-align: center; }
}

/* Colaboradores */
.enlace-nuevo { border-color: var(--exito); }
.enlace-nuevo .tarjeta-titulo { color: var(--exito); }
.enlace-caja .entrada { font-family: ui-monospace, monospace; font-size: .85rem; }
.acciones-fila { display: flex; flex-wrap: wrap; gap: 10px; margin: 12px 0 4px; }

.lista-personas { list-style: none; padding: 0; margin: 0 0 16px; display: grid; }
.lista-personas li { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--borde); }
.lista-personas li:last-child { border-bottom: 0; }
.lista-personas li > div { flex: 1; display: grid; min-width: 0; }
.lista-personas small { color: var(--texto-tenue); overflow: hidden; text-overflow: ellipsis; }
.avatar-chico { width: 40px; height: 40px; font-size: 1rem; }

.invitacion { text-align: center; display: grid; gap: 12px; }
.invitacion h1 { margin: 0; }
.invitacion-logo { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; margin: 0 auto; background: var(--superficie-2); }
.invitacion .arroba { justify-content: center; }
.invitacion .aviso { text-align: left; }

/* ---------------------------------------------------------------------
   Perfil público
   --------------------------------------------------------------------- */

.perfil-aviso { margin-bottom: 16px; }
.perfil-cabecera {
  position: relative; text-align: center; overflow: hidden;
  background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio-l);
  box-shadow: var(--sombra-1); padding: 0 20px 22px;
}
.perfil-portada {
  height: 110px; margin: 0 -20px;
  background:
    radial-gradient(120% 160% at 100% 0%, color-mix(in srgb, #d06b2e 45%, transparent) 0%, transparent 60%),
    linear-gradient(135deg, #60097b, #3b0550);
}
.perfil-logo {
  width: 120px; height: 120px; border-radius: 50%; object-fit: cover; margin: -60px auto 10px;
  position: relative; background: var(--superficie); border: 4px solid var(--superficie); box-shadow: var(--sombra-2);
}
.perfil-cabecera h1 { margin: 0; }
.perfil-cabecera .arroba { justify-content: center; margin: 2px 0 12px; }
.perfil-chips { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.perfil-descripcion { max-width: 620px; margin: 14px auto 0; color: var(--texto-suave); }
.perfil-acciones { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 18px; }
@media (max-width: 599px) { .perfil-acciones .boton { flex: 1 1 100%; } }

.perfil-cuerpo { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; margin-top: 16px; }
@media (min-width: 900px) {
  .perfil-cuerpo { grid-template-columns: minmax(0, 1fr) 340px; align-items: start; }
  .perfil-info { grid-column: 2; grid-row: 1; position: sticky; top: calc(var(--alto-encabezado) + 16px); }
}
.perfil-info { display: grid; gap: 16px; }
.perfil-info .tarjeta { padding: 20px; }
.perfil-seccion h2 { display: flex; align-items: center; gap: 8px; }
.contador { font-size: .8rem; font-weight: 700; padding: 1px 8px; border-radius: var(--radio-redondo); background: var(--marca-suave); color: var(--marca); }

.horarios { margin: 0; display: grid; gap: 2px; }
.horarios div { display: flex; justify-content: space-between; gap: 12px; padding: 6px 8px; border-radius: var(--radio-s); }
.horarios dt { font-weight: 600; color: var(--texto-suave); }
.horarios dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
.horarios .hoy { background: var(--marca-suave); }
.horarios .hoy dt, .horarios .hoy dd { color: var(--marca); font-weight: 700; }

.lista-contacto { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.lista-contacto li { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
.lista-contacto li span { color: var(--texto-suave); }
.lista-contacto a { font-weight: 650; white-space: nowrap; }

/* El catálogo por secciones (perfil): chips para saltar y un título por grupo. */
.chips-secciones { display: flex; gap: 8px; overflow-x: auto; padding: 2px 0 10px; scrollbar-width: none; }
.chips-secciones::-webkit-scrollbar { display: none; }
.chips-secciones .chip { flex: none; display: inline-flex; align-items: center; gap: 6px; text-decoration: none; }
.chips-secciones[hidden] { display: none; }
.grupo-catalogo { scroll-margin-top: calc(var(--alto-encabezado) + 12px); }
.grupo-catalogo + .grupo-catalogo { margin-top: 20px; }
.grupo-catalogo h3 { margin: 0 0 10px; font-size: 1.05rem; }
.grupo-catalogo[hidden], .producto[hidden] { display: none; }
.buscar-catalogo { position: relative; margin-bottom: 10px; }
.buscar-catalogo .icono { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--texto-suave); }
.buscar-catalogo .entrada { padding-left: 36px; }
/* El empujón para completar el catálogo (panel). */
.completar-catalogo { display: grid; gap: 8px; margin-bottom: 12px; }
.completar-cabecera { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.completar-cabecera h3 { margin: 0; }
.completar-porcentaje { font-weight: 800; color: var(--marca); font-variant-numeric: tabular-nums; }
.completar-barra { height: 8px; border-radius: 999px; background: var(--marca-suave); overflow: hidden; }
.completar-barra i { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--marca); transition: width .4s ease-out; }
.completar-faltas { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
.completar-faltas .chip { text-decoration: none; }
.filtro-faltan a { font-weight: 700; }
/* Las secciones en el panel: la ventana «Secciones…» y las pestañas de la lista. */
.catalogo-botones { display: flex; gap: 8px; flex-wrap: wrap; }
@media (max-width: 599px) {
  .catalogo-botones { width: 100%; flex-wrap: nowrap; }
  .catalogo-botones .boton { flex: 1; padding-inline: 8px; gap: 6px; white-space: nowrap; font-size: .95rem; }
}
.dialogo-secciones { width: min(480px, calc(100vw - 32px)); max-height: calc(100dvh - 48px); }
.dialogo-secciones-cabecera { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 12px; }
.dialogo-secciones-cabecera .dialogo-mensaje { margin: 0; }
.lista-secciones { list-style: none; margin: 12px 0; padding: 0; display: grid; }
.lista-secciones li { padding: 6px 0; border-bottom: 1px solid var(--borde); }
.lista-secciones li:last-child { border-bottom: 0; }
.seccion-fila { display: flex; align-items: center; gap: 2px; min-height: 40px; }
.seccion-titulo { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.seccion-fila .boton-icono { width: 36px; height: 36px; flex: none; }
.seccion-fila .boton-icono[disabled] { opacity: .3; cursor: default; }
.seccion-editar { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; min-width: 0; }
.seccion-editar[hidden], .seccion-fila[hidden] { display: none; }
.seccion-editar .entrada { min-width: 0; flex: 1 1 200px; }
.seccion-cuenta { font-size: .85rem; color: var(--texto-suave); font-weight: 400; }
.seccion-nueva { margin-top: 10px; }
.seccion-recien { animation: seccion-recien 1.6s ease-out; }
@keyframes seccion-recien { from { background: var(--marca-suave); } to { background: transparent; } }
.dialogo-secciones .campo-error { margin: 10px 0 0; }
/* Distintas de las solapas del panel: pastillas que se desplazan de costado. */
.pestanias-catalogo { position: relative; display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin: 0 0 12px; padding: 2px 0; }
.pestanias-catalogo a {
  flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 6px 14px;
  border-radius: var(--radio-redondo); border: 1px solid var(--borde); background: var(--superficie);
  color: var(--texto-suave); font-weight: 650; font-size: .92rem; text-decoration: none; white-space: nowrap;
}
.pestanias-catalogo a:hover { border-color: var(--marca-borde); color: var(--marca); }
.pestanias-catalogo a[aria-current="page"] { background: var(--marca); border-color: var(--marca); color: var(--sobre-marca); }
.pestanias-catalogo b { font-weight: inherit; }
.pestanias-catalogo span { font-size: .8rem; opacity: .75; font-weight: 600; }
.catalogo-pestania-vacia { color: var(--texto-suave); margin: 0; }
.campo-seccion { display: grid; gap: 8px; }
/* Oferta y agotado (la tarjeta y la ficha). */
.producto-abrir { position: relative; }
.producto-marca {
  position: absolute; top: 8px; left: 8px; padding: 3px 8px; border-radius: 999px;
  font-size: .78rem; font-weight: 800; line-height: 1.3; box-shadow: var(--sombra-1);
}
.producto-marca-oferta { background: #e8461e; color: #fff; }
.producto-marca-agotado { background: var(--superficie); color: var(--texto); border: 1px solid var(--borde); }
.producto-agotado img { filter: grayscale(1); opacity: .6; }
.producto-agotado .precio { color: var(--texto-suave); }
.precio-anterior { font-size: .85em; font-weight: 600; color: var(--texto-suave); }
.hoja-agotado { margin: 4px 0 8px; padding: 12px 14px; border-radius: var(--radio); background: var(--superficie-2); color: var(--texto-suave); font-weight: 600; }
.boton-agotado {
  padding: 4px 10px; border-radius: 999px; border: 1px solid var(--borde); background: none; color: var(--texto-suave);
  font: inherit; font-size: .78rem; font-weight: 700; cursor: pointer;
}
.boton-agotado[aria-pressed="true"] { background: var(--texto); border-color: var(--texto); color: var(--superficie); }
.productos-rubro { margin-bottom: 20px; }
.grilla-productos { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.producto {
  background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio-l);
  overflow: hidden; box-shadow: var(--sombra-1); display: flex; flex-direction: column;
}
.producto img { width: 100%; aspect-ratio: 1; object-fit: cover; background: var(--superficie-2); }
.producto-texto { padding: 10px 12px 12px; display: grid; gap: 2px; }
.producto-texto strong { font-size: .95rem; line-height: 1.25; }
.precio { color: var(--marca); font-weight: 800; }

/* ---------------------------------------------------------------------
   Estados: anillos, novedades de la portada y visor
   --------------------------------------------------------------------- */

/* El anillo de color avisa que hay estados sin ver; gris cuando ya se vieron. */
.anillo {
  display: inline-grid; place-items: center; padding: 3px; border-radius: 50%; border: 0; cursor: pointer;
  background: conic-gradient(from 210deg, #d06b2e, #f0a06a, #b746c0, #60097b, #d06b2e);
}
.anillo img { border: 3px solid var(--superficie); border-radius: 50%; object-fit: cover; background: var(--superficie); }
.anillo-visto { background: var(--borde-fuerte); }
.anillo-grande { margin: -64px auto 10px; position: relative; }
.anillo-grande .perfil-logo { margin: 0; border-width: 3px; box-shadow: none; }

.novedades { margin: -6px -16px 18px; }
.novedades-fila {
  display: flex; gap: 14px; overflow-x: auto; padding: 4px 16px 8px; scroll-snap-type: x proximity;
  scrollbar-width: none;
}
.novedades-fila::-webkit-scrollbar { display: none; }
.novedad {
  flex: none; width: 78px; display: grid; justify-items: center; gap: 6px; scroll-snap-align: start;
  background: none; border: 0; padding: 0; cursor: pointer; color: var(--texto); font: inherit;
}
.novedad .anillo { width: 74px; height: 74px; }
.novedad img { width: 68px; height: 68px; }
.novedad-nombre {
  font-size: .76rem; font-weight: 600; line-height: 1.2; text-align: center;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
@media (min-width: 900px) { .novedades { margin: 0 0 22px; } .novedades-fila { padding-left: 0; padding-right: 0; } }

/* "+ Agregá un estado", bien a la izquierda y quieto: la fila de los demás se
   desplaza a su lado. Con varios comercios despliega la lista para elegir. */
.novedades { display: flex; align-items: flex-start; }
.novedades-fila { flex: 1; min-width: 0; }
.novedad-agregar { position: relative; margin: 4px 0 8px 16px; text-decoration: none; }
.novedad-agregar summary { list-style: none; display: grid; justify-items: center; gap: 6px; cursor: pointer; }
.novedad-agregar summary::-webkit-details-marker { display: none; }
.novedad-agregar-logo { position: relative; display: grid; place-items: center; width: 74px; height: 74px; }
.novedad-agregar-logo img { width: 68px; height: 68px; border-radius: 50%; object-fit: cover; border: 1px solid var(--borde); opacity: .9; }
.novedad-agregar-logo .icono {
  position: absolute; right: 0; bottom: 0; width: 24px; height: 24px; padding: 4px; border-radius: 50%;
  background: var(--marca); color: var(--sobre-marca); border: 3px solid var(--fondo); box-sizing: content-box;
}
.novedad-agregar-lista {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 30; width: min(280px, calc(100vw - 32px));
  display: grid; padding: 6px; border-radius: 12px; background: var(--superficie); border: 1px solid var(--borde);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .18);
}
.novedad-agregar-lista p { margin: 4px 8px 6px; font-size: .8rem; color: var(--texto-suave); }
.novedad-agregar-lista a {
  display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 8px; color: var(--texto);
  text-decoration: none; font-weight: 600; font-size: .92rem; min-width: 0;
}
.novedad-agregar-lista a:hover, .novedad-agregar-lista a:focus-visible { background: var(--fondo); }
.novedad-agregar-lista img { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; flex: none; }
.novedad-agregar-lista span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (min-width: 900px) { .novedad-agregar { margin-left: 0; margin-right: 14px; } }

html.visor-abierto, html.visor-abierto body { overflow: hidden; }
.visor {
  position: fixed; inset: 0; z-index: 100; background: #000; color: #fff;
  display: grid; place-items: center; touch-action: none; user-select: none;
}
.visor[hidden] { display: none; }
.visor-marco {
  position: relative; width: 100%; height: 100%; max-width: 480px; display: flex; flex-direction: column;
  background: #111;
}
@media (min-width: 600px) { .visor-marco { height: min(100%, 900px); border-radius: 14px; overflow: hidden; } }
.visor-barras { position: absolute; top: 8px; left: 8px; right: 8px; z-index: 3; display: flex; gap: 4px; }
.visor-barras span { flex: 1; height: 3px; border-radius: 2px; background: rgba(255, 255, 255, .35); overflow: hidden; }
.visor-barras i { display: block; height: 100%; width: 0; background: #fff; }
.visor-cabecera {
  position: absolute; top: 18px; left: 0; right: 0; z-index: 3; display: flex; align-items: center; gap: 4px;
  padding: 0 8px 0 12px;
}
.visor-empresa { display: flex; align-items: center; gap: 10px; color: #fff; text-decoration: none; margin-right: auto; min-width: 0; }
/* Siempre blanco: el a:hover general lo pintaba del color de la marca sobre la foto. */
.visor-empresa:hover, .visor-empresa:focus-visible { color: #fff; }
.visor-empresa img { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; border: 2px solid #fff; background: #fff; flex: none; }
.visor-empresa span { display: grid; line-height: 1.2; min-width: 0; }
.visor-empresa strong { font-size: .95rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-shadow: 0 1px 3px rgba(0,0,0,.6); }
.visor-empresa small { font-size: .78rem; opacity: .85; text-shadow: 0 1px 3px rgba(0,0,0,.6); }
/* El tema que suena, bajo la hora (el crédito que pide su licencia). */
.visor-empresa .visor-musica { display: flex; align-items: center; gap: 4px; min-width: 0; }
.visor-empresa .visor-musica[hidden] { display: none; }
.visor-empresa .visor-musica .icono { width: 12px; height: 12px; flex: none; }
.visor-empresa .visor-musica span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.visor-boton {
  display: inline-flex; align-items: center; gap: 6px; min-width: 44px; height: 44px; justify-content: center;
  background: none; border: 0; color: #fff; cursor: pointer; font: inherit; font-weight: 700; border-radius: 22px;
}
.visor-boton .icono { filter: drop-shadow(0 1px 2px rgba(0,0,0,.6)); }
.visor-pausado [data-pausa] { background: rgba(255,255,255,.2); }
.visor-escena { position: relative; flex: 1; min-height: 0; display: grid; place-items: center; overflow: hidden; }
/* Encima de la escena y del tamaño exacto de ella: con height:100% dentro de la
   grilla, la fila crecía al alto natural de la foto y en la PC se veía la mitad.
   object-fit: contain la muestra entera, con negro donde no llega. */
.visor-imagen { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
.visor-cargando {
  position: absolute; width: 40px; height: 40px; border-radius: 50%;
  border: 3px solid rgba(255,255,255,.3); border-top-color: #fff; animation: girar .8s linear infinite;
}
.visor-texto {
  position: absolute; left: 0; right: 0; bottom: 76px; z-index: 2; margin: 0; padding: 28px 18px 12px;
  background: linear-gradient(transparent, rgba(0,0,0,.75)); font-size: 1.05rem; font-weight: 600;
  white-space: pre-line; pointer-events: none; text-shadow: 0 1px 2px rgba(0,0,0,.5);
}
/* "¿Te gustó? Seguilo" al terminar los estados de un comercio (visor.js). */
.visor-seguir {
  position: absolute; inset: 0; z-index: 8; display: grid; place-items: center; padding: 24px;
  background: rgba(0, 0, 0, .6); backdrop-filter: blur(3px);
}
.visor-seguir[hidden] { display: none; }
.visor-seguir-tarjeta {
  width: min(320px, 100%); display: grid; justify-items: center; gap: 10px; padding: 24px 20px 16px;
  border-radius: var(--radio-l); background: var(--superficie); color: var(--texto); text-align: center;
  box-shadow: var(--sombra-3); animation: aparecer .2s ease-out;
}
.visor-seguir-tarjeta img { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; }
.visor-seguir-titulo { margin: 0; font-size: 1.15rem; font-weight: 700; }
.visor-seguir-texto { margin: 0 0 6px; color: var(--texto-suave); }
.visor-seguir-texto strong { color: var(--texto); }
/* "Ver producto" (el que eligió el comercio): abajo a la izquierda; el texto sube. */
.visor-producto {
  position: absolute; left: 12px; right: 12px; bottom: 88px; z-index: 3; max-width: 360px;
  display: flex; align-items: center; gap: 10px; padding: 6px 6px 6px 6px; border-radius: 14px;
  background: rgba(255, 255, 255, .95); color: #1b1720; text-decoration: none; box-shadow: 0 6px 20px rgba(0,0,0,.35);
}
.visor-producto[hidden] { display: none; }
.visor-producto:hover, .visor-producto:focus-visible { color: #1b1720; }
.visor-producto img { width: 44px; height: 44px; border-radius: 10px; object-fit: cover; flex: none; }
.visor-producto-texto { display: grid; min-width: 0; flex: 1; line-height: 1.25; }
.visor-producto-texto strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .92rem; }
.visor-producto-texto small { font-weight: 700; color: #5d5466; }
.visor-producto-ver { flex: none; padding: 8px 12px; border-radius: 10px; background: #1b1720; color: #fff; font-size: .82rem; font-weight: 700; }
.visor-con-producto .visor-texto { padding-bottom: 80px; }
.visor-con-zoom .visor-producto { opacity: 0; pointer-events: none; transition: opacity .15s; }
.visor-pie { display: flex; align-items: center; gap: 8px; padding: 12px 12px calc(12px + env(safe-area-inset-bottom)); background: #111; }
/* Comentarios: el botón con su cuenta y el cajón que sube desde abajo. */
.visor-comentar { gap: 4px; }
.visor-comentar span { font-size: .9rem; font-weight: 700; }
.visor-comentar span:empty { display: none; }
/* La publicidad (migración 028): donde va "hace 2 h", el cartel. */
.visor-es-publicidad .visor-empresa small {
  display: inline-block; padding: 1px 8px; border-radius: 999px; background: rgba(255, 255, 255, .9); color: #111;
  font-size: .72rem; font-weight: 800; letter-spacing: .02em; width: fit-content; text-shadow: none;
}
.visor-comentarios {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 5; height: min(72%, 560px);
  display: grid; grid-template-rows: auto minmax(0, 1fr) auto auto auto;
  background: #1b1b1b; color: #fff; border-radius: 18px 18px 0 0; box-shadow: 0 -10px 30px rgba(0, 0, 0, .5);
  padding-bottom: env(safe-area-inset-bottom);
}
.visor-comentarios-cabecera { display: flex; align-items: center; justify-content: space-between; padding: 6px 6px 0 16px; }
.visor-comentarios-cabecera h2 { margin: 0; font-size: 1rem; }
.visor-comentarios-cabecera span { color: rgba(255, 255, 255, .6); font-weight: 600; }
.visor-comentarios-lista { list-style: none; margin: 0; padding: 4px 16px 12px; overflow-y: auto; display: grid; align-content: start; gap: 14px; }
.visor-comentarios[aria-busy="true"] .visor-comentarios-lista { opacity: .5; }
/* Sobre el cajón y no en una fila de la grilla: queda en el medio de la lista. */
.visor-comentarios-cargando { position: absolute; inset: 56px 0 72px; display: grid; place-items: center; pointer-events: none; }
.visor-comentarios-cargando[hidden] { display: none; }
.visor-comentarios-cargando .ruedita { border-color: rgba(255, 255, 255, .2); border-top-color: #fff; }
.visor-comentarios-vacio, .visor-comentarios-nota { margin: 0; padding: 10px 16px 14px; color: rgba(255, 255, 255, .7); font-size: .9rem; text-align: center; }
.visor-comentarios-nota a { color: #fff; font-weight: 700; }
.visor-comentario p { margin: 0; overflow-wrap: anywhere; font-size: .92rem; line-height: 1.35; }
.visor-comentario-cabeza { font-size: .82rem !important; display: flex; align-items: center; gap: 6px; }
.visor-comentario-avatar {
  width: 22px; height: 22px; border-radius: 50%; flex: none; object-fit: cover;
  display: inline-grid; place-items: center; font-size: .7rem; font-weight: 800; color: #fff;
  background: linear-gradient(135deg, var(--marca), var(--acento));
}
.visor-comentario-cabeza span { color: rgba(255, 255, 255, .55); }
.visor-comentario-texto { white-space: pre-line; }
.visor-comentario-respuesta {
  margin: 8px 0 0 12px; padding: 8px 10px; border-left: 3px solid var(--acento); border-radius: 0 10px 10px 0;
  background: rgba(255, 255, 255, .06); display: grid; gap: 2px;
}
.visor-comentario-acciones { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 4px; }
.visor-comentario-acciones button { background: none; border: 0; padding: 4px 0; color: rgba(255, 255, 255, .6); font: inherit; font-size: .8rem; font-weight: 700; cursor: pointer; }
.visor-comentario-acciones .peligro { color: #ff8a84; }
.visor-comentario-responder { display: flex; gap: 8px; align-items: flex-end; margin-top: 6px; }
.visor-comentarios-form { display: flex; gap: 8px; align-items: flex-end; padding: 10px 12px; border-top: 1px solid rgba(255, 255, 255, .1); }
.visor-comentarios-form textarea, .visor-comentario-responder textarea {
  flex: 1; min-width: 0; resize: none; max-height: 120px; padding: 10px 14px; border-radius: 20px; border: 0;
  background: rgba(255, 255, 255, .12); color: #fff; font: inherit; font-size: .95rem; line-height: 1.3;
}
.visor-comentarios-form textarea::placeholder { color: rgba(255, 255, 255, .5); }

/* Los tres puntos (sólo en los estados propios): una hoja abajo, como Instagram. */
.visor-opciones {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 5; display: grid; gap: 2px;
  padding: 14px 12px calc(14px + env(safe-area-inset-bottom)); background: #1b1b1b; color: #fff;
  border-radius: 18px 18px 0 0; box-shadow: 0 -10px 30px rgba(0, 0, 0, .5);
}
.visor-opciones-datos { margin: 0 6px 8px; font-size: .85rem; color: rgba(255, 255, 255, .65); }
.visor-opciones [data-opcion]:not(.visor-opciones-cancelar) {
  display: flex; align-items: center; gap: 14px; padding: 12px 10px; border: 0; border-radius: 12px;
  background: none; color: inherit; font: inherit; text-align: left; text-decoration: none; cursor: pointer;
}
.visor-opciones [data-opcion]:not(.visor-opciones-cancelar):hover { background: rgba(255, 255, 255, .08); }
.visor-opciones [data-opcion] .icono { width: 22px; height: 22px; flex: none; }
.visor-opciones [data-opcion] span { display: grid; gap: 2px; }
.visor-opciones small { font-size: .8rem; color: rgba(255, 255, 255, .6); }
.visor-opciones [data-opcion].visor-opcion-peligro { color: #ff6b63; }
.visor-opciones-cancelar {
  margin-top: 8px; padding: 12px; border: 0; border-radius: 12px; background: rgba(255, 255, 255, .1);
  color: #fff; font: inherit; font-weight: 700; cursor: pointer;
}
.visor-responder { flex: 1; min-height: 44px; }
/* El relleno lo trae el ícono "corazon-lleno": el CSS no puede rellenar un
   <use> cuyo símbolo dice fill:none. */
.visor-me-gusta[aria-pressed="true"] { color: #ff3040; }
.visor-me-gusta-latido .icono { animation: latido .35s ease-out; }
/* Los corazoncitos que suben en un estado propio (visor.js, lanzarCorazones):
   la posición, el tamaño y el color los pone el script, la animación también. */
.visor-corazones { position: fixed; inset: 0; z-index: 6; pointer-events: none; overflow: hidden; }
.visor-corazon { position: absolute; display: block; filter: drop-shadow(0 1px 3px rgba(0,0,0,.45)); will-change: transform, opacity; }
.visor-corazon .icono { width: 100%; height: 100%; }
.visor-corazon-emoji { line-height: 1; text-align: center; }

/* Reacciones (visor.js): el emoji de la propia en el botón, y el menú que
   se abre manteniendo apretado el corazón. La posición la pone el script. */
.visor-me-gusta { -webkit-touch-callout: none; }
.visor-reaccion-mia { font-size: 23px; line-height: 1; width: 24px; text-align: center; filter: drop-shadow(0 1px 2px rgba(0,0,0,.5)); }
.visor-me-gusta-latido .visor-reaccion-mia { animation: latido .35s ease-out; }
.visor-reacciones {
  position: fixed; z-index: 7; display: flex; gap: 2px; padding: 6px;
  background: #1c1820; border: 1px solid rgba(255,255,255,.14); border-radius: 999px;
  box-shadow: 0 10px 30px rgba(0,0,0,.45); transform-origin: 24px 100%;
  animation: reacciones-entran .18s ease-out; -webkit-touch-callout: none;
}
.visor-reacciones[hidden] { display: none; }
.visor-reacciones button {
  position: relative; width: 46px; height: 46px; display: grid; place-items: center;
  background: none; border: 0; border-radius: 50%; padding: 0; cursor: pointer;
  transition: transform .14s ease-out;
}
.visor-reaccion-emoji { font-size: 30px; line-height: 1; }
.visor-reacciones button:hover, .visor-reacciones button:focus-visible, .visor-reacciones .visor-reaccion-activa { transform: translateY(-8px) scale(1.3); }
.visor-reacciones button:focus-visible { outline: 2px solid #fff; outline-offset: 1px; }
.visor-reacciones [aria-checked="true"]::after {
  content: ""; position: absolute; bottom: 1px; left: 50%; width: 5px; height: 5px; margin-left: -2.5px; border-radius: 50%; background: #fff;
}
/* El nombre aparece arriba de la que está marcada. */
.visor-reaccion-nombre {
  position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%) scale(.77);
  padding: 3px 8px; border-radius: 999px; background: rgba(0,0,0,.8); color: #fff;
  font-size: .78rem; font-weight: 700; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .12s;
}
.visor-reacciones button:hover .visor-reaccion-nombre, .visor-reacciones button:focus-visible .visor-reaccion-nombre,
.visor-reacciones .visor-reaccion-activa .visor-reaccion-nombre { opacity: 1; }
@keyframes reacciones-entran { from { opacity: 0; transform: translateY(8px) scale(.7); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .visor-reacciones { animation: none; }
  .visor-reacciones button { transition: none; }
}
@keyframes latido { 0% { transform: scale(1); } 40% { transform: scale(1.3); } 100% { transform: scale(1); } }

/* Pasar de comercio: el marco entra desde el costado. */
.visor-entra-derecha { animation: visor-desde-derecha .26s ease-out; }
.visor-entra-izquierda { animation: visor-desde-izquierda .26s ease-out; }
@keyframes visor-desde-derecha { from { transform: translateX(28%); opacity: .3; } to { transform: none; opacity: 1; } }
@keyframes visor-desde-izquierda { from { transform: translateX(-28%); opacity: .3; } to { transform: none; opacity: 1; } }

/* Con zoom: la foto pasa por encima de la cabecera y el pie, como en Instagram. */
/* Mientras se baja para cerrar: esquinas redondeadas, como una tarjeta. */
.visor-arrastrado { border-radius: 18px; overflow: hidden; }
.visor-con-zoom .visor-escena { overflow: visible; z-index: 4; }
.visor-con-zoom .visor-imagen { z-index: 5; }
.visor-con-zoom .visor-cabecera, .visor-con-zoom .visor-barras, .visor-con-zoom .visor-texto, .visor-con-zoom .visor-pie { opacity: 0; transition: opacity .15s; }

/* ---------------------------------------------------------------------
   Panel: estados
   --------------------------------------------------------------------- */

/* El principal a lo ancho y los dos de la cámara en mitades iguales debajo;
   en la PC, los tres en fila. (Los input escondidos son absolutos: no ocupan celda.) */
.selector-fotos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 14px; }
.selector-fotos .boton { justify-content: center; min-width: 0; }
.selector-fotos .boton:first-of-type { grid-column: 1 / -1; }
@media (max-width: 719px) {
  .selector-fotos .boton-secundario { flex-direction: column; gap: 4px; padding: 10px 8px; font-size: .92rem; white-space: nowrap; }
}
.subir-estados { margin-bottom: 22px; }
@media (min-width: 720px) {
  .selector-fotos { display: flex; flex-wrap: wrap; }
  .selector-fotos .boton:first-of-type { grid-column: auto; }
}
.previas { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; margin-top: 16px; }
.previa { position: relative; display: grid; gap: 8px; }
.previa img { width: 100%; aspect-ratio: 9 / 16; object-fit: cover; border-radius: var(--radio); background: var(--superficie-2); }
.previa .area { min-height: 64px; font-size: .9rem; }
.previa-quitar { position: absolute; top: 6px; right: 6px; background: rgba(0,0,0,.55); color: #fff; }
.previa-quitar:hover { background: rgba(0,0,0,.75); color: #fff; }
.subida-progreso { height: 8px; border-radius: 4px; background: var(--marca-suave); overflow: hidden; margin-top: 14px; }
.subida-progreso span { display: block; height: 100%; width: 0; background: var(--marca); transition: width .2s; }
.subir-estados .acciones-fila { margin-top: 14px; }

.grilla-estados { display: grid; grid-template-columns: repeat(auto-fill, minmax(165px, 1fr)); gap: 12px; }
/* min-width: 0 — sin esto, un texto largo en una línea ensancha la tarjeta
   más que su columna y el botón de borrar queda recortado afuera. */
.estado-panel {
  min-width: 0;
  background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio-l);
  overflow: hidden; display: flex; flex-direction: column; box-shadow: var(--sombra-1);
}
.estado-panel > img { width: 100%; aspect-ratio: 9 / 16; object-fit: cover; background: var(--superficie-2); }
.estado-oculto > img { opacity: .4; filter: grayscale(1); }
/* minmax(0, 1fr): la columna de la grilla no crece con el texto del resumen
   (que va en una línea con "…"); si crecía, empujaba el botón de borrar
   afuera de la tarjeta. */
.estado-panel-cuerpo { padding: 10px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.estado-numeros { display: flex; flex-wrap: wrap; gap: 4px 10px; margin: 0; font-size: .82rem; color: var(--texto-suave); align-items: center; }
.estado-numeros span { display: inline-flex; align-items: center; gap: 4px; }
.estado-numeros .icono { width: 15px; height: 15px; }
.estado-cuando { width: 100%; color: var(--texto-tenue); }
/* Cuántas de cada reacción (Servicios\Reacciones). */
.estado-reacciones { display: flex; flex-wrap: wrap; gap: 2px 10px; margin: 0; font-size: .85rem; color: var(--texto-suave); font-variant-numeric: tabular-nums; }
.estado-reacciones > span { display: inline-flex; align-items: center; gap: 3px; }
.estado-texto summary { cursor: pointer; font-size: .88rem; color: var(--texto-suave); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.estado-texto form { display: grid; gap: 6px; margin-top: 6px; }
.estado-texto .area { min-height: 70px; font-size: .9rem; }
.estado-comentarios { font-size: .85rem; }
.estado-comentarios summary { cursor: pointer; color: var(--texto-suave); font-weight: 600; }
.estado-comentarios ul { list-style: none; margin: 6px 0; padding: 0; display: grid; gap: 6px; max-height: 220px; overflow-y: auto; }
.estado-comentarios li { overflow-wrap: anywhere; }
.estado-comentario-respuesta { display: block; margin-top: 2px; color: var(--texto-suave); }
.estado-musica { display: flex; align-items: center; gap: 5px; margin: 0; font-size: .82rem; color: var(--texto-suave); min-width: 0; }
.estado-musica .icono { flex: none; }
.estado-acciones { display: flex; gap: 4px; flex-wrap: wrap; align-items: center; }
.estado-acciones form:last-child { margin-left: auto; }

/* ---------------------------------------------------------------------
   Panel: catálogo
   --------------------------------------------------------------------- */

/* Las fotos del comercio en el panel (solapa "Fotos"). */
.lista-fotos-panel { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.lista-fotos-panel li { display: grid; gap: 8px; padding: 10px; }
.lista-fotos-panel img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--radio); background: var(--marca-suave); }
.foto-epigrafe { display: flex; gap: 6px; }
.foto-epigrafe .entrada { min-width: 0; flex: 1; }
.foto-panel-acciones { display: flex; justify-content: space-between; align-items: center; }
.foto-panel-acciones form { display: flex; gap: 4px; }
.subir-fotos label[aria-busy="true"] { opacity: .6; pointer-events: none; }

/* "Conocenos" en el perfil: una fila de fotos que se desplaza de costado. */
.perfil-principal { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; min-width: 0; }
.fila-fotos {
  list-style: none; margin: 0 -16px; padding: 4px 16px 8px; display: flex; gap: 10px;
  overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: thin;
}
.fila-fotos li { flex: none; width: min(62vw, 240px); scroll-snap-align: start; }
.fila-fotos a { display: block; border-radius: var(--radio-l); overflow: hidden; }
.fila-fotos img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; background: var(--marca-suave); transition: transform .2s; }
.fila-fotos a:hover img { transform: scale(1.03); }
.fila-fotos p { margin: 6px 2px 0; font-size: .88rem; color: var(--texto-suave); line-height: 1.35; }
@media (min-width: 900px) { .fila-fotos { margin: 0; padding: 4px 0 8px; } }

/* La foto en grande (galeria.js). */
.galeria {
  width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0;
  background: #000; color: #fff; overflow: hidden; touch-action: pan-y;
}
.galeria::backdrop { background: #000; }
.galeria-figura { margin: 0; height: 100%; display: grid; grid-template-rows: minmax(0, 1fr) auto; }
.galeria-figura img { width: 100%; height: 100%; object-fit: contain; user-select: none; -webkit-user-drag: none; }
.galeria-figura figcaption {
  display: flex; justify-content: space-between; gap: 12px; align-items: baseline;
  padding: 12px 16px calc(14px + env(safe-area-inset-bottom)); font-size: .95rem;
}
.galeria-cuenta { flex: none; color: rgba(255,255,255,.7); font-variant-numeric: tabular-nums; }
.galeria-boton {
  position: absolute; display: grid; place-items: center; width: 46px; height: 46px; border: 0; border-radius: 50%;
  background: rgba(0,0,0,.45); color: #fff; cursor: pointer;
}
.galeria-boton[hidden] { display: none; }
.galeria-cerrar { top: calc(12px + env(safe-area-inset-top)); right: 12px; }
.galeria-anterior, .galeria-siguiente { top: 50%; transform: translateY(-50%); }
.galeria-anterior { left: 10px; }
.galeria-siguiente { right: 10px; }

/* Las fotos de más de un producto: en el formulario y en la ficha (carrito.js). */
.fotos-extra { list-style: none; margin: 0 0 10px; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.fotos-extra li { display: grid; gap: 4px; justify-items: center; }
.fotos-extra img { width: 96px; height: 96px; object-fit: cover; border-radius: var(--radio); }
.fotos-extra[hidden] { display: none; }
/* Las recién elegidas, todavía sin guardar: con un borde de la marca. */
.fotos-extra-nuevas img { outline: 2px dashed var(--marca-borde); outline-offset: 2px; }
.hoja-fotos { position: relative; }
.hoja-fotos-fila { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.hoja-fotos-fila::-webkit-scrollbar { display: none; }
.hoja-fotos-fila img { flex: none; width: 100%; height: min(52vh, 100vw); object-fit: contain; scroll-snap-align: center; background: var(--superficie-2); }
/* Los chevrones: redondos, blancos y con sombra, para que se vean sobre
   cualquier foto (clara u oscura), en la PC y en el celular. */
.hoja-fotos-anterior, .hoja-fotos-siguiente {
  position: absolute; top: 50%; width: 44px; height: 44px; margin-top: -22px; padding: 0;
  display: grid; place-items: center; border: 0; border-radius: 50%; cursor: pointer;
  background: rgba(255, 255, 255, .92); color: #1e1524; box-shadow: 0 2px 10px rgba(0, 0, 0, .28);
  transition: transform .1s, background-color .15s;
}
.hoja-fotos-anterior { left: 10px; }
.hoja-fotos-siguiente { right: 10px; }
.hoja-fotos-anterior:hover, .hoja-fotos-siguiente:hover { background: #fff; }
.hoja-fotos-anterior:active, .hoja-fotos-siguiente:active { transform: scale(.92); }
.hoja-fotos-anterior .icono, .hoja-fotos-siguiente .icono { width: 24px; height: 24px; }
.hoja-fotos-anterior[hidden], .hoja-fotos-siguiente[hidden] { display: none; }
.hoja-fotos-puntos { position: absolute; left: 0; right: 0; bottom: 10px; display: flex; justify-content: center; gap: 6px; pointer-events: none; }
.hoja-fotos-puntos i { width: 7px; height: 7px; border-radius: 50%; background: color-mix(in srgb, var(--texto) 25%, transparent); }
.hoja-fotos-puntos i.activo { background: var(--marca); transform: scale(1.3); }
.lista-productos { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.lista-productos li {
  display: flex; align-items: center; gap: 12px; padding: 8px 10px;
  background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio);
}
.lista-productos img { width: 56px; height: 56px; border-radius: var(--radio-s); object-fit: cover; flex: none; background: var(--superficie-2); }
.producto-oculto img { opacity: .4; filter: grayscale(1); }
.producto-panel-texto { flex: 1; min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr); }
.producto-panel-texto > a:first-child { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr); color: var(--texto); text-decoration: none; }
.producto-panel-texto strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.producto-panel-texto span { color: var(--texto-tenue); font-size: .88rem; }
.producto-panel-texto b { font-weight: inherit; }
.producto-panel-texto > a:first-child:hover strong { color: var(--marca); }
/* "En un estado desde hoy 14:30 · lo publicó Laura": lleva al estado. */
.producto-en-estado { display: inline-flex; align-items: flex-start; gap: 5px; justify-self: start; max-width: 100%; margin-top: 2px; text-decoration: none; }
.producto-en-estado .icono { color: var(--marca); flex: none; }
.producto-en-estado span { min-width: 0; color: var(--marca); font-weight: 600; font-size: .82rem; }
.producto-en-estado:hover span { text-decoration: underline; }
.producto-panel-acciones { display: flex; align-items: center; }
.producto-panel-acciones form { display: flex; }
.producto-panel-acciones .boton-icono { width: 38px; height: 38px; }
.producto-panel-acciones .boton-icono[disabled] { opacity: .3; cursor: default; }
/* En el celular los botones no entran al lado del nombre: van abajo, a la derecha. */
@media (max-width: 599px) {
  .lista-productos li { flex-wrap: wrap; row-gap: 4px; }
  .producto-panel-acciones { flex: 1 1 100%; justify-content: flex-end; gap: 2px; border-top: 1px solid var(--borde); padding-top: 4px; }
}

.foto-producto { display: flex; gap: 16px; align-items: center; }
.foto-producto img { width: 120px; height: 120px; border-radius: var(--radio); object-fit: cover; background: var(--superficie-2); flex: none; }
.borrar-producto { margin-top: 20px; }

/* ---------------------------------------------------------------------
   Catálogo público y pedido
   --------------------------------------------------------------------- */

.producto { position: relative; }
.producto-abrir { color: var(--texto); text-decoration: none; display: flex; flex-direction: column; flex: 1; }
.producto-abrir:hover strong { color: var(--marca); }
.producto-sumar {
  position: absolute; top: 8px; right: 8px; width: 38px; height: 38px; border-radius: 50%;
  display: grid; place-items: center; border: 0; cursor: pointer; font-weight: 800; font-size: 1.1rem;
  background: var(--superficie); color: var(--marca); box-shadow: var(--sombra-2);
}
.producto-sumar-con { background: var(--marca); color: var(--sobre-marca); }

html.con-pedido main { padding-bottom: calc(var(--alto-nav) + 110px); }
.barra-pedido {
  position: fixed; z-index: 45; left: 12px; right: 12px;
  bottom: calc(var(--alto-nav) + 10px + env(safe-area-inset-bottom));
  display: flex; align-items: center; gap: 12px; padding: 10px 10px 10px 16px;
  background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio-l); box-shadow: var(--sombra-3);
}
.barra-pedido[hidden] { display: none; }
.barra-pedido-resumen { flex: 1; font-weight: 700; font-size: .92rem; }
@media (min-width: 900px) { .barra-pedido { left: auto; right: 24px; bottom: 24px; width: 420px; } }

/* Hojas: diálogos que en el celular suben desde abajo. */
.hoja {
  border: 0; padding: 0; margin: auto auto 0; width: 100%; max-width: 520px; max-height: 92vh;
  border-radius: 20px 20px 0 0; background: var(--superficie); color: var(--texto); box-shadow: var(--sombra-3);
  overflow: auto;
}
.hoja::backdrop { background: rgba(20, 10, 25, .55); }
@media (min-width: 600px) { .hoja { margin: auto; border-radius: 20px; } }
.hoja-cerrar { position: absolute; top: 10px; right: 10px; z-index: 2; background: var(--superficie); box-shadow: var(--sombra-1); }
.hoja-imagen { width: 100%; max-height: 52vh; object-fit: contain; background: var(--superficie-2); display: block; }
.hoja-cuerpo { padding: 18px 20px calc(20px + env(safe-area-inset-bottom)); display: grid; gap: 10px; }
.hoja-cuerpo h2 { margin: 0; padding-right: 36px; }
.hoja-cuerpo .precio { font-size: 1.3rem; margin: 0; }
.hoja-descripcion { margin: 0; color: var(--texto-suave); white-space: pre-line; }

.cantidad { display: inline-flex; align-items: center; gap: 4px; border: 1px solid var(--borde-fuerte); border-radius: var(--radio-redondo); padding: 2px; justify-self: start; }
.cantidad .boton-icono { width: 36px; height: 36px; font-size: 1.2rem; font-weight: 700; }
.cantidad output { min-width: 28px; text-align: center; font-weight: 800; }

.pedido-lista { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.pedido-lista li { display: flex; align-items: center; gap: 10px; }
.pedido-lista img { width: 48px; height: 48px; border-radius: var(--radio-s); object-fit: cover; background: var(--superficie-2); flex: none; }
.pedido-item-texto { flex: 1; display: grid; min-width: 0; }
.pedido-lista strong { font-size: .92rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pedido-lista span { font-size: .85rem; color: var(--texto-suave); }
.pedido-total { font-weight: 800; font-size: 1.1rem; margin: 4px 0; }

/* ---------------------------------------------------------------------
   Portada: búsqueda, rubros, localidad, seguir
   --------------------------------------------------------------------- */

.buscador-portada { display: flex; gap: 8px; max-width: 520px; margin-bottom: 14px; }
.buscador-portada .entrada { border-color: transparent; }
.buscador-portada .boton { --b-fondo: var(--acento); --b-texto: #fff; flex: none; width: 52px; padding: 0; }
.buscador-portada .boton:hover { --b-fondo: var(--acento-fuerte); }
.enlace-claro { display: inline-flex; align-items: center; gap: 6px; color: #fff; font-weight: 650; opacity: .92; }
.enlace-claro:hover { color: #fff; opacity: 1; }

.chips-rubros {
  display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none;
  margin: 0 -16px 20px; padding: 2px 16px 6px;
}
.chips-rubros::-webkit-scrollbar { display: none; }
.chips-rubros .chip { white-space: nowrap; text-decoration: none; color: var(--texto); background: var(--superficie); min-height: 38px; }
.chips-rubros .chip:hover { border-color: var(--marca-borde); color: var(--marca); }
.chips-rubros .chip-todos { color: var(--marca); }
.chips-envolver { flex-wrap: wrap; overflow: visible; margin: 0 0 20px; padding: 0; }
.chips-envolver .contador { margin-left: 2px; }
@media (min-width: 900px) { .chips-rubros { margin: 0 0 20px; padding: 2px 0 6px; flex-wrap: wrap; } }

.selector-localidad {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 14px;
  color: var(--texto-suave); font-size: .9rem;
}
.selector-localidad a {
  padding: 4px 12px; border-radius: var(--radio-redondo); text-decoration: none; color: var(--texto-suave); font-weight: 600;
}
.selector-localidad a[aria-current="page"] { background: var(--marca); color: var(--sobre-marca); }
.cerca-mio {
  padding: 4px 12px; border-radius: var(--radio-redondo); border: 1px solid var(--marca-borde);
  background: var(--marca-suave); color: var(--marca); font: inherit; font-weight: 650; cursor: pointer;
}
.cerca-mio:hover { border-color: var(--marca); }

.seccion-titulo span a { font-weight: 650; }
.ver-mas { display: flex; justify-content: center; margin-top: 20px; }

.lista-rubros { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.lista-rubros a {
  display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 14px 16px;
  background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio);
  color: var(--texto); text-decoration: none; font-weight: 650;
}
.lista-rubros a:hover { border-color: var(--marca-borde); color: var(--marca); }

.buscador { display: flex; gap: 8px; margin-bottom: 22px; }
.buscador .boton { flex: none; width: 56px; padding: 0; }
.subtitulo { font-size: 1rem; color: var(--texto-suave); }
.producto-comercio { color: var(--texto-tenue); font-size: .8rem; }
.resultados-estados { padding-left: 0; padding-right: 0; }

.perfil-seguir { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 12px; margin-bottom: 12px; }
.seguidores { color: var(--texto-suave); font-size: .92rem; font-weight: 600; }
.ocultar-comercio { text-align: center; font-size: .88rem; }
.ocultar-comercio .enlace-boton { color: var(--texto-tenue); font-weight: 500; }

.accesos-cuenta { display: grid; gap: 10px; }
.accesos-cuenta .tarjeta-comercio > .icono:first-child { color: var(--marca); width: 26px; height: 26px; }

/* ---------------------------------------------------------------------
   Notificaciones
   --------------------------------------------------------------------- */

.campana { position: relative; }
.insignia {
  position: absolute; top: 4px; right: 2px; min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 9px; background: var(--acento); color: #fff; font-size: .7rem; font-weight: 800;
  display: grid; place-items: center; line-height: 1; border: 2px solid var(--superficie);
}
/* Ofertas en la portada: una fila de tarjetas de producto que se desplaza. */
.ofertas-portada { margin-bottom: 12px; }
.fila-ofertas {
  margin: 0 -16px; padding: 4px 16px 12px; display: flex; gap: 12px;
  overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none;
}
.fila-ofertas::-webkit-scrollbar { display: none; }
.fila-ofertas > .producto { flex: none; width: 160px; scroll-snap-align: start; }
@media (min-width: 900px) { .fila-ofertas { margin: 0; padding: 4px 0 12px; } .fila-ofertas > .producto { width: 190px; } }
/* "Nuevos en MegaVentas" (portada): una fila que se desplaza de costado. */
.nuevos { margin-bottom: 8px; }
.mejores-estrellas { color: var(--texto); font-weight: 700; }
.mejores-estrellas span, .tarjeta-estrellas span[aria-hidden], .chip-estrellas span[aria-hidden] { color: #e8a317; }
.tarjeta-estrellas { font-size: .85rem; font-weight: 700; color: var(--texto); }
.tarjeta-estrellas small { color: var(--texto-tenue); font-weight: 500; }
.chip-estrellas { font-weight: 700; text-decoration: none; }

/* Las opiniones de un comercio (parciales/opiniones.php). */
.estrellas-texto { color: #e8a317; letter-spacing: 1px; }
.opiniones-resumen { display: flex; gap: 20px; align-items: center; margin-bottom: 16px; flex-wrap: wrap; }
.opiniones-promedio { display: grid; justify-items: center; gap: 2px; min-width: 110px; }
.opiniones-promedio strong { font-size: 2.6rem; line-height: 1; font-weight: 800; }
.opiniones-promedio .estrellas-texto { font-size: 1.15rem; }
.opiniones-promedio small { color: var(--texto-suave); }
.opiniones-barras { list-style: none; margin: 0; padding: 0; flex: 1; min-width: 180px; display: grid; gap: 4px; }
.opiniones-barras li { display: grid; grid-template-columns: 34px 1fr 28px; gap: 8px; align-items: center; font-size: .85rem; color: var(--texto-suave); }
.opiniones-barra { height: 8px; border-radius: 4px; background: var(--borde); overflow: hidden; }
.opiniones-barra i { display: block; height: 100%; background: #e8a317; border-radius: 4px; }
.opinar { margin-bottom: 18px; }
.opinar-tarjeta h3 { margin: 0 0 10px; font-size: 1.1rem; }
.opinar-invitacion { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; color: var(--texto-suave); }
.opinar-nombre { margin: 0; }
.opinar-foto-actual { display: flex; gap: 12px; align-items: center; margin-bottom: 8px; }
.opinar-foto-actual img { border-radius: 10px; object-fit: cover; }
/* Las estrellas para elegir: en el HTML van de 5 a 1 (flex al revés), así
   "la elegida y las de su izquierda" se pintan con el selector de hermanos. */
.estrellas-elegir { display: flex; flex-direction: row-reverse; justify-content: flex-end; gap: 4px; }
.estrellas-elegir label { font-size: 2.2rem; line-height: 1; color: var(--borde-fuerte); cursor: pointer; padding: 2px; transition: transform .1s; }
.estrellas-elegir label:hover, .estrellas-elegir label:hover ~ label,
.estrellas-elegir input:checked ~ label { color: #e8a317; }
.estrellas-elegir label:active { transform: scale(1.15); }
.estrellas-elegir input:focus-visible + label { outline: 2px solid var(--marca); outline-offset: 2px; border-radius: 6px; }
fieldset.campo { border: 0; padding: 0; margin: 0; }
fieldset.campo legend { font-weight: 700; margin-bottom: 6px; }
.opiniones-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.opinion { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio-l); padding: 14px 16px; scroll-margin-top: 80px; }
.opinion:target { border-color: var(--marca); box-shadow: 0 0 0 2px var(--marca-suave); }
.opinion-cabeza { display: flex; gap: 10px; align-items: center; }
.opinion-cabeza > div { display: grid; }
.opinion-cabeza small { color: var(--texto-tenue); font-size: .8rem; }
.opinion-pedido { margin: 8px 0 0; display: inline-flex; align-items: center; gap: 4px; font-size: .8rem; font-weight: 700; color: var(--exito); }
.opinion-texto { margin: 8px 0 0; white-space: normal; }
.opinion-foto img { display: block; margin-top: 10px; border-radius: 10px; object-fit: cover; width: 120px; height: 120px; }
.opinion-respuesta { margin-top: 10px; padding: 10px 12px; background: var(--marca-suave); border-radius: var(--radio); font-size: .92rem; }
.opinion-respuesta p { margin: 4px 0 0; }
.opinion-acciones { display: flex; gap: 14px; align-items: flex-start; flex-wrap: wrap; margin-top: 8px; }
.opinion-acciones form { margin: 0; }
.opinion-responder summary { cursor: pointer; color: var(--marca); font-weight: 700; font-size: .9rem; }
.opinion-responder form { display: grid; gap: 8px; margin-top: 8px; }
.opinion-denunciar { font-size: .85rem; color: var(--texto-tenue); }
.opinion-admin-foto { border-radius: 8px; object-fit: cover; }
.fila-nuevos {
  list-style: none; margin: 0 -16px; padding: 4px 16px 12px; display: flex; gap: 12px;
  overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none;
}
.fila-nuevos::-webkit-scrollbar { display: none; }
.fila-nuevos li { flex: none; scroll-snap-align: start; }
.nuevo {
  width: 116px; display: grid; justify-items: center; gap: 4px; padding: 14px 8px 12px; text-align: center;
  border: 1px solid var(--borde); border-radius: var(--radio-l); background: var(--superficie); color: var(--texto); text-decoration: none;
}
.nuevo:hover { color: var(--texto); border-color: var(--marca-borde); }
.nuevo img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; margin-bottom: 4px; }
.nuevo strong { font-size: .88rem; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.nuevo small { font-size: .78rem; color: var(--texto-suave); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
/* Métricas: el alcance de los estados, en grande. */
.alcance-numeros { display: flex; flex-wrap: wrap; gap: 8px 28px; margin: 4px 0 6px; }
.alcance-numeros span { color: var(--texto-suave); }
.alcance-numeros strong { display: block; font-size: 1.9rem; line-height: 1.1; color: var(--texto); font-variant-numeric: tabular-nums; }
.alcance-numeros span + span strong { color: var(--marca); }
/* Las formas de pagar el abono (solapa Abono). */
.planes-abono { margin: 16px 0; }
.planes-abono h2 { margin: 0 0 12px; }
.planes { display: grid; gap: 14px; }
@media (min-width: 900px) { .planes { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; } }
.plan { position: relative; display: grid; gap: 8px; }
.planes .tarjeta + .tarjeta { margin-top: 0; }
.plan-nombre { margin: 0; font-weight: 700; color: var(--texto-suave); text-transform: uppercase; letter-spacing: .06em; font-size: .85rem; }
.plan-precio { margin: 0; font-size: 1.9rem; font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; }
.plan-precio small { font-size: .9rem; font-weight: 600; color: var(--texto-suave); }
.plan-detalle, .plan-nota { margin: 0; color: var(--texto-suave); font-size: .92rem; }
.plan-actual { margin: 0; display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: var(--exito); }
.plan-ahorro {
  position: absolute; top: -10px; right: 14px; padding: 3px 10px; border-radius: 999px;
  background: var(--acento); color: #fff; font-size: .8rem; font-weight: 800;
}
.plan-destacado { border-color: var(--marca); box-shadow: 0 0 0 2px var(--marca), var(--sombra-2); }
/* El texto a la izquierda y los botones a la derecha; si no entran (el celular,
   con Desactivar y la prueba), los botones bajan: antes estiraban la página. */
.avisos-push { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 14px; justify-content: space-between; margin-bottom: 16px; }
.avisos-push > div:first-child { flex: 1 1 220px; min-width: 0; }
.avisos-push p { margin: 2px 0 0; }
.avisos-push .boton { flex: none; }
.lista-notificaciones { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.lista-notificaciones a {
  display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px;
  background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio);
  color: var(--texto); text-decoration: none;
}
.lista-notificaciones a:hover { border-color: var(--marca-borde); }
.lista-notificaciones .nueva a { border-color: var(--marca-borde); background: var(--marca-suave); }
.lista-notificaciones img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; flex: none; background: var(--superficie-2); }
.lista-notificaciones a > span { display: grid; gap: 2px; min-width: 0; }
.lista-notificaciones a > span > span { color: var(--texto-suave); font-size: .92rem; }
.lista-notificaciones small { color: var(--texto-tenue); font-size: .8rem; }

/* ---------------------------------------------------------------------
   Abono
   --------------------------------------------------------------------- */

.estado-del-abono h2 { display: flex; align-items: center; gap: 8px; }
.estado-del-abono p { color: var(--texto-suave); }
.estado-del-abono-activo { border-color: color-mix(in srgb, var(--exito) 40%, var(--borde)); }
.estado-del-abono-activo h2 { color: var(--exito); }
.estado-del-abono-prueba h2 { color: var(--acento-fuerte); }
.estado-del-abono-vencido { border-color: color-mix(in srgb, var(--error) 40%, var(--borde)); }
.estado-del-abono-vencido h2 { color: var(--error); }
.lista-pagos { list-style: none; padding: 0; margin: 0; display: grid; }
.lista-pagos li { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--borde); }
.lista-pagos li:last-child { border-bottom: 0; }
.lista-pagos li strong { margin-left: auto; }
.cancelar-abono { margin-top: 16px; text-align: center; }

/* ---------------------------------------------------------------------
   Métricas
   --------------------------------------------------------------------- */

.periodos { display: inline-flex; gap: 2px; padding: 3px; border-radius: var(--radio-redondo); background: var(--superficie); border: 1px solid var(--borde); }
.periodos a {
  padding: 6px 14px; border-radius: var(--radio-redondo); text-decoration: none;
  font-size: .9rem; font-weight: 650; color: var(--texto-suave); white-space: nowrap;
}
.periodos a:hover { color: var(--marca); }
.periodos a[aria-current="page"] { background: var(--marca); color: var(--sobre-marca); }
.metricas-aviso { margin-bottom: 16px; }

.indicadores { display: grid; gap: 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: 16px; }
@media (min-width: 720px) { .indicadores { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.indicador {
  background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio);
  padding: 14px 16px; display: grid; gap: 2px; align-content: start;
}
.indicador p { margin: 0; }
.indicador-nombre { font-size: .85rem; color: var(--texto-suave); font-weight: 600; }
.indicador-valor { font-size: 1.9rem; font-weight: 800; line-height: 1.15; }
.indicador-cambio { display: flex; align-items: center; gap: 2px; font-size: .82rem; color: var(--texto-tenue); font-weight: 600; }
.indicador-sube { color: var(--exito); }
.indicador-baja { color: var(--error); }

.grafico { position: relative; margin: 8px 0 0; min-height: 200px; }
.grafico svg { display: block; overflow: visible; }
.grafico-barra { fill: var(--grafico); }
.grafico-grilla { stroke: var(--borde); stroke-width: 1; stroke-dasharray: 2 4; }
.grafico-base { stroke: var(--borde-fuerte); stroke-width: 1; }
.grafico-eje { fill: var(--texto-tenue); font-size: 11px; font-variant-numeric: tabular-nums; }
.grafico-zona { fill: transparent; cursor: default; }
.grafico-marcador { fill: var(--marca-suave); }
.grafico-globo {
  position: absolute; pointer-events: none; padding: 6px 10px; border-radius: var(--radio-s);
  background: var(--texto); color: var(--fondo); box-shadow: var(--sombra-2);
  display: grid; font-size: .8rem; white-space: nowrap; line-height: 1.3;
}
.grafico-globo strong { font-size: 1rem; }
.grafico-tabla { margin-top: 12px; font-size: .9rem; }
.grafico-tabla summary { cursor: pointer; color: var(--marca); font-weight: 600; }
.grafico-tabla table { border-collapse: collapse; margin-top: 8px; min-width: 200px; }
.grafico-tabla th, .grafico-tabla td { padding: 4px 16px 4px 0; text-align: left; border-bottom: 1px solid var(--borde); font-variant-numeric: tabular-nums; }
.grafico-tabla td:last-child, .grafico-tabla th:last-child { text-align: right; padding-right: 0; }

.metricas-listas { display: grid; gap: 16px; margin: 16px 0; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 860px) { .metricas-listas { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.metricas-listas .tarjeta + .tarjeta { margin-top: 0; }
.vacio-chico { color: var(--texto-suave); margin: 0; }
.ranking { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: minmax(0, 1fr); }
.ranking li { display: flex; align-items: center; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--borde); }
.ranking li:last-child { border-bottom: 0; }
.ranking img { flex: none; border-radius: var(--radio-s); object-fit: cover; background: var(--superficie-2); }
.ranking-texto { flex: 1; min-width: 0; display: grid; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ranking-texto > * { overflow: hidden; text-overflow: ellipsis; }
.ranking-texto small { color: var(--texto-tenue); }
.ranking-numeros { flex: none; display: flex; gap: 10px; font-size: .85rem; color: var(--texto-suave); font-variant-numeric: tabular-nums; }
.ranking-numeros span { display: inline-flex; align-items: center; gap: 3px; }

.historico { display: grid; gap: 8px 16px; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); margin: 0; }
.historico div { display: grid; }
.historico dt { font-size: .85rem; color: var(--texto-suave); }
.historico dd { margin: 0; font-size: 1.25rem; font-weight: 800; }

/* ---------------------------------------------------------------------
   Administración
   --------------------------------------------------------------------- */

.etiqueta-peligro { background: var(--error-suave); color: var(--error); }
.admin-error { margin-bottom: 12px; }
.admin-buscar { display: flex; gap: 8px; margin-bottom: 12px; }
.admin-buscar .entrada { flex: 1; min-width: 0; }
.admin-buscar .boton { flex: none; }
.filtros-admin { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin-bottom: 10px; }
.filtros-admin .chip { text-decoration: none; white-space: nowrap; }
.filtros-admin .chip[aria-current="page"] { background: var(--marca); color: var(--sobre-marca); border-color: var(--marca); }

.lista-admin { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; grid-template-columns: minmax(0, 1fr); }
.fila-admin {
  display: flex; flex-wrap: wrap; gap: 12px; align-items: center; padding: 12px 14px;
  background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio);
}
.fila-admin > img { flex: none; border-radius: 50%; object-fit: cover; background: var(--superficie-2); }
.fila-admin-texto { flex: 1; min-width: 0; display: grid; gap: 2px; }
.fila-admin-texto p { margin: 0; overflow-wrap: anywhere; }
.fila-admin-texto .etiqueta { vertical-align: middle; }
.fila-admin-detalle { font-size: .85rem; color: var(--texto-suave); }
.acciones-admin { flex: none; }
.acciones-admin summary { list-style: none; cursor: pointer; }
.acciones-admin summary::-webkit-details-marker { display: none; }
.acciones-admin[open] { flex-basis: 100%; }
.acciones-admin-cuerpo { display: grid; gap: 10px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--borde); }
/* Comercios en la administración: una fila compacta que se despliega. */
.comercio-admin { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); }
.comercio-admin summary {
  list-style: none; cursor: pointer; padding: 10px 12px;
  display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; column-gap: 12px; align-items: center;
}
.comercio-admin summary::-webkit-details-marker { display: none; }
.comercio-admin summary img { grid-row: 1 / 3; border-radius: 50%; object-fit: cover; background: var(--superficie-2); }
.comercio-admin-nombre { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.comercio-admin-usuario { grid-column: 2; font-size: .86rem; color: var(--marca); display: flex; align-items: center; gap: 8px; min-width: 0; white-space: nowrap; }
.comercio-admin-usuario .etiqueta { font-size: .72rem; }
.comercio-admin-chevron { grid-column: 3; grid-row: 1 / 3; color: var(--texto-suave); transition: transform .2s; }
.comercio-admin[open] .comercio-admin-chevron { transform: rotate(180deg); }
.comercio-admin-cuerpo { padding: 0 12px 12px 68px; display: grid; gap: 2px; }
.comercio-admin-cuerpo p { margin: 0; overflow-wrap: anywhere; }
.comercio-admin-botones { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.comercio-admin-botones form { display: contents; }
.comentario-admin { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); padding: 12px 14px; display: grid; gap: 4px; }
.comentario-admin p { margin: 0; overflow-wrap: anywhere; }
.comentario-admin-texto { font-weight: 600; }
.denuncia-admin { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); padding: 12px 14px; display: grid; gap: 8px; }
.denuncia-admin p { margin: 0; overflow-wrap: anywhere; }
.denuncia-admin-cabeza { display: flex; gap: 12px; align-items: flex-start; }
.denuncia-admin-cabeza img { border-radius: 10px; object-fit: cover; flex: none; background: var(--superficie-2); }
.denuncia-admin-resumen { font-weight: 600; }
.denuncia-admin-motivos summary { cursor: pointer; color: var(--texto-suave); font-size: .88rem; font-weight: 600; }
/* Cupones de alta (031) */
.cupon-codigo { font-family: ui-monospace, monospace; font-size: 1.05rem; letter-spacing: .04em; }
.cupon-admin .enlace-caja { display: flex; gap: 8px; align-items: center; }
.cupon-admin .enlace-caja .entrada { flex: 1; min-width: 0; }
.cupon-admin-detalle summary { cursor: pointer; color: var(--texto-suave); font-size: .88rem; font-weight: 600; }
.cupon-admin-detalle[open] summary { margin-bottom: 10px; }
.cupon-admin-usos { margin: 0; padding-left: 18px; display: grid; gap: 4px; font-size: .88rem; overflow-wrap: anywhere; }
.denuncia-admin-motivos ul { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 10px; }
.denuncia-admin-motivos li { font-size: .9rem; padding-left: 10px; border-left: 3px solid var(--borde-fuerte); }
@media (max-width: 480px) { .comercio-admin-cuerpo { padding-left: 12px; } }
.dialogo-form { display: grid; gap: 12px; }
/* Denunciar: las categorías en lista y el motivo. */
.denuncia-categorias { border: 0; margin: 0; padding: 0; display: grid; gap: 4px; }
.denuncia-categorias legend { font-weight: 600; font-size: .92rem; margin-bottom: 4px; }
.denuncia-categorias label { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; cursor: pointer; }
.denuncia-categorias label:hover { background: var(--superficie-2); }
.denuncia-categorias input { accent-color: var(--marca); width: 18px; height: 18px; }
.dialogo-denuncia .campo-error { margin: 0; }
.hoja-denunciar { justify-self: center; font-size: .85rem; color: var(--texto-suave); margin-top: 4px; }
.dialogo-form .dialogo-mensaje { margin: 0; }
.dialogo-form .campo { display: grid; gap: 6px; margin: 0; font-weight: 600; font-size: .92rem; }
.form-admin { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.form-admin label { display: flex; align-items: center; gap: 6px; font-size: .9rem; }
.form-admin .entrada { flex: 1; min-width: 180px; min-height: 38px; padding-top: 6px; padding-bottom: 6px; }
.form-admin .selector { min-height: 38px; padding-top: 6px; padding-bottom: 6px; width: auto; }
.form-rubro { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; width: 100%; }
.form-rubro .entrada { flex: 1 1 220px; min-width: 0; min-height: 40px; padding-top: 6px; padding-bottom: 6px; }
.filtro-lista { margin-bottom: 10px; }
.estado-texto-admin { margin: 0; font-size: .88rem; overflow-wrap: anywhere; }
.paginas { display: flex; justify-content: center; align-items: center; gap: 12px; margin: 16px 0; color: var(--texto-suave); font-size: .9rem; }
.lista-auditoria { list-style: none; padding: 0; margin: 0; display: grid; }
.lista-auditoria li { display: flex; gap: 12px; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid var(--borde); font-size: .92rem; }
.lista-auditoria li:last-child { border-bottom: 0; }
.lista-auditoria span { min-width: 0; overflow-wrap: anywhere; }
.lista-auditoria small { flex: none; color: var(--texto-tenue); }

/* ---------------------------------------------------------------------
   Páginas fijas: para comercios, preguntas, términos, privacidad
   --------------------------------------------------------------------- */

.pie-enlaces { display: flex; flex-wrap: wrap; gap: 6px 16px; }

.texto-pagina { max-width: 720px; margin: 0 auto; line-height: 1.65; }
.texto-pagina h2 { margin-top: 1.8em; }
.texto-pagina ul { padding-left: 1.2em; margin: 0 0 1em; display: grid; gap: 6px; }
.texto-pagina .aviso { margin: 8px 0 8px; }
.preguntas { display: grid; gap: 8px; }
.pregunta { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); }
.pregunta summary { cursor: pointer; padding: 14px 16px; font-weight: 650; list-style: none; display: flex; justify-content: space-between; gap: 12px; }
.pregunta summary::-webkit-details-marker { display: none; }
.pregunta summary::after { content: "+"; color: var(--marca); font-weight: 800; }
.pregunta[open] summary::after { content: "−"; }
.pregunta p { margin: 0; padding: 0 16px 16px; color: var(--texto-suave); }
.contacto-ayuda { margin-top: 28px; }
.contacto-ayuda h2 { margin-top: 0; }

.landing-cabecera { text-align: center; max-width: 680px; margin: 12px auto 28px; }
.landing-cabecera h1 { font-size: clamp(1.8rem, 1.3rem + 2.5vw, 2.7rem); margin-top: 12px; }
.landing-cabecera > p:not(.etiqueta) { color: var(--texto-suave); font-size: 1.1rem; }
.landing-acciones { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 20px; }
.landing-beneficios { display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); margin-bottom: 24px; }
@media (min-width: 640px) { .landing-beneficios { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 960px) { .landing-beneficios { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.beneficio { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); padding: 18px; }
.beneficio h2 { font-size: 1.05rem; margin: 10px 0 4px; }
.beneficio p { margin: 0; color: var(--texto-suave); font-size: .95rem; }
.beneficio-icono { display: inline-grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; background: var(--marca-suave); color: var(--marca); }
.landing-precio { max-width: 480px; margin: 0 auto 24px; text-align: center; }
.landing-monto { font-size: 2.4rem; font-weight: 800; color: var(--marca); margin: 0 0 12px; }
.landing-monto span { font-size: 1rem; font-weight: 600; color: var(--texto-suave); }
.landing-precio ul { list-style: none; padding: 0; margin: 0 0 18px; display: grid; gap: 8px; text-align: left; }
.landing-precio li { display: flex; gap: 8px; align-items: flex-start; }
.landing-precio li .icono { color: var(--exito); flex: none; margin-top: 3px; }
.landing-precio .campo-ayuda { margin-top: 12px; }

/* ---------------------------------------------------------------------
   Compartir y el cartel para imprimir
   --------------------------------------------------------------------- */

.compartir { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 860px) { .compartir { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.compartir .tarjeta + .tarjeta { margin-top: 0; }
.enlace-copiable { display: flex; gap: 8px; }
.enlace-copiable .entrada { flex: 1; min-width: 0; }
.compartir-qr { text-align: center; }
.compartir-qr img { margin: 8px auto 4px; width: 220px; height: 220px; background: #fff; border-radius: var(--radio); padding: 8px; }
.compartir-qr .acciones-fila { justify-content: center; }

.cuerpo-cartel { background: var(--fondo); }
.cartel-barra { display: flex; justify-content: space-between; gap: 10px; max-width: 210mm; margin: 16px auto; padding: 0 16px; }
.cartel {
  background: #fff; color: #1e1524; width: min(210mm, 100% - 32px); aspect-ratio: 210 / 297; margin: 0 auto 32px;
  box-shadow: var(--sombra-2); display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 6% 8%; gap: 2.2%; container-type: inline-size;
  border-top: 14px solid #60097b; border-bottom: 14px solid #d06b2e;
}
.cartel h1 { font-size: 8.5cqw; line-height: 1.1; margin: 0; color: #1e1524; overflow-wrap: anywhere; }
.cartel-logo { width: 22cqw; height: 22cqw; border-radius: 50%; object-fit: cover; }
.cartel-llamado { font-size: 4.2cqw; color: #5d5466; margin: 0; max-width: 80%; }
.cartel-qr { width: 58cqw; height: 58cqw; }
.cartel-direccion { font-size: 4.4cqw; font-weight: 800; color: #60097b; margin: 0; overflow-wrap: anywhere; }
.cartel-pie { display: flex; align-items: center; gap: 2cqw; font-size: 2.8cqw; color: #8a8193; margin: 2% 0 0; }
.cartel-pie img { width: 18cqw; height: auto; }

@media print {
  @page { size: A4; margin: 0; }
  .cuerpo-cartel { background: #fff; }
  .cartel-barra { display: none; }
  .cartel { width: 210mm; height: 297mm; aspect-ratio: auto; margin: 0; box-shadow: none; }
}

/* ---------------------------------------------------------------------
   Autocompletado (el rubro)
   --------------------------------------------------------------------- */

.autocompletar { position: relative; }
.autocompletar-lista {
  position: absolute; z-index: 20; top: calc(100% + 4px); left: 0; right: 0;
  list-style: none; margin: 0; padding: 4px; max-height: 280px; overflow-y: auto;
  background: var(--superficie); border: 1px solid var(--borde-fuerte); border-radius: var(--radio);
  box-shadow: var(--sombra-3);
}
.autocompletar-lista li { padding: 10px 12px; border-radius: var(--radio-s); cursor: pointer; }
.autocompletar-lista li:hover { background: var(--superficie-2); }
.autocompletar-lista li[aria-selected="true"] { background: var(--marca-suave); color: var(--marca); font-weight: 650; }
.autocompletar-lista .autocompletar-vacio { cursor: default; color: var(--texto-suave); font-size: .92rem; }
.autocompletar-lista .autocompletar-vacio:hover { background: none; }
.autocompletar-lista .autocompletar-grupo {
  cursor: default; padding: 10px 12px 4px; margin-top: 4px; border-top: 1px solid var(--borde); border-radius: 0;
  font-size: .76rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--texto-tenue);
}
.autocompletar-lista .autocompletar-grupo:first-child { border-top: 0; margin-top: 0; }
.autocompletar-lista .autocompletar-grupo:hover { background: none; }

/* ---------------------------------------------------------------------
   Mapa (OpenStreetMap con Leaflet)
   --------------------------------------------------------------------- */

.mapa-comercio, .mapa-perfil {
  height: 300px; margin-top: 10px; border-radius: var(--radio); overflow: hidden;
  border: 1px solid var(--borde); background: var(--superficie-2); z-index: 0;
}
.mapa-perfil { height: 220px; margin: 0 0 10px; }

/* El mapa del panel: el pin queda fijo en el centro y se mueve el mapa. La
   punta del pin es el punto; la sombra se queda ahí cuando el pin "se levanta"
   mientras se arrastra. */
.mapa-marco { position: relative; margin-top: 10px; }
.mapa-marco .mapa-comercio { margin-top: 0; }
.mapa-pin {
  position: absolute; left: 50%; top: 50%; z-index: 2; width: 44px; height: 44px;
  transform: translate(-50%, -100%); pointer-events: none; color: var(--marca);
}
.mapa-pin .icono { width: 44px; height: 44px; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .35)); transition: transform .15s ease-out; }
.mapa-pin-sombra {
  position: absolute; left: 50%; bottom: -3px; width: 12px; height: 5px; margin-left: -6px;
  border-radius: 50%; background: rgba(0, 0, 0, .35); transition: transform .15s ease-out;
}
.mapa-marco.moviendo .mapa-pin .icono { transform: translateY(-12px); }
.mapa-marco.moviendo .mapa-pin-sombra { transform: scale(.7); }
/* Sin punto guardado todavía, el pin se ve más claro: falta confirmarlo. */
.mapa-marco.sin-punto .mapa-pin { opacity: .55; }
.leaflet-container { font-family: var(--fuente); }
.leaflet-control-attribution { font-size: 10px; }

/* ---------------------------------------------------------------------
   Editor de estados (pantalla completa, fondo negro)
   --------------------------------------------------------------------- */

html.editor-abierto, html.editor-abierto body { overflow: hidden; }
.editor-estados {
  position: fixed; inset: 0; z-index: 60; background: #000; color: #fff;
  display: grid; grid-template-rows: auto minmax(0, 1fr) auto auto; height: 100dvh;
  /* Sin esto la columna crece al ancho de TODAS las miniaturas juntas: con 5 o
     más, la pantalla se ensanchaba y se cortaban Publicar y los botones de arriba. */
  grid-template-columns: minmax(0, 1fr); width: 100vw;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) 0 env(safe-area-inset-left);
  touch-action: none; user-select: none; -webkit-user-select: none;
}
.editor-barra { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 8px 10px; }
/* Cerrar, deshacer y rehacer a la izquierda; las herramientas a la derecha.
   Con todo a la vista son nueve botones: se achican con la pantalla (44 px
   en la PC, 36 en un celular común, 29 en uno de 320) para que no se salga. */
.editor-herramientas { display: flex; gap: clamp(2px, 0.9vw, 6px); --boton-editor: clamp(28px, 9.2vw, 44px); }
.editor-boton {
  min-width: 44px; height: 44px; padding: 0 10px; border-radius: 22px; border: 0; cursor: pointer;
  background: rgba(255, 255, 255, .12); color: #fff; font: inherit; font-weight: 800;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
}
.editor-herramientas .editor-boton { min-width: var(--boton-editor); height: var(--boton-editor); padding: 0; }
.editor-boton:hover { background: rgba(255, 255, 255, .2); }
.editor-boton .icono { width: 20px; height: 20px; }
.editor-aa { font-size: 1.05rem; letter-spacing: -.02em; }
.editor-modo span { font-size: .85rem; }
.editor-escena { display: grid; place-items: center; min-height: 0; padding: 0 8px; }
.editor-escena { position: relative; }
/* El nombre del filtro al cambiarlo (y la ayuda al abrir), en el centro. */
.editor-filtro-nombre {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 1;
  font-size: 2rem; font-weight: 800; color: #fff; text-shadow: 0 2px 10px rgba(0, 0, 0, .6);
  pointer-events: none; opacity: 0; transition: opacity .2s;
  /* "Cataratas Iguazú" en un celular angosto: mejor en dos líneas que cortado. */
  width: max-content; max-width: 88%; text-align: center; line-height: 1.15;
}
.editor-filtro-nombre.visible { opacity: 1; }
.editor-filtro-nombre.editor-filtro-ayuda {
  font-size: .9rem; font-weight: 700; white-space: normal; text-align: center; width: min(80%, 300px);
  padding: 10px 14px; border-radius: 12px; background: rgba(0, 0, 0, .55);
}
.editor-escena canvas { border-radius: 14px; touch-action: none; cursor: grab; background: #111; }
.editor-video { display: flex; align-items: center; gap: 10px; padding: 8px 14px 0; font-size: .82rem; color: rgba(255, 255, 255, .8); }
/* El tramo del video que se publica: el video entero es la pista gris, lo
   que se publica va en color, y los dos marcadores eligen desde y hasta. */
.editor-tramo { flex: 1; min-width: 0; display: grid; gap: 8px; }
.editor-tramo-texto { margin: 0; display: flex; justify-content: space-between; gap: 10px; }
.editor-tramo-texto strong { color: #fff; font-variant-numeric: tabular-nums; white-space: nowrap; }
.editor-tramo-pista {
  position: relative; height: 34px; margin: 0 12px; border-radius: 8px;
  background: rgba(255, 255, 255, .18); touch-action: none; cursor: pointer;
}
.editor-tramo-elegido {
  position: absolute; top: 0; bottom: 0; border-radius: 8px; cursor: grab;
  background: var(--acento); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .55);
}
.editor-tramo-pista.arrastrando .editor-tramo-elegido { cursor: grabbing; }
.editor-tramo-pista.fijo { cursor: default; }
.editor-tramo-pista.fijo .editor-tramo-elegido { cursor: default; opacity: .85; }
.editor-tramo-cabezal {
  position: absolute; top: -4px; bottom: -4px; width: 3px; margin-left: -1.5px; border-radius: 2px;
  background: #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, .35); pointer-events: none;
}
.editor-tramo-marca {
  position: absolute; top: 50%; width: 24px; height: 44px; margin: -22px 0 0 -12px; padding: 0;
  border: 0; border-radius: 8px; background: #fff; cursor: ew-resize; touch-action: none;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .45);
}
/* Las dos rayitas del agarre. */
.editor-tramo-marca::before {
  content: ""; position: absolute; inset: 14px 8px; border-left: 2px solid var(--acento); border-right: 2px solid var(--acento);
}
/* Se agarra con el dedo aunque se vea finita. */
.editor-tramo-marca::after { content: ""; position: absolute; inset: -6px -10px; }
.editor-tramo-marca:focus-visible { outline: 3px solid var(--acento-claro, #ffb27a); outline-offset: 2px; }
/* El PLAY grande del centro del video. Sonando, queda tenue para no tapar. */
.editor-play {
  position: absolute; left: 50%; top: 50%; width: 76px; height: 76px; margin: -38px 0 0 -38px;
  display: grid; place-items: center; border: 0; border-radius: 50%; cursor: pointer; z-index: 4;
  background: rgba(0, 0, 0, .55); color: #fff; box-shadow: 0 4px 18px rgba(0, 0, 0, .4);
  transition: opacity .2s, transform .1s;
}
.editor-play .icono { width: 36px; height: 36px; }
.editor-play:active { transform: scale(.94); }
.editor-play.sonando { opacity: .35; }
.editor-play.sonando:hover, .editor-play:focus-visible { opacity: 1; }
.editor-estados.eligiendo-musica .editor-play, .editor-estados.editando-texto .editor-play, .editor-estados.recortando .editor-play { display: none; }
.editor-pie { padding: 10px 12px calc(12px + env(safe-area-inset-bottom)); display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.editor-descripcion {
  width: 100%; min-height: 44px; border-radius: 22px; border: 1px solid rgba(255, 255, 255, .25);
  background: rgba(255, 255, 255, .08); color: #fff; font: inherit; padding: 0 16px; touch-action: manipulation;
  user-select: text; -webkit-user-select: text;
}
.editor-descripcion::placeholder { color: rgba(255, 255, 255, .55); }
.editor-descripcion:focus { outline: none; border-color: #fff; }
.editor-fila { display: flex; align-items: center; gap: 10px; }
.editor-miniaturas { flex: 1; min-width: 0; display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 2px; touch-action: pan-x; }
.editor-miniatura {
  position: relative; flex: none; width: 40px; height: 64px; padding: 0; border-radius: 8px; overflow: hidden;
  border: 2px solid transparent; background: #222; cursor: pointer;
}
.editor-miniatura canvas { width: 100%; height: 100%; display: block; }
.editor-miniatura[aria-selected="true"] { border-color: #fff; }
.editor-miniatura .icono { position: absolute; right: 2px; bottom: 2px; width: 14px; height: 14px; color: #fff; filter: drop-shadow(0 0 2px #000); }
.editor-miniatura-parte {
  position: absolute; left: 3px; top: 3px; padding: 1px 5px; border-radius: 8px;
  background: rgba(0, 0, 0, .65); color: #fff; font-size: .68rem; font-weight: 800; line-height: 1.3;
}
.editor-miniatura-arrastrando { transform: scale(1.12); box-shadow: 0 0 0 2px var(--acento); }
.editor-mas {
  flex: none; width: 40px; height: 64px; border-radius: 8px; border: 2px dashed rgba(255, 255, 255, .4);
  display: grid; place-items: center; cursor: pointer; color: #fff;
}
/* El reloj de programar: como el "+", y lleno cuando hay una hora elegida. */
.editor-programar { border-style: solid; background: transparent; font: inherit; padding: 0; }
.editor-programar[aria-pressed="true"] { background: #fff; color: #000; border-color: #fff; }
.editor-programar .icono { width: 22px; height: 22px; }
/* Usa la hoja de la música, pero sin lista que llene el alto: todo arriba. */
.editor-musica.editor-programacion { grid-template-rows: none; align-content: start; }
.editor-programacion .editor-estilos { flex-wrap: wrap; overflow: visible; }
.editor-programacion-titulo { margin: 4px 0 0; color: #fff; font-weight: 800; }
.editor-programacion-hora { display: grid; gap: 6px; color: rgba(255, 255, 255, .8); font-size: .9rem; }
.editor-programacion-hora input {
  min-height: 46px; padding: 0 12px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, .3);
  background: rgba(255, 255, 255, .08); color: #fff; font: inherit; color-scheme: dark;
}
.editor-enviar {
  flex: none; height: 52px; min-width: 52px; padding: 0 18px 0 14px; border-radius: 26px; border: 0; cursor: pointer;
  background: var(--acento); color: #fff; font: inherit; font-weight: 800; display: inline-flex; align-items: center; gap: 8px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, .4);
}
.editor-enviar .icono { width: 22px; height: 22px; }

/* Escribir un texto: el teclado ocupa la mitad de abajo, así que va arriba. */
/* Sin desenfoque: mientras se escribe se tiene que ver cómo queda en la foto. */
.editor-estados.editando-texto .editor-barra, .editor-estados.eligiendo-musica .editor-barra { visibility: hidden; }
.editor-textos {
  position: absolute; inset: 0; z-index: 2; background: rgba(0, 0, 0, .35);
  display: flex; flex-direction: column; gap: 14px; padding: calc(10px + env(safe-area-inset-top)) 14px 14px;
}
.editor-textos-barra { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.editor-textos-barra .boton { margin-left: auto; }
.editor-fondo[aria-pressed="true"] { background: #fff; color: #000; }
.editor-textos textarea {
  width: 100%; border: 0; border-radius: 12px; padding: 8px 12px; resize: none; text-align: center; overflow-y: auto; max-height: 40vh;
  font: 800 1.6rem/1.25 var(--fuente); outline: none; user-select: text; -webkit-user-select: text; touch-action: manipulation;
}
.editor-textos textarea::placeholder { color: rgba(255, 255, 255, .5); }
.editor-tamanio { display: flex; align-items: center; gap: 10px; font-weight: 800; }
.editor-tamanio input { flex: 1; accent-color: #fff; }
.editor-tamanio span:first-child { font-size: .8rem; }
.editor-tamanio span:last-child { font-size: 1.3rem; }
.editor-colores { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; max-width: 340px; margin: 0 auto; }
.editor-colores button, .editor-color-libre {
  width: 30px; height: 30px; border-radius: 50%; border: 3px solid rgba(255, 255, 255, .85); cursor: pointer;
  background: var(--color); padding: 0;
}
.editor-colores button[aria-checked="true"], .editor-color-libre[aria-checked="true"] { outline: 3px solid var(--acento); outline-offset: 2px; }
/* El color libre: un arcoíris; una vez elegido, se ve ese color al medio. */
.editor-color-libre {
  position: relative; display: inline-block;
  background: radial-gradient(circle, var(--color, transparent) 0 38%, transparent 40%),
    conic-gradient(#f44336, #ffeb3b, #4caf50, #00bcd4, #3f51b5, #e91e63, #f44336);
}
.editor-color-libre input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; border: 0; padding: 0; }

/* La tipografía: el botón dice cuál es (escrito en ella) y despliega la lista. */
.editor-tipografia { gap: 4px; padding: 0 12px; max-width: 46%; }
.editor-tipografia span { font-size: 1rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.editor-tipografia .icono { width: 16px; height: 16px; flex: none; }
.editor-tipografias {
  list-style: none; margin: 0; padding: 6px; border-radius: 14px; background: rgba(20, 20, 20, .95);
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; align-self: center; width: min(100%, 340px);
}
.editor-tipografias li {
  padding: 10px 12px; border-radius: 10px; color: #fff; font-size: 1.15rem; cursor: pointer; text-align: center;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.editor-tipografias li:hover { background: rgba(255, 255, 255, .1); }
.editor-tipografias li[aria-selected="true"] { background: #fff; color: #000; }

/* Recortar (Cropper.js). */
.editor-estados.recortando .editor-barra { visibility: hidden; }
.editor-recorte {
  position: absolute; inset: 0; z-index: 2; background: #000;
  display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: 10px;
  /* 20 px a los costados: el área para agarrar los nodos sobresale 22 px. */
  padding: calc(8px + env(safe-area-inset-top)) 20px calc(14px + env(safe-area-inset-bottom));
}
.editor-recorte-barra { display: flex; align-items: center; gap: 8px; }
.editor-recorte-barra .boton { margin-left: auto; }
.editor-recorte-lienzo { min-height: 0; }
.editor-recorte-lienzo img { display: block; max-width: 100%; }
.editor-proporciones { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.editor-proporciones button {
  padding: 8px 14px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .3);
  background: transparent; color: #fff; font: inherit; font-weight: 700; cursor: pointer;
}
.editor-proporciones button[aria-checked="true"] { background: #fff; color: #000; border-color: #fff; }
/* Los controles de Cropper.js, con el naranja de la marca en lugar de su azul. */
.editor-recorte .cropper-view-box { outline-color: var(--acento); outline: 2px solid var(--acento); }
/* Nodos grandes para el dedo: se ven como círculos de 16 px y se agarran
   en 44 px (el ::after invisible es parte del nodo). Los bordes se agarran
   en una franja de 24 px; la línea que se ve es el contorno del recuadro.
   Cropper los pone a 5 px, imposibles de tomar con el dedo. */
.editor-recorte .cropper-point {
  width: 16px; height: 16px; margin: 0; opacity: 1; border-radius: 50%;
  background-color: var(--acento); border: 2px solid #fff; box-sizing: border-box;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .45);
}
.editor-recorte .cropper-point::after { content: ''; position: absolute; inset: -14px; border-radius: 50%; }
.editor-recorte .cropper-point.point-se::before { display: none; }
.editor-recorte .cropper-point.point-nw { left: -8px; top: -8px; }
.editor-recorte .cropper-point.point-ne { right: -8px; top: -8px; }
.editor-recorte .cropper-point.point-sw { left: -8px; bottom: -8px; }
.editor-recorte .cropper-point.point-se { right: -8px; bottom: -8px; width: 16px; height: 16px; }
.editor-recorte .cropper-point.point-n { top: -8px; left: 50%; margin-left: -8px; }
.editor-recorte .cropper-point.point-s { bottom: -8px; left: 50%; margin-left: -8px; }
.editor-recorte .cropper-point.point-e { right: -8px; top: 50%; margin-top: -8px; }
.editor-recorte .cropper-point.point-w { left: -8px; top: 50%; margin-top: -8px; }
.editor-recorte .cropper-line { background: transparent; opacity: 1; }
.editor-recorte .cropper-line.line-n { top: -12px; height: 24px; }
.editor-recorte .cropper-line.line-s { bottom: -12px; height: 24px; }
.editor-recorte .cropper-line.line-e { right: -12px; width: 24px; }
.editor-recorte .cropper-line.line-w { left: -12px; width: 24px; }

/* Música: el panel para elegir el tema y el cartel con el elegido. */
.editor-musica {
  position: absolute; inset: 0; z-index: 2; background: rgba(0, 0, 0, .82); backdrop-filter: blur(6px);
  display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto auto; gap: 12px;
  padding: calc(10px + env(safe-area-inset-top)) 14px calc(14px + env(safe-area-inset-bottom));
}
.editor-estilos { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.editor-estilos::-webkit-scrollbar { display: none; }
.editor-estilos button {
  flex: none; padding: 7px 13px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .3);
  background: transparent; color: #fff; font: inherit; font-weight: 700; font-size: .88rem; cursor: pointer;
}
.editor-estilos button[aria-checked="true"] { background: #fff; color: #000; border-color: #fff; }
.editor-temas { list-style: none; margin: 0; padding: 0; overflow-y: auto; display: grid; align-content: start; gap: 2px; }
.editor-temas li {
  display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 12px; cursor: pointer; color: #fff;
}
.editor-temas li:hover { background: rgba(255, 255, 255, .08); }
.editor-temas li[aria-selected="true"] { background: rgba(255, 255, 255, .16); }
.editor-tema-icono {
  flex: none; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(255, 255, 255, .14);
}
.editor-temas li[aria-selected="true"] .editor-tema-icono { background: var(--acento); }
.editor-tema-icono .icono { width: 18px; height: 18px; }
.editor-tema-texto { display: grid; min-width: 0; }
.editor-tema-texto strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.editor-tema-texto small { color: rgba(255, 255, 255, .6); font-size: .8rem; }
.editor-desde { display: grid; gap: 6px; color: #fff; font-size: .9rem; }
.editor-desde input { accent-color: var(--acento); width: 100%; }
.editor-musica-creditos { margin: 0; color: rgba(255, 255, 255, .55); font-size: .75rem; text-align: center; }
.editor-musica-creditos a { color: inherit; }
.editor-musica-cartel {
  position: absolute; top: 12px; left: 50%; transform: translateX(-50%); z-index: 1; max-width: 80%;
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: 0; border-radius: 999px;
  background: rgba(0, 0, 0, .55); color: #fff; font: inherit; font-size: .85rem; font-weight: 700; cursor: pointer;
}
.editor-musica-cartel span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* El producto que muestra el estado (editor): abajo, como lo verá el visor. */
.editor-producto-cartel {
  position: absolute; bottom: 12px; left: 12px; z-index: 1; max-width: calc(100% - 24px);
  display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border: 0; border-radius: 999px;
  background: rgba(255, 255, 255, .92); color: #1b1720; font: inherit; font-size: .85rem; font-weight: 700; cursor: pointer;
}
.editor-producto-cartel span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.editor-producto-cartel .icono { width: 16px; height: 16px; flex: none; }
.editor-productos-buscar {
  width: 100%; padding: 10px 14px; border-radius: 999px; border: 1px solid rgba(255,255,255,.25);
  background: rgba(255,255,255,.1); color: #fff; font: inherit;
}
.editor-productos-lista img { width: 44px; height: 44px; border-radius: 8px; object-fit: cover; flex: none; background: rgba(255,255,255,.1); }
.editor-musica-cartel .icono { width: 16px; height: 16px; flex: none; }

/* Mientras se publica. */
.editor-subida {
  position: absolute; inset: 0; z-index: 3; background: rgba(0, 0, 0, .92);
  display: flex; flex-direction: column; justify-content: center; gap: 14px; padding: 24px; max-width: 520px; margin: 0 auto;
}
.editor-subida h2 { color: #fff; margin: 0; }
.editor-subida-lista { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.editor-subida-lista li {
  display: grid; grid-template-columns: 36px 1fr auto; grid-template-rows: auto auto; gap: 4px 12px; align-items: center;
}
.editor-subida-lista canvas { grid-row: span 2; border-radius: 6px; }
.editor-subida-estado { font-size: .85rem; color: rgba(255, 255, 255, .7); text-align: right; }
.editor-subida-barra { grid-column: 2 / 4; height: 6px; border-radius: 3px; background: rgba(255, 255, 255, .15); overflow: hidden; }
.editor-subida-barra i { display: block; height: 100%; width: 0; background: var(--acento); transition: width .2s; }
.editor-subida-lista-ok .editor-subida-estado { color: #6ee7a8; }
.editor-subida-lista-error .editor-subida-estado { color: #ff9a96; }
.editor-subida-nota { font-size: .85rem; color: rgba(255, 255, 255, .6); margin: 0; }
.editor-subida .boton-fantasma { --b-texto: #fff; }
.editor-compartir { display: grid; gap: 10px; margin-top: 8px; padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, .15); }
.editor-compartir-titulo { margin: 0; font-weight: 800; color: #fff; }
.editor-compartir-botones { display: grid; gap: 8px; }
.editor-compartir-ayuda { margin: 0; font-size: .85rem; color: rgba(255, 255, 255, .65); }
.editor-subida .boton-secundario { --b-fondo: transparent; --b-texto: #fff; --b-borde: rgba(255, 255, 255, .4); }
/* Sobre el fondo oscuro, el hover de siempre (fondo violeta clarito) dejaba la
   letra blanca sobre casi blanco: acá aclara un poco el fondo y la letra sigue blanca. */
.editor-subida .boton-fantasma:hover, .editor-subida .boton-secundario:hover { --b-fondo: rgba(255, 255, 255, .16); --b-texto: #fff; }

/* ---------------------------------------------------------------------
   Diálogo de confirmación
   --------------------------------------------------------------------- */

.dialogo {
  border: 0; border-radius: var(--radio-l); padding: 22px; width: min(420px, calc(100vw - 32px));
  background: var(--superficie); color: var(--texto); box-shadow: var(--sombra-3);
}
.dialogo::backdrop { background: rgba(20, 10, 25, .55); backdrop-filter: blur(2px); }
/* Con cuál WhatsApp se abre (Android, app.js): las dos apps, una abajo de la otra. */
.dialogo-whatsapp .dialogo-mensaje { margin-bottom: 6px; }
.dialogo-nota { margin: 0 0 16px; color: var(--texto-suave); font-size: .92rem; }
.dialogo-whatsapp-apps { display: grid; gap: 10px; margin-bottom: 14px; }
.dialogo-mensaje { font-size: 1.05rem; font-weight: 600; margin: 0 0 18px; }
.dialogo-acciones { display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  /* Una ruedita quieta no dice nada: gira, más despacio. */
  .ruedita { animation: girar 1.6s linear infinite !important; }
}