/* =============================================================================
   Big Data & Analytics — Minimal Elegance Theme
   Universidad San Sebastián
   ============================================================================= */

/* --- Typography --- */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=DM+Serif+Display&family=JetBrains+Mono:wght@400;500&display=swap');

/* --- Design Tokens --- */
:root {
  --navy:      #0B1F3A;
  --blue:      #1A56DB;
  --teal:      #0EA5A0;
  --light-bg:  #F7F9FC;
  --white:     #FFFFFF;
  --text:      #1E293B;
  --muted:     #64748B;
  --border:    #E1E8F0;
  --code-bg:   #1E293B;
  --accent-h:  210;          /* hue for accent color utilities */
}

/* =============================================================================
   BASE
   ============================================================================= */

.reveal {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-size: 1.6rem;
  font-weight: 400;
  color: var(--text);
  background-color: var(--white);
}

.reveal .slides {
  text-align: left;
}

/* =============================================================================
   TYPOGRAPHY
   ============================================================================= */

.reveal h1,
.reveal h2,
.reveal h3,
.reveal h4 {
  font-family: 'DM Serif Display', 'Georgia', serif;
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--navy);
  text-transform: none;
  text-shadow: none;
  margin: 0 0 0.6em 0;
}

.reveal h1 { font-size: 2.4em; }
.reveal h2 { font-size: 1.6em; border-bottom: 2px solid var(--blue); padding-bottom: 0.3em; margin-bottom: 0.7em; }
.reveal h3 { font-size: 1.2em; color: var(--blue); font-family: 'Inter', sans-serif; font-weight: 600; letter-spacing: 0; }
.reveal h4 { font-size: 1em; font-family: 'Inter', sans-serif; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; }

.reveal p {
  line-height: 1.7;
  margin: 0 0 0.8em 0;
}

.reveal strong {
  font-weight: 600;
  color: var(--navy);
}

.reveal em {
  color: var(--teal);
  font-style: normal;
  font-weight: 500;
}

/* =============================================================================
   TITLE SLIDE
   ============================================================================= */

.reveal .title-slide,
.reveal section.has-dark-background {
  background: linear-gradient(135deg, var(--navy) 0%, #0F3460 100%);
}

.reveal .title-slide h1,
.reveal section.has-dark-background h1,
.reveal section.has-dark-background h2,
.reveal section.has-dark-background p {
  color: var(--white);
}

.reveal .title-slide .title {
  font-size: 2.6em;
  color: var(--white);
  border: none;
  margin-bottom: 0.3em;
}

.reveal .title-slide .subtitle {
  font-family: 'Inter', sans-serif;
  font-size: 1em;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.65);
  letter-spacing: 0.04em;
  border: none;
  margin-bottom: 1.5em;
}

.reveal .title-slide .author,
.reveal .title-slide .date,
.reveal .title-slide .institute {
  font-size: 0.8em;
  color: rgba(255, 255, 255, 0.55);
  font-weight: 300;
}

/* Thin accent line on title slide */
.reveal .title-slide::before {
  content: '';
  display: block;
  width: 60px;
  height: 3px;
  background: var(--teal);
  margin-bottom: 2em;
}

/* =============================================================================
   LISTS
   ============================================================================= */

.reveal ul,
.reveal ol {
  margin: 0 0 0.8em 1.2em;
  padding: 0;
  line-height: 1.75;
}

.reveal ul li,
.reveal ol li {
  margin-bottom: 0.4em;
  padding-left: 0.2em;
}

.reveal ul li::marker {
  color: var(--blue);
}

.reveal ol li::marker {
  color: var(--blue);
  font-weight: 600;
}

.reveal ul ul,
.reveal ol ol,
.reveal ul ol,
.reveal ol ul {
  margin-top: 0.3em;
  font-size: 0.9em;
  color: var(--muted);
}

/* =============================================================================
   CODE
   ============================================================================= */

.reveal code {
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  font-size: 0.82em;
  background: var(--light-bg);
  color: var(--blue);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 0.1em 0.4em;
}

.reveal pre {
  border: none;
  border-radius: 8px;
  box-shadow: 0 4px 24px rgba(11, 31, 58, 0.12);
  margin: 1em 0;
  width: 100%;
}

.reveal pre code {
  background: var(--code-bg);
  color: #E2E8F0;
  border: none;
  padding: 1.2em 1.4em;
  font-size: 0.78em;
  line-height: 1.65;
  border-radius: 8px;
}

/* =============================================================================
   BLOCKQUOTE
   ============================================================================= */

.reveal blockquote {
  background: var(--light-bg);
  border-left: 4px solid var(--teal);
  border-radius: 0 6px 6px 0;
  margin: 1em 0;
  padding: 0.8em 1.2em;
  font-style: normal;
  color: var(--text);
  box-shadow: none;
  width: 95%;
}

.reveal blockquote p {
  margin: 0;
  font-size: 0.92em;
  line-height: 1.6;
}

