/**
 * Fase 2 — Rediseño Abasto: página de Locales (Tiendas).
 * Requiere abasto-brand.css (tokens + fuentes) cargado antes.
 */

.page-stores {
  background: var(--abasto-papel);
}

.page-stores .store-item.card {
  background: var(--abasto-blanco);
  border: 1px solid var(--abasto-linea);
  border-radius: var(--abasto-radius-card);
  margin-bottom: var(--abasto-space-md);
  overflow: hidden;
}

.page-stores .card-title {
  font-family: var(--abasto-font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  color: var(--abasto-azul);
  margin-bottom: 8px;
}

.page-stores address {
  font-family: var(--abasto-font-text);
  color: var(--abasto-negro);
  font-style: normal;
  line-height: 1.5;
}

.page-stores .store-phone {
  font-family: var(--abasto-font-text);
  font-weight: 600;
  color: var(--abasto-azul);
  margin-top: 10px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.page-stores .store-phone .material-icons {
  color: var(--abasto-rojo);
  font-size: 18px;
}

.page-stores .store-directions {
  font-family: var(--abasto-font-text);
  font-weight: 600;
  color: var(--abasto-rojo);
  margin-top: 6px;
  display: flex;
  align-items: center;
  gap: 6px;
  width: fit-content;
}

.page-stores .store-directions:hover {
  color: var(--abasto-azul-oscuro);
}

.page-stores .store-directions .material-icons {
  font-size: 18px;
}

.page-stores .store-description a[data-toggle="collapse"] {
  color: var(--abasto-muted);
  font-family: var(--abasto-font-text);
  font-size: 13px;
}

.page-stores .store-description a[data-toggle="collapse"]:hover {
  color: var(--abasto-rojo);
}

.page-stores .divide-left {
  border-left: 1px solid var(--abasto-linea);
}

.page-stores table {
  width: 100%;
  font-family: var(--abasto-font-text);
  font-size: 13px;
}

.page-stores table th {
  color: var(--abasto-muted);
  font-weight: 600;
  text-align: left;
  padding-right: 10px;
  white-space: nowrap;
}

.page-stores table td,
.page-stores table th {
  padding: 3px 0;
  border: none;
}

.page-stores .store-item-footer {
  background: var(--abasto-papel);
}

.page-stores .store-item-footer .card-block {
  font-family: var(--abasto-font-text);
  color: var(--abasto-negro);
}