/* ============================================================
   HISTORIA ARGENTINA — COMPONENTS CSS
   Cards, línea de tiempo, quiz, flashcards, acordeones
   ============================================================ */

/* === CARDS DE PERÍODOS === */
.grid-periodos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: var(--space-6);
}

.card-periodo {
  background: var(--bg-card);
  border: 1px solid var(--borde-suave);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: var(--trans-normal);
  cursor: pointer;
  box-shadow: var(--sombra-card);
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
}

.card-periodo:hover {
  transform: translateY(-4px);
  box-shadow: var(--sombra-hover);
  border-color: var(--borde-medio);
}

.card-periodo-franja {
  height: 5px;
  width: 100%;
}

.card-periodo-cuerpo {
  padding: var(--space-6);
  flex: 1;
  display: flex;
  flex-direction: column;
}

.card-periodo-rango {
  font-family: var(--font-mono);
  font-size: var(--size-xs);
  color: var(--text-suave);
  letter-spacing: 0.08em;
  margin-bottom: var(--space-2);
}

.card-periodo-titulo {
  font-family: var(--font-display);
  font-size: var(--size-xl);
  font-weight: 700;
  color: var(--text-principal);
  margin-bottom: var(--space-3);
  line-height: 1.3;
}

.card-periodo-desc {
  font-size: var(--size-sm);
  color: var(--text-secundario);
  line-height: 1.6;
  flex: 1;
  margin-bottom: var(--space-4);
}

.card-periodo-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: var(--space-4);
  border-top: 1px solid var(--borde-suave);
}

.card-periodo-eventos-count {
  font-family: var(--font-mono);
  font-size: var(--size-xs);
  color: var(--text-suave);
}

.card-periodo-arrow {
  font-size: var(--size-lg);
  color: var(--color-celeste-dp);
  transition: var(--trans-rapida);
}

.card-periodo:hover .card-periodo-arrow {
  transform: translateX(4px);
}

/* === LÍNEA DE TIEMPO PRINCIPAL === */
.linea-tiempo {
  position: relative;
  padding: var(--space-8) 0;
}

.linea-tiempo::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 0; bottom: 0;
  width: 2px;
  background: linear-gradient(
    to bottom,
    transparent,
    var(--borde-medio) 5%,
    var(--borde-medio) 95%,
    transparent
  );
  transform: translateX(-50%);
}

.lt-item {
  display: grid;
  grid-template-columns: 1fr 48px 1fr;
  gap: 0 var(--space-4);
  margin-bottom: var(--space-8);
  align-items: start;
  animation: fadeIn 0.4s ease both;
}

.lt-item:nth-child(odd) .lt-contenido  { grid-column: 1; text-align: right; }
.lt-item:nth-child(odd) .lt-punto      { grid-column: 2; }
.lt-item:nth-child(odd) .lt-vacio      { grid-column: 3; }

.lt-item:nth-child(even) .lt-vacio     { grid-column: 1; }
.lt-item:nth-child(even) .lt-punto     { grid-column: 2; }
.lt-item:nth-child(even) .lt-contenido { grid-column: 3; text-align: left; }

.lt-punto {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
}

.lt-punto-circulo {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--bg-card);
  border: 3px solid var(--color-celeste-dp);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 0 0 4px var(--bg-principal);
  z-index: 1;
  position: relative;
}

.lt-punto-año {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  color: var(--color-celeste-dp);
  font-weight: 500;
  white-space: nowrap;
}

.lt-contenido {
  background: var(--bg-card);
  border: 1px solid var(--borde-suave);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  box-shadow: var(--sombra-card);
  transition: var(--trans-normal);
}

.lt-contenido:hover {
  box-shadow: var(--sombra-hover);
  border-color: var(--borde-medio);
}

.lt-periodo-tag {
  font-family: var(--font-mono);
  font-size: var(--size-xs);
  color: var(--text-suave);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: var(--space-2);
}

.lt-titulo {
  font-family: var(--font-display);
  font-size: var(--size-lg);
  font-weight: 700;
  color: var(--text-principal);
  margin-bottom: var(--space-2);
  line-height: 1.3;
}

.lt-descripcion {
  font-size: var(--size-sm);
  color: var(--text-secundario);
  line-height: 1.6;
}

.lt-vacio { /* espacio en blanco del otro lado */ }

