/* ============================================================
   Directorio Acatzingo — Estilos principales
   Paleta extraída del logo. Border-radius tope 25% (nunca pill/círculo).

   CÓMO NAVEGAR ESTE ARCHIVO
   Está dividido en bloques grandes con encabezados en MAYÚSCULAS como el
   de aquí arriba. Usa Ctrl+F / Cmd+F con el nombre del bloque que buscas
   (por ejemplo "TARJETA DE NEGOCIO" o "MODALES DE AUTENTICACIÓN") para
   saltar directo ahí — el orden sigue, a grandes rasgos, el mismo orden
   visual de la página: nav → banner principal → categorías → grid
   principal → modales/páginas de detalle → formularios → componentes
   sueltos reutilizables (galerías, estrellas, texto enriquecido, etc.)
   al final.

   Los colores, tamaños de radio y otras constantes viven como variables
   CSS en `:root` (aquí abajo) — para cambiar la paleta completa o el
   redondeo de esquinas en todo el sitio, cambia la variable una sola vez
   aquí en vez de buscar cada regla que la usa.
   ============================================================ */

:root {
  
  color-scheme: light only;

  /* Colores de marca (paleta actualizada) */
  --color-navy: #192a56;       
  --color-navy-dark: #142244;
  --color-blue: #0098DA;       
  --color-blue-dark: #00889B;
  --color-magenta: #B9005B;    
  --color-magenta-dark: #900048;
  --color-lime: #C0E218;       
  --color-lime-dark: #97B213;
  --color-danger: #f77f00;     
  --color-danger-dark: #D66D00;
  --color-gray-bg: #E6E7E8;    
  --color-cream: #eae2b7;      /* tono crema de la paleta, se conserva solo para acentos puntuales (no como fondo) */
  --color-white: #FFFFFF;
  --color-text: #1E2430;
  --color-text-soft: #5B6373;
  --color-border: #E1E4E9;

  /* Colores exclusivos para estrellas de calificación */
  --color-star-outline: #f9a620;
  --color-star-fill: #ffd449;

  /* Radios: tope 25%, nunca pill/círculo total */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-max: 22px;

  /* Sombras */
  --shadow-sm: 0 2px 8px rgba(21, 42, 86, 0.08);
  --shadow-md: 0 6px 20px rgba(21, 42, 86, 0.12);
  --shadow-lg: 0 12px 32px rgba(21, 42, 86, 0.18);

  /* Nav */
  --nav-height: 88px;
  --nav-height-scrolled: 64px;

  /* Tipografía */
  --font-base: 'Roboto', 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;

  --transition: 0.25s ease;
}

* { box-sizing: border-box; }
/* Bug real recurrente, encontrado 4 veces en distintos lugares del sitio
   (el botón "Entendido" del aviso de negocio en revisión, el bloque de
   horario de comida/descanso, y otros 4 más detectados con una revisión
   sistemática): cualquier elemento que use el atributo `hidden` junto con
   una clase que le ponga `display: flex/grid/block/...` deja de
   ocultarse, porque por cascada de CSS, cuando la especificidad es igual,
   la hoja de estilos del sitio le gana a la regla `[hidden] { display:
   none }` que trae el navegador por default — así que el JavaScript sí le
   pone `hidden` al elemento a tiempo, pero visualmente sigue apareciendo
   de todos modos. En vez de seguir parchando clase por clase cada vez que
   aparece de nuevo, esta única regla (con especificidad de atributo, pero
   reforzada con !important porque igual necesita ganarle a cualquier
   `display` de una clase más específica) lo resuelve de raíz para
   cualquier elemento del sitio, presente o futuro. */
[hidden] { display: none !important; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-base);
  color: var(--color-text);
  background: var(--color-gray-bg);
  line-height: 1.5;
}

#bgParticleCanvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: -1;
  pointer-events: none;
}

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

a { text-decoration: none; color: inherit; }

button { font-family: inherit; cursor: pointer; }

.container {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 20px;
}

/* ------------------------------------------------------------
   Botones y pills — radio tope 25%, jamás pill/círculo completo
   ------------------------------------------------------------ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  border-radius: var(--radius-md);
  border: none;
  font-weight: 600;
  font-size: 0.95rem;
  box-shadow: 0 2px 6px rgba(0, 48, 73, 0.15);
  transition: transform var(--transition), box-shadow var(--transition), background var(--transition);
}
.btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.btn:active { transform: translateY(0); }
/* Bug real encontrado (reporte del usuario: el botón "Entendido" del
   aviso de negocio en revisión aparecía ANTES de que terminara la cuenta
   regresiva, aunque el JS sí le ponía el atributo `hidden` a tiempo): por
   cascada de CSS, cuando la especificidad es igual, la hoja de estilos
   del sitio le gana a la del navegador — `.btn { display: inline-flex }`
   (aquí arriba) terminaba anulando el `display: none` que el navegador le
   pone por default a cualquier elemento con el atributo `hidden`. Con
   esta regla, cualquier botón `.btn` que use `hidden` (como el de arriba,
   o cualquier otro futuro) sí se oculta de verdad. */
.btn[hidden] { display: none; }

.btn-primary { background: var(--color-blue); color: var(--color-white); }
.btn-primary:hover { background: var(--color-blue-dark); }

.btn-accent { background: var(--color-magenta); color: var(--color-white); }
.btn-accent:hover { background: var(--color-magenta-dark); }

.btn-whatsapp { background: #25D366; color: var(--color-white); }
.btn-whatsapp:hover { background: #1DA851; }

.card {
  background: var(--color-white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: transform var(--transition), box-shadow var(--transition);
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }

/* ============================================================
   NAV
   ============================================================ */
.nav {
  position: sticky;
  top: 0;
  z-index: 1000;
  height: var(--nav-height);
  
  background: linear-gradient(180deg, var(--color-white) 0%, #fbfbfc 100%);
  border-bottom: 1px solid var(--color-border);
  /* Línea de acento con la marca, muy sutil en el estado normal — se
     vuelve mucho más visible al hacer scroll (ver .nav.is-scrolled). */
  box-shadow: inset 0 -2px 0 0 rgba(192, 226, 24, 0.35);
  transition: height var(--transition), background var(--transition), box-shadow var(--transition);
  display: flex;
  align-items: center;
}
.nav.is-scrolled {
  height: var(--nav-height-scrolled);
  /* Degradado diagonal entre los dos tonos de azul marino de la paleta en
     vez de un navy liso — se ve más rico sin salirse de la paleta. */
  background: linear-gradient(135deg, var(--color-navy) 0%, var(--color-navy-dark) 100%);
  /* Sombra con un ligero tinte azul (en vez de negro genérico) + el
     acento lime como línea inferior, mucho más marcado que en reposo. */
  box-shadow: 0 4px 18px rgba(20, 34, 68, 0.35), inset 0 -2px 0 0 rgba(192, 226, 24, 0.6);
}
.nav.is-scrolled .search-bar { background: rgba(255,255,255,0.12); }
.nav.is-scrolled .search-bar input { color: var(--color-white); }
.nav.is-scrolled .search-bar input::placeholder { color: rgba(255,255,255,0.7); }
.nav.is-scrolled .search-bar i { color: rgba(255,255,255,0.85); }

.nav__inner {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  gap: 28px;
}

.nav__divider {
  width: 1px;
  height: 28px;
  background: var(--color-border);
  flex-shrink: 0;
}
.nav.is-scrolled .nav__divider { background: rgba(255,255,255,0.2); }

.nav__hamburger {
  display: none;
  height: 36px;
  border: none; background: transparent;
  color: var(--color-text);
  font-size: 1.15rem;
  align-items: center; justify-content: center;
  flex-shrink: 0;
  cursor: pointer;
  
  gap: 8px;
  padding: 0;
}
.nav__hamburger-icon {
  display: flex;
  flex-direction: column;
  align-items: center; justify-content: center;
  width: 22px; height: 22px;
  flex-shrink: 0;
  
  gap: 5px;
}
.nav__hamburger-line {
  display: block;
  width: 20px; height: 2px;
  background: currentColor;
  border-radius: 2px;
  transition: transform 0.25s ease, opacity 0.2s ease;
}
.nav__hamburger.is-open .nav__hamburger-line:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav__hamburger.is-open .nav__hamburger-line:nth-child(2) { opacity: 0; }
.nav__hamburger.is-open .nav__hamburger-line:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.nav.is-scrolled .nav__hamburger { color: var(--color-white); }
.nav__logo { display: flex; align-items: center; flex-shrink: 0; position: relative; }
.nav__logo-full,
.nav__logo-icon {
  transition: opacity 0.35s ease, height var(--transition);
}

.nav__logo-full { height: 68px; opacity: 1; }

.nav.is-scrolled .nav__logo-full { height: 52px; }
.nav__logo-icon {
  display: none;
}

.search-bar {
  flex: 1;
  max-width: 560px;
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--color-gray-bg);
  border-radius: var(--radius-md);
  padding: 10px 16px;
  transition: background var(--transition);
}
.search-bar i { color: var(--color-text-soft); }
.search-bar input {
  border: none;
  background: transparent;
  outline: none;
  flex: 1;
  font-size: 0.95rem;
  color: var(--color-text);
}
.search-bar__icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border: none;
  background: transparent;
  color: var(--color-text-soft);
  cursor: pointer;
  border-radius: 50%;
  flex-shrink: 0;
  transition: background var(--transition), color var(--transition);
}
/* "is-clear" = ahora mismo el ícono es una X (hay texto que limpiar) — se
   nota más que es clicable que cuando es la lupa en reposo. */
.search-bar__icon-btn.is-clear:hover { background: rgba(0,0,0,0.08); color: var(--color-text); }
.nav.is-scrolled .search-bar__icon-btn { color: rgba(255,255,255,0.85); }
.nav.is-scrolled .search-bar__icon-btn.is-clear:hover { background: rgba(255,255,255,0.15); color: var(--color-white); }
.search-bar__results {
  position: absolute;
  top: calc(100% + 8px);
  left: 0; right: 0;
  background: var(--color-white);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  max-height: 70vh;
  overflow-y: auto;
  display: none;
  z-index: 1100;
}
.search-bar__wrap { position: relative; flex: 1; max-width: 560px; }
.search-bar__results.is-open { display: block; }
.search-bar__group { padding: 10px 16px; border-bottom: 1px solid var(--color-border); }
.search-bar__group h4 { margin: 0 0 8px; font-size: 0.8rem; text-transform: uppercase; color: var(--color-text-soft); }
.search-bar__item { display: flex; align-items: center; gap: 10px; padding: 6px 0; font-size: 0.9rem; }
.search-bar__item i { color: var(--color-blue); width: 18px; }

.nav__actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--color-blue);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}
.nav__icon-btn:focus-visible,
.nav__login-btn:focus-visible,
.nav__user-toggle:focus-visible {
  outline: 2px solid var(--color-lime);
  outline-offset: 2px;
}

.nav__icon-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px; height: 42px;
  border-radius: var(--radius-sm);
  background: transparent;
  border: none;
  transition: background var(--transition), transform 0.15s ease;
}
.nav__icon-btn i { font-size: 1.15rem; color: var(--color-navy); transition: color var(--transition); }
.nav.is-scrolled .nav__icon-btn i { color: var(--color-white); }
/* Degradado sutil azul→lime en vez de un gris plano al pasar el mouse —
   mismo par de colores de marca que ya se usa en otras partes del sitio. */
.nav__icon-btn:hover {
  background: linear-gradient(135deg, rgba(0, 152, 218, 0.12), rgba(192, 226, 24, 0.18));
  transform: translateY(-1px);
}
.nav.is-scrolled .nav__icon-btn:hover {
  background: linear-gradient(135deg, rgba(255,255,255,0.16), rgba(192, 226, 24, 0.22));
}
.nav__badge {
  position: absolute;
  top: 2px; right: 2px;
  min-width: 16px; height: 16px;
  padding: 0 4px;
  border-radius: var(--radius-sm);
  background: var(--color-magenta);
  color: var(--color-white);
  font-size: 0.62rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

.nav__login-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 14px 6px 6px;
  border-radius: var(--radius-md);
  background: transparent;
  border: none;
  cursor: pointer;
  transition: background 0.2s ease;
}
.nav__login-btn:hover { background: linear-gradient(135deg, rgba(0, 152, 218, 0.10), rgba(192, 226, 24, 0.16)); }
.nav.is-scrolled .nav__login-btn:hover { background: linear-gradient(135deg, rgba(255,255,255,0.14), rgba(192, 226, 24, 0.2)); }
.nav__login-btn__icon {
  width: 32px; height: 32px;
  border-radius: var(--radius-sm);
  /* Degradado azul→lime propio de la marca en vez de gris plano — le da
     un poco de vida al botón de login sin que se sienta fuera de tono. */
  background: linear-gradient(135deg, var(--color-blue), var(--color-lime));
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.nav__login-btn__icon i { font-size: 1rem; color: var(--color-white); }
.nav__login-btn__label {
  font-size: 0.85rem; font-weight: 600; color: var(--color-navy);
  display: inline-flex; white-space: nowrap;
  font-variant-numeric: tabular-nums; /* letras/números de ancho parejo — el scramble del decoder no "baila" de ancho */
}
.nav.is-scrolled .nav__login-btn__label { color: var(--color-white); }

.decoder-char {
  display: inline-block;
  min-width: 0.56em;
  text-align: center;
  transition: color 0.1s ease;
}
.decoder-char.is-decoding { color: var(--color-blue); }

.nav__user { position: relative; }
.nav__user-toggle {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px 6px 6px;
  border-radius: var(--radius-md);
  background: transparent;
  border: none;
  cursor: pointer;
  transition: background 0.2s ease;
}
.nav__user-toggle:hover, .nav__user-toggle.is-open { background: var(--color-gray-bg); }
.nav.is-scrolled .nav__user-toggle:hover, .nav.is-scrolled .nav__user-toggle.is-open { background: rgba(255,255,255,0.12); }
.nav__user-toggle img, .nav__user-toggle .avatar-fallback {
  width: 30px; height: 30px;
  border-radius: var(--radius-sm);
  object-fit: cover;
  background: transparent;
  border: 2px solid var(--color-blue);
  color: var(--color-blue);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.8rem; font-weight: 700;
}
.nav.is-scrolled .nav__user-toggle .avatar-fallback { border-color: var(--color-white); color: var(--color-white); }
.nav__user-toggle span { font-size: 0.85rem; font-weight: 600; color: var(--color-navy); }
.nav.is-scrolled .nav__user-toggle span { color: var(--color-white); }

.nav__user-toggle span.nav__greeting-name { color: var(--color-blue); font-weight: 700; }
.nav.is-scrolled .nav__user-toggle span.nav__greeting-name { color: var(--color-lime); }
.nav__user-toggle .fa-chevron-down { transition: transform 0.2s ease; font-size: 0.65rem; color: var(--color-lime); }
.nav__user-toggle.is-open .fa-chevron-down { transform: rotate(180deg); }

/* La campana se pinta de amarillo/lime en cuanto hay algún aviso sin
   leer, para que se note de un vistazo sin tener que fijarse en el
   numerito rojo. */

.nav__icon-btn .fa-bell.is-unread { color: var(--color-star-fill); }
.nav.is-scrolled .nav__icon-btn .fa-bell.is-unread { color: var(--color-star-fill); }

.nav__user-dropdown {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  min-width: 250px;
  background: var(--color-white);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--color-border);
  padding: 8px;
  display: none;
  z-index: 1200;
}
.nav__user-dropdown.is-open { display: block; }
.nav__dropdown-profile { display: flex; align-items: center; gap: 12px; padding: 10px 10px 12px; }
.nav__dropdown-profile__info { display: flex; flex-direction: column; min-width: 0; }
.nav__dropdown-profile__info strong { font-size: 0.92rem; color: var(--color-navy); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nav__dropdown-profile__nick { font-size: 0.78rem; color: var(--color-blue); font-weight: 600; }

.nav__dropdown-soon {
  margin-left: auto; font-size: 0.62rem; font-weight: 700;
  color: #b8860b; background: rgba(255, 212, 73, 0.25);
  padding: 2px 8px; border-radius: var(--radius-sm); text-transform: uppercase;
  letter-spacing: 0.02em;
}

.nav__dropdown-continue-note {
  display: block; font-size: 0.68rem; font-weight: 600;
  color: var(--color-blue); margin-top: 2px;
}
/* Mismo aviso, pero como un puntito rojo persistente sobre el avatar del
   menú de usuario — para que se note incluso con el dropdown cerrado.
   Requiere position:relative en el botón que lo contiene (ver
   .nav__user-toggle más abajo). */
.nav__user-pending-dot {
  position: absolute; top: 2px; right: 2px;
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--color-magenta);
  border: 2px solid var(--color-white);
}
.nav__dropdown-profile__email { font-size: 0.74rem; color: var(--color-text-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nav__dropdown-stats {
  display: flex; gap: 18px;
  padding: 0 10px 10px;
  font-size: 0.82rem; font-weight: 700; color: var(--color-navy);
}
.nav__dropdown-stats i { color: var(--color-magenta); margin-right: 4px; }
.nav__dropdown-stats small { font-weight: 500; color: var(--color-text-soft); margin-left: 2px; }
.nav__user-dropdown a, .nav__user-dropdown button {
  display: flex; align-items: center; gap: 10px;
  width: 100%; text-align: left;
  padding: 9px 10px;
  border-radius: var(--radius-sm);
  font-size: 0.88rem; font-weight: 600; color: var(--color-navy);
  background: none; border: none;
}
.nav__user-dropdown a i, .nav__user-dropdown button i { width: 16px; color: var(--color-text-soft); }
.nav__user-dropdown a:hover, .nav__user-dropdown button:hover { background: var(--color-gray-bg); }
.nav__user-dropdown .dropdown-divider { height: 1px; background: var(--color-border); margin: 6px 4px; }
.nav__user-dropdown .dropdown-logout { color: var(--color-danger); }
.nav__user-dropdown .dropdown-logout i { color: var(--color-danger); }

/* Dropdown de notificaciones (campanita) — mismo lenguaje visual que el de usuario */
.nav__notif { position: relative; }
.nav__notif-dropdown {
  position: absolute;
  top: calc(100% + 10px);
  right: -8px;
  width: 320px;
  max-height: 380px;
  overflow-y: auto;
  background: var(--color-white);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--color-border);
  padding: 10px;
  display: none;
  z-index: 1200;
}
.nav__notif-dropdown.is-open { display: block; }
.nav__notif-dropdown h4 { margin: 2px 6px 8px; font-size: 0.86rem; color: var(--color-navy); }
.nav__notif-item { display: flex; gap: 10px; padding: 9px 8px; border-radius: var(--radius-sm); }
.nav__notif-item.is-unread { background: rgba(0, 152, 218, 0.07); }
.nav__notif-item i { color: var(--color-blue); font-size: 1rem; margin-top: 2px; flex-shrink: 0; }

.nav__notif-item > div { min-width: 0; flex: 1; }
.nav__notif-item p { margin: 0 0 3px; font-size: 0.82rem; color: var(--color-text); line-height: 1.35; overflow-wrap: break-word; }
.nav__notif-item span { font-size: 0.7rem; color: var(--color-text-soft); }
.nav__notif-empty { padding: 16px 8px; text-align: center; font-size: 0.84rem; color: var(--color-text-soft); }

.nav__notif-footer-link {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  margin-top: 6px; padding: 10px 8px 2px;
  border-top: 1px solid var(--color-border);
  font-size: 0.8rem; font-weight: 600; color: var(--color-blue);
  text-decoration: none;
}
.nav__notif-footer-link:hover { text-decoration: underline; }

/* ============================================================
   FORMULARIOS DE PUBLICAR — nota introductoria + acordeón por secciones
   ============================================================ */
.publish-intro-note {
  font-size: 0.84rem; color: var(--color-text-soft); line-height: 1.4;
  background: var(--color-gray-bg); border-radius: var(--radius-md);
  padding: 10px 14px; margin: 0 0 16px;
}

.publish-intro-note__link {
  background: none; border: none; padding: 0; margin: 0;
  color: var(--color-blue); text-decoration: underline;
  font: inherit; cursor: pointer;
}

.publish-accordion__section {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  margin-bottom: 10px;
  overflow: hidden;
}
.publish-accordion__header {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  background: var(--color-gray-bg); border: none; cursor: pointer;
  padding: 12px 16px; font-size: 0.88rem; font-weight: 700; color: var(--color-navy);
}
.publish-accordion__header .accordion-check { color: var(--color-text-soft); }
.publish-accordion__section.is-done .publish-accordion__header .accordion-check { color: var(--color-lime); }
.accordion-caret { transition: transform 0.2s ease; font-size: 0.78rem; color: var(--color-text-soft); }
.publish-accordion__section.is-open .accordion-caret { transform: rotate(180deg); }
.publish-accordion__body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
  padding: 0 16px;
}

.publish-accordion__section.is-open .publish-accordion__body {
  padding: 16px;
}
.accordion-next { width: 100%; justify-content: center; margin-top: 4px; }

/* -------- Variante en pestañas (tabs) --------
   Usada en los modales de captura de negocio (Completar datos), clasificado
   y evento, en vez del acordeón: evita que el contenido se corte, ya que
   cada sección se muestra completa (sin max-height calculado) al elegir su
   pestaña, en vez de expandirse/colapsarse verticalmente. La estructura de
   datos (secciones .publish-accordion__section) es la misma; convertAccordionToTabs()
   mueve cada encabezado a una barra de pestañas y solo cambia el modo de
   mostrar/ocultar los cuerpos. */
