/* ==========================================================================
   CookieLab v2 — Catppuccin theme for Reveal.js
   Frappe (dark) / Latte (light), keyed off the site's existing
   [data-bs-theme] attribute so it follows the same toggle as the rest
   of CookieLab. Ported 1:1 from the Slidev prototype's CSS variables.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Inter:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap');
/* Remove the @import above if app.blade.php already loads these fonts globally. */

/* ---------- Palettes ---------- */

[data-bs-theme="light"] {
  --ctp-mauve: #8839ef;
  --ctp-red: #d20f39;
  --ctp-peach: #fe640b;
  --ctp-green: #40a02b;
  --ctp-sky: #04a5e5;
  --ctp-sapphire: #209fb5;
  --ctp-blue: #1e66f5;
  --ctp-text: #4c4f69;
  --ctp-subtext0: #6c6f85;
  --ctp-surface1: #bcc0cc;
  --ctp-surface0: #ccd0da;
  --ctp-base: #eff1f5;
  --ctp-mantle: #e6e9ef;
  --ctp-crust: #dce0e8;

  --clab-bg: var(--ctp-base);
  --clab-surface: var(--ctp-crust);
  --clab-surface-2: var(--ctp-mantle);
  --clab-card: #ffffff;
  --clab-accent: var(--ctp-mauve);
  --clab-accent-2: var(--ctp-blue);
  --clab-green: var(--ctp-green);
  --clab-red: var(--ctp-red);
  --clab-orange: var(--ctp-peach);
  --clab-violet: var(--ctp-mauve);
  --clab-text: var(--ctp-text);
  --clab-mut: var(--ctp-subtext0);
  --clab-line: var(--ctp-surface1);
  --clab-water: var(--ctp-sky);
  --clab-water-line: var(--ctp-sapphire);
  --clab-on-accent: #ffffff;

  /* Override the host layout's legacy theme vars so nothing renders in the old blue. */
  --rb: var(--ctp-mauve);
  --rd: var(--ctp-mauve);
  --rk: var(--clab-bg);
  --card: var(--clab-card);
  --txt: var(--clab-text);
  --mut: var(--clab-mut);
  --grn: var(--ctp-green);
  --org: var(--ctp-peach);
  --red: var(--ctp-red);
  --pur: var(--ctp-mauve);
}

[data-bs-theme="dark"] {
  --ctp-mauve: #ca9ee6;
  --ctp-red: #e78284;
  --ctp-peach: #ef9f76;
  --ctp-green: #a6d189;
  --ctp-sky: #99d1db;
  --ctp-sapphire: #85c1dc;
  --ctp-blue: #8caaee;
  --ctp-text: #c6d0f5;
  --ctp-subtext0: #a5adce;
  --ctp-surface1: #51576d;
  --ctp-surface0: #414559;
  --ctp-base: #303446;
  --ctp-mantle: #292c3c;
  --ctp-crust: #232634;

  --clab-bg: var(--ctp-base);
  --clab-surface: var(--ctp-mantle);
  --clab-surface-2: var(--ctp-crust);
  --clab-card: var(--ctp-surface0);
  --clab-accent: var(--ctp-mauve);
  --clab-accent-2: var(--ctp-blue);
  --clab-green: var(--ctp-green);
  --clab-red: var(--ctp-red);
  --clab-orange: var(--ctp-peach);
  --clab-violet: var(--ctp-mauve);
  --clab-text: var(--ctp-text);
  --clab-mut: var(--ctp-subtext0);
  --clab-line: var(--ctp-surface1);
  --clab-water: var(--ctp-sapphire);
  --clab-water-line: var(--ctp-sky);
  --clab-on-accent: #232634;

  /* Override the host layout's legacy theme vars so nothing renders in the old blue. */
  --rb: var(--ctp-mauve);
  --rd: var(--ctp-mauve);
  --rk: var(--clab-bg);
  --card: var(--clab-card);
  --txt: var(--clab-text);
  --mut: var(--clab-mut);
  --grn: var(--ctp-green);
  --org: var(--ctp-peach);
  --red: var(--ctp-red);
  --pur: var(--ctp-mauve);
}

/* ---------- Base typography ---------- */

/* Own the full-screen background so it beats the host layout's
   `.reveal-viewport { background: var(--rk) }` and the reveal.js CDN theme. */
.reveal-viewport,
html:has(.reveal) body {
  background: var(--clab-bg) !important;
}

.reveal {
  font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
  background: var(--clab-bg);
  color: var(--clab-text);
  /* Smaller base so dense slides fit 1280×720 (theme default is ~42px). */
  font-size: 30px;
}

/* Navigation arrows + progress bar in the Catppuccin accent, not the CDN theme blue. */
.reveal .controls { color: var(--clab-accent) !important; }
.reveal .progress { color: var(--clab-accent) !important; }
.reveal .progress span { background: var(--clab-accent) !important; }

