/* ═══════════════════════════════════════════════════════════════════════════
   HOUZAPP v2 · A quién llamar
   La lista de contactos de la copropiedad, tal como se ve con una mano y de
   pie en el pasillo.
   ═══════════════════════════════════════════════════════════════════════════ */


.grupo-contactos {
  margin-bottom: var(--e-8);
}

.contactos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr));
  gap: var(--e-3);
  margin-top: var(--e-3);
  padding: 0;
  list-style: none;
}


/* ── Una tarjeta ────────────────────────────────────────────────────────────
   El borde de la izquierda dice de qué es el contacto. Emergencias en rojo no
   es decoración: es lo que hace que el ojo lo encuentre sin leer. */

.contacto {
  display: flex;
  flex-direction: column;
  gap: var(--e-2);
  padding: var(--e-4);
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-left: 4px solid var(--contacto-color, var(--borde-fuerte));
  border-radius: var(--radio-lg);
}

.contacto--emergencias    { --contacto-color: var(--peligro); }
.contacto--seguridad      { --contacto-color: var(--alerta); }
.contacto--administracion { --contacto-color: var(--marca); }
.contacto--mantenimiento  { --contacto-color: var(--exito); }

.contacto__cabeza {
  display: flex;
  align-items: flex-start;
  gap: var(--e-3);
}

.contacto__icono {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  margin-top: 2px;
  color: var(--contacto-color, var(--texto-tenue));
}

.contacto__nombre {
  display: block;
  font-size: var(--t-lg);
  font-weight: var(--peso-fuerte);
  color: var(--texto);
  /* Los nombres largos —«Ascensores y Mantenimientos del Valle S.A.S.»— no
     pueden desbordar la tarjeta. */
  word-break: break-word;
}

.contacto__cargo {
  display: block;
  font-size: var(--t-sm);
  color: var(--texto-suave);
}

.contacto__horario,
.contacto__nota {
  /* `base.css` le pone a los párrafos un tope de ancho de lectura. Dentro de
     una tarjeta estrecha ese tope sobra y deja el texto colgando a la
     izquierda. */
  max-width: none;
  margin: 0;
  font-size: var(--t-sm);
  color: var(--texto-suave);
}

.contacto__nota {
  color: var(--texto-tenue);
  font-style: italic;
}


/* ── Los botones de contacto ────────────────────────────────────────────────
   Cada uno es un enlace de verdad: `tel:`, `wa.me`, `mailto:`. Quien abre
   esto suele tener prisa, y un número para copiar y pegar es un número que no
   se llama.

   Altura mínima de 44px: es el objetivo táctil que recomienda Apple, y aquí se
   pulsa de pie y muchas veces con la otra mano ocupada. */

.contacto__vias {
  display: flex;
  flex-direction: column;
  gap: var(--e-2);
  margin-top: var(--e-1);
}

.contacto__via {
  display: flex;
  align-items: center;
  gap: var(--e-2);
  min-height: 44px;
  padding: var(--e-2) var(--e-3);
  background: var(--superficie-2);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  color: var(--texto);
  text-decoration: none;
}

.contacto__via:hover,
.contacto__via:focus-visible {
  border-color: var(--marca);
  color: var(--marca);
}

.contacto__via svg {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
}

.contacto__via-accion {
  font-size: var(--t-sm);
  font-weight: var(--peso-medio);
}

.contacto__via-dato {
  margin-left: auto;
  font-size: var(--t-sm);
  color: var(--texto-suave);
  /* El correo es lo único de aquí que puede ser muy largo. Se recorta en vez
     de empujar la acción fuera de la tarjeta. */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 620px) {
  .contactos {
    grid-template-columns: 1fr;
  }

  /* En pantalla estrecha el dato se va debajo de la acción en vez de
     competir con ella por el ancho. */
  .contacto__via {
    flex-wrap: wrap;
  }

  .contacto__via-dato {
    flex-basis: 100%;
    margin-left: 26px;
  }
}