/* HeladoDude & Co — DARK "manly" course skin + typography.
 * Scoped to html[data-course="helado_dude"] (set by core_boot), so it never
 * affects Valentino or any other course.
 *
 * The hygiene templates read fonts from --font-* and surfaces from --page /
 * --paper / --ink (set by theme JS) plus the --color-page/-paper/-ink aliases
 * (NOT set by theme JS — defined here). Flipping these + a handful of
 * hardcoded-light surfaces turns the whole manual dark.
 */
html[data-course="helado_dude"] {
  /* Type: bold condensed Oswald headings, DM Sans body (both already loaded). */
  --font-display: "Oswald", "Zilla Slab", system-ui, sans-serif;
  --font-head: "Oswald", "Outfit", system-ui, sans-serif;
  --font-body: "DM Sans", system-ui, -apple-system, sans-serif;

  /* Alias vars some hygiene CSS reads (theme JS only sets the non-prefixed set). */
  --color-page: #1b2a42;   /* lifted navy page sheet */
  --color-paper: #0f1825;  /* deep navy canvas (darkest layer) */
  --color-ink: #e8edf4;    /* cool cream text */
  --color-primary: #4a86c4;
  --color-secondary: #7cb3da;
  --color-accent: #3f7cc0;
  --section-color: #4a86c4;
  --section-color-alt: #7cb3da;

  /* Layered blue surfaces → depth & tonal variation (not one flat dark).
   * canvas #0f1825 < sheet #1b2a42 < card #25395c < chip #324f7d */
  --hd-surface: #25395c;     /* cards sit LIGHTER than the page sheet */
  --hd-surface-2: #324f7d;   /* nested chips / hovers — lighter still */
  --hd-line: rgba(150, 185, 230, .22);

  /* Derived tints recomputed for a cool dark ground (NO warm/orange cast). */
  --ink-6: rgba(124, 179, 218, .12);   /* faint blue tint, not flat grey */
  --ink-5: rgba(124, 179, 218, .08);
  --ink-2: rgba(232, 237, 244, .74);
  --val-yellow: #7cb3da;
  --val-yellow-bg: rgba(124, 179, 218, .18);
  --shadow-sm: 0 2px 12px rgba(0, 0, 0, .5);
  --shadow-md: 0 6px 22px rgba(0, 0, 0, .55);
}

/* ============================================================= *
 * KILL ALL ORANGE — the hygiene templates bake in Valentino     *
 * orange (#e4602c / #e85d2a / #d97706 / #f59e0b / #f97316) and   *
 * amber section colours. Repaint every orange surface/text/      *
 * border as deep blue, scoped to this course.                   *
 * ============================================================= */
html[data-course="helado_dude"] {
  --val-orange: #6a8cae;
  --val-orange-bg: rgba(106, 140, 174, .16);
  --brand-orange: #6a8cae;
}
/* Inline orange (style="...:#e4602c") → blue. */
html[data-course="helado_dude"] [style*="#e4602c"],
html[data-course="helado_dude"] [style*="#e85d2a"],
html[data-course="helado_dude"] [style*="#d97706"],
html[data-course="helado_dude"] [style*="#f59e0b"],
html[data-course="helado_dude"] [style*="#f97316"],
html[data-course="helado_dude"] [style*="orange"] {
  background-color: var(--brand-primary) !important;
  border-color: var(--brand-primary) !important;
}

/* Section tabs: the two ORANGE sections (presentacion #e4602c, servicio
 * #ed9e45) → deep navy. Other sections keep their (non-orange) hue. */
html[data-course="helado_dude"] :is(.section-tab--presentacion, .section-tab--servicio) {
  --section-tab-bg: #41607f !important;
  background: #41607f !important;
}
html[data-course="helado_dude"] .section-tab--presentacion ~ .intro-header,
html[data-course="helado_dude"] :is(.section-tab--presentacion, .section-tab--servicio) ~ .page-body,
html[data-course="helado_dude"] :is(.section-tab--presentacion, .section-tab--servicio) ~ .intro-header {
  --section-tab-bg: #41607f !important;
  --section-color: #6a8cae !important;
  --brand-accent: #6a8cae !important;
}

/* Amber risk callout pictos / family labels → blue. */
html[data-course="helado_dude"] :is(
  .risk-callout-picto-yellow, .risk-callout-picto-orange,
  .risk-family-cell--yellow .risk-family-cell-label,
  .risk-family-cell--orange .risk-family-cell-label
) {
  color: var(--brand-secondary) !important;
}
html[data-course="helado_dude"] :is(.risk-callout-picto-yellow, .risk-callout-picto-orange) {
  background: var(--val-yellow-bg) !important;
}

/* THE page sheet (base `.page` class) + every per-template variant + the
 * page-flip faces → dark espresso. This is the single most important rule:
 * it makes every page uniformly dark instead of white. */