/* =============================================================================
   TABLES
   ============================================================================= */

.reveal table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.82em;
  margin: 1em 0;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(11, 31, 58, 0.08);
}

.reveal table thead tr {
  background: var(--navy);
  color: var(--white);
}

.reveal table thead th {
  padding: 0.75em 1em;
  font-weight: 600;
  text-align: left;
  letter-spacing: 0.03em;
  border: none;
}

.reveal table tbody tr {
  border-bottom: 1px solid var(--border);
  transition: background 0.15s ease;
}

.reveal table tbody tr:nth-child(even) {
  background: var(--light-bg);
}

.reveal table tbody tr:hover {
  background: rgba(26, 86, 219, 0.05);
}

.reveal table tbody td {
  padding: 0.65em 1em;
  border: none;
  color: var(--text);
}

/* =============================================================================
   SLIDE NUMBER & PROGRESS
   ============================================================================= */

.reveal .slide-number {
  background: transparent;
  font-family: 'Inter', sans-serif;
  font-size: 0.65em;
  font-weight: 500;
  color: var(--muted);
  bottom: 14px;
  right: 18px;
}

.reveal .progress {
  height: 3px;
  background: rgba(26, 86, 219, 0.12);
}

.reveal .progress span {
  background: linear-gradient(90deg, var(--blue), var(--teal));
  transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* =============================================================================
   LOGO
   ============================================================================= */

.reveal .slide-logo {
  max-height: 100px !important;
  opacity: 0.85;
}


/* =============================================================================
   LINKS
   ============================================================================= */

.reveal a {
  color: var(--blue);
  text-decoration: none;
  border-bottom: 1px solid rgba(26, 86, 219, 0.3);
  transition: border-color 0.2s, color 0.2s;
}

.reveal a:hover {
  color: var(--teal);
  border-bottom-color: var(--teal);
}

/* =============================================================================
   UTILITY CLASSES  (use with  ::: {.class-name}  in Quarto)
   ============================================================================= */

/* Highlighted callout box */
.reveal .callout {
  background: linear-gradient(135deg, rgba(26, 86, 219, 0.06), rgba(14, 165, 160, 0.06));
  border: 1px solid rgba(26, 86, 219, 0.18);
  border-radius: 8px;
  padding: 1em 1.3em;
  margin: 0.8em 0;
}

/* Key concept box */
.reveal .key-concept {
  background: var(--navy);
  color: var(--white);
  border-radius: 8px;
  padding: 1em 1.4em;
  margin: 0.8em 0;
}

.reveal .key-concept h3,
.reveal .key-concept p,
.reveal .key-concept li {
  color: var(--white);
}

/* Activity / practice box */
.reveal .activity {
  background: rgba(14, 165, 160, 0.08);
  border-left: 4px solid var(--teal);
  border-radius: 0 8px 8px 0;
  padding: 0.9em 1.3em;
  margin: 0.8em 0;
}

/* Center content */
.reveal .center-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  height: 100%;
}

/* Large stat / number emphasis */
.reveal .stat {
  font-size: 3em;
  font-weight: 700;
  color: var(--blue);
  line-height: 1;
  display: block;
}

.reveal .stat-label {
  font-size: 0.8em;
  color: var(--muted);
  font-weight: 400;
  display: block;
  margin-top: 0.2em;
}

/* Muted / secondary text */
.reveal .muted {
  color: var(--muted);
  font-size: 0.88em;
}

/* Accent text */
.reveal .accent {
  color: var(--teal);
  font-weight: 600;
}

/* Small text */
.reveal .small {
  font-size: 0.78em;
  line-height: 1.6;
}

/* Columns helper */
.reveal .cols-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2em;
  align-items: start;
}

.reveal .cols-3 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 1.5em;
  align-items: start;
}

/* =============================================================================
   FRAGMENT ANIMATIONS
   ============================================================================= */

.reveal .fragment.highlight-blue.visible {
  color: var(--blue);
}

.reveal .fragment.highlight-teal.visible {
  color: var(--teal);
}

/* =============================================================================
   SECTION DIVIDER SLIDES
   ============================================================================= */

.reveal section.section-divider {
  background: linear-gradient(135deg, var(--navy) 0%, #143058 100%);
  text-align: center;
}

.reveal section.section-divider h2 {
  color: var(--white);
  border: none;
  font-size: 2em;
  padding: 0;
}

.reveal section.section-divider p {
  color: rgba(255, 255, 255, 0.55);
}

/* =============================================================================
   SCROLLABLE SLIDES
   ============================================================================= */

.reveal .scrollable {
  overflow-y: auto;
  max-height: 80vh;
}

/* =============================================================================
   PRINT / PDF
   ============================================================================= */

@media print {
  .reveal .slides {
    background: var(--white);
  }

  .reveal h2 {
    border-bottom-color: var(--blue) !important;
  }
}