/* Gabriel AI: minimal cyborg theme. Cool graphite black, the blue of the chat bubbles (#0a84ff) for actions and
   highlights (flat, no gradients), and quiet surfaces: mostly solid panels with a thin edge and only a light blur.
   The portrait's robot eye is a green lens painted in the pictures themselves. */
@import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=JetBrains+Mono:wght@500;600&display=swap");
:root {
  --bg: oklch(0.11 0.008 256);
  --bg-2: oklch(0.14 0.01 256);
  --panel: oklch(0.2 0.012 256 / 0.42);
  --line: oklch(0.98 0.01 256 / 0.1);
  --line-strong: oklch(0.98 0.01 256 / 0.2);
  --text: oklch(0.98 0.01 256);
  --muted: oklch(0.74 0.02 256);
  --accent: oklch(0.64 0.2 256);
  --accent-glow: oklch(0.64 0.2 256 / 0.35);
  /* Highlights and the main buttons: the same flat blue (kept as a variable for the places that fill text with it). */
  --metal: var(--accent);
  --danger: oklch(0.72 0.16 45);
  --ok: oklch(0.78 0.14 150);
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Segoe UI", Roboto, sans-serif;
  --mono: var(--sans);
  --display: "Space Grotesk", -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", sans-serif;
  --hud: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Glass */
  --glass: oklch(0.15 0.006 256 / 0.86);
  --glass-strong: oklch(0.13 0.006 256 / 0.94);
  --glass-fill: oklch(0.98 0.005 256 / 0.04);
  --glass-edge: oklch(1 0 0 / 0.09);
  --glass-sheen: linear-gradient(transparent, transparent);
  --glass-hi: inset 0 0 0 0 transparent;
  --glass-depth: 0 4px 18px oklch(0 0 0 / 0.3);
  --blur: blur(10px);
  --r-lg: 16px; --r-md: 12px; --r-sm: 9px; --r-pill: 999px;
  --spring: cubic-bezier(.2, .9, .25, 1.15);
  --ease: cubic-bezier(.2, .8, .2, 1);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; margin: 0; }
body {
  overflow-x: hidden;
  background: var(--bg);
  color: var(--text);
  font: 15px/1.5 var(--sans);
  -webkit-font-smoothing: antialiased;
  letter-spacing: -0.005em;
}

/* The AI's portrait (half cyborg, red eyes) behind everything, faded, with warm and blue light for the glass to pick up.
   In grayscale, so nothing red tints the blue theme. */
.backdrop { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.backdrop::before {
  content: ""; position: absolute; inset: 0;
  background: url("/img/backdrop-cyborg.jpg?v=9") center 22% / cover no-repeat;
  opacity: var(--portrait-opacity, 0.2);
  filter: grayscale(1) contrast(1.1); /* neutral, so the portrait's red doesn't tint the blue theme */
}
.backdrop::after {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(38vmax 38vmax at 8% 6%, oklch(0.63 0.2 256 / 0.1), transparent 70%),
    radial-gradient(44vmax 44vmax at 96% 92%, oklch(0.63 0.2 256 / 0.06), transparent 70%),
    radial-gradient(ellipse at 50% 35%, transparent 0%, var(--bg) 80%);
}
.grid-glow { display: none; }
.page { position: relative; z-index: 1; min-height: 100%; display: flex; flex-direction: column; }

/* Small section labels */
.label { font: 600 10.5px/1.4 var(--hud); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.label b, .accent { color: var(--accent); font-weight: 600; }

/* Feature tiles (formerly bracket frames) */
.frame {
  position: relative; padding: 16px 18px; border-radius: var(--r-md);
  background: var(--glass-sheen), var(--glass-fill); box-shadow: var(--glass-hi), inset 0 0 0 1px var(--line);
}

/* The glass surface */
.panel, .glass {
  background: var(--glass-sheen), var(--glass);
  border: 1px solid var(--glass-edge); border-radius: var(--r-lg);
  box-shadow: var(--glass-hi), var(--glass-depth);
  backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
}

/* Top bar: floating glass */
.topbar {
  display: flex; align-items: center; gap: 14px; padding: 10px 12px 10px 14px;
  margin: max(10px, env(safe-area-inset-top)) 12px 0; border-radius: var(--r-pill);
  background: var(--glass-sheen), oklch(0.16 0.01 256 / 0.55); border: 1px solid var(--glass-edge);
  box-shadow: var(--glass-hi), 0 8px 28px oklch(0 0 0 / 0.35);
  backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
  position: sticky; top: max(10px, env(safe-area-inset-top)); z-index: 5;
}
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--text); }
.brand-name { font: 700 15px/1 var(--display); letter-spacing: 0.02em; text-transform: uppercase; }
.brand-name span { color: var(--accent); }
.topbar nav { margin-left: auto; display: flex; gap: 6px; align-items: center; }
.topbar nav a:not(.navbtn), .linkbtn {
  font: 600 13px/1 var(--sans); color: var(--muted); text-decoration: none; padding: 9px 12px; border-radius: var(--r-pill);
  background: none; border: 0; cursor: pointer; transition: color .2s, background .2s;
}
.topbar nav a:not(.navbtn):hover, .linkbtn:hover, .topbar nav a.active { color: var(--text); background: var(--glass-fill); }

/* AI core: a pulsing ring used as the assistant's avatar */
.core {
  width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0; position: relative;
  background: radial-gradient(circle at 50% 50%, var(--accent) 0 18%, transparent 19%),
              conic-gradient(from 0deg, var(--accent), transparent 30%, var(--accent) 60%, transparent 85%, var(--accent));
  -webkit-mask: radial-gradient(circle, black 0 22%, transparent 23% 55%, black 56%);
          mask: radial-gradient(circle, black 0 22%, transparent 23% 55%, black 56%);
  animation: spin 6s linear infinite;
  box-shadow: 0 0 18px var(--accent-glow);
}
.core.lg { width: 72px; height: 72px; }
.thinking .core, .core.busy { animation-duration: 1.2s; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Buttons: pills with a glossy top edge and a springy press */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font: 600 15px/1 var(--sans); padding: 14px 22px; border-radius: var(--r-pill); cursor: pointer;
  background: oklch(0.96 0.003 256); color: var(--bg);
  border: 0; text-decoration: none; box-shadow: none;
  transition: transform .18s var(--spring), box-shadow .2s, filter .2s;
}
.btn::after { content: none; }
.btn:hover { filter: brightness(1.05); }
.btn:active { transform: scale(0.96); }
.btn:disabled { opacity: .5; cursor: default; transform: none; filter: none; }
.btn.ghost {
  background: var(--glass-sheen), var(--glass-fill); color: var(--text);
  box-shadow: var(--glass-hi), inset 0 0 0 1px var(--line-strong);
  backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
}
.btn.accent {
  background: var(--accent); color: #fff;
  box-shadow: 0 0 24px oklch(0.64 0.2 256 / 0.25);
}
.btn.accent:disabled { filter: saturate(0.5) brightness(0.8); }
.btn.block { width: 100%; }
.btn.wrap { white-space: normal; line-height: 1.3; text-align: center; padding-top: 13px; padding-bottom: 13px; }