html[data-course="helado_dude"] :is(
  .page, .portada-page, .magazine-page, .hygiene-page, .legal-page,
  .page-flip-v, .page-flip-back-face, .spread-preview, .spread-exiting
) {
  background: var(--page) !important;
}

/* Hardcoded-light cards / tables / cells → dark surface, cream text. */
html[data-course="helado_dude"] :is(
  .product-card, .uniform-ck-cell, .uniform-ck-row,
  .criteria-table, .criteria-table th, .criteria-table td,
  .toc-card, .toc-card-copy, .info-grid-item, .info-card, .feature-item, .feature-list-item,
  .stat-card, .callout, .bank-card, .quote-row, .pricing-row, .sched-cell,
  .risk-card, .step-card, .highlight-bar, table, thead, tbody, th, td,
  .gd-card, .gd-callout, .gd-feat-img-wrap, .gd-hero-diagram, .gd-left-illus,
  .gd-def, .gd-actions, .gd-tip, .credits-card, .creditos-card
) {
  background-color: var(--hd-surface) !important;
  background-image: none !important;
  color: var(--ink);
  border-color: var(--hd-line) !important;
}
/* Nested chips / inner items sit one step lighter again for depth. */
html[data-course="helado_dude"] :is(.def-pill, .mission-chip, .chip, .pill, .tag, .badge, [class*="-chip"], [class*="-pill"]) {
  background-color: var(--hd-surface-2) !important;
}
/* Card sub-headings / kickers / icons in the bright accent blue. */
html[data-course="helado_dude"] :is(.gd-card, .product-card, .info-card, .feature-item, .mission-card, .risk-stat, .duo-panel, .hygiene-block) :is(h2, h3, h4, .kicker, [class*="title"], [class*="head"]) {
  color: var(--brand-secondary) !important;
}

/* Glosario + credits body text → cream (templates assumed white cards). */
html[data-course="helado_dude"] :is(.gd-card, .gd-callout, .gd-tip, .gd-def, .gd-actions, [class*="credit"]) :is(p, span, li, h1, h2, h3, h4, dt, dd, strong) {
  color: var(--ink);
}

/* ============================================================= *
 * Frosted white / pastel panels + checklist & uniform cards     *
 * that stayed light (cream text on them was unreadable). Force   *
 * dark surface + readable text.                                  *
 * ============================================================= */
html[data-course="helado_dude"] :is(
  .duo-panel, .hygiene-block, .portada-copy, .visitor-zone,
  .wash-step, .wash-grid-item, .uniform-ck-item, .uniform-ck-cell,
  .mission-card, .mission-chip, .def-pill,
  [class*="checklist"], [class*="ck-item"], [class*="ck-cell"], [class*="ck-card"]
) {
  background: var(--hd-surface) !important;
  background-image: none !important;
  border-color: var(--hd-line) !important;
}
/* Readable text inside those panels (don't touch icons). */
html[data-course="helado_dude"] :is(
  .duo-panel, .hygiene-block, .portada-copy, .visitor-zone,
  .wash-step, .wash-grid-item, .uniform-ck-item, .uniform-ck-cell,
  .mission-card, .def-pill, [class*="checklist"], [class*="ck-item"], [class*="ck-cell"]
) :is(p, span, li, h1, h2, h3, h4, h5, dt, dd, td, th, label, strong, em, a, small) {
  color: var(--ink) !important;
}
/* Kill the remaining orange mission-card tint. */
html[data-course="helado_dude"] :is(.mission-card, [class*="tone-orange"], [class*="tone-amber"]) {
  background: var(--page) !important;
  background-image: none !important;
}

/* ============================================================= *
 * Registro de Limpieza page — the registro "sheet" mockup, the   *
 * cleaning-calendar widget and the store-map cards were light    *
 * with faint text. Darken + make text readable; de-orange.       *
 * ============================================================= */
html[data-course="helado_dude"] :is(
  [class*="registro-"], [class*="clean-cal"],
  .store-map-list, .store-map-card, .full-image-caption
) {
  background: var(--hd-surface) !important;
  background-image: none !important;
  border-color: var(--hd-line) !important;
}
html[data-course="helado_dude"] :is(
  [class*="registro-"], [class*="clean-cal"], .store-map-card, .full-image-caption
) :is(p, span, li, td, th, h1, h2, h3, h4, h5, strong, em, a, small, div, label, b) {
  color: var(--ink) !important;
}
/* Orange title / row accents on this page → blue. */
html[data-course="helado_dude"] :is(.full-image-title, .clean-cal-row--diario, .registro-help-title) {
  color: var(--ink) !important;
  border-color: var(--brand-primary) !important;
}
/* Leaflet map tiles → dark so the sucursales map matches the theme. */
html[data-course="helado_dude"] .leaflet-tile-pane {
  filter: invert(1) hue-rotate(180deg) brightness(.92) contrast(.9);
}
/* Footer + leaflet container/controls were white. */
html[data-course="helado_dude"] :is(
  .page-footer, .store-map-container, .leaflet-container,
  .leaflet-control-zoom-in, .leaflet-control-zoom-out, .leaflet-bar a
) {
  background: var(--page) !important;
  color: var(--ink) !important;
  border-color: rgba(230, 234, 241, .16) !important;
}
/* Residual orange icons inside callouts/registro/clean-cal → blue. */
html[data-course="helado_dude"] :is([class*="registro-"], [class*="clean-cal"], [class*="callout"], [class*="help"]) :is(svg, i, [class*="icon"]) {
  color: var(--brand-secondary) !important;
  stroke: currentColor;
}

