/*!
 * Eutimya · iOS Liquid Glass — drop-in design layer
 * Brand tokens are cita.html's source-of-truth palette (gold/ink), mapped onto
 * the ios-liquid-glass skill's material + interaction system (frosted surfaces,
 * concentric radii, two-family spring motion, expanding pill).
 * Prefix: --ilg-* tokens, .ilg-* / .eu-* classes. Link this, then per page append
 * the legacy-token adapter (see PATRÓN below) so old --md-*/--teal vars resolve gold.
 */

/* ============================== TOKENS (Eutimya brand) ============================== */
:root{
  /* brand */
  --ilg-accent:#b8893a; --ilg-accent-d:#96702f; --ilg-accent-soft:#F4EDE0;
  --ilg-accent-dim:rgba(184,137,58,.12); --ilg-accent-border:rgba(184,137,58,.28);
  --ilg-font:'DM Sans','Helvetica Neue',-apple-system,BlinkMacSystemFont,sans-serif;
  --ilg-font-display:'Playfair Display',Georgia,serif;

  /* surface + ink (cita.html) */
  --ilg-canvas:#F5F5F7;
  --ilg-ink:#0d1b2a; --ilg-ink-mid:#2a4a6b; --ilg-ink-soft:#5a7a9e;
  --ilg-rule:rgba(13,27,42,.10);
  --ilg-pri:#0d1b2a; --ilg-pri-lt:#F4EDE0;   /* CTA = Eutimya ink, not generic black */
  --ilg-ok:#15803D; --ilg-ok-soft:#DCFCE7; --ilg-warn:#92400e; --ilg-danger:#dc2626;

  /* glass */
  --ilg-glass:rgba(255,255,255,.72);
  --ilg-glass-hover:rgba(255,255,255,.82);
  --ilg-glass-selected:rgba(244,237,224,.82);
  --ilg-glass-strong:rgba(255,255,255,.86);
  --ilg-glass-border:1px solid rgba(13,27,42,.09);
  --ilg-glass-border-strong:1px solid rgba(255,255,255,.92);
  --ilg-blur:saturate(200%) blur(22px);
  --ilg-blur-heavy:saturate(200%) blur(28px);
  --ilg-specular:inset 0 1px 0 rgba(255,255,255,.65);

  /* radius — concentric scale */
  --ilg-r-pill:980px; --ilg-r-lg:20px; --ilg-r-md:14px; --ilg-r-sm:10px;

  /* elevation */
  --ilg-shadow-1:0 4px 24px rgba(13,27,42,.08);
  --ilg-shadow-2:0 8px 24px rgba(13,27,42,.10);
  --ilg-shadow-3:0 20px 60px rgba(13,27,42,.14);
  --ilg-shadow-selected:0 14px 34px rgba(13,27,42,.13),0 3px 10px rgba(13,27,42,.07);
  --ilg-shadow-accent:0 8px 32px rgba(184,137,58,.40);

  /* motion — two families kept separate */
  --ilg-ease-fluid:cubic-bezier(.25,.1,.3,1);
  --ilg-ease-spring:cubic-bezier(.34,1.56,.64,1);
  --ilg-ease-standard:cubic-bezier(0,0,.2,1);
  --ilg-dur-fast:160ms; --ilg-dur-morph:500ms; --ilg-dur-spring:340ms; --ilg-dur-sheet:400ms;
}

[data-theme="dark"],.night,.dark{
  --ilg-canvas:#0F1729;
  --ilg-ink:#E8EDF4; --ilg-ink-mid:#b9c4d2; --ilg-ink-soft:#7e8fa3;
  --ilg-rule:rgba(255,255,255,.10);
  --ilg-glass:rgba(28,32,42,.55);
  --ilg-glass-hover:rgba(38,43,54,.68);
  --ilg-glass-selected:rgba(184,137,58,.22);
  --ilg-glass-strong:rgba(20,23,32,.80);
  --ilg-glass-border:1px solid rgba(255,255,255,.08);
  --ilg-glass-border-strong:1px solid rgba(255,255,255,.14);
  --ilg-specular:inset 0 1px 0 rgba(255,255,255,.10);
  --ilg-pri:#E8EDF4; --ilg-pri-lt:rgba(184,137,58,.16);
  --ilg-shadow-1:0 2px 10px rgba(0,0,0,.35);
  --ilg-shadow-2:0 10px 28px rgba(0,0,0,.45);
  --ilg-shadow-3:0 24px 56px rgba(0,0,0,.55);
  --ilg-shadow-selected:0 14px 34px rgba(0,0,0,.45),0 3px 10px rgba(0,0,0,.3);
}