.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
input, select, textarea {
  font: 16px/1.4 var(--sans); color: var(--text); background: oklch(0.08 0.005 256 / 0.45);
  border: 1px solid var(--line); border-radius: var(--r-sm); padding: 12px 14px; width: 100%;
  box-shadow: inset 0 1px 2px oklch(0 0 0 / 0.25);
  transition: border-color .2s, box-shadow .2s, background .2s;
}
select { -webkit-appearance: none; appearance: none; padding-right: 34px;
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 18px) 52%, calc(100% - 13px) 52%; background-size: 5px 5px; background-repeat: no-repeat; }
input:focus, select:focus, textarea:focus { outline: none; border-color: oklch(0.64 0.2 256 / 0.7); box-shadow: 0 0 0 4px oklch(0.64 0.2 256 / 0.18); background-color: oklch(0.1 0.006 256 / 0.6); }
input[type=checkbox], input[type=radio] { width: auto; box-shadow: none; accent-color: var(--accent); }

.msg-note { font: 13px/1.4 var(--sans); padding: 10px 14px; border-radius: var(--r-sm); margin: 10px 0; }
.msg-note.error { background: oklch(0.7 0.17 256 / 0.12); color: var(--danger); border: 1px solid oklch(0.7 0.17 256 / 0.35); }
.msg-note.ok { background: oklch(0.78 0.14 150 / 0.1); color: var(--ok); border: 1px solid oklch(0.78 0.14 150 / 0.3); }
[hidden] { display: none !important; }

/* Typing cursor while the AI streams */
.cursor::after { content: "▍"; color: var(--accent); animation: blink 1s steps(2) infinite; margin-left: 2px; }
@keyframes blink { 50% { opacity: 0; } }

/* Thin, quiet scrollbars */
* { scrollbar-width: thin; scrollbar-color: oklch(1 0 0 / 0.18) transparent; }