.publish-tabs__nav {
  display: flex; gap: 2px; overflow-x: auto; margin-bottom: 14px;
  border-bottom: 2px solid var(--color-border); -webkit-overflow-scrolling: touch;
}
.publish-tabs__nav::-webkit-scrollbar { height: 4px; }
.publish-tabs__tab {
  flex: 0 0 auto; width: auto; display: flex; align-items: center; gap: 8px;
  padding: 10px 16px; background: none; border: none; cursor: pointer;
  font-size: 0.86rem; font-weight: 700; color: var(--color-text-soft);
  border-bottom: 3px solid transparent; margin-bottom: -2px; white-space: nowrap;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.publish-tabs__tab.is-active { color: var(--color-blue); border-bottom-color: var(--color-blue); }
.publish-tabs__tab.is-done .accordion-check { color: var(--color-lime); }
.publish-tabs .publish-accordion__section {
  border: none; margin-bottom: 0; overflow: visible; border-radius: 0;
}
.publish-tabs .publish-accordion__body {
  max-height: none !important; overflow: visible; padding: 4px 2px 8px; display: none;
}
.publish-tabs .publish-accordion__section.is-open .publish-accordion__body { display: block; padding: 4px 2px 8px; }

.publish-steps-progress { margin-bottom: 16px; }
.publish-steps-progress__summary {
  font-size: 0.78rem; font-weight: 600; color: var(--color-text-soft);
  margin-bottom: 8px;
}
.publish-steps-progress__bar {
  height: 5px; border-radius: 999px; background: var(--color-border);
  overflow: hidden; margin-bottom: 12px;
}
.publish-steps-progress__bar-fill {
  height: 100%; background: var(--color-blue);
  border-radius: 999px;
  transition: width 0.3s ease;
}

.publish-steps-progress__steps {
  display: flex; gap: 14px;
  overflow-x: auto;
  padding: 2px 2px 6px;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.publish-steps-progress__steps::-webkit-scrollbar { display: none; }
.publish-steps-progress__step {
  flex: 0 0 auto;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  background: none; border: none; padding: 0;
  cursor: pointer;
  max-width: 74px;
}
.publish-steps-progress__step:disabled { cursor: default; }
.publish-steps-progress__num {
  position: relative;
  width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  /* Regla del proyecto respetada: nunca círculos/píldoras — cuadrado con
     esquina redondeada, igual que el resto de botones nuevos del sitio. */
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--color-border);
  background: var(--color-white);
  color: var(--color-text-soft);
  font-size: 0.78rem; font-weight: 700;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.publish-steps-progress__label {
  font-size: 0.66rem; font-weight: 600; color: var(--color-text-soft);
  text-align: center; line-height: 1.15;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 100%;
}
/* Estado: paso ya completado */
.publish-steps-progress__step.is-done .publish-steps-progress__num {
  background: var(--color-lime); border-color: var(--color-lime); color: var(--color-navy);
}
.publish-steps-progress__step.is-done .publish-steps-progress__label { color: var(--color-navy); }
/* Estado: paso actual */
.publish-steps-progress__step.is-current .publish-steps-progress__num {
  background: var(--color-blue); border-color: var(--color-blue); color: var(--color-white);
}
.publish-steps-progress__step.is-current .publish-steps-progress__label { color: var(--color-blue); font-weight: 700; }

.publish-steps-progress__step.is-pending { opacity: 0.45; }
.publish-steps-progress__step.is-pending .publish-steps-progress__num { background: var(--color-gray-bg); }

.publish-steps-progress__required-dot {
  position: absolute; top: -3px; right: -3px;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--color-magenta);
  border: 1.5px solid var(--color-white);
}

/* Punto 2: fila con "Regresar" + "Continuar" lado a lado en las pestañas */
.accordion-nav-btns { display: flex; gap: 10px; margin-top: 4px; }
.accordion-nav-btns .accordion-next,
.accordion-nav-btns .accordion-prev { flex: 1; width: auto; margin-top: 0; }

.required-mark { color: var(--color-danger); margin-left: 2px; }
.publish-required-hint { font-size: 0.76rem; color: var(--color-text-soft); margin: -4px 0 14px; }

.floating-field__counter {
  position: absolute; right: 12px; bottom: -18px;
  font-size: 0.7rem; color: var(--color-text-soft);
}
.floating-field--compact { margin-bottom: 12px; }
.publish-subcats-hint {
  font-size: 0.78rem; color: var(--color-text-soft);
  background: rgba(0, 152, 218, 0.06);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  margin: -8px 0 16px;
  display: flex; align-items: flex-start; gap: 6px;
}
.publish-subcats-hint i { color: var(--color-blue); margin-top: 2px; }

.publish-missing-category-hint {
  display: flex; align-items: center; gap: 10px; width: 100%;
  font: inherit; font-size: 0.85rem; text-align: left; color: var(--color-navy);
  background: rgba(192, 226, 24, 0.28); border: 1.5px solid var(--color-lime);
  border-radius: var(--radius-sm); padding: 10px 14px; margin: -4px 0 16px;
  cursor: pointer; font-weight: 600; line-height: 1.3;
  transition: background 0.15s ease, transform 0.1s ease;
}
.publish-missing-category-hint:hover,
.publish-missing-category-hint:focus-visible {
  background: rgba(192, 226, 24, 0.42);
  transform: translateY(-1px);
}
.publish-missing-category-hint i:first-child { color: var(--color-navy); font-size: 1.15rem; flex-shrink: 0; }
.publish-missing-category-hint strong { font-weight: 800; }
.publish-missing-category-hint .publish-missing-category-hint__arrow {
  margin-left: auto; color: var(--color-navy); flex-shrink: 0; font-size: 0.8rem;
}

/* Punto 7: selector de días de la semana para eventos con fechas recurrentes
   dentro de un rango (ej. viernes, sábados y domingos) */
.event-weekday-picker { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }
.event-weekday-chip {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  width: 44px; height: 40px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
  background: var(--color-white);
  font-size: 0.78rem; font-weight: 700; color: var(--color-text-soft);
  cursor: pointer;
  text-transform: capitalize;
}
.event-weekday-chip input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.event-weekday-chip:has(input:checked) { background: var(--color-blue); border-color: var(--color-blue); color: var(--color-white); }

/* -------- Mis negocios -------- */

.business-stats-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px;
}
.business-stats-card {
  background: var(--color-gray-bg); border-radius: var(--radius-md);
  padding: 18px 14px; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
}
.business-stats-card i { font-size: 1.3rem; color: var(--color-blue); }
.business-stats-card strong { font-size: 1.4rem; color: var(--color-navy); }
.business-stats-card span { font-size: 0.78rem; color: var(--color-text-soft); }

.my-business-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 14px; border: 1px solid var(--color-border); border-radius: var(--radius-md);
  margin-bottom: 10px;
}
.my-business-row__info { display: flex; flex-direction: column; gap: 4px; }
.my-business-row__info strong { font-size: 0.92rem; color: var(--color-navy); }
.my-business-row__status { font-size: 0.76rem; font-weight: 600; display: flex; align-items: center; gap: 5px; }
.my-business-row__status.is-verified { color: var(--color-lime-dark, #3a9d33); }
.my-business-row__status.is-pending { color: var(--color-text-soft); }

.my-business-row__status.is-rejected { color: var(--color-danger); }
.my-business-row--rejected { border: 1px solid rgba(214, 69, 69, 0.25); background: rgba(214, 69, 69, 0.04); }
.my-business-row__reason { margin: 4px 0 0; font-size: 0.76rem; color: var(--color-text-soft); }
.my-business-row__hint { font-size: 0.76rem; color: var(--color-text-soft); text-align: right; max-width: 160px; }
.my-business-row__actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.my-business-row__actions .btn { font-size: 0.8rem; padding: 8px 12px; }

/* -------- Panel de administrador -------- */
.admin-panel-tabs {
  display: flex; gap: 6px;
  padding: 0 28px; margin-bottom: 6px;
  border-bottom: 1px solid var(--color-border);
}
.admin-panel-tab {
  display: flex; align-items: center; gap: 6px;
  padding: 10px 4px; margin-bottom: -1px;
  background: none; border: none; border-bottom: 2px solid transparent;
  font-size: 0.85rem; font-weight: 600; color: var(--color-text-soft);
  cursor: pointer; transition: color 0.2s ease, border-color 0.2s ease;
}
.admin-panel-tab:hover { color: var(--color-navy); }
.admin-panel-tab.is-active { color: var(--color-navy); border-bottom-color: var(--color-lime); }

#adminTabPendientes .my-business-row { flex-wrap: wrap; }
#adminTabPendientes .my-business-row__hint { text-align: left; max-width: none; flex-basis: 100%; }

/* -------- Gestión de productos (desde Mis negocios) -------- */
.manage-products-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 4px; }
.manage-product-row {
  display: flex; align-items: center; gap: 12px;
  padding: 8px; border: 1px solid var(--color-border); border-radius: var(--radius-md);
}
.manage-product-row.is-paused { opacity: 0.6; }
.manage-product-row img { width: 48px; height: 48px; border-radius: var(--radius-sm); object-fit: cover; flex-shrink: 0; }
.manage-product-row__info { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.manage-product-row__info strong { font-size: 0.86rem; color: var(--color-navy); }
.manage-product-row__info span { font-size: 0.8rem; color: var(--color-text-soft); }
.manage-product-row__paused-tag { color: var(--color-danger) !important; font-weight: 600; }

.manage-product-row__actions { display: flex; gap: 4px; flex-shrink: 0; }
.manage-product-row__icon-btn {
  width: 32px; height: 32px; border-radius: var(--radius-sm);
  background: none; border: none; color: var(--color-navy); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.manage-product-row__icon-btn:hover { background: var(--color-gray-bg); }
.manage-product-row__icon-btn--danger { color: var(--color-danger); }
.manage-product-row__icon-btn--danger:hover { background: rgba(230, 57, 70, 0.1); }

/* -------- Paso de verificación con foto -------- */
.verif-instructions { font-size: 0.88rem; color: var(--color-text); line-height: 1.5; margin: 0 0 8px; }
.verif-requirements { margin: 0 0 16px; padding-left: 20px; font-size: 0.86rem; color: var(--color-navy); font-weight: 600; }
.verif-requirements li { margin-bottom: 4px; }
.verif-examples-label { font-size: 0.8rem; color: var(--color-text-soft); margin: 0 0 8px; }
.verif-examples-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; margin-bottom: 16px; }
.verif-example {
  border: none; padding: 0; border-radius: var(--radius-sm); overflow: hidden;
  cursor: zoom-in; aspect-ratio: 1; background: var(--color-gray-bg);
}
.verif-example img { width: 100%; height: 100%; object-fit: cover; }

.verif-upload-zone {
  border: 2px dashed var(--color-border);
  border-radius: var(--radius-md);
  padding: 20px; text-align: center;
  margin-bottom: 14px;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.verif-upload-zone.is-dragover { border-color: var(--color-blue); background: rgba(0, 152, 218, 0.06); }
.verif-upload-empty i { font-size: 1.8rem; color: var(--color-blue); margin-bottom: 8px; }
.verif-upload-empty p { margin: 0 0 12px; font-size: 0.86rem; color: var(--color-text-soft); }
.verif-upload-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.btn-outline-blue {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  border: 2px solid var(--color-blue); color: var(--color-blue); background: none;
  padding: 8px 16px; border-radius: var(--radius-md); font-weight: 600; font-size: 0.85rem;
}
.btn-outline-blue:hover { background: var(--color-blue); color: var(--color-white); }

.btn-danger {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  border: none; color: var(--color-white); background: var(--color-danger);
  padding: 10px 16px; border-radius: var(--radius-md); font-weight: 600; font-size: 0.85rem;
}
.btn-danger:hover { filter: brightness(0.92); }
/* Pedido explícito: botón "Destacar" en Negocios activos del admin — un
   tono distinto cuando YA está destacado (para distinguirlo de un
   simple hover). Corrección a pedido explícito: mismo cambio de paleta
   que .bcp-destacado-glow/border — azul→lima del sistema en vez del
   morado/naranja de la referencia original. */
.btn-destacar--activo {
  background: linear-gradient(120deg, var(--color-blue), var(--color-lime));
  color: var(--color-navy);
}
.btn-destacar--activo:hover { filter: brightness(1.05); }
/* Pedido explícito: botón "Productos" en distinto color cuando el
   negocio YA tiene sus datos completados (subcategorías, foto y logo) —
   mismo criterio de isBusinessDataComplete() que ya decidía el texto
   "Completar datos" vs "Editar datos". Verde en vez del gris/blanco de
   siempre, para distinguirlo de un vistazo sin tener que leer nada. */
.btn-productos--completo {
  background: var(--color-lime);
  color: var(--color-navy);
}
.btn-productos--completo:hover { filter: brightness(1.05); }
.verif-upload-preview { position: relative; display: inline-block; max-width: 100%; }
.verif-upload-preview img { max-width: 100%; max-height: 220px; border-radius: var(--radius-md); }
.verif-upload-remove {
  display: flex; align-items: center; gap: 6px; margin: 10px auto 0;
  background: none; border: none; color: var(--color-danger); font-weight: 600; font-size: 0.82rem; cursor: pointer;
}
/* Bug real corregido (reporte del usuario: el texto de "Acepto los
   términos y condiciones de uso de la foto" se corta en modo responsivo):
   .publish-checkbox-row (la base que reusa esta clase) es un flex row sin
   flex-wrap — en pantallas angostas, el checkbox + el texto largo no
   caben en una sola línea y no había forma de que el texto bajara a la
   siguiente. Con flex-wrap: wrap el texto se acomoda en cuantas líneas
   necesite, y flex-shrink: 0 en el checkbox evita que la casilla se
   comprima o se deforme al hacerle espacio al texto. */
.verif-terms { align-items: flex-start; font-size: 0.8rem; line-height: 1.4; flex-wrap: wrap; }
.verif-terms input[type="checkbox"] { flex-shrink: 0; margin-top: 2px; }
.verif-terms__toggle {
  background: none; border: none; padding: 0; margin: 0;
  color: var(--color-blue); text-decoration: underline;
  font-size: inherit; font-weight: 600; cursor: pointer;
}
.verif-terms__full {
  font-size: 0.78rem; color: var(--color-text-soft); line-height: 1.4;
  margin: -4px 0 8px; padding: 8px 10px;
  background: var(--color-gray-bg); border-radius: var(--radius-sm);
}

.verif-terms--shake {
  animation: verifTermsShake 0.4s ease;
  outline: 2px solid var(--color-danger);
  outline-offset: 4px;
  border-radius: var(--radius-sm);
}
@keyframes verifTermsShake {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-4px); }
  40%, 80% { transform: translateX(4px); }
}
.verif-step-actions { display: flex; gap: 10px; margin-top: 16px; }

.classified-cv-locked {
  display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
  margin: 6px 0 14px;
  padding: 14px;
  background: var(--color-gray-bg);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-sm);
  font-size: 0.88rem;
  color: var(--color-text-soft);
}
.classified-cv-locked i { color: var(--color-blue); margin-right: 4px; }
.verif-step-actions .btn-primary { flex: 1; justify-content: center; }

/* -------- Lightbox simple para ver ejemplos en grande -------- */
.image-lightbox {
  position: fixed; inset: 0; background: rgba(14, 29, 61, 0.85);
  display: flex; align-items: center; justify-content: center;
  z-index: 3000; padding: 40px; cursor: zoom-out;
}
.image-lightbox img { max-width: 100%; max-height: 100%; border-radius: var(--radius-md); box-shadow: var(--shadow-lg); }
.image-lightbox__close {
  position: absolute; top: 20px; right: 20px;
  width: 40px; height: 40px; border-radius: 50%;
  background: rgba(255,255,255,0.15); border: none; color: var(--color-white);
  font-size: 1.1rem; cursor: pointer;
}

@media (max-width: 720px) {
  .verif-examples-grid { grid-template-columns: repeat(3, 1fr); }
}

/* -------- Selector de ubicación: GPS del dispositivo o mapa -------- */
.location-picker-label {
  display: block; font-size: 0.82rem; font-weight: 600; color: var(--color-navy); margin: 4px 0 8px;
}
.location-picker-actions {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 10px;
}
.location-picker-hint { font-size: 0.78rem; color: var(--color-text-soft); }
.location-picker-map {
  height: 200px; border-radius: var(--radius-md); overflow: hidden;
  border: 1px solid var(--color-border); margin-bottom: 4px;
}

/* -------- Galería de fotos: cortina/filmstrip horizontal -------- */
.gallery-upload-dropzone {
  border: 2px dashed var(--color-border);
  border-radius: var(--radius-md);
  padding: 20px; text-align: center;
  margin-bottom: 12px;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.gallery-upload-dropzone.is-dragover { border-color: var(--color-blue); background: rgba(0, 152, 218, 0.06); }
.gallery-upload-dropzone i { font-size: 1.8rem; color: var(--color-blue); margin-bottom: 8px; }
.gallery-upload-dropzone p { margin: 0 0 12px; font-size: 0.86rem; color: var(--color-text-soft); }
.gallery-upload-strip {
  display: flex; gap: 10px; overflow-x: auto; padding-bottom: 4px;
}
.gallery-upload-thumb {
  position: relative; flex-shrink: 0;
  width: 84px; height: 84px; border-radius: var(--radius-sm); overflow: hidden;
  background: var(--color-gray-bg);
}
.gallery-upload-thumb img { width: 100%; height: 100%; object-fit: cover; }
/* Selector visual de colores (swatches) del formulario de producto — círculos
   de color en los que se da click para elegir, en vez de escribir texto libre */
.color-swatch-picker { display: flex; flex-wrap: wrap; gap: 10px; margin: 6px 0 16px; }
.color-swatch {
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--swatch-color); border: 2px solid var(--color-border);
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  padding: 0; transition: transform 0.15s ease, border-color 0.15s ease;
}
.color-swatch:hover { transform: scale(1.1); }
.color-swatch i { font-size: 0.7rem; color: var(--color-white); opacity: 0; text-shadow: 0 0 2px rgba(0,0,0,0.6); }
.color-swatch.is-selected { border-color: var(--color-blue); box-shadow: 0 0 0 2px var(--color-blue); }
.color-swatch.is-selected i { opacity: 1; }
.color-swatch--light i { color: var(--color-navy); text-shadow: none; }

.gallery-upload-thumb__remove {
  position: absolute; top: 3px; right: 3px;
  width: 20px; height: 20px; border-radius: 50%;
  background: rgba(14, 29, 61, 0.75); color: var(--color-white); border: none;
  display: flex; align-items: center; justify-content: center; font-size: 0.6rem; cursor: pointer;
}

.photo-mosaic {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-bottom: 12px;
}
.photo-mosaic__items { display: contents; }
.photo-mosaic__tile {
  position: relative; flex-shrink: 0;
  width: 92px; height: 92px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--color-gray-bg);
}
.photo-mosaic__tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.photo-mosaic__tile--add {
  width: 150px;
  border: 2px dashed var(--color-border);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  padding: 8px; text-align: center;
  color: var(--color-text-soft);
  transition: border-color 0.2s ease, background 0.2s ease;
}
.photo-mosaic__tile--add > i { font-size: 1.3rem; color: var(--color-blue); }
.photo-mosaic__tile--add span { font-size: 0.7rem; line-height: 1.2; }
.photo-mosaic.is-dragover .photo-mosaic__tile--add,
.photo-mosaic__tile--add.is-dragover { border-color: var(--color-blue); background: rgba(0, 152, 218, 0.06); }
.photo-mosaic__add-actions { display: flex; gap: 6px; margin-top: 2px; }
.photo-mosaic__icon-btn {
  width: 28px; height: 28px; border-radius: 50%;
  border: 1px solid var(--color-border); background: var(--color-white);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; color: var(--color-blue); font-size: 0.8rem;
}
.photo-mosaic__icon-btn:hover { background: var(--color-blue); color: var(--color-white); }
.photo-mosaic__remove {
  position: absolute; top: 3px; right: 3px;
  width: 20px; height: 20px; border-radius: 50%;
  background: rgba(14, 29, 61, 0.75); color: var(--color-white); border: none;
  display: flex; align-items: center; justify-content: center; font-size: 0.6rem; cursor: pointer;
}

/* Filas dinámicas de "tipo de boleto" (concepto + costo) del formulario de evento */
.ticket-tier-row {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 10px; position: relative; padding-right: 30px;
}
.ticket-tier-row .floating-field { margin-bottom: 0; flex: 1; }
.ticket-tier-row .ticket-tier-remove {
  position: static; width: 24px; height: 24px; flex-shrink: 0;
}

/* ============================================================
   BANNER PRINCIPAL (autoscroll, max 300px) + GALERÍA LATERAL
   ============================================================ */
.hero {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 16px;
  max-width: 1280px;
  margin: 20px auto 10px;
  padding: 0 20px;
  height: 300px;
}

.hero__side-gallery {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  height: 300px;
  box-shadow: var(--shadow-md);
}
.hero__side-gallery .slide {
  position: absolute; inset: 0;
  opacity: 0;
  transition: opacity 0.8s ease;
}
.hero__side-gallery .slide.is-active { opacity: 1; }
.hero__side-gallery .slide img { width: 100%; height: 100%; object-fit: cover; }
.hero__side-gallery .slide__caption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 16px 14px 14px;
  background: linear-gradient(0deg, rgba(14,29,61,0.92) 0%, rgba(14,29,61,0.55) 60%, transparent 100%);
  color: var(--color-white);
}
.slide__caption strong { display: block; font-size: 1rem; margin-bottom: 2px; }
.slide__caption span { font-size: 0.78rem; opacity: 0.9; }

.hero__banner {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  height: 300px;
  box-shadow: var(--shadow-md);
}
.hero__banner .slide { position: absolute; inset: 0; opacity: 0; transition: opacity 0.9s ease; }
.hero__banner .slide.is-active { opacity: 1; }
.hero__banner .slide img { width: 100%; height: 100%; object-fit: cover; }
.hero__banner .slide__content {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; justify-content: center;
  padding: 0 48px;
  background: linear-gradient(90deg, rgba(21,42,86,0.85) 0%, rgba(21,42,86,0.35) 55%, transparent 100%);
  color: var(--color-white);
  max-width: 60%;
}
.hero__banner .slide__content h2 { margin: 0 0 8px; font-size: 1.8rem; }
.hero__banner .slide__content p { margin: 0 0 14px; opacity: 0.92; }

.hero__banner .slide__content .btn { align-self: flex-start; }

.carousel-arrows {
  position: absolute;
  bottom: 12px; right: 14px;
  display: flex; gap: 8px;
  z-index: 5;
}
.carousel-arrows[hidden] { display: none; }
.carousel-arrow {
  width: 34px; height: 34px;
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,0.2);
  border: 1px solid rgba(255,255,255,0.4);
  color: var(--color-white);
  display: flex; align-items: center; justify-content: center;
  backdrop-filter: blur(4px);
}
.carousel-arrow:hover { background: rgba(255,255,255,0.35); }

.carousel-dots {
  position: absolute;
  bottom: 14px; left: 14px;
  display: flex; gap: 6px;
  z-index: 5;
}
.carousel-dots[hidden] { display: none; }
.carousel-dots button {
  width: 8px; height: 8px;
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,0.5);
  border: none;
}
.carousel-dots button.is-active { background: var(--color-white); width: 20px; }

/* Zoom en hover (todas las galerías) */
.gallery-zoom { overflow: hidden; }
.gallery-zoom img { transition: transform 0.7s cubic-bezier(0.4, 0, 0.2, 1); }
.gallery-zoom:hover img { transform: scale(1.08); }
.gallery-clickable { cursor: zoom-in; }

.gallery-clickable:focus-visible {
  outline-offset: -3px;
}
/* El zoom de arriba (.gallery-zoom:hover) solo reaccionaba al mouse —
   alguien navegando con teclado (Tab hasta la galería, o hasta una de sus
   miniaturas) nunca lo veía, así que ese marco azul de foco aparecía sin
   ningún acompañamiento visual en la foto. :focus-within en el contenedor
   completo hace que el mismo zoom aplique también por teclado, y se queda
   así ("mantenerse grande") mientras el foco siga dentro de la galería —
   se quita solo hasta que el foco de verdad se mueva a otro lado, igual
   que ya pasa con el mouse al salir con hover. */
.gallery-clickable:focus-within .gallery-zoom img { transform: scale(1.08); }

/* ============================================================
   CATEGORÍAS
   ============================================================ */
.categories-section {
  padding: 12px 0 8px;
  position: sticky;
  top: var(--nav-height-live, var(--nav-height-scrolled));
  z-index: 900;
  background: var(--color-gray-bg);
}
.categories-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
/* En escritorio este wrapper es "invisible" para el layout (sus hijos se
   comportan como si fueran hijos directos del flex de arriba) — solo se
   convierte en su propia fila en modo responsivo, ver el media query. */
.categories-toolbar__row2 { display: contents; }

.type-switch {
  display: inline-flex;
  background: var(--color-white);
  border-radius: var(--radius-md);
  height: 40px; padding: 3px; gap: 3px;
  box-shadow: var(--shadow-sm);
}
.type-switch button {
  border: none;
  background: transparent;
  height: 100%; padding: 0 16px;
  border-radius: var(--radius-sm);
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--color-text-soft);
  display: flex; align-items: center; justify-content: center; gap: 7px;
  transition: background var(--transition), color var(--transition);
}
.type-switch button.is-active { background: var(--color-magenta); color: var(--color-white); }
.type-switch button svg { width: 18px; height: 18px; flex-shrink: 0; }
/* El botón activo del switch se colapsa a solo-ícono (ya no hace falta el texto,
   porque ese lado ya está seleccionado); el inactivo conserva ícono + texto. */
.type-switch button.is-active { padding: 0 12px; }
.type-switch button.is-active span { display: none; }

/* Ícono con rebote al activarse (mismo tipo de animación que la referencia del usuario) */
.type-switch button.is-active svg,
.category-all-btn.is-active .category-all-btn__icon,
.filter-toggle[data-active="true"] i,
.bcp-bounce { animation: bcpIconBounce 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); }
@keyframes bcpIconBounce {
  0% { transform: scale(0.5); }
  55% { transform: scale(1.3); }
  75% { transform: scale(0.92); }
  100% { transform: scale(1); }
}

.category-all-btn {
  flex-shrink: 0;
  width: 92px;
  height: 92px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 8px 6px;
  overflow: hidden;
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.category-all-btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm); border-color: var(--color-blue); }
.category-all-btn.is-active {
  border-color: var(--color-blue);
  background: #EAF7FE;
  animation: chipSelectPulse 0.4s ease;
}
.category-all-btn__icon {
  width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.6rem;
  line-height: 1;
  flex-shrink: 0;
}
.category-all-btn__name {
  font-weight: 600;
  font-size: 0.62rem;
  color: var(--color-navy);
  text-align: center;
  line-height: 1.2;
}

