/* ============================================================
   Eutimya · sistema de diseño (único archivo de estilos)
   Lenguaje: iOS Human Interface Guidelines aplicado a la marca
   Eutimya (ink navy + dorado). Fuentes del sistema, sin webfonts.
   Estructura de cada pantalla:
     <header class="nav">…</header>
     <main class="screen">…</main>
     <nav class="tabbar">…</nav>
   ============================================================ */

/* ---------- Tokens · identidad de cita.html (tinta + dorado, DM Sans / Playfair) ---------- */
:root{
  color-scheme: light;

  --font:  'DM Sans', 'Helvetica Neue', -apple-system, BlinkMacSystemFont, sans-serif;
  --serif: 'Playfair Display', Georgia, serif;

  /* Marca */
  --gold:        #b8893a;
  --gold-deep:   #96702f;
  --gold-soft:   #F4EDE0;
  --gold-dim:    rgba(184,137,58,.12);
  --gold-border: rgba(184,137,58,.28);

  /* Superficies: vidrio claro sobre lienzo con halo dorado */
  --canvas:      #F5F5F7;
  --surface:     rgba(255,255,255,.78);
  --surface-2:   rgba(13,27,42,.05);
  --surface-on:  rgba(244,237,224,.84);
  --fill:        rgba(13,27,42,.06);
  --fill-strong: rgba(13,27,42,.10);
  --glass-bdr:   rgba(13,27,42,.08);

  /* Texto */
  --ink:         #0d1b2a;
  --ink-2:       #2a4a6b;
  --ink-3:       #5a7a9e;
  --ink-4:       #9fb0c4;
  --on-accent:   #FFFFFF;

  /* Líneas */
  --hairline:        rgba(13,27,42,.07);
  --hairline-strong: rgba(13,27,42,.14);

  /* Semánticos */
  --danger:      #dc2626;
  --danger-soft: rgba(220,38,38,.07);
  --success:     #15803D;
  --success-soft:#DCFCE7;
  --warning:     #92400e;
  --warning-soft:#fffbeb;
  --info:        #2a4a6b;
  --info-soft:   rgba(13,27,42,.05);
  --wa:          #25D366;

  /* Acción primaria (igual que cita) */
  --primary:     rgba(29,29,31,.88);
  --primary-dk:  rgba(0,0,0,.94);
  --on-primary:  #FFFFFF;

  /* Radios */
  --r-card:   18px;
  --r-inner:  14px;
  --r-ctrl:   14px;
  --r-tile:   10px;
  --r-pill:   980px;

  /* Elevación */
  --shadow-1: inset 0 1px 0 rgba(255,255,255,.7), 0 1px 2px rgba(13,27,42,.04), 0 2px 12px rgba(13,27,42,.05);
  --shadow-2: 0 10px 26px rgba(13,27,42,.12), 0 2px 8px rgba(13,27,42,.06);
  --shadow-3: 0 -10px 40px rgba(13,27,42,.15);

  /* Barras */
  --bar-bg:   rgba(245,245,247,.72);
  --bar-blur: saturate(180%) blur(20px);

  /* Movimiento */
  --ease:     cubic-bezier(.25,1,.5,1);
  --ease-out: cubic-bezier(.25,1,.5,1);
  --spring:   cubic-bezier(.34,1.56,.64,1);
  --dur:      200ms;
  --dur-slow: 360ms;

  /* Layout */
  --gutter:     16px;
  --screen-max: 640px;
  --nav-h:      52px;
  --tabbar-h:   52px;
  --sat:        env(safe-area-inset-top, 0px);
  --sab:        env(safe-area-inset-bottom, 0px);
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
  color-scheme: dark;
  --gold:        #D4A756;
  --gold-deep:   #E2BC72;
  --gold-soft:   rgba(212,167,86,.14);
  --gold-dim:    rgba(212,167,86,.16);
  --gold-border: rgba(212,167,86,.32);
  --canvas:      #0b1120;
  --surface:     rgba(30,41,62,.72);
  --surface-2:   rgba(255,255,255,.06);
  --surface-on:  rgba(212,167,86,.18);
  --fill:        rgba(255,255,255,.08);
  --fill-strong: rgba(255,255,255,.14);
  --glass-bdr:   rgba(255,255,255,.08);
  --ink:         #EEF2F7;
  --ink-2:       #C3CEDB;
  --ink-3:       #93A4B9;
  --ink-4:       #5E6E83;
  --hairline:    rgba(255,255,255,.09);
  --hairline-strong: rgba(255,255,255,.18);
  --danger:      #F87171;
  --danger-soft: rgba(248,113,113,.12);
  --success:     #4ADE80;
  --success-soft:rgba(74,222,128,.12);
  --warning:     #FBBF24;
  --warning-soft:rgba(251,191,36,.12);
  --info:        #A9BDD6;
  --info-soft:   rgba(255,255,255,.06);
  --primary:     #EEF2F7;
  --primary-dk:  #FFFFFF;
  --on-primary:  #0b1120;
  --shadow-1:    inset 0 1px 0 rgba(255,255,255,.06), 0 2px 12px rgba(0,0,0,.35);
  --shadow-2:    0 10px 28px rgba(0,0,0,.45);
  --shadow-3:    0 -10px 40px rgba(0,0,0,.55);
  --bar-bg:      rgba(11,17,32,.74);
  }
}
:root[data-theme="dark"]{
  color-scheme: dark;
  --gold:        #D4A756;
  --gold-deep:   #E2BC72;
  --gold-soft:   rgba(212,167,86,.14);
  --gold-dim:    rgba(212,167,86,.16);
  --gold-border: rgba(212,167,86,.32);
  --canvas:      #0b1120;
  --surface:     rgba(30,41,62,.72);
  --surface-2:   rgba(255,255,255,.06);
  --surface-on:  rgba(212,167,86,.18);
  --fill:        rgba(255,255,255,.08);
  --fill-strong: rgba(255,255,255,.14);
  --glass-bdr:   rgba(255,255,255,.08);
  --ink:         #EEF2F7;
  --ink-2:       #C3CEDB;
  --ink-3:       #93A4B9;
  --ink-4:       #5E6E83;
  --hairline:    rgba(255,255,255,.09);
  --hairline-strong: rgba(255,255,255,.18);
  --danger:      #F87171;
  --danger-soft: rgba(248,113,113,.12);
  --success:     #4ADE80;
  --success-soft:rgba(74,222,128,.12);
  --warning:     #FBBF24;
  --warning-soft:rgba(251,191,36,.12);
  --info:        #A9BDD6;
  --info-soft:   rgba(255,255,255,.06);
  --primary:     #EEF2F7;
  --primary-dk:  #FFFFFF;
  --on-primary:  #0b1120;
  --shadow-1:    inset 0 1px 0 rgba(255,255,255,.06), 0 2px 12px rgba(0,0,0,.35);
  --shadow-2:    0 10px 28px rgba(0,0,0,.45);
  --shadow-3:    0 -10px 40px rgba(0,0,0,.55);
  --bar-bg:      rgba(11,17,32,.74);
}

