/* Clinic OS — tokens de tema (un master, re-skinnable por cliente)
   data-theme="clinic"     → clínica dental premium (cream + verde profundo)
   data-theme="masaje"     → bienestar/masaje premium (nude/beige + salvia)
   data-theme="novatekny"  → marca NovaTekny (navy + cyan) */

/* Dental — clínico moderno: fresco, frío, crisp (teal + coral) */
:root, [data-theme="clinic"] {
  --bg: #eaf3f5;
  --surface: #ffffff;
  --surface-2: #f1f8f9;
  --ink: #0f2a31;
  --muted: #5d7a82;
  --line: #d7e8eb;
  --primary: #0d8290;
  --primary-2: #0a606b;
  --primary-ink: #ffffff;
  --accent: #f0654d;
  --ok: #0d8290;
  --warn: #e08a3c;
  --danger: #d6473a;
  --radius: 14px;
  --radius-sm: 9px;
  --shadow: 0 1px 2px rgba(13,58,66,.05), 0 10px 34px rgba(13,58,66,.09);
  --font: 'Inter', system-ui, -apple-system, sans-serif;
  --display: 'Fraunces', Georgia, 'Times New Roman', serif;
  /* personalidad: titulares sans, geométricos */
  --heading: 'Inter', system-ui, -apple-system, sans-serif;
  --heading-weight: 800;
  --heading-spacing: -.03em;
  --btn-radius: 10px;
  --mono: 'JetBrains Mono', ui-monospace, monospace;
}

/* Masaje / bienestar — spa cálido: terroso, suave, orgánico (terracota + oliva) */
[data-theme="masaje"] {
  --bg: #efe6da;
  --surface: #fcf7f0;
  --surface-2: #f4e9da;
  --ink: #3a2e26;
  --muted: #9b8975;
  --line: #e7d8c5;
  --primary: #b5573a;
  --primary-2: #95422b;
  --primary-ink: #fdf6ee;
  --accent: #7e8a55;
  --ok: #7e8a55;
  --warn: #c07a3c;
  --danger: #b4524a;
  --radius: 22px;
  --radius-sm: 14px;
  --shadow: 0 1px 2px rgba(58,46,38,.05), 0 14px 44px rgba(58,46,38,.10);
  --font: 'Inter', system-ui, -apple-system, sans-serif;
  --display: 'Fraunces', Georgia, 'Times New Roman', serif;
  /* personalidad: titulares serif, elegantes */
  --heading: 'Fraunces', Georgia, 'Times New Roman', serif;
  --heading-weight: 600;
  --heading-spacing: -.02em;
  --btn-radius: 999px;
  --mono: 'JetBrains Mono', ui-monospace, monospace;
}

[data-theme="novatekny"] {
  --bg: #050a14;
  --surface: #0b0e1a;
  --surface-2: #0e1320;
  --ink: #e7ecf3;
  --muted: #94a3b8;
  --line: rgba(255,255,255,.10);
  --primary: #06b6d4;
  --primary-2: #22d3ee;
  --primary-ink: #04141a;
  --accent: #ff6b1a;
  --ok: #22d3ee;
  --warn: #ffb547;
  --danger: #ff6b6b;
  --shadow: 0 1px 2px rgba(0,0,0,.4), 0 12px 40px rgba(0,0,0,.4);
  --display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --heading: 'Inter', system-ui, -apple-system, sans-serif;
  --heading-weight: 800;
  --heading-spacing: -.03em;
  --btn-radius: 999px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
}

/* primitivas reutilizables */
.co-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.co-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--primary); color: var(--primary-ink);
  border: none; border-radius: var(--btn-radius, 999px); padding: 13px 26px;
  font-family: var(--font); font-size: 15px; font-weight: 600; cursor: pointer;
  transition: transform .12s ease, opacity .12s ease, background .12s ease;
}
.co-btn:hover { transform: translateY(-1px); }
.co-btn:disabled { opacity: .45; cursor: not-allowed; transform: none; }
.co-btn-ghost { background: transparent; color: var(--ink); border: 1px solid var(--line); }
.co-chip {
  border: 1px solid var(--line); background: var(--surface); color: var(--ink);
  border-radius: 999px; padding: 9px 16px; font-size: 14px; cursor: pointer;
  transition: all .12s ease;
}
.co-chip:hover { border-color: var(--primary); }
.co-chip[aria-pressed="true"] { background: var(--primary); color: var(--primary-ink); border-color: var(--primary); }
.co-input {
  width: 100%; background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--radius-sm); padding: 12px 14px; font-size: 15px; color: var(--ink);
  font-family: var(--font); outline: none;
}
.co-input:focus { border-color: var(--primary); }
.co-label { display: block; font-size: 13px; color: var(--muted); margin: 0 0 6px; font-weight: 500; }
.co-muted { color: var(--muted); }
.co-powered { font-size: 11px; color: var(--muted); }
.co-powered b { color: var(--ink); }