/* Subtle striped rows / hovers on dark. */
html[data-course="helado_dude"] .product-card:hover,
html[data-course="helado_dude"] tr:nth-child(even) :is(td, .uniform-ck-cell) {
  background-color: rgba(236, 226, 208, .045) !important;
}

/* Cover/TOC tint chips were color-mix(... white ...) — re-tint on dark. */
html[data-course="helado_dude"] :is(.toc-card, [class*="tint"]) {
  background: color-mix(in srgb, var(--page) 80%, var(--brand-primary) 20%) !important;
}

/* Any element still painting a literal white/near-white bg inside the manual. */
html[data-course="helado_dude"] [style*="background:#fff"],
html[data-course="helado_dude"] [style*="background: #fff"],
html[data-course="helado_dude"] [style*="background-color:#fff"] {
  background: var(--page) !important;
}

/* ============================================================= *
 * Risk-family pages — were vibrant light pastel cards with dark  *
 * text + !important gradients. Flip surfaces dark, force text    *
 * cream, keep family identity via the left accent border.        *
 * ============================================================= */
html[data-course="helado_dude"] :is(
  .risk-stat, .risk-enhanced .risk-stat,
  .risk-fam-bola-card, [class*="risk-fam-bola--"],
  .risk-hero-bola-wrap, .risk-micro-hero, .risk-familias-intro-block,
  .risk-page.risk-yellow.risk-enhanced .risk-micro-hero
) {
  background: var(--hd-surface) !important;
  background-image: none !important;
}

/* Force all risk-page text to cream (overrides #141414 / #1b5e20 / #111 …). */
html[data-course="helado_dude"] :is(
  .risk-stat-val, .risk-stat-lbl, .risk-stat-icon,
  .risk-hero-title, .risk-fam-bola-lead, .risk-fam-bola-title,
  .risk-familias-intro-block, .risk-familias-intro-block *
) {
  color: var(--ink) !important;
}

/* Per-family accent kept as a left border + icon tint (brightened for dark). */
html[data-course="helado_dude"] .risk-stat { border-left: 3px solid var(--brand-primary); }

/* The stat cards + their icon chips are painted by #riesgo-<family> ID +
 * nth-child + !important gradients (pastel). Match the same IDs (our sheet
 * loads last) to beat them and turn the chips dark. */
html[data-course="helado_dude"] :is(#riesgo-microbiologico, #riesgo-fisico, #riesgo-quimico, #riesgo-alergenos).risk-enhanced .risk-stat,
html[data-course="helado_dude"] :is(#riesgo-microbiologico, #riesgo-fisico, #riesgo-quimico, #riesgo-alergenos).risk-enhanced .risk-stat .risk-stat-icon-wrap,
html[data-course="helado_dude"] .risk-page.risk-enhanced .risk-micro-hero {
  background: var(--hd-surface) !important;
  background-image: none !important;
}
html[data-course="helado_dude"] :is(#riesgo-microbiologico, #riesgo-fisico, #riesgo-quimico, #riesgo-alergenos).risk-enhanced .risk-stat :is(.risk-stat-val, .risk-stat-lbl, .risk-stat-icon) {
  color: var(--ink) !important;
}

/* ============================================================= *
 * Catch-all: any remaining near-black hardcoded text inside the  *
 * manual body becomes readable cream. Accent/colored text that   *
 * reads fine on dark is left alone.                              *
 * ============================================================= */
html[data-course="helado_dude"] :is(
  [style*="color:#000"], [style*="color: #000"],
  [style*="color:#111"], [style*="color: #111"]
) { color: var(--ink) !important; }

/* Section tint gradient panels (navigation/04, content-sections) → flat dark. */
html[data-course="helado_dude"] :is([class*="section-tint"], [class*="-tint-"], .s-tint, .closing-block) {
  background: var(--ink-6) !important;
  background-image: none !important;
}

/* Small brand logo at the top of every page. */
.course--helado_dude article.page{ position: relative; }
.course--helado_dude article.page::before{
  content:"";
  position:absolute; top:9px; left:50%; transform:translateX(-50%);
  width:54px; height:20px; z-index:6; pointer-events:none;
  background:url("/helado_dude/guia_de_higiene_alimentaria/images/logo-helado-dude-light.png") center/contain no-repeat;
  opacity:.78;
}