/* Content slides: top-left aligned, full width (beats the host layout's centering). */
.reveal .slides > section:not(.stack),
.reveal .slides > section > section {
  justify-content: flex-start !important;
  align-items: stretch !important;
  text-align: left !important;
  padding: 2.2rem 3rem !important;
}

/* Vertical-slide stack wrappers: let reveal position the children. */
.reveal .slides > section.stack {
  display: block !important;
  padding: 0 !important;
}

/* Hero stays centered. */
.reveal .slides > section.clab-hero {
  justify-content: center !important;
  align-items: center !important;
  text-align: center !important;
}

.reveal h1, .reveal h2, .reveal h3 {
  font-family: 'Space Grotesk', 'Inter', sans-serif;
  font-weight: 700;
  letter-spacing: 0;
  color: var(--clab-text);
  text-transform: none;
}

.reveal h1 { font-size: 2.4rem; line-height: 1.05; }
.reveal h2 { font-size: 1.9rem; }

.reveal code, .reveal pre {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
}

.reveal pre {
  background: var(--clab-surface);
  border: 1px solid var(--clab-line);
  border-radius: 8px;
  box-shadow: none;
  width: 100%;
}

/* Let the Catppuccin pre surface show; keep only the syntax token colors from hljs. */
.reveal pre code,
.reveal pre code.hljs {
  background: transparent !important;
  border-radius: 8px;
}

.reveal table {
  border-collapse: collapse;
  font-size: 0.68em;
  width: 100%;
}

.reveal table th {
  background: var(--clab-surface) !important;
  color: var(--clab-text) !important;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.82em;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  text-align: left;
  padding: 0.5em 0.8em !important;
  border-bottom: 2px solid var(--clab-accent) !important;
}

.reveal table td {
  border-bottom: 1px solid var(--clab-line) !important;
  color: var(--clab-text);
  padding: 0.45em 0.8em !important;
  background: transparent !important;
}

.reveal table tr:nth-child(even) td {
  background: color-mix(in srgb, var(--clab-accent) 7%, transparent) !important;
}

/* Code blocks: the highlight.js line-number gutter renders as a table.
   It must never get the zebra striping or the row borders above. */
.reveal pre table td,
.reveal pre table tr:nth-child(even) td {
  background: transparent !important;
  border-bottom: none !important;
}

/* Light mode: code blocks on a clean white surface. */
[data-bs-theme="light"] .reveal pre {
  background: #ffffff;
}

/* ---------- Cover / hero slide ---------- */
/* usage: <section class="clab-hero"> ... </section> */

.clab-hero {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center !important;
}

.clab-hero .hero-title {
  font-size: clamp(3rem, 7vw, 5rem);
  line-height: 0.96;
  margin: 0;
  color: var(--clab-accent);
}

.clab-hero .hero-subtitle {
  margin-top: 1rem;
  font-size: 1.15rem;
  color: var(--clab-mut);
}

.clab-hero .hero-rail {
  display: grid;
  grid-auto-flow: column;
  gap: 1rem;
  margin-top: 2rem;
}

.clab-hero .hero-rail span {
  border-top: 1px solid var(--clab-line);
  padding-top: 0.6rem;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.7rem;
  text-transform: uppercase;
  color: var(--clab-text);
}

/* ---------- Cards / callouts ---------- */
/* usage: <div class="clab-card green|red|orange|purple"> */

.clab-card {
  border-radius: 8px;
  padding: 1rem 1.4rem;
  border: 1px solid var(--clab-line);
  background: var(--clab-card);
  color: var(--clab-text);
}

.clab-card.green  { border-color: var(--clab-green);  background: color-mix(in srgb, var(--clab-green) 12%, var(--clab-card)); }
.clab-card.red    { border-color: var(--clab-red);    background: color-mix(in srgb, var(--clab-red) 12%, var(--clab-card)); }
.clab-card.orange { border-color: var(--clab-orange); background: color-mix(in srgb, var(--clab-orange) 12%, var(--clab-card)); }
.clab-card.purple { border-color: var(--clab-violet); background: color-mix(in srgb, var(--clab-violet) 14%, var(--clab-card)); }

.clab-pill {
  display: inline-block;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.7em;
  padding: 0.2em 0.8em;
  border-radius: 999px;
  border: 1px solid var(--clab-line);
  color: var(--clab-mut);
  background: var(--clab-surface);
}

/* ---------- Fragment-based lists (equivalent to Slidev's v-clicks) ---------- */
/* usage: <ul class="clab-list"><li class="fragment fade-up">...</li></ul> */

.clab-list {
  list-style: none;
  padding-left: 0;
  font-size: 0.92em;
}

.clab-list li {
  margin: 0.5rem 0;
  padding: 0.6rem 1rem 0.6rem 1.1rem;
  border-left: 3px solid var(--clab-accent);
  background: var(--clab-surface);
  border-radius: 8px;
  line-height: 1.35;
}

