/* =============================================================================
   Iluena — rich layer.
   Sits on top of app.css: the public booking hero, pick cards, stepper, time
   slots, the success mark and the living dashboard tiles. Token-driven so a
   per-tenant public theme only has to override the --hero-* / --accent tokens.
   Honours prefers-reduced-motion. No aurora, no CDN.
   ============================================================================= */

:root {
  /* Public hero surface — the signature. Deep jewel-teal by default; a
     per-tenant theme only has to swap the two stops + the accent. */
  --hero-a: #0f5951;
  --hero-b: #0a3f39;
  --hero-bg: linear-gradient(158deg, var(--hero-a) 0%, var(--hero-b) 92%);
  --hero-ink: #f3efe6;
  --hero-dim: rgba(243, 239, 230, 0.74);
  /* Same ink, opaque enough for small labels: at 0.74 a 13px label lands at
     3.9:1 on the teal, under AA. Used wherever the hero carries real text
     rather than a caption under a headline. */
  --hero-dim-strong: rgba(243, 239, 230, 0.9);
  --hero-line: rgba(243, 239, 230, 0.26);
  --hero-chip: rgba(255, 255, 255, 0.12);
  --hero-chip-line: rgba(255, 255, 255, 0.20);
  /* a light tint of the accent — a pop on the hero, adapts to each theme */
  --hero-mint: color-mix(in srgb, var(--accent) 34%, #ffffff);

  /* ---- design tokens a theme can retune (type / shape / motion) ---- */
  --t-display: var(--font-display);     /* headline face */
  --t-display-tf: none;                 /* headline text-transform */
  --t-display-weight: 600;
  --t-display-spacing: -0.012em;
  --t-eyebrow-font: var(--font-sans);
  --t-eyebrow-tf: uppercase;
  --t-eyebrow-spacing: 0.2em;
  --card-radius: var(--radius-xl);      /* the booking card */
  --card-shadow: var(--shadow-lg);
  --pick-radius: var(--radius);         /* service / pro / slot cards */
  --slot-radius: var(--radius-sm);
  --pick-hover-x: 0px;                  /* pick hover offset + shadow */
  --pick-hover-y: -2px;
  --pick-shadow: var(--shadow);
  --meta-font: var(--font-sans);        /* duration / small labels */
}

/* =============================================================================
   PER-TENANT PUBLIC THEMES
   Recolour ONLY the accent + hero (warm paper grounds stay constant, so every
   theme is legible in light and dark). Emitted as data-tema="<id>" on <html>
   for PUBLIC pages only — the owner tool always keeps the default identity.
   Keep these in sync with app/theming.py. Loaded after app.css so they win.
   ============================================================================= */
/* Each theme is a PERSONALITY, not just a colour: it retunes type, corner
   shape, buttons, the pick hover and the hero animation. */

/* CORAL — Rotundo: bold uppercase sans, sharp corners, hard offset shadow. */
:root[data-tema="coral"] {
  --accent: #e0563a; --accent-hover: #c9472c; --accent-strong: #b23c22; --accent-contrast: #fff;
  --hero-a: #e0563a; --hero-b: #bf3417;
  --t-display: var(--font-sans); --t-display-tf: uppercase;
  --t-display-weight: 800; --t-display-spacing: -0.02em;
  --radius: 12px; --radius-lg: 14px; --radius-xl: 16px;
  --btn-radius: 12px; --btn-transform: uppercase; --btn-spacing: 0.04em;
  --card-radius: 18px; --pick-radius: 14px; --slot-radius: 10px;
  --pick-hover-x: -3px; --pick-hover-y: -3px;
  --pick-shadow: 5px 5px 0 color-mix(in srgb, var(--accent) 85%, #000);
}
:root[data-tema="coral"] .bk-hero::after { display: none; }
:root[data-tema="coral"] .bk-hero::before {
  background: radial-gradient(58% 90% at 100% 0%, rgba(255, 220, 120, 0.28), transparent 55%);
}
:root[data-tema="coral"] .btn { font-weight: 700; }
:root[data-tema="coral"] .pick { border-width: 2px; }

/* COBALTO — Cinético: mono labels, animated grid hero, tight, edge-slide. */
:root[data-tema="cobalto"] {
  --accent: #2b4cff; --accent-hover: #2138d6; --accent-strong: #1c34c2; --accent-contrast: #fff;
  --hero-a: #1f3ad6; --hero-b: #0e1e78;
  --t-display: var(--font-sans); --t-display-weight: 680; --t-display-spacing: -0.03em;
  --t-eyebrow-font: var(--font-mono); --t-eyebrow-tf: none; --t-eyebrow-spacing: 0.02em;
  --meta-font: var(--font-mono);
  --radius: 10px; --radius-lg: 12px; --radius-xl: 16px;
  --btn-radius: 10px; --btn-spacing: 0.02em;
  --card-radius: 16px; --pick-radius: 11px; --slot-radius: 8px;
  --pick-hover-x: 3px; --pick-hover-y: 0px;
}
:root[data-tema="cobalto"] .bk-hero::after {
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.07) 1px, transparent 1px);
  background-size: 30px 30px;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 92%);
  mask-image: linear-gradient(180deg, transparent, #000 92%);
  animation: heroPan 32s linear infinite;
}
:root[data-tema="cobalto"] .bk-hero__eyebrow::before {
  content: ""; display: inline-block; width: 7px; height: 7px;
  margin-right: 0.45rem; border-radius: 50%; background: var(--hero-mint);
  animation: teaBlink 1.4s steps(1) infinite;
}
:root[data-tema="cobalto"] .pick:hover { box-shadow: inset 3px 0 0 var(--accent), var(--shadow); }
:root[data-tema="cobalto"] .pick__price { font-family: var(--font-mono); }
@keyframes teaBlink { 50% { opacity: 0.25; } }

