/* ============================================================
   Tema: Data Science Espacial — Presentación Docente
   Paleta: Azul profundo · Gris pizarra · Tierra · Blanco roto
   ============================================================ */

/* --- Variables de color --- */
:root {
  --azul-oscuro:   #1B3A6B;
  --azul-medio:    #2C5F8A;
  --azul-claro:    #4A90C4;
  --gris-pizarra:  #4A5568;
  --gris-suave:    #A0AEC0;
  --tierra:        #C4956A;
  --tierra-oscuro: #8B6340;
  --blanco-roto:   #F7F4F0;
  --blanco:        #FFFFFF;
  --fondo-claro:   #EEF2F7;
}

/* --- Fondo general de la presentación --- */
.reveal-viewport {
  background: var(--fondo-claro);
}

.reveal .slides {
  font-family: 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  color: var(--azul-oscuro);
  line-height: 1.2;
}

/* --- Encabezados --- */
.reveal h1, .reveal h2 {
  color: var(--azul-oscuro);
  font-weight: 700;
  border-bottom: 3px solid var(--tierra);
  padding-bottom: 0.2em;
  margin-bottom: 0.6em;
  letter-spacing: -0.02em;
}

.reveal h3, .reveal h4 {
  color: var(--azul-medio);
  font-weight: 600;
}

/* --- Diapositiva de título (slide 1) --- */
.reveal .title-slide {
  background: linear-gradient(135deg, var(--azul-oscuro) 0%, var(--azul-medio) 60%, var(--azul-claro) 100%);
  color: var(--blanco) !important;
}

.reveal .title-slide h1,
.reveal .title-slide h2,
.reveal .title-slide .subtitle,
.reveal .title-slide .author,
.reveal .title-slide .date {
  color: var(--blanco) !important;
  border-bottom-color: var(--tierra) !important;
  text-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

/* --- Listas --- */
.reveal ul {
  list-style: none;
  padding-left: 0.5em;
}

.reveal ul li {
  padding: 0;
  position: relative;
  padding-left: 1.4em;
  line-height: 1.15;
}

.reveal ul li::before {
  content: "▸";
  color: var(--tierra);
  font-weight: bold;
  position: absolute;
  left: 0;
}

.reveal ol li {
  padding: 0;
  color: var(--gris-pizarra);
  line-height: 1.15;
}

/* --- Párrafos --- */
.reveal p {
  margin: 0;
}

/* --- Texto enfatizado --- */
.reveal strong {
  color: var(--azul-oscuro);
}

.reveal em {
  color: var(--tierra-oscuro);
  font-style: normal;
  font-weight: 600;
}

/* --- Cajas destacadas --- */
.reveal .callout-note,
.caja-azul {
  background: rgba(44, 95, 138, 0.08);
  border-left: 4px solid var(--azul-medio);
  padding: 0.6em 1em;
  border-radius: 0 6px 6px 0;
  margin: 0.2em 0;
}

.caja-tierra {
  background: rgba(196, 149, 106, 0.12);
  border-left: 4px solid var(--tierra);
  padding: 0.6em 1em;
  border-radius: 0 6px 6px 0;
  margin: 0.2em 0;
}

/* --- Chips / etiquetas de herramientas --- */
.chip {
  display: inline-block;
  background: var(--azul-medio);
  color: var(--blanco);
  padding: 0.25em 0.8em;
  border-radius: 999px;
  font-size: 0.85em;
  font-weight: 600;
  margin: 0.2em;
}

.chip-tierra {
  background: var(--tierra);
}

/* --- Separador de sección --- */
.seccion-header {
  background: linear-gradient(90deg, var(--azul-oscuro), var(--azul-medio));
  color: var(--blanco) !important;
  font-weight: 700;
  padding: 1em 1.5em;
  border-radius: 8px;
  margin-bottom: 0.8em;
}

.seccion-header strong {
  color: var(--blanco) !important;
}

/* --- Línea de tiempo simplificada --- */
.timeline {
  border-left: 3px solid var(--tierra);
  padding-left: 1.2em;
  margin-left: 0.5em;
}

.timeline-item {
  margin-bottom: 0.6em;
  position: relative;
}

.timeline-item::before {
  content: "";
  width: 12px;
  height: 12px;
  background: var(--tierra);
  border-radius: 50%;
  position: absolute;
  left: -1.7em;
  top: 0.3em;
}

.timeline-year {
  font-weight: 700;
  color: var(--tierra-oscuro);
  font-size: 0.9em;
}

/* --- Grid de dos columnas --- */
.cols-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5em;
  align-items: start;
}

/* --- Slides con fondo oscuro --- */
.reveal .has-dark-background,
.reveal .has-dark-background p,
.reveal .has-dark-background li,
.reveal .has-dark-background strong,
.reveal .has-dark-background em,
.reveal .has-dark-background h3,
.reveal .has-dark-background h4 {
  color: var(--blanco-roto) !important;
}

.reveal .has-dark-background code {
  background: rgba(255,255,255,0.15);
  color: var(--blanco-roto) !important;
}

.reveal .has-dark-background ul li::before {
  color: var(--tierra) !important;
}

/* --- Número de diapositiva --- */
.reveal .slide-number {
  color: var(--gris-suave);
  font-size: 0.75em;
}

/* --- Código inline --- */
.reveal code {
  background: rgba(74, 90, 104, 0.12);
  color: var(--azul-oscuro);
  padding: 0.1em 0.4em;
  border-radius: 4px;
  font-size: 0.9em;
}

/* --- Pie de página / cita --- */
.cita {
  font-size: 0.75em;
  color: var(--gris-suave);
  font-style: italic;
  border-top: 1px solid var(--gris-suave);
  padding-top: 0.4em;
  margin-top: 1em;
}

/* --- Icono grande decorativo de emoji --- */
.icono-grande {
  font-size: 2.5em;
  display: block;
  text-align: center;
  margin-bottom: 0.3em;
}