/* ZihWeb Directory - listado de negocios (colocar en lib/directory.css)
   Prefijo .zwd- para no chocar con Bootstrap 3. Hereda el color de texto y el fondo del sitio:
   funciona igual en plantillas claras u oscuras.
   Lista, tarjeta y paginador miden en em, no en rem: Bootstrap 3 fija html{font-size:10px}. */

.zwd-list, .zwd-profile, .zwd-pager {
  --zwd-line: rgba(127, 127, 127, .3);
  --zwd-soft: rgba(127, 127, 127, .07);
  --zwd-accent: #d97706;
  --zwd-radius: 14px;
}
.zwd-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 19em), 1fr));
  gap: 1em;
  margin: 0 0 1.5em;
  padding: 0;
}

/* ---------- Tarjeta ---------- */
.zwd-card {
  position: relative;               /* el enlace del nombre cubre toda la tarjeta */
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--zwd-line);
  border-radius: var(--zwd-radius);
  background: var(--zwd-soft);
  transition: box-shadow .15s ease;
}
.zwd-card:hover { box-shadow: 0 6px 18px rgba(0, 0, 0, .14); }
@media (prefers-reduced-motion: no-preference) {
  .zwd-card { transition: box-shadow .15s ease, transform .15s ease; }
  .zwd-card:hover { transform: translateY(-2px); }
}
.zwd-card[data-premium="1"],
.zwd-card[data-premium="2"],
.zwd-card[data-premium="3"],
.zwd-card[data-premium="4"],
.zwd-card[data-premium="5"] { border-top: 3px solid var(--zwd-accent); }

/* ---------- Cabecera: foto del negocio (o tono suave) + logo en círculo ---------- */
.zwd-head {
  --zwd-logo: 5.5em;
  position: relative;
  flex: none;
  aspect-ratio: 16 / 7;
  margin-bottom: calc(var(--zwd-logo) / 2);          /* el círculo sobresale hacia el cuerpo */
  background: linear-gradient(135deg, hsl(var(--h, 200) 45% 88%), hsl(calc(var(--h, 200) + 40) 45% 80%));
}
.zwd-head--cover { background: rgba(127, 127, 127, .15); }
.zwd-cover {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
}
.zwd-card .zwd-logo {
  position: absolute;
  left: 1em;
  bottom: calc(var(--zwd-logo) / -2);
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--zwd-logo);
  height: var(--zwd-logo);
  overflow: hidden;
  border: 3px solid #fff;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .12), 0 1px 3px rgba(0, 0, 0, .08);   /* sombra tenue */
  text-decoration: none;
}
.zwd-logo img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  padding: 0;
  object-fit: cover;                       /* el logo llena todo el círculo (los logos son cuadrados de 200x200) */
}
.zwd-card .zwd-logo--empty {
  background: hsl(var(--h, 200) 42% 30%);   /* un color estable por negocio; texto blanco con contraste AA */
  color: #fff;
}
.zwd-logo--empty span {
  font-size: 2.25em;
  font-weight: 400;
  line-height: 1;
}

/* ---------- Cuerpo ---------- */
.zwd-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: .5em;
  padding: .9em 1em;
}
.zwd-card .zwd-name {
  margin: 0;
  font-size: 1.15em;
  font-weight: 600;
  line-height: 1.25;
  overflow-wrap: anywhere;
}
.zwd-name a::after {                /* tarjeta completa clicable */
  content: "";
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
}
/* g.css define .ndn { font-size: 1.3em; font-weight: bold }: aquí el tamaño lo manda el título */
.zwd-card .ndn { font-size: inherit; font-weight: inherit; }
/* g.css ya no fuerza a { text-decoration: none !important }: el nombre se subraya al pasar el cursor */
.zwd-name a:hover { text-decoration: underline; text-underline-offset: .15em; }

.zwd-badge {
  display: inline-block;
  padding: .1em .5em;
  border-radius: 999px;
  background: #b45309;              /* blanco sobre #b45309: contraste 5:1 */
  color: #fff;
  font-size: .68em;
  font-weight: 700;
  line-height: 1.4;
  vertical-align: middle;
}
.zwd-badge--upd { background: #0b6a8f; }

.zwd-card .zwd-where {
  display: flex;
  gap: .4em;
  margin: 0;
  font-size: .9em;
  opacity: .85;
}
.zwd-i {
  flex: none;
  width: 1em;
  height: 1em;
  margin-top: .2em;
  fill: currentColor;
}

/* Etiquetas de categoría: chips con contorno (lnkCat(): .zwd-tag; aquí sin relleno ni icono) */
.zwd-tags { display: flex; flex-wrap: wrap; gap: .35em; }
.zwd-tags:empty, .zwd-meta:empty { display: none; }
.zwd-tags .zwd-tag {
  display: inline-block;
  padding: .2em .65em;
  border: 1px solid var(--zwd-line);
  border-radius: 999px;
  background: transparent;
  color: inherit;
  font-size: .78em;
  font-weight: 500;
  line-height: 1.3;
  text-decoration: none;
}
.zwd-tags .zwd-tag:hover { border-color: currentColor; }
.zwd-tags .zwd-ico { display: none; }

.zwd-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .4em .9em;
  font-size: .9em;
}

/* Teléfonos (lnkPhone) y servicios (placeAmenities): botones compactos que se acomodan al ancho */
.zwd-meta .btn-group { display: inline-flex; flex-wrap: wrap; }
.zwd-meta .btn { padding: .3em .6em; font-size: .9em; line-height: 1.3; }
.zwd-meta .btn img { width: 1.4em; height: auto; }

/* Servicios (placeAmenities): icono de trazo + nombre. En tarjetas y listados, solo el icono (el nombre queda
   para lectores de pantalla y en el title). Sin prefijo de contenedor: también los usa la lista antigua (.phone). */