/* NOIR — Boutique: serif, black + gold, slow shimmer sweep. */
:root[data-tema="noir"] {
  --accent: #c49a3f; --accent-hover: #b0862c; --accent-strong: #8a6414; --accent-contrast: #201704;
  --hero-a: #26272e; --hero-b: #0d0e12;
  --t-display: var(--font-display); --t-display-spacing: -0.005em;
  --radius-xl: 22px; --card-radius: 22px; --pick-radius: 14px;
  --pick-hover-y: -2px; --pick-shadow: var(--shadow-lg);
}
:root[data-tema="noir"] .bk-hero::after {
  background-image: linear-gradient(115deg, transparent 42%, rgba(212, 175, 90, 0.14) 50%, transparent 58%);
  background-size: 300% 100%;
  -webkit-mask-image: none; mask-image: none;
  animation: teaShimmer 7s linear infinite;
}
:root[data-tema="noir"] .pick { border-color: color-mix(in srgb, var(--accent) 24%, var(--border)); }
@keyframes teaShimmer { to { background-position: -300% 0; } }

/* LAVANDA — Suave: friendly rounded sans, big pills, bouncy lift. */
:root[data-tema="lavanda"] {
  --accent: #6350d6; --accent-hover: #4f3dbb; --accent-strong: #4534a0; --accent-contrast: #fff;
  --hero-a: #6a58d8; --hero-b: #3a2c96;
  --t-display: var(--font-sans); --t-display-weight: 750; --t-display-spacing: -0.03em;
  --radius: 18px; --radius-lg: 22px; --radius-xl: 30px;
  --btn-radius: 980px;
  --card-radius: 30px; --pick-radius: 20px; --slot-radius: 14px;
  --pick-hover-y: -4px;
  --pick-shadow: 0 22px 40px -22px color-mix(in srgb, var(--accent) 70%, transparent);
}
:root[data-tema="lavanda"] .pick:hover { transform: translateY(-4px) scale(1.008); }
:root[data-tema="lavanda"] .btn { font-weight: 700; padding: 0.82rem 1.7rem; }