/* ---------- Base ---------- */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0 }
html{
  background: var(--canvas);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--nav-h) + var(--sat) + 12px);
}
body{
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.35;
  color: var(--ink);
  background: var(--canvas);
  min-height: 100dvh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  padding-top: calc(var(--nav-h) + var(--sat));
  padding-bottom: calc(var(--tabbar-h) + var(--sab) + 24px);
}
body.no-tabbar{ padding-bottom: calc(var(--sab) + 32px) }
body.no-nav{ padding-top: var(--sat) }
a{ color: var(--gold-deep); text-decoration:none }
button{ font: inherit; color: inherit; background:none; border:0; cursor:pointer }
img,svg,video{ display:block; max-width:100% }
strong,b{ font-weight:600 }
em{ font-style:italic }
::selection{ background: var(--gold-dim) }
:focus-visible{ outline: 3px solid var(--gold); outline-offset: 2px; border-radius: 6px }
[hidden]{ display:none !important }

/* ---------- Tipografía (escala iOS) ---------- */
.large-title{ font-size:34px; font-weight:700; letter-spacing:-.02em; line-height:1.15 }
.title-1{ font-size:28px; font-weight:700; letter-spacing:-.02em; line-height:1.2 }
.title-2{ font-size:22px; font-weight:700; letter-spacing:-.015em; line-height:1.25 }
.title-3{ font-size:20px; font-weight:600; letter-spacing:-.01em; line-height:1.25 }
.headline{ font-size:17px; font-weight:600; line-height:1.3 }
.body{ font-size:17px; line-height:1.45 }
.callout{ font-size:16px; line-height:1.4 }
.subhead{ font-size:15px; line-height:1.4 }
.footnote{ font-size:13px; line-height:1.4 }
.caption{ font-size:12px; line-height:1.35 }
.muted{ color: var(--ink-3) }
.tinted{ color: var(--gold-deep) }
.center{ text-align:center }
.prose p + p{ margin-top: .85em }
.prose h2{ font-size:22px; font-weight:700; letter-spacing:-.015em; margin: 1.6em 0 .5em }
.prose h3{ font-size:17px; font-weight:600; margin: 1.3em 0 .4em }
.prose ul,.prose ol{ padding-left: 1.25em; margin: .6em 0 }
.prose li + li{ margin-top:.35em }
.prose p,.prose li{ color: var(--ink-2); font-size:17px; line-height:1.5 }
.prose strong{ color: var(--ink) }

/* ---------- Layout ---------- */
.screen{
  width:100%; max-width: var(--screen-max);
  margin: 0 auto;
  padding: 8px var(--gutter) 0;
}
.page-title{ margin: 14px 0 4px }
.page-sub{ color: var(--ink-3); font-size:17px; margin-bottom: 20px }
.stack{ display:flex; flex-direction:column; gap: 12px }
.spacer{ height: 24px }

/* ---------- Icono SVG (sprite icons.svg) ---------- */
.ico{ width:22px; height:22px; flex:0 0 auto; fill:none; stroke:currentColor; stroke-width:1.75;
      stroke-linecap:round; stroke-linejoin:round; vertical-align:middle }
.ico-sm{ width:18px; height:18px }
.ico-lg{ width:28px; height:28px }
.ico-xl{ width:36px; height:36px; stroke-width:1.5 }

