/* =====================================================================
   DSI Citas · tokens y base compartidos (landing + panel)
   Tinta azul de agenda sobre papel; acento = azul del doble check
   ===================================================================== */

:root {
  --paper: #F1F2EE;
  --paper-2: #E8EAE4;
  --surface: #FFFFFF;
  --surface-2: #F6F7F4;
  --ink: #0D1433;
  --ink-2: #3A4266;
  --ink-3: #676E8E;
  --line: #D9DCD4;
  --line-2: #C3C8BE;
  --pen: #2338C8;
  --pen-soft: #E3E7FB;
  --tick: #2F9BD6;
  --tick-soft: #DCEFFA;
  --ok: #16865A;
  --ok-soft: #DCF1E6;
  --warn: #A96F07;
  --warn-soft: #F6EBD2;
  --bad: #BE3537;
  --bad-soft: #F8E1DF;
  --wa: #1A9E50;
  --scrim: rgba(13, 20, 51, .46);
  --shadow-1: 0 1px 2px rgba(13, 20, 51, .06), 0 2px 8px -2px rgba(13, 20, 51, .08);
  --shadow-2: 0 2px 4px rgba(13, 20, 51, .06), 0 18px 40px -12px rgba(13, 20, 51, .28);
  --r-s: 8px;
  --r-m: 14px;
  --r-l: 22px;
  --f-display: 'Bricolage Grotesque', 'Onest', ui-sans-serif, system-ui, sans-serif;
  --f-time: 'Big Shoulders Display', 'Bricolage Grotesque', 'Arial Narrow', ui-sans-serif, sans-serif;
  --f-body: 'Onest', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --ease: cubic-bezier(.2, .7, .1, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #0A0F24;
    --paper-2: #0E1430;
    --surface: #121A3A;
    --surface-2: #172045;
    --ink: #E9ECF8;
    --ink-2: #B6BCD6;
    --ink-3: #8189AA;
    --line: #242D58;
    --line-2: #323D71;
    --pen: #8190FF;
    --pen-soft: #1D2660;
    --tick: #5CC4F2;
    --tick-soft: #10304A;
    --ok: #41C98E;
    --ok-soft: #0F3327;
    --warn: #E6B04A;
    --warn-soft: #3A2C0F;
    --bad: #F2726F;
    --bad-soft: #3E1A1D;
    --wa: #35C46E;
    --scrim: rgba(3, 5, 16, .62);
    --shadow-1: 0 1px 2px rgba(0, 0, 0, .4);
    --shadow-2: 0 2px 4px rgba(0, 0, 0, .35), 0 20px 44px -12px rgba(0, 0, 0, .7);
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --paper: #0A0F24;
  --paper-2: #0E1430;
  --surface: #121A3A;
  --surface-2: #172045;
  --ink: #E9ECF8;
  --ink-2: #B6BCD6;
  --ink-3: #8189AA;
  --line: #242D58;
  --line-2: #323D71;
  --pen: #8190FF;
  --pen-soft: #1D2660;
  --tick: #5CC4F2;
  --tick-soft: #10304A;
  --ok: #41C98E;
  --ok-soft: #0F3327;
  --warn: #E6B04A;
  --warn-soft: #3A2C0F;
  --bad: #F2726F;
  --bad-soft: #3E1A1D;
  --wa: #35C46E;
  --scrim: rgba(3, 5, 16, .62);
  --shadow-1: 0 1px 2px rgba(0, 0, 0, .4);
  --shadow-2: 0 2px 4px rgba(0, 0, 0, .35), 0 20px 44px -12px rgba(0, 0, 0, .7);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--f-body);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  -webkit-tap-highlight-color: transparent;
}

h1, h2, h3, h4 { font-family: var(--f-display); line-height: 1.05; margin: 0; text-wrap: balance; letter-spacing: -.02em; }
p { margin: 0; text-wrap: pretty; }
a { color: inherit; }
img, svg { max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }

.num { font-variant-numeric: tabular-nums; }
.time { font-family: var(--f-time); font-weight: 700; letter-spacing: .01em; font-variant-numeric: tabular-nums; }
.eyebrow {
  font-size: .72rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3);
}
.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.icon { width: 1.15em; height: 1.15em; flex: none; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.icon--fill { fill: currentColor; stroke: none; }

/* Punto que late: solo transform y opacidad (no repinta en cada frame) */
.pulse { position: relative; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--tick); flex: none; }
.pulse::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--tick);
  animation: pulse-ring 2.4s var(--ease-out) infinite;
}
@keyframes pulse-ring { 0% { transform: scale(1); opacity: .55; } 80%, 100% { transform: scale(2.8); opacity: 0; } }

/* ------------------------------------------------------------- buttons */
.btn {
  --btn-bg: var(--surface);
  --btn-fg: var(--ink);
  --btn-bd: var(--line-2);
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  min-height: 44px; padding: 0 1.1rem;
  border-radius: 999px; border: 1px solid var(--btn-bd);
  background: var(--btn-bg); color: var(--btn-fg);
  font-weight: 600; font-size: .95rem; line-height: 1; text-decoration: none; white-space: nowrap;
  transition: background-color .18s var(--ease), border-color .18s var(--ease), color .18s var(--ease), box-shadow .18s var(--ease), transform .18s var(--ease);
  touch-action: manipulation;
}
.btn:hover { --btn-bd: var(--ink-3); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible, .focus-ring:focus-visible { outline: 3px solid var(--tick); outline-offset: 2px; }
.btn[disabled] { opacity: .5; cursor: not-allowed; transform: none; }
.btn--primary { --btn-bg: var(--ink); --btn-fg: var(--paper); --btn-bd: var(--ink); }
.btn--primary:hover { --btn-bg: var(--pen); --btn-bd: var(--pen); --btn-fg: #fff; }
.btn--wa { --btn-bg: var(--wa); --btn-fg: #fff; --btn-bd: var(--wa); }
.btn--wa:hover { filter: brightness(1.06); --btn-bd: var(--wa); }
.btn--ghost { --btn-bg: transparent; --btn-bd: transparent; }
.btn--ghost:hover { --btn-bg: var(--paper-2); --btn-bd: transparent; }
.btn--danger { --btn-bg: var(--bad-soft); --btn-fg: var(--bad); --btn-bd: transparent; }
.btn--danger:hover { --btn-bg: var(--bad); --btn-fg: #fff; --btn-bd: var(--bad); }
.btn--sm { min-height: 36px; padding: 0 .85rem; font-size: .86rem; }
.btn--icon { width: 44px; padding: 0; }
.btn--sm.btn--icon { width: 36px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}

/* --------------------------------------------------------- data-modo */
/* /reservar.html fusiona la agenda de un negocio y el directorio en una
   sola página (v4.2): según body[data-modo] se enseña lo que toca de la
   cabecera y el pie compartidos. Lo fija reservar.js antes de pintar. */
body[data-modo="directorio"] .solo-neg,
body[data-modo="negocio"] .solo-dir { display: none !important; }