/* ==========================================================================
   ADM Distribuidores — grid de 4 columnas de la red de distribuidores/
   clientes ([adm_distribuidores]). Vive dentro de .adm-filtros-app (mismas
   variables --adm-color-*/--adm-radius-*/--adm-transition definidas ahí),
   igual que adm-product-grid.css. Breakpoints por @container adm-filtros
   (no @media) — mismo motivo documentado en el resto del plugin: el ancho
   real lo determina el contenedor de Elementor, no el viewport.
   ========================================================================== */

/* Mapa: después del toolbar de filtros y antes del grid, ver
   templates/distribuidores-grid.php. Altura fija en vez de aspect-ratio:
   un mapa necesita una altura de pantalla predecible para ser usable, no
   debe encogerse a la proporción del contenedor angosto de un sidebar
   (este shortcode se usa en un bloque de página ancho, no en el sidebar
   de [adm_sidebar]). */
.adm-distribuidores-map {
  width: 100%;
  height: 420px;
  border-radius: var(--adm-radius-md);
  margin-bottom: 24px;
  background: var(--adm-color-bg-alt); /* placeholder visible mientras Google Maps JS carga */
}

.adm-map-infowindow {
  font-size: 0.85rem;
  line-height: 1.4;
  color: var(--adm-color-text);
  max-width: 220px;
}

.adm-map-infowindow strong {
  color: #1a1a1a;
}

.adm-map-infowindow__ciudad {
  color: var(--adm-color-text-soft);
}

.adm-map-infowindow a {
  color: var(--adm-color-primary);
}

/* Toolbar: en pantallas anchas el bloque de filtro (label + select +
   contador) va a la derecha, ocupando un tercio del ancho del contenedor
   (--adm-color-* y el resto de variables vienen de .adm-filtros-app, ver
   adm-filtros.css). En @container angosto (tablet/móvil, ver breakpoint
   más abajo) pasa a 100% de ancho. El contador se apila debajo del
   select (mismo bloque, flex-direction: column). */
.adm-distribuidores-toolbar {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

.adm-distribuidores-toolbar__label {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--adm-color-text-soft);
}

.adm-distribuidores-toolbar__filter {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
  margin-left: auto;
}

@container adm-filtros (min-width: 640px) {
  .adm-distribuidores-toolbar__filter {
    width: 33%;
  }
}

.adm-distribuidores-select {
  width: 100%;
  padding: 10px 14px;
  border-radius: var(--adm-radius-sm);
  border: 1.5px solid var(--adm-color-border);
  background: #fff;
  font-size: 0.9rem;
  color: var(--adm-color-text);
}

.adm-distribuidores-select:focus {
  outline: none;
  border-color: var(--adm-color-primary);
}

.adm-distribuidores-toolbar__count {
  font-size: 0.85rem;
  color: var(--adm-color-text-soft);
  text-align: right;
}

.adm-distribuidor-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  width: 100%;
  gap: 20px;
  margin-top: 32px;
}

@container adm-filtros (max-width: 1100px) {
  .adm-distribuidor-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@container adm-filtros (max-width: 800px) {
  .adm-distribuidor-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@container adm-filtros (max-width: 480px) {
  .adm-distribuidor-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

.adm-distribuidor-card {
  background: #fff;
  border: 1px solid var(--adm-color-border);
  border-radius: var(--adm-radius-md);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  transition: background-color var(--adm-transition), border-color var(--adm-transition);
}

/* Hover: colores invertidos — fondo azul de marca, todo el texto en
   blanco. El botón "Ver en Google Maps" (ya azul sobre blanco en reposo)
   se invierte a blanco sobre azul para conservar contraste, en vez de
   quedar azul sobre azul. */
.adm-distribuidor-card:hover {
  background: var(--adm-color-primary);
  border-color: var(--adm-color-primary);
}

.adm-distribuidor-card:hover .adm-distribuidor-card__ciudad,
.adm-distribuidor-card:hover .adm-distribuidor-card__nombre,
.adm-distribuidor-card:hover .adm-distribuidor-card__contacto,
.adm-distribuidor-card:hover .adm-distribuidor-card__direccion,
.adm-distribuidor-card:hover .adm-distribuidor-card__telefono,
.adm-distribuidor-card:hover .adm-distribuidor-card__web {
  color: #fff;
}

.adm-distribuidor-card:hover .adm-distribuidor-card__actions a.adm-btn--maps {
  background: #fff;
  border-color: #fff;
  color: var(--adm-color-primary);
}

.adm-distribuidor-card:hover .adm-distribuidor-card__actions a.adm-btn--maps:hover {
  background: var(--adm-color-bg-alt);
  color: var(--adm-color-primary);
}

.adm-distribuidor-card__ciudad {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  font-weight: 700;
  color: var(--adm-color-primary);
  margin: 0;
}

.adm-distribuidor-card__nombre {
  font-size: 1rem;
  font-weight: 700;
  color: #1a1a1a;
  margin: 0;
  overflow-wrap: break-word;
}

.adm-distribuidor-card__contacto,
.adm-distribuidor-card__direccion {
  font-size: 0.85rem;
  color: var(--adm-color-text-soft);
  margin: 0;
}

.adm-distribuidor-card__label {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 700;
  color: var(--adm-color-text-soft);
  margin: 4px 0 0;
}

.adm-distribuidor-card:hover .adm-distribuidor-card__label {
  color: #fff;
}

.adm-distribuidor-card__telefono {
  font-size: 0.88rem;
  color: var(--adm-color-primary);
  text-decoration: none;
  font-weight: 600;
}

.adm-distribuidor-card__telefono:hover {
  text-decoration: underline;
}

.adm-distribuidor-card__actions {
  margin-top: auto;
  padding-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* .adm-btn ya trae el pill azul de adm-filtros.css — este modificador
   solo lo estira a ancho completo dentro de la card. Selector reforzado
   (a.adm-btn) para ganar el color de texto sobre estilos de <a> del tema
   con más especificidad: el texto del botón se veía azul (heredado) en
   vez de blanco, mismo tipo de override ya visto en otros botones de
   este plugin. */
.adm-distribuidor-card__actions a.adm-btn--maps {
  width: 100%;
  padding: 8px 16px;
  font-size: 0.82rem;
  color: #fff;
}

.adm-distribuidor-card__actions a.adm-btn--maps:hover {
  color: #fff;
}

.adm-distribuidor-card__web {
  display: block;
  font-size: 0.8rem;
  color: var(--adm-color-text-soft);
  text-decoration: underline;
  text-align: left;
}

.adm-distribuidores-app .adm-no-results {
  text-align: center;
  padding: 48px 16px;
  color: var(--adm-color-text-soft);
}