@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 */
}


/* ─────────── IDENTIDAD DE MARCA ─────────── */
/* Color de acento celeste (basado en tu Login) */
.text-brand-accent {
    color: var(--primary-color) !important;
}

/* ─────────── TABLA CORPORATIVA ─────────── */
/* Encabezado de tabla emparejado con los Acordeones (Azul Acero) */
.table-modern thead th {
    background-color: var(--primary-color) !important; /* Gris azulado medio */
    color: #ffffff !important; /* Texto blanco */
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.5px;
    border-bottom: none; /* Quitamos el borde gris */
    padding-top: 1rem;
    padding-bottom: 1rem;
}

/* Botón principal corporativo */
.btn-brand-primary {
    background-color: var(--btn-primary-color) !important;
    color: #ffffff !important;
    border: none;
    font-weight: 500;
    transition: all 0.2s ease;
}
.btn-brand-primary:hover {
    background-color: var(--btn-hover-color) !important; /* Se oscurece un poco al pasar el mouse */
    color: #ffffff !important;
}