/* ATARDECER — Cálido: serif, amber, soft dotted hero, cozy rounded. */
:root[data-tema="atardecer"] {
  --accent: #d0742a; --accent-hover: #b25f18; --accent-strong: #8f5010; --accent-contrast: #fff;
  --hero-a: #e08a3a; --hero-b: #a4481c;
  --t-display: var(--font-display);
  --radius: 16px; --radius-xl: 26px; --card-radius: 26px; --pick-radius: 16px;
}
:root[data-tema="atardecer"] .bk-hero::after {
  background-image: radial-gradient(rgba(255, 255, 255, 0.14) 1.4px, transparent 1.5px);
  background-size: 18px 18px;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 90%);
  mask-image: linear-gradient(180deg, transparent, #000 90%);
  animation: heroPan 42s linear infinite;
}

/* ---- drawn icons --------------------------------------------------------- */
.ico { width: 22px; height: 22px; flex: none; display: inline-block; vertical-align: middle; stroke-width: 1.75; }
.ico--sm { width: 16px; height: 16px; }
.ico--lg { width: 26px; height: 26px; }

/* ---- browser surfaces ---------------------------------------------------- */
::selection { background: color-mix(in srgb, var(--accent) 26%, transparent); }
html { scrollbar-color: var(--border-strong) transparent; }
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 999px; border: 3px solid var(--bg); }
::-webkit-scrollbar-thumb:hover { background: var(--text-tertiary); }

/* ---- scroll reveal (JS adds .has-motion so no-JS shows everything) -------- */
.has-motion [data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  filter: blur(6px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease), filter 0.7s var(--ease);
  will-change: opacity, transform;
}
.has-motion [data-reveal].is-in { opacity: 1; transform: none; filter: none; }

/* kill the old aurora nodes the macros still emit */
.bk-hero__aurora, .bk-hero__orb, .bk-hero__grain, .bk-hero__glow { display: none !important; }

/* =============================================================================
   PUBLIC HERO
   ============================================================================= */
.bk-hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: clamp(178px, 24vh, 240px);
  padding: clamp(1.6rem, 5vw, 2.4rem) clamp(1.5rem, 5vw, 2.5rem) clamp(3.4rem, 6vw, 4rem);
  border-radius: var(--radius-xl);
  color: var(--hero-ink);
  background: var(--hero-bg);
  box-shadow: 0 26px 54px -28px rgba(9, 46, 42, 0.65);
}
/* soft top-corner light */
.bk-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(115% 80% at 84% -12%, rgba(255, 255, 255, 0.16), transparent 58%);
}
/* fine drifting hairlines — texture, not orbs */
.bk-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: repeating-linear-gradient(115deg, rgba(255, 255, 255, 0.05) 0 1px, transparent 1px 24px);
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 90%);
  mask-image: linear-gradient(180deg, transparent, #000 90%);
  animation: heroPan 26s linear infinite;
}
@keyframes heroPan { to { background-position: 260px 0; } }

.bk-hero--tall { min-height: clamp(280px, 42vh, 380px); justify-content: center; }
.bk-hero__inner { position: relative; }
.bk-hero__eyebrow {
  font-family: var(--t-eyebrow-font);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: var(--t-eyebrow-spacing);
  text-transform: var(--t-eyebrow-tf);
  color: var(--hero-dim);
  margin: 0 0 0.8rem;
}
.bk-hero__title {
  font-family: var(--t-display);
  font-weight: var(--t-display-weight);
  text-transform: var(--t-display-tf);
  font-size: clamp(2.2rem, 7vw, 3.9rem);
  line-height: 1.02;
  letter-spacing: var(--t-display-spacing);
  color: var(--hero-ink);
  text-wrap: balance;
  margin: 0;
}
.bk-hero__lede {
  margin: 0.9rem 0 0;
  font-size: clamp(1rem, 2.4vw, 1.25rem);
  color: var(--hero-dim);
  max-width: 34ch;
}
.bk-hero__trust {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  list-style: none;
  margin: 1.4rem 0 0;
  padding: 0;
}
.bk-hero__trust li {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.82rem;
  font-weight: 500;
  padding: 0.38rem 0.8rem 0.38rem 0.62rem;
  border-radius: 999px;
  color: var(--hero-ink);
  background: var(--hero-chip);
  border: 1px solid var(--hero-chip-line);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.bk-hero__trust li::before { content: none; }
.bk-hero__trust .ico { color: var(--hero-mint); }

/* =============================================================================
   BOOKING CARD (overlaps the hero)
   ============================================================================= */
.bk-card {
  position: relative;
  z-index: 2;
  margin: -2.6rem clamp(0px, 3vw, 1.25rem) 0;
  padding: clamp(1.4rem, 5vw, 2.1rem);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--card-radius);
  box-shadow: var(--card-shadow);
}
.bk-card--center { margin-top: 1.6rem; text-align: center; }
.bk-card__title {
  font-family: var(--t-display);
  text-transform: var(--t-display-tf);
  font-size: 1.4rem;
  font-weight: var(--t-display-weight);
  letter-spacing: -0.01em;
  margin: 0 0 1.2rem;
}