.filter-select-wrap {
  display: flex; align-items: center; gap: 8px;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 0 12px;
  height: 40px;
}
.filter-select-wrap i { color: var(--color-blue); font-size: 0.85rem; }
.filter-select {
  border: none; background: transparent; outline: none;
  font-size: 0.85rem; font-weight: 600; color: var(--color-navy);
  height: 100%; cursor: pointer;
}

.filter-toggle {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 0 16px; height: 40px;
  font-size: 0.85rem; font-weight: 600; color: var(--color-text-soft);
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.filter-toggle:hover { border-color: var(--color-blue); }
.filter-toggle[data-active="true"] {
  background: var(--color-blue); color: var(--color-white); border-color: var(--color-blue);
}
.filter-toggle[data-active="true"] i { color: var(--color-white); }

.filter-toggle__abbr { display: none; } /* solo se muestra en móvil, ver el media query de abajo */

/* El puntito de "Abierto ahora" usa el mismo estilo visual (cuadrito
   redondeado sólido) que .biz-card-premium__open-badge en las tarjetas
   de negocio — gris cuando el filtro NO está presionado, verde cuando sí. */
.filter-toggle__dot {
  display: inline-block;
  width: 10px; height: 10px;
  border-radius: 3px;
  background: #b0b4bc;
  flex-shrink: 0;
}
.filter-toggle[data-active="true"] .filter-toggle__dot { background: #2ecc71; }

#quickPublishBtn { height: 40px; justify-content: center; }

.grid-empty-state { padding: 32px; text-align: center; color: var(--color-text-soft); }
.grid-empty-state i { font-size: 2rem; color: var(--color-blue); margin-bottom: 10px; }

.categories-track-wrap {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
}

.categories-track {
  display: flex;
  gap: 18px;
  overflow-x: auto;
  padding: 10px 2px 10px;
  cursor: grab;
  scroll-behavior: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  user-select: none;
  -webkit-user-select: none;
  flex: 1;
  min-width: 0;
}
.categories-track::-webkit-scrollbar { display: none; height: 0; }
.categories-track.is-dragging { cursor: grabbing; }

.categories-arrow {
  flex-shrink: 0;
  width: 38px; height: 38px;
  border-radius: var(--radius-sm);
  background: var(--color-white);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
  color: var(--color-navy);
  display: flex; align-items: center; justify-content: center;
  transition: background var(--transition), color var(--transition);
}
.categories-arrow:hover { background: var(--color-blue); color: var(--color-white); border-color: var(--color-blue); }

/* El botón "Todos" ahora vive fijo entre la flecha izquierda y el track: es un
   item de flex más del renglón, no parte del contenido que se arrastra. */
.categories-track-wrap .category-all-btn { flex-shrink: 0; }

.category-chip {
  flex-shrink: 0;
  width: 92px;
  height: 92px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 8px 6px;
  overflow: hidden;
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.category-chip:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm); border-color: var(--color-blue); }
.category-chip.is-active {
  border-color: var(--color-blue);
  background: #EAF7FE;
  animation: chipSelectPulse 0.4s ease;
}
/* Categoría sin negocios/clasificados todavía: se ve "apagada" en vez de
   ocultarse — sigue siendo seleccionable (por si en el futuro sí hay
   resultados), solo se deprioriza visualmente. */
.category-chip.is-empty {
  filter: grayscale(1);
  opacity: 0.45;
}
.category-chip.is-empty:hover { opacity: 0.7; }
@keyframes chipSelectPulse {
  0% { transform: scale(1); }
  40% { transform: scale(1.12); box-shadow: var(--shadow-md); }
  100% { transform: scale(1); }
}

.category-chip__icon-wrap { position: relative; flex-shrink: 0; }
.category-chip__icon {
  width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.6rem;
  line-height: 1;
  flex-shrink: 0;
}
.category-chip__badge {
  position: absolute;
  top: -7px;
  right: -9px;
  background: var(--color-magenta);
  color: var(--color-white);
  font-size: 0.6rem;
  font-weight: 700;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  border: 2px solid var(--color-white);
}
/* Color del badge según el tipo de categoría: azul para Negocios, dorado para Clasificados */
.category-chip[data-applies-to="negocio"] .category-chip__badge { background: var(--color-blue); }
.category-chip[data-applies-to="clasificado"] .category-chip__badge { background: var(--color-lime); color: var(--color-navy); }
.category-chip__name {
  font-weight: 600;
  font-size: 0.62rem;
  color: var(--color-navy);
  text-align: center;
  line-height: 1.2;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ============================================================
   SECCIONES DE CONTENIDO (destacados, clasificados, noticias, eventos)
   ============================================================ */
.section { padding: 28px 0; }
.section__head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 16px;
}
.section__head h2 { margin: 0; font-size: 1.35rem; color: var(--color-navy); display: flex; align-items: center; gap: 8px; }
.section__sub-info { display: block; font-size: 0.78rem; color: var(--color-text-soft); margin-top: 2px; }
.section__head a { color: var(--color-blue); font-weight: 600; font-size: 0.9rem; }

.grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
/* ============================================================
   LAYOUT: Negocios (4 columnas) + barra lateral (Eventos, banner, Noticias)
   ============================================================ */
.featured-layout {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 24px;
  align-items: start;
}

.featured-sidebar {
  display: flex; flex-direction: column; gap: 20px; position: sticky; top: 90px;
  
  border-left: 1px solid var(--color-border);
  padding-left: 24px;
}
@media (max-width: 960px) {
  /* En una sola columna (ver `.featured-layout { grid-template-columns: 1fr }`
     más abajo) la línea vertical ya no tiene sentido — el sidebar se cae
     debajo del grid, no al lado. */
  .featured-sidebar { border-left: none; padding-left: 0; }
}
#mainGridMore { display: flex; justify-content: center; margin-top: 22px; }
#mainGridMore .btn { padding: 11px 28px; }
.sidebar-block__title { margin: 0 0 12px; font-size: 0.95rem; color: var(--color-navy); }
.sidebar-block__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.sidebar-block__head .sidebar-block__title { margin-bottom: 12px; }
.sidebar-block__see-all {
  font-size: 0.76rem; font-weight: 700; color: var(--color-blue);
  white-space: nowrap; margin-bottom: 12px;
}
.sidebar-block__see-all:hover { text-decoration: underline; }

.sidebar-item {
  display: flex; gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--color-border);
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition: background 0.15s ease;
}
.sidebar-item:hover { background: var(--color-gray-bg); }
.sidebar-item:last-child { border-bottom: none; }
.sidebar-publish-link {
  display: flex; align-items: center; gap: 6px;
  font-size: 0.76rem; font-weight: 600; color: var(--color-blue);
  padding: 10px 0 2px;
}
.sidebar-publish-link:hover { text-decoration: underline; }
.sidebar-item__img { width: 56px; height: 56px; border-radius: var(--radius-sm); overflow: hidden; flex-shrink: 0; }
.sidebar-item__img img { width: 100%; height: 100%; object-fit: cover; }
.sidebar-item__body h5 { margin: 0 0 3px; font-size: 0.8rem; color: var(--color-navy); line-height: 1.3; }
.sidebar-item__body span { font-size: 0.7rem; color: var(--color-text-soft); display: flex; align-items: center; gap: 4px; }

#sidebarEventsBlock .sidebar-block__title {
  color: var(--color-blue);
  font-weight: 800;
  border-bottom: 2px solid var(--color-lime);
  padding-bottom: 8px;
}
#sidebarEvents .sidebar-item__body h5 {
  color: var(--color-blue);
  font-weight: 700;
  font-size: 0.84rem;
}
.event-modal-title { color: var(--color-blue) !important; }

