/* =========================================
   OTROS IDIOMAS — CSS AISLADO (NO PISA HEADER)
========================================= */

/* ✅ NO uses :root aquí para no pisar el sitio completo.
   Usa variables LOCALES dentro de .otros-idiomas */
.otros-idiomas {
  --otros-bg: #EDEBE6;        /* Arena clara */
  --otros-card: #FAFAF7;      /* Blanco cálido */
  --otros-accent: #6B8E85;    /* Verde salvia */
  --otros-text: #333333;      /* Gris carbón */
  --otros-muted: #8B8B8B;     /* Gris suave */
  --otros-radius: 16px;

  background: var(--otros-bg);
  color: var(--otros-text);
}

/* ✅ “Firewall” para que nada dentro de otros_idiomas.css afecte el header */
.otros-idiomas .cedi-header,
.otros-idiomas .cedi-header * {
  /* no declaramos nada aquí (solo evitamos que tus reglas genéricas lo alcancen) */
}

/* ===== HEADER ===== */
.otros-idiomas .cedi-header { 
  background: var(--blanco); 
  border-bottom: 1px solid var(--line);
}
.otros-idiomas .cedi-header .navbar {
  padding: .75rem 0;
}
.otros-idiomas .cedi-logos {
  height: 44px;
  width: auto;
  object-fit: contain;
}
.otros-idiomas .cedi-nav .nav-link {
  color: var(--gris);
  font-weight: 700;
  padding: .6rem .9rem;
  border-radius: 999px;
  transition: background-color .15s ease, color .15s ease;
}
.otros-idiomas .cedi-nav .nav-link:hover {
  background: rgba(107,142,133,.10);
  color: rgba(31,42,39,.95);
}
.otros-idiomas .cedi-toggler {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: .45rem .6rem;
}

/* Títulos */
.otros-idiomas .page-title {
  font-weight: 800;
  color: var(--ink);
  margin-bottom: 0.5rem;
}
.otros-idiomas .page-subtitle {
  color: var(--salvia);
  font-weight: 700;
  margin-bottom: 2rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 1.1rem;
}

/* =========================
   Navegación Tipo "Pills" (Diseño Nuevo)
========================= */
.otros-idiomas .nav-pills-custom {
  background-color: #fff;
  padding: 0.5rem;
  border-radius: 50px;
  display: inline-flex;
  box-shadow: 0 4px 20px rgba(0,0,0,0.05);
  border: 1px solid rgba(0,0,0,0.05);
  margin-bottom: 3rem;
  justify-content: center;
  flex-wrap: wrap;
  gap: 5px;
}

.otros-idiomas .nav-pills-custom .nav-link {
  color: var(--gris);
  font-weight: 700;
  padding: 0.6rem 1.5rem;
  border-radius: 50px;
  border: none;
  transition: all 0.2s ease;
  background: transparent;
}

.otros-idiomas .nav-pills-custom .nav-link:hover {
  color: var(--salvia);
  background-color: rgba(107, 142, 133, 0.05);
}

.otros-idiomas .nav-pills-custom .nav-link.active {
  background-color: var(--salvia);
  color: #fff;
  box-shadow: 0 4px 10px rgba(107, 142, 133, 0.3);
}

/* =========================
   Panel de Contenido
========================= */
.otros-idiomas .tab-pane {
  animation: fadeIn 0.4s ease-out;
}

.otros-idiomas .academic-panel {
  background-color: #fff;
  border: 1px solid rgba(0,0,0,0.08);
  border-left: 5px solid var(--salvia);
  border-radius: 8px;
  padding: 30px 40px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.04);
  margin-bottom: 2rem;
}

.otros-idiomas .academic-panel h2 {
  font-weight: 700;
  font-size: 1.5rem;
  margin-bottom: 1.2rem;
  color: var(--ink);
}

.otros-idiomas .academic-panel h3 {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--salvia);
  margin-top: 1.5rem;
  margin-bottom: 0.5rem;
}

/* Listas y texto */
.otros-idiomas ul, .otros-idiomas ol {
  padding-left: 1.2rem;
}

.otros-idiomas li {
  margin-bottom: 0.5rem;
  line-height: 1.6;
  color: #444;
}

.otros-idiomas li::marker {
  color: var(--salvia);
  font-weight: bold;
}

/* Banderas */
.otros-idiomas .flags-wrapper {
  margin: 2rem 0;
}

.otros-idiomas .flag-item {
  text-align: center;
  transition: transform 0.2s ease;
  cursor: default;
}

.otros-idiomas .flag-item:hover {
  transform: translateY(-5px);
}

.otros-idiomas .flag-img {
  width: 64px;
  height: 64px;
  object-fit: cover;
  border-radius: 50%;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  margin-bottom: 0.5rem;
  border: 3px solid #fff;
}

.otros-idiomas .flag-label {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--gris);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.otros-idiomas .skills-text {
  font-size: 0.95rem;
  color: #666;
  margin-top: 1.5rem;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 768px) {
  .otros-idiomas .nav-pills-custom {
    width: 100%;
    display: flex;
    flex-direction: column;
    border-radius: 12px;
  }

  .otros-idiomas .nav-pills-custom .nav-link {
    width: 100%;
    border-radius: 8px;
    text-align: center;
    margin-bottom: 5px;
  }

  .otros-idiomas .academic-panel {
    padding: 24px;
  }
}

/* =========================
   Acordeón – Proceso de Inscripción
========================= */

/* Item */
.otros-idiomas .accordion-item {
  border: 1px solid rgba(107, 142, 133, 0.35);
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 0.75rem;
  background-color: #fff;
}

/* Botón base */
.otros-idiomas .accordion-button {
  font-weight: 700;
  color: var(--otros-text);
  background-color: #fff;
  padding: 1rem 1.25rem;
}

/* Botón activo – Verde salvia sólido (sin transparencia) */
.otros-idiomas .accordion-button:not(.collapsed) {
  background-color: var(--otros-accent); /* #6B8E85 */
  color: #fff;
  box-shadow: none;
}

/* Hover */
.otros-idiomas .accordion-button:hover {
  background-color: rgba(107, 142, 133, 0.12);
}

/* Hover cuando está activo */
.otros-idiomas .accordion-button:not(.collapsed):hover {
  background-color: #5f8078; /* salvia un poco más oscuro */
}

/* Flecha base */
.otros-idiomas .accordion-button::after {
  filter: hue-rotate(90deg) saturate(1.2);
}

/* Flecha en blanco cuando está activo */
.otros-idiomas .accordion-button:not(.collapsed)::after {
  filter: brightness(0) invert(1);
}

/* Focus accesible (sin azul) */
.otros-idiomas .accordion-button:focus {
  border-color: var(--otros-accent);
  box-shadow: 0 0 0 0.2rem rgba(107, 142, 133, 0.35);
}

/* Cuerpo */
.otros-idiomas .accordion-body {
  background-color: var(--otros-card);
  padding: 1.25rem 1.5rem;
  color: #444;
  line-height: 1.65;
}