/* ==================== ACCESSIBILITY FALLBACKS ==================== */
@media (prefers-reduced-transparency: reduce){
  :root{ --ilg-glass:#fff; --ilg-glass-strong:#fff; --ilg-glass-selected:#F4EDE0; --ilg-blur:none; --ilg-blur-heavy:none; }
  [data-theme="dark"],.night,.dark{ --ilg-glass:#1E2C45; --ilg-glass-strong:#141b2c; }
}
@media (prefers-contrast: more){
  :root{ --ilg-glass-border:1.5px solid rgba(13,27,42,.35); }
  [data-theme="dark"],.night,.dark{ --ilg-glass-border:1.5px solid rgba(255,255,255,.35); }
}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important; scroll-behavior:auto !important; }
}

/* ============================== BASE ============================== */
.ilg-glass-surface,.eu-glass{ background:var(--ilg-glass); backdrop-filter:var(--ilg-blur); -webkit-backdrop-filter:var(--ilg-blur);
  border:var(--ilg-glass-border); box-shadow:var(--ilg-shadow-2), var(--ilg-specular); border-radius:var(--ilg-r-md); }

/* generic spring tap-feedback — add to any clickable element */
.ilg-tap,.eu-tap{ transition:transform var(--ilg-dur-spring) var(--ilg-ease-spring), background .2s, box-shadow .2s; cursor:pointer; }
.ilg-tap:active,.eu-tap:active{ transform:scale(1.045); }
@media (hover:hover) and (prefers-reduced-motion:no-preference){ .ilg-tap:hover,.eu-tap:hover{ transform:scale(1.015); } }

/* ============================== BUTTON ============================== */
.ilg-btn{ width:100%; min-height:54px; padding:16px; display:flex; align-items:center; justify-content:center; gap:8px;
  background:var(--ilg-pri); color:#fff; font:800 16.5px var(--ilg-font); border:none; border-radius:var(--ilg-r-pill);
  cursor:pointer; box-shadow:inset 0 1px 0 rgba(255,255,255,.12), 0 8px 24px rgba(0,0,0,.14);
  transition:transform var(--ilg-dur-spring) var(--ilg-ease-spring), background .2s, box-shadow .2s; }
.ilg-btn:active{ transform:scale(1.045); }
.ilg-btn:disabled{ background:var(--ilg-rule); color:var(--ilg-ink-soft); cursor:not-allowed; transform:none; box-shadow:none; }
.ilg-btn-accent{ background:var(--ilg-accent); box-shadow:var(--ilg-shadow-accent); }
@media (hover:hover) and (prefers-reduced-motion:no-preference){ .ilg-btn:not(:disabled):hover{ transform:scale(1.02); } }

/* ============================== EXPANDING PILL SELECTOR ============================== */
.ilg-pill-group{ display:flex; flex-direction:column; gap:9px; }
.ilg-pill{ position:relative; display:flex; align-items:center; gap:12px; background:var(--ilg-glass);
  backdrop-filter:var(--ilg-blur); -webkit-backdrop-filter:var(--ilg-blur);
  border:var(--ilg-glass-border); box-shadow:var(--ilg-specular); border-radius:var(--ilg-r-pill); padding:9px 18px 9px 9px;
  cursor:pointer; font-family:var(--ilg-font);
  transition:transform var(--ilg-dur-spring) var(--ilg-ease-spring),
             border-radius var(--ilg-dur-morph) var(--ilg-ease-fluid),
             padding var(--ilg-dur-morph) var(--ilg-ease-fluid), background .35s, border-color .35s; }
.ilg-pill-input{ position:absolute; opacity:0; width:1px; height:1px; }
.ilg-pill:active{ transform:scale(1.02); }
.ilg-pill:has(.ilg-pill-input:focus-visible){ outline:2px solid var(--ilg-pri); outline-offset:2px; }
.ilg-pill:has(.ilg-pill-input:checked){ border-radius:var(--ilg-r-lg); padding:15px; border-color:transparent;
  background:var(--ilg-glass-selected); box-shadow:var(--ilg-shadow-selected), var(--ilg-specular);
  animation:ilgPop .45s var(--ilg-ease-spring); }
