/* =============================================================
   Todo Calamuchita — ajustes de la home y de Negocios (v1.1)
   Solo se carga en esas dos páginas (las arma PHP). No toca
   Turismo ni Info útil. Usa los mismos colores de styles.css.
   ============================================================= */

/* ---------- Botones con un relieve sutil ---------- */
.tc-rubro, .tc-atajo,
.tc-negocios .chip,
.tc-inicio .tc-search .btn {
  box-shadow: 0 1px 0 rgba(255, 255, 255, .7) inset, 0 1px 2px rgba(46, 43, 37, .14), 0 2px 6px rgba(46, 43, 37, .08);
  transition: transform .15s ease, box-shadow .15s ease, background .2s, border-color .2s, color .2s;
}
.tc-rubro:hover, .tc-atajo:hover, .tc-negocios .chip:hover {
  transform: translateY(-1px);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .7) inset, 0 3px 6px rgba(46, 43, 37, .16), 0 6px 14px rgba(46, 43, 37, .10);
}
.tc-rubro:active, .tc-atajo:active, .tc-negocios .chip:active {
  transform: translateY(1px);
  box-shadow: 0 1px 2px rgba(46, 43, 37, .18) inset;
}

/* ---------- Desplegable "+ info" ---------- */
.tc-info { margin-top: .9rem; max-width: 68ch; }
.tc-info summary {
  display: inline-flex; align-items: center; cursor: pointer; list-style: none;
  font-size: .85rem; font-weight: 600; color: var(--ink-mute);
  padding: .35rem .8rem; border-radius: 999px; border: 1px solid var(--line); background: transparent;
}
.tc-info summary::-webkit-details-marker { display: none; }
.tc-info summary:hover { color: var(--accent-ink); border-color: var(--accent); }
.tc-info[open] summary { color: var(--accent-ink); border-color: var(--accent); background: var(--accent-soft); }
.tc-info p { margin-top: .7rem; color: var(--ink-soft); font-size: .95rem; line-height: 1.55; }
.tc-info p a { color: var(--accent-ink); text-decoration: underline; }

/* =============================================================
   HOME — páginas amarillas
   ============================================================= */
.tc-home { padding-block: clamp(1.4rem, 4vw, 2.6rem) clamp(2rem, 5vw, 3.5rem); background: linear-gradient(180deg, var(--bg-2), var(--bg) 22rem); }
.tc-home h1 { font-size: clamp(1.7rem, 4.2vw, 2.7rem); line-height: 1.08; margin: 0; max-width: 20ch; }

.tc-search { display: flex; gap: .5rem; margin-top: 1.1rem; max-width: 44rem; }
.tc-search input[type="search"] {
  flex: 1 1 auto; min-width: 0; font: inherit; font-size: 1.05rem; color: var(--ink);
  padding: .9rem 1.2rem; border-radius: 999px; border: 2px solid var(--accent);
  background: #fff; box-shadow: 0 2px 8px rgba(46, 43, 37, .10);
}
.tc-search input[type="search"]:focus-visible { outline: 3px solid var(--accent-mid); outline-offset: 1px; }
.tc-search .btn { flex: 0 0 auto; padding-inline: 1.4rem; }

.tc-sub {
  font-family: var(--font-body, inherit); font-size: .78rem; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--ink-mute); margin: 1.6rem 0 .7rem;
}

