:root {
  --bg: #0b0b0c;
  --surface: #151317;
  --surface-2: #1c191f;
  --line: #2a2430;
  --line-strong: #3a3140;
  --ink: #eaf5f4;
  --ink-2: #d8cfd3;
  --muted: #b3a8ae;
  --gold: #5fb0a8;
  --gold-ink: #85dcdc;
  --pink: #99e2e2;
  --pink-ink: #a6e5e5;
  --danger-bg: #102a2a;
  --danger-ink: #d0f2f2;
  --ok-ink: #8fd6a9;
  --radius: 16px;
  --font: 'DM Sans', system-ui, sans-serif;
  --display: 'Fraunces', Georgia, serif;
  /* Botones de lujo: bisel negro brillante + filo dorado */
  --bezel: linear-gradient(180deg, #5c5c63 0%, #2c2c31 48%, #0c0c0e 52%, #1d1d21 100%);
  --rim: #5fb0a8;
  --gloss: radial-gradient(135% 100% at 50% -38%, rgba(228, 247, 247, .40) 0 55%, rgba(255, 255, 255, 0) 56%);
  --sparkle: radial-gradient(circle, #fff 0 1.5px, rgba(185, 235, 235, .95) 2.5px, rgba(143, 222, 222, 0) 9px),
    linear-gradient(90deg, transparent 0 47%, rgba(208, 242, 242, .95) 50%, transparent 53%),
    linear-gradient(0deg, transparent 0 47%, rgba(208, 242, 242, .95) 50%, transparent 53%);
}

* { box-sizing: border-box; }
html { background: var(--bg); }
body { margin: 0; color: var(--ink); font-family: var(--font); font-size: 16px; -webkit-text-size-adjust: 100%;
  background: radial-gradient(120% 70% at 50% 0%, #26262b 0%, #131315 55%, #0b0b0c 100%) fixed; min-height: 100dvh; }
img { max-width: 100%; display: block; }
a { color: var(--gold-ink); }
a:hover { color: #d3ece9; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3 { margin: 0; }
.hidden { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Estructura de pantalla tipo app */
.app { max-width: 480px; margin: 0 auto; min-height: 100dvh; display: flex; flex-direction: column; }
.page { flex: 1; padding: 20px 20px 28px; display: flex; flex-direction: column; gap: 18px; }
.topbar { display: flex; align-items: center; gap: 12px; }
.topbar h1 { font-family: var(--display); font-weight: 600; font-size: 22px; color: #d3ece9; }
.eyebrow { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--pink-ink); }
.label { font-size: 13px; font-weight: 700; color: var(--pink-ink); }
.muted { color: var(--muted); font-size: 13px; }
.small { font-size: 12px; }
.row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.stack { display: flex; flex-direction: column; gap: 10px; }

/* Encabezado con foto y firma */
.brand { display: flex; align-items: center; gap: 14px; }
.avatar { position: relative; width: 76px; height: 76px; flex-shrink: 0; border-radius: 50%; padding: 0; border: 5px solid transparent;
  background: var(--bezel) border-box; box-shadow: 0 0 0 1.5px var(--rim), 0 10px 22px rgba(0, 0, 0, .7); }
.avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 1px rgba(100, 210, 210, .6); }
.avatar::after { content: ''; position: absolute; top: -9px; right: -7px; width: 26px; height: 26px; background: var(--sparkle); pointer-events: none; }
.brand .logo { width: 100%; max-width: 200px; height: auto; margin: 0 auto; }
.creds { margin: 0; font-size: 11px; line-height: 1.35; letter-spacing: .02em; color: #6ac9c9; text-align: center; }

/* Botones de lujo */
.btn { position: relative; display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 56px; padding: 0 20px;
  border-radius: 999px; font-weight: 700; font-size: 16px; text-decoration: none; border: 5px solid transparent; cursor: pointer;
  transition: transform .08s, box-shadow .08s, filter .08s; -webkit-tap-highlight-color: transparent; }
.btn.spread { justify-content: space-between; padding: 0 22px; }
.btn.sm { min-height: 46px; font-size: 14px; padding: 0 14px; border-width: 4px; }
.btn.round { width: 46px; min-height: 46px; height: 46px; padding: 0; border-width: 4px; border-radius: 50%; }
.btn:disabled { cursor: not-allowed; opacity: .5; }
.btn:active:not(:disabled) { transform: translateY(2px) scale(.985); filter: brightness(1.08); }
.btn:focus-visible { outline: 2px solid #d3ece9; outline-offset: 4px; }

.b3g, .b3p, .b3d, .b3ig, .b3wa { box-shadow: 0 0 0 1.5px var(--rim), 0 0 0 3px rgba(0, 0, 0, .55), 0 10px 22px rgba(0, 0, 0, .7); text-shadow: 0 1px 2px rgba(0, 0, 0, .55); }
.b3g:active, .b3p:active, .b3d:active, .b3ig:active, .b3wa:active { box-shadow: 0 0 0 1.5px var(--rim), 0 0 0 3px rgba(0, 0, 0, .55), 0 4px 10px rgba(0, 0, 0, .7); }

/* Dorado / bronce: acción principal */
.b3g { color: #eef8f7; background: var(--gloss) padding-box, linear-gradient(180deg, #3f9590 0%, #338f8f 55%, #1d6363 100%) padding-box, var(--bezel) border-box; }
.b3g:hover { color: #fff; }
/* Oro rosa: acción secundaria destacada */
.b3p { color: #f3fcfc; background: var(--gloss) padding-box, linear-gradient(180deg, #8fc9c9 0%, #579a9a 55%, #376d6d 100%) padding-box, var(--bezel) border-box; }
.b3p:hover { color: #fff; }
/* Negro brillante: botones secundarios */
.b3d { color: #baebeb; background: radial-gradient(135% 100% at 50% -38%, rgba(255, 255, 255, .13) 0 55%, rgba(255, 255, 255, 0) 56%) padding-box,
  linear-gradient(180deg, #2c2c31 0%, #161619 60%, #0d0d0f 100%) padding-box, var(--bezel) border-box;
  box-shadow: 0 0 0 1px #408c8c, 0 0 0 2.5px rgba(0, 0, 0, .55), 0 8px 16px rgba(0, 0, 0, .6); }
.b3d:hover { color: #d3ece9; }
.b3ig { color: #fff; background: var(--gloss) padding-box, linear-gradient(135deg, #55cece 0%, #3cc7c7 45%, #30a4a4 75%, #6a3fc0 100%) padding-box, var(--bezel) border-box;
  min-height: 46px; font-size: 14px; padding: 0 16px 0 12px; border-width: 4px; }
.b3ig:hover { color: #fff; }
.b3wa { width: 46px; height: 46px; min-height: 46px; padding: 0; border-width: 4px; border-radius: 50%;
  background: var(--gloss) padding-box, linear-gradient(180deg, #4fd884 0%, #25b85a 55%, #158a41 100%) padding-box, var(--bezel) border-box; }
.b3x { color: #6f8b8e; background: #141215; border: 1px solid #221e25; box-shadow: none; cursor: not-allowed; text-decoration: line-through; text-shadow: none; }

/* Destello dorado en los botones principales */
.btn.b3g::after, .btn.b3p::after { content: ''; position: absolute; top: -13px; right: 14%; width: 26px; height: 26px; background: var(--sparkle); pointer-events: none; }
.btn.sm.b3g::after, .btn.round.b3g::after, .chip.b3g::after, .slot.b3g::after, .day.b3g::after { display: none; }
.btn-col { display: flex; flex-direction: column; gap: 18px; padding: 6px 0; }

/* Tarjetas */
.card { padding: 14px 16px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); }
.card.gold { border-color: #2e5f62; background: #0e1919; }
.card h2 { font-size: 17px; color: #d3ece9; }
.alert { padding: 10px 12px; border-radius: 12px; background: var(--danger-bg); color: var(--danger-ink); font-size: 13px; line-height: 1.45; border: 1px solid #2a6e6e; }
.notice { padding: 12px 14px; border-radius: 12px; background: #0e1919; border: 1px solid #2e5f62; font-size: 14px; line-height: 1.5; }

/* Publicidad de la semana */
.promo { display: block; border-radius: 20px; overflow: hidden; border: 4px solid transparent; background: var(--bezel) border-box;
  box-shadow: 0 0 0 1.5px var(--rim), 0 14px 30px rgba(0, 0, 0, .7); }
.promo img { width: 100%; height: auto; border-radius: 15px; }

/* Formularios */
.field { display: flex; flex-direction: column; gap: 5px; font-size: 13px; font-weight: 500; color: var(--ink-2); }
.input { width: 100%; min-height: 46px; padding: 0 12px; border-radius: 12px; border: 1px solid var(--line-strong); background: #141216; color: var(--ink); font-size: 16px; }
.input::placeholder { color: #6f8b8e; }
select.input option { background: #141216; }
textarea.input { padding: 10px 12px; min-height: 90px; resize: vertical; }
.input:focus { outline: 2px solid var(--gold); outline-offset: 1px; }
input[type=time].input, input[type=date].input { color-scheme: dark; }
.grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 10px; }
.chips { display: flex; flex-wrap: wrap; gap: 14px 10px; }
.chip { min-height: 46px; padding: 0 16px; font-weight: 700; font-size: 14px; border-width: 4px; }
.file-btn { position: relative; }
.file-btn input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }

/* Días */
.days { display: flex; gap: 10px; overflow-x: auto; padding: 6px 4px 14px; scroll-snap-type: x mandatory; }
.day { flex: 0 0 68px; flex-direction: column; gap: 0; min-height: 0; padding: 8px 0; border-radius: 22px; border-width: 4px; text-align: center; scroll-snap-align: start; cursor: pointer; }
.day span { display: block; }
.day .n { font-size: 18px; font-weight: 700; }
.day .f { font-size: 11px; }
.slot { min-height: 48px; padding: 0 6px; font-size: 14px; font-weight: 700; border-width: 4px; white-space: nowrap; }

/* Barras inferiores */
.footbar { position: sticky; bottom: 0; padding: 16px 20px calc(18px + env(safe-area-inset-bottom)); background: rgba(12, 12, 14, .94); border-top: 1px solid var(--line); backdrop-filter: blur(6px); }
.nav { position: sticky; bottom: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--line); background: rgba(12, 12, 14, .96); font-size: 12px; text-align: center; padding-bottom: env(safe-area-inset-bottom); backdrop-filter: blur(6px); }
.nav a { padding: 14px 0 16px; text-decoration: none; color: var(--muted); }
.nav a.on { color: #d3ece9; font-weight: 700; }

/* Chat */
.chat { flex: 1; display: flex; flex-direction: column; gap: 10px; overflow-y: auto; padding: 16px 20px; }
.bubble { max-width: 82%; padding: 10px 14px; font-size: 15px; line-height: 1.45; white-space: pre-wrap; word-wrap: break-word; }
.bubble.them { align-self: flex-start; background: var(--surface-2); border: 1px solid var(--line); border-radius: 16px 16px 16px 4px; }
.bubble.me { align-self: flex-end; background: linear-gradient(180deg, #3f9590, #277d7d); color: #eef8f7; border-radius: 16px 16px 4px 16px; }
.bubble img { margin-top: 6px; border-radius: 10px; max-height: 260px; }
.bubble .t { display: block; font-size: 11px; opacity: .75; margin-top: 4px; }
.composer { display: flex; gap: 10px; align-items: center; padding: 12px 16px calc(14px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: #0e0d10; position: sticky; bottom: 0; }
.composer .input { border-radius: 22px; }

/* Estados */
.badge { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; }
.st-pending { background: #123a3a; color: #d3ece9; }
.st-approved, .st-open { background: #12321f; color: var(--ok-ink); }
.st-rejected, .st-cancelled { background: #143a3a; color: #bfeded; }
.st-done, .st-closed { background: #24212a; color: var(--muted); }

.toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); max-width: 90vw; padding: 12px 18px; border-radius: 12px; background: #eaf5f4; color: #111; font-size: 14px; z-index: 50; box-shadow: 0 10px 24px rgba(0, 0, 0, .5); }
.spinner { width: 22px; height: 22px; border-radius: 50%; border: 3px solid var(--line); border-top-color: var(--gold); animation: spin .8s linear infinite; margin: 20px auto; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .btn, .spinner { transition: none; animation-duration: 2s; } }

/* Ventana de acceso de la Dra. */
.sheet { width: min(420px, calc(100vw - 32px)); border: 1px solid #2e5f62; border-radius: 20px; padding: 20px; background: var(--surface); color: var(--ink); box-shadow: 0 20px 50px rgba(0, 0, 0, .7); }
.sheet::backdrop { background: rgba(0, 0, 0, .65); }
.avatar-btn { cursor: pointer; -webkit-tap-highlight-color: transparent; transition: transform .08s; }
.avatar-btn:active { transform: translateY(2px) scale(.97); }

/* Botón compartir (arriba a la derecha) */

/* Botones redondos pequeños: Instagram, WhatsApp, Compartir */
.btn.mini { width: 42px; height: 42px; min-height: 42px; padding: 0; border-radius: 50%; border-width: 3px; }
.btn.mini::after { display: none; }
.btn.mini svg { width: 19px; height: 19px; }

/* =========================================================
   TEMA CREMA (marfil + dorado) — basado en el logo de la Dra.
   ========================================================= */
:root {
  --bg: #d6ebe9;
  --surface: #eef7f6;
  --surface-2: #f5fbfa;
  --line: #bddddd;
  --line-strong: #a3cdcd;
  --ink: #1d3b3b;
  --ink-2: #365a5a;
  --muted: #638a8a;
  --gold: #2f8a86;
  --gold-ink: #1d5f63;
  --pink-ink: #1f6f73;
  --danger-bg: #e3f3f2;
  --danger-ink: #0f4d52;
  --ok-ink: #2f7a4a;
  --bezel: linear-gradient(180deg, #effafa 0%, #b1e8e8 45%, #5cc7c7 55%, #a0e3e3 100%);
  --rim: #2f8a86;
}
html { background: var(--bg); }
body { color: var(--ink); background: #d6ebe9; }
a { color: var(--gold-ink); }
a:hover { color: #1e6767; }
.topbar h1, .card h2, .hero h1 { color: #1d5f63 !important; }
.eyebrow, .label { color: #1f6f73; }
.muted { color: var(--muted); }
.avatar { box-shadow: 0 0 0 1.5px var(--rim), 0 8px 18px rgba(25, 85, 85, .25); }

/* Botones */
.b3g, .b3p, .b3d, .b3ig, .b3wa { box-shadow: 0 0 0 1.5px var(--rim), 0 0 0 3px rgba(255, 255, 255, .55), 0 10px 20px rgba(25, 85, 85, .28); }
.b3g:active, .b3p:active, .b3d:active, .b3ig:active, .b3wa:active { box-shadow: 0 0 0 1.5px var(--rim), 0 0 0 3px rgba(255, 255, 255, .55), 0 4px 8px rgba(25, 85, 85, .25); }
.b3g { background: var(--gloss) padding-box, linear-gradient(180deg, #7fc4bd 0%, #3fbbbb 55%, #288a8a 100%) padding-box, var(--bezel) border-box; color: #f5fbfa; }
.b3p { background: var(--gloss) padding-box, linear-gradient(180deg, #abe6e6 0%, #6bc9c9 55%, #469c9c 100%) padding-box, var(--bezel) border-box; color: #fff; }
.b3d { color: #1e6767; text-shadow: none; background: linear-gradient(180deg, #fafdfd 0%, #e0f4f4 100%) padding-box, var(--bezel) border-box;
  box-shadow: 0 0 0 1px #6fb5ad, 0 0 0 2.5px rgba(255, 255, 255, .6), 0 6px 12px rgba(25, 85, 85, .18); }
.b3d:hover { color: #185252; }
.b3x { background: #dbefef; color: #8fa9aa; border: 1px solid #c6e2e2; }

/* Tarjetas, avisos y formularios */
.card { background: var(--surface); border-color: var(--line); }
.card.gold, .notice { background: #e6f8f8; border-color: #9fd6d0; }
.alert { background: #e3f3f2; color: #0f4d52; border-color: #c3eeee; }
.promo { box-shadow: 0 0 0 1.5px var(--rim), 0 14px 28px rgba(25, 85, 85, .3); }
.input { background: #f8fcfc; color: var(--ink); border-color: var(--line-strong); }
.input::placeholder { color: #8fa9aa; }
select.input option { background: #f8fcfc; }
input[type=time].input, input[type=date].input { color-scheme: light; }

/* Barras */
.footbar { background: rgba(232, 247, 247, .95); border-top-color: var(--line); }
.nav { background: rgba(232, 247, 247, .97); border-top-color: var(--line); }
.nav a { color: var(--muted); }
.nav a.on { color: #1d5f63; }

/* Chat */
.bubble.them { background: #f8fcfc; border-color: var(--line); color: var(--ink); }
.bubble.me { background: linear-gradient(180deg, #7fc4bd, #3ab8b8); color: #f5fbfa; }
.composer { background: #eef7f6; border-top-color: var(--line); }

/* Estados */
.st-pending { background: #caefef; color: #206e6e; }
.st-approved, .st-open { background: #dcefe2; color: #2f7a4a; }
.st-rejected, .st-cancelled { background: #ddf5f5; color: #0f4d52; }
.st-done, .st-closed { background: #d8ebeb; color: #638a8a; }
.toast { background: #1d3b3b; color: #fff; }
.sheet { background: #f5fbfa; color: var(--ink); border-color: #9fd6d0; }
.sheet::backdrop { background: rgba(29, 59, 59, .45); }

/* ===== FUENTE APOLLO (toda la app) ===== */
@font-face { font-family: 'Apollo'; src: url('/assets/apollo.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
:root { --display: 'Apollo', 'Fraunces', Georgia, serif; --font: 'Apollo', 'DM Sans', system-ui, sans-serif; }
html, body, input, select, textarea, button, .btn { font-family: var(--font) !important; }
body { font-synthesis: none; letter-spacing: .015em; }
/* Títulos en "black": la fuente no trae negrita, se engruesa con un trazo */
h1, h2, .topbar h1, .hero h1, .step h2, .stat b { font-family: var(--display) !important; font-weight: 700 !important; -webkit-text-stroke: .9px currentColor; letter-spacing: .035em; }
.btn { font-weight: 700; -webkit-text-stroke: .6px currentColor; letter-spacing: .04em; font-size: 1.06em; }
b, strong, .label, [style*="font-weight:700"], .type b, .type .t, .dcard .top, .dcard .n { -webkit-text-stroke: .45px currentColor; letter-spacing: .03em; }
.topbar h1, .hero h1 { font-size: 27px; }
.step h2 { font-size: 20px !important; }
.dcard .n { -webkit-text-stroke: 1.3px currentColor !important; } .sum .t2, .type .pr { -webkit-text-stroke: .6px currentColor; }