/* =========================================================
   CitasPro · temas y componentes
   Cada tema solo redefine variables; los componentes son comunes.
   ========================================================= */
:root, [data-theme="serio"] {
  --bg: #eef1f5; --bg-band: #1f3a5f; --on-band: #f4f6fa; --surface: #ffffff; --surface-2: #f5f7fa;
  --text: #17202e; --muted: #5b6678; --primary: #1f3a5f; --on-primary: #ffffff; --accent: #b08d3c;
  --border: #d5dbe4; --border-w: 1px; --radius: 6px; --radius-lg: 10px;
  --shadow: 0 1px 2px rgba(23,32,46,.08), 0 6px 16px rgba(23,32,46,.06);
  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-head: Georgia, "Times New Roman", serif; --head-weight: 700; --head-transform: none; --head-spacing: 0;
  --ok: #1f7a4d; --warn: #b7791f; --danger: #b42318; --focus: #3b82f6;
  --free-bg: #e8f4ee; --busy-bg: repeating-linear-gradient(45deg, #eef0f3 0 6px, #e3e6eb 6px 12px);
  --bg-pattern: none;
}
[data-theme="elegante"] {
  --bg: #161412; --bg-band: #0f0d0c; --on-band: #efe8dc; --surface: #211e1b; --surface-2: #2a2622;
  --text: #efe8dc; --muted: #a79d8e; --primary: #c9a96e; --on-primary: #1a1612; --accent: #8e6f45;
  --border: #3a342d; --radius: 2px; --radius-lg: 3px; --shadow: 0 10px 30px rgba(0,0,0,.35);
  --font-head: Didot, "Bodoni MT", "Bodoni 72", Georgia, serif; --head-weight: 400; --head-spacing: .02em;
  --ok: #8fbf8a; --warn: #d9a74a; --danger: #e07a6a; --focus: #c9a96e;
  --free-bg: #2b3226; --busy-bg: repeating-linear-gradient(45deg, #26221e 0 6px, #2e2924 6px 12px);
}
[data-theme="divertido"] {
  --bg: #fff4e6; --bg-band: #ffc23d; --on-band: #2b1d3a; --surface: #ffffff; --surface-2: #fff0f5;
  --text: #2b1d3a; --muted: #6f5e80; --primary: #ff4f7b; --on-primary: #ffffff; --accent: #3dbbff;
  --border: #2b1d3a; --border-w: 2px; --radius: 18px; --radius-lg: 26px; --shadow: 0 5px 0 #2b1d3a;
  --font-body: "Trebuchet MS", "Nunito", "Segoe UI Rounded", system-ui, sans-serif;
  --font-head: "Arial Rounded MT Bold", "Nunito", "Trebuchet MS", system-ui, sans-serif; --head-weight: 800;
  --ok: #10a36b; --warn: #e08a00; --danger: #e5383b; --focus: #3dbbff;
  --free-bg: #dcfbe9; --busy-bg: repeating-linear-gradient(45deg, #ffe3ec 0 6px, #ffd0de 6px 12px);
  --bg-pattern: radial-gradient(#ffd9a8 1.5px, transparent 1.6px) 0 0 / 22px 22px;
}
[data-theme="retro"] {
  --bg: #efe3c8; --bg-band: #3a2a1d; --on-band: #f8f0dc; --surface: #f8f0dc; --surface-2: #f1e5c9;
  --text: #3a2a1d; --muted: #7a634c; --primary: #d9480f; --on-primary: #fff8ec; --accent: #13776f;
  --border: #3a2a1d; --border-w: 2px; --radius: 0; --radius-lg: 0; --shadow: 4px 4px 0 #3a2a1d;
  --font-body: "Courier Prime", "Courier New", Courier, monospace;
  --font-head: "Cooper Black", "Cooper Std", Rockwell, "Rockwell Extra Bold", Georgia, serif; --head-weight: 900;
  --ok: #13776f; --warn: #c27c0e; --danger: #b3261e; --focus: #13776f;
  --free-bg: #d8ead3; --busy-bg: repeating-linear-gradient(45deg, #e6d6b3 0 5px, #dccaa2 5px 10px);
}
[data-theme="futurista"] {
  --bg: #070a1a; --bg-band: #0b1030; --on-band: #dfe8ff; --surface: rgba(16,22,56,.82); --surface-2: #141a3d;
  --text: #dfe8ff; --muted: #8391c0; --primary: #00e0ff; --on-primary: #03121a; --accent: #ff3ecf;
  --border: rgba(0,224,255,.28); --radius: 12px; --radius-lg: 16px;
  --shadow: 0 0 0 1px rgba(0,224,255,.12), 0 0 28px rgba(0,224,255,.08);
  --font-body: "Segoe UI", "Inter", system-ui, sans-serif;
  --font-head: Orbitron, Eurostile, "Bank Gothic", "Segoe UI", system-ui, sans-serif; --head-weight: 700;
  --head-transform: uppercase; --head-spacing: .08em;
  --ok: #37f5a4; --warn: #ffd166; --danger: #ff5c7a; --focus: #ff3ecf;
  --free-bg: rgba(55,245,164,.12); --busy-bg: repeating-linear-gradient(45deg, rgba(255,62,207,.08) 0 6px, rgba(255,62,207,.14) 6px 12px);
  --bg-pattern: linear-gradient(rgba(0,224,255,.05) 1px, transparent 1px) 0 0 / 40px 40px, linear-gradient(90deg, rgba(0,224,255,.05) 1px, transparent 1px) 0 0 / 40px 40px;
}
[data-theme="natural"] {
  --bg: #eef2ea; --bg-band: #2f6b45; --on-band: #f3f7ef; --surface: #fbfcf8; --surface-2: #f1f5ec;
  --text: #1f2b22; --muted: #5c6b5f; --primary: #2f6b45; --on-primary: #ffffff; --accent: #c98f2c;
  --border: #d3dccf; --radius: 14px; --radius-lg: 22px; --shadow: 0 2px 10px rgba(31,43,34,.07);
  --font-head: "Palatino Linotype", "Book Antiqua", Palatino, Georgia, serif; --head-weight: 700;
  --ok: #2f6b45; --warn: #b8741a; --danger: #a33a2b; --focus: #c98f2c;
  --free-bg: #e2efdc; --busy-bg: repeating-linear-gradient(45deg, #e9ece5 0 6px, #dfe4d9 6px 12px);
}
[data-theme="minimal"] {
  --bg: #ffffff; --bg-band: #ffffff; --on-band: #111111; --surface: #ffffff; --surface-2: #f5f5f5;
  --text: #111111; --muted: #6b6b6b; --primary: #111111; --on-primary: #ffffff; --accent: #777777;
  --border: #e6e6e6; --radius: 10px; --radius-lg: 14px; --shadow: none;
  --font-head: system-ui, -apple-system, "Segoe UI", sans-serif; --head-weight: 650; --head-spacing: -.02em;
  --ok: #1a7f37; --warn: #9a6700; --danger: #cf222e; --focus: #0969da;
  --free-bg: #f0f7f1; --busy-bg: repeating-linear-gradient(45deg, #f5f5f5 0 6px, #ececec 6px 12px);
}
[data-theme="clinico"] {
  --bg: #f2f8fc; --bg-band: #0f6fa8; --on-band: #ffffff; --surface: #ffffff; --surface-2: #eef6fb;
  --text: #0e2a3d; --muted: #50687a; --primary: #0f6fa8; --on-primary: #ffffff; --accent: #19a38a;
  --border: #d4e4ef; --radius: 10px; --radius-lg: 14px; --shadow: 0 2px 8px rgba(14,42,61,.07);
  --font-head: "Segoe UI", system-ui, sans-serif; --head-weight: 600;
  --ok: #19a38a; --warn: #c07d10; --danger: #c0392b; --focus: #19a38a;
  --free-bg: #e3f5f1; --busy-bg: repeating-linear-gradient(45deg, #eef3f7 0 6px, #e3ebf1 6px 12px);
}

/* ---------- Base ---------- */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh; background: var(--bg); background-image: var(--bg-pattern, none);
  color: var(--text); font: 16px/1.55 var(--font-body);
}
h1, h2, h3, h4 { font-family: var(--font-head); font-weight: var(--head-weight); text-transform: var(--head-transform); letter-spacing: var(--head-spacing); line-height: 1.2; margin: 0 0 .6em; }
h1 { font-size: clamp(1.9rem, 5vw, 3.2rem); }
h2 { font-size: clamp(1.35rem, 3vw, 1.8rem); }
h3 { font-size: 1.15rem; }
p { margin: 0 0 1em; }
a { color: var(--primary); }
img { max-width: 100%; display: block; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.muted { color: var(--muted); }
.small { font-size: .875rem; }
.hidden { display: none !important; }
.row { display: flex; gap: .75rem; align-items: center; flex-wrap: wrap; }
.row.between { justify-content: space-between; }
.stack > * + * { margin-top: 1rem; }
.grow { flex: 1 1 auto; }
.container { width: min(1120px, 100% - 2rem); margin-inline: auto; }
.pre { white-space: pre-line; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* ---------- Botones y formularios ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .45rem; cursor: pointer;
  padding: .62rem 1.1rem; border-radius: var(--radius); border: var(--border-w, 1px) solid var(--border);
  background: var(--surface); color: var(--text); font: inherit; font-weight: 600; text-decoration: none;
  transition: transform .08s ease, filter .15s ease, box-shadow .15s ease;
}
.btn:hover { filter: brightness(1.05); }
.btn:active { transform: translateY(1px); }
.btn[disabled] { opacity: .5; cursor: not-allowed; }
.btn-primary { background: var(--primary); color: var(--on-primary); border-color: var(--primary); }
.btn-accent { background: var(--accent); color: #fff; border-color: var(--accent); }
.btn-danger { background: var(--danger); color: #fff; border-color: var(--danger); }
.btn-ghost { background: transparent; border-color: transparent; }
.btn-sm { padding: .35rem .7rem; font-size: .875rem; }
.btn-icon { padding: .5rem; width: 2.5rem; height: 2.5rem; }
[data-theme="divertido"] .btn-primary, [data-theme="retro"] .btn-primary { border-color: var(--border); box-shadow: 0 3px 0 var(--border); }
[data-theme="futurista"] .btn-primary { box-shadow: 0 0 18px rgba(0,224,255,.45); }

label { display: block; font-weight: 600; font-size: .9rem; margin-bottom: .3rem; }
.field { margin-bottom: 1rem; }
.field .hint { font-weight: 400; color: var(--muted); font-size: .82rem; margin-top: .25rem; }
input, select, textarea {
  width: 100%; padding: .6rem .75rem; font: inherit; color: var(--text);
  background: var(--surface-2); border: var(--border-w, 1px) solid var(--border); border-radius: var(--radius);
}
textarea { min-height: 6rem; resize: vertical; }
input[type="checkbox"], input[type="radio"] { width: auto; }
input[type="color"] { padding: 0; height: 2.6rem; width: 4rem; cursor: pointer; }
.switch { display: flex; align-items: center; gap: .6rem; font-weight: 500; cursor: pointer; margin: .4rem 0; }
.switch input { appearance: none; width: 2.6rem; height: 1.45rem; border-radius: 1rem; background: var(--border); position: relative; transition: background .15s; flex: none; border: 0; padding: 0; }
.switch input::after { content: ""; position: absolute; top: 3px; left: 3px; width: calc(1.45rem - 6px); height: calc(1.45rem - 6px); border-radius: 50%; background: #fff; transition: transform .15s; }
.switch input:checked { background: var(--ok); }
.switch input:checked::after { transform: translateX(1.15rem); }
.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 0 1rem; }

/* ---------- Tarjetas ---------- */
.card { background: var(--surface); border: var(--border-w, 1px) solid var(--border); border-radius: var(--radius-lg); padding: 1.25rem; box-shadow: var(--shadow); }
.card + .card { margin-top: 1.25rem; }
.badge { display: inline-block; padding: .12rem .55rem; border-radius: 999px; font-size: .78rem; font-weight: 700; background: var(--surface-2); border: 1px solid var(--border); }
.badge.ok { background: var(--ok); color: #fff; border-color: transparent; }
.badge.warn { background: var(--warn); color: #fff; border-color: transparent; }
.badge.danger { background: var(--danger); color: #fff; border-color: transparent; }
.dot { width: .6rem; height: .6rem; border-radius: 50%; display: inline-block; background: var(--muted); }
.dot.on { background: var(--ok); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ok) 25%, transparent); }

/* ---------- Cabecera y pestañas (cliente) ---------- */
.site-header { background: var(--surface); border-bottom: var(--border-w, 1px) solid var(--border); position: sticky; top: 0; z-index: 30; }
.site-header .container { display: flex; align-items: center; gap: 1rem; min-height: 64px; }
.brand { display: flex; align-items: center; gap: .7rem; text-decoration: none; color: var(--text); font-family: var(--font-head); font-weight: var(--head-weight); font-size: 1.2rem; text-transform: var(--head-transform); letter-spacing: var(--head-spacing); }
.brand img { height: 40px; width: auto; border-radius: var(--radius); }
.tabs { display: flex; gap: .25rem; margin-left: auto; }
.tab { background: none; border: 0; font: inherit; color: var(--muted); padding: .55rem .9rem; border-radius: var(--radius); cursor: pointer; font-weight: 600; display: flex; align-items: center; gap: .4rem; }
.tab[aria-selected="true"] { color: var(--primary); background: var(--surface-2); }
[data-theme="futurista"] .tab[aria-selected="true"] { box-shadow: inset 0 -2px 0 var(--primary); }
.tab svg { width: 20px; height: 20px; }
.account-btn { margin-left: .5rem; }
@media (max-width: 760px) {
  .tabs { position: fixed; bottom: 0; left: 0; right: 0; margin: 0; background: var(--surface); border-top: var(--border-w, 1px) solid var(--border); justify-content: space-around; padding: .3rem .3rem calc(.3rem + env(safe-area-inset-bottom)); z-index: 40; }
  .tab { flex-direction: column; font-size: .75rem; gap: .1rem; padding: .35rem .5rem; flex: 1; }
  body.has-tabs { padding-bottom: 76px; }
  .account-btn { margin-left: auto; }
}

/* ---------- Pestaña Negocio ---------- */
.hero { background: var(--bg-band); color: var(--on-band); padding: clamp(2.5rem, 7vw, 5rem) 0; }
.hero .container { display: grid; grid-template-columns: 1.2fr 1fr; gap: 2rem; align-items: center; }
.hero.no-image .container { grid-template-columns: 1fr; }
.hero h1 { margin-bottom: .3em; max-width: 18ch; }
.hero p.tagline { font-size: 1.2rem; opacity: .9; max-width: 50ch; }
.hero .hero-img { border-radius: var(--radius-lg); aspect-ratio: 4/3; object-fit: cover; width: 100%; box-shadow: var(--shadow); }
.hero .btn { border-color: currentColor; }
.hero .btn-outline { background: transparent; color: var(--on-band); }
[data-theme="minimal"] .hero { border-bottom: 1px solid var(--border); }
[data-theme="futurista"] .hero h1 { text-shadow: 0 0 24px rgba(0,224,255,.45); }
[data-theme="retro"] .hero { border-bottom: 6px double var(--primary); }
@media (max-width: 760px) { .hero .container { grid-template-columns: 1fr; } }
.section { padding: 2.5rem 0; }
.about { display: grid; grid-template-columns: 1.4fr 1fr; gap: 1.5rem; }
@media (max-width: 860px) { .about { grid-template-columns: 1fr; } }
.hours-table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.hours-table td { padding: .3rem 0; border-bottom: 1px dashed var(--border); }
.hours-table td:last-child { text-align: right; }
.hours-table tr.today td { font-weight: 700; color: var(--primary); }
.chips { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: 1.2rem; }
.chip { border: var(--border-w, 1px) solid var(--border); background: var(--surface); color: var(--text); padding: .4rem .9rem; border-radius: 999px; cursor: pointer; font: inherit; font-weight: 600; }
.chip[aria-pressed="true"] { background: var(--primary); color: var(--on-primary); border-color: var(--primary); }
.services { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1.25rem; }
.service { display: flex; flex-direction: column; background: var(--surface); border: var(--border-w, 1px) solid var(--border); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow); }
.service .ph { aspect-ratio: 16/10; background: var(--surface-2); object-fit: cover; width: 100%; }
.service .ph.empty { display: grid; place-items: center; font-size: 2.5rem; }
.service .body { padding: 1rem 1.1rem 1.1rem; display: flex; flex-direction: column; gap: .5rem; flex: 1; }
.service h3 { margin: 0; }
.service .meta { display: flex; gap: .6rem; color: var(--muted); font-size: .9rem; flex-wrap: wrap; }
.service .price { font-weight: 800; color: var(--primary); font-size: 1.15rem; }
.service .desc { color: var(--muted); font-size: .95rem; flex: 1; }
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: .75rem; }
.gallery button { padding: 0; border: 0; background: none; cursor: zoom-in; border-radius: var(--radius); overflow: hidden; }
.gallery img { aspect-ratio: 1; object-fit: cover; width: 100%; transition: transform .25s; }
.gallery button:hover img { transform: scale(1.04); }
.contact-list { list-style: none; margin: 0; padding: 0; }
.contact-list li { padding: .45rem 0; display: flex; gap: .6rem; align-items: baseline; }

/* ---------- Calendario de citas ---------- */
.booking { display: grid; grid-template-columns: 1.25fr 1fr; gap: 1.25rem; align-items: start; }
@media (max-width: 900px) { .booking { grid-template-columns: 1fr; } }
.cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: .75rem; }
.cal-head h3 { margin: 0; text-transform: capitalize; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: .35rem; }
.cal-dow { text-align: center; font-size: .78rem; color: var(--muted); font-weight: 700; padding-bottom: .2rem; }
.cal-day {
  aspect-ratio: 1; border-radius: var(--radius); border: var(--border-w, 1px) solid var(--border); background: var(--surface);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .1rem;
  font: inherit; color: var(--text); cursor: pointer; position: relative; padding: 0;
}
.cal-day .n { font-weight: 700; font-size: 1rem; }
.cal-day .c { font-size: .68rem; font-weight: 700; color: var(--ok); }
.cal-day.available { background: var(--free-bg); }
.cal-day.full { background: var(--busy-bg); cursor: not-allowed; }
.cal-day.full .c { color: var(--danger); }
.cal-day.closed, .cal-day.past, .cal-day.out_of_range { opacity: .38; cursor: not-allowed; background: var(--surface-2); }
.cal-day.today { outline: 2px solid var(--accent); outline-offset: -2px; }
.cal-day.selected { background: var(--primary); color: var(--on-primary); border-color: var(--primary); }
.cal-day.selected .c { color: var(--on-primary); }
.cal-day.empty { visibility: hidden; }
.cal-legend { display: flex; gap: 1rem; flex-wrap: wrap; margin-top: .8rem; font-size: .8rem; color: var(--muted); }
.cal-legend span::before { content: ""; display: inline-block; width: .8rem; height: .8rem; border-radius: 3px; margin-right: .35rem; vertical-align: -1px; border: 1px solid var(--border); }
.cal-legend .l-free::before { background: var(--free-bg); }
.cal-legend .l-full::before { background: var(--busy-bg); }
.cal-legend .l-closed::before { background: var(--surface-2); opacity: .5; }
.slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(86px, 1fr)); gap: .45rem; }
.slot { padding: .55rem .3rem; border-radius: var(--radius); border: var(--border-w, 1px) solid var(--border); background: var(--free-bg); color: var(--text); font: inherit; font-weight: 700; cursor: pointer; text-align: center; }
.slot small { display: block; font-weight: 500; font-size: .7rem; color: var(--muted); }
.slot:hover:not([disabled]) { border-color: var(--primary); }
.slot[disabled] { background: var(--busy-bg); color: var(--muted); cursor: not-allowed; text-decoration: line-through; }
.appt-list { list-style: none; padding: 0; margin: 0; }
.appt-list li { display: flex; gap: .8rem; align-items: center; justify-content: space-between; padding: .7rem 0; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.appt-list li:last-child { border-bottom: 0; }
.date-chip { min-width: 3.4rem; text-align: center; border-radius: var(--radius); background: var(--surface-2); padding: .3rem .4rem; line-height: 1.1; border: 1px solid var(--border); }
.date-chip b { display: block; font-size: 1.2rem; }
.date-chip span { font-size: .7rem; text-transform: uppercase; color: var(--muted); }

/* ---------- Chat ---------- */
.chat { display: flex; flex-direction: column; height: min(70vh, 620px); background: var(--surface); border: var(--border-w, 1px) solid var(--border); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow); }
.chat-top { padding: .75rem 1rem; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: .7rem; }
.chat-msgs { flex: 1; overflow-y: auto; padding: 1rem; display: flex; flex-direction: column; gap: .5rem; background: var(--surface-2); }
.msg { max-width: 78%; padding: .55rem .8rem; border-radius: calc(var(--radius) + 6px); background: var(--surface); border: 1px solid var(--border); white-space: pre-wrap; overflow-wrap: anywhere; }
.msg.me { align-self: flex-end; background: var(--primary); color: var(--on-primary); border-color: var(--primary); }
.msg time { display: block; font-size: .68rem; opacity: .7; margin-top: .2rem; }
.msg .who { font-size: .72rem; font-weight: 700; opacity: .75; }
.chat-form { display: flex; gap: .5rem; padding: .75rem; border-top: 1px solid var(--border); }
.chat-form textarea { min-height: 2.6rem; height: 2.6rem; max-height: 8rem; }
.typing { font-size: .8rem; color: var(--muted); padding: 0 1rem .3rem; min-height: 1.2rem; background: var(--surface-2); }
.notice { padding: 1rem; border-radius: var(--radius); background: var(--surface-2); border: 1px dashed var(--border); }