/* =============================================================================
   PICK CARDS (service / professional / client)
   ============================================================================= */
.pick-list { gap: 0.7rem; margin-top: 0; }
.pick {
  position: relative;
  overflow: hidden;
  gap: 1rem;
  padding: 1rem 1.1rem;
  border-radius: var(--pick-radius);
  border: 1px solid var(--border);
  background: var(--surface);
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease), border-color 0.25s var(--ease);
}
.pick[data-spotlight]::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0;
  background: radial-gradient(240px circle at calc(var(--mx, 0.5) * 100%) calc(var(--my, 0.5) * 100%),
    color-mix(in srgb, var(--accent) 18%, transparent), transparent 60%);
  transition: opacity 0.3s var(--ease);
  pointer-events: none;
}
.pick:hover {
  transform: translate(var(--pick-hover-x), var(--pick-hover-y));
  border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
  box-shadow: var(--pick-shadow);
}
.pick:hover[data-spotlight]::before { opacity: 1; }
.pick__main, .pick__side { position: relative; z-index: 1; }
.pick__icon {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  flex: none;
  border-radius: 13px;
  color: #fff;
  background: linear-gradient(150deg, var(--accent), var(--accent-hover));
  box-shadow: 0 8px 16px -8px color-mix(in srgb, var(--accent) 70%, transparent);
}
.pick__icon .ico { width: 23px; height: 23px; }
.pick__title { display: block; font-weight: 600; font-size: 1.1rem; letter-spacing: -0.01em; }
.pick__meta { display: inline-flex; align-items: center; gap: 0.35rem; margin-top: 0.2rem; color: var(--text-secondary); font-size: 0.88rem; font-family: var(--meta-font); }
.pick__meta .ico { color: var(--text-secondary); }
.pick__price {
  font-weight: 650;
  font-size: 1rem;
  font-variant-numeric: tabular-nums;
  padding: 0.2rem 0.65rem;
  border-radius: 999px;
  color: var(--accent-strong);
  background: var(--accent-soft);
}
.pick__chevron { display: none; }
.pick__side .ico { color: var(--text-tertiary); transition: transform 0.25s var(--ease), color 0.25s var(--ease); }
.pick:hover .pick__side .ico { color: var(--accent); transform: translateX(3px); }
.pick__avatar { width: 46px; height: 46px; border-radius: 13px; font-size: 1.05rem; box-shadow: 0 8px 16px -8px var(--dot, var(--accent)); }

/* =============================================================================
   STEPPER refinement (layout comes from app.css)
   ============================================================================= */
.stepper { margin-bottom: 2rem; }
.stepper__dot {
  width: 30px; height: 30px;
  border-width: 2px;
  transition: transform 0.3s var(--ease), background 0.3s var(--ease), box-shadow 0.3s var(--ease), border-color 0.3s var(--ease);
}
.stepper__item.is-active .stepper__dot {
  transform: scale(1.1);
  box-shadow: 0 0 0 5px var(--ring), 0 6px 16px -6px var(--accent);
}
.stepper__dot .ico { width: 15px; height: 15px; stroke-width: 2.4; }

/* =============================================================================
   TIME SLOTS
   ============================================================================= */