.sidebar-item--featured {
  background: linear-gradient(135deg, rgba(255, 193, 7, 0.10), rgba(255, 193, 7, 0.02));
  padding: 8px 8px;
  border-radius: var(--radius-md);
  
  border: 2px solid transparent;
  animation: sidebarFeaturedNeon 4s linear infinite;
  box-shadow: 0 0 8px 1px currentColor;
}
@keyframes sidebarFeaturedNeon {
  0%   { border-color: #ff2ec4; color: #ff2ec4; }
  20%  { border-color: #ffc107; color: #ffc107; }
  40%  { border-color: #39ff14; color: #39ff14; }
  60%  { border-color: #18e2ff; color: #18e2ff; }
  80%  { border-color: #a06bff; color: #a06bff; }
  100% { border-color: #ff2ec4; color: #ff2ec4; }
}
.sidebar-item--featured:hover { background: linear-gradient(135deg, rgba(255, 193, 7, 0.16), rgba(255, 193, 7, 0.04)); }
.sidebar-item__featured-tag {
  display: inline-flex !important; width: fit-content;
  align-items: center; gap: 4px;
  background: linear-gradient(135deg, #ffc107, #ff9800);
  color: #4a2e00 !important; font-weight: 700 !important;
  font-size: 0.66rem !important;
  padding: 2px 8px; border-radius: var(--radius-sm);
  margin-bottom: 4px;
  box-shadow: 0 2px 6px rgba(255, 152, 0, 0.35);
}
.sidebar-item__countdown {
  color: var(--color-danger) !important;
  font-weight: 700 !important;
  font-size: 0.72rem !important;
  animation: sidebarCountdownPulse 1.6s ease-in-out infinite;
}
@keyframes sidebarCountdownPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}
.sidebar-block--ad { border-radius: var(--radius-lg); overflow: hidden; }

@media (max-width: 992px) {
  .featured-layout { grid-template-columns: 1fr; }
  .featured-sidebar { position: static; }
}

.biz-card__img { position: relative; height: 125px; }
.biz-card__img img { width: 100%; height: 100%; object-fit: cover; }
.biz-card__body { padding: 12px 14px; }
.biz-card__body h3 { margin: 0 0 4px; font-size: 0.92rem; color: var(--color-navy); }
.biz-card__body p { margin: 0 0 6px; font-size: 0.78rem; color: var(--color-text-soft); }
.biz-card__meta { display: flex; align-items: center; gap: 10px; font-size: 0.74rem; color: var(--color-text-soft); }

.tag-featured {
  position: absolute; top: 10px; left: 10px;
  background: var(--color-magenta);
  color: var(--color-white);
  font-size: 0.68rem;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: var(--radius-sm);
}

.sold-ribbon {
  position: absolute; top: 14px; right: -38px;
  width: 150px;
  transform: rotate(45deg);
  background: var(--color-danger);
  color: var(--color-white);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-align: center;
  padding: 4px 0;
  box-shadow: 0 2px 6px rgba(0,0,0,0.25);
  z-index: 3;
  text-transform: uppercase;
}
/* La tarjeta necesita overflow:hidden para que la banda no se salga del
   cuadro por la esquina — .biz-card__img ya recorta la imagen, así que
   normalmente ya lo tiene; se refuerza aquí por si acaso. */
.card--sold .biz-card__img { overflow: hidden; position: relative; }

.classified-card__price {
  font-size: 1.05rem; font-weight: 800; color: var(--color-blue);
}

/* ============================================================
   TARJETAS CLICABLES (abren modal en vez de navegar)
   ============================================================ */
.card[role="button"] { cursor: pointer; }

/* ============================================================
   MODALES — página de negocio / modal de clasificado
   ============================================================ */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(14, 29, 61, 0.6);
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding: 40px 20px;
  overflow-y: auto;
  z-index: 2000;
}
.modal-overlay.is-open { display: flex; }

.modal-box {
  background: var(--color-white);
  border-radius: var(--radius-lg);
  width: 100%;
  max-width: 720px;
  box-shadow: var(--shadow-lg);
  position: relative;
  overflow: hidden;
  animation: modalIn 0.25s ease;
}
.modal-box--simple { max-width: 480px; }

@keyframes modalIn {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}

.modal-close-wrap {
  position: sticky;
  top: 0;
  height: 0;
  overflow: visible;
  z-index: 6;
}
.modal-close {
  position: absolute;
  top: 14px; right: 14px;
  width: 36px; height: 36px;
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,0.9);
  border: none;
  color: var(--color-navy);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem;
  z-index: 5;
}
.modal-close:hover { background: var(--color-white); }

.modal-body { padding: 24px; }

.modal-body h2 { margin: 0 0 4px; color: var(--color-navy); font-size: 1.4rem; }
.modal-body .modal-tagline { color: var(--color-text-soft); margin: 0 0 4px; font-size: 0.92rem; }
.modal-member-since { font-size: 0.78rem; color: var(--color-text-soft); margin: 0 0 14px; display: flex; align-items: center; gap: 6px; }

.modal-rating-summary { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; }
.modal-rating-summary .stars-display { font-size: 1rem; display: inline-flex; gap: 2px; }
.modal-rating-summary span { font-size: 0.85rem; color: var(--color-text-soft); }

.modal-info-list { list-style: none; padding: 0; margin: 0 0 18px; display: grid; gap: 8px; }
.modal-info-list li { display: flex; align-items: center; gap: 10px; font-size: 0.88rem; color: var(--color-text); }
.modal-info-list i { color: var(--color-blue); width: 18px; }

.modal-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 22px; }

.modal-section-title { font-size: 1rem; color: var(--color-navy); margin: 20px 0 12px; padding-top: 16px; border-top: 1px solid var(--color-border); }

.pagination-controls { display: flex; justify-content: center; align-items: center; gap: 6px; margin: 24px 0 8px; flex-wrap: wrap; }
.pagination-controls__btn {
  min-width: 34px; height: 34px; padding: 0 8px;
  border: 1px solid var(--color-border); border-radius: var(--radius-sm);
  background: var(--color-white); color: var(--color-text);
  font-weight: 600; font-size: 0.85rem; cursor: pointer;
  transition: background var(--transition), color var(--transition), border-color var(--transition);
}
.pagination-controls__btn:hover:not(:disabled) { background: var(--color-gray-bg); }
.pagination-controls__btn.is-active { background: var(--color-blue); border-color: var(--color-blue); color: var(--color-white); }
.pagination-controls__btn:disabled { opacity: 0.4; cursor: default; }

.review-item { padding: 10px 0; border-bottom: 1px solid var(--color-border); }
.review-item:last-child { border-bottom: none; }
.review-item__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 3px; }
.review-item__author { display: flex; align-items: center; gap: 8px; }
.review-item__name { font-weight: 600; font-size: 0.86rem; color: var(--color-navy); }

.user-avatar {
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--radius-sm);
  background: var(--color-blue);
  color: var(--color-white);
  font-weight: 700;
  flex-shrink: 0;
}

.user-avatar--photo { object-fit: cover; border-radius: var(--radius-sm); }
.review-item__date { font-size: 0.72rem; color: var(--color-text-soft); }
.review-item__edited { font-style: italic; }
.review-item__stars { font-size: 0.8rem; margin-bottom: 3px; display: inline-flex; gap: 1px; }
.review-item__comment { font-size: 0.85rem; color: var(--color-text); margin: 0 0 4px; line-height: 1.4; }
.no-reviews { color: var(--color-text-soft); font-size: 0.88rem; }

/* Acciones bajo cada reseña: responder / ver respuesta (colapsada, estilo Facebook) */
.review-item__actions { display: flex; align-items: center; gap: 14px; margin-top: 2px; }
.review-reply-toggle, .review-reply-btn {
  background: none; border: none; padding: 0; cursor: pointer;
  font-size: 0.76rem; font-weight: 700; color: var(--color-blue);
  display: inline-flex; align-items: center; gap: 5px;
}
.review-reply-toggle:hover, .review-reply-btn:hover { text-decoration: underline; }

.review-reply {
  margin-top: 8px;
  margin-left: 18px;
  padding: 8px 12px;
  background: var(--color-gray-bg);
  border-left: 3px solid var(--color-blue);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.review-reply__head { font-size: 0.76rem; color: var(--color-navy); margin-bottom: 2px; display: flex; gap: 8px; align-items: baseline; }
.review-reply__head span { font-weight: 400; color: var(--color-text-soft); font-size: 0.7rem; }
.review-reply p { margin: 0; font-size: 0.82rem; color: var(--color-text); line-height: 1.35; }

.review-reply-form { margin-top: 8px; margin-left: 18px; }
.review-reply-form textarea {
  width: 100%; border: 1px solid var(--color-border); border-radius: var(--radius-sm);
  padding: 8px 10px; font-family: inherit; font-size: 0.82rem; resize: vertical;
}
.review-reply-form__actions { display: flex; gap: 8px; margin-top: 6px; }
.review-reply-save, .review-reply-cancel {
  font-size: 0.78rem; padding: 6px 12px; border-radius: var(--radius-sm);
}
.review-reply-cancel { background: none; border: 1px solid var(--color-border); color: var(--color-text-soft); cursor: pointer; }

.review-editing-note {
  font-size: 0.78rem; color: var(--color-text-soft); margin: -6px 0 10px;
  display: flex; align-items: center; gap: 6px;
}

.review-form { margin-top: 16px; background: var(--color-gray-bg); border-radius: var(--radius-md); padding: 16px; }
.review-form label { display: block; font-size: 0.82rem; font-weight: 600; color: var(--color-navy); margin-bottom: 6px; }
.review-form input[type="text"],
.review-form textarea {
  width: 100%;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 9px 12px;
  font-family: inherit;
  font-size: 0.88rem;
  margin-bottom: 12px;
  resize: vertical;
}
.star-rating-input { display: flex; gap: 6px; margin-bottom: 14px; font-size: 1.3rem; }

.star-rating-input__star { background: none; border: none; padding: 2px; cursor: pointer; border-radius: 4px; line-height: 1; }
.star-rating-input__star:focus-visible { outline: 2px solid var(--color-blue); outline-offset: 2px; }
.star-rating-input i { color: transparent; -webkit-text-stroke: 1.5px var(--color-star-outline); cursor: pointer; transition: color var(--transition); }
.star-rating-input i.is-filled { color: var(--color-star-fill); -webkit-text-stroke: 1px var(--color-star-outline); }

.classified-modal-price { font-size: 1.4rem; font-weight: 800; color: var(--color-blue); margin: 0 0 12px; }

/* Tag de precio en el modal de evento: gratis (verde) o de paga (azul) */
.event-price-tag {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 0.85rem; font-weight: 700;
  color: var(--color-blue);
  background: rgba(0, 178, 202, 0.1);
  padding: 6px 12px;
  border-radius: var(--radius-md);
  margin: 0 0 12px;
}
.event-price-tag--free { color: #1f7a4d; background: rgba(31, 122, 77, 0.1); }

/* Tag de categoría (EVENT_CATEGORIES) en el modal de evento */
.event-category-tag {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 0.78rem; font-weight: 700;
  color: var(--color-navy);
  background: var(--color-gray-bg);
  padding: 4px 10px;
  border-radius: var(--radius-md);
  margin: 0 0 10px;
}
.classified-modal-price .old-price {
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--color-text-soft);
  text-decoration: line-through;
  margin-left: 8px;
}

/* ============================================================
   MODAL DE DETALLE DE PRODUCTO — distribución pedida por el usuario:
   galería, badges (categoría + estado), nombre, marca, precio, y luego
   bloques separados por líneas divisorias (datos en 2 columnas,
   color/tallas, descripción, botón de WhatsApp). Cada bloque solo se
   pinta si tiene contenido — ver openProductModal() en main.js.
   ============================================================ */
.product-modal__badges { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.product-modal__cat-badge {
  display: inline-flex; align-items: center; gap: 5px;
  background: var(--color-gray-bg); color: var(--color-navy);
  font-size: 0.7rem; font-weight: 700; padding: 3px 10px; border-radius: var(--radius-sm);
}
.product-modal__stock-badge {
  font-size: 0.7rem; font-weight: 700; padding: 3px 10px; border-radius: var(--radius-sm);
  color: var(--color-white);
}
.product-modal__stock-badge.is-disponible { background: #2e9e5b; }
.product-modal__stock-badge.is-agotado { background: var(--color-danger); }
.product-modal__stock-badge.is-proximamente { background: #8a6d3b; }
.product-modal__stock-badge.is-sobre-pedido { background: var(--color-blue); }
.product-modal__name { margin: 0 0 2px; }
.product-modal__brand {
  font-size: 0.85rem; color: var(--color-text-soft); font-weight: 600;
  margin: 0 0 10px;
}
.product-modal__discount {
  display: inline-block; margin-left: 8px;
  background: var(--color-danger); color: var(--color-white);
  font-size: 0.75rem; font-weight: 800; padding: 2px 8px; border-radius: var(--radius-sm);
  vertical-align: middle;
}
.product-modal__divider {
  border: none; height: 1px; background: var(--color-border);
  margin: 16px 0;
}
/* Datos en 2 columnas, texto pequeño, con la etiqueta y el contenido en
   tonos distintos (tal cual lo pidió el usuario). */
.product-modal__specs {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px 18px;
}
.product-modal__spec { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.product-modal__spec-label {
  font-size: 0.68rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.03em; color: var(--color-text-soft);
}
.product-modal__spec-value {
  font-size: 0.82rem; color: var(--color-navy);
  overflow-wrap: anywhere;
}
.product-modal__variants { display: flex; flex-direction: column; gap: 12px; }
.product-modal__variant-group { display: flex; flex-direction: column; gap: 5px; }
/* Bug real corregido (nunca se le puso CSS a esto al agregarlo — se veía
   con el estilo por default del navegador, grande y en negro, en vez de
   la etiqueta chica e informativa que se pidió). Mismo tamaño que
   .product-modal__spec-value (los datos de Tipo/Contenido/etc.) y en tono
   tenue — es solo informativo, no debe competir con el nombre del
   producto que viene justo debajo. La barra "|" lleva el azul de marca,
   un color aparte del texto, tal como se pidió. */
.product-modal__business-tag {
  font-size: 0.82rem;
  color: var(--color-text-soft);
  margin: 0 0 6px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.product-modal__business-bar {
  color: var(--color-blue);
  font-weight: 700;
}
.product-modal__description { font-size: 0.9rem; line-height: 1.6; }
.product-modal__note {
  display: flex; align-items: flex-start; gap: 7px;
  font-size: 0.78rem; color: var(--color-text-soft); font-style: italic;
  background: var(--color-gray-bg); border-radius: var(--radius-sm);
  padding: 8px 10px; margin: 14px 0 0;
}
.product-modal__note i { color: var(--color-blue); margin-top: 2px; }
/* Pedido explícito: sistema de promociones — banner del código dentro del
   modal de producto, con acento magenta a juego con el badge de la
   tarjeta. El botón "Copiar" reusa copiarAlPortapapeles() (el mismo
   respaldo robusto que ya tienen los botones de compartir). */
.product-modal__promo-banner {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  background: rgba(185, 0, 91, 0.06);
  border: 1px solid rgba(185, 0, 91, 0.25);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  margin: 10px 0 0;
  font-size: 0.82rem;
  color: var(--color-navy);
}
.product-modal__promo-banner i { color: var(--color-magenta); font-size: 1rem; }
.product-modal__promo-banner span { flex: 1; min-width: 0; }
.product-modal__promo-banner .btn { flex-shrink: 0; padding: 6px 12px; font-size: 0.78rem; }
/* Corrección a pedido explícito: el usuario aclaró que el pedido de "2
   columnas en responsivo" era para cuando estos datos se MUESTRAN (aquí,
   en la tarjeta/modal de detalle del producto) — lo había aplicado al
   revés, en el formulario de captura (ver .publish-form-row--product-meta
   más abajo, ya revertido a 1 columna). Aquí se mantienen las 2 columnas
   en cualquier ancho de pantalla; overflow-wrap: anywhere (ya puesto en
   .product-modal__spec-value) se encarga de que un valor largo se parta
   en vez de desbordar la celda.

/* ============================================================
   TARJETA DE NEGOCIO — según ejemplo de referencia del usuario
   (negocio-card.zip): imagen con margen interno, panel de info blanco
   anclado abajo que crece al hover para revelar descripción/ubicación,
   con efecto de inclinación 3D + brillo que sigue al mouse.
   ============================================================ */
.biz-card-premium {
  position: relative;
  height: 280px;
  cursor: pointer;
  border-radius: 22px;
  background: var(--color-white);
  box-shadow: 0 8px 24px rgba(21, 42, 86, 0.10);
  overflow: visible;
  transform-style: preserve-3d;
  will-change: transform;
  transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}

.biz-card-premium__glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  z-index: 2;
  border-radius: 22px;
  transition: opacity 0.3s ease;
  background: radial-gradient(circle at var(--glow-x, 50%) var(--glow-y, 50%), rgba(0, 152, 218, 0.25), transparent 55%);
}
.biz-card-premium:hover .biz-card-premium__glow { opacity: 1; }

/* Efecto "lighting" — a pedido explícito, con referencia visual exacta
   adjunta: un borde animado con textura líquida/turbulenta (el filtro SVG
   #turbulent-displace en index.html) más un resplandor de fondo detrás de
   la tarjeta. Se aplica SOLO a la tarjeta del negocio marcado como
   "destacado" desde el panel de administrador (siempre uno solo a la vez
   — ver negocios.destacado, api/negocios.php acción admin=destacar). Las
   tarjetas normales no llevan nada de esto, tal como estaban antes. */
.biz-card-premium--destacado { overflow: visible; }
/* Corrección a pedido explícito: la primera versión de este efecto usaba
   los colores morado/naranja de la referencia visual tal cual — pero esos
   no son parte de la paleta del sitio (ver :root al inicio del archivo:
   --color-blue #0098DA, --color-lime #C0E218, --color-magenta #B9005B).
   Se cambia al degradado azul→lima, el mismo que ya se usa en el logo
   (ver más arriba, "background: linear-gradient(135deg, var(--color-blue),
   var(--color-lime))") — así el efecto se siente parte del sitio en vez
   de una pieza aparte pegada encima. También se quitó la etiqueta de
   texto "★ Destacado" (bcp-destacado-tag) — a pedido explícito, el efecto
   del borde ya es suficiente aviso visual, sin necesidad de una etiqueta. */
.bcp-destacado-glow {
  position: absolute;
  inset: -16px;
  z-index: -1;
  border-radius: 32px;
  pointer-events: none;
  filter: blur(26px);
  opacity: 0.55;
  background: linear-gradient(-30deg, var(--color-blue), transparent, var(--color-lime));
  animation: bcpDestacadoPulse 4s ease-in-out infinite;
}
.bcp-destacado-border {
  position: absolute;
  inset: -3px;
  z-index: 1;
  border-radius: 26px;
  pointer-events: none;
  padding: 3px;
  background: linear-gradient(-30deg, var(--color-blue) 0%, transparent 35%, transparent 65%, var(--color-lime) 100%);
  filter: url(#turbulent-displace);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: bcpDestacadoRotate 5s linear infinite;
}
@keyframes bcpDestacadoPulse {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 0.75; }
}
@keyframes bcpDestacadoRotate {
  0% { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}
/* Quien tenga el navegador sin soporte para mask-composite/filter SVG en
   elementos HTML (Safari viejo, algunos WebView) al menos se queda con un
   halo de color sólido en vez de nada — se degrada con gracia. */
@supports not (mask-composite: exclude) {
  .bcp-destacado-border { background: transparent; border: 2px solid oklch(0.63 0.16 280); filter: none; -webkit-mask: none; }
}

.biz-card-premium__media {
  position: absolute;
  inset: 8px 8px 78px;
  border-radius: 16px;
  overflow: hidden;
  background: var(--color-gray-bg);
}
.biz-card-premium__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.biz-card-premium:hover .biz-card-premium__media img { transform: scale(1.06); }

.biz-card-premium__badge {
  position: absolute;
  
  top: 20px; left: 10px;
  z-index: 6;
  background: linear-gradient(135deg, #ff7a1a, var(--color-magenta));
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  font-size: 0.62rem;
  font-weight: 700;
  color: var(--color-white);
  display: flex; align-items: center; gap: 4px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
  max-width: calc(100% - 40px);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* Corazón/compartir flotan sobre la imagen, justo encima de la costura con el panel info.
   Suben junto con el panel de info cuando éste crece al hover (68px -> 138px, +70px),
   para no quedar tapados debajo de él y seguir siendo clickeables. */
.biz-card-premium__actions {
  position: absolute;
  top: -14px; right: 14px;
  z-index: 4;
  display: flex;
  gap: 8px;
}
.bcp-action {
  width: 34px; height: 34px;
  border-radius: var(--radius-sm);
  background: var(--color-white);
  border: 1.5px solid rgba(0, 22, 44, 0.08);
  display: flex; align-items: center; justify-content: center;
  color: var(--color-navy);
  box-shadow: 0 2px 10px rgba(21, 42, 86, 0.28);
  font-size: 0.8rem;
  transition: background 0.2s ease, color 0.2s ease;
  /* position:relative — ancla .fav-particles (ver más abajo) al propio
     botón, para que la explosión de partículas del efecto "pop" salga
     centrada en él y no se recorte (overflow:visible). */
  position: relative;
  overflow: visible;
}

.bcp-action:hover { background: var(--color-blue); color: var(--color-white); }
.bcp-action.is-fav-active { color: var(--color-magenta); }

.fav-icon-pop {
  /* Escala a ~1.35 y de regreso a 1 con una curva tipo resorte (spring/
     ease elástico, no lineal) — mismo cubic-bezier que ya usa el dot
     activo de la paginación de galería, para mantener el mismo "lenguaje"
     de rebote en todo el sitio. */
  animation: favIconPop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes favIconPop {
  0% { transform: scale(1); }
  50% { transform: scale(1.35); }
  100% { transform: scale(1); }
}
.fav-particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.fav-particle {
  position: absolute;
  top: 50%; left: 50%;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--color-magenta);
  transform: translate(-50%, -50%);
  /* Explosión de ~8 partículas hacia afuera en círculo parejo — cada una a
     un ángulo distinto (360°/8), calculado en JS y pasado como --tx/--ty
     (ver triggerFavPopEffect en main.js). Se trasladan hacia afuera y se
     encogen a scale(0) en ~0.6s, luego se quitan del DOM. */
  animation: favParticleBurst 0.6s ease-out forwards;
}
@keyframes favParticleBurst {
  to {
    transform: translate(-50%, -50%) translate(var(--tx), var(--ty)) scale(0);
    opacity: 0;
  }
}

/* Panel de información: anclado abajo, siempre blanco y visible; crece hacia
   arriba al hacer hover para revelar la descripción y ubicación (sin cambiar
   el tamaño de la tarjeta ni empujar al resto del grid, ya que es absoluto) */
.biz-card-premium__info {
  position: absolute;
  left: 8px; right: 8px; bottom: 8px;
  z-index: 3;
  background: var(--color-white);
  border-radius: 18px;
  padding: 14px 16px;
  height: 68px;
  overflow: hidden;
  box-shadow: 0 8px 20px rgba(21, 42, 86, 0.12);
  transition: height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.biz-card-premium:hover .biz-card-premium__info { height: 138px; }

.biz-card-premium__info h3 {
  margin: 0 0 4px;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--color-navy);
  line-height: 1.25;
  display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden;
}

.biz-card-premium__stats {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.7rem;
  color: var(--color-text-soft);
  flex-wrap: wrap;
}
.biz-card-premium__stats .rating { color: var(--color-text-soft); font-weight: 700; display: flex; align-items: center; gap: 3px; }
.biz-card-premium__stats .rating i { color: var(--color-star-fill); -webkit-text-stroke: 0.5px var(--color-star-outline); }
.bcp-divider { width: 1px; height: 10px; background: var(--color-border); }

.biz-card-premium__hover-extra {
  margin-top: 10px;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.35s ease, transform 0.35s ease;
}
.biz-card-premium:hover .biz-card-premium__hover-extra { opacity: 1; transform: none; }
.biz-card-premium__desc {
  margin: 0 0 4px;
  font-size: 0.72rem;
  color: var(--color-text-soft);
  line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.biz-card-premium__loc {
  margin: 0;
  font-size: 0.7rem;
  color: var(--color-text-soft);
  display: flex; align-items: center; gap: 4px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.biz-card-premium__loc i { color: var(--color-magenta); font-size: 0.7rem; flex-shrink: 0; }

@media (max-width: 720px) {
  .biz-card-premium { height: 250px; }
  .biz-card-premium__media { inset: 8px 8px 70px; }
  /* En móvil no hay hover real: se deja el panel ya expandido y visible,
     en vez de depender de un tap sostenido */
  .biz-card-premium__info { height: auto; }
  .biz-card-premium__hover-extra { opacity: 1; transform: none; }
  .ad-card-premium { height: 250px; }
}

/* ============================================================
   PÁGINA COMPLETA DE NEGOCIO (alternativa al modal, vía #negocio/slug)
   ============================================================ */
.business-page { background: var(--color-gray-bg); min-height: 70vh; }
.business-page[hidden] { display: none; }

.business-page__topbar {
  position: sticky;
  
  top: var(--nav-height-live, var(--nav-height));
  z-index: 900;
  background: var(--color-white);
  border-bottom: 1px solid var(--color-border);
}
.nav.is-scrolled ~ #businessPageView .business-page__topbar,
.nav.is-scrolled ~ #eventsPageView .business-page__topbar { top: var(--nav-height-live, var(--nav-height-scrolled)); }
.business-page__topbar-inner {
  display: flex; align-items: center; gap: 14px;
  max-width: 1180px; margin: 0 auto;
  padding: 12px 20px;
}
.business-page__back {
  display: flex; align-items: center; gap: 8px;
  background: none; border: none; cursor: pointer;
  font-weight: 700; font-size: 0.88rem; color: var(--color-navy);
  padding: 8px 12px; border-radius: var(--radius-sm);
  transition: background 0.2s ease;
  flex-shrink: 0;
}
.business-page__back:hover { background: var(--color-gray-bg); }

/* Crumb en dos líneas: categoría(s) del negocio arriba, subcategorías
   abajo en texto más chico. Ya no incluye la etiqueta "Negocios". */
.business-page__crumb {
  position: relative;
  padding-left: 14px; border-left: 1px solid var(--color-border);
  min-width: 0;
}
.business-page__crumb-cats {
  font-size: 0.8rem; color: var(--color-navy); font-weight: 700;
  display: flex; flex-wrap: wrap; align-items: center; gap: 2px;
}
.business-page__crumb-sep { opacity: 0.4; margin: 0 6px; }

.business-page__crumb-subcats {
  position: absolute;
  top: 100%; left: 14px;
  margin-top: 4px;
  max-width: min(70vw, 520px);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  pointer-events: none;
  font-size: 0.7rem; font-weight: 500; color: var(--color-text-soft);
  background: var(--color-white);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
}

.business-page__layout {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 24px;
  align-items: start;
  max-width: 1180px;
  margin: 24px auto 60px;
  padding: 0 20px;
}

.business-page__content {
  background: var(--color-white);
  border-radius: var(--radius-sm);
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(21, 42, 86, 0.08);
}

.business-page__sidebar {
  display: flex; flex-direction: column; gap: 20px;
  position: sticky;
  top: calc(var(--nav-height-scrolled) + 66px);
}
.business-page__sidebar .sidebar-block--ad { border-radius: var(--radius-lg); overflow: hidden; }

/* Negocios similares: mini-tarjeta reutilizando el patrón .sidebar-item */
.sidebar-similar-item {
  display: flex; gap: 10px; align-items: center;
  padding: 8px 0; border-bottom: 1px solid var(--color-border);
  cursor: pointer;
}
.sidebar-similar-item:last-child { border-bottom: none; }
.sidebar-similar-item__img { width: 52px; height: 52px; border-radius: var(--radius-sm); overflow: hidden; flex-shrink: 0; }
.sidebar-similar-item__img img { width: 100%; height: 100%; object-fit: cover; }
.sidebar-similar-item__body h5 { margin: 0 0 3px; font-size: 0.8rem; color: var(--color-navy); line-height: 1.3; }
.sidebar-similar-item__body span { font-size: 0.72rem; color: var(--color-text-soft); display: flex; align-items: center; gap: 4px; }

/* Clasificados relacionados: mini-tarjeta compacta con precio */
.sidebar-classified-item {
  display: flex; gap: 10px; align-items: center;
  padding: 8px 0; border-bottom: 1px solid var(--color-border);
  cursor: pointer;
}
.sidebar-classified-item:last-child { border-bottom: none; }
.sidebar-classified-item__img { width: 52px; height: 52px; border-radius: var(--radius-sm); overflow: hidden; flex-shrink: 0; background: var(--color-gray-bg); }
.sidebar-classified-item__img img { width: 100%; height: 100%; object-fit: cover; }
.sidebar-classified-item__body h5 { margin: 0 0 3px; font-size: 0.8rem; color: var(--color-navy); line-height: 1.3; }
.sidebar-classified-item__body span { font-size: 0.74rem; color: var(--color-magenta); font-weight: 700; }
.sidebar-empty-note { font-size: 0.78rem; color: var(--color-text-soft); }

@media (max-width: 992px) {
  .business-page__layout { grid-template-columns: 1fr; }
  .business-page__sidebar { position: static; }
}

.content-page__layout {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 24px;
  max-width: 1180px;
  margin: 24px auto 60px;
  padding: 0 20px;
  align-items: start;
}
.content-page__sidebar { position: sticky; top: calc(var(--nav-height-live, var(--nav-height-scrolled)) + 20px); }
@media (max-width: 992px) {
  .content-page__layout { grid-template-columns: 1fr; }
  .content-page__sidebar { position: static; }
}
.events-page__title { font-size: 1.3rem; color: var(--color-navy); margin: 0 0 18px; }
.events-page__grid {
  display: grid;
  
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 14px;
}
.events-page__card {
  background: var(--color-white); border-radius: var(--radius-lg);
  overflow: hidden; cursor: pointer; box-shadow: 0 4px 14px rgba(21, 42, 86, 0.08);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.events-page__card:hover { transform: translateY(-3px); box-shadow: 0 10px 22px rgba(21, 42, 86, 0.14); }
.events-page__card-img { height: 110px; }
.events-page__card-img img { width: 100%; height: 100%; object-fit: cover; }
.events-page__card-body { padding: 10px 12px 12px; }
.events-page__card-body h3 { margin: 0 0 6px; font-size: 0.85rem; color: var(--color-navy); line-height: 1.25; }
.events-page__card-body span { font-size: 0.72rem; color: var(--color-text-soft); display: flex; align-items: center; gap: 5px; margin-top: 3px; }
.events-page__empty { color: var(--color-text-soft); font-size: 0.9rem; padding: 30px 0; text-align: center; }

.news-page__list { display: flex; flex-direction: column; gap: 4px; }
.news-page__row {
  display: flex; gap: 14px; align-items: flex-start;
  padding: 14px 4px; cursor: pointer;
  border-bottom: 1px solid var(--color-border);
}
.news-page__row:hover .news-page__row-body h3 { color: var(--color-blue); }
.news-page__row-img { width: 96px; height: 72px; flex-shrink: 0; border-radius: var(--radius-sm); overflow: hidden; }
.news-page__row-img img { width: 100%; height: 100%; object-fit: cover; }
.news-page__row-body { min-width: 0; }
.news-page__row-body h3 { margin: 0 0 4px; font-size: 0.95rem; color: var(--color-navy); transition: color 0.15s ease; }
.news-page__row-body span { font-size: 0.74rem; color: var(--color-text-soft); display: flex; align-items: center; gap: 5px; }
.news-page__row-body p { margin: 6px 0 0; font-size: 0.82rem; color: var(--color-text-soft); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

@media (max-width: 720px) {
  .business-page__content { border-radius: 0; box-shadow: none; }
  .business-page__layout { padding: 0; margin-bottom: 40px; }
  .business-page__topbar-inner { padding: 10px 16px; }
}

/* ============================================================
   PÁGINA/CONTENIDO DE NEGOCIO — galería + logo montado + info de contacto + mapa
   ============================================================ */

/* ============================================================
   HEADER DE NEGOCIO — imagen a la izquierda (con sucursales debajo),
   datos en medio (nombre, descripción, estrellas, vistas, reseñas,
   ubicación, teléfono(s), cuadro de descripción larga), y columna
   vertical de acciones (favorito, redes, compartir) pegada al margen
   derecho.
   ============================================================ */
.biz-header {
  display: grid;
  grid-template-columns: 255px 1fr auto;
  gap: 20px;
  padding: 24px 24px 0;
  align-items: start;
}

.biz-header__media { min-width: 0; }

.biz-header__image {
  border-radius: var(--radius-lg);
  overflow: hidden;
  width: 100%;
  height: 240px;
  box-shadow: var(--shadow-sm);
}
.biz-header__image img { width: 100%; height: 100%; object-fit: cover; }

.biz-header__info { min-width: 0; }
.biz-header__top-row {
  display: flex; align-items: flex-start; gap: 10px;
}
/* El nombre NUNCA debe usar dos líneas (punto 11): con la imagen más
   angosta y las acciones movidas a una columna vertical aparte ya sobra
   espacio horizontal, pero además se fuerza con nowrap + elipsis por si
   algún nombre es excepcionalmente largo — mejor cortarlo con "…" que
   partirlo en dos renglones y descuadrar todo lo de abajo. */
.biz-header__top-row h2 {
  margin: 0; flex: 1 1 auto; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.biz-views-count {
  display: inline-flex; align-items: center; gap: 4px;
  color: var(--color-text-soft);
}
.biz-views-count i { color: #f4a300; font-size: 0.95rem; } 

.biz-header__location {
  display: flex; align-items: flex-start; gap: 8px;
  font-size: 0.9rem; margin: 4px 0 10px;
}
.biz-header__location i { color: var(--color-magenta); margin-top: 3px; }
.biz-header__location strong { color: var(--color-navy); font-weight: 600; line-height: 1.35; }

.biz-phones { margin-bottom: 4px; }
.biz-phones .biz-info-row { margin-bottom: 6px; }

.biz-header__side-actions {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding-top: 2px;
}
.biz-header__side-actions .modal-fav-btn,
.biz-header__side-actions .gallery-share-btn,
.biz-social-row--vertical a {
  width: 34px; height: 34px; font-size: 0.9rem;
  border-radius: var(--radius-sm);
  flex-shrink: 0;
}
.biz-social-row--vertical {
  display: flex; flex-direction: column; align-items: center; gap: 8px; margin: 0;
}

a.biz-delivery-note {
  cursor: pointer;
  text-decoration: none;
  transition: filter 0.2s ease;
}
a.biz-delivery-note:hover { filter: brightness(1.08); }
.biz-delivery-note__wa { margin-left: auto; font-size: 1.05rem; }

/* Fila de WhatsApp + aviso de entrega: mismo renglón, misma altura — ya no
   hay dos llamados a WhatsApp (el botón y el aviso enlazado), solo el botón
   de WhatsApp; el aviso de entrega es texto informativo puro, sin fondo ni
   forma de botón, en un color vivo para que igual llame la atención. */
.biz-header__cta-row {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  margin: 10px 0;
}
.biz-delivery-note {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 0.92rem; font-weight: 700;
  color: var(--color-magenta); /* texto brillante, sin botón */
}
.biz-delivery-note i { font-size: 1.05rem; }

.biz-delivery-zones { margin-top: 8px; font-size: 0.85rem; color: var(--color-text-soft); }
.biz-delivery-zones__title { margin: 0 0 4px; font-weight: 700; color: var(--color-text); }
.biz-delivery-zones__title i { color: var(--color-magenta); margin-right: 6px; }
.biz-delivery-zones__list { margin: 0; padding-left: 22px; list-style: disc; }
.biz-delivery-zones__list li { margin-bottom: 2px; }

.biz-header__media .biz-branches {
  margin-top: 14px;
  padding-top: 0;
  border-top: none;
}
.biz-branches h4 {
  font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--color-text-soft); margin: 0 0 10px; font-weight: 700;
}
.biz-branch-item {
  background: var(--color-gray-bg);
  border-radius: var(--radius-sm);
  margin-bottom: 8px;
  overflow: hidden;
}
.biz-branch-item__toggle {
  width: 100%;
  display: flex; align-items: center; gap: 8px;
  background: none; border: none; cursor: pointer;
  padding: 10px 12px;
  font-weight: 700; color: var(--color-navy); font-size: 0.88rem;
  text-align: left;
}
.biz-branch-item__chevron { margin-left: auto; font-size: 0.75rem; transition: transform 0.2s ease; }
.biz-branch-item.is-open .biz-branch-item__chevron { transform: rotate(180deg); }
/* max-height con transición: técnica simple para animar un alto que no se
   conoce de antemano (dirección + teléfono varían en longitud) — el valor
   alto (200px) es solo un tope, no el alto real del contenido. */
.biz-branch-item__panel {
  max-height: 0; overflow: hidden;
  transition: max-height 0.25s ease, padding 0.25s ease;
  padding: 0 12px;
}
.biz-branch-item.is-open .biz-branch-item__panel {
  max-height: 200px;
  padding: 0 12px 12px;
}
.biz-branch-item__addr { font-size: 0.8rem; color: var(--color-text-soft); margin-top: 2px; }
.biz-branch-item__phone { font-size: 0.8rem; color: var(--color-text-soft); margin-top: 2px; }

/* Cuadro de descripción larga: ya NO está dentro de la columna de info —
   ahora es un renglón propio que abarca las 3 columnas del header (imagen +
   info + acciones), llegando hasta el margen derecho real de la tarjeta.
   Sin fondo gris (ya no está "sombreada"): solo una línea arriba que marca
   el límite con lo de arriba. */
.biz-description-box {
  grid-column: 1 / -1;
  margin-top: 6px;
  padding-top: 16px;
  border-top: 1px solid var(--color-border);
  color: var(--color-text);
  line-height: 1.6;
  font-size: 0.92rem;
  text-align: justify;
}
.biz-description-box > *:first-child { text-indent: 2em; }

.biz-description-box > *:first-child::first-letter {
  float: left;
  font-size: 3.2em;
  line-height: 0.85;
  font-weight: 700;
  color: var(--color-blue);
  padding: 4px 8px 0 0;
}

@media (max-width: 720px) {
  .biz-header { grid-template-columns: 1fr; padding: 16px 16px 0; }
  .biz-header__image { height: 220px; }
  .biz-header__side-actions {
    flex-direction: row; justify-content: flex-end; align-items: center;
    padding-top: 0; order: -1; /* arriba de todo, junto al nombre le sigue debajo */
  }
  .biz-social-row--vertical { flex-direction: row; }
  .biz-description-box { grid-column: 1; }
}

/* ============================================================
   HORARIO (izquierda) + MAPA (derecha), con todas las sucursales
   marcadas en el mapa cuando el negocio tiene más de una ubicación
   ============================================================ */
.biz-hours-map-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin: 24px 24px 20px;
  align-items: start;
}

.biz-hours-map-grid--no-map { grid-template-columns: 1fr; max-width: 480px; }
@media (max-width: 720px) {
  .biz-hours-map-grid { grid-template-columns: 1fr; margin: 20px 16px; }
}

.biz-gallery {
  height: 300px;
  position: relative;
  overflow: visible;
  margin-top: 8px;
  padding-top: 16px;
  border-top: 1px solid var(--color-border);
  
  display: flex;
  flex-direction: column;
}

.gallery-masonry {
  
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  display: grid;
  grid-auto-flow: dense;
  grid-template-columns: repeat(6, 1fr);
  
  grid-auto-rows: 34px;
  gap: 5px;
  overflow: hidden;
  padding: 2px;
}
.gallery-masonry__item {
  display: block;
  width: 100%;
  height: 100%;
  border: none;
  padding: 0;
  border-radius: var(--radius-sm);
  overflow: hidden;
  cursor: zoom-in;
  position: relative;
  background: none;
  grid-column: span 2;
  grid-row: span 2;
}
.gallery-masonry__item img { width: 100%; height: 100%; display: block; object-fit: cover; }

.gallery-masonry__item:nth-child(10n+1) { grid-column: span 4; grid-row: span 2; } /* horizontal ancho */
.gallery-masonry__item:nth-child(10n+2) { grid-column: span 2; grid-row: span 2; } /* cuadrado */
.gallery-masonry__item:nth-child(10n+3) { grid-column: span 2; grid-row: span 4; } /* vertical alto */
.gallery-masonry__item:nth-child(10n+4) { grid-column: span 2; grid-row: span 2; } /* cuadrado */
.gallery-masonry__item:nth-child(10n+5) { grid-column: span 2; grid-row: span 2; } /* cuadrado */
.gallery-masonry__item:nth-child(10n+6) { grid-column: span 2; grid-row: span 4; } /* vertical alto */
.gallery-masonry__item:nth-child(10n+7) { grid-column: span 4; grid-row: span 2; } /* horizontal ancho */
.gallery-masonry__item:nth-child(10n+8) { grid-column: span 2; grid-row: span 2; } /* cuadrado */
.gallery-masonry__item:nth-child(10n+9) { grid-column: span 2; grid-row: span 2; } /* cuadrado */
.gallery-masonry__item:nth-child(10n+10) { grid-column: span 2; grid-row: span 2; } /* cuadrado */
.gallery-masonry__item:focus-visible { outline-offset: -3px; }
/* Cuando solo hay 1 foto, ocupa la caja completa en vez de comportarse
   como una celda más del mosaico. */
.gallery-masonry--single { display: block; height: 100%; padding: 0; }
.gallery-masonry--single .gallery-masonry__item { height: 100%; border-radius: var(--radius-md); grid-column: unset; grid-row: unset; }

.gallery-masonry-pagenav {
  display: none; /* JS le agrega la clase .is-visible cuando hay más de 1 página */
  flex: 0 0 auto;
  align-items: center; justify-content: center; gap: 10px;
  padding: 6px 4px 2px;
}
.gallery-masonry-pagenav.is-visible { display: flex; }
.gallery-masonry-pagenav__arrow {
  width: 26px; height: 26px;
  flex-shrink: 0;
  
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
  background: var(--color-white);
  color: var(--color-navy);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.74rem;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.gallery-masonry-pagenav__arrow:hover:not(:disabled) { background: var(--color-blue); border-color: var(--color-blue); color: var(--color-white); }
.gallery-masonry-pagenav__arrow:disabled { opacity: 0.3; cursor: default; }
.gallery-masonry-pagenav__dots { display: flex; align-items: center; gap: 7px; }
.gallery-masonry-pagenav__dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  border: none;
  padding: 0;
  background: var(--color-border);
  cursor: pointer;
  
  transform: scale(1);
  transition: transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.2s ease;
}
.gallery-masonry-pagenav__dot:hover { background: var(--color-text-soft); }
.gallery-masonry-pagenav__dot.is-active {
  background: var(--color-blue);
  transform: scale(1.7);
}
.gallery-masonry-pagenav__dot.is-active:hover { background: var(--color-blue); }

/* Aviso "+N" — YA NO SE USA para paginar (reemplazado por la fila de
   arriba), pero la clase se deja en el CSS por si algún otro lugar del
   sitio la sigue usando para un badge simple de "hay más" sin paginación. */
.gallery-masonry__more {
  position: absolute; inset: 0;
  background: rgba(14,29,61,0.6);
  color: var(--color-white);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.3rem; font-weight: 700;
}

@media (min-width: 721px) and (max-width: 1024px) {
  
  .gallery-masonry { grid-template-columns: repeat(8, 1fr); grid-auto-rows: 36px; }
  
  .biz-gallery, .product-gallery { height: 360px; }
}
@media (min-width: 1025px) {
  /* En escritorio hay más ancho disponible: más columnas y celdas base
     un poco más chicas para que quepan más miniaturas sin que se vean
     deformadas ni tan diminutas que no se distingan. */
  .gallery-masonry { grid-template-columns: repeat(10, 1fr); grid-auto-rows: 40px; }
  .biz-gallery, .product-gallery { height: 340px; }
}

.gallery-masonry.gallery-masonry--few { grid-auto-rows: 70px; }
.gallery-masonry.gallery-masonry--some { grid-auto-rows: 56px; }
@media (min-width: 721px) and (max-width: 1024px) {
  .gallery-masonry.gallery-masonry--few { grid-auto-rows: 90px; }
  .gallery-masonry.gallery-masonry--some { grid-auto-rows: 65px; }
}
@media (min-width: 1025px) {
  .gallery-masonry.gallery-masonry--few { grid-auto-rows: 90px; }
  .gallery-masonry.gallery-masonry--some { grid-auto-rows: 60px; }
}

.gallery-share-btn {
  position: absolute;
  bottom: 10px; right: 10px;
  width: 36px; height: 36px;
  border-radius: var(--radius-sm);
  background: rgba(14,29,61,0.55);
  border: none;
  color: var(--color-white);
  display: flex; align-items: center; justify-content: center;
  z-index: 5;
  backdrop-filter: blur(3px);
  transition: background 0.2s ease;
}
.gallery-share-btn:hover { background: rgba(14,29,61,0.8); }

.gallery-share-btn--static {
  position: static;
  background: var(--color-gray-bg);
  color: var(--color-navy);
}
.gallery-share-btn--static:hover { background: var(--color-blue); color: var(--color-white); }

.modal-body--business { padding-top: 24px; }

.biz-incompleto-aviso {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: #FEF3E2;
  border: 1.5px solid #F7A93C;
  border-radius: var(--radius-md);
  padding: 14px 16px;
  margin-bottom: 18px;
}
.biz-incompleto-aviso i {
  font-size: 1.3rem;
  color: #B96E00;
  margin-top: 2px;
  flex: 0 0 auto;
}
.biz-incompleto-aviso strong { color: #B96E00; }
.biz-incompleto-aviso p { margin: 4px 0 0; font-size: 0.86rem; color: #7A4A00; line-height: 1.5; }

.biz-info-col h4 {
  font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--color-text-soft); margin: 0 0 8px; font-weight: 700;
}
.biz-info-row { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 12px; }
.biz-info-row i { color: var(--color-blue); width: 18px; margin-top: 2px; }
.biz-info-row strong { display: block; font-size: 0.9rem; color: var(--color-navy); line-height: 1.3; white-space: pre-line; }

.biz-open-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 12px;
  border-radius: var(--radius-sm);
  font-size: 0.78rem; font-weight: 700;
}
.biz-open-badge.is-open { background: #DCF6F0; color: var(--color-blue-dark); }
.biz-open-badge.is-closed { background: #FEE4E1; color: var(--color-danger); }

.modal-fav-btn {
  width: 36px; height: 36px;
  border-radius: var(--radius-sm);
  background: var(--color-gray-bg);
  border: none;
  color: var(--color-text-soft);
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem;
  transition: background 0.2s ease, color 0.2s ease;
  /* Mismo motivo que en .bcp-action: ancla la explosión de partículas del
     efecto "pop" al propio botón, sin recortarla. */
  position: relative;
  overflow: visible;
}
.modal-fav-btn:hover { background: #FDE8EE; color: var(--color-magenta); }
.modal-fav-btn.is-fav-active { color: var(--color-magenta); background: #FDE8EE; }

.biz-social-row { display: flex; gap: 10px; margin: 14px 0 4px; }
.biz-social-row a {
  width: 36px; height: 36px; border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  color: var(--color-white);
  transition: transform 0.2s ease, filter 0.2s ease;
}
.biz-social-row a:hover { transform: translateY(-2px); filter: brightness(1.1); }
.biz-social-row a.social-facebook { background: #1877F2; }
.biz-social-row a.social-twitter { background: #1DA1F2; }
.biz-social-row a.social-tiktok { background: #000000; }
.biz-social-row a.social-instagram {
  background: radial-gradient(circle at 30% 110%, #FEDA75 0%, #FA7E1E 25%, #D62976 50%, #962FBF 75%, #4F5BD5 100%);
}
.biz-social-row a.social-whatsapp { background: #25D366; }

/* -------- Mapa estático (sin interacción de mouse, solo teclado/botones +/-) -------- */
.biz-map {
  position: relative;
  z-index: 0; /* aísla su propio contexto de apilamiento: así nada de lo
                que pase adentro (mapa de Leaflet, botones +/-) puede
                terminar pintándose por encima del nav, sin importar qué
                z-index se les dé aquí dentro — ver el bloque de abajo. */
  border-radius: var(--radius-md); overflow: hidden; height: 260px; box-shadow: var(--shadow-sm);
}
.biz-map .leaflet-container { width: 100%; height: 100%; font-family: inherit; }
/* Punto 4 (bloque anterior) + punto 7 (este bloque): los controles del mapa
   necesitan verse por encima de las capas propias de Leaflet (tiles,
   marcadores, popups — hasta z-index ~700 en su propio CSS) pero, gracias al
   aislamiento de arriba, ya no hace falta preocuparse de que choquen con el
   nav — por eso ahora pueden llevar un z-index alto sin volver a "pegarse"
   en el scroll como antes. Con z-index:5 (el ajuste anterior) quedaban por
   DEBAJO de las capas del propio mapa y por eso se veían invisibles aunque
   sí funcionaran al hacer clic. */
.biz-map__zoom { position: absolute; right: 10px; top: 10px; display: flex; flex-direction: column; gap: 6px; z-index: 800; }
.biz-map .leaflet-top,
.biz-map .leaflet-bottom { z-index: 700; }
.biz-map .leaflet-control-attribution { z-index: 700; }
.biz-map__zoom button {
  width: 34px; height: 34px; border-radius: var(--radius-sm);
  
  background: var(--color-navy); border: 2px solid var(--color-white);
  box-shadow: var(--shadow-md); color: var(--color-white); font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
}
.biz-map__zoom button:hover { background: var(--color-blue); }
.biz-map__hint {
  position: absolute; left: 10px; bottom: 10px; z-index: 500;
  background: rgba(255,255,255,0.9); padding: 4px 10px; border-radius: var(--radius-sm);
  font-size: 0.7rem; color: var(--color-text-soft);
}
/* Etiquetas permanentes con el nombre de cada sucursal (punto 5): ayudan a
   identificar cuál marcador es cuál sin tener que tocarlo. */
.biz-map__label {
  background: var(--color-navy); color: var(--color-white);
  border: none; border-radius: var(--radius-sm); font-weight: 700; font-size: 0.72rem;
  padding: 2px 8px; box-shadow: var(--shadow-sm);
}
.biz-map__label::before { border-top-color: var(--color-navy); }

/* ============================================================
   TARJETAS DE PRODUCTO (misma idea visual, más pequeñas)
   ============================================================ */
.products-section { margin: 24px 0; }

/* Galería de fotos del menú (solo restaurantes) — cada foto usa una proporción
   de caja distinta según su orientación real, para que una carta fotografiada
   de pie (vertical) no se recorte igual que una tomada de lado (horizontal). */
.menu-gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 10px;
  margin: 16px 0 24px;
}
.menu-photo {
  position: relative;
  border-radius: var(--radius-md);
  overflow: hidden;
  cursor: pointer;
  background: var(--color-gray-bg);
  box-shadow: var(--shadow-sm);
  aspect-ratio: 1 / 1; /* mientras se detecta la orientación real */
}
.menu-photo.is-horizontal { aspect-ratio: 4 / 3; }
.menu-photo.is-vertical { aspect-ratio: 3 / 4; }
.menu-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

.products-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }

.product-card {
  position: relative;
  background: var(--color-white);
  border-radius: 16px;
  
  border: 1px solid var(--color-border);
  box-shadow: 0 3px 10px rgba(21, 42, 86, 0.14);
  overflow: hidden;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.product-card:hover { transform: translateY(-3px); box-shadow: 0 10px 26px rgba(21, 42, 86, 0.22); }

.product-card__badge {
  position: absolute; top: 8px; left: 8px; z-index: 2;
  font-size: 0.62rem; font-weight: 700; color: var(--color-white);
  padding: 3px 9px; border-radius: var(--radius-sm);
}
.product-card__badge.badge-oferta { background: var(--color-danger); }
.product-card__badge.badge-nuevo { background: var(--color-blue); }
/* Pedido explícito: sistema de promociones — badge "Promo" en magenta
   (mismo acento ya usado para diferenciar clasificados/eventos del
   negocio) para que una promoción masiva (por categoría o todo el
   negocio, no puesta a mano en este producto en particular) se distinga
   de un vistazo de las badges de siempre (Oferta/Nuevo). */
.product-card__badge--promo { background: var(--color-magenta); }

/* Badge de tipo de precio (Oferta, Descuento, Hot Sale, Buen Fin, Liquidación,
   Preventa, Mayoreo). Dentro de la tarjeta de producto flota en la esquina
   superior derecha; dentro del modal de detalle (dentro de .classified-modal-price)
   se muestra en línea junto al precio. */
.product-card__price-type {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 0.62rem; font-weight: 700; color: var(--price-type-color, var(--color-navy));
  background: var(--color-gray-bg);
  background: color-mix(in srgb, var(--price-type-color, var(--color-navy)) 12%, white);
  padding: 3px 8px; border-radius: var(--radius-sm);
  vertical-align: middle;
}
.product-card .product-card__price-type { position: absolute; top: 8px; right: 8px; z-index: 2; }

.product-card__media { height: 110px; overflow: hidden; }
.product-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
.product-card:hover .product-card__media img { transform: scale(1.08); }

.product-card__body { padding: 10px 12px 12px; }
.product-card__body h4 { margin: 0 0 4px; font-size: 0.82rem; color: var(--color-navy); font-weight: 700; }
.product-card__price { font-size: 0.9rem; font-weight: 800; color: var(--color-blue); }
.product-card__price .old-price { font-size: 0.72rem; font-weight: 500; color: var(--color-text-soft); text-decoration: line-through; margin-left: 6px; }
.product-card__combo { font-size: 0.7rem; color: var(--color-text-soft); margin: 4px 0 0; }

.product-card__sizes, .product-card__colors { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 6px; }
.product-card__sizes span {
  font-size: 0.62rem; font-weight: 700; color: var(--color-navy);
  border: 1px solid var(--color-border); border-radius: var(--radius-sm);
  padding: 1px 6px;
}
.product-card__colors span { width: 14px; height: 14px; border-radius: var(--radius-sm); border: 1px solid var(--color-border); display: inline-block; }

@media (max-width: 720px) {
  .products-grid { grid-template-columns: repeat(2, 1fr); }

  
  .categories-toolbar {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  .type-switch { grid-column: 1; grid-row: 1; }
  .filter-select-wrap { grid-column: 2; grid-row: 1; height: 40px; }

  
  .categories-toolbar__row2 {
    grid-column: 1 / -1; grid-row: 2;
    display: flex; gap: 8px;
  }
  #filterDelivery, #filterOpenNow, #quickPublishBtn { flex: 1 1 0; padding: 0 8px; justify-content: center; min-width: 0; }
  
  #filterDelivery .filter-toggle__full, #filterOpenNow .filter-toggle__full { display: none; }
  #filterDelivery .filter-toggle__abbr, #filterOpenNow .filter-toggle__abbr { display: inline; }
  #quickPublishBtn { margin-left: 0 !important; }

  .type-switch button { width: 100%; padding: 0; gap: 0; }
  .type-switch button span { display: none; }

  #quickPublishBtn {
    padding: 0 10px; gap: 6px;
    display: flex; align-items: center; justify-content: center;
  }
  #quickPublishBtn span { display: inline; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  
  .biz-gallery, .product-gallery { height: 400px; }
  /* El grid mobile-first de .gallery-masonry ya está pensado para móvil
     (6 columnas base, celdas de 34px) — no necesita ajuste aparte aquí. */
  .modal-body--business { padding-top: 20px; }

  
  .nav__notif-dropdown {
    position: fixed;
    top: calc(var(--nav-height-live, var(--nav-height-scrolled)) + 8px);
    left: 12px; right: 12px;
    width: auto;
    max-height: calc(100vh - var(--nav-height-live, var(--nav-height-scrolled)) - 24px);
  }
  .nav__user-dropdown { right: -8px; min-width: 230px; }
}

/* ============================================================
   MODAL DE PUBLICAR — negocio o clasificado
   ============================================================ */
.modal-box--publish { max-width: 560px; }

.publish-menu-layout { display: flex; flex-direction: column; gap: 16px; padding: 18px 22px 22px; align-items: stretch; }
.publish-menu-layout__main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.publish-type-menu__item {
  display: flex; align-items: center; gap: 10px;
  width: 100%; text-align: left;
  border: 1px solid var(--color-border); background: var(--color-white);
  border-radius: var(--radius-md);
  padding: 11px 14px;
  font-weight: 700; font-size: 0.9rem; color: var(--color-navy);
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.publish-type-menu__item:hover {
  border-color: var(--color-blue);
  background: rgba(0, 152, 218, 0.04);
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}
.publish-type-menu__item:active { transform: translateY(0); box-shadow: var(--shadow-sm); }
.publish-type-menu__item > i:first-child { font-size: 1.05rem; color: var(--color-blue); width: 20px; text-align: center; }
/* Pedido explícito: "realiza diferenciación entre los botones de publicar
   (negocio/productos, clasificados, evento)" — antes los 3 se veían
   idénticos (mismo azul en ícono y hover, sin ninguna pista visual de
   cuál es cuál más allá del texto). Cada tipo toma un color de acento de
   la propia paleta del sitio: negocio se queda con el azul de siempre
   (es la opción "ancla"), clasificado usa magenta, evento usa el lima/
   dorado — un borde izquierdo de color de una vez, para que se distinga
   incluso sin leer el texto, además del ícono y el hover en su propio
   color. */
.publish-type-menu__item[data-type="negocio"] { border-left: 4px solid var(--color-blue); }
.publish-type-menu__item[data-type="clasificado"] { border-left: 4px solid var(--color-magenta); }
.publish-type-menu__item[data-type="clasificado"] > i:first-child { color: var(--color-magenta); }
.publish-type-menu__item[data-type="clasificado"]:hover { border-color: var(--color-magenta); background: rgba(185, 0, 91, 0.05); }
.publish-type-menu__item[data-type="evento"] { border-left: 4px solid var(--color-lime-dark); }
.publish-type-menu__item[data-type="evento"] > i:first-child { color: var(--color-lime-dark); }
.publish-type-menu__item[data-type="evento"]:hover { border-color: var(--color-lime-dark); background: rgba(151, 178, 19, 0.08); }
.publish-type-menu__arrow { margin-left: auto; color: var(--color-text-soft); font-size: 0.75rem; transition: transform 0.2s ease; }
.publish-type-menu__item:hover .publish-type-menu__arrow { transform: translateX(2px); }
/* Deshabilitada (ya tiene un negocio) — se deja VISIBLE pero gris, con un
   tooltip explicando por qué, en vez de ocultarla del todo como hacían
   las pestañas viejas (ver renderPublishMenu() en main.js). */
.publish-type-menu__item.is-disabled {
  cursor: not-allowed; color: var(--color-text-soft);
  background: var(--color-gray-bg); border-style: dashed;
  box-shadow: none;
  /* aria-disabled (no `disabled`) a propósito — un <button disabled> de
     verdad vuelve inerte también a sus hijos en la mayoría de
     navegadores, y el tooltip de abajo dejaría de poder abrirse ni con
     mouse ni con teclado. Se bloquea el click a mano (pointer-events)
     sobre el botón, y se libera de nuevo justo en el ícono de ayuda. */
  pointer-events: none;
}
.publish-type-menu__item.is-disabled > i:first-child { color: var(--color-text-soft); }
.publish-type-menu__tooltip { margin-left: auto; pointer-events: auto; }

.publish-type-menu__info {
  display: none;
  align-items: center; justify-content: center;
  width: 26px; height: 26px; margin-left: auto;
  border-radius: 50%; background: var(--color-gray-bg);
  color: var(--color-text-soft); font-size: 0.85rem;
  flex: 0 0 26px;
}
@media (max-width: 560px) {
  .publish-type-menu__info { display: flex; }
  /* con el ícono "?" ya ocupando el "margin-left:auto" de siempre, la
     flecha deja de empujarse sola a la derecha — se fija su lugar aparte. */
  .publish-type-menu__arrow { margin-left: 8px; }
}
/* Panel "Guía" (columna derecha) — arranca como una placa muted (mismo
   espíritu que el "GUIA" en gris de la referencia) y se llena con el
   manual básico del tipo sobre el que se pasa el cursor. */
.publish-menu-layout__guide {
  /* Mismo bug de arriba: al ir siempre debajo de los botones (nunca al
     lado), ya no tiene sentido un ancho fijo de columna angosta (38%,
     máx. 190px) — ahora usa el ancho completo disponible. */
  flex: 1 1 auto; max-width: none; min-height: 64px;
  background: var(--color-gray-bg); border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 14px 12px;
  display: flex; flex-direction: column;
}
.publish-menu-layout__guide-empty {
  margin: auto; text-align: center;
  color: var(--color-text-soft);
}
.publish-menu-layout__guide-empty i { font-size: 1.4rem; display: block; margin-bottom: 6px; opacity: 0.6; }
.publish-menu-layout__guide-empty span { display: block; font-weight: 800; letter-spacing: 1px; font-size: 0.8rem; }
.publish-menu-layout__guide-empty p { margin: 8px 0 0; font-size: 0.72rem; line-height: 1.35; }
.publish-menu-layout__guide-heading {
  display: flex; align-items: center; gap: 6px;
  font-weight: 800; font-size: 0.82rem; color: var(--color-navy);
  margin-bottom: 8px;
}
.publish-menu-layout__guide-heading i { color: var(--color-blue); }
.publish-menu-layout__guide-body ul { margin: 0; padding-left: 16px; display: flex; flex-direction: column; gap: 7px; }
.publish-menu-layout__guide-body li { font-size: 0.74rem; line-height: 1.35; color: var(--color-text-soft); }

.publish-menu-layout__guide-body li strong { color: var(--color-navy); font-weight: 800; }

.publish-menu-layout__guide-legend { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.publish-menu-layout__guide-legend li { display: flex; gap: 7px; align-items: flex-start; font-size: 0.72rem; line-height: 1.3; color: var(--color-text-soft); }
.publish-menu-layout__guide-legend i { color: var(--color-blue); font-size: 0.8rem; width: 14px; text-align: center; margin-top: 2px; flex: 0 0 14px; }
.publish-menu-layout__guide-legend strong { color: var(--color-navy); }

.publish-own-business {
  display: flex; gap: 12px;
  border: 1px solid var(--color-border); border-radius: var(--radius-md);
  padding: 12px; margin-bottom: 4px;
  /* Mismo acento azul que .publish-type-menu__item[data-type="negocio"] —
     este panel (negocio ya verificado, con sus botones de Productos/
     Completar/Flyer/Estadísticas) reemplaza a ese botón cuando ya existe
     un negocio, así que debe verse como parte del mismo grupo. */
  border-left: 4px solid var(--color-blue);
}
.publish-own-business--rejected { border-color: rgba(214, 69, 69, 0.25); border-left-color: var(--color-danger); background: rgba(214, 69, 69, 0.04); }
.publish-own-business__logo {
  flex: 0 0 72px; display: flex; flex-direction: column; align-items: center; gap: 4px;
}
.publish-own-business__logo img {
  width: 72px; height: 72px; object-fit: cover;
  border-radius: var(--radius-sm); border: 1px solid var(--color-border);
  background: var(--color-white);
}
.publish-own-business__verified {
  font-size: 0.66rem; font-weight: 700; color: var(--color-lime-dark, #2e7d32);
  display: flex; align-items: center; gap: 3px; white-space: nowrap;
}
.publish-own-business__panel { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }

.publish-own-business__label { font-size: 0.6rem; color: var(--color-text-soft); font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; }
.publish-own-business__name { font-size: 0.92rem; color: var(--color-navy); margin: 1px 0 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.publish-own-business__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; align-items: stretch; }
.publish-own-business__actions .btn {
  width: 100%; justify-content: center; text-align: center;
  padding: 7px 6px; font-size: 0.7rem; line-height: 1.2;
  white-space: normal; word-break: break-word;
}
/* En pantallas angostas otros elementos de este mismo modal sí necesitan
   ajuste aparte (.publish-menu-layout ya se apila siempre, ver base
   arriba — .publish-menu-layout__guide ya no necesita este override). */
@media (max-width: 560px) {
  .publish-own-business { flex-direction: column; align-items: center; text-align: center; }
  .publish-own-business__logo { flex-direction: row; flex-shrink: 0; }
  .publish-own-business__logo img { flex-shrink: 0; }
  .publish-own-business__name { white-space: normal; }
  
  .publish-own-business__actions { grid-template-columns: 1fr; }
}
.publish-type-menu__back {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 0.85rem; font-weight: 600; color: var(--color-blue);
  margin-bottom: 14px;
}

.publish-type-tabs {
  display: flex; gap: 8px;
  background: var(--color-gray-bg);
  border-radius: var(--radius-md);
  padding: 4px;
  margin-bottom: 20px;
}
.publish-type-tabs button {
  flex: 1;
  border: none; background: transparent;
  padding: 10px; border-radius: var(--radius-sm);
  font-weight: 700; font-size: 0.88rem; color: var(--color-text-soft);
  display: flex; align-items: center; justify-content: center; gap: 8px;
}
.publish-type-tabs button.is-active { background: var(--color-white); color: var(--color-navy); box-shadow: var(--shadow-sm); }

.publish-form-row {
  display: grid;
  
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 14px;
}
.publish-checkbox-row { display: flex; align-items: center; gap: 8px; margin: 4px 0 18px; font-size: 0.88rem; color: var(--color-navy); font-weight: 600; }

.publish-hint { font-size: 0.72rem; color: var(--color-text-soft); margin: 0 0 14px; line-height: 1.45; }

.delivery-zone-row {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 0; border-bottom: 1px solid var(--color-border);
}
.delivery-zone-row:last-child { border-bottom: none; }
.delivery-zone-row__check { margin-bottom: 0 !important; flex-shrink: 0; }
.delivery-zone-row__leader {
  flex: 1; min-width: 16px; height: 0;
  border-bottom: 1.5px dotted var(--color-border);
  margin: 0 2px;
}
.delivery-zone-row__cost-field {
  display: flex; align-items: center; gap: 4px; flex-shrink: 0;
  background: var(--color-gray-bg); border: 1.5px solid var(--color-border);
  border-radius: var(--radius-sm); padding: 6px 10px;
}
.delivery-zone-row__cost-field span { font-weight: 700; color: var(--color-text-soft); font-size: 0.9rem; }
.delivery-zone-row__cost-field input {
  width: 64px; border: none; background: transparent; padding: 0;
  font-size: 0.9rem; font-weight: 600; color: var(--color-text);
}
.delivery-zone-row__cost-field input:focus { outline: none; }

.publish-branch-row {
  padding: 14px 16px;
  background: var(--color-gray-bg);
  border-radius: var(--radius-sm);
  margin-bottom: 14px;
}

.publish-branch-row__fields {
  display: grid;
  grid-template-columns: 1fr 1.5fr 1fr;
  gap: 16px 14px;
  align-items: start;
}
.publish-branch-row__actions {
  display: flex;
  gap: 10px;
  margin-top: 14px;
}
.publish-branch-row__remove,
.branch-map-toggle {
  height: 38px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
  background: var(--color-white);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  font-size: 0.8rem; font-weight: 600; white-space: nowrap;
}
.publish-branch-row__actions .publish-branch-row__remove { flex: 0 0 auto; padding: 0 14px; width: auto; color: var(--color-danger); }
.publish-branch-row__remove:hover { background: var(--color-danger); color: var(--color-white); border-color: var(--color-danger); }
.branch-map-toggle { flex: 1; padding: 0 12px; color: var(--color-navy); }
.branch-map-toggle:hover { background: var(--color-blue); color: var(--color-white); border-color: var(--color-blue); }
.branch-map-toggle.has-coords { background: #DCF6F0; border-color: var(--color-blue); color: var(--color-blue-dark); }

/* Punto 3: al agregar una nueva sucursal, la(s) anterior(es) se colapsan a
   este resumen de una línea en vez de seguir ocupando espacio con el
   formulario completo abierto — un ícono de lápiz reabre la sucursal para
   editarla. */
.publish-branch-row__summary {
  display: none;
  align-items: center;
  gap: 10px;
}
.publish-branch-row.is-collapsed .publish-branch-row__summary { display: flex; }
.publish-branch-row.is-collapsed .publish-branch-row__fields,
.publish-branch-row.is-collapsed .publish-branch-row__actions,
.publish-branch-row.is-collapsed .branch-map-wrap { display: none; }
.publish-branch-row__summary-text {
  flex: 1; min-width: 0;
  font-size: 0.86rem; font-weight: 700; color: var(--color-navy);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.publish-branch-row__summary-text i { color: var(--color-blue); margin-right: 6px; }
.publish-branch-row__edit,
.publish-branch-row__summary .publish-branch-row__remove {
  width: 34px; height: 34px; flex-shrink: 0;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
  background: var(--color-white);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.8rem;
}
.publish-branch-row__edit { color: var(--color-navy); }
.publish-branch-row__edit:hover { background: var(--color-blue); color: var(--color-white); border-color: var(--color-blue); }
.publish-branch-row__summary .publish-branch-row__remove:hover { background: var(--color-danger); color: var(--color-white); border-color: var(--color-danger); }

.branch-map-wrap { margin-top: 12px; }
.branch-map-wrap .location-picker-map { height: 220px; }

@media (max-width: 720px) {
  .publish-branch-row__fields { grid-template-columns: 1fr; }
  .publish-branch-row__actions { flex-direction: column; }
  .branch-map-toggle,
  .publish-branch-row__actions .publish-branch-row__remove { width: 100%; }
}
.publish-success { text-align: center; padding: 30px 10px; }
.publish-success i { font-size: 2.4rem; color: var(--color-blue); margin-bottom: 12px; }
/* Pantalla de celebración al terminar de "Completar datos" por primera
   vez (negocio 100% dado de alta) — ver showBusinessCompletedCelebration()
   en main.js. Más llamativa a propósito que el aviso genérico de
   .publish-success: fondo degradado cálido en el encabezado, ícono de
   celebración grande, y una lista clara de próximos pasos reales. */
.business-celebration__header {
  background: linear-gradient(135deg, var(--color-lime, #ffd54f) 0%, #ffb74d 100%);
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  padding: 26px 20px 20px;
}
.business-celebration__header h2 { color: var(--color-navy); }
.business-celebration__header p { color: var(--color-navy); opacity: 0.85; }
.business-celebration__icon { font-size: 2.6rem; color: var(--color-navy); margin-bottom: 8px; display: block; }
.business-celebration__subtitle { font-weight: 700; color: var(--color-navy); margin: 4px 0 10px; font-size: 0.95rem; }
.business-celebration__list { list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.business-celebration__list li {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: 0.88rem; color: var(--color-text); line-height: 1.5;
  background: var(--color-gray-bg); border-radius: var(--radius-sm); padding: 10px 12px;
}
.business-celebration__list li i { color: var(--color-blue); margin-top: 2px; flex: 0 0 16px; }
.business-celebration__tagline { text-align: center; font-weight: 700; color: var(--color-navy); margin: 0 0 6px; }

.subcat-picker { margin-bottom: 18px; }
.subcat-picker > label { display: block; font-size: 0.82rem; font-weight: 600; color: var(--color-navy); margin-bottom: 8px; }
.subcat-picker__options { display: flex; flex-wrap: wrap; gap: 8px; }
.subcat-check {
  display: flex; align-items: center; gap: 6px;
  background: var(--color-gray-bg);
  border: 1.5px solid transparent;
  border-radius: var(--radius-sm);
  padding: 7px 12px;
  font-size: 0.82rem; font-weight: 700; color: var(--color-navy);
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.subcat-check input { accent-color: var(--color-blue); }
.subcat-check:has(input:checked) { border-color: var(--color-blue); background: #EAF7FE; }
.subcat-picker__empty { font-size: 0.82rem; color: var(--color-text-soft); }
.subcat-other-input { margin-top: 10px; }

.publish-social-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.publish-social-field .publish-hint { margin: 4px 0 0; }

#pubSchedSameAllWrap { margin-bottom: 14px; }

.publish-schedule-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--color-border);
  font-size: 0.85rem;
}
.publish-schedule-row:last-child { border-bottom: none; margin-bottom: 0; }
.publish-schedule-row__main {
  display: grid;
  grid-template-columns: 90px auto 1fr 1fr;
  align-items: center;
  gap: 10px;
}
.publish-schedule-row .day-label { font-weight: 700; color: var(--color-navy); }
.publish-schedule-row label.closed-check { display: flex; align-items: center; gap: 5px; color: var(--color-text-soft); font-size: 0.78rem; white-space: nowrap; }
.publish-schedule-row input[type="time"] {
  border: 1px solid var(--color-border); border-radius: var(--radius-sm);
  padding: 6px 8px; font-family: inherit; font-size: 0.8rem; width: 100%;
  
  min-width: 0;
  box-sizing: border-box;
}
.publish-schedule-row.is-closed input[type="time"] { opacity: 0.35; pointer-events: none; }
.publish-schedule-row.is-closed .publish-schedule-row__break-toggle,
.publish-schedule-row.is-closed .publish-schedule-row__break { opacity: 0.35; pointer-events: none; }

.publish-schedule-row__break-toggle {
  display: flex; align-items: center; gap: 6px;
  font-size: 0.76rem; color: var(--color-text-soft); cursor: pointer;
}
.publish-schedule-row__break-toggle i { color: var(--color-blue); }
.publish-schedule-row__break {
  display: flex; align-items: center; gap: 8px;
  font-size: 0.78rem; color: var(--color-text-soft);
  margin-left: 90px;
}
/* Bug real encontrado (mismo patrón que .btn[hidden] de más arriba): esta
   clase define "display: flex" sin excluir [hidden] — por cascada de
   CSS, cuando la especificidad es igual, la hoja de estilos del sitio le
   gana a la del navegador, así que el "display: none" que el navegador
   le pone por default a [hidden] quedaba anulado. El JavaScript ya hacía
   todo bien (le pone/quita `hidden` al marcar/desmarcar el checkbox de
   "Agregar horario de comida/descanso"), pero visualmente el bloque de
   horas de descanso se veía siempre, sin importar el checkbox. */
.publish-schedule-row__break[hidden] { display: none; }
.publish-schedule-row__break input[type="time"] { max-width: 110px; }

.publish-schedule-row input:disabled,
.publish-schedule-row select:disabled { opacity: 0.55; cursor: not-allowed; background: var(--color-gray-bg); }

@media (max-width: 480px) {
  .publish-form-row { grid-template-columns: 1fr; }
  .publish-social-row { grid-template-columns: 1fr; }
  
  .publish-schedule-row__main {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
  }
  .publish-schedule-row .day-label { flex: 0 0 auto; }
  .publish-schedule-row .closed-check { margin-left: auto; }
  .publish-schedule-row input[type="time"] {
    flex: 1 1 0;
    min-width: 0;
  }
  .publish-schedule-row__break { margin-left: 0; flex-wrap: wrap; }
  
  .auth-form { padding: 16px 14px 24px; }
  .modal-overlay { padding: 16px 8px; }
}

/* ============================================================
   MODALES DE AUTENTICACIÓN (login / registro)
   ============================================================ */

.modal-box--auth { max-width: 440px; }

.auth-modal-header {
  display: flex; flex-direction: column; align-items: center;
  padding: 32px 24px 10px;
  background: var(--color-gray-bg);
}

.auth-modal-header img { height: 58px; margin-bottom: 10px; }
.auth-modal-header h2 { margin: 0; font-size: 1.15rem; color: var(--color-navy); }
.auth-modal-header p { margin: 4px 0 0; font-size: 0.82rem; color: var(--color-text-soft); }

.auth-form { padding: 22px 28px 28px; }

/* ============================================================
   EDITOR DE FOTO DE PERFIL — estilo Facebook: círculo de recorte,
   arrastrar para mover, slider para acercar/alejar.
   ============================================================ */
.avatar-cropper-wrap { display: flex; flex-direction: column; align-items: center; margin-bottom: 20px; }

.enc-cand-galeria { display: flex; flex-wrap: wrap; gap: 8px; }
.enc-cand-galeria__item {
  position: relative;
  width: 64px; height: 64px;
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.enc-cand-galeria__item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.enc-cand-galeria__remove {
  position: absolute; top: 2px; right: 2px;
  width: 18px; height: 18px;
  border: none; border-radius: 50%;
  background: rgba(0, 0, 0, 0.6); color: #fff;
  font-size: 0.6rem;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
}
.enc-cand-galeria__add {
  width: 64px; height: 64px;
  border: 2px dashed var(--color-border);
  border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  color: var(--color-text-soft);
  cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease;
  
  position: static;
  pointer-events: auto;
}
.enc-cand-galeria__add:hover { border-color: var(--color-blue); color: var(--color-blue); }

/* ============================================================
   SUSCRIPCIONES — grilla de categorías con checkbox
   ============================================================ */
.subscribe-section-title {
  font-size: 0.85rem; color: var(--color-navy); font-weight: 700;
  margin: 18px 0 10px;
}
.subscribe-cat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 6px 12px;
}
.subscribe-cat-item {
  display: flex; align-items: center; gap: 8px;
  font-size: 0.82rem; color: var(--color-text);
  padding: 5px 0;
  cursor: pointer;
}
.subscribe-cat-item input[type="checkbox"] { accent-color: var(--color-blue); width: 16px; height: 16px; flex-shrink: 0; }

/* ============================================================
   ANUNCIO DE INICIO — pantalla completa, solo se cierra con la "X"
   ============================================================ */
.startup-ad {
  display: none;
  position: fixed; inset: 0;
  z-index: 2400; /* por encima de todo lo demás, incluido el visor de menú */
  background: rgba(6, 12, 26, 0.82);
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.startup-ad.is-open { display: flex; }
.startup-ad__box {
  position: relative;
  max-width: 480px;
  width: 100%;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
}
.startup-ad__box img { width: 100%; display: block; }
.startup-ad__close {
  position: absolute; top: 10px; right: 10px; z-index: 2;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: rgba(6, 12, 26, 0.65);
  border: none; color: var(--color-white);
  font-size: 1rem;
  display: flex; align-items: center; justify-content: center;
}
.startup-ad__close:hover { background: rgba(6, 12, 26, 0.85); }
.startup-ad__badge {
  position: absolute; top: 10px; left: 10px; z-index: 2;
  width: 30px; height: 30px;
  background: rgba(255,255,255,0.92);
  border-radius: 50%;
  font-size: 0.8rem; color: var(--color-navy);
  display: flex; align-items: center; justify-content: center;
}

.card-ad {
  display: none;
  position: fixed;
  right: 18px; bottom: 18px;
  z-index: 1900; /* por debajo del anuncio de pantalla completa y del visor de menú, pero por encima del resto */
  
  max-width: 340px;
  /* pointer-events normal (no full-screen), así que el resto de la página
     sigue siendo clicable/navegable con esta tarjeta abierta */
}
.card-ad.is-open { display: block; }
.card-ad__box {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0,0,0,0.25);
  animation: card-ad-in 0.25s ease;
}
@keyframes card-ad-in {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}
.card-ad__box img { width: 100%; display: block; }
.card-ad__close {
  position: absolute; top: 6px; right: 6px; z-index: 2;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: rgba(6, 12, 26, 0.65);
  border: none; color: var(--color-white);
  font-size: 0.8rem;
  display: flex; align-items: center; justify-content: center;
}
.card-ad__close:hover { background: rgba(6, 12, 26, 0.85); }
@media (max-width: 480px) {
  
  .card-ad { right: 10px; bottom: 10px; max-width: min(260px, calc(100vw - 20px)); }
}

.menu-viewer {
  display: none;
  position: fixed; inset: 0;
  z-index: 2200;
  background: rgba(6, 12, 26, 0.94);
  align-items: center;
  justify-content: center;
}
.menu-viewer.is-open { display: flex; }
.menu-viewer__stage {
  position: relative;
  max-width: 90vw;
  max-height: 86vh;
  display: flex;
  overflow: hidden; /* recorta la imagen ampliada dentro del mismo recuadro */
  cursor: zoom-in;
}
.menu-viewer__stage img {
  max-width: 90vw;
  max-height: 86vh;
  object-fit: contain;
  border-radius: 4px;
  user-select: none;
  pointer-events: none;
  transition: transform 0.08s linear;
}
/* Punto 5: la imagen se magnifica ella misma con el origen del zoom
   siguiendo al mouse, en vez de una lupa circular aparte */
.menu-viewer__stage img.is-zoomed { transform: scale(2.4); }
.menu-viewer__close {
  position: absolute; top: 18px; right: 20px;
  width: 42px; height: 42px;
  border-radius: 50%;
  background: rgba(255,255,255,0.12);
  border: none; color: var(--color-white);
  font-size: 1.1rem;
  display: flex; align-items: center; justify-content: center;
  z-index: 2;
}
.menu-viewer__close:hover { background: rgba(255,255,255,0.22); }
.menu-viewer__counter {
  position: absolute; top: 24px; left: 50%; transform: translateX(-50%);
  
  color: var(--color-navy); font-size: 0.85rem; font-weight: 700;
  background: var(--color-white); border: 1px solid var(--color-border);
  padding: 5px 14px; border-radius: var(--radius-md);
  z-index: 2;
}

.menu-viewer__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px; height: 48px;
  
  border-radius: var(--radius-sm);
  /* Mismo ajuste que el contador de arriba — formato del sitio en vez del
     genérico blanco-semitransparente de lightbox. */
  background: var(--color-white);
  border: 1px solid var(--color-border); color: var(--color-navy);
  font-size: 1.2rem;
  display: flex; align-items: center; justify-content: center;
  z-index: 2;
}
.menu-viewer__arrow--prev { left: 16px; }
.menu-viewer__arrow--next { right: 16px; }
.menu-viewer__arrow:hover { background: var(--color-blue); border-color: var(--color-blue); color: var(--color-white); }
@media (max-width: 720px) {
  .menu-viewer__arrow { width: 40px; height: 40px; font-size: 1rem; }
  .menu-viewer__arrow--prev { left: 8px; }
  .menu-viewer__arrow--next { right: 8px; }
}
.avatar-cropper {
  width: 180px; height: 180px;
  position: relative;
  cursor: grab;
  touch-action: none;
  user-select: none;
}
.avatar-cropper.is-dragging { cursor: grabbing; }

.avatar-cropper__frame {
  position: absolute; inset: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--color-gray-bg);
  border: 3px solid var(--color-white);
  box-shadow: 0 0 0 1px var(--color-border), var(--shadow-md);
}

.avatar-cropper.is-drag-over .avatar-cropper__frame { box-shadow: 0 0 0 3px var(--color-blue), var(--shadow-md); }
.avatar-cropper__empty {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  color: var(--color-text-soft);
  font-size: 2.2rem;
  text-align: center;
  padding: 12px;
}
.avatar-cropper__empty span { font-size: 0.7rem; line-height: 1.3; }
.avatar-cropper__img { position: absolute; top: 0; left: 0; max-width: none; pointer-events: none; }

.avatar-cropper__icon-actions {
  position: absolute; bottom: -8px; right: 4px;
  display: flex; gap: 6px;
  z-index: 2;
}
.avatar-cropper__icon-btn {
  width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  background: var(--color-white);
  color: var(--color-blue);
  
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md), 0 0 0 2px var(--color-white);
  cursor: pointer;
  font-size: 0.9rem;
  transition: transform var(--transition), background var(--transition);
}
.avatar-cropper__icon-btn:hover { background: var(--color-blue); color: var(--color-white); transform: scale(1.08); }
.avatar-cropper__actions { display: flex; gap: 10px; margin-top: 14px; }
.avatar-cropper__zoom {
  display: flex; align-items: center; gap: 10px;
  width: 100%; max-width: 260px;
  margin-top: 14px;
  color: var(--color-text-soft);
  font-size: 0.85rem;
}
.avatar-cropper__zoom input[type="range"] { flex: 1; accent-color: var(--color-blue); }
.avatar-cropper__hint {
  font-size: 0.78rem; color: var(--color-text-soft); text-align: center;
  margin: 10px 0 0; max-width: 280px;
}
.auth-field { margin-bottom: 16px; }
.auth-field label { display: block; font-size: 0.82rem; font-weight: 600; color: var(--color-navy); margin-bottom: 6px; }
.auth-toggle-pass {
  position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
  background: none; border: none; color: var(--color-text-soft); cursor: pointer;
}
.auth-toggle-pass:hover { color: var(--color-navy); }

.auth-row-between { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; font-size: 0.82rem; }
.auth-remember { display: flex; align-items: center; gap: 6px; color: var(--color-text-soft); }
.auth-forgot { color: var(--color-blue); font-weight: 600; }

.auth-switch { text-align: center; font-size: 0.85rem; color: var(--color-text-soft); margin-top: 16px; }
.auth-switch a { color: var(--color-blue); font-weight: 700; }

.verif-sent-email {
  font-size: 1.15rem; font-weight: 700; color: var(--color-magenta);
  margin: 0 0 14px; word-break: break-word;
}

.verif-sent-next-steps {
  text-align: left; background: var(--color-gray-bg);
  border-radius: var(--radius-md); padding: 14px 16px; margin-bottom: 16px;
}
.verif-sent-next-steps h4 {
  margin: 0 0 6px; font-size: 0.88rem; color: var(--color-navy);
  display: flex; align-items: center; gap: 6px;
}
.verif-sent-next-steps h4 i { color: #ffc107; }
.verif-sent-next-steps p { margin: 0; font-size: 0.85rem; color: var(--color-text-soft); line-height: 1.5; }

.password-checklist { list-style: none; padding: 0; margin: 8px 0 0; display: grid; gap: 4px; }
.password-checklist li { font-size: 0.76rem; color: var(--color-text-soft); display: flex; align-items: center; gap: 6px; overflow: hidden; max-height: 20px; opacity: 1; transition: max-height 0.3s ease, opacity 0.25s ease, margin 0.3s ease; }
.password-checklist li i { width: 12px; color: var(--color-border); }
.password-checklist li.is-valid { max-height: 0; opacity: 0; margin: 0; }

.auth-match-check {
  position: absolute;
  right: 44px;
  top: 50%;
  transform: translateY(-50%) scale(0.6);
  color: var(--color-blue);
  font-size: 1.1rem;
  opacity: 0;
  transition: opacity 0.2s ease, transform 0.2s ease;
  pointer-events: none;
}
.auth-match-check.is-visible { opacity: 1; transform: translateY(-50%) scale(1); }

.auth-field.has-warning .floating-field input,
.auth-field.has-warning .floating-field textarea { border-color: var(--color-danger); }
.floating-field.has-warning input { border-color: var(--color-danger); }
.auth-required-msg { font-size: 0.76rem; color: var(--color-danger); margin-top: 5px; display: flex; align-items: center; gap: 5px; }

.auth-error-msg { font-size: 0.76rem; color: var(--color-danger); margin-top: 5px; min-height: 14px; }

/* Vista previa de "correo" simulado (confirmación de cuenta / código de recuperación) —
   no hay backend que mande correos de verdad, así que se muestra lo que ese correo
   diría, dentro de un recuadro con apariencia de mensaje recibido. */
.simulated-email {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin: 4px 0 14px;
}
.simulated-email__meta {
  background: var(--color-gray-bg);
  padding: 10px 14px;
  display: flex; flex-direction: column; gap: 2px;
  font-size: 0.76rem; color: var(--color-text-soft);
  border-bottom: 1px solid var(--color-border);
}
.simulated-email__body { padding: 16px; }
.simulated-email__body p { margin: 0 0 12px; font-size: 0.88rem; color: var(--color-navy); }
.simulated-email__note { margin: 10px 0 0 !important; font-size: 0.74rem !important; color: var(--color-text-soft) !important; text-align: center; }

.recovery-code-display {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: var(--color-gray-bg);
  border-radius: var(--radius-md);
  padding: 12px 16px;
}
.recovery-code-display span {
  font-size: 1.6rem; font-weight: 800; letter-spacing: 6px; color: var(--color-navy); font-family: monospace;
}

.auth-warning-box {
  display: flex; gap: 10px; align-items: flex-start;
  background: rgba(239, 71, 111, 0.08);
  border: 1px solid rgba(239, 71, 111, 0.25);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  margin: 4px 0 16px;
}
.auth-warning-box i { color: var(--color-danger); margin-top: 2px; }
.auth-warning-box p { margin: 0; font-size: 0.84rem; color: var(--color-navy); }

.auth-intro-note { font-size: 0.78rem; color: var(--color-text-soft); margin: 0 0 10px; text-align: center; }

/* ============================================================
   FLOATING LABELS — montadas sobre la línea del box.
   Los <select> quedan siempre "activados" (para no sobreponer texto).
   ============================================================ */
.floating-field { position: relative; margin-bottom: 20px; min-width: 0; }

.floating-field input,
.floating-field select,
.floating-field textarea {
  width: 100%;
  padding: 15px 14px 13px;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  font-family: inherit;
  font-size: 0.9rem;
  background: var(--color-white);
  position: relative;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.floating-field textarea { padding-top: 22px; resize: vertical; }

.floating-field label {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.9rem;
  color: var(--color-text-soft);
  background: var(--color-white);
  padding: 0 6px;
  pointer-events: none;
  transition: top 0.2s ease, transform 0.2s ease, font-size 0.2s ease, color 0.2s ease;
  z-index: 2;
}

.floating-field label i:first-child { margin-right: 5px; color: var(--color-blue); font-size: 0.85em; }

.floating-field input:focus,
.floating-field select:focus,
.floating-field textarea:focus {
  outline: none;
  border-color: var(--color-blue);
  box-shadow: 0 0 0 3px rgba(0, 152, 218, 0.15);
}

/* La etiqueta "flota" sobre la línea del borde al enfocar o cuando ya tiene contenido */
.floating-field input:focus + label,
.floating-field input:not(:placeholder-shown) + label,
.floating-field textarea:focus + label,
.floating-field textarea:not(:placeholder-shown) + label {
  top: 0;
  transform: translateY(-50%) scale(0.82);
  color: var(--color-blue);
  font-weight: 700;
}
.floating-field textarea:focus + label,
.floating-field textarea:not(:placeholder-shown) + label { left: 8px; }

.edit-readonly-field {
  margin-bottom: 20px; padding: 13px 14px; border-radius: var(--radius-md);
  background: var(--color-gray-bg); display: flex; flex-direction: column; gap: 2px;
}
.edit-readonly-field__label { font-size: 0.78rem; color: var(--color-text-soft); font-weight: 600; }
.edit-readonly-field__value { font-size: 0.9rem; color: var(--color-text); }

/* Los <select> no soportan :placeholder-shown, así que su label queda
   siempre activo (montado) para no encimarse con el valor seleccionado. */
.floating-field.is-select label {
  top: 0;
  transform: translateY(-50%) scale(0.82);
  color: var(--color-blue);
  font-weight: 700;
}
.floating-field.is-select select { padding-top: 15px; }

/* ============================================================
   CAJA DE TEXTO ENRIQUECIDO — negrita / itálica / emoji
   (cajas de descripción, reseñas y cualquier textarea de 2+ líneas)
   ============================================================ */
.rich-textarea-wrap .floating-field { margin-bottom: 6px; }

.rich-toolbar {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 6px;
  position: relative;
}
.rich-toolbar button {
  width: 32px; height: 32px;
  border-radius: var(--radius-sm);
  background: var(--color-gray-bg);
  border: none;
  color: var(--color-navy);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.82rem;
  transition: background 0.2s ease, color 0.2s ease;
}
.rich-toolbar button:hover { background: var(--color-blue); color: var(--color-white); }
.rich-toolbar button.is-active { background: var(--color-navy); color: var(--color-white); }

.emoji-picker {
  position: absolute;
  top: 38px; left: 0;
  z-index: 20;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  padding: 10px;
  display: none;
  grid-template-columns: repeat(8, 1fr);
  gap: 4px;
  width: 260px;
}
.emoji-picker.is-open { display: grid; }
.emoji-picker button {
  width: 28px; height: 28px;
  border: none; background: transparent;
  font-size: 1.05rem; border-radius: var(--radius-sm);
}
.emoji-picker button:hover { background: var(--color-gray-bg); }

.review-item__comment strong { color: var(--color-navy); }
.review-item__comment em { color: var(--color-text); }

/* ============================================================
   ESTRELLAS CON RELLENO PARCIAL (1/4, 1/2, 3/4) — usa outline + fill
   ============================================================ */
.star-cell { position: relative; display: inline-block; width: 1em; height: 1em; line-height: 1; }
.star-cell .star-empty {
  color: transparent;
  -webkit-text-stroke: 1px var(--color-star-outline);
  display: block;
}
.star-cell .star-fill-wrap {
  position: absolute; top: 0; left: 0; height: 100%;
  overflow: hidden; white-space: nowrap;
}
.star-cell .star-filled { color: var(--color-star-fill); display: block; }

.schedule-list { list-style: none; padding: 0; margin: 0; }
.schedule-row {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  padding: 5px 0; font-size: 0.82rem; color: var(--color-text);
  border-bottom: 1px dashed var(--color-border);
}
.schedule-row:last-child { border-bottom: none; }
.schedule-row.is-today { font-weight: 700; color: var(--color-navy); }
.schedule-today-tag {
  font-size: 0.62rem; background: var(--color-blue); color: var(--color-white);
  padding: 1px 6px; border-radius: var(--radius-sm); margin-left: 4px; font-weight: 700;
}
.schedule-hours { color: var(--color-text-soft); }
.schedule-hours.is-closed { color: var(--color-danger); font-weight: 600; }
.schedule-row.is-today .schedule-hours { color: var(--color-navy); }
/* Pedido explícito: nota del horario de comida/descanso, en texto más
   chico y en un tono más tenue que el horario normal — flex-basis:100%
   la manda siempre a su propia línea debajo del renglón principal
   (día + horario), sin importar cuánto quepa a los lados. */
.schedule-break-note {
  flex-basis: 100%;
  font-size: 0.68rem;
  color: var(--color-text-soft);
  opacity: 0.75;
  font-style: italic;
  margin-top: 1px;
}
.schedule-row.is-today .schedule-break-note { font-weight: 400; }

/* ============================================================
   TIPO DE PUBLICACIÓN (clasificados) + DESTACADO + REPORTAR
   ============================================================ */
.pub-type-badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 0.68rem; font-weight: 700; color: var(--color-white);
  padding: 3px 9px; border-radius: var(--radius-sm);
}
.featured-badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 0.68rem; font-weight: 700; color: var(--color-navy);
  padding: 3px 9px; border-radius: var(--radius-sm);
  background: var(--color-lime);
}
.classified-badges-row { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
.classified-condition-badge {
  display: inline-flex; align-items: center;
  font-size: 0.68rem; font-weight: 700; color: var(--color-navy);
  padding: 3px 9px; border-radius: var(--radius-sm);
  background: var(--color-gray-bg);
  border: 1px solid var(--color-border);
}
.pub-cv-filename { font-size: 0.82rem; color: var(--color-text-soft); }

.report-link {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 0.78rem; color: var(--color-text-soft);
  background: none; border: none; margin-top: 14px;
}
.report-link:hover { color: var(--color-danger); }

.report-form label { display: block; font-size: 0.82rem; font-weight: 600; color: var(--color-navy); margin-bottom: 6px; }
.report-form select {
  width: 100%; border: 1px solid var(--color-border); border-radius: var(--radius-md);
  padding: 10px 12px; font-family: inherit; font-size: 0.88rem; margin-bottom: 14px; background: var(--color-white);
}
.report-thanks { text-align: center; padding: 20px 10px; }
.report-thanks i { font-size: 2rem; color: var(--color-blue); margin-bottom: 10px; }

.product-gallery { height: 260px; position: relative; display: flex; flex-direction: column; }
.product-gallery__main { width: 100%; height: 100%; position: relative; overflow: hidden; }
.product-gallery__main img { width: 100%; height: 100%; object-fit: cover; transition: opacity 0.3s ease; }

/* ============================================================
   TARJETAS Y BANNERS DE PUBLICIDAD
   ============================================================ */

.ad-card-premium {
  position: relative;
  height: 280px;
  background: var(--color-white);
  border-radius: 22px;
  box-shadow: 0 8px 24px rgba(21, 42, 86, 0.10), 0 0 0 3px var(--ad-color, var(--color-blue)) inset;
  overflow: hidden;
  display: block;
}
.ad-card-premium img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ad-card-premium__badge {
  position: absolute; top: 14px; left: 14px; z-index: 3;
  width: 30px; height: 30px;
  
  background: var(--ad-color, var(--color-blue));
  border-radius: 50%;
  font-size: 0.8rem; color: var(--color-white);
  display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-sm);
}

.ad-sidebar-banner {
  position: relative;
  display: block;
  height: 130px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 6px 18px rgba(21, 42, 86, 0.10), 0 0 0 3px var(--ad-color, var(--color-blue)) inset;
  background: var(--color-white);
}
.ad-sidebar-banner img { width: 100%; height: 100%; object-fit: cover; display: block; }

.ad-card-premium--featured, .ad-sidebar-banner--featured {
  box-shadow: 0 8px 28px rgba(255, 0, 122, 0.28), 0 0 0 3px var(--color-magenta) inset;
}
.ad-card-premium--featured::after, .ad-sidebar-banner--featured::after {
  content: '⭐ Destacado';
  position: absolute; top: 14px; right: 14px; z-index: 3;
  background: var(--color-magenta); color: var(--color-white);
  font-size: 0.68rem; font-weight: 700;
  padding: 3px 10px; border-radius: var(--radius-sm);
}

.encuesta-card {
  position: relative;
  height: 280px; /* igual que .biz-card-premium — nunca cambia, ver media query de abajo */
  border-radius: 22px;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  background-color: var(--color-navy); /* respaldo mientras carga/si fondo_color viniera vacío */
  box-shadow: 0 8px 24px rgba(21, 42, 86, 0.10);
}
.encuesta-card__panel {
  position: absolute;
  
  inset: 8px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.9);
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  overflow: hidden;
}
.encuesta-card__live {
  display: inline-flex; align-items: center; gap: 5px;
  align-self: flex-start;
  font-size: 0.58rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em;
  color: var(--color-danger);
}
.encuesta-card__live i {
  font-size: 0.42rem;
  animation: encuestaLivePulse 1.4s ease-in-out infinite;
}
@keyframes encuestaLivePulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}
.encuesta-card__title {
  margin: 0;
  font-size: 0.84rem;
  color: var(--color-navy);
  line-height: 1.2;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.encuesta-card__countdown {
  align-self: flex-start;
  display: inline-flex; align-items: center; gap: 4px;
  background: var(--color-gray-bg);
  color: var(--color-navy);
  font-size: 0.64rem; font-weight: 700;
  padding: 3px 8px;
  border-radius: var(--radius-sm);
}

.encuesta-card__countdown--verde { background: #DCF6E8; color: #1E9E5A; }
.encuesta-card__countdown--amarillo { background: #FDF0DC; color: #B96E00; }
.encuesta-card__countdown--rojo { background: #FCE1DE; color: #C0392B; }
.encuesta-card__candidatos {
  display: flex;
  flex-direction: column;
  gap: 3px;
  overflow: hidden;
  
  flex: 1 1 auto;
}
.encuesta-card__candidato {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  padding: 3px;
  text-align: left;
  cursor: pointer;
  transition: background 0.2s ease;
  /* Ver comentario en .encuesta-card__candidatos — con menos filas, cada
     una crece pareja para repartirse el espacio sobrante (con un tope
     para que 2 candidatos no se vean absurdos de grandes). */
  flex: 1 1 0;
  max-height: 44px;
}
.encuesta-card__candidato:hover { background: var(--color-gray-bg); }
.encuesta-card__candidato-foto {
  width: 26px; height: 26px;
  flex: 0 0 auto;
  border-radius: var(--radius-sm);
  object-fit: cover;
}
.encuesta-card__candidato-foto--sin { display: block; }
.encuesta-card__candidato-info {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.encuesta-card__candidato-nombre {
  font-size: 0.72rem; font-weight: 600; color: var(--color-navy);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.encuesta-card__candidato-bar {
  display: block;
  height: 4px;
  border-radius: 3px;
  background: var(--color-gray-bg);
  overflow: hidden;
}
.encuesta-card__candidato-bar span {
  display: block;
  height: 100%;
  border-radius: 3px;
  transition: width 0.4s ease;
}
.encuesta-card__candidato-pct {
  flex: 0 0 auto;
  font-size: 0.66rem; font-weight: 700; color: var(--color-text-soft);
}
.encuesta-card__ver-todos {
  align-self: flex-start;
  background: none; border: none; padding: 0;
  font-size: 0.66rem; font-weight: 600;
  color: var(--color-blue);
  text-decoration: underline;
  cursor: pointer;
}
.encuesta-card__votar-btn {
  margin-top: auto;
  width: 100%;
  border: none;
  border-radius: var(--radius-sm);
  padding: 8px;
  background: linear-gradient(135deg, var(--color-blue), var(--color-magenta));
  color: var(--color-white);
  font-weight: 700;
  font-size: 0.74rem;
  cursor: pointer;
  transition: opacity 0.2s ease;
}
.encuesta-card__votar-btn:hover { opacity: 0.9; }
.encuesta-card__ya-votaste {
  margin-top: auto;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  width: 100%;
  padding: 8px;
  border-radius: var(--radius-sm);
  background: var(--color-gray-bg);
  color: var(--color-text-soft);
  font-weight: 700;
  font-size: 0.74rem;
}

.cand-profile__hero {
  position: relative;
  height: 340px;
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.cand-profile__hero img { width: 100%; height: 100%; object-fit: cover; cursor: zoom-in; display: block; }
.cand-profile__sin-foto { font-size: 4rem; color: rgba(255, 255, 255, 0.85); }
.cand-profile__hero-scrim {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.25) 0%, transparent 30%, transparent 55%, rgba(0, 0, 0, 0.75) 100%);
  pointer-events: none;
}
.cand-profile__badge {
  position: absolute; top: 14px; left: 14px;
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(6px);
  color: #fff;
  font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em;
  padding: 5px 11px;
  border-radius: 20px;
}
.cand-profile__nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 34px; height: 34px;
  border: none; border-radius: 50%;
  background: rgba(0, 0, 0, 0.4); color: #fff;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background 0.2s ease;
}
.cand-profile__nav:hover { background: rgba(0, 0, 0, 0.65); }
.cand-profile__nav--prev { left: 10px; }
.cand-profile__nav--next { right: 10px; }
.cand-profile__hero-info {
  position: absolute; left: 18px; right: 18px; bottom: 16px;
}
.cand-profile__hero-info .cand-profile__nombre {
  margin: 0;
  font-size: 1.3rem; font-weight: 800;
  color: #fff;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.4);
  display: flex; align-items: center; gap: 8px;
}
.cand-profile__verified { color: #4FC3F7; font-size: 0.85em; }
.cand-profile__dots {
  margin-top: 10px;
  display: flex; gap: 6px;
}
.cand-profile__dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
}
.cand-profile__dot.is-active { background: #fff; transform: scale(1.3); }

/* El panel "flota" sobre la foto (margen negativo hacia arriba + esquinas
   redondeadas arriba), igual que el panel claro de la referencia. */
.cand-profile__panel {
  position: relative;
  margin-top: -22px;
  background: var(--color-white);
  border-radius: 22px 22px 0 0;
  padding: 22px 22px 24px;
}
.cand-profile__lema {
  font-style: italic;
  color: var(--color-text-soft);
  border-left: 3px solid var(--color-blue);
  padding-left: 12px;
  margin: 0 0 14px;
}
.cand-profile__stats {
  display: flex;
  gap: 10px;
  margin-bottom: 16px;
}
.cand-profile__stat {
  flex: 1;
  display: flex; flex-direction: column;
  background: var(--color-gray-bg);
  border: 1.5px solid transparent;
  border-radius: var(--radius-md);
  padding: 10px 14px;
}
.cand-profile__stat--main { background: var(--color-white); box-shadow: 0 2px 10px rgba(21, 42, 86, 0.10); }
.cand-profile__stat-num { font-size: 1.4rem; font-weight: 800; color: var(--color-navy); }
.cand-profile__stat-label { font-size: 0.72rem; color: var(--color-text-soft); }
.cand-profile__section { margin-bottom: 14px; }
.cand-profile__section h3 {
  margin: 0 0 4px;
  font-size: 0.85rem;
  color: var(--color-navy);
  display: flex; align-items: center; gap: 6px;
}
.cand-profile__section h3 i { color: var(--color-blue); font-size: 0.8em; }
.cand-profile__section p { margin: 0; font-size: 0.88rem; color: var(--color-text); line-height: 1.5; }
.cand-profile__cta {
  display: block;
  width: 100%;
  border: none;
  border-radius: 30px;
  padding: 15px;
  background: var(--color-navy);
  color: #fff;
  font-weight: 700;
  font-size: 0.92rem;
  cursor: pointer;
  transition: opacity 0.2s ease;
}
.cand-profile__cta:hover { opacity: 0.88; }
.cand-profile__footnote {
  margin: 12px 0 0;
  text-align: center;
  font-size: 0.7rem;
  color: var(--color-text-soft);
}

/* Vista ampliada propia (ver openCandProfileFotoGrande() en main.js) —
   deliberadamente MÁS SIMPLE que el visor de zoom del resto del sitio:
   solo la foto más grande + flechas, nada de zoom/pan al máximo. */
.cand-foto-grande-overlay {
  position: fixed; inset: 0; z-index: 3000;
  background: rgba(14, 29, 61, 0.85);
  display: flex; align-items: center; justify-content: center;
  padding: 40px;
}
.cand-foto-grande-overlay img { max-width: 100%; max-height: 100%; border-radius: var(--radius-md); object-fit: contain; }
.cand-foto-grande-overlay__close {
  position: absolute; top: 20px; right: 20px;
  width: 40px; height: 40px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.15); color: #fff; border: none;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; font-size: 1.1rem;
}
.cand-foto-grande-overlay__nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 46px; height: 46px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.15); color: #fff; border: none;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; font-size: 1.2rem;
}
.cand-foto-grande-overlay__nav--prev { left: 20px; }
.cand-foto-grande-overlay__nav--next { right: 20px; }

.encuesta-votar-modal__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 10px;
}
.encuesta-votar-modal__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 10px 8px;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-sm);
  transition: border-color 0.2s ease, background 0.2s ease;
}
.encuesta-votar-modal__card.is-selected { border-color: var(--color-blue); background: #EAF6FD; }
.encuesta-votar-modal__card-foto {
  width: 64px; height: 64px;
  border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  color: rgba(255, 255, 255, 0.9);
  font-size: 1.4rem;
}
.encuesta-votar-modal__card-foto img { width: 100%; height: 100%; object-fit: cover; }
.encuesta-votar-modal__card-nombre {
  font-weight: 600; color: var(--color-navy); font-size: 0.78rem;
  text-align: center;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 100%;
}
.encuesta-votar-modal__card-btn {
  width: 100%;
  border: none;
  border-radius: var(--radius-sm);
  padding: 6px;
  background: var(--color-gray-bg);
  color: var(--color-navy);
  font-weight: 700;
  font-size: 0.72rem;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}
.encuesta-votar-modal__card-btn:hover:not(:disabled) { background: var(--color-blue); color: var(--color-white); }
.encuesta-votar-modal__card-btn:disabled { opacity: 0.4; cursor: default; }
.encuesta-votar-modal__card.is-selected .encuesta-votar-modal__card-btn { background: var(--color-blue); color: var(--color-white); }

/* Tarjeta CTA para categorías sin negocios registrados (junto a la tarjeta de publicidad) */
.empty-category-cta {
  height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; gap: 8px;
  background: var(--color-white);
  border: 2px dashed var(--color-border);
  border-radius: var(--radius-lg);
  padding: 24px 20px;
}
.empty-category-cta i { font-size: 1.8rem; color: var(--color-blue); }
.empty-category-cta h3 { margin: 0; font-size: 1rem; color: var(--color-navy); }
.empty-category-cta p { margin: 0 0 6px; font-size: 0.84rem; color: var(--color-text-soft); }

.inline-ad-banner { max-width: 420px; margin: 24px auto 0; }
.inline-ad-banner .ad-sidebar-banner { height: 100px; }

/* Footer */
.footer {
  background: var(--color-navy);
  color: rgba(255,255,255,0.85);
  padding: 40px 0 20px;
  margin-top: 40px;
}
.footer .container { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 30px; }
.footer h4 { color: var(--color-white); margin: 0 0 12px; font-size: 1rem; }
.footer ul { list-style: none; padding: 0; margin: 0; }
.footer li { margin-bottom: 8px; font-size: 0.88rem; }
.footer li a:hover { color: var(--color-lime); }
.footer__bottom {
  border-top: 1px solid rgba(255,255,255,0.15);
  margin-top: 26px; padding-top: 16px;
  text-align: center; font-size: 0.8rem; color: rgba(255,255,255,0.6);
}
.footer__social { display: flex; gap: 10px; margin-top: 10px; }
.footer__social a {
  width: 36px; height: 36px;
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,0.1);
  display: flex; align-items: center; justify-content: center;
}
.footer__social a:hover { background: var(--color-blue); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 992px) {
  .hero { grid-template-columns: 1fr; height: auto; }
  .hero__side-gallery { display: none; }
  .grid { grid-template-columns: repeat(2, 1fr); }
  .footer .container { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 820px) {
  
  .nav__inner {
    display: grid;
    grid-template-columns: auto auto minmax(0, 1fr) auto auto;
    grid-template-rows: auto auto;
    gap: 10px; row-gap: 8px;
    height: auto;
    padding: 10px 16px;
  }
  .nav__divider { display: block; }
  .nav__hamburger { grid-column: 1; grid-row: 1; }
  .nav__inner > .nav__divider:nth-of-type(1) { grid-column: 2; grid-row: 1; }
  
  .nav__logo {
    grid-column: 3; grid-row: 1;
    
    justify-self: start;
    width: auto; min-width: 0;
  }
  .nav__logo-full { display: none; }
  .nav__logo-icon {
    display: flex;
    position: static;
    height: 48px; width: 48px;
    opacity: 1;
  }
  .nav.is-scrolled .nav__logo-icon { height: 48px; width: 48px; }
  .nav__inner > .nav__divider:nth-of-type(2) { grid-column: 4; grid-row: 1; }
  .nav__actions { grid-column: 5; grid-row: 1; margin-left: 0; }
  .search-bar__wrap {
    grid-column: 1 / -1; grid-row: 2;
    max-width: 100%;
  }
  .nav, .nav.is-scrolled { height: auto; min-height: var(--nav-height-scrolled); }
  .hero__banner .slide__content { max-width: 100%; padding: 0 24px; }
  .grid { grid-template-columns: 1fr 1fr; }
  .footer .container { grid-template-columns: 1fr; text-align: center; }
  .footer__social { justify-content: center; }
}

@media (max-width: 480px) {
  .grid { grid-template-columns: 1fr; }
  .hero__banner .slide__content h2 { font-size: 1.35rem; }
}

/* ============================================================
   TOASTS — notificaciones flotantes de confirmación/error/aviso.
   Se apilan de abajo hacia arriba, esquina inferior derecha en desktop;
   en móvil ocupan el ancho completo, centradas abajo (más fáciles de leer
   con el pulgar y no tapan controles importantes de la barra de navegación).
   ============================================================ */
#toastContainer {
  position: fixed;
  z-index: 4000;
  right: 20px;
  bottom: 20px;
  display: flex;
  flex-direction: column-reverse;
  gap: 10px;
  pointer-events: none;
  max-width: 340px;
}
.toast {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--color-navy);
  color: var(--color-white);
  padding: 13px 16px;
  border-radius: var(--radius-md);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22);
  font-size: 0.85rem;
  font-weight: 600;
  pointer-events: auto;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.toast.is-visible { opacity: 1; transform: translateY(0); }
.toast.is-leaving { opacity: 0; transform: translateY(12px); }
.toast i { font-size: 1rem; flex-shrink: 0; }

.toast span { flex: 1; min-width: 0; overflow-wrap: break-word; }
.toast--success { background: #1f7a4d; }
.toast--error { background: var(--color-danger); }
.toast--info { background: var(--color-navy); }
.toast__close {
  background: none; border: none; color: inherit; opacity: 0.7;
  cursor: pointer; padding: 2px; margin-left: 2px; flex-shrink: 0;
  display: flex; align-items: center;
}
.toast__close:hover { opacity: 1; }

@media (max-width: 720px) {
  #toastContainer {
    left: 12px; right: 12px; bottom: 12px;
    max-width: none;
    align-items: stretch;
  }
  .toast { font-size: 0.82rem; }
}

/* ============================================================
   AJUSTES: pestañas con un solo encabezado visible, teléfonos y
   tablas dinámicas con encabezado una sola vez
   ============================================================ */

/* Solo se ve el encabezado de la pestaña activa; los de las pestañas
   ocultas se ocultan con ellas (se navega con Continuar / Regresar). */
.publish-tabs__nav--single { justify-content: flex-start; }
.publish-tabs__nav--single .publish-tabs__tab { cursor: default; }
.publish-tabs__nav--single .publish-tabs__tab[hidden] { display: none !important; }

/* Campo de teléfono compacto + botón "Número" al lado */
.publish-phone-row {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.publish-phone-row .floating-field { margin-bottom: 0; }
.floating-field--phone { flex: 0 1 240px; max-width: 240px; }
.add-phone-btn { flex: 0 0 auto; white-space: nowrap; }

/* Tabla simple de filas dinámicas: el encabezado va una sola vez */
.stacked-rows { margin: 10px 0 4px; }
.stacked-rows__head,
.stacked-rows__row {
  display: grid; grid-template-columns: minmax(0, 240px) 30px;
  gap: 10px; align-items: center;
}
.stacked-rows__head {
  font-size: 0.75rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.04em; color: var(--color-text-soft); margin-bottom: 6px;
}
.stacked-rows__row { margin-bottom: 8px; }
.stacked-rows__row input {
  width: 100%; padding: 10px 12px; border: 1px solid var(--color-border);
  border-radius: 8px; font: inherit; font-size: 0.9rem;
}
.stacked-rows__remove {
  width: 26px; height: 26px; border-radius: 50%; border: none; cursor: pointer;
  background: var(--color-border); color: var(--color-navy); font-size: 0.7rem;
}

.stacked-rows--phones.stacked-rows > .stacked-rows__head,
.stacked-rows--phones.stacked-rows > .stacked-rows__row {
  grid-template-columns: minmax(0, 170px) minmax(0, 160px) 30px;
}
.stacked-rows__row select {
  width: 100%; padding: 10px 12px; border: 1px solid var(--color-border);
  border-radius: 8px; font: inherit; font-size: 0.85rem; background: var(--color-white);
}
/* Etiqueta del teléfono en la ficha pública del negocio */
.biz-phone-tag {
  margin-left: 8px; padding: 2px 8px; border-radius: var(--radius-sm);
  background: var(--color-gray-bg); color: var(--color-text-soft);
  font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em;
}

/* Boletos del evento: encabezado una sola vez arriba de la tabla */
.ticket-tier-head {
  display: grid; grid-template-columns: 1fr 140px 30px; gap: 10px;
  align-items: end; margin-bottom: 8px;
  font-size: 0.75rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.04em; color: var(--color-text-soft);
}
.ticket-tier-row {
  display: grid; grid-template-columns: 1fr 140px 30px; gap: 10px;
  align-items: center; margin-bottom: 8px; padding-right: 0;
}
.ticket-tier-row input {
  width: 100%; padding: 10px 12px; border: 1px solid var(--color-border);
  border-radius: 8px; font: inherit; font-size: 0.9rem;
}
@media (max-width: 560px) {
  .ticket-tier-head { grid-template-columns: 1fr 90px 30px; font-size: 0.68rem; }
  .ticket-tier-row { grid-template-columns: 1fr 90px 30px; }
  .floating-field--phone { flex: 1 1 100%; max-width: none; }
}

/* Encabezado único de la tabla de sucursales: los títulos de columna se
   escriben una sola vez arriba de la lista, no en cada fila. */
.publish-branch-head {
  display: grid;
  grid-template-columns: 1fr 1.5fr 1fr;
  gap: 16px 14px;
  padding: 0 16px;
  margin-bottom: 8px;
  font-size: 0.75rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.04em; color: var(--color-text-soft);
}
.publish-branch-row__fields .branch-cell {
  width: 100%; padding: 10px 12px; border: 1px solid var(--color-border);
  border-radius: 8px; font: inherit; font-size: 0.9rem; background: var(--color-white);
}
.publish-branch-row__fields .branch-cell:focus {
  outline: none; border-color: var(--color-blue);
}
@media (max-width: 640px) {
  /* Apilado en móvil: el encabezado de columnas ya no aplica y cada campo
     se identifica por su propio placeholder. */
  .publish-branch-head { display: none; }
}

/* ============================================================
   SIDEBAR RESPONSIVO — menú lateral deslizable (solo móvil/tablet)
   ============================================================ */
.mobile-sidebar-overlay {
  position: fixed; inset: 0;
  background: rgba(14,29,61,0.55);
  
  z-index: 1050;
}
.mobile-sidebar {
  position: fixed; top: 0; left: 0; bottom: 0;
  width: 280px; max-width: 84vw;
  
  background: var(--color-navy);
  color: rgba(255,255,255,0.85);
  z-index: 1051;
  transform: translateX(-100%);
  transition: transform 0.25s ease;
  display: flex; flex-direction: column;
  box-shadow: var(--shadow-lg);
  overflow-y: auto;
}
.mobile-sidebar.is-open { transform: translateX(0); }
.mobile-sidebar__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px;
  border-bottom: 1px solid rgba(255,255,255,0.15);
}
.mobile-sidebar__logo { height: 52px; } 
.mobile-sidebar__close {
  width: 32px; height: 32px; border: none; background: rgba(255,255,255,0.1);
  
  border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  color: var(--color-white); cursor: pointer;
  flex-shrink: 0;
  transition: background var(--transition);
}
.mobile-sidebar__close:hover { background: var(--color-blue); }
.mobile-sidebar__user {
  padding: 14px 16px;
  border-bottom: 1px solid rgba(255,255,255,0.15);
  
  display: flex; flex-direction: row; align-items: center; justify-content: center;
  gap: 10px;
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--color-white);
  
  cursor: pointer;
}
.mobile-sidebar__user:empty { display: none; }
.mobile-sidebar__user > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mobile-sidebar__user-arrow { font-size: 0.7rem; color: var(--color-lime); flex-shrink: 0; }

.mobile-sidebar__user .user-avatar {
  border: 2px solid var(--color-blue);
}

.mobile-sidebar__user .nav__greeting-name { color: var(--color-lime); font-weight: 700; }
.mobile-sidebar__cats-toggle {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; padding: 14px 16px;
  border: none; background: transparent;
  border-bottom: 1px solid rgba(255,255,255,0.15);
  font-weight: 600; font-size: 0.92rem; color: var(--color-white);
  cursor: pointer;
}
.mobile-sidebar__cats-toggle:hover { background: rgba(255,255,255,0.06); }
.mobile-sidebar__cats-toggle i:last-child { transition: transform 0.2s ease; font-size: 0.8rem; color: rgba(255,255,255,0.6); }
.mobile-sidebar__cats-toggle.is-open i:last-child { transform: rotate(180deg); }

.mobile-sidebar__cats-toggle--negocio span i:first-child { color: var(--color-blue); }
.mobile-sidebar__cats-toggle--clasificado span i:first-child { color: var(--color-magenta); }
.mobile-sidebar__cats {
  display: flex; flex-direction: column;
  padding: 4px 0 8px;
  border-bottom: 1px solid rgba(255,255,255,0.15);
  max-height: 260px; overflow-y: auto;
  
  flex-shrink: 0;
}

.mobile-sidebar__cats[hidden] { display: none; }
.mobile-sidebar__cats button {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 16px 8px 30px;
  border: none; background: transparent; text-align: left;
  font-size: 0.86rem; color: rgba(255,255,255,0.8);
  cursor: pointer;
}
.mobile-sidebar__cats button:hover, .mobile-sidebar__cats button.is-active { background: rgba(255,255,255,0.08); color: var(--color-blue); }
/* Mismo criterio que el ícono del toggle: dentro de la persiana de
   clasificados, el resaltado usa magenta en vez de azul. */
#mobileSidebarCatsClasificado button:hover, #mobileSidebarCatsClasificado button.is-active { color: var(--color-magenta); }
/* El badge de conteo (.category-chip__badge) en la barra principal es
   position:absolute, pensado para flotar sobre el ícono circular — aquí,
   dentro de un botón de lista normal, se pinta como un elemento en línea
   más, pegado a la derecha del todo. Ya lleva su propio fondo de color
   (azul o lima, ver .category-chip__badge), así que sigue contrastando
   bien sobre el nuevo fondo navy sin cambios. */
.mobile-sidebar__cats button .category-chip__badge {
  position: static;
  margin-left: auto;
}
.mobile-sidebar__nav { display: flex; flex-direction: column; padding: 4px 0 8px; }
.mobile-sidebar__nav a {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px;
  color: var(--color-white); font-size: 0.94rem; font-weight: 500;
}
.mobile-sidebar__nav a:hover { background: rgba(255,255,255,0.08); color: var(--color-lime); }
.mobile-sidebar__nav a i { width: 18px; text-align: center; color: rgba(255,255,255,0.6); }

.mobile-sidebar__section-title {
  margin: 0;
  padding: 14px 16px 8px;
  font-size: 0.7rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em;
  color: rgba(255,255,255,0.55);
  border-top: 1px solid rgba(255,255,255,0.15);
}
.mobile-sidebar__section-title--first { border-top: none; padding-top: 12px; }

/* Ubicación / Entrega a domicilio / Abierto ahora / Publicar dentro del
   sidebar móvil — mismos controles que en la barra de categorías de
   escritorio (oculta en responsivo), reubicados aquí para que sigan
   siendo accesibles en móvil. El selector de ubicación se deja en blanco
   sólido (como en escritorio) para que se lea como un control de formulario
   aparte dentro del fondo navy, con buen contraste. */
.mobile-sidebar__loc-row {
  display: flex; align-items: center; gap: 12px;
  padding: 6px 16px 10px;
}
.mobile-sidebar__loc-row i { width: 18px; text-align: center; color: rgba(255,255,255,0.6); }
.mobile-sidebar__loc-row select {
  flex: 1; min-width: 0;
  border: 1px solid rgba(255,255,255,0.2); border-radius: var(--radius-sm);
  background: var(--color-white); padding: 8px 10px;
  font-size: 0.88rem; font-weight: 600; color: var(--color-navy);
  outline: none; cursor: pointer;
}

.mobile-sidebar__delivery-row {
  display: flex; align-items: center; gap: 12px;
  width: 100%; padding: 12px 16px;
  border: none; background: transparent; text-align: left;
  font-size: 0.94rem; font-weight: 500; color: var(--color-white);
  cursor: pointer;
}
.mobile-sidebar__delivery-row i { width: 18px; text-align: center; color: rgba(255,255,255,0.6); }
.mobile-sidebar__delivery-row:hover { background: rgba(255,255,255,0.08); color: var(--color-lime); }
.mobile-sidebar__delivery-row[data-active="true"] { color: var(--color-lime); font-weight: 700; }
.mobile-sidebar__delivery-row[data-active="true"] i { color: var(--color-lime); }

.mobile-sidebar__reset-filters {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: calc(100% - 32px); margin: 4px 16px 12px;
  padding: 9px 12px;
  border: 1px solid rgba(255,255,255,0.25); border-radius: 999px;
  background: transparent; color: var(--color-white);
  font-size: 0.86rem; font-weight: 600;
  cursor: pointer;
}
.mobile-sidebar__reset-filters:hover { background: rgba(255,255,255,0.08); border-color: var(--color-lime); color: var(--color-lime); }

.mobile-sidebar__open-now-dot {
  width: 8px !important; height: 8px;
  border-radius: 50%;
  background: rgba(255,255,255,0.35);
  font-size: 0 !important;
}
.mobile-sidebar__delivery-row--open-now[data-active="true"] .mobile-sidebar__open-now-dot { background: #2ecc71; }

.mobile-sidebar__publish-zone {
  padding: 14px 16px;
  border-bottom: 1px solid rgba(255,255,255,0.15);
}
.mobile-sidebar__publish-row {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; margin: 0;
  padding: 12px 16px;
  border: none; border-radius: var(--radius-sm);
  background: var(--color-blue); color: var(--color-white);
  font-size: 0.94rem; font-weight: 700;
  cursor: pointer;
}
.mobile-sidebar__publish-row:hover { background: var(--color-blue-dark); }

.mobile-sidebar__social {
  display: flex; flex-wrap: wrap; gap: 10px;
  padding: 2px 16px 20px;
}
.mobile-sidebar__social a {
  width: 36px; height: 36px;
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,0.1);
  color: var(--color-white);
  font-size: 0.92rem;
  display: flex; align-items: center; justify-content: center;
  transition: background var(--transition), color var(--transition);
}
.mobile-sidebar__social a:hover { background: var(--color-blue); color: var(--color-white); }

@media (min-width: 821px) {
  .mobile-sidebar, .mobile-sidebar-overlay, .nav__hamburger { display: none !important; }
}

@media (min-width: 821px) and (max-width: 1024px) {
  
  .categories-toolbar { flex-wrap: wrap; }

  .filter-select-wrap { flex: 1 1 90px; min-width: 0; padding: 0 8px; }
  .filter-select-wrap i { display: none; }
  .filter-select { width: 100%; }

  .filter-toggle { padding: 0 10px; flex-shrink: 0; }
  .filter-toggle__full { display: none; }
  .filter-toggle__abbr { display: inline; }

  #quickPublishBtn { flex-shrink: 0; padding: 0 12px; }
}

@media (max-width: 820px) {
  
  .nav__hamburger { display: flex; }

  
  .nav__user-greeting { display: none; }

  

  
  .categories-section { display: none; }
}

/* ============================================================
   PANEL DE PUBLICIDAD — pulido del formulario y del listado
   ============================================================ */
.ad-form-hint {
  margin: -10px 0 14px;
  font-size: 0.8rem;
  color: var(--color-text-soft);
}

.ad-zona-multi { margin: -6px 0 14px; }
.ad-zona-multi__label {
  display: block; font-size: 0.78rem; font-weight: 600;
  color: var(--color-text-soft); margin-bottom: 6px;
}
.ad-zona-multi__options {
  display: flex; flex-wrap: wrap; gap: 8px;
}
.ad-zona-multi__opt {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 10px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: 0.78rem;
  cursor: pointer;
  background: var(--color-gray-bg);
}
.ad-zona-multi__opt:has(input:checked) {
  border-color: var(--color-blue);
  background: rgba(var(--color-blue-rgb, 37, 99, 235), 0.08);
  color: var(--color-blue);
  font-weight: 600;
}
.ad-search-results {
  position: absolute; top: 100%; left: 0; right: 0; z-index: 10;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
  max-height: 220px; overflow-y: auto;
  margin-top: 4px;
}
.ad-search-results button {
  display: block; width: 100%; text-align: left;
  padding: 8px 12px; border: none; background: transparent;
  font-size: 0.86rem; color: var(--color-text); cursor: pointer;
}
.ad-search-results button:hover { background: var(--color-gray-bg); }
.ad-search-results__empty { padding: 8px 12px; font-size: 0.82rem; color: var(--color-text-soft); }
.admin-ads-zone-group { margin-bottom: 22px; }
.admin-ads-zone-group__title {
  margin: 0 0 10px;
  font-size: 0.9rem;
  color: var(--color-text-soft);
  padding-bottom: 6px;
  border-bottom: 1px solid var(--color-border);
}

.nick-live-status {
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  font-size: 0.76rem; font-weight: 600;
  display: flex; align-items: center; gap: 4px;
  pointer-events: none;
  background: var(--color-white);
  padding-left: 6px;
  
  z-index: 3;
}
.nick-live-status.is-checking { color: var(--color-text-soft); }
.nick-live-status.is-ok { color: #2ecc71; }
.nick-live-status.is-taken { color: #e74c3c; }
/* Espacio para que un nick largo no choque visualmente con el indicador.
   Solo aplica al campo de Perfil — el de Registro ya no trae el indicador
   ENCIMA del texto (ver override de .nick-field-group más abajo), así que
   no necesita este relleno. */
#profileNickname { padding-right: 92px; }

.nick-char-count {
  display: block; text-align: right; margin: 2px 2px 0;
  font-size: 0.74rem; color: var(--color-text-soft);
}

.field-tooltip {
  position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
  color: var(--color-text-soft); cursor: help; z-index: 4;
}
.field-tooltip:hover, .field-tooltip:focus { color: var(--color-blue); outline: none; }
.field-tooltip__bubble {
  display: none; position: absolute; bottom: calc(100% + 8px); right: -8px;
  width: 220px; padding: 10px 12px; border-radius: var(--radius-sm);
  background: var(--color-navy); color: var(--color-white);
  font-size: 0.78rem; font-weight: 400; line-height: 1.4; text-align: left;
  box-shadow: var(--shadow-md); z-index: 5;
}
.field-tooltip__bubble::after {
  content: ''; position: absolute; top: 100%; right: 12px;
  border: 6px solid transparent; border-top-color: var(--color-navy);
}
.field-tooltip:hover .field-tooltip__bubble,
.field-tooltip:focus .field-tooltip__bubble { display: block; }

/* Ícono "?" propio, en su renglón — usado por el tooltip de "ya tienes un
   negocio registrado" del menú de +Publicar (.publish-type-menu__tooltip).
   Ya NO lo usa el campo de Nick en Registro (ver rediseño más abajo: ese
   volvió a usar el .field-tooltip normal, dentro del campo). */
.nick-tooltip-inline {
  display: inline-flex; align-items: center;
  color: var(--color-text-soft); cursor: help;
  font-size: 0.85rem; line-height: 1;
}
.nick-tooltip-inline:hover, .nick-tooltip-inline:focus { color: var(--color-blue); outline: none; }
.nick-tooltip-inline:hover .field-tooltip__bubble,
.nick-tooltip-inline:focus .field-tooltip__bubble { display: block; }
.nick-tooltip-inline .field-tooltip__bubble { left: 0; right: auto; }
.nick-tooltip-inline .field-tooltip__bubble::after { left: 12px; right: auto; }

.nick-field-group { position: relative; margin-bottom: 6px; }
.nick-field-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.floating-field--nick {
  flex: 0 0 calc(15ch + 56px);
  width: calc(15ch + 56px);
  margin-bottom: 0;
  font-size: 0.9rem;
}
.floating-field--nick .field-tooltip { right: 12px; }
/* El campo necesita relleno suficiente a la derecha del texto para el
   ícono "?" — evita que el nick escrito choque con él. */
.floating-field--nick input { padding-right: 34px; }
/* Contador fuera del campo, siempre pegado al margen derecho de la línea. */
.nick-char-count--inline {
  display: inline-block; margin: 0; flex: 0 0 auto;
  white-space: nowrap; text-align: right;
}

.nick-field-group .nick-live-status {
  position: static; transform: none;
  display: flex; flex: 1 1 auto; min-width: 92px;
  margin: 0; background: none; padding-left: 0; z-index: auto;
}

.floating-field--nick .field-tooltip__bubble {
  right: auto; left: 50%; transform: translateX(-50%);
  width: 190px;
}
.floating-field--nick .field-tooltip__bubble::after {
  left: 50%; right: auto; transform: translateX(-50%);
}

.static-content-modal { max-height: 60vh; overflow-y: auto; line-height: 1.55; }
.static-content-modal p { margin: 0 0 16px; font-size: 0.9rem; color: var(--color-text); }
.static-content-modal p:last-child { margin-bottom: 0; }

/* ============================================================
   RESPONSIVO EN MODALES — auditoría dedicada
   El pedido: "que los textos no se corten, no hagan salto de página
   raro y se alineen como deberían... el texto en responsivo puede ser
   más pequeño pero legible".
   Problemas reales encontrados en la revisión y corregidos aquí abajo,
   agrupados al final del archivo a propósito: así estas reglas ganan por
   orden de cascada sobre cualquier regla previa de la misma
   especificidad, sin tener que ir a tocar 30 bloques distintos.
   ============================================================ */
@media (max-width: 560px) {
  /* 1) El overlay tenía 40px arriba/abajo y 20px a los lados fijos — en
        un teléfono eso se comía ~40px de ancho útil del modal, que es
        justo lo que faltaba para que los textos no se apretaran. */
  .modal-overlay { padding: 16px 10px; }

  /* 2) Títulos y textos: más chicos pero sin bajar de ~13px reales, que
        es el límite práctico de legibilidad cómoda en móvil. */
  .modal-body { padding: 18px 16px; }
  .modal-body h2 { font-size: 1.15rem; line-height: 1.3; }
  .modal-body .modal-tagline { font-size: 0.85rem; }

  /* 3) Palabras largas sin espacios (nombres de negocio pegados, URLs,
        correos, códigos de producto) se salían de la caja y provocaban
        scroll horizontal en toda la página. overflow-wrap parte la
        palabra solo cuando de verdad no cabe; sin esto el navegador
        prefiere desbordar antes que romperla. */
  .modal-body h2,
  .modal-body p,
  .modal-body li,
  .product-modal__spec-value,
  .publish-own-business__name,
  .my-business-row__info strong { overflow-wrap: anywhere; }

  /* 4) Las filas de 2 columnas del formulario de publicar (incluida la
        de los campos nuevos de producto) quedaban con cada campo a la
        mitad del ancho — las etiquetas flotantes largas ("Contenido (ej.
        500 ml, 1 kg)", "Código de producto (opcional)") se cortaban a
        media palabra. Una sola columna les da el ancho completo. */
  .publish-form-row { grid-template-columns: 1fr; gap: 0; }
  /* Corrección a pedido explícito: el usuario aclaró que "2 columnas en
     responsivo" era para cuando estos datos se MUESTRAN (tarjeta/modal de
     detalle del producto — ver .product-modal__specs), no para el
     formulario donde se CAPTURAN. En el formulario está bien que cada
     campo ocupe su propia línea completa en móvil, igual que el resto del
     formulario — así no se ven encimados. Se revierte al mismo colapso a
     1 columna de la regla general de arriba (ya no hace falta esta clase
     aparte para nada, .publish-form-row le basta). */

  /* 5) Botonera de acciones de los modales: en móvil los botones se
        encimaban o se salían cuando eran 2+; ahora se apilan al ancho
        completo, que además es más fácil de tocar con el dedo. */
  .modal-actions { flex-direction: column; align-items: stretch; gap: 8px; }
  .modal-actions .btn,
  .modal-actions .btn-whatsapp { width: 100%; justify-content: center; }

  /* 6) Las pestañas/encabezados del acordeón de publicar cortaban su
        texto con ellipsis cuando el título era largo ("Logo y galería de
        fotos (el logo es obligatorio)"). Que baje de línea es mejor que
        que se corte. */
  .publish-accordion__header {
    white-space: normal;
    text-align: left;
    font-size: 0.85rem;
    line-height: 1.35;
    gap: 8px;
  }
  .publish-accordion__header span { min-width: 0; }

  /* 7) La "X" de cerrar quedaba encima del contenido del modal en
        pantallas chicas (el padding de arriba era el de escritorio). */
  .modal-body { padding-top: 22px; }
  .modal-close { top: 10px; right: 10px; width: 32px; height: 32px; }

  /* 8) Listas de info (horario, datos de contacto) con etiqueta e ícono:
        el valor largo empujaba al ícono fuera de la caja. */
  .modal-info-list li { align-items: flex-start; gap: 8px; }
  .modal-info-list li i { flex: 0 0 auto; margin-top: 3px; }

  /* 9) Cualquier tabla o bloque ancho dentro de un modal (galerías de
        miniaturas, tiras de chips) hacía crecer el modal completo en
        lugar de desplazarse dentro de su propia caja. */
  .modal-box { max-width: 100%; }
  .gallery-masonry { max-width: 100%; }
}

@media (max-width: 380px) {
  /* Teléfonos muy angostos (iPhone SE y similares): un escalón más, sin
     bajar de tamaños ilegibles. */
  .modal-overlay { padding: 12px 8px; }
  .modal-body { padding: 16px 12px; }
  .modal-body h2 { font-size: 1.05rem; }
  .product-modal__specs { gap: 7px; }
}