/* =========================================================
   COMPONENTES DE INTERFAZ
   Botones, grupos de acción, enlaces de texto y rótulos.
   Los comparten todas las páginas del sitio, el Manual incluido.
   ========================================================= */


/* =========================================================
   01) GRUPOS DE ACCIÓN
   ========================================================= */

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
}


/* =========================================================
   02) BOTÓN BASE
   ========================================================= */

/* Botón base de todo el sitio. La altura mínima de 3 rem es la medida táctil que fija la norma de accesibilidad del proyecto. */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3rem;
  padding: 0.7rem 1.2rem;
  border: 1px solid var(--v4-petrol);
  color: var(--v4-text-heading);
  background: transparent;
  font-family: var(--v4-font-heading);
  font-size: 0.9rem;
  text-decoration: none;
}

.button:hover,
.button-primary:hover {
  border-color: var(--v4-petrol-hover);
  color: var(--v4-bg-deep);
  background: var(--v4-petrol-hover);
}

.button-primary {
  border-color: var(--v4-petrol);
  color: var(--v4-text-heading);
  background: var(--v4-petrol-shadow);
}


/* =========================================================
   03) BOTONES CON ICONO
   ========================================================= */

/* El botón con icono crece hasta 4 rem porque el icono, de 2 rem, no cabe en la altura del botón base. */
.button-with-icon {
  gap: 0.8rem;
  min-height: 4rem;
  padding: 0.9rem 1.5rem;
  border-color: var(--v4-petrol);
  color: var(--v4-text-heading);
  background: var(--v4-bg-deep);
}

.button-with-icon:hover,
.button-map:hover {
  border-color: var(--v4-petrol-hover);
  color: var(--v4-text-heading);
  background: var(--v4-bg-raised);
}

.button-map {
  border-color: var(--v4-petrol);
  color: var(--v4-text-heading);
  background: var(--v4-bg-deep);
}

.button-icon {
  flex: 0 0 auto;
  width: 2rem;
  height: 2rem;
  object-fit: contain;
}

/* El icono del mapa es apaisado y sobrescribe el tamaño cuadrado común. */
.button-icon-map {
  width: 3.75rem;
  height: 2.1rem;
}


/* =========================================================
   04) ENLACES DE TEXTO
   ========================================================= */

.text-link {
  color: var(--v4-petrol-link);
  font-family: var(--v4-font-heading);
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration-thickness: 1px;
}

/* La flecha va en contenido generado: no se selecciona con el texto ni la lee el lector de pantalla como palabra. */
.text-link::after {
  content: " →";
}


/* =========================================================
   05) RÓTULOS DE ESTADO
   ========================================================= */

.status {
  margin-bottom: 0.8rem;
  color: var(--v4-text-secondary);
  font-family: var(--v4-font-heading);
  font-size: 0.78rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}