/* Páginas por comercio (promociones/<id>.html) — diseño base intencionalmente simple.
   Generadas por scripts/promos/generar-paginas-comercios.js; las clases de la barra
   social (.ps-*) las estiliza este archivo porque aquí no existe el <style> de
   promociones.html. */

.comercio-main { max-width: 860px; margin: 0 auto; padding: 1.2rem 1rem 3rem; }

.migas { font-size: 0.85rem; color: #9aa0ab; margin: 0.8rem 0 1.2rem; }
.migas a { color: #6b7280; }
.migas a:hover { color: var(--rojo-2, #b71c1c); }

.comercio-head h1 { margin: 0 0 0.3rem; font-size: 1.6rem; }
.comercio-sitio { font-size: 0.9rem; font-weight: 600; color: #6b7280; }
.comercio-sitio:hover { color: var(--rojo-2, #b71c1c); }
.comercio-sub { color: #6b7280; font-size: 0.95rem; margin: 0.5rem 0 1.5rem; }

.comercio-main h2 { font-size: 1.15rem; margin: 1.8rem 0 0.8rem; border-bottom: 2px solid #eee; padding-bottom: 0.4rem; }
#anteriores { opacity: 0.85; }
.nota-anteriores, .sin-promos { font-size: 0.88rem; color: #6b7280; }

/* Beneficio desplegable */
.promo { border: 1px solid #e5e7eb; border-radius: 10px; margin-bottom: 0.7rem; background: #fff; }
.promo > summary {
  display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap;
  padding: 0.75rem 0.9rem; cursor: pointer; list-style: none;
}
.promo > summary::-webkit-details-marker { display: none; }
.promo > summary::after { content: "▾"; margin-left: auto; color: #9aa0ab; }
.promo[open] > summary::after { content: "▴"; }
.badge-inst { font-size: 0.74rem; font-weight: 700; color: #fff; background: #374151; padding: 0.2rem 0.55rem; border-radius: 6px; white-space: nowrap; }
.promo-monto { font-weight: 800; color: var(--rojo-2, #b71c1c); }
.chip-tipo { font-size: 0.72rem; font-weight: 600; color: #6b7280; border: 1px solid #e5e7eb; border-radius: 999px; padding: 0.15rem 0.5rem; white-space: nowrap; }
.chip-campana { font-size: 0.72rem; font-weight: 700; color: #7c2d12; background: #fff7ed; border: 1px solid #fdba74; border-radius: 999px; padding: 0.15rem 0.5rem; white-space: nowrap; }
.promo-vigencia { font-size: 0.78rem; color: #9aa0ab; white-space: nowrap; }
#anteriores .promo-vigencia::before { content: "Terminó — "; }

.promo-cuerpo { padding: 0 0.9rem 0.9rem; border-top: 1px solid #f1f2f4; }
.promo-desc { font-size: 0.92rem; color: #374151; margin: 0.7rem 0; }

.chip-cupon {
  display: inline-flex; align-items: center; gap: 0.4rem; cursor: pointer;
  font-size: 0.85rem; color: #14532d; background: #f0fdf4; border: 1px dashed #16a34a;
  border-radius: 8px; padding: 0.35rem 0.7rem; margin-bottom: 0.6rem;
}
.chip-cupon.copiado { background: #16a34a; color: #fff; }
.chip-cupon.copiado::after { content: " ¡copiado!"; font-weight: 700; }

.promo-exclusiones { font-size: 0.82rem; color: #92400e; background: #fffbeb; border: 1px solid #fde68a; border-radius: 8px; padding: 0.45rem 0.65rem; margin: 0.5rem 0; }

.tyc { margin: 0.6rem 0; border: 1px solid #f1f2f4; border-radius: 8px; overflow: hidden; }
.tyc-row { display: flex; gap: 0.8rem; padding: 0.4rem 0.65rem; font-size: 0.85rem; }
.tyc-row:nth-child(odd) { background: #fafafa; }
.tyc dt { flex: 0 0 32%; color: #6b7280; font-weight: 600; }
.tyc dd { margin: 0; color: #374151; }

.promo-fuentes { font-size: 0.82rem; }
.promo-fuentes a { color: #056dae; font-weight: 600; }

.comercio-footer-nota { margin-top: 2rem; font-size: 0.8rem; color: #9aa0ab; }

/* Directorio A-Z */
.dir-letra h2 { border: none; margin-bottom: 0.3rem; }
.dir-letra ul { list-style: none; padding: 0; margin: 0 0 0.8rem; columns: 3; column-gap: 2rem; }
.dir-letra li { padding: 0.15rem 0; font-size: 0.92rem; break-inside: avoid; }
.dir-count { font-size: 0.72rem; font-weight: 700; color: #fff; background: var(--rojo-2, #b71c1c); border-radius: 999px; padding: 0.05rem 0.4rem; }
@media (max-width: 700px) { .dir-letra ul { columns: 2; } .tyc dt { flex-basis: 42%; } }

/* Barra social (compartida con promociones.html; aquí definida localmente) */
.promo-social { margin-top: 0.55rem; }
.ps-barra { display: flex; align-items: center; gap: 0.4rem; }
.ps-btn { display: inline-flex; align-items: center; gap: 0.32rem; font-size: 0.78rem; font-weight: 600; color: #9aa0ab; background: none; border: 1px solid #e5e7eb; border-radius: 999px; padding: 0.22rem 0.65rem; cursor: pointer; }
.ps-btn:hover { color: var(--rojo-2, #b71c1c); border-color: rgba(183,28,28,0.35); }
.ps-btn.is-active { color: #1b7a3d; border-color: rgba(27,122,61,0.4); background: rgba(27,122,61,0.07); }
.ps-btn--down.is-active { color: var(--rojo-2, #b71c1c); border-color: rgba(183,28,28,0.4); background: rgba(183,28,28,0.07); }
.ps-btn span:empty { display: none; }
.ps-login-aviso { margin-top: 0.45rem; font-size: 0.8rem; color: #6b7280; background: #fff8ec; border: 1px solid rgba(212,160,23,0.35); padding: 0.4rem 0.65rem; border-radius: 8px; }
.ps-login-aviso a { color: var(--rojo-2, #b71c1c); font-weight: 700; }
.ps-comentarios { margin-top: 0.55rem; }
.ps-com-cargando { font-size: 0.8rem; color: #9aa0ab; margin: 0.3rem 0; }
.ps-com { padding: 0.5rem 0.65rem; background: #fafafa; border: 1px solid #e5e7eb; border-radius: 8px; margin-top: 0.45rem; }
.ps-com-head { display: flex; align-items: center; gap: 0.5rem; font-size: 0.76rem; color: #6b7280; }
.ps-com-head b { color: #374151; }
.ps-com-borrar { margin-left: auto; background: none; border: none; color: #c2c7cf; cursor: pointer; }
.ps-com-borrar:hover { color: var(--rojo-2, #b71c1c); }
.ps-com p { margin: 0.25rem 0 0; font-size: 0.85rem; color: #374151; white-space: pre-wrap; }
.ps-com-form { display: flex; gap: 0.5rem; align-items: flex-end; margin-top: 0.45rem; }
.ps-com-form textarea { flex: 1; resize: vertical; font: inherit; font-size: 0.85rem; border: 1px solid #e5e7eb; border-radius: 8px; padding: 0.45rem 0.6rem; min-height: 2.4rem; }
.ps-com-form button { flex-shrink: 0; display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.8rem; font-weight: 700; color: #fff; background: var(--rojo-2, #b71c1c); border: none; border-radius: 8px; padding: 0.5rem 0.8rem; cursor: pointer; }
.ps-com-form button:disabled { opacity: 0.6; cursor: default; }

/* Badge del banco como link al hub de la institución */
a.badge-inst { color: #fff; text-decoration: none; }
a.badge-inst:hover { background: var(--rojo-2, #b71c1c); }

/* Imágenes en comentarios + moderación admin */
.ps-com-imgs { display: flex; gap: 0.4rem; margin-top: 0.45rem; flex-wrap: wrap; }
.ps-com-imgs img { height: 90px; width: 120px; object-fit: cover; border-radius: 8px; border: 1px solid #e5e7eb; }
.ps-com--oculto { opacity: 0.55; border-style: dashed; }
.ps-com-estado { font-size: 0.7rem; font-weight: 700; color: #92400e; background: #fffbeb; border: 1px solid #fde68a; border-radius: 999px; padding: 0.05rem 0.45rem; }
.ps-com-moderar { background: none; border: none; color: #c2c7cf; cursor: pointer; }
.ps-com-moderar:hover { color: #056dae; }
.ps-com-form-main { display: flex; gap: 0.5rem; align-items: flex-end; flex: 1; }
.ps-com-form-main textarea { flex: 1; }
.ps-com-form-acciones { display: flex; gap: 0.35rem; align-items: flex-end; }
.ps-btn-imagen { background: none; border: 1px solid #e5e7eb; border-radius: 8px; color: #6b7280; padding: 0.5rem 0.6rem; cursor: pointer; }
.ps-btn-imagen:hover { color: #056dae; border-color: rgba(5,109,174,0.4); }
.ps-com-previews { display: flex; gap: 0.4rem; margin-top: 0.4rem; }
.ps-preview { position: relative; }
.ps-preview img { height: 56px; width: 72px; object-fit: cover; border-radius: 6px; border: 1px solid #e5e7eb; }
.ps-preview button { position: absolute; top: -6px; right: -6px; width: 18px; height: 18px; line-height: 1; border-radius: 50%; border: none; background: #b71c1c; color: #fff; font-size: 0.7rem; cursor: pointer; }