/* === PANEL DE DETALLE DE PERÍODO === */
.panel-periodo {
  display: none;
  background: var(--bg-card);
  border: 1px solid var(--borde-suave);
  border-radius: var(--radius-xl);
  padding: var(--space-10);
  margin: var(--space-6) 0;
  box-shadow: var(--sombra-pronunciada);
  animation: fadeIn 0.3s ease;
}

.panel-periodo.visible { display: block; }

.panel-periodo-header {
  display: flex;
  gap: var(--space-6);
  margin-bottom: var(--space-8);
  flex-wrap: wrap;
  align-items: flex-start;
}

.panel-periodo-franja {
  width: 8px;
  border-radius: 4px;
  flex-shrink: 0;
  align-self: stretch;
  min-height: 60px;
}

.panel-periodo-info { flex: 1; }

.panel-periodo-rango {
  font-family: var(--font-mono);
  font-size: var(--size-sm);
  color: var(--text-suave);
  margin-bottom: var(--space-2);
}

.panel-periodo-titulo {
  font-size: clamp(var(--size-2xl), 3vw, var(--size-4xl));
  margin-bottom: var(--space-3);
}

.panel-periodo-desc {
  color: var(--text-secundario);
  font-size: var(--size-md);
  line-height: 1.7;
  max-width: 70ch;
}

.panel-tabs {
  display: flex;
  gap: var(--space-2);
  border-bottom: 2px solid var(--borde-suave);
  margin-bottom: var(--space-8);
  flex-wrap: wrap;
}

.panel-tab {
  padding: var(--space-3) var(--space-5);
  border: none;
  background: none;
  font-family: var(--font-body);
  font-size: var(--size-sm);
  font-weight: 600;
  color: var(--text-suave);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  transition: var(--trans-rapida);
}

.panel-tab:hover { color: var(--text-principal); }
.panel-tab.activo {
  color: var(--color-celeste-dp);
  border-bottom-color: var(--color-celeste-dp);
}

.panel-tab-contenido { display: none; }
.panel-tab-contenido.activo { display: block; animation: fadeIn 0.2s ease; }

/* === EVENTOS TABLA === */
.eventos-lista {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.evento-item {
  display: flex;
  gap: var(--space-4);
  align-items: baseline;
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--borde-suave);
}

.evento-año {
  font-family: var(--font-mono);
  font-size: var(--size-sm);
  font-weight: 500;
  color: var(--color-celeste-dp);
  min-width: 48px;
  flex-shrink: 0;
}

.evento-texto {
  font-size: var(--size-sm);
  color: var(--text-principal);
  line-height: 1.5;
}

/* === LOGROS Y DESAFÍOS === */
.logros-desafios {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6);
}

.logros-col, .desafios-col {
  background: var(--bg-principal);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
}

.logros-col { border-left: 4px solid var(--color-verde-selva); }
.desafios-col { border-left: 4px solid var(--color-rojo-patria); }

.logros-titulo, .desafios-titulo {
  font-family: var(--font-display);
  font-size: var(--size-lg);
  margin-bottom: var(--space-4);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.logros-titulo { color: var(--color-verde-selva); }
.desafios-titulo { color: var(--color-rojo-patria); }

.logros-lista li, .desafios-lista li {
  padding: var(--space-2) 0;
  font-size: var(--size-sm);
  color: var(--text-secundario);
  border-bottom: 1px solid var(--borde-suave);
  display: flex;
  gap: var(--space-2);
  align-items: baseline;
}

.logros-lista li::before { content: '✓'; color: var(--color-verde-selva); font-weight: 700; flex-shrink: 0; }
.desafios-lista li::before { content: '×'; color: var(--color-rojo-patria); font-weight: 700; flex-shrink: 0; }

/* Caja de debate */
.caja-debate {
  background: linear-gradient(135deg, rgba(116,172,223,0.08), rgba(200,150,42,0.08));
  border: 1px solid var(--borde-suave);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  margin: var(--space-6) 0;
}

.caja-debate-titulo {
  font-family: var(--font-display);
  font-size: var(--size-lg);
  color: var(--color-oro);
  margin-bottom: var(--space-3);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.caja-debate-texto {
  font-size: var(--size-sm);
  color: var(--text-secundario);
  line-height: 1.7;
  font-style: italic;
}

/* === QUIZ === */
.quiz-contenedor {
  max-width: 720px;
  margin: 0 auto;
}

.quiz-progreso {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-bottom: var(--space-8);
}

.quiz-barra-bg {
  flex: 1;
  height: 6px;
  background: var(--borde-suave);
  border-radius: 3px;
  overflow: hidden;
}

.quiz-barra-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--color-celeste), var(--color-celeste-dp));
  border-radius: 3px;
  transition: width 0.4s ease;
}