/* Tile de icono de fila (iOS Settings) */
.tile{
  width:30px; height:30px; border-radius: var(--r-tile);
  display:flex; align-items:center; justify-content:center;
  color:#fff; background: var(--gold); flex:0 0 auto;
}
.tile .ico{ width:18px; height:18px; stroke-width:2 }
.tile-ink{ background: var(--ink) }
.tile-gold{ background: var(--gold) }
.tile-red{ background: var(--danger) }
.tile-green{ background: var(--success) }
.tile-blue{ background: #2A4A6B }
.tile-indigo{ background: #5856D6 }
.tile-purple{ background: #7A5AB8 }
.tile-teal{ background: #2d7d76 }
.tile-orange{ background: #C2410C }
.tile-gray{ background: #8E8E93 }
.tile-soft{ background: var(--gold-dim); color: var(--gold-deep) }
:root[data-theme="dark"] .tile-ink,
:root:not([data-theme="light"]) .tile-ink{ background: #E8EDF4; color:#0B1220 }
@media (prefers-color-scheme: light){ :root:not([data-theme="dark"]) .tile-ink{ background:#0d1b2a; color:#fff } }
:root[data-theme="light"] .tile-ink{ background:#0d1b2a; color:#fff }
.tile-lg{ width:44px; height:44px; border-radius:11px }
.tile-lg .ico{ width:24px; height:24px; stroke-width:1.9 }

/* ---------- Navigation bar ---------- */
.nav{
  position: fixed; top:0; left:0; right:0; z-index: 100;
  height: calc(var(--nav-h) + var(--sat));
  padding-top: var(--sat);
  display:grid; grid-template-columns: 1fr auto 1fr; align-items:center;
  background: transparent;
  transition: background var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.nav.scrolled{
  background: var(--bar-bg);
  -webkit-backdrop-filter: var(--bar-blur); backdrop-filter: var(--bar-blur);
  box-shadow: 0 .5px 0 var(--hairline);
}
.nav-inner{ grid-column: 1 / -1; width:100%; max-width: var(--screen-max); margin:0 auto;
  display:grid; grid-template-columns: 1fr auto 1fr; align-items:center; height: var(--nav-h);
  padding: 0 8px }
.nav-back{
  display:inline-flex; align-items:center; gap:2px; height:44px; padding: 0 8px 0 4px;
  color: var(--gold-deep); font-size:17px; border-radius: var(--r-ctrl); justify-self:start;
  max-width: 45vw; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.nav-back .ico{ width:24px; height:24px; stroke-width:2.2 }
.nav-title{
  font-size:17px; font-weight:600; letter-spacing:-.01em; text-align:center;
  opacity:0; transform: translateY(4px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:52vw;
}
.nav.scrolled .nav-title,.nav.always-title .nav-title{ opacity:1; transform:none }
.nav-actions{ justify-self:end; display:flex; align-items:center; gap:4px }
.nav-btn{
  height:44px; min-width:44px; padding:0 10px; display:inline-flex; align-items:center; justify-content:center; gap:6px;
  color: var(--gold-deep); font-size:17px; border-radius: var(--r-ctrl);
}
.nav-btn .ico{ width:24px; height:24px }
.nav-brand{ font-weight:700; letter-spacing:-.02em; font-size:17px; color: var(--ink); justify-self:start; padding-left:10px }

/* ---------- Tab bar ---------- */
.tabbar{
  position: fixed; left:0; right:0; bottom:0; z-index:100;
  height: calc(var(--tabbar-h) + var(--sab));
  padding-bottom: var(--sab);
  background: var(--bar-bg);
  -webkit-backdrop-filter: var(--bar-blur); backdrop-filter: var(--bar-blur);
  box-shadow: 0 -.5px 0 var(--hairline);
  display:flex; justify-content:center;
}
.tabbar-inner{ display:flex; width:100%; max-width: var(--screen-max) }
.tabbar a{
  flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
  height: var(--tabbar-h); color: var(--ink-3); font-size:10px; font-weight:500; letter-spacing:.01em;
  -webkit-tap-highlight-color: transparent;
}
.tabbar a .ico{ width:26px; height:26px; stroke-width:1.6 }
.tabbar a[aria-current="page"]{ color: var(--gold-deep) }
.tabbar a[aria-current="page"] .ico{ stroke-width:2.1 }
.tabbar a:active{ opacity:.6 }

/* ---------- Grouped list (iOS inset grouped) ---------- */
.group{ margin: 20px 0 0 }
.group-title{
  font-size:13px; font-weight:400; color: var(--ink-3); text-transform:uppercase; letter-spacing:.04em;
  padding: 0 16px 7px;
}
.group-foot{ font-size:13px; color: var(--ink-3); padding: 7px 16px 0; line-height:1.4 }
.list{
  background: var(--surface); border-radius: var(--r-card); overflow:hidden;
  box-shadow: var(--shadow-1);
}
.row{
  display:flex; align-items:center; gap:12px; min-height:52px; padding: 10px 16px;
  color: var(--ink); text-align:left; width:100%; position:relative;
  -webkit-tap-highlight-color: transparent;
}
.row + .row::before{
  content:""; position:absolute; left:58px; right:0; top:0; height:.5px; background: var(--hairline);
}
.row.no-tile + .row::before,.row + .row.no-tile::before{ left:16px }
.row-body{ flex:1; min-width:0 }
.row-label{ display:block; font-size:17px; line-height:1.3; letter-spacing:-.005em }
.row-detail{ display:block; font-size:14px; color: var(--ink-3); line-height:1.35; margin-top:1px }
.row-value{ font-size:17px; color: var(--ink-3); flex:0 0 auto; max-width:45% ; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.row-chevron{ color: var(--ink-4); flex:0 0 auto; width:18px; height:18px; stroke-width:2.2 }
.row-ext{ color: var(--ink-4); flex:0 0 auto; width:18px; height:18px; stroke-width:2 }
a.row:active,button.row:active,.row.press:active{ background: var(--fill) }
.row-danger .row-label{ color: var(--danger) }
.row-tall{ min-height:64px; padding: 12px 16px }

/* ---------- Card ---------- */
.card{
  background: var(--surface); border-radius: var(--r-card); padding: 16px;
  box-shadow: var(--shadow-1);
}
.card + .card{ margin-top:12px }
.card-title{ font-size:17px; font-weight:600; letter-spacing:-.01em; margin-bottom:4px }
.card-sub{ font-size:15px; color: var(--ink-3); line-height:1.4 }
.card-kicker{ font-size:13px; font-weight:600; color: var(--gold-deep); text-transform:uppercase; letter-spacing:.04em; margin-bottom:6px }
.card-hero{ padding: 22px 20px }
.card-hero .title-1{ margin-bottom:6px }
.card-ink{ background: var(--ink); color:#fff; box-shadow: var(--shadow-2) }
.card-ink .card-sub,.card-ink .muted{ color: rgba(255,255,255,.7) }
.card-ink .card-kicker{ color: var(--gold) }
:root[data-theme="dark"] .card-ink{ background:#1B2638 }
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .card-ink{ background:#1B2638 } }
.card-tint{ background: var(--gold-soft); box-shadow:none }
.card-danger{ background: var(--danger-soft); box-shadow:none }
.card-success{ background: var(--success-soft); box-shadow:none }
.card-info{ background: var(--info-soft); box-shadow:none }
.card-warning{ background: var(--warning-soft); box-shadow:none }

/* Tarjeta con icono grande (tipo widget) */
.widget{ display:flex; gap:14px; align-items:flex-start }
.widget .tile-lg{ margin-top:2px }

/* ---------- Botones ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:50px; padding: 0 20px; width:100%;
  font-size:17px; font-weight:600; letter-spacing:-.01em;
  border-radius: var(--r-pill);
  background: var(--primary); color: var(--on-primary);
  transition: transform 120ms var(--ease), opacity 120ms var(--ease), background 120ms;
  -webkit-tap-highlight-color: transparent;
}
.btn:active{ transform: scale(.97); opacity:.88 }
.btn:disabled{ background: var(--fill-strong); color: var(--ink-3); transform:none; opacity:1; cursor:not-allowed }
.btn-secondary{ background: var(--fill); color: var(--ink) }
.btn-tint{ background: var(--gold-dim); color: var(--gold-deep) }
.btn-gold{ background: var(--gold); color:#fff }
.btn-danger{ background: var(--danger); color:#fff }
.btn-danger-soft{ background: var(--danger-soft); color: var(--danger) }
.btn-plain{ background:none; color: var(--gold-deep); min-height:44px; width:auto; padding:0 8px }
.btn-sm{ min-height:36px; padding:0 14px; font-size:15px; width:auto }
.btn-inline{ width:auto }
.btn .ico{ width:20px; height:20px; stroke-width:2 }
.btn-row{ display:flex; gap:10px }
.btn-row .btn{ flex:1 }

/* ---------- Chips / etiquetas ---------- */
.chip{
  display:inline-flex; align-items:center; gap:5px; height:26px; padding:0 10px;
  border-radius: var(--r-pill); background: var(--fill); color: var(--ink-2);
  font-size:13px; font-weight:500; white-space:nowrap;
}
.chip-gold{ background: var(--gold-dim); color: var(--gold-deep) }
.chip-red{ background: var(--danger-soft); color: var(--danger) }
.chip-green{ background: var(--success-soft); color: var(--success) }
.chip-row{ display:flex; flex-wrap:wrap; gap:6px }
.badge{ font-size:12px; font-weight:600; padding:2px 8px; border-radius: var(--r-pill); background: var(--gold-dim); color: var(--gold-deep) }

/* ---------- Segmented control ---------- */
.segmented{
  display:flex; background: var(--fill); border-radius: 10px; padding:2px; gap:2px;
}
.segmented button,.segmented a{
  flex:1; height:32px; border-radius:8px; font-size:14px; font-weight:500; color: var(--ink-2);
  display:flex; align-items:center; justify-content:center; text-align:center;
  transition: background var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.segmented [aria-pressed="true"],.segmented [aria-current="true"],.segmented .on{
  background: var(--surface); color: var(--ink); font-weight:600; box-shadow: var(--shadow-1);
}

/* ---------- Formularios ---------- */
.field{ display:flex; flex-direction:column; gap:6px }
.field + .field{ margin-top:14px }
.label{ font-size:15px; font-weight:500; color: var(--ink-2) }
.input,.select,.textarea{
  width:100%; min-height:48px; padding: 11px 14px;
  font: inherit; font-size:17px; color: var(--ink);
  background: var(--surface-2); border: 1px solid transparent; border-radius: var(--r-ctrl);
  -webkit-appearance:none; appearance:none; outline:none;
  transition: border-color var(--dur), background var(--dur), box-shadow var(--dur);
}
.input::placeholder,.textarea::placeholder{ color: var(--ink-4) }
.input:focus,.select:focus,.textarea:focus{ border-color: var(--gold); box-shadow: 0 0 0 3px var(--gold-dim); background: var(--surface) }
.textarea{ min-height:110px; resize:vertical; line-height:1.4 }
.input-icon{ position:relative }
.input-icon .ico{ position:absolute; left:14px; top:50%; transform:translateY(-50%); color: var(--ink-4); pointer-events:none }
.input-icon .input{ padding-left:44px }
.help{ font-size:13px; color: var(--ink-3); line-height:1.4 }
.error-text{ font-size:13px; color: var(--danger) }
/* Campos dentro de una lista agrupada */
.list .input,.list .textarea{ background: transparent; border-radius:0; padding:14px 16px; border:0; box-shadow:none }
.list .input:focus{ box-shadow:none }
/* Toggle */
.switch{ position:relative; width:51px; height:31px; flex:0 0 auto }
.switch input{ position:absolute; opacity:0; width:100%; height:100%; margin:0; cursor:pointer }
.switch span{ position:absolute; inset:0; background: var(--fill-strong); border-radius:31px; transition: background var(--dur) }
.switch span::after{ content:""; position:absolute; top:2px; left:2px; width:27px; height:27px; border-radius:50%; background:#fff;
  box-shadow: 0 3px 8px rgba(0,0,0,.15), 0 0 0 .5px rgba(0,0,0,.04); transition: transform var(--dur) var(--ease) }
.switch input:checked + span{ background: var(--success) }
.switch input:checked + span::after{ transform: translateX(20px) }
/* Checkbox circular tipo Recordatorios */
.check{ display:flex; align-items:flex-start; gap:12px; padding:12px 16px; cursor:pointer }
.check input{ position:absolute; opacity:0; width:0; height:0 }
.check .box{ width:24px; height:24px; border-radius:50%; border:1.5px solid var(--hairline-strong); flex:0 0 auto; margin-top:1px;
  display:flex; align-items:center; justify-content:center; transition: background var(--dur), border-color var(--dur) }
.check .box .ico{ width:14px; height:14px; stroke:#fff; stroke-width:3; opacity:0 }
.check input:checked + .box{ background: var(--gold); border-color: var(--gold) }
.check input:checked + .box .ico{ opacity:1 }
.check input:checked ~ .check-label{ color: var(--ink-3); text-decoration: line-through }
.check-label{ font-size:17px; line-height:1.35; transition: color var(--dur) }

/* ---------- Banners / avisos ---------- */
.banner{
  display:flex; gap:12px; align-items:flex-start; padding:14px 16px;
  border-radius: var(--r-card); font-size:15px; line-height:1.4;
}
.banner .ico{ margin-top:1px }
.banner-info{ background: var(--info-soft); color: var(--ink) }
.banner-danger{ background: var(--danger-soft); color: var(--ink) }
.banner-danger .ico{ color: var(--danger) }
.banner-success{ background: var(--success-soft) }
.banner-success .ico{ color: var(--success) }
.banner-warning{ background: var(--warning-soft) }
.banner-warning .ico{ color: var(--warning) }
.banner-tint{ background: var(--gold-soft) }
.banner-tint .ico{ color: var(--gold-deep) }

/* ---------- Acordeón (details nativo) ---------- */
.acc{ background: var(--surface); border-radius: var(--r-card); box-shadow: var(--shadow-1); overflow:hidden }
.acc + .acc{ margin-top:10px }
.acc summary{
  list-style:none; display:flex; align-items:center; gap:12px; padding:14px 16px; cursor:pointer; min-height:52px;
  -webkit-tap-highlight-color: transparent;
}
.acc summary::-webkit-details-marker{ display:none }
.acc summary .row-body{ flex:1 }
.acc summary .row-chevron{ transition: transform var(--dur) var(--ease) }
.acc[open] summary .row-chevron{ transform: rotate(90deg) }
.acc-body{ padding: 0 16px 16px; color: var(--ink-2); font-size:16px; line-height:1.5 }
.acc-body p + p{ margin-top:.7em }

/* ---------- Sheet (hoja inferior) ---------- */
.overlay{
  position:fixed; inset:0; z-index:200; background: rgba(0,0,0,.4);
  opacity:0; pointer-events:none; transition: opacity var(--dur-slow) var(--ease);
}
.overlay.open{ opacity:1; pointer-events:auto }
.sheet{
  position:fixed; left:0; right:0; bottom:0; z-index:210;
  max-height: 88dvh; overflow-y:auto; -webkit-overflow-scrolling:touch;
  background: var(--canvas); border-radius: 22px 22px 0 0;
  padding: 0 var(--gutter) calc(var(--sab) + 20px);
  transform: translateY(105%); transition: transform var(--dur-slow) var(--ease-out);
  box-shadow: var(--shadow-3);
}
.sheet.open{ transform:none }
.sheet-grabber{ width:36px; height:5px; border-radius:3px; background: var(--fill-strong); margin: 8px auto 0 }
.sheet-head{ display:flex; align-items:center; justify-content:space-between; padding: 14px 0 6px }
.sheet-title{ font-size:20px; font-weight:700; letter-spacing:-.015em }
.sheet-close{ width:30px; height:30px; border-radius:50%; background: var(--fill); color: var(--ink-3);
  display:flex; align-items:center; justify-content:center }
.sheet-close .ico{ width:16px; height:16px; stroke-width:2.6 }
.sheet .group{ margin-top:12px }
@media (min-width: 700px){
  .sheet{ left:50%; right:auto; width: 560px; transform: translate(-50%,105%); border-radius:22px; bottom: 24px }
  .sheet.open{ transform: translate(-50%,0) }
}

/* ---------- Toast ---------- */
.toast{
  position:fixed; left:50%; bottom: calc(var(--tabbar-h) + var(--sab) + 16px); transform: translate(-50%, 12px);
  z-index:300; background: var(--ink); color:#fff; font-size:15px; font-weight:500;
  padding: 10px 16px; border-radius: var(--r-pill); box-shadow: var(--shadow-2);
  opacity:0; pointer-events:none; transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
  display:flex; align-items:center; gap:8px; white-space:nowrap; max-width: calc(100vw - 32px)
}
.toast.show{ opacity:1; transform: translate(-50%,0) }
.toast .ico{ width:18px; height:18px; stroke-width:2.4 }
:root[data-theme="dark"] .toast{ background:#E8EDF4; color:#0B1220 }
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .toast{ background:#E8EDF4; color:#0B1220 } }

/* ---------- Contact cards / avatar ---------- */
.avatar{ width:44px; height:44px; border-radius:50%; object-fit:cover; flex:0 0 auto; background: var(--fill) }
.avatar-lg{ width:64px; height:64px }

/* ---------- Estados de carga ---------- */
.spinner{ width:20px; height:20px; border-radius:50%; border:2.5px solid var(--fill-strong); border-top-color: var(--gold); animation: spin .8s linear infinite }
@keyframes spin{ to{ transform: rotate(360deg) } }
.skeleton{ background: linear-gradient(90deg, var(--fill) 25%, var(--fill-strong) 50%, var(--fill) 75%); background-size:200% 100%; animation: shimmer 1.4s infinite; border-radius:8px }
@keyframes shimmer{ from{ background-position: 200% 0 } to{ background-position: -200% 0 } }

/* ---------- Vistas apiladas (lista → detalle en la misma página) ---------- */
.view{ display:none }
.view.on{ display:block; animation: viewIn var(--dur-slow) var(--ease-out) }
@keyframes viewIn{ from{ opacity:0; transform: translateX(16px) } to{ opacity:1; transform:none } }
.view.on.back{ animation-name: viewBack }
@keyframes viewBack{ from{ opacity:0; transform: translateX(-12px) } to{ opacity:1; transform:none } }

/* ---------- Tabla de datos simple ---------- */
.kv{ display:grid; grid-template-columns: auto 1fr; gap: 6px 14px; font-size:15px }
.kv dt{ color: var(--ink-3) }
.kv dd{ color: var(--ink) }

/* ---------- Números de teléfono / acciones rápidas ---------- */
.call{
  display:flex; align-items:center; gap:12px; padding:14px 16px; min-height:64px;
  background: var(--surface); border-radius: var(--r-card); box-shadow: var(--shadow-1); color: var(--ink);
}
.call + .call{ margin-top:10px }
.call .tile{ width:40px; height:40px; border-radius:10px }
.call .tile .ico{ width:22px; height:22px }
.call-body{ flex:1; min-width:0 }
.call-name{ display:block; font-size:17px; font-weight:600; letter-spacing:-.01em }
.call-num{ display:block; font-size:15px; color: var(--ink-3); font-variant-numeric: tabular-nums }
.call:active{ background: var(--fill) }

/* ---------- Pie ---------- */
.foot{ text-align:center; font-size:13px; color: var(--ink-3); padding: 32px 0 8px; line-height:1.6 }
.foot a{ color: var(--ink-3) }

/* ---------- Escritorio / iPad: la tab bar se vuelve barra lateral ---------- */
@media (min-width: 900px){
  :root{ --screen-max: 720px }
  body{ padding-bottom: 48px; padding-left: 240px }
  body.no-tabbar{ padding-left: 0 }
  .nav{ left:240px }
  body.no-tabbar .nav{ left:0 }
  .tabbar{
    top:0; bottom:0; left:0; right:auto; width:240px; height:auto; padding: calc(var(--sat) + 20px) 12px 20px;
    box-shadow: .5px 0 0 var(--hairline); flex-direction:column; justify-content:flex-start;
  }
  .tabbar-inner{ flex-direction:column; gap:2px }
  .tabbar a{ flex:0 0 auto; flex-direction:row; justify-content:flex-start; gap:12px; height:44px; padding: 0 12px;
    border-radius: 10px; font-size:15px; font-weight:500 }
  .tabbar a .ico{ width:22px; height:22px }
  .tabbar a[aria-current="page"]{ background: var(--gold-dim) }
  .tabbar-brand{ display:block !important; font-size:20px; font-weight:700; letter-spacing:-.02em; padding: 8px 12px 18px; color: var(--ink) }
  .toast{ left: calc(50% + 120px); bottom: 32px }
}
.tabbar-brand{ display:none }

/* ============================================================
   Capa visual de cita.html
   Tipografía DM Sans + Playfair Display, vidrio claro, dorado,
   iconos en círculo dorado pálido, píldoras y botones de cita.
   ============================================================ */
body{ font-size:16px; line-height:1.5; letter-spacing:-.005em }
body::before{
  content:''; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(ellipse 70% 55% at 5% 10%, rgba(184,137,58,.09) 0%, transparent 60%),
    radial-gradient(ellipse 55% 50% at 95% 8%, rgba(13,27,42,.07) 0%, transparent 55%),
    radial-gradient(ellipse 50% 60% at 3% 92%, rgba(13,27,42,.06) 0%, transparent 55%),
    radial-gradient(ellipse 65% 55% at 96% 88%, rgba(184,137,58,.07) 0%, transparent 60%),
    var(--canvas);
}
:root[data-theme="dark"] body::before{
  background:
    radial-gradient(ellipse 70% 55% at 5% 10%, rgba(212,167,86,.12) 0%, transparent 60%),
    radial-gradient(ellipse 55% 50% at 95% 8%, rgba(66,110,158,.16) 0%, transparent 55%),
    linear-gradient(180deg,#0e1626 0%,#0b1120 60%,#090d18 100%);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) body::before{
    background:
      radial-gradient(ellipse 70% 55% at 5% 10%, rgba(212,167,86,.12) 0%, transparent 60%),
      radial-gradient(ellipse 55% 50% at 95% 8%, rgba(66,110,158,.16) 0%, transparent 55%),
      linear-gradient(180deg,#0e1626 0%,#0b1120 60%,#090d18 100%);
  }
}

/* Tipografía */
.large-title{ font-family: var(--serif); font-size:32px; font-weight:700; letter-spacing:-.01em; line-height:1.12 }
.title-1{ font-family: var(--serif); font-size:26px; font-weight:700; letter-spacing:-.01em; line-height:1.18 }
.title-2{ font-size:22px; font-weight:700; letter-spacing:-.02em; line-height:1.15 }
.title-3{ font-size:18px; font-weight:700; letter-spacing:-.015em }
.page-title{ margin: 16px 0 6px }
.page-sub{ font-size:15px; line-height:1.5; color: var(--ink-3); margin-bottom: 18px }
.prose p,.prose li{ font-size:16px; line-height:1.6 }
.prose h2{ font-family: var(--serif); font-size:22px; letter-spacing:-.01em }
.sheet-title{ font-family: var(--serif); font-size:22px; font-weight:700; letter-spacing:-.01em }
.card-title{ font-size:16px; font-weight:700 }
.card-sub{ font-size:14.5px; line-height:1.5 }
.card-kicker,.group-title{ font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color: var(--ink-3) }
.group-title{ padding: 0 18px 8px }
.group-foot{ font-size:12.5px; line-height:1.5; padding: 8px 18px 0 }
.foot{ font-size:12.5px }

/* Logo */
.nav-logo{ height:24px; width:auto; display:block }
.nav-brand{ padding-left:8px; display:flex; align-items:center }
.tabbar-brand img{ height:26px; width:auto; display:block }
:root[data-theme="dark"] .nav-logo,:root[data-theme="dark"] .tabbar-brand img{ filter: invert(1) brightness(1.1) }
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .nav-logo,:root:not([data-theme="light"]) .tabbar-brand img{ filter: invert(1) brightness(1.1) } }

/* Barras */
.nav.scrolled{ box-shadow: 0 .5px 0 var(--hairline) }
.nav-back,.nav-btn{ color: var(--gold-deep); font-weight:500 }
.nav-title{ font-weight:700 }
.tabbar a{ font-size:10.5px; font-weight:600 }
.tabbar a[aria-current="page"]{ color: var(--gold-deep) }

/* Listas y tarjetas de vidrio */
.list,.card,.acc,.call{
  background: var(--surface);
  border: 1px solid var(--glass-bdr);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-1);
}
/* Las variantes vuelven a declarar su fondo: la regla de vidrio de arriba
   (.card{background:var(--surface)}) llega después y los dejaba en blanco,
   con el texto blanco de .card-ink invisible. */
.card-ink{ background: var(--ink); border-color: transparent }
:root[data-theme="dark"] .card-ink{ background:#1B2638 }
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .card-ink{ background:#1B2638 } }
.card-tint,.card-danger,.card-success,.card-info,.card-warning{ border-color: transparent; box-shadow:none }
.card-tint{ background: var(--gold-soft) }
.card-danger{ background: var(--danger-soft) }
.card-success{ background: var(--success-soft) }
.card-info{ background: var(--info-soft) }
.card-warning{ background: var(--warning-soft) }
.row{ gap:13px; padding: 12px 18px; min-height:56px }
.row + .row::before{ left:65px; background: var(--hairline) }
.row.no-tile + .row::before,.row + .row.no-tile::before{ left:18px }
.row-label{ font-size:15.5px; font-weight:600; letter-spacing:-.01em }
.row-detail{ font-size:13px; color: var(--ink-3); line-height:1.4; margin-top:2px }
.row-value{ font-size:14px; color: var(--ink-3) }
.row-chevron,.row-ext{ color: var(--ink-4) }
a.row:active,button.row:active,.row.press:active{ background: rgba(13,27,42,.03) }

/* Iconos: círculo dorado pálido (como cita) */
.tile{ width:34px; height:34px; border-radius:50%; background: var(--gold-dim); color: var(--gold-deep) }
.tile .ico{ width:17px; height:17px; stroke-width:2 }
.tile-gold{ background: var(--gold); color:#fff }
.tile-ink{ background: #0d1b2a; color:#fff }
:root[data-theme="dark"] .tile-ink{ background:#EEF2F7; color:#0b1120 }
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .tile-ink{ background:#EEF2F7; color:#0b1120 } }
:root[data-theme="light"] .tile-ink{ background:#0d1b2a; color:#fff }
.tile-red{ background: var(--danger-soft); color: var(--danger) }
.tile-green{ background: var(--wa); color:#fff }
.tile-purple,.tile-indigo,.tile-blue{ background: rgba(42,74,107,.10); color: var(--ink-2) }
:root[data-theme="dark"] .tile-purple,:root[data-theme="dark"] .tile-indigo,:root[data-theme="dark"] .tile-blue{ background: rgba(169,189,214,.14); color: var(--ink-2) }
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .tile-purple,:root:not([data-theme="light"]) .tile-indigo,:root:not([data-theme="light"]) .tile-blue{ background: rgba(169,189,214,.14); color: var(--ink-2) } }
.tile-teal,.tile-orange,.tile-gray,.tile-soft{ background: var(--gold-dim); color: var(--gold-deep) }
.tile-lg{ width:48px; height:48px; border-radius:50% }
.tile-lg .ico{ width:22px; height:22px }
.call .tile{ width:40px; height:40px; border-radius:50% }
.call .tile .ico{ width:20px; height:20px }

/* Foto de médico en filas */
.avatar,.row-photo{ width:40px; height:40px; border-radius:50%; object-fit:cover; object-position:top center; flex:0 0 auto;
  box-shadow: 0 4px 14px rgba(13,27,42,.14); background: var(--fill) }
.row-photo + .row-body{ }
.row:has(.row-photo) + .row::before{ left:71px }

/* Botones (idénticos a cita) */
.btn{ min-height:52px; font-size:16px; font-weight:600; letter-spacing:-.005em;
  background: var(--primary); color: var(--on-primary);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 8px 24px rgba(0,0,0,.14);
  transition: transform .34s var(--spring), background .2s, opacity .2s }
.btn:active{ transform: scale(1.03); background: var(--primary-dk); opacity:1 }
.btn:disabled{ background: var(--fill-strong); color: var(--ink-3); box-shadow:none }
.btn-secondary{ background: rgba(255,255,255,.7); color: var(--ink); border:1px solid var(--glass-bdr); box-shadow: var(--shadow-1) }
.btn-secondary:active{ background: var(--surface-on) }
:root[data-theme="dark"] .btn-secondary{ background: var(--surface) }
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .btn-secondary{ background: var(--surface) } }
.btn-tint{ background: var(--gold-dim); color: var(--gold-deep); box-shadow:none }
.btn-gold{ background: var(--gold); color:#fff; box-shadow: 0 8px 24px rgba(184,137,58,.28) }
.btn-plain{ background:none; box-shadow:none; color: var(--gold-deep) }
.btn-plain:active{ background:none }
.btn-sm{ min-height:40px; font-size:14px }
.btn-wa{ background: rgba(37,211,102,.92); color:#fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 8px 24px rgba(37,211,102,.22) }

/* Segmentado en píldoras (seg de cita) */
.segmented{ background:none; padding:0; gap:8px }
.segmented button,.segmented a{
  height:auto; min-height:44px; padding: 8px 12px; border-radius: var(--r-pill);
  background: rgba(255,255,255,.62); border:1px solid var(--glass-bdr); box-shadow: inset 0 1px 0 rgba(255,255,255,.7);
  font-size:14px; font-weight:600; color: var(--ink);
  transition: transform .34s var(--spring), background .25s, border-color .25s, box-shadow .25s }
.segmented [aria-pressed="true"],.segmented [aria-current="true"],.segmented .on{
  background: var(--surface-on); border-color: transparent; box-shadow: var(--shadow-2), inset 0 1px 0 rgba(255,255,255,.65) }
:root[data-theme="dark"] .segmented button,:root[data-theme="dark"] .segmented a{ background: var(--surface) }
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .segmented button,:root:not([data-theme="light"]) .segmented a{ background: var(--surface) } }

/* Chips y campos */
.chip{ font-weight:600; background: var(--fill) }
.label{ font-size:13px; font-weight:600; color: var(--ink-2) }
.input,.select,.textarea{ font-size:16px; background: var(--surface-2); border-radius: var(--r-ctrl) }
.input:focus,.select:focus,.textarea:focus{ border-color: var(--gold-border); box-shadow: 0 0 0 3px rgba(184,137,58,.28) }
:focus-visible{ outline:none; box-shadow: 0 0 0 3px rgba(184,137,58,.35) }

/* Avisos */
.banner{ border-radius: var(--r-card); font-size:14px; line-height:1.5 }
.banner-tint{ background: var(--gold-soft) }

/* Hojas y toast */
.sheet{ background: var(--canvas); border-radius: 22px 22px 0 0; box-shadow: var(--shadow-3) }
.toast{ background: rgba(13,27,42,.9); color:#fff; font-size:13.5px; font-weight:600;
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px) }


/* Logo en la barra lateral: solo en escritorio */
.tabbar a.tabbar-brand{ display:none }
@media (min-width: 900px){
  .tabbar a.tabbar-brand{ display:block; height:auto; padding: 6px 12px 22px; background:none !important; border-radius:0 }
}

/* ============================================================
   Asistente de TCC: botón flotante + hoja ChatGPT / Gemini
   ============================================================ */
.eu-fab{
  position:fixed; z-index:150;
  right: max(16px, env(safe-area-inset-right));
  bottom: calc(var(--tabbar-h) + var(--sab) + 14px);
  display:inline-flex; align-items:center; gap:10px;
  height:52px; padding: 0 18px 0 6px; border-radius: var(--r-pill);
  background: rgba(255,255,255,.86);
  -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
  border:1px solid rgba(255,255,255,.6);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 12px 34px rgba(13,27,42,.16), 0 3px 10px rgba(13,27,42,.08);
  color: var(--ink); text-align:left;
  transition: transform .34s var(--spring), box-shadow .2s, opacity .25s;
  animation: euFabIn .5s .3s var(--ease) both;
}
.eu-fab:active{ transform: scale(1.04) }
.eu-fab-orb{
  width:40px; height:40px; border-radius:50%; flex:0 0 auto;
  display:flex; align-items:center; justify-content:center; color:#fff;
  background: radial-gradient(120% 120% at 20% 15%, #d9ae62 0%, #b8893a 45%, #0d1b2a 120%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 4px 12px rgba(184,137,58,.35);
}
.eu-fab-orb .ico{ width:20px; height:20px; stroke-width:2 }
.eu-fab-txt{ display:flex; flex-direction:column; font-size:14.5px; font-weight:700; letter-spacing:-.01em; line-height:1.15 }
.eu-fab-txt small{ font-size:10.5px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color: var(--ink-3); margin-top:2px }
.eu-fab.is-hidden{ opacity:0; pointer-events:none; transform: translateY(12px) }
@keyframes euFabIn{ from{ opacity:0; transform: translateY(14px) scale(.96) } to{ opacity:1; transform:none } }
:root[data-theme="dark"] .eu-fab{ background: rgba(30,41,62,.86); border-color: rgba(255,255,255,.1) }
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .eu-fab{ background: rgba(30,41,62,.86); border-color: rgba(255,255,255,.1) } }
body.no-tabbar .eu-fab{ bottom: calc(var(--sab) + 18px) }
body.has-fab{ padding-bottom: calc(var(--tabbar-h) + var(--sab) + 88px) }
@media (min-width: 900px){ body.has-fab{ padding-bottom: 104px } }
@media (min-width: 900px){ .eu-fab{ bottom: 28px; right: 28px } }
@media print{ .eu-fab{ display:none !important } }

.ai-logo{ width:40px; height:40px; border-radius:12px; flex:0 0 auto; display:flex; align-items:center; justify-content:center; background:#fff;
  box-shadow: 0 0 0 .5px var(--hairline-strong), 0 2px 6px rgba(13,27,42,.08) }
.ai-logo svg{ width:24px; height:24px }
.row:has(.ai-logo) + .row::before{ left:71px }
.ai-note{ font-size:13px; line-height:1.5; color: var(--ink-2); padding: 12px 16px; border-radius: var(--r-card); background: var(--gold-soft); margin-top:14px }
.ai-note strong{ color: var(--ink) }

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

/* ---------- Impresión ---------- */
@media print{
  .nav,.tabbar,.sheet,.overlay,.toast{ display:none !important }
  body{ padding:0; background:#fff; color:#000 }
  .list,.card,.acc,.call{ box-shadow:none; border:.5px solid #ccc }
}

/* Mi Eutimya: en celular va arriba (botón de persona); en escritorio, al fondo de la barra lateral */
.tabbar a.tabbar-cuenta{ display:none }
@media (min-width: 900px){
  .tabbar-inner{ flex:1 }
  .tabbar a.tabbar-cuenta{ display:flex; margin-top:auto; border-top: .5px solid var(--hairline); border-radius:0 0 10px 10px; padding-top:4px; height:52px }
  .tabbar-cuenta-txt{ display:flex; flex-direction:column; line-height:1.2 }
  .tabbar-cuenta-txt small{ font-size:12px; color: var(--ink-3); font-weight:500 }
  .nav-cuenta{ display:none !important }
}

/* Tarjeta «Tu próxima cita» de Mi Eutimya (resumen.js, 20-oct-2026) */
#resumen-mi { display: grid; gap: 10px; }
#resumen-mi[hidden] { display: none; }
.res-card { display: grid; gap: 6px; }
.res-label { font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-3); margin: 0; }
.res-fecha { font-size: 20px; font-weight: 700; margin: 0; line-height: 1.25; }
.res-estado { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; margin-top: 4px; }
.res-estado .ico { width: 18px; height: 18px; }
.res-ok { color: var(--success); }
.res-pend { color: var(--gold-deep); }
.res-saldo { border-left: 3px solid var(--gold); }
.res-btn { justify-self: start; margin-top: 4px; }
.res-corriente { display: flex; align-items: center; gap: 6px; color: var(--success); font-weight: 600; margin: 2px 4px; }
.res-corriente .ico { width: 18px; height: 18px; }