/* ---------- Llamada ---------- */
.call-overlay { position: fixed; inset: 0; z-index: 100; background: rgba(5,8,15,.92); color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem; padding: 1rem; }
.call-overlay video.remote { width: min(960px, 100%); max-height: 70vh; background: #000; border-radius: 12px; }
.call-overlay video.local { position: absolute; right: 1rem; top: 1rem; width: min(220px, 32vw); border-radius: 10px; background: #111; border: 2px solid rgba(255,255,255,.3); }
.call-overlay .who { font-size: 1.4rem; font-weight: 700; }
.call-overlay .status { opacity: .8; }
.call-overlay .controls { display: flex; gap: .8rem; }
.call-overlay .controls .btn { border-radius: 999px; min-width: 3.2rem; height: 3.2rem; }
.call-avatar { width: 110px; height: 110px; border-radius: 50%; background: #2a3350; display: grid; place-items: center; font-size: 2.6rem; font-weight: 700; animation: pulse 1.6s infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(255,255,255,.35); } 100% { box-shadow: 0 0 0 26px rgba(255,255,255,0); } }

/* ---------- Modal y avisos ---------- */
.modal-back { position: fixed; inset: 0; background: rgba(10,14,22,.55); z-index: 80; display: grid; place-items: center; padding: 1rem; }
.modal { background: var(--surface); color: var(--text); border: var(--border-w, 1px) solid var(--border); border-radius: var(--radius-lg); width: min(520px, 100%); max-height: 92vh; overflow: auto; box-shadow: 0 20px 60px rgba(0,0,0,.35); }
.modal.wide { width: min(820px, 100%); }
.modal header { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.25rem; border-bottom: 1px solid var(--border); }
.modal header h3 { margin: 0; }
.modal .content { padding: 1.25rem; }
.modal footer { display: flex; gap: .6rem; justify-content: flex-end; padding: 1rem 1.25rem; border-top: 1px solid var(--border); flex-wrap: wrap; }
.toasts { position: fixed; right: 1rem; bottom: 1rem; z-index: 120; display: flex; flex-direction: column; gap: .5rem; }
@media (max-width: 760px) { .toasts { bottom: 90px; left: 1rem; } }
.toast { background: var(--text); color: var(--bg); padding: .7rem 1rem; border-radius: var(--radius); box-shadow: 0 8px 24px rgba(0,0,0,.25); max-width: 380px; font-weight: 500; }
.toast.error { background: var(--danger); color: #fff; }
.toast.ok { background: var(--ok); color: #fff; }
.lightbox { position: fixed; inset: 0; background: rgba(0,0,0,.9); z-index: 90; display: grid; place-items: center; padding: 1rem; cursor: zoom-out; }
.lightbox img { max-height: 90vh; border-radius: 8px; }
.lightbox p { color: #fff; text-align: center; margin-top: .6rem; }
.site-footer { padding: 2rem 0 3rem; color: var(--muted); font-size: .88rem; text-align: center; }
.empty-state { text-align: center; padding: 2rem 1rem; color: var(--muted); }

/* ---------- Panel de administración ---------- */
.admin-shell { display: grid; grid-template-columns: 250px 1fr; min-height: 100vh; }
.admin-side { background: var(--bg-band); color: var(--on-band); padding: 1rem .7rem; position: sticky; top: 0; height: 100vh; overflow-y: auto; }
.admin-side .brand { color: var(--on-band); padding: .4rem .5rem 1rem; font-size: 1.05rem; }
.admin-side .role { font-size: .75rem; opacity: .75; padding: 0 .5rem .8rem; }
.admin-side nav button { width: 100%; text-align: left; display: flex; gap: .6rem; align-items: center; background: none; border: 0; color: inherit; opacity: .82; padding: .55rem .7rem; border-radius: var(--radius); font: inherit; cursor: pointer; }
.admin-side nav button:hover { opacity: 1; background: rgba(255,255,255,.08); }
.admin-side nav button[aria-current="page"] { opacity: 1; background: rgba(255,255,255,.16); font-weight: 700; }
[data-theme="minimal"] .admin-side nav button:hover, [data-theme="minimal"] .admin-side nav button[aria-current="page"] { background: #f0f0f0; }
[data-theme="minimal"] .admin-side { border-right: 1px solid var(--border); }
.admin-side .group { font-size: .72rem; opacity: .6; padding: 1rem .7rem .3rem; }
.admin-side .nb { margin-left: auto; background: var(--danger); color: #fff; border-radius: 999px; font-size: .7rem; padding: 0 .45rem; font-weight: 700; }
.admin-main { padding: 1.5rem clamp(1rem, 3vw, 2.5rem) 3rem; min-width: 0; }
.admin-main > h2 { margin-bottom: 1.2rem; }
.admin-topbar { display: none; }
@media (max-width: 900px) {
  .admin-shell { grid-template-columns: 1fr; }
  .admin-side { position: fixed; left: 0; top: 0; bottom: 0; width: 270px; z-index: 60; transform: translateX(-100%); transition: transform .2s; }
  .admin-side.open { transform: none; }
  .admin-topbar { display: flex; align-items: center; gap: .7rem; padding: .6rem 1rem; background: var(--surface); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 50; }
}
.stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 1rem; margin-bottom: 1.25rem; }
.stat { background: var(--surface); border: var(--border-w, 1px) solid var(--border); border-radius: var(--radius-lg); padding: 1rem; box-shadow: var(--shadow); }
.stat b { display: block; font-size: 1.7rem; font-family: var(--font-head); }
.stat span { color: var(--muted); font-size: .85rem; }
.meter { height: .5rem; border-radius: 1rem; background: var(--surface-2); overflow: hidden; margin-top: .5rem; border: 1px solid var(--border); }
.meter i { display: block; height: 100%; background: var(--ok); }
.meter i.hi { background: var(--warn); }
.meter i.crit { background: var(--danger); }
.table-wrap { overflow-x: auto; background: var(--surface); border: var(--border-w, 1px) solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow); }
table.data { width: 100%; border-collapse: collapse; font-size: .92rem; }
table.data th, table.data td { padding: .6rem .75rem; text-align: left; border-bottom: 1px solid var(--border); vertical-align: middle; }
table.data th { font-size: .78rem; color: var(--muted); background: var(--surface-2); white-space: nowrap; }
table.data tr:last-child td { border-bottom: 0; }
table.data td.actions { white-space: nowrap; text-align: right; }
table.data select { padding: .3rem .4rem; width: auto; }
.toolbar { display: flex; gap: .6rem; flex-wrap: wrap; align-items: end; margin-bottom: 1rem; }
.toolbar .field { margin: 0; }
.toolbar input, .toolbar select { width: auto; }
.theme-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 1rem; }
.theme-card { border: 2px solid var(--border); border-radius: 12px; overflow: hidden; cursor: pointer; background: none; padding: 0; text-align: left; font: inherit; color: var(--text); }
.theme-card[aria-pressed="true"] { border-color: var(--ok); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ok) 30%, transparent); }
.theme-card .pv { height: 96px; display: flex; flex-direction: column; justify-content: flex-end; padding: .7rem; gap: .35rem; }
.theme-card .pv b { font-size: 1.05rem; }
.theme-card .pv .bar { display: flex; gap: .3rem; }
.theme-card .pv .bar i { width: 26px; height: 10px; border-radius: 3px; }
.theme-card .nm { padding: .55rem .7rem; font-weight: 700; background: var(--surface); }
.hours-edit .day { display: grid; grid-template-columns: 110px 1fr; gap: .8rem; padding: .7rem 0; border-bottom: 1px solid var(--border); align-items: start; }
.hours-edit .range { display: flex; gap: .4rem; align-items: center; margin-bottom: .4rem; }
.hours-edit .range input { width: 7.5rem; }
.thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .8rem; }
.thumbs figure { margin: 0; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.thumbs img { aspect-ratio: 1; object-fit: cover; width: 100%; }
.thumbs figcaption { padding: .4rem; display: flex; gap: .3rem; }
.thumbs figcaption input { padding: .3rem .4rem; font-size: .8rem; }
.photo-pick { display: flex; gap: .8rem; align-items: center; }
.photo-pick img { width: 90px; height: 70px; object-fit: cover; border-radius: var(--radius); border: 1px solid var(--border); }
.chat-admin { display: grid; grid-template-columns: 300px 1fr; gap: 1rem; }
@media (max-width: 900px) { .chat-admin { grid-template-columns: 1fr; } }
.conv-list { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); max-height: 70vh; overflow-y: auto; }
.conv-list button { display: block; width: 100%; text-align: left; background: none; border: 0; border-bottom: 1px solid var(--border); padding: .7rem .9rem; cursor: pointer; font: inherit; color: var(--text); }
.conv-list button[aria-current="true"] { background: var(--surface-2); box-shadow: inset 3px 0 0 var(--primary); }
.conv-list .last { color: var(--muted); font-size: .82rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.spark { width: 100%; height: 70px; display: block; }
.spark path.l { fill: none; stroke: var(--primary); stroke-width: 2; }
.spark path.a { fill: color-mix(in srgb, var(--primary) 16%, transparent); stroke: none; }
.kv { display: grid; grid-template-columns: auto 1fr; gap: .3rem 1rem; font-size: .92rem; }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; font-weight: 600; }
.login-screen { min-height: 100vh; display: grid; place-items: center; padding: 1rem; }
.login-screen .card { width: min(420px, 100%); }
code, .mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .88em; }

/* =========================================================
   Temas por profesión
   ========================================================= */
[data-theme="mecanico"] {
  --bg: #1c1f24; --bg-band: #111316; --on-band: #f4f5f6; --surface: #262a31; --surface-2: #2f343c;
  --text: #eef0f2; --muted: #a3aab4; --primary: #ffb400; --on-primary: #16181b; --accent: #e5532d;
  --border: #3b414b; --border-w: 2px; --radius: 3px; --radius-lg: 4px; --shadow: 0 4px 0 #0c0d0f;
  --font-body: "Segoe UI", Roboto, Arial, sans-serif;
  --font-head: Impact, Haettenschweiler, "Arial Narrow Bold", "Arial Narrow", sans-serif; --head-weight: 400; --head-transform: uppercase; --head-spacing: .03em;
  --ok: #5fd068; --warn: #ffb400; --danger: #ff5b3a; --focus: #ffb400;
  --free-bg: #26402c; --busy-bg: repeating-linear-gradient(45deg, #2f343c 0 6px, #262a31 6px 12px);
  --bg-pattern: linear-gradient(135deg, rgba(255,255,255,.02) 25%, transparent 25%) 0 0 / 8px 8px;
}
[data-theme="mecanico"] .hero { border-bottom: 10px solid; border-image: repeating-linear-gradient(-45deg, #ffb400 0 18px, #16181b 18px 36px) 10; }

[data-theme="abogado"] {
  --bg: #f6f1e7; --bg-band: #3e1119; --on-band: #f6efe2; --surface: #fffdf8; --surface-2: #f2ebdd;
  --text: #231a17; --muted: #6d5f55; --primary: #6b1d2a; --on-primary: #fff8ee; --accent: #b08d3c;
  --border: #ddd1bd; --radius: 2px; --radius-lg: 3px; --shadow: 0 1px 3px rgba(35,26,23,.12);
  --font-body: Georgia, "Times New Roman", serif;
  --font-head: Garamond, "EB Garamond", "Adobe Garamond Pro", Georgia, serif; --head-weight: 600; --head-spacing: .01em;
  --ok: #3d6b3a; --warn: #a2701a; --danger: #9a1f2b; --focus: #b08d3c;
  --free-bg: #edf0e2; --busy-bg: repeating-linear-gradient(45deg, #efe7d8 0 6px, #e6dcc9 6px 12px);
}
[data-theme="abogado"] .hero h1 { border-bottom: 1px solid var(--accent); padding-bottom: .3em; display: inline-block; }
[data-theme="abogado"] body, [data-theme="abogado"] .pre { line-height: 1.65; }

[data-theme="juridico"] {
  --bg: #eef1f6; --bg-band: #14264a; --on-band: #eef2fa; --surface: #ffffff; --surface-2: #f3f5f9;
  --text: #131a26; --muted: #56627a; --primary: #14264a; --on-primary: #ffffff; --accent: #8a96a8;
  --border: #d3d9e4; --radius: 4px; --radius-lg: 6px; --shadow: 0 1px 2px rgba(19,26,38,.08), 0 8px 20px rgba(19,26,38,.05);
  --font-head: "Book Antiqua", Palatino, "Palatino Linotype", Georgia, serif; --head-weight: 700;
  --ok: #2e7d4f; --warn: #b7791f; --danger: #b42318; --focus: #4f6fb0;
  --free-bg: #e7eef8; --busy-bg: repeating-linear-gradient(45deg, #edf0f5 0 6px, #e1e6ee 6px 12px);
}
[data-theme="juridico"] .hero { background-image: linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px); background-size: 64px 100%; }

[data-theme="masajista"] {
  --bg: #f5efe8; --bg-band: #e9dccf; --on-band: #3a2c25; --surface: #fffaf5; --surface-2: #f3eadf;
  --text: #3a2c25; --muted: #7c6a5f; --primary: #8a5a44; --on-primary: #fffaf4; --accent: #9aa88a;
  --border: #e3d6c8; --radius: 22px; --radius-lg: 30px; --shadow: 0 6px 24px rgba(138,90,68,.10);
  --font-body: "Segoe UI", "Helvetica Neue", sans-serif;
  --font-head: "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif; --head-weight: 400; --head-spacing: .02em;
  --ok: #6f8a5f; --warn: #b8864a; --danger: #a24c3c; --focus: #9aa88a;
  --free-bg: #eef0e4; --busy-bg: repeating-linear-gradient(45deg, #efe6db 0 6px, #e8ddcf 6px 12px);
}
[data-theme="masajista"] .hero-img { border-radius: 999px 999px 30px 30px; }

[data-theme="fisio"] {
  --bg: #eef7f6; --bg-band: #00796b; --on-band: #ffffff; --surface: #ffffff; --surface-2: #e8f4f2;
  --text: #0f2e2b; --muted: #4d6b67; --primary: #00796b; --on-primary: #ffffff; --accent: #ff7043;
  --border: #cfe5e1; --radius: 12px; --radius-lg: 16px; --shadow: 0 3px 12px rgba(0,121,107,.10);
  --font-head: "Segoe UI", system-ui, sans-serif; --head-weight: 700; --head-spacing: -.01em;
  --ok: #00897b; --warn: #f57c00; --danger: #d84315; --focus: #ff7043;
  --free-bg: #dff3ef; --busy-bg: repeating-linear-gradient(45deg, #eef4f3 0 6px, #e2ecea 6px 12px);
}
[data-theme="fisio"] .hero { background-image: radial-gradient(circle at 85% 20%, rgba(255,255,255,.14) 0 120px, transparent 121px); }

[data-theme="consultor"] {
  --bg: #f3f5f8; --bg-band: #141b2d; --on-band: #eef1f8; --surface: #ffffff; --surface-2: #f0f3f8;
  --text: #141b2d; --muted: #5a6479; --primary: #2447d6; --on-primary: #ffffff; --accent: #12b886;
  --border: #dde2ec; --radius: 8px; --radius-lg: 12px; --shadow: 0 1px 2px rgba(20,27,45,.06), 0 10px 24px rgba(20,27,45,.06);
  --font-head: "Segoe UI", "Helvetica Neue", Arial, sans-serif; --head-weight: 700; --head-spacing: -.02em;
  --ok: #12b886; --warn: #f59f00; --danger: #e03131; --focus: #2447d6;
  --free-bg: #e6f7f1; --busy-bg: repeating-linear-gradient(45deg, #f0f2f6 0 6px, #e6e9ef 6px 12px);
}

[data-theme="gestoria"] {
  --bg: #f1f4f0; --bg-band: #1f4d3a; --on-band: #f1f5ef; --surface: #ffffff; --surface-2: #eef2ec;
  --text: #17241d; --muted: #58695f; --primary: #1f4d3a; --on-primary: #ffffff; --accent: #c29b40;
  --border: #d4ddd4; --radius: 4px; --radius-lg: 6px; --shadow: 0 1px 3px rgba(23,36,29,.08);
  --font-head: Georgia, "Times New Roman", serif; --head-weight: 700;
  --ok: #2f7d4e; --warn: #b7791f; --danger: #a8322a; --focus: #c29b40;
  --free-bg: #e3efe5; --busy-bg: repeating-linear-gradient(45deg, #eef1ec 0 6px, #e3e8e0 6px 12px);
  --bg-pattern: linear-gradient(rgba(31,77,58,.05) 1px, transparent 1px) 0 0 / 100% 28px;
}

[data-theme="peluqueria"] {
  --bg: #141414; --bg-band: #0a0a0a; --on-band: #f2ece4; --surface: #1e1e1e; --surface-2: #262626;
  --text: #f2ece4; --muted: #a79e92; --primary: #c8874a; --on-primary: #140c05; --accent: #e6d3b3;
  --border: #353535; --radius: 6px; --radius-lg: 8px; --shadow: 0 8px 24px rgba(0,0,0,.4);
  --font-head: Rockwell, "Rockwell Nova", "Arial Narrow", Georgia, serif; --head-weight: 700; --head-transform: uppercase; --head-spacing: .06em;
  --ok: #7fbf7f; --warn: #e0a24a; --danger: #e0584a; --focus: #c8874a;
  --free-bg: #22301f; --busy-bg: repeating-linear-gradient(45deg, #262626 0 6px, #1e1e1e 6px 12px);
}
[data-theme="peluqueria"] .hero { border-top: 8px solid; border-image: repeating-linear-gradient(-45deg, #b3261e 0 12px, #f2ece4 12px 24px, #1f4ea3 24px 36px, #f2ece4 36px 48px) 8; }

[data-theme="estetica"] {
  --bg: #fbf2f2; --bg-band: #f3dfe0; --on-band: #3b2328; --surface: #ffffff; --surface-2: #fbeeee;
  --text: #3b2328; --muted: #86656b; --primary: #b85c73; --on-primary: #ffffff; --accent: #d8a48f;
  --border: #efd9da; --radius: 16px; --radius-lg: 24px; --shadow: 0 8px 26px rgba(184,92,115,.10);
  --font-head: Didot, "Bodoni MT", "Bodoni 72", Georgia, serif; --head-weight: 400; --head-spacing: .03em;
  --ok: #5f9e7a; --warn: #c98a3c; --danger: #c0425a; --focus: #b85c73;
  --free-bg: #f2f6ef; --busy-bg: repeating-linear-gradient(45deg, #f7eaea 0 6px, #f0dfe0 6px 12px);
}

[data-theme="dentista"] {
  --bg: #f5fbfd; --bg-band: #e3f4f9; --on-band: #0c2a36; --surface: #ffffff; --surface-2: #eef8fb;
  --text: #0c2a36; --muted: #50707c; --primary: #0a8fb5; --on-primary: #ffffff; --accent: #34c3a1;
  --border: #d6ebf2; --radius: 14px; --radius-lg: 20px; --shadow: 0 4px 16px rgba(10,143,181,.08);
  --font-head: "Segoe UI", system-ui, sans-serif; --head-weight: 600;
  --ok: #1fa37f; --warn: #d68a1a; --danger: #d64545; --focus: #34c3a1;
  --free-bg: #e2f6f1; --busy-bg: repeating-linear-gradient(45deg, #eef4f6 0 6px, #e4edf0 6px 12px);
}

[data-theme="veterinario"] {
  --bg: #fff8ef; --bg-band: #e07a1f; --on-band: #ffffff; --surface: #ffffff; --surface-2: #fff1e0;
  --text: #2f2418; --muted: #7a6653; --primary: #e07a1f; --on-primary: #ffffff; --accent: #3c8d5a;
  --border: #f1dcc3; --radius: 16px; --radius-lg: 22px; --shadow: 0 4px 0 #f1dcc3;
  --font-body: "Trebuchet MS", "Nunito", system-ui, sans-serif;
  --font-head: "Trebuchet MS", "Nunito", system-ui, sans-serif; --head-weight: 800;
  --ok: #3c8d5a; --warn: #d9861c; --danger: #d0453a; --focus: #3c8d5a;
  --free-bg: #e6f3e8; --busy-bg: repeating-linear-gradient(45deg, #fbeee0 0 6px, #f5e3cf 6px 12px);
  --bg-pattern: radial-gradient(circle, rgba(224,122,31,.07) 3px, transparent 3.5px) 0 0 / 34px 34px;
}

[data-theme="psicologo"] {
  --bg: #f4f2f8; --bg-band: #e7e2f1; --on-band: #26223a; --surface: #ffffff; --surface-2: #f1eef7;
  --text: #26223a; --muted: #6c6682; --primary: #6a5a9a; --on-primary: #ffffff; --accent: #8fb3a3;
  --border: #e2ddec; --radius: 18px; --radius-lg: 26px; --shadow: 0 6px 22px rgba(106,90,154,.08);
  --font-head: "Palatino Linotype", Palatino, Georgia, serif; --head-weight: 400; --head-spacing: .01em;
  --ok: #5c9a82; --warn: #b88a44; --danger: #b2556b; --focus: #8fb3a3;
  --free-bg: #e9f2ee; --busy-bg: repeating-linear-gradient(45deg, #f1eef6 0 6px, #e8e4f0 6px 12px);
}

[data-theme="nutricionista"] {
  --bg: #f4f9ef; --bg-band: #4c9a2a; --on-band: #ffffff; --surface: #ffffff; --surface-2: #eef6e7;
  --text: #1f2a19; --muted: #5d6c55; --primary: #4c9a2a; --on-primary: #ffffff; --accent: #f28c28;
  --border: #dbe8d1; --radius: 14px; --radius-lg: 20px; --shadow: 0 3px 12px rgba(76,154,42,.10);
  --font-head: "Segoe UI", system-ui, sans-serif; --head-weight: 800; --head-spacing: -.01em;
  --ok: #4c9a2a; --warn: #f28c28; --danger: #d64533; --focus: #f28c28;
  --free-bg: #e4f3da; --busy-bg: repeating-linear-gradient(45deg, #f0f4ec 0 6px, #e6ede0 6px 12px);
}

[data-theme="entrenador"] {
  --bg: #0d0d0d; --bg-band: #000000; --on-band: #f2f2f2; --surface: #171717; --surface-2: #1f1f1f;
  --text: #f2f2f2; --muted: #9a9a9a; --primary: #c6ff00; --on-primary: #0d0d0d; --accent: #ff3d00;
  --border: #2c2c2c; --border-w: 2px; --radius: 4px; --radius-lg: 6px; --shadow: none;
  --font-body: "Segoe UI", Arial, sans-serif;
  --font-head: Impact, "Arial Black", "Arial Narrow Bold", sans-serif; --head-weight: 400; --head-transform: uppercase; --head-spacing: .02em;
  --ok: #c6ff00; --warn: #ffb300; --danger: #ff3d00; --focus: #c6ff00;
  --free-bg: #1e2a07; --busy-bg: repeating-linear-gradient(45deg, #1f1f1f 0 6px, #171717 6px 12px);
}
[data-theme="entrenador"] .hero h1 { font-size: clamp(2.4rem, 8vw, 5rem); line-height: .95; }

[data-theme="fotografo"] {
  --bg: #1a1a1a; --bg-band: #111111; --on-band: #f5f5f5; --surface: #222222; --surface-2: #2a2a2a;
  --text: #eaeaea; --muted: #9b9b9b; --primary: #f5f5f5; --on-primary: #111111; --accent: #e0a526;
  --border: #333333; --radius: 0; --radius-lg: 0; --shadow: none;
  --font-body: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-head: "Helvetica Neue", Helvetica, Arial, sans-serif; --head-weight: 300; --head-spacing: .04em;
  --ok: #7ccf8a; --warn: #e0a526; --danger: #e05a4a; --focus: #e0a526;
  --free-bg: #26311f; --busy-bg: repeating-linear-gradient(45deg, #2a2a2a 0 6px, #222222 6px 12px);
}
[data-theme="fotografo"] .gallery { gap: 2px; }
[data-theme="fotografo"] .gallery button { border-radius: 0; }

[data-theme="tatuador"] {
  --bg: #0b0b0b; --bg-band: #000000; --on-band: #ececec; --surface: #151515; --surface-2: #1c1c1c;
  --text: #ececec; --muted: #9a9a9a; --primary: #d7263d; --on-primary: #ffffff; --accent: #9a9a9a;
  --border: #2a2a2a; --border-w: 1px; --radius: 2px; --radius-lg: 2px; --shadow: 0 0 0 1px #2a2a2a;
  --font-head: "Old English Text MT", "UnifrakturMaguntia", Rockwell, Georgia, serif; --head-weight: 400;
  --ok: #7fbf7f; --warn: #d9a441; --danger: #ff4d5e; --focus: #d7263d;
  --free-bg: #1f2a1f; --busy-bg: repeating-linear-gradient(45deg, #1c1c1c 0 6px, #151515 6px 12px);
}

[data-theme="academia"] {
  --bg: #f5f8ff; --bg-band: #1d4ed8; --on-band: #ffffff; --surface: #ffffff; --surface-2: #eef3ff;
  --text: #111c3a; --muted: #56617f; --primary: #1d4ed8; --on-primary: #ffffff; --accent: #facc15;
  --border: #d8e1f7; --radius: 10px; --radius-lg: 14px; --shadow: 0 3px 0 #d8e1f7;
  --font-head: "Segoe UI", system-ui, sans-serif; --head-weight: 800;
  --ok: #16a34a; --warn: #ca8a04; --danger: #dc2626; --focus: #facc15;
  --free-bg: #e4f5ea; --busy-bg: repeating-linear-gradient(45deg, #eef2fb 0 6px, #e3e9f7 6px 12px);
  --bg-pattern: linear-gradient(90deg, rgba(29,78,216,.04) 1px, transparent 1px) 0 0 / 24px 24px, linear-gradient(rgba(29,78,216,.04) 1px, transparent 1px) 0 0 / 24px 24px;
}
[data-theme="academia"] .btn-accent { color: #111c3a; }

[data-theme="inmobiliaria"] {
  --bg: #f4f6f9; --bg-band: #0f3057; --on-band: #ffffff; --surface: #ffffff; --surface-2: #eef2f7;
  --text: #132033; --muted: #56647a; --primary: #0f3057; --on-primary: #ffffff; --accent: #e8773a;
  --border: #d9e0ea; --radius: 8px; --radius-lg: 12px; --shadow: 0 2px 10px rgba(15,48,87,.08);
  --font-head: "Segoe UI", "Helvetica Neue", sans-serif; --head-weight: 700;
  --ok: #2e8b57; --warn: #e8773a; --danger: #c62828; --focus: #e8773a;
  --free-bg: #e5f2ea; --busy-bg: repeating-linear-gradient(45deg, #eef1f5 0 6px, #e4e8ee 6px 12px);
}
[data-theme="inmobiliaria"] .service .ph { aspect-ratio: 4/3; }

/* Grupos de temas en el panel */
.theme-group-title { margin: 1.5rem 0 .7rem; font-size: 1rem; }
.theme-card .pv .ico { font-size: 1.4rem; line-height: 1; }

/* Botón principal de la portada cuando el color principal coincide con el fondo de la portada */
.hero .btn-primary { background: var(--hero-btn-bg, var(--primary)); color: var(--hero-btn-fg, var(--on-primary)); border-color: var(--hero-btn-bg, var(--primary)); }
[data-theme="serio"], [data-theme="gestoria"], [data-theme="abogado"] { --hero-btn-bg: var(--accent); --hero-btn-fg: #1a1408; }
[data-theme="fisio"], [data-theme="nutricionista"], [data-theme="inmobiliaria"] { --hero-btn-bg: var(--accent); --hero-btn-fg: #ffffff; }
[data-theme="academia"] { --hero-btn-bg: var(--accent); --hero-btn-fg: #111c3a; }
[data-theme="juridico"], [data-theme="clinico"], [data-theme="veterinario"] { --hero-btn-bg: #ffffff; --hero-btn-fg: var(--primary); }