/* custom fragment style: fade + slide up, closer to v-click than Reveal's default fade */
.reveal .fragment.fade-up {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}
.reveal .fragment.fade-up.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ---------- Step badge (for data-auto-animate step sequences) ---------- */
/* usage: two consecutive <section data-auto-animate> slides, each with
   the SAME element id/class so Reveal morphs between them */

.clab-badge {
  width: 3rem;
  height: 3rem;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 1.1rem;
  color: var(--clab-on-accent);
  background: var(--clab-accent);
}

.clab-step-head {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

/* ---------- Code walkthrough: step-synced description column ---------- */
.clab-walk {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  font-size: 0.9em;
}
.clab-walk .clab-card { padding: 0.7rem 1rem; }

/* ---------- Imagen centrada (con fondo claro para legibilidad en ambos temas) ---------- */
.reveal .clab-img {
  display: block;
  max-width: 100%;
  max-height: 580px;
  margin: 0 auto;
  border-radius: 10px;
  border: 1px solid var(--clab-line);
  background: #ffffff;
  padding: 0.4rem;
  align-self: center;
}

/* ---------- Two-column layouts ---------- */
/* usage: <div class="clab-grid-2"> two children </div> */

.clab-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  align-items: stretch;
  grid-auto-rows: 1fr;
}

/* Vertical rhythm: keep stacked components from touching each other. */
.reveal .clab-grid-2 + .clab-card,
.reveal .clab-card + .clab-grid-2,
.reveal .clab-grid-2 + .clab-grid-2,
.reveal .clab-card + .clab-card,
.reveal .clab-grid-2 + .clab-list,
.reveal .clab-list + .clab-grid-2,
.reveal .clab-card + .clab-list,
.reveal .clab-list + .clab-card {
  margin-top: 1.3rem;
}

/* ---------- Section title with a leading icon ---------- */
/* usage: <div class="clab-h"><i class="fas fa-lightbulb"></i><h1>Título</h1></div> */

.clab-h {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin-bottom: 1.6rem;
}

.clab-h h1, .clab-h h2 { margin: 0; }

.clab-h > i {
  font-size: 1.6rem;
  color: var(--clab-accent);
  flex-shrink: 0;
}

/* ---------- Icon card: accent icon on the left, text on the right ---------- */
/* usage: <div class="clab-icon-card blue"><i class="fas fa-bullseye"></i><span>...</span></div> */

.clab-icon-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  border-radius: 10px;
  padding: 1.1rem 1.3rem;
  border: 1px solid var(--clab-line);
  background: var(--clab-card);
  color: var(--clab-text);
  font-size: 0.95em;
  line-height: 1.35;
}

.clab-icon-card > i {
  font-size: 1.35rem;
  flex-shrink: 0;
  width: 1.6rem;
  text-align: center;
}

.clab-icon-card.blue   { border-color: color-mix(in srgb, var(--ctp-blue) 55%, var(--clab-line)); }
.clab-icon-card.blue   > i { color: var(--ctp-blue); }
.clab-icon-card.mauve  { border-color: color-mix(in srgb, var(--ctp-mauve) 55%, var(--clab-line)); }
.clab-icon-card.mauve  > i { color: var(--ctp-mauve); }
.clab-icon-card.violet { border-color: color-mix(in srgb, var(--clab-violet) 55%, var(--clab-line)); }
.clab-icon-card.violet > i { color: var(--clab-violet); }
.clab-icon-card.green  { border-color: color-mix(in srgb, var(--clab-green) 55%, var(--clab-line)); }
.clab-icon-card.green  > i { color: var(--clab-green); }
.clab-icon-card.orange { border-color: color-mix(in srgb, var(--clab-orange) 55%, var(--clab-line)); }
.clab-icon-card.orange > i { color: var(--clab-orange); }
.clab-icon-card.red    { border-color: color-mix(in srgb, var(--clab-red) 55%, var(--clab-line)); }
.clab-icon-card.red    > i { color: var(--clab-red); }

/* Numbered step card (no pill): accent number + heading + body */
.clab-step {
  border-radius: 10px;
  padding: 0.9rem 1.15rem;
  border: 1px solid var(--clab-line);
  background: var(--clab-card);
}

/* Step title row: prominent via CSS (no bold tags needed). */
.clab-step > div { display: flex; align-items: center; font-size: 1.15rem; font-weight: 600; line-height: 1.2; }

.clab-step-n {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.7rem;
  height: 1.7rem;
  flex-shrink: 0;
  border-radius: 7px;
  font-family: 'IBM Plex Mono', monospace;
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--clab-on-accent);
  background: var(--clab-accent);
  margin-right: 0.6rem;
}

.clab-step ul { padding-left: 1.1rem; margin: 0.45rem 0 0; }
.clab-step ul li { font-size: 0.98rem; line-height: 1.3; margin: 0.2rem 0; }
.clab-step ul li::marker { color: var(--clab-accent); }

/* Inline code: Catppuccin surface, not the old light-blue box */
.reveal :not(pre) > code {
  background: var(--clab-surface) !important;
  border: 1px solid var(--clab-line) !important;
  color: var(--clab-accent) !important;
}