.quiz-conteo {
  font-family: var(--font-mono);
  font-size: var(--size-sm);
  color: var(--text-suave);
  white-space: nowrap;
}

.quiz-dificultad {
  display: flex;
  gap: var(--space-2);
}

.quiz-pregunta-card {
  background: var(--bg-card);
  border: 1px solid var(--borde-suave);
  border-radius: var(--radius-xl);
  padding: var(--space-8);
  box-shadow: var(--sombra-card);
  animation: fadeIn 0.3s ease;
}

.quiz-numero {
  font-family: var(--font-mono);
  font-size: var(--size-xs);
  color: var(--text-suave);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: var(--space-3);
}

.quiz-pregunta-texto {
  font-family: var(--font-display);
  font-size: clamp(var(--size-lg), 2.5vw, var(--size-2xl));
  font-weight: 600;
  color: var(--text-principal);
  line-height: 1.3;
  margin-bottom: var(--space-8);
}

.quiz-opciones {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.quiz-opcion {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  background: var(--bg-principal);
  border: 2px solid var(--borde-suave);
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: var(--trans-normal);
  font-size: var(--size-base);
  color: var(--text-principal);
  text-align: left;
  font-family: var(--font-body);
  width: 100%;
}

.quiz-opcion:hover:not(:disabled) {
  border-color: var(--color-celeste);
  background: rgba(116,172,223,0.06);
  transform: translateX(4px);
}

.quiz-opcion:disabled { cursor: default; }

.quiz-opcion.correcta {
  border-color: var(--color-verde-selva);
  background: rgba(45, 106, 79, 0.08);
}

.quiz-opcion.incorrecta {
  border-color: var(--color-rojo-patria);
  background: rgba(160, 39, 26, 0.06);
}

.quiz-opcion-letra {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid var(--borde-medio);
  font-family: var(--font-mono);
  font-size: var(--size-xs);
  font-weight: 700;
  flex-shrink: 0;
  transition: var(--trans-rapida);
}

.quiz-opcion.correcta .quiz-opcion-letra {
  background: var(--color-verde-selva);
  border-color: var(--color-verde-selva);
  color: white;
}

.quiz-opcion.incorrecta .quiz-opcion-letra {
  background: var(--color-rojo-patria);
  border-color: var(--color-rojo-patria);
  color: white;
}

.quiz-explicacion {
  margin-top: var(--space-6);
  padding: var(--space-5);
  background: var(--bg-pergamino);
  border-radius: var(--radius-lg);
  border-left: 4px solid var(--color-celeste-dp);
  animation: fadeIn 0.3s ease;
  display: none;
}

.quiz-explicacion.visible { display: block; }

.quiz-explicacion-titulo {
  font-family: var(--font-display);
  font-size: var(--size-base);
  font-weight: 700;
  color: var(--color-celeste-dp);
  margin-bottom: var(--space-2);
}

.quiz-explicacion-texto {
  font-size: var(--size-sm);
  color: var(--text-secundario);
  line-height: 1.6;
}

.quiz-acciones {
  display: flex;
  justify-content: flex-end;
  margin-top: var(--space-6);
  gap: var(--space-3);
}

/* Resultado final */
.quiz-resultado {
  text-align: center;
  padding: var(--space-12);
  animation: fadeIn 0.5s ease;
}

.quiz-puntaje {
  font-family: var(--font-display);
  font-size: 5rem;
  font-weight: 900;
  color: var(--color-celeste-dp);
  line-height: 1;
  margin-bottom: var(--space-2);
}

.quiz-puntaje-label {
  font-family: var(--font-mono);
  font-size: var(--size-sm);
  color: var(--text-suave);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: var(--space-6);
}

.quiz-mensaje {
  font-size: var(--size-lg);
  color: var(--text-secundario);
  margin-bottom: var(--space-8);
}

/* === FLASHCARDS === */
.flashcards-filtros {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-bottom: var(--space-8);
  justify-content: center;
}

.filtro-btn {
  padding: var(--space-2) var(--space-4);
  border: 2px solid var(--borde-medio);
  border-radius: 999px;
  background: none;
  font-size: var(--size-sm);
  color: var(--text-secundario);
  cursor: pointer;
  transition: var(--trans-rapida);
}

.filtro-btn:hover { border-color: var(--color-celeste); color: var(--color-celeste-dp); }
.filtro-btn.activo { background: var(--color-celeste-dp); border-color: var(--color-celeste-dp); color: white; }

.flashcards-deck {
  perspective: 1200px;
  max-width: 600px;
  margin: 0 auto;
}

.flashcard-wrapper {
  position: relative;
  height: 320px;
}

.flashcard {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
}

.flashcard.volteada { transform: rotateY(180deg); }

.flashcard-cara {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border-radius: var(--radius-xl);
  border: 1px solid var(--borde-suave);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-10);
  text-align: center;
  box-shadow: var(--sombra-hover);
}