@media (max-width: 720px) {
  :root { --blur: blur(18px) saturate(160%); --r-lg: 22px; }
  .topbar { padding: 8px 8px 8px 10px; margin: max(8px, env(safe-area-inset-top)) 8px 0; }
  .topbar nav a:not(.navbtn) span { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .core, .cursor::after { animation: none; }
  * { transition-duration: 0s !important; }
}
/* Browsers without backdrop blur get a solid enough surface to stay readable. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root { --glass: oklch(0.17 0.01 256 / 0.94); }
}

/* ---- Cyborg logo: Gabriel's half-cyborg face: a natural eye and a green robot lens (painted in the picture) ----
   Markup: <div class="face"><img src="/img/logo-face.jpg?v=9" alt=""><i class="eye l"></i><i class="eye r"></i><i class="flare"></i></div>
   */
.face {
  --size: 38px;
  position: relative; width: var(--size); height: var(--size); flex-shrink: 0;
  border-radius: 50%; overflow: hidden; isolation: isolate;
  box-shadow: 0 0 0 1px oklch(0.63 0.2 256 / 0.5), 0 0 18px oklch(0.63 0.2 256 / 0.3);
  animation: face-ring 4s ease-in-out infinite;
}
.face img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* The eyes are painted in the picture itself: no overlay on top (the markup stays for older pages). */
.face .eye { display: none; }
.face .flare { /* light sweep across the face now and then. The layer stays a circle and only its background
  moves: a moving (transformed) layer escapes the round clip on iPhone Safari and shows the square photo. */
  position: absolute; inset: 0; z-index: 3; pointer-events: none; border-radius: 50%;
  background: linear-gradient(115deg, transparent 42%, oklch(0.97 0.02 60 / 0.22) 50%, transparent 58%) no-repeat;
  background-size: 300% 100%; background-position: 150% 0; animation: sweep 6s ease-in-out infinite;
}
.face.lg { --size: 120px; }
.face.xl { --size: min(320px, 70vw); }
/* The big portrait: a thin blue ring. */
.face.xl { box-shadow: 0 0 0 1px oklch(0.64 0.2 256 / 0.5); }

@keyframes sweep { 0%, 70% { background-position: 150% 0; } 85%, 100% { background-position: -50% 0; } }
@keyframes face-ring {
  0%, 100% { box-shadow: 0 0 0 1px oklch(0.63 0.2 256 / 0.45), 0 0 14px oklch(0.63 0.2 256 / 0.2); }
  50% { box-shadow: 0 0 0 1px oklch(0.63 0.2 256 / 0.8), 0 0 26px oklch(0.63 0.2 256 / 0.45); }
}

@media (prefers-reduced-motion: reduce) {
  .face, .face .flare { animation: none; }
}

/* ---- Signed-in header: Historial drawer + Menú dropdown (js/nav.js) ---- */
.navbtn {
  font: 600 13px/1 var(--sans); color: var(--text);
  background: var(--glass-sheen), var(--glass-fill); border: 0; box-shadow: var(--glass-hi), inset 0 0 0 1px var(--line);
  padding: 10px 15px; border-radius: var(--r-pill); cursor: pointer;
  transition: transform .18s var(--spring), background .2s, color .2s;
}
.navbtn:hover, .navbtn:focus-visible { background: var(--glass-sheen), oklch(0.98 0.01 256 / 0.12); outline: none; }
.navbtn:active { transform: scale(0.94); }
.nav-scrim { position: fixed; inset: 0; z-index: 20; background: oklch(0 0 0 / 0.35); animation: fade .25s var(--ease); }
@keyframes fade { from { opacity: 0; } }
.drawer {
  position: fixed; top: 10px; right: 10px; bottom: 10px; z-index: 21; width: min(360px, calc(100vw - 20px));
  background: var(--glass-sheen), var(--glass-strong); border: 1px solid var(--glass-edge); border-radius: var(--r-lg);
  box-shadow: var(--glass-hi), 0 24px 60px oklch(0 0 0 / 0.5);
  backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
  display: flex; flex-direction: column; overflow: hidden;
  transform: translateX(calc(100% + 20px)); transition: transform .42s var(--spring); visibility: hidden;
}
.drawer.open { transform: none; visibility: visible; }
.drawer:not(.open) { transition: transform .3s var(--ease), visibility 0s .3s; }
.drawer-head { padding: 18px 16px 12px; display: flex; flex-direction: column; gap: 12px; border-bottom: 1px solid var(--line); }
.drawer-list { flex: 1; overflow-y: auto; padding: 8px; overscroll-behavior: contain; }
.drawer-empty { color: var(--muted); font-size: 14px; padding: 12px 8px; }
.drawer .conv { display: flex; align-items: center; gap: 8px; padding: 12px 12px; border-radius: var(--r-sm); color: var(--muted); text-decoration: none; font-size: 15px; transition: background .2s; }
.drawer .conv:hover, .drawer .conv.on { background: oklch(0.98 0.01 256 / 0.08); color: var(--text); }
.drawer .conv.on { box-shadow: inset 0 0 0 1px oklch(0.64 0.2 256 / 0.4); }
.drawer .conv span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.drawer .conv button { background: none; border: 0; color: var(--muted); cursor: pointer; font-size: 13px; padding: 4px; }
.drawer .conv button:hover { color: var(--danger); }
.navbtn.on { color: var(--accent); background: var(--glass-sheen), oklch(0.64 0.2 256 / 0.14); box-shadow: var(--glass-hi), inset 0 0 0 1px oklch(0.64 0.2 256 / 0.35); }
a.navbtn { text-decoration: none; display: inline-flex; align-items: center; }
.navbtn .short { display: none; }
.drawer-title { display: flex; align-items: center; justify-content: space-between; font: 700 20px/1 var(--display); letter-spacing: -0.01em; }
.x-close { width: 32px; height: 32px; border-radius: 50%; border: 0; background: var(--glass-fill); color: var(--muted); cursor: pointer; font-size: 13px; box-shadow: inset 0 0 0 1px var(--line); }
.x-close:hover { color: var(--text); }
.drawer .conv.file { align-items: center; gap: 12px; }
.drawer .conv.file span { display: flex; flex-direction: column; gap: 2px; white-space: normal; }
.drawer .conv.file b { font-weight: 500; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.drawer .conv.file small { font-size: 12px; color: var(--muted); }
.ficon { flex-shrink: 0; width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; font: 700 10px var(--sans); font-style: normal; letter-spacing: .04em; color: var(--accent); background: oklch(0.64 0.2 256 / 0.12); box-shadow: inset 0 0 0 1px oklch(0.64 0.2 256 / 0.25); }
.drawer-foot { padding: 14px 16px calc(14px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); color: var(--accent); text-decoration: none; font-weight: 600; font-size: 14px; text-align: center; }

/* Segmented control (iOS style) */
.seg { display: inline-flex; padding: 3px; border-radius: var(--r-pill); background: var(--glass-sheen), var(--glass-fill); box-shadow: var(--glass-hi), inset 0 0 0 1px var(--line); }
.seg button { flex: 1; font: 600 13px var(--sans); color: var(--muted); background: none; border: 0; padding: 8px 12px; border-radius: var(--r-pill); cursor: pointer; white-space: nowrap; transition: background .25s var(--ease), color .2s; }
.seg button.on { color: var(--text); background: oklch(0.98 0.01 256 / 0.14); box-shadow: inset 0 1px 0 oklch(1 0 0 / 0.18), 0 2px 6px oklch(0 0 0 / 0.25); }
.drawer .seg { display: flex; }
@media (max-width: 860px) {
  .brand-name { display: none; }
}
@media (max-width: 640px) {
  .navbtn .full { display: none; }
  .navbtn .short { display: inline; }
  .topbar nav { gap: 4px; }
  .navbtn { padding: 9px 11px; font-size: 13px; }
}
@media (max-width: 640px) { .navbtn.two .short { font-size: 10.5px; line-height: 1.05; text-align: center; } .navbtn.two { padding-top: 5px; padding-bottom: 5px; } }
@media (max-width: 380px) { .navbtn { padding: 8px 8px; font-size: 12px; } .navbtn.two { padding: 4px 8px; } .face { --size: 34px; } }

/* ---- Legal pieces (js/legal.js): dialogs, ownership disclosures, AI banner, billing terms ---- */
.legal-modal { position: fixed; inset: 0; z-index: 40; background: oklch(0 0 0 / 0.5); display: flex; align-items: center; justify-content: center; padding: 16px; animation: fade .25s var(--ease); }
.legal-modal .panel { width: 100%; max-width: 520px; max-height: 90dvh; overflow-y: auto; padding: 24px; border-radius: 26px; background: var(--glass-sheen), var(--glass-strong); animation: legal-pop .35s var(--spring); }
@keyframes legal-pop { from { opacity: 0; transform: scale(0.95) translateY(8px); } }
.legal-modal h3 { font: 700 20px/1.2 var(--display); margin: 0 0 12px; }
.legal-body { font-size: 14px; color: var(--muted); }
.legal-body p { margin: 0 0 10px; }
.legal-body .muted { font-size: 13px; }
.legal-check, .consent-check { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; line-height: 1.5; margin: 12px 0; cursor: pointer; color: var(--text); }
.legal-check input, .consent-check input { width: 18px; height: 18px; flex-shrink: 0; margin-top: 2px; accent-color: var(--accent); }
.legal-check a, .consent-check a, .legal-body a { color: var(--text); }
.legal-actions { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; margin-top: 8px; }
.disclosure { font-size: 12px; line-height: 1.45; color: var(--muted); margin: 8px 0 0; padding: 8px 12px; border-radius: var(--r-sm); background: var(--glass-fill); box-shadow: inset 0 0 0 1px var(--line); }
.ai-banner { font-size: 11.5px; line-height: 1.4; color: var(--muted); text-align: center; padding: 6px 16px 0; }
.billing-terms { font-size: 12px; line-height: 1.5; color: var(--muted); text-align: left; margin: 12px 0 0; padding: 10px 12px; border-radius: var(--r-sm); background: var(--glass-fill); box-shadow: inset 0 0 0 1px var(--line); }

/* ---- Corner chat on Mi programa (js/chatwidget.js) ---- */
.cw-fab { position: fixed; right: 18px; bottom: calc(18px + env(safe-area-inset-bottom)); z-index: 30; display: flex; align-items: center; gap: 8px; padding: 7px 16px 7px 7px; border: 0; border-radius: var(--r-pill); cursor: pointer;
  color: var(--text); font: 600 14px var(--sans); background: var(--glass-sheen), oklch(0.2 0.012 256 / 0.7); box-shadow: var(--glass-hi), inset 0 0 0 1px var(--glass-edge), 0 12px 32px oklch(0 0 0 / 0.45);
  backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); transition: transform .25s var(--spring), opacity .2s; }
.cw-fab:active { transform: scale(0.94); }
.cw.open .cw-fab { opacity: 0; transform: scale(0.8); pointer-events: none; }
.cw-panel { position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 31; width: min(400px, calc(100vw - 32px)); height: min(620px, calc(100dvh - 110px));
  display: flex; flex-direction: column; border-radius: 26px; overflow: hidden; border: 1px solid var(--glass-edge);
  background: var(--glass-sheen), oklch(0.15 0.01 256 / 0.82); box-shadow: var(--glass-hi), 0 30px 80px oklch(0 0 0 / 0.55);
  backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
  transform-origin: bottom right; transform: scale(0.9) translateY(12px); opacity: 0; visibility: hidden;
  transition: transform .4s var(--spring), opacity .2s var(--ease), visibility 0s .4s; }
.cw.open .cw-panel { transform: none; opacity: 1; visibility: visible; transition: transform .4s var(--spring), opacity .2s var(--ease); }
.cw-head { display: flex; align-items: center; gap: 10px; padding: 12px 12px 10px 14px; border-bottom: 1px solid var(--line); }
.cw-title { flex: 1; min-width: 0; font: 700 14px/1.2 var(--display); }
.cw-title b { color: var(--accent); }
.cw-title small { display: block; font: 500 11px var(--sans); color: var(--muted); margin-top: 2px; }
.cw-full { font-size: 12px; font-weight: 600; color: var(--muted); text-decoration: none; padding: 6px 10px; border-radius: var(--r-pill); background: var(--glass-fill); box-shadow: inset 0 0 0 1px var(--line); white-space: nowrap; }
.cw-full:hover { color: var(--text); }
.cw-x { width: 30px; height: 30px; border-radius: 50%; border: 0; background: var(--glass-fill); color: var(--muted); cursor: pointer; box-shadow: inset 0 0 0 1px var(--line); }
.cw-log { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 10px; overscroll-behavior: contain; }
.cw-row { display: flex; flex-direction: column; max-width: 88%; animation: rise .3s var(--ease) both; }
.cw-row.me { align-self: flex-end; }

.cw-bubble a { color: var(--accent); }

.cw-row .disclosure { font-size: 11px; }
@keyframes rise { from { opacity: 0; transform: translateY(6px); } }
.cw-note { margin: 0 12px 6px; }


.cw-input:focus { box-shadow: none; background: transparent; }

.cw-ai { font-size: 10.5px; line-height: 1.35; color: var(--muted); text-align: center; margin: 6px 14px calc(10px + env(safe-area-inset-bottom)); }
@media (max-width: 640px) {
  .cw-fab { right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); }
  .cw-panel { right: 8px; left: 8px; bottom: calc(8px + env(safe-area-inset-bottom)); width: auto; height: min(74dvh, 640px); }
}

