:root {
  /* Encabezado (barra superior) */
  --header-color: rgb(0, 29, 119); /* Color 2 */

  /* Imagen de fondo en el encabezado */
  --header-background-image: none;

  /* Fondo general */
  --color-background-primary: rgb(229, 247, 247); /* Color 1 */
  --color-background-primary-content: rgba(0, 178, 172, 0.2); /* Color 1 */

  /* Texto principal */
  --color-text-primary: rgb(0, 29, 119); /* Color 3 */
  --color-text-primary-content: rgb(0, 29, 119); /* Color 3 */

  /* Botones activos, enlaces importantes */
  --color-contrasted-elements: rgb(0, 178, 172); /* Color 2 */

  /* Botones antes de hover, fondos suaves */
  --color-contrasted-elements-light: rgba(0, 178, 172, 0.2); /* versión suavizada del Color 2 */

  /* Texto dentro de botones contrastantes */
  --color-contrasted-text: white;

  /* Elementos oscuros secundarios */
  --color-dark-gray-elements: rgb(0, 29, 119); /* reutilizamos Color 3 */
}

/* ==== Botón "Download raster" con icono claro/oscuro ==== */
#mapmenu li.cutter a.rc-btn {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Icono por defecto: CLARO */
#mapmenu li.cutter a.rc-btn .rc-icon {
  display: inline-block;
  width: 18px;           /* ajusta al tamaño de tus PNG */
  height: 18px;
  flex: 0 0 18px;
  background-image: url("/custom/img/download_icon_w.png");
  background-repeat: no-repeat;
  background-size: contain;        /* o '18px 18px' si quieres exacto */
  background-position: center center;
}

/* Hover/Focus: OSCURO */
#mapmenu li.cutter a.rc-btn:hover .rc-icon,
#mapmenu li.cutter a.rc-btn:focus-visible .rc-icon {
  background-image: url("/custom/img/download_icon_b.png");
}

/* (Opcional) Ajuste fino del texto */
#mapmenu li.cutter a.rc-btn .rc-label {
  line-height: 1;
}