/* ================================ 
   CUERPO DE CADA ÍTEM DEL ACORDEÓN 
   ================================ */
.acordeon .item {
  margin: 24px 0;
  overflow: hidden;
  border: 1px solid #444;
  background: #797195;
  border-radius: 0; /* Por defecto: bordes rectos */
}

/* ================================ 
   ENCABEZADO DEL PANEL (BOTÓN) 
   ================================ */
.acordeon .titulo {
  background: #434463 !important;
  color: #fff !important;
  padding: 15px 20px 15px 40px;
  font-weight: normal;
  width: 100%;
  border: none;
  cursor: pointer;
  text-align: left;
  font-size: 16px;
  position: relative;
  transition: background 0.3s ease;
  box-sizing: border-box;
}

/* ================================ 
   FLECHITA A LA IZQUIERDA 
   ================================ */
.acordeon .titulo::after {
  content: "\25B6";
  position: absolute;
  left: 15px;
  top: 50%;
  transform: translateY(-50%);
  transition: transform 0.3s;
  background: none !important; /* Quita fondo violeta */
  padding: 0 !important;
}

/* Fondo y estilo de flechita solo en acordeones genéricos */
.acordeon:not(.antecedentes):not(.internacionales):not(.nacionales):not(.provinciales) .titulo::after {
  background: #434463;
  padding-right: 5px;
  border-radius: 4px;
}

/* ================================ 
   FLECHITA ROTADA CUANDO ESTÁ ACTIVO 
   ================================ */
.acordeon .titulo.activa::after {
  transform: translateY(-50%) rotate(90deg);
}

/* ================================ 
   CONTENIDO VISIBLE AL DESPLEGAR 
   ================================ */
.acordeon .contenido {
  display: none;
  padding: 20px;
  background: white;
  color: black;
  animation: fadeIn 0.3s ease;
}

/* ================================ 
   EFECTO DE APARICIÓN 
   ================================ */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* ================================ 
   GENÉRICOS: Bordes redondeados y fondo 
   ================================ */
.acordeon:not(.antecedentes):not(.internacionales):not(.nacionales):not(.provinciales) .item {
  border-radius: 8px !important;
  border: 1px solid #434463;
  background: #434463;
}

.acordeon:not(.antecedentes):not(.internacionales):not(.nacionales):not(.provinciales) .titulo {
  background: #434463 !important;
  color: #fff !important;
}

.acordeon:not(.antecedentes):not(.internacionales):not(.nacionales):not(.provinciales) .contenido {
  background: white;
  color: black;
}

/* ================================ 
   ACORDEÓN BLANCO (opcional)
   ================================ */
.acordeon-blanco .item {
  background: #ffffff !important;
  border-radius: 0 !important;
  border: 1px solid #444 !important;
}

.acordeon-blanco .titulo {
  background: #f0f0f0 !important;
  color: #000 !important;
  font-weight: normal !important;
}

.acordeon-blanco .contenido {
  background: #ffffff !important;
  color: #000 !important;
}

/* ================================ 
   GRILLA 
   ================================ */
.acordeon-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
}

.acordeon-grid .item {
  margin: 0 !important;
  align-self: start;
  width: 100%;
}
.acordeon-grid .titulo {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Mostrar el título completo cuando está activo */
.acordeon-grid .titulo.activa {
  white-space: normal;
  overflow: visible;
  text-overflow: unset;
}

/* ================================ 
   SECCIONES CON BORDES RECTOS Y COLORES
   ================================ */
.acordeon.antecedentes .item,
.acordeon.internacionales .item,
.acordeon.nacionales .item,
.acordeon.provinciales .item {
  border-radius: 0 !important;
}

.acordeon.antecedentes .item {
  border: 1px solid #006C7C !important;
}
.acordeon.antecedentes .titulo {
  background-color: #006C7C !important;
  color: #fff !important;
}

.acordeon.internacionales .item {
  border: 1px solid #EF476F !important;
}
.acordeon.internacionales .titulo {
  background-color: #EF476F !important;
  color: #fff !important;
}

.acordeon.nacionales .item {
  border: 1px solid #073B4C !important;
}
.acordeon.nacionales .titulo {
  background-color: #073B4C !important;
  color: #fff !important;
}

.acordeon.provinciales .item {
  border: 1px solid #118AB2 !important;
}
.acordeon.provinciales .titulo {
  background-color: #118AB2 !important;
  color: #fff !important;
}
/* Enlaces dentro del contenido del acordeón */
.acordeon .contenido a {
  font-size: 1.1em;
  font-weight: 500; /* Semi-bold */
  text-decoration: none;
  display: inline-block;
  margin-top: 10px;
}

/* Colores por tipo de acordeón */
.acordeon.antecedentes .contenido a {
  color: #006C7C;
}

.acordeon.internacionales .contenido a {
  color: #EF476F;
}

.acordeon.nacionales .contenido a {
  color: #073B4C;
}

.acordeon.provinciales .contenido a {
  color: #118AB2;
}

/* Opcional: cambio de color al pasar el mouse */
.acordeon .contenido a:hover {
  text-decoration: underline;
  opacity: 0.85;
}

/* Fondo blanco para el contenido de todas las secciones */
.acordeon.antecedentes .contenido,
.acordeon.internacionales .contenido,
.acordeon.nacionales .contenido,
.acordeon.provinciales .contenido {
  background-color: #ffffff !important;
}