.cw-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 12px 6px; }
.cw-chips:empty { display: none; }
.cw-chip { display: inline-flex; gap: 6px; align-items: center; max-width: 100%; font-size: 12px; padding: 4px 8px; border-radius: var(--r-pill); background: var(--glass-fill); box-shadow: inset 0 0 0 1px var(--line); }
.cw-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cw-chip button { background: none; border: 0; color: var(--muted); cursor: pointer; }
.cw-sup { font-size: 11px; font-weight: 600; color: oklch(0.82 0.08 230); margin-bottom: 3px; }

/* Signed consent window */
.legal-modal .panel.sign { max-width: 640px; }
.sg-reason { font-size: 14px; margin: 0 0 6px; }
.sg-hint { font-size: 12.5px; margin: 0 0 10px; }
.sg-doc { white-space: pre-wrap; font-size: 12.5px; line-height: 1.55; color: oklch(0.9 0.01 256); max-height: 34dvh; overflow-y: auto; padding: 14px; border-radius: var(--r-sm);
  background: oklch(0.08 0.005 256 / 0.6); box-shadow: inset 0 0 0 1px var(--line); overscroll-behavior: contain; }
.sg-scroll { font-size: 12px; color: var(--accent); margin: 6px 0 0; }
.sg-scroll.ok { color: var(--ok); }
.sg-row { display: grid; grid-template-columns: 1fr 120px; gap: 10px; }
.sg-pad { position: relative; height: 150px; border-radius: var(--r-sm); overflow: hidden; box-shadow: inset 0 0 0 1px var(--line-strong); }
.sg-pad canvas { width: 100%; height: 100%; display: block; touch-action: none; cursor: crosshair; background: #fff; }
.sg-line { position: absolute; left: 14px; right: 14px; bottom: 26px; border-top: 1px dashed #b5b5b5; padding-top: 4px; font-size: 11px; color: #8a8a8a; pointer-events: none; }
.sg-clear { position: absolute; top: 8px; right: 8px; font: 600 12px var(--sans); color: #333; background: #eee; border: 0; border-radius: 999px; padding: 5px 10px; cursor: pointer; }

/* Corner chat, iMessage style */
.cw-log { font: 15.5px/1.36 -apple-system, BlinkMacSystemFont, "SF Pro Text", var(--sans); gap: 8px; }
.cw-bubble { white-space: pre-wrap; overflow-wrap: anywhere; }
.cw-row.me .cw-bubble { padding: 7px 13px; border-radius: 19px 19px 5px 19px; background: #0a84ff; color: #fff; }
.cw-row.ai .cw-bubble { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; }
.cw-row.ai .cw-bubble .b { padding: 7px 13px; border-radius: 19px; background: #26252a; color: #fff; }
.cw-row.ai .cw-bubble .b:last-child { border-bottom-left-radius: 5px; }
.cw-row.ai .cw-bubble a { color: #64b5ff; }
.cw-row.sup .cw-bubble .b { background: oklch(0.55 0.13 230 / 0.55); }
.cw-row .typing { display: inline-flex; gap: 4px; padding: 12px 14px !important; }
.cw-row .typing i { width: 7px; height: 7px; border-radius: 50%; background: #8e8e93; animation: cw-dot 1.2s infinite ease-in-out; }
.cw-row .typing i:nth-child(2) { animation-delay: .15s; } .cw-row .typing i:nth-child(3) { animation-delay: .3s; }
@keyframes cw-dot { 0%, 60%, 100% { opacity: .35; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }
.cw-form { display: flex; gap: 8px; align-items: flex-end; margin: 0 10px; }
.cw-attach { width: 34px; height: 34px; flex-shrink: 0; margin-bottom: 1px; border: 0; border-radius: 50%; background: #2c2c2e; color: #c7c7cc; font: 400 22px/1 -apple-system, var(--sans); display: grid; place-items: center; cursor: pointer; }
.cw-pill { flex: 1; min-width: 0; display: flex; align-items: flex-end; border-radius: 19px; padding: 3px 3px 3px 13px; box-shadow: inset 0 0 0 1px oklch(1 0 0 / 0.22); background: oklch(0.1 0.005 256 / 0.5); }
.cw-input { flex: 1; min-width: 0; resize: none; border: 0; background: transparent; box-shadow: none; padding: 6px 0; max-height: 120px; font: 16px/1.3 -apple-system, BlinkMacSystemFont, "SF Pro Text", var(--sans); }
.cw-send { width: 30px; height: 30px; flex-shrink: 0; border: 0; border-radius: 50%; display: grid; place-items: center; background: #0a84ff; color: #fff; cursor: pointer; transition: transform .15s var(--spring); }
.cw-send:disabled { background: #3a3a3c; cursor: default; }
.cw-send:not(:disabled):active { transform: scale(.88); }

/* ---- Daily messages + credits (js/credits.js) ---- */
.cr { font-size: 12px; color: var(--muted); padding: 2px 6px 8px; }
.cr-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.cr-row b { color: var(--text); font-weight: 600; }
.cr-add { background: none; border: 0; color: #0a84ff; font: 600 12px var(--sans); cursor: pointer; padding: 0; white-space: nowrap; }
.cr-bar { height: 3px; border-radius: 3px; background: oklch(1 0 0 / 0.1); margin-top: 6px; overflow: hidden; }
.cr-bar i { display: block; height: 100%; background: #0a84ff; border-radius: 3px; transition: width .4s var(--ease); }
.cr-bar i.warn { background: var(--accent); }
.cr-bar i.full { background: var(--danger); }
.legal-modal .panel.cr-modal { max-width: 640px; }
.cr-packs { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin: 14px 0; }
.cr-pack { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 18px 10px 14px; border: 0; border-radius: var(--r-md); cursor: pointer; color: var(--text);
  background: var(--glass-sheen), var(--glass-fill); box-shadow: inset 0 0 0 1px var(--line); transition: transform .18s var(--spring), box-shadow .2s; font-family: var(--sans); }
.cr-pack:hover { box-shadow: inset 0 0 0 1px oklch(0.64 0.2 256 / 0.6); }
.cr-pack:active { transform: scale(.97); }
.cr-pack b { font: 700 26px/1 var(--display); }
.cr-pack span { font-size: 12px; color: var(--muted); }
.cr-pack strong { font: 700 17px var(--sans); margin-top: 8px; color: var(--accent); }
.cr-pack small { font-size: 11px; color: var(--muted); text-align: center; }
.cr-pack.best, .cr-pack.popular { box-shadow: inset 0 0 0 1.5px var(--accent); }
.cr-tag { position: absolute; top: -9px; font: 700 10px var(--sans); letter-spacing: .04em; text-transform: uppercase; padding: 3px 8px; border-radius: 999px; background: var(--metal); color: #fff; }
.cr-terms { font-size: 11.5px; }
.cr-toast { position: fixed; left: 50%; bottom: 110px; transform: translateX(-50%); z-index: 50; padding: 10px 16px; border-radius: 999px; font-size: 14px; color: #fff; background: oklch(0.2 0.01 256 / 0.92); box-shadow: 0 10px 30px oklch(0 0 0 / 0.45); animation: fade .3s var(--ease); }
.limit-cta { margin-top: 6px; }
.cr-sub { font-size: 12px; color: var(--muted); margin-top: 6px; }
.cr-sub b { color: var(--text); }
.cr-levels { display: flex; flex-direction: column; gap: 8px; margin: 14px 0; }
.cr-level { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "lv buy" "who buy"; gap: 2px 14px; align-items: center; text-align: left; padding: 14px 16px; border: 0; border-radius: var(--r-md); cursor: pointer; color: var(--text); font-family: var(--sans);
  background: var(--glass-sheen), var(--glass-fill); box-shadow: inset 0 0 0 1px var(--line); transition: transform .18s var(--spring), box-shadow .2s; }
.cr-level:hover { box-shadow: inset 0 0 0 1px oklch(0.64 0.2 256 / 0.6); }
.cr-level:active { transform: scale(.985); }
.cr-level.best, .cr-level.popular { box-shadow: inset 0 0 0 1.5px var(--accent); }
.cr-lv { grid-area: lv; font: 700 16px var(--display); }
.cr-lv i { font: 700 10px var(--sans); font-style: normal; letter-spacing: .04em; text-transform: uppercase; padding: 3px 8px; border-radius: 999px; background: var(--metal); color: #fff; margin-left: 6px; vertical-align: 2px; }
.cr-who { grid-area: who; font-size: 13px; color: var(--muted); }
.cr-buy { grid-area: buy; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; white-space: nowrap; }
.cr-buy b { font-size: 13px; font-weight: 600; }
.cr-buy strong { font: 700 18px var(--sans); color: var(--accent); }
.cr-buy small { font-size: 11px; color: var(--muted); }
/* One-tap top-up: the "save as my quick top-up" option, the saved one in Mi cuenta, and the "¿Agregar más créditos?" window. */
.cr-save { display: flex; gap: 10px; align-items: flex-start; margin: 12px 0 4px; padding: 12px 14px; border-radius: var(--r-md); background: var(--glass-sheen), var(--glass-fill); box-shadow: inset 0 0 0 1px var(--line); font-size: 13px; line-height: 1.45; color: var(--muted); cursor: pointer; }
.cr-save input { margin-top: 2px; accent-color: var(--accent); flex-shrink: 0; width: 18px; height: 18px; }
.cr-save b { color: var(--text); }
.cr-quick { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 14px 16px; margin-bottom: 12px; border-radius: var(--r-md); box-shadow: inset 0 0 0 1.5px var(--accent); }
.cr-quick > div { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 160px; }
.cr-quick small { color: var(--muted); font-size: 12px; }
.cr-quick select { width: auto; padding: 8px 10px; font-size: 13px; }
.cr-qmodal { max-width: 420px !important; text-align: center; }
.cr-qbox { display: flex; flex-direction: column; align-items: center; gap: 4px; margin: 14px 0 6px; padding: 18px; border-radius: var(--r-lg); box-shadow: inset 0 0 0 1.5px var(--accent); }
.cr-qbox b { font: 700 22px var(--display); }
.cr-qbox strong { font: 700 28px var(--display); color: var(--accent); }
.cr-qbox small { color: var(--muted); font-size: 12.5px; }
.cr-qmodal .legal-actions { justify-content: center; }
.cr-other { display: block; margin: 10px auto 0; }
@media (max-width: 480px) { .cr-level { grid-template-columns: 1fr; grid-template-areas: "lv" "who" "buy"; } .cr-buy { flex-direction: row; align-items: baseline; gap: 10px; margin-top: 6px; } }

/* Header "Chat" pill: logo + name + Chat, starts a new conversation */
.chat-pill { padding: 4px 14px 4px 4px; border-radius: var(--r-pill); background: var(--glass-sheen), var(--glass-fill); box-shadow: var(--glass-hi), inset 0 0 0 1px var(--line); transition: transform .18s var(--spring), background .2s; }
.chat-pill:hover { background: var(--glass-sheen), oklch(0.98 0.01 256 / 0.12); }
.chat-pill:active { transform: scale(.96); }
.chat-pill .chat-label { font: 600 13px var(--sans); color: var(--text); padding-left: 8px; margin-left: 2px; border-left: 1px solid var(--line-strong); }
@media (max-width: 860px) { .chat-pill .chat-label { border-left: 0; padding-left: 2px; } }
@media (max-width: 640px) { .chat-pill { padding: 3px 12px 3px 3px; } .chat-pill .chat-label { font-size: 13px; } }
/* Historial button under the chat box */
.under-box { display: flex; align-items: center; gap: 10px; padding: 8px 4px 0; }
.hist-btn { display: inline-flex; align-items: center; gap: 7px; color: var(--text); font: 600 13px var(--sans); cursor: pointer; padding: 8px 14px; border: 0; border-radius: var(--r-pill);
  background: var(--glass-sheen), var(--glass-fill); box-shadow: var(--glass-hi), inset 0 0 0 1px var(--line-strong); transition: transform .18s var(--spring), background .2s; }
.hist-btn:hover { background: var(--glass-sheen), oklch(0.98 0.01 256 / 0.12); }
.hist-btn:active { transform: scale(.95); }

/* Guided workout (Mi programa → Entrenamiento → Empezar entrenamiento) */
body.wo-open { overflow: hidden; }
.wo { position: fixed; inset: 0; z-index: 60; background: var(--bg); overflow-y: auto; padding: max(14px, env(safe-area-inset-top)) 16px max(20px, env(safe-area-inset-bottom)); }
.wo-top { display: flex; align-items: center; gap: 10px; max-width: 520px; margin: 0 auto 10px; }
.wo-top .label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wo-clock { font: 600 14px var(--sans); font-variant-numeric: tabular-nums; color: var(--muted); }
.wo-x { border: 0; background: none; color: var(--muted); font: 600 14px var(--sans); cursor: pointer; padding: 8px; }
.wo-back { border: 0; background: none; color: var(--accent); font: 600 15px var(--sans); cursor: pointer; padding: 8px 8px 8px 0; flex-shrink: 0; }
/* The menu bar stays visible over the workout (tapping a section pauses it). */
body.wo-open .tabbar { z-index: 70; }
body.wo-open.has-tabbar .wo { padding-bottom: calc(var(--tabbar-space) + 20px); }
.wo-paused { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; border-color: var(--accent); }
.wo-paused .grow { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 150px; }
.wo-body { max-width: 520px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; }
.wo-progress { font-size: 12px; color: var(--muted); text-align: center; }
/* Gabriel's exercise clips: silent loops (workout mode), and the next exercise at the bottom. */
.wo-photo.wo-clip { background: #000; }
.wo-clip video, .wo-clip img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; animation: none !important; }
.wo-upnext, .wo-coming { display: flex; align-items: center; gap: 12px; width: 100%; margin-top: 8px; padding: 10px; border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--glass-sheen), var(--glass-fill); color: inherit; font: inherit; text-align: left; }
button.wo-upnext { cursor: pointer; }
button.wo-upnext:active { transform: scale(.99); }
.wo-upnext .wo-photo.small, .wo-coming .wo-photo.small { width: 72px; flex-shrink: 0; }
.wo-upnext > div, .wo-coming > div:last-child { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.wo-upnext b, .wo-coming b { font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wo-upnext .muted, .wo-coming .muted { font-size: 12.5px; }
.wo-upnext.wo-last { flex-direction: column; align-items: flex-start; gap: 2px; }
.wo-chev { font-size: 22px; color: var(--muted); padding: 0 4px; }
.wo-coming { margin-top: 4px; border-color: var(--accent); }
.wo-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.wo-chips span { padding: 6px 12px; border-radius: var(--r-pill); background: var(--glass-sheen), var(--glass-fill); box-shadow: inset 0 0 0 1px var(--line); font-size: 13.5px; color: var(--muted); }
.wo-chips b { color: var(--text); font-weight: 700; }
.wo-log { border: 1px solid var(--line); border-radius: var(--r-md); padding: 0 12px; }
.wo-log summary { cursor: pointer; padding: 11px 0; font-size: 13.5px; color: var(--muted); text-align: center; }
.wo-log .wo-inputs { padding-bottom: 12px; }
.wo-alt { color: var(--muted); font-size: 13px; text-align: center; }
.wo-alt summary { cursor: pointer; padding: 4px 0; }
.wo-none { display: grid; place-items: center; background: var(--glass-sheen), var(--glass-fill) !important; }
.wo-none > span { font-size: 40px; opacity: .5; }
.wo-none.small > span { font-size: 22px; }
.wo-none img { display: none; }
/* A panel over the workout: an upcoming exercise up close, or the whole day. */
.wo-sheet { position: fixed; inset: 0; z-index: 61; background: var(--bg); overflow-y: auto; padding: max(14px, env(safe-area-inset-top)) 16px max(20px, env(safe-area-inset-bottom)); animation: wo-up .22s ease-out; }
@keyframes wo-up { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
.wo-sheet-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.wo-total { margin: 0; font-size: 13.5px; }
.wo-list { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.wo-li { display: flex; align-items: center; gap: 12px; width: 100%; padding: 8px; border: 1px solid var(--line); border-radius: var(--r-md); background: none; color: inherit; font: inherit; text-align: left; }
button.wo-li { cursor: pointer; }
.wo-li .wo-photo.small { width: 84px; flex-shrink: 0; }
.wo-li .grow { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.wo-li b { font-size: 14.5px; }
.wo-li span { font-size: 12.5px; color: var(--muted); }
.wo-li em { font-style: normal; font-size: 12px; color: var(--accent); font-weight: 600; }
.wo-list li.cur .wo-li { border-color: var(--accent); }
.wo-list li.ok .wo-li { opacity: .6; }
.wo-list li.ok em { color: var(--ok); }
/* Every demo is a square (the clips are framed square on the person: tools/square_loops.py). */
.wo-photo { position: relative; aspect-ratio: 1 / 1; width: 100%; max-width: 420px; margin: 0 auto; border-radius: var(--r-md); overflow: hidden; background: #fff; }
.wo-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.wo-photo img:last-child { animation: wo-fade 1.8s ease-in-out infinite alternate; }
.wo-photo.small { width: 72px; aspect-ratio: 1 / 1; margin: 0; border-radius: var(--r-sm); }
.wo-generic { position: absolute; left: 8px; bottom: 8px; padding: 4px 9px; border-radius: var(--r-pill); background: oklch(0 0 0 / 0.6); color: #fff; font: 600 11.5px var(--sans); }
@keyframes wo-fade { 0%, 35% { opacity: 0; } 65%, 100% { opacity: 1; } }
.wo-name { font: 700 24px/1.15 var(--display); margin: 2px 0 0; text-align: center; }
.wo-target { text-align: center; margin: 0; font-size: 16px; }
.wo-prev { text-align: center; margin: 0; font-size: 13px; }
.wo-inputs { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.wo-inputs label { display: flex; flex-direction: column; gap: 6px; }
.wo-inputs input { font: 700 28px var(--sans); text-align: center; padding: 14px 8px; font-variant-numeric: tabular-nums; }
.wo-main { width: 100%; padding: 18px; font-size: 17px; text-align: center; text-decoration: none; }
.wo-links { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 13px; }
.wo-links button { border: 0; background: none; color: var(--muted); font: 600 13px var(--sans); cursor: pointer; padding: 8px 0; }
.wo-links details { color: var(--muted); text-align: center; flex: 1; }
.wo-links summary { cursor: pointer; padding: 8px 0; }
.wo-rest { align-items: center; text-align: center; padding-top: 8px; }
.wo-ring { --p: 1; width: 220px; height: 220px; border-radius: 50%; display: grid; place-items: center;
  background: conic-gradient(var(--accent) calc(var(--p) * 360deg), oklch(0.3 0.01 256 / 0.5) 0); position: relative; }
.wo-ring::before { content: ""; position: absolute; inset: 10px; border-radius: 50%; background: var(--bg); }
.wo-ring b { position: relative; font: 700 56px var(--display); font-variant-numeric: tabular-nums; }
.wo-rest-btns { display: flex; gap: 10px; }
.wo-next { display: flex; flex-direction: column; align-items: center; gap: 6px; margin-top: 6px; }
.wo-sum .sub { font-variant-numeric: tabular-nums; }
.wo-start-day { width: 100%; margin: 10px 0 6px; }

/* Coach notifications invite (chat) */
.push-invite { display: flex; gap: 12px; align-items: flex-start; justify-content: space-between; padding: 12px 14px; margin: 8px auto; max-width: 680px;
  border-radius: var(--r-md); background: var(--panel); border: 1px solid var(--glass-edge); font-size: 13px; }
.push-invite p { margin: 4px 0 0; color: var(--muted); }
.push-invite .push-actions { display: flex; gap: 6px; align-items: center; }
.push-invite .btn { padding: 9px 14px; font-size: 13px; }
.push-invite .x { border: 0; background: none; color: var(--muted); cursor: pointer; font-size: 15px; padding: 6px; }
.wo .grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.wo .stat { padding: 12px 10px; text-align: center; }
.wo .stat b { font-size: 22px; }
.push-card { margin-top: 8px; padding: 14px 16px; border-radius: var(--r-md); background: var(--panel); border: 1px solid var(--glass-edge); font-size: 14px; max-width: 420px; }
.push-card p, .push-card ol { margin: 6px 0 0; color: var(--muted); line-height: 1.5; }
.push-card ol { padding-left: 20px; }
.push-card li + li { margin-top: 4px; }
.push-card b { color: var(--text); }
.push-card .btn { margin-top: 12px; padding: 11px 18px; font-size: 14px; }

/* Estimated insulin sensitivity (Mi programa → Análisis) */
.isens { padding: 16px; border-radius: var(--r-md); background: var(--glass-sheen, none), var(--glass-fill, var(--panel)); box-shadow: inset 0 0 0 1px var(--line); }
.isens-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-size: 14px; }
.isens-head .muted { font-size: 12px; }
.isens-level { font: 700 30px/1.1 var(--display); margin: 10px 0 12px; }
.isens .lv0 { color: oklch(0.7 0.17 256); } .isens .lv1 { color: oklch(0.76 0.15 55); }
.isens .lv2 { color: oklch(0.85 0.14 90); } .isens .lv3 { color: oklch(0.8 0.13 140); } .isens .lv4 { color: var(--ok); }
.isens-bar { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; margin-bottom: 14px; }
.isens-bar i { height: 8px; border-radius: 999px; background: oklch(0.4 0.01 256 / 0.5); position: relative; font-style: normal; }
.isens-bar i.on { background: currentColor; }
.isens-bar i span { position: absolute; top: 12px; left: 0; right: 0; text-align: center; font-size: 10px; color: var(--muted); white-space: nowrap; }
.isens-bar i.on span { color: var(--text); font-weight: 600; }
.isens-bar { padding-bottom: 18px; }
.isens-factors .item { padding: 8px 0; }
.isens-dot { font-size: 12px; white-space: nowrap; padding: 3px 9px; border-radius: 999px; background: oklch(0.4 0.01 256 / 0.4); }
.isens-dot.s0 { background: oklch(0.55 0.17 256 / 0.35); } .isens-dot.s1 { background: oklch(0.65 0.15 55 / 0.35); }
.isens-dot.s3, .isens-dot.s4 { background: oklch(0.65 0.13 150 / 0.35); }
.isens-trend, .isens-note { font-size: 12px; margin: 10px 0 0; }
.isens .chipbtn { margin-top: 10px; }
@media (max-width: 420px) { .isens-bar i span { font-size: 8.5px; } }

/* Navigation: slim top bar (logo · title · avatar) + floating glass tab bar at the bottom */
.topbar-slim { justify-content: space-between; padding: 6px 8px; }
.topbar-slim .face { --size: 34px; }
.top-title { flex: 1; text-align: center; font: 650 16px/1 var(--display); letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.profile-btn { height: 34px; padding: 0 14px; flex-shrink: 0; border-radius: var(--r-pill); display: grid; place-items: center; text-decoration: none; color: var(--text);
  font: 600 13px var(--sans); background: var(--glass-sheen), var(--glass-fill); box-shadow: var(--glass-hi), inset 0 0 0 1px var(--line); transition: transform .18s var(--spring); }
.profile-btn:active { transform: scale(.94); }
.profile-btn.back { color: var(--accent); white-space: nowrap; }
.profile-btn.on { color: var(--accent); box-shadow: var(--glass-hi), inset 0 0 0 1px oklch(0.64 0.2 256 / 0.5); }
.tabbar { position: fixed; z-index: 40; left: 50%; transform: translateX(-50%); bottom: max(10px, calc(env(safe-area-inset-bottom) - 8px));
  width: min(440px, calc(100% - 24px)); display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; padding: 5px;
  border-radius: var(--r-pill); background: var(--glass-sheen), oklch(0.16 0.01 256 / 0.62); border: 1px solid var(--glass-edge);
  box-shadow: var(--glass-hi), 0 10px 30px oklch(0 0 0 / 0.45); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); }
.tabbar a { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 7px 4px 6px; border-radius: var(--r-pill); text-decoration: none;
  color: var(--muted); font: 600 11px/1 var(--sans); transition: background .25s var(--ease), color .2s, transform .18s var(--spring); }
.tabbar a:active { transform: scale(.94); }
.tabbar a span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10.5px; }
.tabbar a.on { color: var(--accent); background: var(--glass-sheen), oklch(0.98 0.01 256 / 0.12); box-shadow: inset 0 1px 0 oklch(1 0 0 / 0.16); }
body.has-tabbar { --tabbar-space: calc(70px + max(10px, calc(env(safe-area-inset-bottom) - 8px))); }
body.has-tabbar .wrap { padding-bottom: calc(var(--tabbar-space) + 24px) !important; }
body.kb-open .tabbar { display: none; }
/* Free trial: the sections are there but locked until they activate their plan. */
.tabbar.locked .tab { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 7px 4px 6px; color: var(--muted); font: 600 11px/1 var(--sans); opacity: .45; cursor: default; user-select: none; }
.tabbar.locked .tab > span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10.5px; }
.tabbar.locked .tab-lock { position: absolute; top: 4px; right: calc(50% - 19px); }
html.appstore .tabbar { grid-template-columns: repeat(3, 1fr); } /* App Store version: no Optimización tab (js/appstore.js) */
/* Keep the page title centered between the logo and the wider Perfil button. */
.topbar-slim { display: grid; grid-template-columns: 1fr auto 1fr; }
.topbar-slim .brand { justify-self: start; }
.topbar-slim .top-title { flex: none; }
.topbar-slim .profile-btn { justify-self: end; }

/* ---- Gold text: filled with the metallic gold instead of a flat yellow (impactprotocol.com style). Only plain
   text gets it; things with their own background (tags, pills) and icons keep the solid gold. */
.label b, .accent:not(.btn), .brand-name span, .cw-title b, .cr-pack strong, .cr-buy strong, .sg-scroll, .drawer-foot,
.hero .kicker, .hero h1 span, .offer .tag, .fsec .kicker, .fsec h2 span, .stat b, .home-hero h1 span, .sec-h h2 span, .vs th.us,
.group-title, .opt small, .wd.today b, .meta .kind, .req::after, .metal {
  background: var(--metal); -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
}
.home-hero h1 span { text-shadow: none; filter: drop-shadow(0 0 22px oklch(0.64 0.2 256 / 0.35)); }

/* Plans (js/tiers.js): the "Mi plan y Progreso" unlock card and the cancel-flow dialogs. */
.tiers-up { max-width: 560px; margin: 0 auto; display: grid; gap: 12px; }
.tiers-up h2 { margin: 0; font-size: 22px; line-height: 1.25; }
.tiers-up .muted { margin: 0; }
.tiers-up ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.tiers-up li { position: relative; padding-left: 24px; font-size: 14px; }
.tiers-up li::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--accent); font-weight: 700; }
.tiers-up .price { font: 700 30px/1 var(--sans); }
.tiers-up .price small { font-size: 14px; font-weight: 500; color: var(--muted); }
.tiers-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }
.tiers-actions .btn { width: 100%; }
.tiers-clock { font-size: 15px; }
.tiers-clock b { font-variant-numeric: tabular-nums; color: var(--accent); }

/* Main call to action + "Ya eres cliente?" next to it (stacks on narrow screens). */
.cta-row { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; align-items: center; }
.cta-row > .btn { flex: 0 1 auto; }
.cta-row.stack { flex-direction: column; align-items: stretch; }

/* Top bar: the chat button (Gabriel's face + "Chat") */
.topbar .brand.chat-pill { display: inline-flex; align-items: center; gap: 8px; padding: 4px 14px 4px 4px; border-radius: var(--r-pill); text-decoration: none; color: var(--text);
  background: var(--glass-sheen), oklch(0.98 0.01 256 / 0.08); box-shadow: inset 0 0 0 1px var(--line-strong); font: 650 14px var(--sans); }
.topbar .brand.chat-pill .face { width: 32px; height: 32px; }
.topbar .brand.chat-pill.on { box-shadow: inset 0 0 0 1.5px var(--accent); }
.topbar .brand.chat-pill:active { transform: scale(.96); }
/* The top-left button: Comunidad (people icon); on the Comunidad page, "‹ Chat" glowing like the tab bar's Chat. */
.topbar .brand.cm-pill, .topbar .brand.cm-back { height: 36px; padding: 0 14px 0 10px; gap: 6px; font: 600 13px var(--sans); }
.topbar .brand.cm-pill svg { color: var(--accent); }
.topbar .brand.cm-back { color: #fff; background: oklch(0.64 0.2 256 / 0.32); animation: back-chat-glow 2.4s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .topbar .brand.cm-back { animation: none; } }

/* "Pregúntale a Gabriel IA" buttons: Gabriel's face first */
.ask-ga { display: inline-flex; align-items: center; gap: 7px; }
.ask-ga .ask-face { width: 20px; height: 20px; border-radius: 50%; object-fit: cover; flex-shrink: 0; box-shadow: 0 0 0 1px oklch(1 0 0 / 0.25); }
.card h2 button.ask-ga { display: inline-flex; }

/* Manual editing */
.edit-btn { background: none; border: 0; color: var(--muted); cursor: pointer; font: 600 13px var(--sans); padding: 6px 8px; border-radius: 8px; flex-shrink: 0; }
.edit-btn:hover { color: var(--text); background: var(--glass-fill); }
.group-title .edit-btn { float: right; margin-top: -4px; }
.stat .stat-in { font: 700 20px/1.1 var(--display); padding: 6px 8px; margin: 4px 0 2px; width: 100%; }
.mp-opt { padding: 10px; margin-bottom: 8px; display: grid; gap: 6px; } .mp-opt input { padding: 9px 8px; font-size: 14px; min-width: 0; } .mp-opt .grid4 { gap: 6px; }
.mp-opt [data-rm] { justify-self: start; padding: 5px 10px; font-size: 12px; }
.sum-h { cursor: pointer; font: 650 16px var(--sans); }

/* Mi cuenta → Idioma: the chosen language */
.lang-pick .chipbtn.on { background: var(--accent); border-color: var(--accent); color: #fff; }

/* Workout: the stretch steps, the warm-up/stretch timer, and alternatives with their preview (tap to swap) */
.wo-steps { margin: 0; padding: 14px 16px 14px 34px; border-radius: var(--r-md); background: var(--glass-sheen), var(--glass-fill); box-shadow: inset 0 0 0 1px var(--line); display: flex; flex-direction: column; gap: 8px; font-size: 14.5px; line-height: 1.45; }
.wo-tring { width: 170px; height: 170px; align-self: center; }
.wo-tring b { font-size: 44px; }
/* "¿Máquina ocupada? Ver alternativas": right under the exercise name, so it's found without looking for it. */
.wo-swap { align-self: center; display: inline-flex; align-items: center; gap: 8px; margin: -2px auto 2px; padding: 9px 16px; border: 0; border-radius: var(--r-pill); cursor: pointer;
  background: oklch(0.64 0.2 256 / 0.16); box-shadow: inset 0 0 0 1px oklch(0.64 0.2 256 / 0.55); color: var(--text); font: 600 14px var(--sans); }
.wo-swap b { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; background: var(--accent); color: #fff; font-size: 12px; }
.wo-swap:active { transform: scale(.98); }
.wo-coming + .wo-swap { margin-top: 10px; }
.wo-alts { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; text-align: left; }
.wo-altbtn { display: flex; align-items: center; gap: 12px; width: 100%; padding: 8px; border: 1px solid var(--line); border-radius: var(--r-md); background: none; color: var(--text); font: inherit; cursor: pointer; }
.wo-altbtn .wo-photo.small { width: 84px; flex-shrink: 0; }
.wo-altbtn span { flex: 1; font-size: 14.5px; font-weight: 600; text-align: left; }
.wo-altbtn em { font-style: normal; font-size: 12px; color: var(--accent); font-weight: 600; }
.wo-altbtn:active { transform: scale(.99); }

/* Paying in the page: Stripe's card form in a panel over the app */
.pay-modal { z-index: 90; }
.pay-panel { position: relative; width: 100%; max-width: 520px; max-height: 92dvh; overflow-y: auto; padding: 34px 10px 14px; border-radius: 22px; background: #fff; }
.pay-x { position: absolute; top: 8px; right: 10px; width: 34px; height: 34px; border-radius: 50%; border: 0; background: #eee; color: #333; font-size: 15px; cursor: pointer; z-index: 2; }

.gs-fx { font-style: normal; font-size: .62em; font-weight: 500; color: var(--muted); }

/* Tab bar: the section you are in becomes "Chat" (back to the chat) */
.tabbar a.back-chat { color: #fff; position: relative; background: oklch(0.64 0.2 256 / 0.32);
  box-shadow: inset 0 0 0 1px oklch(0.72 0.18 256 / 0.75), 0 0 14px oklch(0.64 0.2 256 / 0.55); animation: back-chat-glow 2.4s ease-in-out infinite; }
.tabbar a.back-chat svg { filter: drop-shadow(0 0 6px oklch(0.75 0.18 256 / 0.9)); }
@keyframes back-chat-glow {
  0%, 100% { box-shadow: inset 0 0 0 1px oklch(0.72 0.18 256 / 0.6), 0 0 10px oklch(0.64 0.2 256 / 0.35); }
  50% { box-shadow: inset 0 0 0 1px oklch(0.8 0.16 256 / 0.95), 0 0 22px oklch(0.64 0.2 256 / 0.75); }
}
@media (prefers-reduced-motion: reduce) { .tabbar a.back-chat { animation: none; } }

/* A reply that didn't finish loading (they left the app mid-reply): a note and a refresh button (app.html reloadBubble). */
.reload-note { display: block; color: var(--muted); font-size: 14px; margin-bottom: 8px; }
.reload-reply { font-weight: 600; }

/* ---- Loading screen (js/common.js GALoading): the page blurs and the gold coin turns on its edge (CSS 3D), like the
   iPhone app's CoinLoader. The coin is two faces plus seven gold discs in between, so its edge shows as it turns. ---- */
.ga-load { position: fixed; inset: 0; z-index: 2000; display: grid; place-items: center; padding: 24px;
  background: oklch(0.12 0.01 256 / 0.45); backdrop-filter: blur(14px) saturate(120%); -webkit-backdrop-filter: blur(14px) saturate(120%);
  animation: ga-load-in .2s ease-out; }
.ga-load[hidden] { display: none; }
@keyframes ga-load-in { from { opacity: 0; } to { opacity: 1; } }
.ga-load-card { display: flex; flex-direction: column; align-items: center; gap: 18px; text-align: center; }
.ga-coin { --s: 112px; width: var(--s); height: var(--s); perspective: 700px; }
.ga-coin-in { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; animation: ga-coin 1.6s linear infinite; }
.ga-coin-in img, .ga-coin-in i { position: absolute; display: block; border-radius: 50%; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.ga-coin-in img { inset: 0; width: 100%; height: 100%; }
.ga-coin-in img.f { transform: translateZ(4.5px); }
.ga-coin-in img.b { transform: rotateY(180deg) translateZ(4.5px); }
.ga-coin-in i { inset: 4.5%; background: linear-gradient(180deg, #C4943A, #7A5A1C 55%, #5E4513); backface-visibility: visible; -webkit-backface-visibility: visible; }
.ga-coin-in i:nth-child(1) { transform: translateZ(-3.6px); } .ga-coin-in i:nth-child(2) { transform: translateZ(-2.4px); }
.ga-coin-in i:nth-child(3) { transform: translateZ(-1.2px); } .ga-coin-in i:nth-child(4) { transform: translateZ(0); }
.ga-coin-in i:nth-child(5) { transform: translateZ(1.2px); } .ga-coin-in i:nth-child(6) { transform: translateZ(2.4px); }
.ga-coin-in i:nth-child(7) { transform: translateZ(3.6px); }
@keyframes ga-coin { from { transform: rotateY(0deg); } to { transform: rotateY(360deg); } }
.ga-load-text { margin: 0; font: 600 15px var(--sans); color: var(--text); }
.ga-load.failed .ga-coin-in { animation: none; }
@media (prefers-reduced-motion: reduce) { .ga-coin-in { animation-duration: 3.2s; } }