@keyframes ilgPop{ 0%{ transform:scale(1); } 40%{ transform:scale(1.02); } 100%{ transform:scale(1); } }
.ilg-pill-icon{ position:relative; width:36px; height:36px; border-radius:50%; background:rgba(13,27,42,.06);
  display:flex; align-items:center; justify-content:center; flex-shrink:0; color:var(--ilg-ink); transition:background .35s; }
.ilg-pill:has(.ilg-pill-input:checked) .ilg-pill-icon{ background:var(--ilg-accent); color:#fff; }
.ilg-pill-icon svg{ position:absolute; transition:opacity .4s cubic-bezier(.4,0,.6,1), transform var(--ilg-dur-morph) var(--ilg-ease-fluid); }
.ilg-pill-icon .ic-b{ opacity:0; transform:scale(.4) rotate(-45deg); }
.ilg-pill:has(.ilg-pill-input:checked) .ic-a{ opacity:0; transform:rotate(90deg) scale(.4); }
.ilg-pill:has(.ilg-pill-input:checked) .ic-b{ opacity:1; transform:none; }
.ilg-pill-body{ flex:1; min-width:0; display:grid; grid-template-rows:auto 0fr; transition:grid-template-rows var(--ilg-dur-morph) var(--ilg-ease-fluid); }
.ilg-pill:has(.ilg-pill-input:checked) .ilg-pill-body{ grid-template-rows:auto 1fr; }
.ilg-pill-title{ font-size:15.5px; font-weight:800; overflow-wrap:break-word; }
.ilg-pill-detail{ overflow:hidden; min-height:0; font-size:12px; color:var(--ilg-ink-soft); margin-top:0; opacity:0;
  transform:translateY(-4px); transition:opacity .4s cubic-bezier(.4,0,.6,1), transform var(--ilg-dur-morph) var(--ilg-ease-fluid), margin-top var(--ilg-dur-morph) var(--ilg-ease-fluid); }
.ilg-pill:has(.ilg-pill-input:checked) .ilg-pill-detail{ opacity:1; transform:none; margin-top:2px; }
.ilg-pill-meta{ font-size:18px; font-weight:800; color:var(--ilg-pri); text-align:right; white-space:nowrap; flex-shrink:0; }
.ilg-pill[aria-expanded="true"]{ border-radius:var(--ilg-r-lg); padding:15px; border-color:transparent;
  background:var(--ilg-glass-selected); box-shadow:var(--ilg-shadow-selected), var(--ilg-specular); animation:ilgPop .45s var(--ilg-ease-spring); }
.ilg-pill[aria-expanded="true"] .ilg-pill-icon{ background:var(--ilg-accent); color:#fff; }
.ilg-pill[aria-expanded="true"] .ic-a{ opacity:0; transform:rotate(90deg) scale(.4); }
.ilg-pill[aria-expanded="true"] .ic-b{ opacity:1; transform:none; }
.ilg-pill[aria-expanded="true"] .ilg-pill-body{ grid-template-rows:auto 1fr; }
.ilg-pill[aria-expanded="true"] .ilg-pill-detail{ opacity:1; transform:none; margin-top:2px; }

/* ============================== SEGMENTED CONTROL ============================== */
.ilg-seg{ display:flex; gap:8px; }
.ilg-seg-opt{ position:relative; flex:1; min-height:50px; display:flex; align-items:center; justify-content:center; gap:8px;
  padding:11px 8px; border-radius:var(--ilg-r-pill); background:var(--ilg-glass); border:var(--ilg-glass-border);
  box-shadow:var(--ilg-specular); cursor:pointer; font:700 14px var(--ilg-font); color:var(--ilg-ink);
  transition:transform var(--ilg-dur-spring) var(--ilg-ease-spring), border-color .2s, background .2s; }
.ilg-seg-opt input{ position:absolute; opacity:0; width:1px; height:1px; }
.ilg-seg-opt:active{ transform:scale(1.06); }
.ilg-seg-opt:has(input:checked){ border-color:transparent; background:var(--ilg-glass-selected); box-shadow:var(--ilg-shadow-selected), var(--ilg-specular); }
.ilg-seg-opt:has(input:focus-visible){ outline:2px solid var(--ilg-pri); outline-offset:2px; }

/* ============================== FLOATING NAVBAR ============================== */
.ilg-nav{ position:fixed; top:14px; left:50%; transform:translateX(-50%); width:calc(100% - 28px); max-width:1180px; z-index:300;
  display:flex; align-items:center; justify-content:space-between; gap:1.5rem; padding:.75rem 1.25rem;
  background:var(--ilg-glass-strong); backdrop-filter:var(--ilg-blur-heavy); -webkit-backdrop-filter:var(--ilg-blur-heavy);
  border:var(--ilg-glass-border-strong); border-radius:var(--ilg-r-pill); box-shadow:var(--ilg-shadow-2), var(--ilg-specular); }
.ilg-nav-cta{ background:var(--ilg-accent); color:#fff; padding:.55rem 1.4rem; border-radius:var(--ilg-r-pill); font-size:.78rem;
  font-weight:700; box-shadow:var(--ilg-shadow-accent); text-decoration:none; display:inline-block;
  transition:transform var(--ilg-dur-spring) var(--ilg-ease-spring), filter .2s; }
.ilg-nav-cta:active{ transform:scale(1.06); }

/* ============================== BOTTOM SHEET ============================== */
.ilg-scrim{ position:fixed; inset:0; z-index:999; display:flex; align-items:flex-end; justify-content:center;
  background:rgba(13,27,42,.4); backdrop-filter:blur(10px) saturate(160%); -webkit-backdrop-filter:blur(10px) saturate(160%); }
.ilg-sheet{ width:100%; max-width:500px; background:var(--ilg-canvas); border-radius:var(--ilg-r-lg) var(--ilg-r-lg) 0 0;
  padding:10px 20px 40px; box-shadow:0 -10px 40px rgba(13,27,42,.15); animation:ilgSheetUp var(--ilg-dur-sheet) var(--ilg-ease-fluid) both; }
@keyframes ilgSheetUp{ from{ transform:translateY(100%); } to{ transform:translateY(0); } }
.ilg-sheet-grabber{ width:36px; height:5px; border-radius:3px; background:var(--ilg-rule); margin:0 auto 14px; }

/* ============================== TIME / CALENDAR ============================== */
.ilg-timeslot{ padding:13px 4px; min-height:44px; text-align:center; border-radius:var(--ilg-r-pill); background:var(--ilg-glass);
  border:var(--ilg-glass-border); box-shadow:var(--ilg-specular); font:700 14px var(--ilg-font); cursor:pointer; color:var(--ilg-ink);
  transition:transform var(--ilg-dur-spring) var(--ilg-ease-spring), border-color .18s, background .18s; }
.ilg-timeslot:active{ transform:scale(1.1); }
.ilg-timeslot[aria-pressed="true"]{ border-color:transparent; background:var(--ilg-glass-selected); color:var(--ilg-pri); box-shadow:var(--ilg-shadow-selected), var(--ilg-specular); }

/* ============================== TOAST ============================== */
.ilg-toast{ position:fixed; left:50%; bottom:24px; transform:translateX(-50%) translateY(16px); background:var(--ilg-ink); color:#fff;
  padding:13px 22px; border-radius:var(--ilg-r-lg); font:600 14px var(--ilg-font); opacity:0; pointer-events:none; z-index:9999;
  transition:all .3s var(--ilg-ease-standard); max-width:88vw; text-align:center; }
.ilg-toast.is-visible{ opacity:1; transform:translateX(-50%) translateY(0); }

/*
 * PATRÓN de adaptador por página (inyectar al final del <style> propio, después
 * del :root del archivo, para ganar por cascada). Ejemplo Material Design 3:
 *   :root{ --md-primary:var(--ilg-accent); --md-on-primary:#fff;
 *          --md-primary-container:var(--ilg-accent-soft); --md-on-primary-container:var(--ilg-ink);
 *          --md-tertiary:var(--ilg-accent); --md-background:var(--ilg-canvas); --md-surface:var(--ilg-canvas);
 *          --md-on-background:var(--ilg-ink); --md-on-surface:var(--ilg-ink); ... }
 */