.tc-rubros { display: grid; gap: .6rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 640px) { .tc-rubros { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .7rem; } }
@media (min-width: 960px) { .tc-rubros { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.tc-rubro {
  display: flex; align-items: center; gap: .6rem; min-height: 60px;
  padding: .65rem .8rem; border-radius: 16px; border: 1px solid var(--line);
  background: var(--paper); color: var(--ink); text-decoration: none; font-weight: 600; line-height: 1.2;
}
.tc-rubro:hover { border-color: var(--accent); background: #fff; color: var(--accent-ink); }
.tc-rubro-ic { font-size: 1.45rem; line-height: 1; flex: 0 0 auto; }
.tc-rubro-nm { flex: 1 1 auto; min-width: 0; font-size: .92rem; overflow-wrap: break-word; }
.tc-rubro-ct {
  flex: 0 0 auto; font-size: .75rem; font-weight: 700; color: var(--accent-2-deep);
  background: var(--accent-2-soft); border-radius: 999px; padding: .12rem .5rem; font-variant-numeric: tabular-nums;
}

@media (max-width: 479px) {
  .tc-rubro { gap: .5rem; padding: .6rem .65rem; }
  .tc-rubro-ic { font-size: 1.3rem; }
  .tc-rubro-nm { font-size: .86rem; }
  .tc-rubro-ct { display: none; }
}

.tc-atajos { display: flex; flex-wrap: wrap; gap: .55rem; margin-top: 1.3rem; }
.tc-atajo {
  display: inline-flex; align-items: center; min-height: 44px; padding: .5rem 1rem; border-radius: 999px;
  border: 1px solid var(--line); background: var(--accent-2-soft); color: var(--accent-2-deep);
  text-decoration: none; font-weight: 600; font-size: .92rem;
}
.tc-atajo:hover { border-color: var(--accent-2); background: #fff; }
.tc-home .tc-info { margin-top: 1.4rem; }

/* =============================================================
   NEGOCIOS — más compacto, menos texto
   ============================================================= */
.tc-negocios .page-hero { padding-block: clamp(1.1rem, 3vw, 1.8rem) clamp(.9rem, 2vw, 1.3rem); }
.tc-negocios .page-hero .eyebrow { display: none; }
.tc-negocios .page-hero h1 { font-size: clamp(1.5rem, 3.6vw, 2.3rem); margin-top: 0; line-height: 1.1; }
.tc-negocios .page-hero .tc-info { margin-top: .6rem; }
.tc-negocios .page-hero + .section { padding-top: .4rem; }

.tc-negocios .filters { margin-bottom: .8rem; padding-block: .7rem; }
.tc-negocios .filters input[type="search"] {
  background: #fff; border: 2px solid var(--accent); font-size: 1.02rem; box-shadow: 0 2px 8px rgba(46, 43, 37, .08);
}
.tc-negocios .chip-row { gap: .5rem; margin-bottom: .9rem; }
.tc-negocios .chip {
  display: inline-flex; align-items: center; gap: .35rem; min-height: 40px; cursor: pointer;
  padding: .45rem .9rem; font-size: .86rem; background: var(--paper); color: var(--ink);
}
.tc-negocios .chip.is-active { background: var(--accent); border-color: var(--accent); color: #fff; }
.tc-negocios .chip-ic { font-size: 1rem; line-height: 1; }
.tc-negocios .result-count { margin-bottom: .7rem; }

/* En el celu los rubros van en una sola fila que se desliza con el dedo,
   así los negocios aparecen enseguida sin tener que bajar tanto. */
@media (max-width: 719px) {
  .tc-negocios .chip-row {
    flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none;
    margin-inline: -1.25rem; padding: .3rem 1.25rem .6rem; scroll-padding-inline: 1.25rem;
  }
  .tc-negocios .chip-row::-webkit-scrollbar { display: none; }
  .tc-negocios .chip { flex: 0 0 auto; white-space: nowrap; }
}

@media (prefers-reduced-motion: reduce) {
  .tc-rubro, .tc-atajo, .tc-negocios .chip { transition: none; }
  .tc-rubro:hover, .tc-atajo:hover, .tc-negocios .chip:hover { transform: none; }
}

/* =============================================================
   ZONAS — la principal va fija; las cercanas se suman desde un desplegable
   ============================================================= */
.tc-zonas { display: flex; flex-wrap: wrap; align-items: flex-start; gap: .5rem; margin: 0 0 .7rem; }
.tc-zona-fija, .tc-cercanas > summary {
  display: inline-flex; align-items: center; gap: .35rem; min-height: 40px; padding: .45rem .9rem;
  border-radius: 999px; font-size: .86rem; font-weight: 600; line-height: 1.2;
}
.tc-zona-fija { background: var(--accent-2-deep); color: #fff; }
.tc-cercanas { flex: 1 1 14rem; min-width: 0; }
.tc-cercanas > summary {
  cursor: pointer; list-style: none; border: 1px dashed var(--accent-2-deep);
  background: var(--accent-2-soft); color: var(--accent-2-deep);
}
.tc-cercanas > summary::-webkit-details-marker { display: none; }
.tc-cercanas[open] > summary { border-style: solid; }
.tc-cercanas-lista { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: .55rem; }
.tc-cercanas-lista .chip {
  display: inline-flex; align-items: center; gap: .35rem; min-height: 40px; cursor: pointer;
  padding: .45rem .85rem; font-size: .86rem; background: var(--paper); color: var(--ink);
}
.tc-cercanas-lista .chip.is-active { background: var(--accent-2-deep); border-color: var(--accent-2-deep); color: #fff; }
.tc-cercanas-lista .chip.is-active::before { content: "✓"; font-weight: 700; }

/* Numeritos (cantidad por rubro o por zona) */
.tc-n {
  display: inline-block; min-width: 1.5em; padding: .05rem .4rem; border-radius: 999px; text-align: center;
  font-size: .72rem; font-weight: 700; font-variant-numeric: tabular-nums;
  background: rgba(46, 43, 37, .09); color: inherit;
}
.is-active > .tc-n, .tc-cercanas > summary .tc-n { background: rgba(255, 255, 255, .28); }
.tc-cercanas > summary .tc-n { background: var(--accent-2-deep); color: #fff; }
.tc-n[hidden] { display: none; }

.tc-home .tc-zonas { margin: 1rem 0 0; }
.tc-negocios .tc-mas { display: block; margin: 1.2rem auto 0; min-height: 44px; cursor: pointer; }

/* =============================================================
   SUGERENCIAS — lista que aparece mientras se escribe
   ============================================================= */
.tc-sug-wrap { position: relative; flex: 1 1 16rem; min-width: 0; }
.tc-sug-wrap > input[type="search"] { width: 100%; }
.tc-sug {
  position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + 6px);
  max-height: min(60vh, 420px); overflow-y: auto; padding: .35rem;
  background: #fff; border: 1px solid var(--line); border-radius: 16px;
  box-shadow: 0 12px 30px rgba(46, 43, 37, .18); text-align: left;
}
.tc-sug[hidden] { display: none; }
.tc-sug-tit {
  padding: .45rem .6rem .2rem; font-size: .68rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-mute);
}
.tc-sug-item {
  display: flex; align-items: center; gap: .55rem; width: 100%; min-height: 42px;
  padding: .4rem .6rem; border: 0; border-radius: 10px; background: none; cursor: pointer;
  font: inherit; font-size: .95rem; color: var(--ink); text-align: left;
}
.tc-sug-item:hover, .tc-sug-item.is-sel { background: var(--accent-2-soft); }
.tc-sug-ic { flex: 0 0 1.4rem; text-align: center; }
.tc-sug-tx { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tc-sug-ex { flex: 0 0 auto; max-width: 45%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .76rem; color: var(--ink-mute); }

/* En el celu también se ve la cantidad de cada rubro (se actualiza al sumar zonas). */
@media (max-width: 479px) {
  .tc-rubro-ct { display: inline-block; font-size: .7rem; padding: .1rem .4rem; }
}

/* =============================================================
   v1.5 — Negocios destacados (página premium)
   ============================================================= */
.biz-card.is-destacado {
  position: relative;
  border: 2px solid var(--accent);
  background: linear-gradient(180deg, var(--accent-soft), var(--paper) 9rem);
  box-shadow: 0 4px 14px color-mix(in srgb, var(--accent) 22%, transparent);
}
.biz-card.is-destacado .biz-name { font-weight: 700; }
.tc-dest-badge {
  display: inline-flex; align-items: center; gap: .25rem; align-self: flex-start;
  font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--paper); background: var(--accent); border-radius: 999px; padding: .22rem .65rem; margin-bottom: .55rem;
}
.biz-meta a.tc-dest-btn {
  display: inline-flex; align-self: flex-start; align-items: center; margin-bottom: .35rem;
  padding: .5rem 1rem; border-radius: 999px; background: var(--accent); color: var(--paper);
  font-weight: 700; text-decoration: none;
  box-shadow: 0 1px 0 rgba(255,255,255,.35) inset, 0 2px 6px color-mix(in srgb, var(--accent) 35%, transparent);
}
.biz-meta a.tc-dest-btn:hover { background: var(--accent-ink); color: var(--paper); }