.flashcard-frente {
  background: var(--bg-card);
}

.flashcard-dorso {
  background: linear-gradient(135deg, var(--color-celeste-dp) 0%, #2D5A8E 100%);
  transform: rotateY(180deg);
  color: white;
}

.flashcard-indicador {
  font-family: var(--font-mono);
  font-size: var(--size-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: var(--space-4);
}

.flashcard-frente .flashcard-indicador { color: var(--text-suave); }
.flashcard-dorso .flashcard-indicador  { color: rgba(255,255,255,0.6); }

.flashcard-texto {
  font-family: var(--font-display);
  font-size: clamp(var(--size-lg), 2.5vw, var(--size-2xl));
  font-weight: 600;
  line-height: 1.3;
}

.flashcard-frente .flashcard-texto { color: var(--text-principal); }
.flashcard-dorso .flashcard-texto  { color: white; font-size: clamp(var(--size-base), 2vw, var(--size-lg)); font-weight: 400; }

.flashcard-hint {
  margin-top: var(--space-6);
  font-family: var(--font-mono);
  font-size: var(--size-xs);
  opacity: 0.5;
}

.flashcards-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-6);
  margin-top: var(--space-8);
}

.flashcards-conteo {
  font-family: var(--font-mono);
  font-size: var(--size-sm);
  color: var(--text-suave);
  min-width: 80px;
  text-align: center;
}

/* === SECCIÓN CORRIENTES === */
.corrientes-hero {
  background: linear-gradient(135deg, var(--color-verde-selva) 0%, #1A4A30 100%);
  color: white;
  padding: var(--space-16) 0;
  position: relative;
  overflow: hidden;
}

.corrientes-hero::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -20%;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(116,172,223,0.1) 0%, transparent 70%);
  pointer-events: none;
}

.corrientes-titulo {
  font-size: clamp(var(--size-3xl), 5vw, var(--size-5xl));
  color: white;
  margin-bottom: var(--space-4);
}

.corrientes-subtitulo {
  font-size: var(--size-lg);
  color: rgba(255,255,255,0.7);
  max-width: 560px;
}

.corrientes-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-8);
}

.corrientes-dato-card {
  background: var(--bg-card);
  border: 1px solid var(--borde-suave);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow: var(--sombra-card);
}

.corrientes-dato-titulo {
  font-family: var(--font-display);
  font-size: var(--size-xl);
  color: var(--color-verde-selva);
  margin-bottom: var(--space-4);
  border-bottom: 2px solid var(--color-verde-selva);
  padding-bottom: var(--space-3);
}

.historia-hito {
  display: flex;
  gap: var(--space-4);
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--borde-suave);
}

.historia-hito-periodo {
  font-family: var(--font-mono);
  font-size: var(--size-xs);
  color: var(--color-verde-selva);
  min-width: 120px;
  flex-shrink: 0;
  padding-top: 2px;
}

.historia-hito-texto {
  font-size: var(--size-sm);
  color: var(--text-secundario);
  line-height: 1.6;
}

/* Ituzaingó card especial */
.ituzaingo-card {
  background: linear-gradient(135deg, rgba(45,106,79,0.06) 0%, rgba(116,172,223,0.06) 100%);
  border: 2px solid var(--color-verde-selva);
  border-radius: var(--radius-xl);
  padding: var(--space-8);
  margin: var(--space-8) 0;
}