.zwd-amen { display: flex; flex-wrap: wrap; gap: .4em; margin: 0; padding: 0; list-style: none; }
.zwd-amen li {
  display: inline-flex;
  align-items: center;
  gap: .45em;
  padding: .3em .75em .3em .55em;
  border: 1px solid var(--zwd-line, rgba(127, 127, 127, .3));
  border-radius: 999px;
  font-size: .88em;
  line-height: 1.3;
}
.zwd-amen svg {
  flex: none;
  width: 1.3em;
  height: 1.3em;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.zwd-card .zwd-amen, .phone .zwd-amen { display: inline-flex; gap: .25em; vertical-align: middle; }
.zwd-card .zwd-amen li, .phone .zwd-amen li { padding: .3em; font-size: 1em; }
.zwd-card .zwd-amen span, .phone .zwd-amen span {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.zwd-rate { letter-spacing: .05em; }

/* Lo interactivo va por encima del enlace que cubre la tarjeta */
.zwd-tags, .zwd-meta, .zwd-foot, .zwd-admin, .zwd-where a { position: relative; z-index: 1; }

/* ---------- Pie ---------- */
.zwd-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5em;
  padding: .55em 1em;
  border-top: 1px solid var(--zwd-line);
  font-size: .85em;
}
/* Acotado al pie: .zwd-stats también es la rejilla del panel de estadísticas (más abajo) */
.zwd-foot .zwd-stats { display: flex; flex-wrap: wrap; align-items: center; gap: .25em .75em; min-width: 0; opacity: .85; }
.zwd-foot .zwd-stats > * { white-space: nowrap; }
.zwd-views { display: inline-flex; align-items: center; gap: .3em; }
.zwd-views .zwd-i { margin-top: 0; }
.zwd-short { margin-left: auto; opacity: .75; }

.zwd-admin {
  display: flex;
  flex-wrap: wrap;
  gap: .25em .75em;
  padding: .5em 1em;
  border-top: 1px dashed var(--zwd-line);
  font-size: .8em;
}

/* ---------- Teléfonos: cabecera más baja y círculo un poco menor ---------- */
@media (max-width: 599px) {
  .zwd-head { --zwd-logo: 4.75em; aspect-ratio: 3 / 1; }
}

/* ---------- Categorías principales (primera página del directorio) ---------- */
.zwd-cats {
  --zwd-line: rgba(127, 127, 127, .3);
  margin: 0 0 1.5em;
}
.zwd-cats .zwd-cats-title {
  margin: 0 0 .6em;
  font-size: .85em;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  opacity: .75;
}
.zwd-cats ul {
  display: flex;
  flex-wrap: wrap;
  gap: .5em;
  margin: 0;
  padding: 0;
  list-style: none;
}
.zwd-cats a {
  display: inline-flex;
  align-items: center;
  min-height: 2.5em;                 /* objetivo táctil cómodo */
  padding: .35em .95em;
  border: 1px solid var(--zwd-line);
  border-radius: 999px;
  color: inherit;
  font-weight: 500;
  text-decoration: none;
  transition: border-color .15s ease, background-color .15s ease;
}
.zwd-cats a:hover { border-color: currentColor; background: rgba(127, 127, 127, .07); text-decoration: none; }
.zwd-cats a:focus-visible { outline: 3px solid var(--g-accent, #0b6fd6); outline-offset: 2px; }
.zwd-cats .zwd-cats-all { border-style: dashed; }
@media (max-width: 599px) {                 /* teléfonos: una sola fila deslizable en vez de 4 renglones */
  .zwd-cats ul { flex-wrap: nowrap; overflow-x: auto; padding-bottom: .35em; scrollbar-width: thin; }
  .zwd-cats a { white-space: nowrap; }
}

/* ---------- Lista de categorías (lstGiro): tarjetas en columnas, orden alfabético de arriba abajo ---------- */
.zwd-giro {
  --zwd-line: rgba(127, 127, 127, .3);
  --zwd-soft: rgba(127, 127, 127, .07);
  position: relative;
  margin: 0 0 1.5em;
  text-align: left;
}
.zwd-giro-search { max-width: 26em; margin: 0 auto 1.25em; }
.zwd-giro-search input { height: 2.75em; border-radius: 999px; padding: 0 1.1em; }
.zwd-giro-none { text-align: center; opacity: .7; }
.zwd-giro [hidden] { display: none !important; }   /* el buscador oculta categorías y subcategorías con hidden */
/* g.css: .lcat, .lscat, .lscat h4 { display: inline-block; text-align: center } */
.zwd-giro .lcat, .zwd-giro .lscat { display: block; text-align: left; }
.zwd-giro .zwd-n {
  display: inline-block;
  min-width: 1.9em;
  margin-left: .35em;
  padding: .05em .45em;
  border-radius: 999px;
  background: var(--zwd-soft);
  font-size: .72em;
  font-weight: 500;
  line-height: 1.5;
  text-align: center;
  vertical-align: .15em;
  opacity: .8;
}
.zwd-giro a { color: inherit; text-decoration: none; }
.zwd-giro a:hover { text-decoration: underline; }
.zwd-giro a:focus-visible { outline: 3px solid var(--g-accent, #0b6fd6); outline-offset: 2px; border-radius: 4px; }
.zwd-giro .zwd-empty { opacity: .55; }

.zwd-giro-grid { columns: 15em; column-gap: 1.25em; }
.zwd-giro-grid .zwd-giro-cat {
  break-inside: avoid;
  margin: 0 0 1.25em;
  padding: .9em 1.1em;
  border: 1px solid var(--zwd-line);
  border-radius: var(--zwd-radius, 14px);
}
.zwd-giro-grid h3 { margin: 0; font-size: 1.1em; font-weight: 700; line-height: 1.3; }
.zwd-giro-grid .lscat { margin: .6em 0 0; padding: .6em 0 0; border-top: 1px solid var(--zwd-line); list-style: none; }
.zwd-giro-grid .lscat li { padding: .2em 0; font-size: .92em; line-height: 1.35; }

/* Sin subcategorías: botones como .zwd-cats */
.zwd-giro--chips { display: flex; flex-wrap: wrap; gap: .5em; }
.zwd-giro--chips .zwd-giro-cat { margin: 0; }
.zwd-giro--chips h3 {
  display: inline-flex;
  align-items: center;
  min-height: 2.5em;
  margin: 0;
  padding: .35em .95em;
  border: 1px solid var(--zwd-line);
  border-radius: 999px;
  font-size: 1em;
  font-weight: 500;
  transition: border-color .15s ease, background-color .15s ease;
}
.zwd-giro--chips h3:hover { border-color: currentColor; background: var(--zwd-soft); }
.zwd-giro--chips h3 a:hover { text-decoration: none; }
.zwd-giro-edit { position: absolute; top: 0; right: 0; }

/* ---------- Banner publicitario: ocupa todo el ancho de la cuadrícula ---------- */
.zwd-banner { grid-column: 1 / -1; text-align: center; }

/* ---------- Accesibilidad ---------- */
.zwd-card a:focus-visible {
  outline: 3px solid var(--g-accent, #0b6fd6);
  outline-offset: 2px;
  border-radius: 4px;
}
.zwd-card:focus-within { box-shadow: 0 0 0 2px var(--g-accent, #0b6fd6); }

/* ============================================================
   Paginación  (nav.zwd-pager)
   ============================================================ */
.zwd-pager {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .5em 1em;
  margin: 1.5em 0;
}
.zwd-pager .zwd-pager-info { margin: 0; font-size: .85em; opacity: .8; }
.zwd-pager ul { display: flex; flex-wrap: wrap; gap: .35em; margin: 0; padding: 0; list-style: none; }
.zwd-pager li { margin: 0; padding: 0; }
.zwd-pager a, .zwd-pager [aria-current] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.5em;
  height: 2.5em;
  padding: 0 .65em;
  border: 1px solid var(--zwd-line);
  border-radius: 10px;
  color: inherit;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.zwd-pager a:hover { border-color: currentColor; background: var(--zwd-soft); }
.zwd-pager a:focus-visible { outline: 3px solid var(--g-accent, #0b6fd6); outline-offset: 2px; }
.zwd-pager [aria-current="page"] {
  border-color: var(--g-accent, #0b6fd6);
  background: var(--g-accent, #0b6fd6);   /* acento del tema (g.css); fallback azul: blanco encima 4.9:1 */
  color: #fff;
  font-weight: 700;
}
.zwd-pager .zwd-gap { display: flex; align-items: center; padding: 0 .25em; opacity: .6; }

/* ============================================================
   Ficha del negocio  (section.zwd-profile)
   ============================================================ */
/* Encabezado = la tarjeta del listado en grande: portada arriba, logo en círculo montado sobre su borde inferior
   y el nombre a su lado. --zwd-hlogo: diámetro del logo; la mitad sobresale de la portada. */
.zwd-profile .zwd-hero {
  --zwd-hlogo: 8.5em;
  margin: 0 0 1.25em;
}

/* ---------- Portada (coverBand) ---------- */
.zwd-band {
  position: relative;
  overflow: hidden;
  width: 100%;                              /* con aspect-ratio + max-height el ancho se encogía */
  aspect-ratio: 12 / 5;
  max-height: 26em;
  border-radius: var(--zwd-radius);
  background: linear-gradient(135deg, hsl(var(--h, 200) 45% 88%), hsl(calc(var(--h, 200) + 40) 45% 80%));
}
.zwd-band--plain { aspect-ratio: auto; height: 7.5em; }   /* sin fotos: franja de color, como .zwd-head */
.zwd-slides img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  opacity: 0;
}
.zwd-slides img.is-on { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  .zwd-slides img { transition: opacity .9s ease; }
}
/* Controles abajo a la derecha: el logo ocupa la esquina izquierda */
.zwd-band-ctl {
  position: absolute;
  right: .75em;
  bottom: .75em;
  display: flex;
  align-items: center;
  gap: .25em;
  padding: .2em .35em;
  border-radius: 999px;
  background: rgba(0, 0, 0, .45);
  color: #fff;
}
.zwd-play {
  display: grid;
  place-items: center;
  width: 2em;
  height: 2em;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: inherit;
  cursor: pointer;
}
.zwd-play svg { width: 1.1em; height: 1.1em; fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.zwd-play .zwd-i-play, .zwd-band.is-paused .zwd-play .zwd-i-pause { display: none; }
.zwd-band.is-paused .zwd-play .zwd-i-play { display: block; fill: currentColor; }
.zwd-dots { display: flex; }
.zwd-dots button {                          /* punto de 8px dentro de un área táctil de 24px */
  width: 1.5em;
  height: 1.5em;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.zwd-dots button::before {
  content: "";
  display: block;
  width: .5em;
  height: .5em;
  margin: auto;
  border-radius: 50%;
  background: rgba(255, 255, 255, .55);
}
.zwd-dots button[aria-current="true"]::before { background: #fff; transform: scale(1.3); }
.zwd-play:focus-visible, .zwd-dots button:focus-visible { outline: 2px solid #fff; outline-offset: 1px; }

/* ---------- Logo + nombre ---------- */
.zwd-hero-body {
  display: flex;
  align-items: flex-start;
  gap: 1.25em;
  padding: 0 0 0 1.25em;
}
.zwd-hero-logo {
  position: relative;                       /* encima de la portada */
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: var(--zwd-hlogo);
  aspect-ratio: 1;
  margin-top: calc(var(--zwd-hlogo) / -2);
  overflow: hidden;
  border: 4px solid #fff;
  border-radius: 50%;                       /* círculo, como en las tarjetas del listado */
  background: #fff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .12), 0 1px 3px rgba(0, 0, 0, .08);
}
.zwd-hero-logo img { display: block; width: 100%; height: 100%; max-width: none; padding: 0; object-fit: cover; }   /* llena el círculo, como en las tarjetas */
.zwd-hero-logo.zwd-logo--empty { background: hsl(var(--h, 200) 42% 30%); color: #fff; }
.zwd-hero-logo.zwd-logo--empty span { font-size: 3.5em; line-height: 1; }
.zwd-hero-main { flex: 1; min-width: 0; padding-top: .9em; }
.zwd-hero .fltRgt { padding-top: .9em; }
.zwd-hero .zwd-tags { margin: 0 0 .6em; }
.zwd-profile .zwd-meta { margin: 0; font-size: .9em; opacity: .9; }

/* Sitio del negocio en el encabezado: botón con el dominio, o los botones de remSocial() si es red social */
.zwd-hero-links:empty { display: none; }
.zwd-hero-links { margin-top: .75em; }
.zwd-web {
  display: inline-flex;
  align-items: center;
  gap: .45em;
  min-height: 2.5em;
  padding: .35em 1em;
  border: 1px solid var(--zwd-line);
  border-radius: 999px;
  color: inherit;
  font-weight: 600;
  text-decoration: none;
  overflow-wrap: anywhere;
}
.zwd-web:hover, .zwd-web:focus-visible { border-color: currentColor; background: var(--zwd-soft); text-decoration: none; }
.zwd-web:focus-visible { outline: 3px solid var(--g-accent, #0b6fd6); outline-offset: 2px; }
.zwd-web .zwd-i { margin: 0; }
/* remSocial(): los iconos los pone la plantilla (.smlinks .fb, .ig…); aquí solo el acomodo en fila */
.zwd-hero-links .smlinks ul { display: flex; flex-wrap: wrap; gap: .5em; margin: 0; padding: 0; list-style: none; }
.zwd-hero-links .smlinks li { float: none; margin: 0; }
.zwd-profile .zwd-meta .zwd-short { margin-left: 0; }
/* Teléfonos: portada más alta (16:10), logo menor y el nombre debajo del logo, alineado a la izquierda */
@media (max-width: 47.9em) {
  .zwd-band { aspect-ratio: 16 / 10; }
  .zwd-band--plain { aspect-ratio: auto; height: 5.5em; }
  .zwd-profile .zwd-hero { --zwd-hlogo: 6.5em; }
}
@media (max-width: 30em) {
  .zwd-hero-body { flex-wrap: wrap; gap: 0 1em; padding-left: 1em; }
  .zwd-hero-main { flex-basis: 100%; order: 3; padding-top: .6em; }
  .zwd-hero .fltRgt { margin-left: auto; }
}

.zwd-profile { clear: both; }

/* Pestañas propias (sin Bootstrap; el script va en getListing()): chips con subrayado de acento en la activa.
   En móvil se desplazan en horizontal en vez de partirse en varias líneas. */
.zwd-tabs {
  display: flex;
  gap: .35em;
  margin: 0 0 1.25em;
  padding: 0 0 .1em;
  list-style: none;
  border-bottom: 1px solid var(--zwd-line);
  overflow-x: auto;
  scrollbar-width: thin;
}
.zwd-tabs > li { flex: none; margin: 0; }
.zwd-tabs > li > a {
  display: inline-flex;
  align-items: center;
  gap: .4em;
  padding: .65em 1em;
  border: 0;
  border-bottom: 3px solid transparent;
  border-radius: 10px 10px 0 0;
  color: inherit;
  text-decoration: none;
  white-space: nowrap;
  opacity: .75;
  transition: background-color .15s, border-color .15s, opacity .15s;
}
.zwd-tabs > li > a:hover { background: var(--zwd-soft); opacity: 1; }
.zwd-tabs > li > a:focus-visible { outline: 2px solid var(--zwd-accent); outline-offset: -2px; }
.zwd-tabs > li.active > a, .zwd-tabs > li > a[aria-selected="true"] { border-bottom-color: var(--zwd-accent); opacity: 1; }
.zwd-tabs .zwd-i { margin-top: 0; }
.zwd-tabs strong { font-weight: 600; }
/* flow-root contiene los float (col-*) del contenido de las pestañas: sin esto el panel se colapsa y
   .zwd-facts (grid = nuevo contexto de formato) se acomoda al lado del float en vez de debajo */
.zwd-panels { margin: 0 0 1.5em; display: flow-root; }
.zwd-panels > .tab-pane { display: none; opacity: 1; }
.zwd-panels > .tab-pane.active { display: flow-root; }
@media (prefers-reduced-motion: no-preference) {
  .zwd-panels > .tab-pane.active { animation: zwdIn .2s ease-out; }
}
@keyframes zwdIn { from { opacity: 0; } }
.zwd-facts { clear: both; }
.zwd-contact { max-width: 32em; margin: 0 auto; }
.zwd-maplink { margin: .6em 0 0; font-size: .9em; text-align: center; }
.zwd-maplink a { display: inline-flex; align-items: center; gap: .35em; }
.zwd-maplink .zwd-i { margin-top: 0; }
.zwd-edit { display: inline-flex; padding: .4em; border-radius: 50%; color: inherit; opacity: .6; }
.zwd-edit:hover, .zwd-edit:focus-visible { background: var(--zwd-soft); opacity: 1; }
.zwd-edit .zwd-i { margin-top: 0; width: 1.2em; height: 1.2em; }
.zwd-phones { display: flex; flex-wrap: wrap; gap: .4em .75em; }

/* Teléfono / WhatsApp / Telegram (Directory::lnkPhone()): botones con contorno, el de WhatsApp y Telegram con su color */
.zwd-tel {
  display: inline-flex;
  align-items: center;
  gap: .4em;
  margin: .15em .3em .15em 0;
  padding: .45em .9em;
  border: 1px solid var(--zwd-line, rgba(127, 127, 127, .3));
  border-radius: 999px;
  color: inherit;
  font-size: .95em;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  vertical-align: middle;
  transition: background-color .15s, border-color .15s;
}
.zwd-tel:hover { background: var(--zwd-soft, rgba(127, 127, 127, .07)); text-decoration: none; color: inherit; }
.zwd-tel:focus-visible { outline: 2px solid var(--zwd-accent, #d97706); outline-offset: 2px; }
.zwd-tel-i { flex: none; width: 1.1em; height: 1.1em; }
.zwd-tel--sm { padding: .3em .7em; font-size: .85em; }
.zwd-tel--wa .zwd-tel-i { color: #25d366; }
.zwd-tel--tg .zwd-tel-i { color: #229ed9; }
.zwd-tel--wa:hover { border-color: #25d366; }
.zwd-tel--tg:hover { border-color: #229ed9; }

/* Validación de cupón (app) */
.zwd-kupon { display: flex; max-width: 14em; margin: 1em auto 0; border: 1px solid var(--zwd-line); border-radius: 999px; overflow: hidden; }
.zwd-kupon input { flex: 1; min-width: 0; padding: .4em .8em; border: 0; background: transparent; color: inherit; font: inherit; font-size: 1.6em; text-align: center; letter-spacing: .15em; -webkit-text-security: disc; }
.zwd-kupon input:focus { outline: none; }
.zwd-kupon button { display: grid; place-items: center; padding: 0 1em; border: 0; background: #198754; color: #fff; cursor: pointer; }
.zwd-kupon .zwd-i { margin-top: 0; width: 1.4em; height: 1.4em; }
.zwd-kupon:focus-within { box-shadow: 0 0 0 3px rgba(25, 135, 84, .3); }

/* Compartir / insertar */
.zwd-share-grid { display: grid; repeat(auto-fit, minmax(13em, 1fr)); gap: 1em; align-items: end; margin-bottom: .75em; }
.zwd-share-short { align-self: center; text-align: center; }
.zwd-copy label { display: block; margin: 0 0 .3em; font-size: .85em; font-weight: 400; opacity: .75; }
.zwd-copy-row { display: flex; border: 1px solid var(--zwd-line); border-radius: 10px; overflow: hidden; }
.zwd-copy input { flex: 1; min-width: 0; padding: .5em .7em; border: 0; background: var(--zwd-soft); color: inherit; font: .85em/1.4 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; text-overflow: ellipsis; }
.zwd-copy input:focus { outline: none; }
.zwd-copy-row:focus-within { border-color: var(--zwd-accent); }
.zwd-copy-btn { display: inline-flex; align-items: center; gap: .35em; padding: 0 .9em; border: 0; border-left: 1px solid var(--zwd-line); background: transparent; color: inherit; font: inherit; font-size: .85em; cursor: pointer; white-space: nowrap; }
.zwd-copy-btn:hover { background: var(--zwd-soft); }
.zwd-copy-btn:focus-visible { outline: 2px solid var(--zwd-accent); outline-offset: -2px; }
.zwd-copy-btn.is-done { color: #198754; }
.zwd-copy-btn .zwd-i { margin-top: 0; }

/* Mapa con lugares cercanos + negocios de la misma categoría */
.zwd-more { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 20em), 1fr)); gap: 1.5em; margin: 0 0 1.5em; }
.zwd-more-title { grid-column: 1 / -1; margin: 0; text-align: center; font-size: 1.1em; opacity: .7; }
.zwd-more #map-container { border-radius: var(--zwd-radius); }
.zwd-desc { overflow-wrap: anywhere; line-height: 1.6; }
.zwd-desc img { max-width: 100%; height: auto; }

.zwd-share { margin: 0 0 1.5em; padding: 1em 1em .25em; border: 1px solid var(--zwd-line); border-radius: var(--zwd-radius); }
.zwd-share-title { margin: 0 0 .75em; text-align: center; opacity: .85; }
.zwd-profile .zwd-title {
  margin: 0 0 .6em;
  font-size: clamp(1.6em, 4vw, 2.4em);
  line-height: 1.15;
  overflow-wrap: anywhere;
}

.zwd-facts { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5em; margin: 0 0 1.5em; }
@media (min-width: 48em) {
  .zwd-facts { grid-template-columns: minmax(0, 2fr) minmax(12em, 1fr); align-items: start; }
}
.zwd-profile .zwd-dl { margin: 0; border-top: 1px solid var(--zwd-line); }
.zwd-profile .zwd-row {
  display: grid;
  grid-template-columns: 7em minmax(0, 1fr);
  gap: .75em;
  padding: .75em 0;
  border-bottom: 1px solid var(--zwd-line);
}
.zwd-profile .zwd-row dt { margin: 0; font-size: .9em; font-weight: 400; opacity: .75; }
.zwd-profile .zwd-row dd { margin: 0; overflow-wrap: anywhere; }
.zwd-profile .zwd-row .form-group { margin-bottom: .25em; }
@media (max-width: 30em) {
  .zwd-profile .zwd-row { grid-template-columns: minmax(0, 1fr); gap: .15em; }
}

.zwd-side {
  padding: 1em;
  border: 1px solid var(--zwd-line);
  border-radius: var(--zwd-radius);
  background: var(--zwd-soft);
  text-align: center;
}
.zwd-side p { margin: .5em 0 0; }
.zwd-qr { display: flex; justify-content: center; }
.zwd-qr img, .zwd-qr canvas { max-width: 100%; height: auto; }

.zwd-profile .zwd-admin { margin: 0 0 1.5em; border: 1px dashed var(--zwd-line); border-radius: 10px; }
.zwd-profile .zwd-tags, .zwd-profile .zwd-meta, .zwd-profile .zwd-admin { position: static; }   /* en la ficha no hay enlace que cubra */

/* ---------- Store (directory_tienda.php) ---------- */
.zwt-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));   /* 3 por fila; minmax(0,..) evita que un título largo ensanche la columna */
  gap: 1.25rem;
  margin: 0 0 1.5rem;
  padding: 0;
  list-style: none;
}
@media (max-width: 35.9rem) {              /* teléfonos: 3 columnas quedarían de ~110px */
  .zwt-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
}
.zwt-card {
  display: flex;
  flex-direction: column;
  gap: .75rem;
  padding: .75rem .75rem 1rem;
  text-align: center;
  background: #fff;
  border: 1px solid var(--g-line);
  border-radius: 12px;
  transition: transform .25s var(--g-ease), box-shadow .25s var(--g-ease), border-color .25s;
}
@media (hover: hover) {
  .zwt-card:hover { transform: translateY(-3px); border-color: var(--g-accent); box-shadow: 0 12px 28px rgba(0, 0, 0, .1); }
}
.zwt-link { display: flex; flex: 1; flex-direction: column; gap: .5rem; color: var(--g-ink); }
.zwt-link:hover, .zwt-link:focus-visible { color: var(--g-ink); }
.zwt-link:focus-visible { outline: 2px solid var(--g-accent); outline-offset: 2px; border-radius: 8px; }
.zwt-img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: 8px; background: #f0f0f0; }
.zwt-noimg { background: linear-gradient(135deg, #f0f0f0, #e2e2e2); }
.zwt-title {
  display: -webkit-box;
  min-height: 2.6em; /* two lines, so prices align across a row */
  margin: 0;
  overflow: hidden;
  font-size: 1rem;
  line-height: 1.3;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}
.zwt-price { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: .1rem .5rem; }
.zwt-now { font-size: 1.15em; font-weight: 700; }
.zwt-cur, .zwt-was { font-size: .85em; color: var(--g-faint); }
.zwt-add { align-self: stretch; }
/* Gestor de productos (prodManager) */
.zwp-manager { display: grid; gap: 2rem; max-width: 960px; margin: 0 auto; }
.zwp-mhead { display: grid; gap: .35rem; justify-items: start; padding-bottom: 1rem; border-bottom: 1px solid #e5e7eb; }
.zwp-mhead h1 { margin: 0; }
.zwp-sub { margin: 0 0 .75rem; color: #6b7280; }
.zwp-sec h2 { margin: 0 0 .25rem; font-size: 1.35em; }
.zwp-off { display: inline-block; padding: 0 .45em; border-radius: 999px; background: #fef3c7; color: #92400e; font-size: .75em; font-weight: 600; vertical-align: .15em; }

/* WhatsApp order button (cards and product page). White on #157347 is 5.4:1. */
.zwt-wa { background: #157347; border-color: #146c43; color: #fff; font-weight: 600; }
.zwt-wa:hover, .zwt-wa:focus-visible { background: #0f5c37; border-color: #0d4f2f; color: #fff; text-decoration: none; }
.zwt-wa:focus-visible { outline: 3px solid var(--g-accent, #0b6fd6); outline-offset: 2px; }

.zwt-media { margin: 0 0 1rem; }
.zwt-media img { display: block; max-width: 100%; height: auto; margin: 0 auto; border-radius: 12px; }
.zwt-meta { margin: 0 0 1rem; }
.zwt-price-lg { float: right; margin: 0 0 1rem 1rem; text-align: right; }
.zwt-price-lg .zwt-price { justify-content: flex-end; }
.zwt-price-lg .zwt-now { font-size: 2rem; }
.zwt-buy { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; clear: both; margin: 1rem 0; }
.zwt-qty { width: 5.5rem; }
.zwt-seller { margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--g-line); }
.zwt-seller-logo { padding-top: 2rem; }
.zwt-comments { clear: both; margin-top: 2rem; }
.zwt-related { margin-top: 2.5rem; }

/* ============================================================
   Menú de cabecera  (nav.zwd-headmenu, trait ZwHeadMenu en ext/headmenu.php)
   ============================================================ */
.zwd-headmenu {
  --zwd-line: rgba(127, 127, 127, .3);
  --zwd-soft: rgba(127, 127, 127, .07);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .6em 1em;
  margin: 0 0 1.5em;
  padding: .5em;
  border: 1px solid var(--zwd-line);
  border-radius: 14px;
  background: var(--zwd-soft);
}
.zwd-headmenu-links { display: flex; flex-wrap: wrap; gap: .35em; margin: 0; padding: 0; list-style: none; }
.zwd-headmenu-links li { margin: 0; padding: 0; }
.zwd-headmenu-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .45em;
  min-width: 2.75em;              /* objetivo táctil >= 44px con texto de 16px */
  height: 2.75em;
  padding: 0 .9em;
  border: 1px solid transparent;
  border-radius: 999px;
  color: inherit;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
}
.zwd-headmenu-link .glyphicon { top: 0; }
.zwd-headmenu-link:hover, .zwd-headmenu-link:focus { border-color: var(--zwd-line); background: var(--zwd-soft); color: inherit; text-decoration: none; }
.zwd-headmenu-link:focus-visible { outline: 3px solid var(--g-accent, #0b6fd6); outline-offset: 2px; }
.zwd-headmenu-link[aria-current="page"] {
  border-color: var(--g-accent, #0b6fd6);
  background: var(--g-accent, #0b6fd6);   /* mismo tratamiento que .zwd-pager: blanco sobre el acento */
  color: #fff;
}

/* Herramientas: búsqueda (solo sin aside) y ciudad, alineadas a la derecha */
.zwd-headmenu-tools { display: flex; flex-wrap: wrap; align-items: center; gap: .5em; flex: 1 1 auto; justify-content: flex-end; min-width: 0; }
.zwd-headmenu .zwd-input, .zwd-headmenu .form-control { height: 2.75em; border-radius: 10px; }
.zwd-headsearch { position: relative; flex: 1 1 16em; max-width: 24em; margin: 0; }
.zwd-headsearch .zw-search { max-width: none; }
.zwd-headsearch .zw-search input { height: 2.75em; font-size: 1em; }
.zwd-headcity { flex: 0 1 15em; min-width: 0; margin: 0; font-weight: inherit; }
.zwd-headcity select { width: 100%; }

/* Móvil: solo iconos en los enlaces; las herramientas ocupan el ancho completo */
@media (max-width: 599px) {
  .zwd-headmenu-link { padding: 0; }
  .zwd-headmenu-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .zwd-headmenu-tools, .zwd-headsearch, .zwd-headcity { flex-basis: 100%; max-width: none; }
}

/* Texto solo para lectores de pantalla (no depende de .sr-only de Bootstrap) */
.zwd-vh { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
@media (prefers-reduced-motion: no-preference) {
  .zwd-headmenu-link { transition: background-color .15s ease, border-color .15s ease; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}
/* ============================================================
   Business Center  (panel del dueño del negocio, /d/bc/)
   Prefijo .zwbc- ; usa los mismos tokens que .zwd- (abajo se definen por si se carga solo)
   ============================================================ */
.zwbc {
  --zwbc-line: rgba(127, 127, 127, .25);
  --zwbc-soft: rgba(127, 127, 127, .06);
  --zwbc-accent: var(--zwd-accent, #d97706);
  --zwbc-radius: 14px;
  max-width: 60em;
  margin: 0 auto 2em;
}

/* Encabezado */
.zwbc-head { margin: 0 0 1.5em; padding-bottom: 1em; border-bottom: 1px solid var(--zwbc-line); }
.zwbc-eyebrow { margin: 0; font-size: .85em; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--zwbc-accent); }
.zwbc .zwbc-title { margin: .1em 0 .15em; font-size: clamp(1.6em, 4vw, 2.1em); line-height: 1.15; }
.zwbc-head small { font-size: 1em; opacity: .75; }
.zwbc-head small a { opacity: .7; }

/* Rejilla de acciones */
.zwbc-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: .85em;
}
@media (min-width: 560px) { .zwbc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.zwbc-card {
  display: flex;
  align-items: center;
  gap: 1em;
  padding: 1em 1.1em;
  border: 1px solid var(--zwbc-line);
  border-radius: var(--zwbc-radius);
  background: var(--zwbc-soft);
  color: inherit;
  text-decoration: none;
}
.zwbc-card:hover, .zwbc-card:focus {
  border-color: var(--zwbc-accent);
  color: inherit;
  text-decoration: none;
  box-shadow: 0 6px 18px -10px rgba(0, 0, 0, .4);
  transform: translateY(-1px);
}
.zwbc-card:focus-visible { outline: 3px solid var(--zwbc-accent); outline-offset: 2px; }
.zwbc-card-icon {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.8em;
  height: 2.8em;
  border-radius: 12px;
  background: color-mix(in srgb, var(--zwbc-accent) 15%, transparent);
  color: var(--zwbc-accent);
  font-size: 1.1em;
}
.zwbc-card-body { display: flex; flex-direction: column; gap: .15em; min-width: 0; }
.zwbc-card-title { font-size: 1.05em; line-height: 1.25; }
.zwbc-card-text { font-size: .9em; opacity: .72; line-height: 1.35; }
.zwbc-card-go { flex: none; margin-left: auto; opacity: .4; font-size: .9em; }
.zwbc-card:hover .zwbc-card-go { opacity: .9; color: var(--zwbc-accent); }

@media (prefers-reduced-motion: no-preference) {
  .zwbc-card { transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease; }
}

/* Uso de almacenamiento (volume()) */
.zwbc-storage { margin-top: 1.75em; }

/* Subsecciones: enlace de regreso */
.zwbc-back {
  display: inline-flex;
  align-items: center;
  gap: .35em;
  margin: 0 0 1em;
  padding: .45em .9em;
  border: 1px solid var(--zwbc-line);
  border-radius: 999px;
  font-weight: 600;
  text-decoration: none;
}
.zwbc-back:hover, .zwbc-back:focus { border-color: var(--zwbc-accent); color: var(--zwbc-accent); text-decoration: none; }
.zwbc-back--bottom { margin: 1.5em 0 0; }
.zwbc-sub .zwd-pagehead { margin-top: 0; }

/* ============================================================
   File Manager del Business Center  (/d/bc/<clave>/files)
   Prefijo .zwfm- ; usa los tokens de .zwbc
   ============================================================ */
.zwbc .zwfm-section { margin: 0 0 2em; }
.zwfm-h { margin: 0 0 .4em; font-size: 1.25em; }
.zwfm-desc { margin: 0 0 1em; opacity: .75; font-size: .95em; }
.zwfm-desc small { opacity: .8; }

/* Logo */
.zwfm-logo { display: flex; flex-wrap: wrap; gap: 1.25em; align-items: flex-start; margin: 0; }
.zwfm-logo-current { flex: none; }
.zwfm-logo-current img,
.zwfm-logo-empty {
  display: block; width: 160px; height: 160px; border-radius: var(--zwbc-radius);
  object-fit: cover; border: 1px solid var(--zwbc-line); background: var(--zwbc-soft);
}
.zwfm-logo-empty { background: var(--zwbc-soft) center / 60% no-repeat; opacity: .45; }
.zwfm-logo-form { flex: 1 1 18em; min-width: 0; }
/* La zona entera es el <label> del input: clic, teclado (foco en el input) y arrastrar */
.zwfm-logo-drop {
  position: relative; display: flex; align-items: center; gap: 1em; min-height: 160px; margin: 0;
  padding: 1em 1.25em; border: 2px dashed var(--zwbc-line); border-radius: var(--zwbc-radius);
  background: var(--zwbc-soft); font-weight: 400; cursor: pointer; transition: border-color .15s, background-color .15s;
}
.zwfm-logo-drop:hover,
.zwfm-logo-drop.is-over { border-color: var(--zwbc-accent); background: color-mix(in srgb, var(--zwbc-accent) 8%, transparent); }
.zwfm-logo-drop:focus-within { outline: 3px solid var(--zwbc-accent); outline-offset: 2px; }
.zwfm-logo-drop.has-file { border-style: solid; }
.zwfm-logo-drop-txt { display: flex; flex-direction: column; gap: .3em; min-width: 0; }
.zwfm-logo-drop-txt strong { overflow-wrap: anywhere; }
.zwfm-logo-drop-txt small { opacity: .7; }
.zwfm-logo-drop .zwfm-drop-ico { font-size: 1.6em; opacity: .6; }
.zwfm-logo-drop.has-file .zwfm-drop-ico { display: none; }
.zwfm-logo-prvw { flex: none; width: 120px; height: 120px; object-fit: cover; border-radius: 10px; border: 1px solid var(--zwbc-line); }
.zwfm-logo-prog { display: block; width: 100%; height: .4em; margin: .6em 0 0; accent-color: var(--zwbc-accent); }
.zwfm-logo-actions { display: flex; flex-wrap: wrap; gap: .5em; align-items: center; margin: .75em 0 0; }
.zwfm-logo-del { margin-left: auto; color: #b91c1c; }
.zwfm-logo .zwfm-status { margin: .6em 0 0; min-height: 1.4em; }
.zwfm-logo .zwfm-status:empty { display: none; }
.zwfm-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.zwfm-status { margin-left: .6em; }
.zwfm-ok { color: #15803d; font-weight: 600; }
.zwfm-warn { color: #b45309; font-weight: 600; }
.zwfm-err { color: #b91c1c; font-weight: 600; }
@media (max-width: 480px) {
  .zwfm-logo-current img, .zwfm-logo-empty { width: 96px; height: 96px; }
  .zwfm-logo-prvw { width: 72px; height: 72px; }
  .zwfm-logo-drop { min-height: 0; }
}

/* Zonas de arrastre */
.zwfm-drop.dropzone {
  min-height: 0; margin: 0 0 1em; padding: 1.5em;
  border: 2px dashed var(--zwbc-line); border-radius: var(--zwbc-radius);
  background: var(--zwbc-soft); text-align: center; cursor: pointer;
}
.zwfm-drop.dropzone:hover { border-color: var(--zwbc-accent); }
.zwfm-drop .dz-message { margin: 0; font-weight: 600; opacity: .8; }

/* Rejilla de miniaturas (dyn.zw?thumbs devuelve .zwg > a.zwg-item.tmb; antes .rows.thumbnails > .col-* > a.tmb).
   Aquí manda la rejilla compacta del gestor sobre las 2-3 columnas de .zwg (lib/g.css). */
.zwfm-grid .zwg,
.zwfm-grid .thumbnails { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 8rem), 1fr)); gap: .6em; margin: 0; }
.zwfm-grid .thumbnails > [class*="col-"] { width: auto; padding: 0; float: none; }
.zwfm-grid a.tmb { display: block; margin: 0; padding: .3em; border: 1px solid var(--zwbc-line); border-radius: 10px; background: var(--zwbc-soft); }
.zwfm-grid a.tmb.selected,
.zwfm-grid a.tmb:hover, .zwfm-grid a.tmb:focus { border-color: var(--zwbc-accent); }
.zwfm-grid a.tmb img { width: 100%; height: 6.5em; object-fit: cover; border-radius: 6px; }

/* Barra del archivo seleccionado */
.zwfm-filebar { display: flex; flex-wrap: wrap; align-items: center; gap: .4em; margin: .25em 0 0; }
.zwfm-filebar-label { font-size: .85em; font-weight: 600; opacity: .7; }
.zwfm-filebar .zwd-input { width: auto; flex: 1 1 10em; min-width: 0; }
@media (prefers-reduced-motion: no-preference) { .zwfm-grid a.tmb { transition: border-color .15s ease; } }

/* Cargador de una carpeta (uploadFiles(): imágenes de productos). Fuera de .zwbc (edit/prod) define sus tokens */
.zwfm-up {
  --zwbc-line: rgba(127, 127, 127, .25);
  --zwbc-soft: rgba(127, 127, 127, .06);
  --zwbc-accent: var(--zwd-accent, #d97706);
  --zwbc-radius: 14px;
  display: grid; gap: .75em; max-width: 60em; margin: 0 auto 1.5em;
}
.zwfm-up .zwfm-drop.dropzone { margin: 0; }
.zwfm-up .dz-message { display: grid; justify-items: center; gap: .3em; }
.zwfm-up .dz-message small { font-weight: 400; opacity: .75; }
.zwfm-drop-ico { font-size: 1.8em; opacity: .55; }
.zwfm-up .zwfm-drop.dz-drag-hover { border-color: var(--zwbc-accent); background: color-mix(in srgb, var(--zwbc-accent) 8%, transparent); }
.zwfm-up .zwfm-status { margin: 0; min-height: 1.4em; }
.zwfm-up .zwfm-status:empty { display: none; }
.zwfm-up-head { display: flex; align-items: center; justify-content: space-between; gap: .5em; }
.zwfm-up-head .zwfm-h { margin: 0; font-size: 1.1em; }
.zwfm-up .zwfm-grid[aria-busy="true"] { opacity: .6; }
.zwfm-up .zwfm-grid a.tmb.selected { box-shadow: 0 0 0 2px var(--zwbc-accent); }

/* Contención: ninguna subsección del Business Center desborda en pantallas estrechas */
.zwbc, .zwbc *, .zwfm-section, .zwfm-section * { max-width: 100%; }
.zwbc-storage, .zwfm-section { overflow-wrap: anywhere; }
.zwbc-storage em { white-space: normal; word-break: break-all; }

/* ============================================================
   Gestor de menús del Business Center  (/d/bc/<clave>/menu)
   Prefijo .zwmn- ; usa los tokens de .zwbc. También .zwmn-pages: el menú en fotos de la ficha pública.
   ============================================================ */
.zwmn { margin: 0 0 2em; }
.zwmn-drop {
  margin: 0 0 1em;
  padding: 1.75em 1.25em;
  border: 2px dashed var(--zwbc-line, rgba(127, 127, 127, .3));
  border-radius: var(--zwbc-radius, 14px);
  background: var(--zwbc-soft, rgba(127, 127, 127, .06));
  text-align: center;
}
.zwmn-drop.is-over { border-color: var(--zwbc-accent, #d97706); background: color-mix(in srgb, var(--zwbc-accent, #d97706) 8%, transparent); }
.zwmn-drop-icon { display: block; margin: 0 auto .4em; font-size: 2.2em; opacity: .55; }
.zwmn-drop p { margin: 0 0 .4em; }
.zwmn-choose { display: inline; margin: 0; font-weight: 700; color: var(--zwbc-accent, #d97706); text-decoration: underline; cursor: pointer; }
.zwmn-choose input { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.zwmn-choose:focus-within { outline: 3px solid var(--zwbc-accent, #d97706); outline-offset: 2px; border-radius: 4px; }
.zwmn-lang { display: inline-flex; align-items: center; gap: .5em; margin: .5em 0 0; font-weight: 600; font-size: .9em; }
.zwmn-lang select { width: auto; }
.zwmn.is-busy .zwmn-drop { opacity: .6; pointer-events: none; }

.zwmn-status:empty { display: none; }
.zwmn-status { margin: 0 0 1em; padding: .6em .9em; border-radius: 10px; background: var(--zwbc-soft, rgba(127, 127, 127, .06)); font-size: .95em; }
.zwmn-status--ok { color: #15803d; font-weight: 600; }
.zwmn-status--err { color: #b91c1c; font-weight: 600; }

.zwmn-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 11em), 1fr)); gap: .75em; margin: 0 0 1.5em; padding: 0; list-style: none; }
.zwmn-item {
  display: flex; flex-direction: column; gap: .45em; min-width: 0; margin: 0; padding: .5em;
  border: 1px solid var(--zwbc-line, rgba(127, 127, 127, .25)); border-radius: 12px;
  background: var(--zwbc-soft, rgba(127, 127, 127, .06));
}
.zwmn-thumb { display: block; overflow: hidden; aspect-ratio: 3 / 4; border-radius: 8px; background: rgba(127, 127, 127, .12); }
.zwmn-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.zwmn-thumb--pdf { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .3em; color: #b91c1c; font-weight: 700; text-decoration: none; }
.zwmn-thumb--pdf .zwd-ico { font-size: 2.4em; }
.zwmn-thumb:focus-visible { outline: 3px solid var(--zwbc-accent, #d97706); outline-offset: 2px; }
.zwmn-meta { display: flex; justify-content: space-between; align-items: baseline; gap: .5em; font-size: .9em; }
.zwmn-meta small { opacity: .7; font-variant-numeric: tabular-nums; }
.zwmn-actions { display: flex; gap: .3em; }
.zwmn-actions .zwd-btn { flex: 1; min-height: 2.75em; }
.zwmn-actions .zwmn-del:hover, .zwmn-actions .zwmn-del:focus { border-color: #b91c1c; color: #b91c1c; }
.zwmn-empty { padding: 1em; border-radius: 10px; background: var(--zwbc-soft, rgba(127, 127, 127, .06)); opacity: .8; }
.zwmn-html { margin: 2em 0 0; padding-top: 1em; border-top: 1px solid var(--zwbc-line, rgba(127, 127, 127, .25)); }
.zwmn-html summary { cursor: pointer; }
.zwmn-html-actions { margin-top: 1em; }

/* Menú en fotos en la ficha pública */
.zwmn-pages { display: flex; flex-direction: column; align-items: center; gap: 1em; margin: 0 0 1.5em; padding: 0; list-style: none; }
.zwmn-pages li { width: 100%; max-width: 900px; margin: 0; }
.zwmn-pages a { display: block; }
.zwmn-pages img { display: block; width: 100%; height: auto; border-radius: 8px; box-shadow: 0 2px 10px rgba(0, 0, 0, .12); }

/* ============================================================
   Primitivas del módulo (sustituyen .btn, .form-control, .label, .badge, .alert, .well, .panel, .table,
   .row/.col-* y Glyphicons de Bootstrap 3 en ext/directory*.php). Autosuficientes: no dependen de que la
   plantilla cargue Bootstrap, pero conviven con él (prefijo propio, em en lugar de rem).
   ============================================================ */
.zwd-ico {
  flex: none;
  width: 1.15em;
  height: 1.15em;
  vertical-align: -.2em;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Botones: <a>, <button> o <input type=submit|reset> */
.zwd-btn {
  --zwd-btn-bg: transparent;
  --zwd-btn-fg: inherit;
  --zwd-btn-line: rgba(127, 127, 127, .4);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .45em;
  min-height: 2.75em;               /* objetivo táctil >= 44px */
  margin: 0;
  padding: .5em 1.1em;
  border: 1px solid var(--zwd-btn-line);
  border-radius: 10px;
  background: var(--zwd-btn-bg);
  color: var(--zwd-btn-fg);
  font: inherit;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
.zwd-btn:hover, .zwd-btn:focus { color: var(--zwd-btn-fg); text-decoration: none; border-color: currentColor; }
.zwd-btn:focus-visible { outline: 3px solid var(--g-accent, #0b6fd6); outline-offset: 2px; }
.zwd-btn:disabled, .zwd-btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; pointer-events: none; }
.zwd-btn--primary { --zwd-btn-bg: var(--g-accent, #0b6fd6); --zwd-btn-fg: #fff; --zwd-btn-line: transparent; }
.zwd-btn--success { --zwd-btn-bg: #15803d; --zwd-btn-fg: #fff; --zwd-btn-line: transparent; }
.zwd-btn--danger  { --zwd-btn-bg: #b91c1c; --zwd-btn-fg: #fff; --zwd-btn-line: transparent; }
.zwd-btn--warn    { --zwd-btn-bg: #b45309; --zwd-btn-fg: #fff; --zwd-btn-line: transparent; }
.zwd-btn--primary:hover, .zwd-btn--success:hover, .zwd-btn--danger:hover, .zwd-btn--warn:hover,
.zwd-btn--primary:focus, .zwd-btn--success:focus, .zwd-btn--danger:focus, .zwd-btn--warn:focus { filter: brightness(1.1); border-color: transparent; }
.zwd-btn--link { --zwd-btn-line: transparent; padding-inline: .5em; }
.zwd-btn--link:hover, .zwd-btn--link:focus { border-color: transparent; text-decoration: underline; }
.zwd-btn--sm { min-height: 2.25em; padding: .3em .75em; font-size: .9em; border-radius: 8px; }
.zwd-btn--icon { padding-inline: .6em; }
.zwd-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .5em; margin: 1em 0 0; }

/* Controles de formulario */
.zwd-input {
  display: block;
  width: 100%;
  min-height: 2.75em;
  margin: 0;
  padding: .55em .8em;
  border: 1px solid rgba(127, 127, 127, .45);
  border-radius: 10px;
  background: transparent;
  background-color: var(--zwd-input-bg, rgba(255, 255, 255, .04));
  color: inherit;
  font: inherit;
  line-height: 1.35;
  box-shadow: none;
}
select.zwd-input { padding-right: 2em; }
select.zwd-input option { color: #222; background: #fff; }   /* la lista desplegable la pinta el sistema */
textarea.zwd-input { min-height: 8em; resize: vertical; }
.zwd-input:focus { border-color: var(--g-accent, #0b6fd6); outline: 0; box-shadow: 0 0 0 3px rgba(11, 111, 214, .2); }
.zwd-input:user-invalid { border-color: #b91c1c; }
.zwd-input:disabled { opacity: .6; cursor: not-allowed; }
.zwd-input--lg { font-size: 1.15em; }
.zwd-input--sm { min-height: 2.25em; padding: .3em .6em; font-size: .9em; border-radius: 8px; }
.zwf-pair > .zwd-input { flex: 1 1 0; min-width: 0; }
.zwf-pair > select.zwd-input { flex: 0 1 auto; width: auto; min-width: 5em; }
.zwf-inline > .zwd-btn { min-height: 2.75em; }
@media (max-width: 599px) { .zwf-inline > .zwd-btn { flex: 1 1 100%; } }
.zwf-actions .zwd-btn { min-width: 9em; padding: .55em 1.5em; font-size: 1.05em; }

/* Etiquetas y contadores (antes .label / .badge) */
.zwd-tag {
  display: inline-flex;
  align-items: center;
  gap: .3em;
  padding: .15em .6em;
  border: 1px solid rgba(127, 127, 127, .4);
  border-radius: 999px;
  color: inherit;
  font-size: .8em;
  font-weight: 600;
  line-height: 1.5;
  text-decoration: none;
  white-space: nowrap;
  vertical-align: middle;
}
a.zwd-tag:hover, a.zwd-tag:focus { border-color: currentColor; color: inherit; text-decoration: none; }
.zwd-tag--accent { border-color: transparent; background: var(--g-accent, #0b6fd6); color: #fff; }
a.zwd-tag--accent:hover, a.zwd-tag--accent:focus { color: #fff; filter: brightness(1.1); }
.zwd-badge {
  display: inline-block;
  min-width: 1.6em;
  padding: .1em .5em;
  border-radius: 999px;
  background: rgba(127, 127, 127, .2);
  font-size: .75em;
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
  vertical-align: middle;
  font-variant-numeric: tabular-nums;
}

/* Avisos (antes .alert) y recuadros (antes .well / .panel) */
.zwd-alert {
  margin: 0 0 1em;
  padding: .8em 1em;
  border: 1px solid rgba(127, 127, 127, .3);
  border-left-width: 4px;
  border-radius: 10px;
  background: rgba(127, 127, 127, .06);
}
.zwd-alert--ok   { border-color: rgba(21, 128, 61, .35); border-left-color: #15803d; background: rgba(21, 128, 61, .07); }
.zwd-alert--warn { border-color: rgba(180, 83, 9, .35); border-left-color: #b45309; background: rgba(180, 83, 9, .07); }
.zwd-alert > :last-child { margin-bottom: 0; }
.zwd-box {
  margin: 0 0 1em;
  padding: 1em 1.15em;
  border: 1px solid rgba(127, 127, 127, .25);
  border-radius: 14px;
  background: rgba(127, 127, 127, .06);
}
.zwd-box > :last-child { margin-bottom: 0; }
.zwd-muted { opacity: .7; }

/* Rejillas (antes .row / .col-*): columnas que se apilan solas en pantallas estrechas */
.zwd-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--zwd-col-min, 16em)), 1fr)); gap: 1em 1.5em; margin: 0 0 1em; }
.zwd-cols--narrow { --zwd-col-min: 9em; }
.zwd-cols > * { min-width: 0; }
.zwd-stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 9em), 1fr)); gap: .75em; /*margin: 0 0 1.5em;*/ }
.zwd-stat { padding: .9em; border: 1px solid rgba(127, 127, 127, .25); border-radius: 12px; background: rgba(127, 127, 127, .06); text-align: center; }
.zwd-stat-val { display: block; font-size: 1.6em; font-weight: 700; line-height: 1.2; font-variant-numeric: tabular-nums; }
.zwd-stat-lbl { display: block; font-size: .85em; opacity: .75; }

/* Tablas (antes .table .table-condensed .table-hover dentro de .table-responsive) */
.zwd-table-wrap { overflow-x: auto; margin: 0 0 1em; -webkit-overflow-scrolling: touch; }
.zwd-table { width: 100%; border-collapse: collapse; font-size: .95em; }
.zwd-table th, .zwd-table td { padding: .45em .6em; border-bottom: 1px solid rgba(127, 127, 127, .25); text-align: left; vertical-align: top; }
.zwd-table th { font-weight: 600; white-space: nowrap; }
.zwd-table tbody tr:hover { background: rgba(127, 127, 127, .06); }
.zwd-table--fixed { table-layout: fixed; overflow-wrap: anywhere; }

/* Imágenes (antes .img-responsive / .center-block) */
.zwd-img { display: block; max-width: 100%; height: auto; }
.zwd-img--center { margin-inline: auto; }
.zwd-tags .zwd-tag--accent { background: transparent; color: inherit; font-weight: 500; }

/* Utilidades de texto (antes .text-center, .text-right, .lead, .small, .help-block, .page-header, .jumbotron) */
.zwd-center { text-align: center; }
.zwd-right { text-align: right; }
.zwd-lead { font-size: 1.15em; line-height: 1.5; }
.zwd-small { font-size: .85em; }
.zwd-help { display: block; margin: .35em 0 .75em; font-size: .85em; opacity: .75; }
.zwd-group { margin: 0 0 1em; }
.zwd-pagehead { margin: 1.5em 0 1em; padding-bottom: .5em; border-bottom: 1px solid rgba(127, 127, 127, .25); }
.zwd-hero-box { margin: 0 0 1.5em; padding: 2em 1.5em; border-radius: 14px; background: rgba(127, 127, 127, .08); }
.zwd-hero-box > :last-child { margin-bottom: 0; }
.zwd-tag--success { border-color: transparent; background: #15803d; color: #fff; }
.zwd-tag--warning { border-color: transparent; background: #b45309; color: #fff; }
.zwd-tag--info    { border-color: transparent; background: #0369a1; color: #fff; }
.zwd-tag--danger  { border-color: transparent; background: #b91c1c; color: #fff; }

/* Uso de almacenamiento (volume()): <meter> nativo; el navegador lo colorea con low/high/optimum */
.zwd-meter { display: block; width: 100%; height: 1.1em; margin: .4em 0 1em; }

/* Códigos QR del Business Center (/bc/<clave>/qrc) */
.zwd-qr { min-width: 0; }
.zwd-qr .clk2dl canvas, .zwd-qr .clk2dl img { max-width: 100%; height: auto; }
.zwd-qr-link { margin: 0; padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: copy; overflow-wrap: anywhere; text-align: left; }
.zwd-qr-link:focus-visible { outline: 3px solid var(--g-accent, #0b6fd6); outline-offset: 2px; border-radius: 4px; }

/* Pestañas de navegación entre páginas (admin del directorio; antes .nav .nav-tabs) */
.zwd-tabs { display: flex; flex-wrap: wrap; gap: .25em; margin: 1em 0; border-bottom: 1px solid rgba(127, 127, 127, .3); }
.zwd-tab {
  display: inline-flex; align-items: center; gap: .4em; min-height: 2.75em; margin-bottom: -1px; padding: .4em 1em;
  border-radius: 10px 10px 0 0; color: inherit; font-weight: 600; text-decoration: none;
}
.zwd-tab:hover, .zwd-tab:focus { background: rgba(127, 127, 127, .08); color: inherit; text-decoration: none; }
.zwd-tab:focus-visible { outline: 3px solid var(--g-accent, #0b6fd6); outline-offset: -3px; }
.zwd-tab[aria-current="page"] { box-shadow: inset 0 -3px 0 var(--g-accent, #0b6fd6); color: var(--g-accent, #0b6fd6); }

/* LinkBling(): lista de visitas por negocio (antes .row/.col-md-11/.col-md-1) */
.zwd-bling { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1em; padding: .75em 0; border-bottom: 1px solid rgba(127, 127, 127, .2); }
.zwd-bling h4 { margin: 0 0 .3em; }
.zwd-stat small { display: block; margin-top: .25em; opacity: .75; }
details.zwd-box > summary { cursor: pointer; }
details.zwd-box[open] > summary { margin-bottom: .75em; }

/* Ficha de producto (directory_tienda.php verProducto(); antes .row/.col-md-*) */
.zwt-main { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5em; }
@media (min-width: 768px) { .zwt-main { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); } }
.zwt-seller { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1.5em; align-items: start; }
.zwt-seller-logo img { max-width: 8em; }
.zwt-h3 { font-size: 1.5em; line-height: 1.25; }
.zwt-buy .zwt-qty { display: inline-block; width: 5.5em; }

/* Horario y rango de precios en la ficha (hoursTable()); "Abierto ahora" lo pone el script en la zona del sitio */
.zwd-hours table { border-collapse: collapse; margin: .25em 0 0; }
.zwd-hours th, .zwd-hours td { padding: .1em 1.25em .1em 0; font-weight: 400; text-align: left; vertical-align: top; }
.zwd-hours .is-today th, .zwd-hours .is-today td { font-weight: 700; }
.zwd-open { display: inline-block; padding: .1em .6em; border-radius: 999px; font-size: .85em; font-weight: 600; color: #fff; }
.zwd-open.is-open { background: #15803d; }
.zwd-open.is-closed { background: #b91c1c; }
.zwd-price { font-weight: 600; letter-spacing: .05em; }
/* Horario en el formulario (hoursFields()) */
.zwf-hours-wrap { overflow-x: auto; margin: .75em 0 .25em; }
.zwf-hours { border-collapse: collapse; }
.zwf-hours th { padding: .3em 1em .3em 0; font-weight: 500; text-align: left; white-space: nowrap; }
.zwf-hours td { padding: .3em 1em .3em 0; white-space: nowrap; }
.zwf-hours .zwd-input { display: inline-block; width: auto; min-width: 7.5em; }
@media (max-width: 47.9em) {
  .zwf-hours tr { display: grid; grid-template-columns: minmax(0, 1fr); padding: .4em 0; border-top: 1px solid var(--zwd-line); }
  .zwf-hours th, .zwf-hours td { padding: .15em 0; }
}
@media (forced-colors: active) { .zwd-open { border: 1px solid CanvasText; } }
/* Sitios de la ficha en el formulario de admin (sitesFields()) */
.zwd-site { margin: 1em 0 0; padding: 1em; border: 1px solid var(--zwd-line); border-radius: 6px; }
.zwd-site > strong { font-size: 1.05em; margin-right: .75em; }
.zwd-site .zwf-grid { margin-top: .75em; }