.slot-group__label { display: inline-flex; align-items: center; gap: 0.4rem; color: var(--text-secondary); }
.slot {
  border-radius: var(--slot-radius);
  border: 1px solid var(--border-strong);
  font-weight: 650;
  padding: 0.8rem 0.5rem;
  transition: transform 0.18s var(--ease), background 0.18s var(--ease), color 0.18s var(--ease), box-shadow 0.18s var(--ease), border-color 0.18s var(--ease);
}
.slot:hover {
  transform: translateY(-2px);
  border-color: transparent;
  background: linear-gradient(150deg, var(--accent), var(--accent-hover));
  color: #fff;
  box-shadow: 0 12px 22px -12px var(--accent);
}
.daybtn { border-radius: var(--radius-sm); }

/* =============================================================================
   SUCCESS MARK
   ============================================================================= */
.ok-mark {
  width: 84px; height: 84px;
  background: radial-gradient(circle at 50% 40%,
    color-mix(in srgb, var(--success) 26%, var(--surface)),
    color-mix(in srgb, var(--success) 12%, var(--surface)));
  box-shadow: 0 0 0 10px color-mix(in srgb, var(--success) 10%, transparent), 0 16px 34px -18px var(--success);
}
.ok-mark svg { width: 44px; height: 44px; }

/* =============================================================================
   STAT TILES (used by the settings and import screens)
   ============================================================================= */
.grid { margin-top: 1.25rem; }
.stat {
  position: relative;
  overflow: hidden;
  padding: 1.3rem 1.4rem;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  --tint: var(--accent);
}
.stat::before {
  content: "";
  position: absolute;
  top: -55%; right: -30%;
  width: 55%; height: 130%;
  background: radial-gradient(circle, color-mix(in srgb, var(--tint) 16%, transparent), transparent 68%);
  pointer-events: none;
}
.stat__icon {
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  border-radius: 12px;
  margin-bottom: 0.9rem;
  color: var(--tint);
  background: color-mix(in srgb, var(--tint) 14%, transparent);
}
.stat__value { font-size: 2.3rem; font-weight: 700; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.stat__label { font-size: 0.88rem; }
.stat--blue   { --tint: #0e857a; }
.stat--violet { --tint: #2f8f5b; }
.stat--teal   { --tint: #1f9c8f; }
.stat--amber  { --tint: #c98a1f; }

.stat__ring {
  position: absolute;
  top: 1.1rem; right: 1.1rem;
  width: 46px; height: 46px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background:
    radial-gradient(closest-side, var(--surface) 76%, transparent 77%),
    conic-gradient(var(--tint) calc(var(--pct, 0) * 1%), color-mix(in srgb, var(--tint) 16%, transparent) 0);
}
.stat__ring span { font-size: 0.72rem; font-weight: 700; color: var(--tint); }

.recovered {
  background:
    radial-gradient(120% 160% at 88% -20%, color-mix(in srgb, var(--success) 20%, transparent), transparent 55%),
    var(--surface);
  border-color: color-mix(in srgb, var(--success) 34%, var(--border));
  border-radius: var(--radius-lg);
}
.recovered .card__title { display: inline-flex; align-items: center; gap: 0.5rem; }
.recovered .card__title .ico { color: var(--success); }
.recovered__total { font-family: var(--font-display); font-size: clamp(3rem, 8vw, 4.4rem); letter-spacing: -0.03em; }

.detail-grid .card, .summary-figures { border-radius: var(--radius-lg); }

/* =============================================================================
   AUTH split brand panel
   ============================================================================= */
.auth-brand {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: var(--hero-bg);
  color: var(--hero-ink);
}
.auth-brand::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(110% 80% at 80% -10%, rgba(255, 255, 255, 0.14), transparent 55%);
}
.auth-brand__title { font-family: var(--font-display); font-size: clamp(2rem, 3.6vw, 2.9rem); letter-spacing: -0.015em; }
.auth-brand__list li::before { content: none; }
.auth-brand__list li { padding-left: 0; display: flex; align-items: center; gap: 0.7rem; }
.auth-brand__list .ico { color: var(--hero-mint); }

/* =============================================================================
   REDUCED MOTION
   ============================================================================= */
@media (prefers-reduced-motion: reduce) {
  .bk-hero::after { animation: none; }
  .has-motion [data-reveal] { opacity: 1; transform: none; filter: none; transition: none; }
}