.ituzaingo-titulo {
  font-family: var(--font-display);
  font-size: var(--size-3xl);
  color: var(--color-verde-selva);
  margin-bottom: var(--space-2);
}

.ituzaingo-subtitulo {
  font-family: var(--font-mono);
  font-size: var(--size-sm);
  color: var(--text-suave);
  margin-bottom: var(--space-6);
}

/* === FILTROS DE QUIZ === */
.quiz-config {
  background: var(--bg-secundario);
  border-radius: var(--radius-xl);
  padding: var(--space-8);
  margin-bottom: var(--space-8);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6);
}

.quiz-config-titulo {
  font-family: var(--font-display);
  font-size: var(--size-lg);
  color: var(--text-principal);
  margin-bottom: var(--space-3);
  grid-column: 1 / -1;
}

.quiz-config label {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--size-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-suave);
  margin-bottom: var(--space-2);
}

.quiz-config select {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  border: 2px solid var(--borde-medio);
  border-radius: var(--radius-md);
  background: var(--bg-card);
  color: var(--text-principal);
  font-size: var(--size-sm);
  cursor: pointer;
}

.quiz-config select:focus { outline: 2px solid var(--color-celeste); border-color: transparent; }

/* === PERSONAJES GRID === */
.personajes-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--space-4);
}

.personaje-card {
  background: var(--bg-card);
  border: 1px solid var(--borde-suave);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  text-align: center;
  box-shadow: var(--sombra-card);
}

.personaje-avatar {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--bg-secundario), var(--borde-medio));
  margin: 0 auto var(--space-3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
}

.personaje-nombre {
  font-family: var(--font-display);
  font-size: var(--size-base);
  font-weight: 700;
  color: var(--text-principal);
  margin-bottom: var(--space-1);
}

.personaje-rol {
  font-size: var(--size-xs);
  color: var(--text-suave);
  line-height: 1.5;
}

/* === BUSCADOR === */
.buscador-contenedor {
  position: relative;
  max-width: 480px;
  margin: 0 auto var(--space-8);
}

.buscador-input {
  width: 100%;
  padding: var(--space-4) var(--space-5) var(--space-4) var(--space-12);
  border: 2px solid var(--borde-medio);
  border-radius: 999px;
  background: var(--bg-card);
  font-size: var(--size-base);
  color: var(--text-principal);
  box-shadow: var(--sombra-card);
  transition: var(--trans-normal);
}

.buscador-input:focus {
  outline: none;
  border-color: var(--color-celeste-dp);
  box-shadow: 0 0 0 3px rgba(116,172,223,0.15);
}

.buscador-icono {
  position: absolute;
  left: var(--space-5);
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-suave);
  pointer-events: none;
}

/* === MENSAJE VACÍO === */
.estado-vacio {
  text-align: center;
  padding: var(--space-16);
  color: var(--text-suave);
}

.estado-vacio-emoji {
  font-size: 3rem;
  margin-bottom: var(--space-4);
}

.estado-vacio-texto {
  font-size: var(--size-lg);
  margin-bottom: var(--space-2);
}

/* === RESPONSIVE COMPONENTS === */
@media (max-width: 768px) {
  /* Timeline mobile: single column */
  .linea-tiempo::before { left: 24px; }

  .lt-item {
    grid-template-columns: 48px 1fr;
    grid-template-rows: auto;
  }

  .lt-item:nth-child(odd) .lt-contenido,
  .lt-item:nth-child(even) .lt-contenido {
    grid-column: 2; grid-row: 1; text-align: left;
  }

  .lt-item:nth-child(odd) .lt-punto,
  .lt-item:nth-child(even) .lt-punto {
    grid-column: 1; grid-row: 1;
  }

  .lt-vacio { display: none; }

  .logros-desafios { grid-template-columns: 1fr; }
  .corrientes-grid { grid-template-columns: 1fr; }
  .quiz-config { grid-template-columns: 1fr; }
  .grid-periodos { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  .flashcard-wrapper { height: 260px; }
  .flashcard-cara { padding: var(--space-6); }
  .panel-periodo { padding: var(--space-6); }
  .quiz-pregunta-card { padding: var(--space-5); }
}