/* Marco de la Academia JorgeEduAI · brand v1
 *
 * Esto es el MARCO, no la estética del curso. La paleta y el carácter de cada página los
 * define su estilo.css y mandan sobre el contenido (doctrina, estándar 2). Aquí vive lo
 * único compartido: la barra superior, la tipografía base y la escala de espaciado.
 *
 * INMUTABLE. Este directorio no se edita nunca: las páginas archivadas dependen de él para
 * no romperse jamás. Un rediseño es /brand/v2/. El gate lo hace cumplir: BRAND-MANIFIESTO.json
 * guarda el hash de cada archivo y el test se pone rojo si alguno cambia.
 */

:root {
  /* Marco: la barra y sus piezas. Deliberadamente sobrio, para no pelear con el curso. */
  --aca-barra-fondo: #12171f;
  --aca-barra-texto: #f2f4f7;
  --aca-barra-tenue: #9aa5b4;
  --aca-barra-borde: #263041;
  --aca-acento: #d98c3f;

  /* Badges de estado del ciclo de vida (borrador, activo, archivado). */
  --aca-badge-activo-fondo: #1d3a2a;
  --aca-badge-activo-texto: #7fd6a2;
  --aca-badge-borrador-fondo: #3a341d;
  --aca-badge-borrador-texto: #d6c47f;
  --aca-badge-archivado-fondo: #2b2f36;
  --aca-badge-archivado-texto: #a8b2be;

  /* Tipografía base. El curso puede cambiarla en su contenido; la barra usa esta. */
  --aca-fuente: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --aca-fuente-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  /* Escala de espaciado. */
  --aca-esp-1: 0.25rem;
  --aca-esp-2: 0.5rem;
  --aca-esp-3: 0.75rem;
  --aca-esp-4: 1rem;
  --aca-esp-6: 1.5rem;

  --aca-barra-alto: 3rem;
  --aca-radio: 4px;
}

.aca-barra {
  position: sticky;
  top: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  gap: var(--aca-esp-4);
  min-height: var(--aca-barra-alto);
  padding: 0 var(--aca-esp-4);
  background: var(--aca-barra-fondo);
  color: var(--aca-barra-texto);
  border-bottom: 1px solid var(--aca-barra-borde);
  font-family: var(--aca-fuente);
  font-size: 0.875rem;
  line-height: 1.4;
  box-sizing: border-box;
}

.aca-barra a {
  color: var(--aca-barra-texto);
  text-decoration: none;
}

.aca-barra a:hover,
.aca-barra a:focus-visible {
  text-decoration: underline;
}

.aca-barra :focus-visible {
  outline: 2px solid var(--aca-acento);
  outline-offset: 2px;
}

.aca-barra__marca {
  font-weight: 600;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.aca-barra__marca::before {
  content: "";
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  margin-right: var(--aca-esp-2);
  border-radius: 50%;
  background: var(--aca-acento);
  vertical-align: 0.05em;
}

.aca-barra__curso {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--aca-barra-tenue);
}

.aca-barra__badge {
  flex: 0 0 auto;
  padding: var(--aca-esp-1) var(--aca-esp-3);
  border-radius: var(--aca-radio);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.aca-barra__badge--activo {
  background: var(--aca-badge-activo-fondo);
  color: var(--aca-badge-activo-texto);
}

.aca-barra__badge--borrador {
  background: var(--aca-badge-borrador-fondo);
  color: var(--aca-badge-borrador-texto);
}

.aca-barra__badge--archivado {
  background: var(--aca-badge-archivado-fondo);
  color: var(--aca-badge-archivado-texto);
}

@media (max-width: 40rem) {
  .aca-barra {
    gap: var(--aca-esp-2);
    padding: 0 var(--aca-esp-3);
    font-size: 0.8125rem;
  }

  .aca-barra__curso {
    display: none;
  }
}