@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src:
    url("../fonts/Roboto-Regular.b1955a1d6cc0.woff2") format("woff2"),
    url("../fonts/Roboto-Regular.265feff0d6c8.woff") format("woff"),
    url("../fonts/Roboto-Regular.303c6d9e1616.ttf") format("truetype");
}

:root {
  --primary-color: #111827;
  --btn-primary-color: #273e65;
  --btn-hover-color: #345995;
  --btn-disabled-color: #b0b0b0;
  --background-color: #f4f6fb;
  --grafico-color-primario: #5470c6;
  --grafico-color-segundario: #ee6666;
  --bs-body-font-family: "Roboto", sans-serif;
}

html {
  font-size: 14px;
}

.accordion-button {
  /* Reduce el tamaño del caret */
  --bs-accordion-btn-icon-width: 0.75rem;
  /* horizontales */
  --bs-accordion-btn-padding-x: 0.8rem;
  /* verticales */
  --bs-accordion-btn-padding-y: 0.3rem;
}

h1 {
  font-size: clamp(1.5rem, 5vw + 1rem, 2rem);
  color: var(--primary-color);
}

h2.accordion-header button {
  font-size: clamp(1.2rem, 4vw + 0.5rem, 1.4rem);
  color: var(--primary-color);
}

.accordion .accordion-item {
  border: none;
  background: transparent;
  margin-bottom: 1.5rem !important;
}

.accordion .accordion-body {
  padding: 1.5rem 0.5rem; /* Más espacio interior */
}

/* Color base del botón del acordeón */
.accordion-button {
  border-left: 4px solid transparent; /* Preparamos el borde */
  font-weight: 600;
  box-shadow: none !important; /* Quitamos el recuadro azul por defecto al hacer clic */
}

/* Color cuando el acordeón está ABIERTO */
.accordion-button:not(.collapsed) {
  border-left: 4px solid #0ea5e9 !important; /* La línea celeste de tu marca */
}

/* Color del icono de la flechita para que coincida */
.accordion-button:not(.collapsed)::after {
  filter: invert(41%) sepia(99%) saturate(1660%) hue-rotate(174deg)
    brightness(96%) contrast(97%); /* Truco para volver la flecha celeste */
}