/* Zenviora · app del cliente
   Diseño monocromo: blanco, negro y grises. Tipografía Quicksand. El rojo solo aparece en mensajes de error. */

@font-face {
  font-family: "Quicksand";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("/fonts/quicksand-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Quicksand";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("/fonts/quicksand-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --bg: #ffffff;
  --surface: #ffffff;
  --surface-2: #f4f4f4;
  --ink: #0a0a0a;
  --ink-2: #2e2e2e;
  --muted: #737373;
  --line: #ebebeb;
  --line-strong: #d6d6d6;
  --accent: #0a0a0a;
  --accent-ink: #ffffff;
  --accent-soft: #f4f4f4;
  --danger: #b42318;
  --danger-soft: #fdf2f1;
  --warn: #0a0a0a;
  --warn-soft: #f4f4f4;
  --focus: #0a0a0a;

  --font: "Quicksand", ui-rounded, "SF Pro Rounded", -apple-system, "Segoe UI", sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --fw-body: 500;
  --r: 20px;
  --r-sm: 14px;
  --r-pill: 999px;
  --nav-h: 64px;
  --side-w: 240px;
  color-scheme: light;
}

/* Tema: automático (el del teléfono o computador), oscuro o claro, según elija la persona en Cuenta → Apariencia. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0a0a0a;
    --surface: #111111;
    --surface-2: #1a1a1a;
    --ink: #fafafa;
    --ink-2: #d4d4d4;
    --muted: #8f8f8f;
    --line: #222222;
    --line-strong: #333333;
    --accent: #fafafa;
    --accent-ink: #0a0a0a;
    --accent-soft: #1a1a1a;
    --danger: #f97066;
    --danger-soft: #2a1513;
    --warn: #fafafa;
    --warn-soft: #1a1a1a;
    --focus: #fafafa;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
    --bg: #0a0a0a;
    --surface: #111111;
    --surface-2: #1a1a1a;
    --ink: #fafafa;
    --ink-2: #d4d4d4;
    --muted: #8f8f8f;
    --line: #222222;
    --line-strong: #333333;
    --accent: #fafafa;
    --accent-ink: #0a0a0a;
    --accent-soft: #1a1a1a;
    --danger: #f97066;
    --danger-soft: #2a1513;
    --warn: #fafafa;
    --warn-soft: #1a1a1a;
    --focus: #fafafa;
    color-scheme: dark;
}
/* Cambio de tema: transición de 3,5 s entre negro y blanco. */
html.theme-anim, html.theme-anim *, html.theme-anim *::before, html.theme-anim *::after {
  transition: background-color 3.5s ease, color 3.5s ease, border-color 3.5s ease, fill 3.5s ease, stroke 3.5s ease, box-shadow 3.5s ease !important;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
/* App en el celular: sin zoom (ni doble toque ni pellizco) y sin rebote lateral. */
/* overflow-x: clip no vuelve a «html» un contenedor de scroll: en iPhone, con «hidden», la barra fija de abajo se movía al hacer scroll. */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; touch-action: manipulation; overflow-x: hidden; overflow-x: clip; }
body { overscroll-behavior-y: none; -webkit-tap-highlight-color: transparent; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 15px;
  font-weight: var(--fw-body);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  min-height: 100dvh;
}
h1, h2, h3, p { margin: 0; }
h1 { font-size: 28px; font-weight: 700; letter-spacing: -0.025em; line-height: 1.2; }
h2 { font-size: 18px; font-weight: 700; letter-spacing: -0.015em; line-height: 1.3; }
h3 { font-size: 15px; font-weight: 700; }
b, strong { font-weight: 700; }
a { color: inherit; text-underline-offset: 3px; text-decoration-thickness: 1px; }
button, input, select, textarea { font: inherit; color: inherit; }
::selection { background: var(--ink); color: var(--bg); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.num { font-variant-numeric: tabular-nums; }
.muted { color: var(--muted); }
.small { font-size: 13px; }
.hidden, [hidden] { display: none !important; }
.mt { margin-top: 12px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ── estructura ── */
.shell { min-height: 100dvh; }
.topbar {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; justify-content: space-between;
  height: 60px; padding: 0 20px;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: saturate(1.4) blur(12px);
}
.wordmark { font-size: 21px; font-weight: 700; letter-spacing: -0.04em; color: var(--ink); text-decoration: none; text-transform: lowercase; }
.main { padding: 16px 20px calc(var(--nav-h) + 32px); max-width: 760px; margin: 0 auto; }

.nav {
  position: fixed; left: 12px; right: 12px; bottom: calc(10px + env(safe-area-inset-bottom)); z-index: 10;
  display: grid; grid-template-columns: repeat(6, 1fr);
  height: var(--nav-h); padding: 6px;
  background: var(--ink); border-radius: var(--r-pill);
}
.nav a {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  font-size: 10.5px; font-weight: 600; color: color-mix(in srgb, var(--bg) 55%, transparent); text-decoration: none; border-radius: var(--r-pill);
}
.nav a svg.i { width: 21px; height: 21px; }
.nav a[aria-current="page"] { color: var(--ink); background: var(--bg); }
.nav .acct { display: none; }

@media (min-width: 900px) {
  .topbar { display: none; }
  .nav {
    left: 0; right: auto; top: 0; bottom: 0; width: var(--side-w); height: auto; border-radius: 0;
    display: flex; flex-direction: column; gap: 4px;
    padding: 28px 16px; background: var(--bg); border-right: 1px solid var(--line);
  }
  .nav::before {
    content: "zenviora"; display: block; padding: 0 14px 32px;
    font-size: 22px; font-weight: 700; letter-spacing: -0.04em; color: var(--ink);
  }
  .nav a {
    flex-direction: row; justify-content: flex-start; gap: 12px;
    padding: 11px 14px; font-size: 14.5px; color: var(--muted);
  }
  .nav a:hover { color: var(--ink); background: var(--surface-2); }
  .nav a[aria-current="page"] { color: var(--bg); background: var(--ink); }
  .nav .acct { display: flex; margin-top: auto; }
  .main { margin-left: var(--side-w); padding: 48px 56px 72px; max-width: calc(var(--side-w) + 840px); }
  .main > * { max-width: 760px; }
}

/* ── piezas ── */
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 24px; }
.page-head p { margin-top: 6px; }
.stack { display: grid; gap: 14px; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 22px; }
.card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.label { font-size: 13px; font-weight: 600; color: var(--muted); }
.divider { height: 1px; background: var(--line); margin: 16px 0; border: 0; }
.row { display: flex; align-items: center; gap: 10px; }
.between { justify-content: space-between; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 44px; padding: 0 20px; border-radius: var(--r-pill);
  border: 1px solid var(--line-strong); background: var(--surface);
  font-size: 14px; font-weight: 600; text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background 0.15s, border-color 0.15s, transform 0.1s;
}
.btn:hover { border-color: var(--ink); }
.btn:active { transform: scale(0.98); }
.btn.primary, .btn.accent { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.btn.primary:hover, .btn.accent:hover { opacity: 0.88; }
.btn.ghost { border-color: transparent; background: transparent; padding: 0 12px; }
.btn.ghost:hover { background: var(--surface-2); }
.btn.block { width: 100%; }
.btn.sm { height: 36px; padding: 0 14px; font-size: 13px; }
.btn[disabled] { opacity: 0.4; cursor: default; transform: none; }
.icon-btn {
  display: inline-grid; place-items: center; width: 42px; height: 42px;
  border: 0; background: transparent; border-radius: var(--r-pill); cursor: pointer; color: var(--ink);
}
.icon-btn:hover { background: var(--surface-2); }
svg.i { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: none; }

.field { display: grid; gap: 7px; }
.field label { font-size: 13.5px; font-weight: 600; }
.field .hint { font-size: 12.5px; color: var(--muted); }
.input, select.input, textarea.input {
  /* 16 px: en iPhone, un campo con letra más pequeña hace zoom al tocarlo. */
  font: inherit; font-size: 16px;
  width: 100%; height: 48px; padding: 0 16px;
  background: var(--surface-2); border: 1px solid transparent; border-radius: var(--r-sm);
  font-weight: 500; transition: border-color 0.15s, background 0.15s;
}
textarea.input { height: auto; padding: 12px 16px; resize: none; }
.input::placeholder { color: var(--muted); }
.input:focus { outline: none; background: var(--surface); border-color: var(--ink); }
.input:disabled { color: var(--muted); }
.check { display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; color: var(--ink-2); }
.check input { margin-top: 3px; accent-color: var(--ink); width: 16px; height: 16px; }

.alert { padding: 12px 14px; border-radius: var(--r-sm); font-size: 13.5px; background: var(--danger-soft); color: var(--danger); }
.alert.ok { background: var(--surface-2); color: var(--ink); }
.tag { display: inline-block; padding: 2px 10px; border-radius: var(--r-pill); font-size: 11.5px; font-weight: 600; border: 1px solid var(--line-strong); color: var(--muted); }
.tag.alta { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.tag.media { color: var(--ink); border-color: var(--ink); }
.empty { padding: 32px 20px; text-align: center; color: var(--muted); }
.empty h2 { color: var(--ink); margin-bottom: 8px; }
.empty .btn { margin-top: 18px; }

.bar { height: 6px; background: var(--surface-2); border-radius: var(--r-pill); overflow: hidden; }
.bar > span { display: block; height: 100%; background: var(--ink); border-radius: var(--r-pill); }
.bar.good > span, .bar.bad > span { background: var(--ink); }

/* Avisos: arriba, sobre la barra del logo (como las notificaciones del celular), nunca sobre el contenido ni sobre el
   menú de abajo. Tarjeta del ancho del contenido, con el texto completo (nunca cortado); se cierra al tocarla. */
.toast {
  position: fixed; left: 50%; top: calc(10px + env(safe-area-inset-top)); transform: translateX(-50%);
  width: min(440px, calc(100vw - 32px)); padding: 12px 16px; border-radius: 16px;
  background: var(--ink); color: var(--bg); font-size: 13.5px; font-weight: 600; line-height: 1.35; z-index: 60;
  text-align: left; overflow-wrap: anywhere; box-shadow: 0 10px 30px rgb(0 0 0 / 0.22);
  max-height: 40vh; overflow-y: auto; cursor: pointer;
  animation: toast-in 0.22s ease-out;
}
@keyframes toast-in { from { opacity: 0; transform: translate(-50%, -8px); } to { opacity: 1; transform: translate(-50%, 0); } }
@media (prefers-reduced-motion: reduce) { .toast { animation: none; } }

/* ── acceso ── */
.auth { min-height: 100dvh; display: grid; place-items: center; padding: 32px 20px; }
.auth-box { width: 100%; max-width: 380px; }
.auth-box .wordmark { display: block; margin-bottom: 48px; font-size: 26px; }
.auth-box h1 { margin-bottom: 8px; }
.auth-box form { display: grid; gap: 16px; margin-top: 28px; }
.auth-foot { margin-top: 24px; font-size: 13.5px; color: var(--muted); }
.auth-foot a { color: var(--ink); font-weight: 600; }

/* ── inicio ── */
.score { display: flex; align-items: baseline; gap: 6px; }
.score b { font-size: 60px; font-weight: 700; letter-spacing: -0.05em; line-height: 1; }
.score span { color: var(--muted); }
.level { font-size: 14px; font-weight: 700; margin-top: 8px; }
.level.critica { color: var(--ink); }
.level.fragil { color: var(--warn); }
.level.solida, .level.excelente { color: var(--ink); }
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.steps li { display: flex; align-items: center; gap: 10px; padding: 6px 0; font-size: 14px; color: var(--muted); }
.steps li .dot { width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid var(--line-strong); display: grid; place-items: center; flex: none; }
.steps li.done { color: var(--ink); }
.steps li.done .dot { background: var(--accent); border-color: var(--accent); }
.steps li.done .dot::after { content: ""; width: 6px; height: 3px; border: solid var(--accent-ink); border-width: 0 0 1.5px 1.5px; transform: rotate(-45deg) translate(1px, -1px); }
.steps li.current { color: var(--ink); font-weight: 500; }
.steps li.current .dot { border-color: var(--ink); }

/* ── tareas ── */
.tasks { list-style: none; margin: 0; padding: 0; }
.task { display: grid; grid-template-columns: 22px 1fr; gap: 12px; padding: 12px 0; border-top: 1px solid var(--line); }
.task:first-child { border-top: 0; }
.task input { width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--accent); cursor: pointer; }
.task .t-title { font-size: 14px; font-weight: 500; }
.task.done .t-title { color: var(--muted); text-decoration: line-through; }
.task .t-detail { font-size: 13px; color: var(--muted); margin-top: 2px; }
.task .t-meta { display: flex; gap: 8px; align-items: center; margin-top: 6px; font-size: 12px; color: var(--muted); }

/* ── chat ── */
.chat { display: flex; flex-direction: column; height: calc(100dvh - 60px - var(--nav-h) - 20px - env(safe-area-inset-bottom)); margin: -16px -20px calc(-1 * (var(--nav-h) + 32px)); }
@media (min-width: 900px) { .chat { height: 100dvh; margin: -48px -56px -72px; max-width: none !important; } }
.chat-head { padding: 12px 20px 14px; border-bottom: 1px solid var(--line); background: var(--bg); }
.chat-head .bar { margin-top: 8px; }
.chat-log { flex: 1; overflow-y: auto; padding: 20px 16px; display: flex; flex-direction: column; gap: 14px; }
@media (min-width: 900px) { .chat-head, .chat-log, .composer { padding-left: max(48px, calc((100% - 720px) / 2)); padding-right: max(48px, calc((100% - 720px) / 2)); } }
.msg { max-width: 86%; font-size: 15px; line-height: 1.55; }
.msg p + p, .msg p + ul, .msg ul + p, .msg p + ol, .msg ol + p { margin-top: 8px; }
.msg ul, .msg ol { margin: 0; padding-left: 20px; }
.msg li + li { margin-top: 3px; }
.msg.user { align-self: flex-end; background: var(--ink); color: var(--bg); padding: 12px 16px; border-radius: 22px 22px 6px 22px; }
.msg.assistant, .msg.admin { align-self: flex-start; }
.msg .who { font-size: 12.5px; font-weight: 700; color: var(--muted); margin-bottom: 4px; }
.msg.admin .who { color: var(--accent); }
.msg .att { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; opacity: 0.8; margin-bottom: 4px; }
.typing { align-self: flex-start; font-size: 13px; color: var(--muted); }
.composer { background: var(--bg); padding: 10px 20px 12px; }
.composer textarea.input { border-radius: 24px; padding: 12px 18px; }
.composer form { display: flex; align-items: flex-end; gap: 6px; }
.composer textarea { flex: 1; min-height: 44px; max-height: 160px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 6px 4px 10px; border: 1px solid var(--line-strong); border-radius: 999px; font-size: 12px; background: var(--surface); }
.chip button { border: 0; background: none; cursor: pointer; color: var(--muted); padding: 0 4px; font-size: 14px; line-height: 1; }
.notice { align-self: center; max-width: 92%; text-align: center; font-size: 12px; color: var(--muted); padding: 6px 10px; border: 1px dashed var(--line-strong); border-radius: var(--r-sm); }

/* ── llamada ── */
.btn.danger { color: var(--danger); border-color: var(--danger); }
.call { display: grid; gap: 28px; padding: 8px 0 24px; }
.call-top { display: flex; justify-content: space-between; align-items: baseline; }
.call-status { font-size: 22px; font-weight: 500; letter-spacing: -0.01em; line-height: 1.35; min-height: 60px; }
.call-lines { display: grid; gap: 16px; min-height: 160px; align-content: start; }
.call-you { color: var(--muted); font-size: 15px; }
.call-you:not(:empty)::before { content: "Tú: "; font-weight: 600; }
.call-bot { font-size: 17px; line-height: 1.55; }
.call-actions { display: flex; gap: 10px; flex-wrap: wrap; }

/* ── informes ── */
.report-video { display: block; width: 100%; max-width: 340px; aspect-ratio: 9 / 16; margin: 0 auto; border-radius: var(--r-sm); background: #000; }
.report-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 0; border-top: 1px solid var(--line); text-decoration: none; }
.report-item:first-child { border-top: 0; }
.report-item b { font-size: 22px; font-weight: 600; }
.metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 12px; }
.metric .v { font-size: 17px; font-weight: 600; margin-top: 2px; }
.metric .v.sm { font-size: 15px; }
/* Modo negocio: el botón del encabezado dice dónde estás; en el negocio la barra de arriba lleva una franja. */
.space-pill { margin-left: auto; margin-right: 8px; display: inline-flex; align-items: center; gap: 6px; max-width: 58vw; padding: 6px 12px; border-radius: var(--r-pill); border: 1px solid var(--line); background: var(--surface); color: var(--ink); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.space-pill .i { width: 16px; height: 16px; flex: none; }
.space-pill span:not(.space-to) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.space-pill .space-to { color: var(--muted); font-weight: 500; white-space: nowrap; }
.space-pill.biz { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.space-pill.biz .space-to { color: inherit; opacity: 0.7; }
body.space-negocio .topbar { box-shadow: inset 0 -3px 0 var(--ink); }
.biz-steps summary, .biz-settings summary { cursor: pointer; }
@media (max-width: 380px) { .space-pill .space-to { display: none; } }
.dim { padding: 10px 0; border-top: 1px solid var(--line); }
.dim:first-child { border-top: 0; padding-top: 0; }
.dim .row { margin-bottom: 6px; }
.dim p { margin-top: 6px; font-size: 13px; color: var(--muted); }
.plain { margin: 0; padding-left: 18px; }
.plain li + li { margin-top: 6px; }
.rec + .rec { margin-top: 14px; }
.rec p { margin-top: 3px; font-size: 14px; color: var(--ink-2); }
.back { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); text-decoration: none; margin-bottom: 16px; }

/* ── agenda ── */
.row.wrap { flex-wrap: wrap; }
.row.center { justify-content: center; margin-top: 16px; }
.btn.disabled { opacity: 0.45; pointer-events: none; }
.choice { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 560px) { .choice { grid-template-columns: 1fr; } }
.choice button { display: grid; gap: 4px; text-align: left; padding: 14px; border: 1px solid var(--line-strong); border-radius: var(--r); background: var(--surface); cursor: pointer; }
.choice button[aria-pressed="true"] { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.chips-select, .day-chips, .slot-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.chips-select button, .day-chips button, .slot-grid button {
  height: 36px; padding: 0 12px; border: 1px solid var(--line-strong); border-radius: 999px;
  background: var(--surface); font-size: 13px; cursor: pointer;
}
.slot-grid button { border-radius: var(--r-sm); min-width: 72px; font-variant-numeric: tabular-nums; }
.chips-select button[aria-pressed="true"], .day-chips button[aria-pressed="true"], .slot-grid button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.kv-plain { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; margin: 0; font-size: 14px; }
.kv-plain dt { color: var(--muted); }
.kv-plain dd { margin: 0; }

/* ── sala de videollamada ── */
body.in-call .nav, body.in-call .topbar { display: none; }
body.in-call .main { padding: 12px 12px 16px; margin: 0 auto; max-width: none; }
@media (min-width: 900px) { body.in-call .main { margin-left: 0; padding: 20px 28px; } body.in-call .main > * { max-width: none; } }
.room { display: grid; gap: 14px; position: relative; }
.room-top { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; }
.room-top .row { flex-wrap: nowrap; white-space: nowrap; }
.pill-live { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; font-size: 12px; font-weight: 700; color: var(--bg); background: var(--ink); border-radius: var(--r-pill); padding: 3px 10px; }
.pill-live::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--bg); animation: zv-think 1.6s ease-in-out infinite; }
.room-grid { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 14px; align-items: start; }
@media (max-width: 980px) { .room-grid { grid-template-columns: 1fr; } }
.stage { position: relative; display: grid; gap: 10px; }
.tile { position: relative; aspect-ratio: 16 / 10; border-radius: var(--r); background: #0a0a0a; overflow: hidden; display: grid; place-items: center; }
.tile .remote { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tile-name { position: absolute; left: 16px; bottom: 14px; color: #fafafa; font-size: 13.5px; font-weight: 700; }
.tile-state { position: absolute; right: 16px; bottom: 14px; color: #a3a3a3; font-size: 12.5px; font-weight: 600; }
.self { position: absolute; right: 12px; top: 12px; width: 26%; max-width: 220px; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-sm); background: #222; border: 1px solid rgb(255 255 255 / 0.12); transform: scaleX(-1); }
.self.off { visibility: hidden; }

.ai-avatar { position: relative; width: 132px; height: 132px; display: grid; place-items: center; }
.ai-avatar .core { position: relative; z-index: 1; width: 96px; height: 96px; border-radius: 50%; display: grid; place-items: center; background: #fafafa; color: #0a0a0a; font-size: 40px; font-weight: 700; letter-spacing: -0.04em; transition: transform 0.3s ease; }
.ai-avatar .ring { position: absolute; inset: 18px; border-radius: 50%; border: 1.5px solid rgb(255 255 255 / 0.4); opacity: 0; }
.ai-avatar[data-state="speaking"] .ring { animation: zv-ring 1.6s ease-out infinite; }
.ai-avatar[data-state="speaking"] .ring.r2 { animation-delay: 0.8s; }
.ai-avatar[data-state="speaking"] .core { transform: scale(1.04); }
.ai-avatar[data-state="listening"] .ring { opacity: 0.6; inset: 10px; }
.ai-avatar[data-state="thinking"] .core { animation: zv-think 1.2s ease-in-out infinite; }
@keyframes zv-ring { from { transform: scale(1); opacity: 0.7; } to { transform: scale(1.55); opacity: 0; } }
@keyframes zv-think { 0%, 100% { opacity: 1; } 50% { opacity: 0.6; } }
@media (prefers-reduced-motion: reduce) { .ai-avatar .ring, .ai-avatar .core { animation: none !important; } }

.captions { min-height: 64px; display: grid; gap: 4px; padding: 10px 14px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); }
.cap-you { color: var(--muted); font-size: 14px; }
.cap-you:not(:empty)::before { content: "Tú: "; font-weight: 600; }
.cap-bot { font-size: 15px; line-height: 1.5; }
.room-side { display: grid; gap: 12px; max-height: calc(100dvh - 200px); overflow-y: auto; }
@media (max-width: 980px) { .room-side { max-height: none; } }
.side-block { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 14px; display: grid; gap: 10px; transition: box-shadow 0.4s; }
.side-block.flash { box-shadow: 0 0 0 2px var(--accent); }
.agenda { margin: 0; padding-left: 18px; display: grid; gap: 8px; font-size: 14px; }
.agenda li { display: grid; gap: 1px; }
.screen { display: grid; gap: 12px; }
.commit-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: 14px; }
.commit-list li { display: flex; gap: 8px; align-items: flex-start; }
.commit-list svg { stroke: var(--accent); margin-top: 1px; }
.room-text { display: flex; gap: 8px; }
.room-controls { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; }
.ctrl { display: grid; justify-items: center; gap: 4px; min-width: 78px; padding: 10px 8px; border: 1px solid var(--line-strong); border-radius: var(--r); background: var(--surface); font-size: 11px; cursor: pointer; color: var(--ink); }
.ctrl.off { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.ctrl.hang { color: var(--bg); background: var(--ink); border-color: var(--ink); }
.ctrl.hang svg { transform: rotate(135deg); }
.room-start { position: absolute; inset: 0; display: grid; place-items: center; padding: 16px; background: color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter: blur(2px); z-index: 5; }
.room-start .card { max-width: 480px; }

/* ── tarjetas de la pantalla compartida ── */
.vz-card { display: grid; gap: 8px; padding: 12px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--bg); }
.vz-card h3 { font-size: 15px; }
.vz-body { display: grid; gap: 10px; }
.vz-metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.vz-big { font-size: 18px; font-weight: 600; letter-spacing: -0.01em; }
.vz-compare { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; }
.vz-option { display: grid; gap: 6px; padding: 10px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); }
.vz-row { display: grid; gap: 5px; font-size: 13px; }
.vz-steps, .vz-list { margin: 0; padding-left: 18px; display: grid; gap: 8px; font-size: 13px; }
.vz-note { font-size: 13.5px; color: var(--ink); font-weight: 700; }
@media (max-width: 980px) { .room-side { display: flex; flex-direction: column; } .side-screen { order: -1; } }

@media (max-width: 600px) { .chat-head .btn .lbl { display: none; } .chat-head .btn { width: 38px; padding: 0; } .chat-head h2 { font-size: 17px; } }

/* ── validación de formularios ── */
.field-error { min-height: 0; font-size: 12.5px; font-weight: 600; color: var(--danger); }
.field-error:empty { display: none; }
.input[aria-invalid="true"] { border-color: var(--danger); background: var(--danger-soft); }
.phone-row { display: grid; grid-template-columns: 132px 1fr; gap: 8px; }
.phone-row select.input { padding: 0 10px; font-size: 16px; text-overflow: ellipsis; }
.pw-wrap { position: relative; }
.pw-wrap .input { padding-right: 84px; }
.pw-toggle { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); height: 36px; padding: 0 12px; border: 0; border-radius: var(--r-pill); background: transparent; color: var(--muted); font-size: 13px; font-weight: 700; cursor: pointer; }
.pw-toggle:hover { color: var(--ink); background: var(--surface); }
.pw-rules { list-style: none; margin: 2px 0 0; padding: 0; display: grid; gap: 3px; font-size: 12.5px; font-weight: 600; color: var(--muted); }
.pw-rules li.ok { color: var(--ink); }
.pw-rules li.bad { color: var(--danger); }

/* ── gastos ── */
.mv-list { list-style: none; margin: 0; padding: 0; }
.mv-list li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid var(--line); }
.mv-list li:first-child { border-top: 0; }
.mv-list b.in { font-weight: 700; }
.mv-cat { padding: 6px 0; }
.mv-manual summary { cursor: pointer; color: var(--muted); font-weight: 600; }
.mv-next:disabled { opacity: 0.3; }
.icon-btn.rec { background: var(--ink); color: var(--bg); animation: zv-think 1s ease-in-out infinite; }
.mono { font-family: var(--mono); font-size: 12.5px; overflow-wrap: anywhere; }
.metrics { grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); }
/* Celular: barra de abajo fija en su sitio (capa propia: iOS no la mueve al desplazar); alto, íconos y textos +30 %. */
@media (max-width: 899px) {
  :root { --nav-h: 60px; }
  .nav { left: 10px; right: 10px; bottom: calc(8px + env(safe-area-inset-bottom)); padding: 5px 4px; transform: translateZ(0); will-change: transform; backface-visibility: hidden; }
  .nav a { gap: 2px; font-size: 11px; letter-spacing: -0.02em; min-width: 0; padding: 0 1px; }
  .nav a svg.i { width: 22px; height: 22px; }
  .main { padding-bottom: calc(var(--nav-h) + 28px + env(safe-area-inset-bottom)); }
  /* Sin rebote al llegar al borde (en iOS arrastraba la barra) y, con el teclado abierto, la barra se oculta
     en lugar de subirse encima del teclado. */
  html, body { overscroll-behavior-y: none; }
  body.kb-open .nav { visibility: hidden; }
  /* La ventana no se desplaza: solo el contenido de la app. Así, al abrir y cerrar el teclado (o al hacer scroll),
     iPhone no deja la página corrida y la barra de abajo no queda flotando a mitad de pantalla. */
  html:has(> body > #root > .shell), body:has(> #root > .shell) { height: 100%; overflow: hidden; }
  .shell { height: 100dvh; overflow-y: auto; overscroll-behavior-y: none; -webkit-overflow-scrolling: touch; }
}

/* ── presentación de la sesión ── */
body.deck-open { overflow: hidden; }
.deck { position: fixed; inset: 0; z-index: 100; background: var(--bg); display: grid; grid-template-rows: auto 1fr auto; }
.deck-top { display: flex; justify-content: space-between; align-items: center; padding: 14px 20px; }
.deck-stage { position: relative; overflow: hidden; }
.deck-slide { position: absolute; inset: 0; padding: 12px 24px 24px; overflow-y: auto; opacity: 0; visibility: hidden; transform: translateX(24px); transition: opacity 0.45s ease, transform 0.45s ease, visibility 0s 0.45s; display: grid; align-content: center; max-width: 760px; margin: 0 auto; width: 100%; }
.deck-slide.active { opacity: 1; visibility: visible; transform: none; transition: opacity 0.45s ease, transform 0.45s ease; }
.deck-bottom { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 20px calc(16px + env(safe-area-inset-bottom)); }
.deck-dots { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.deck-dots button { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 50%; background: var(--line-strong); cursor: pointer; transition: width 0.25s, background 0.25s; }
.deck-dots button[aria-current="true"] { width: 26px; border-radius: 999px; background: var(--ink); }
.deck .icon-btn:disabled { opacity: 0.25; }
.dk-center { text-align: center; display: grid; gap: 14px; justify-items: center; }
.dk-kicker { font-size: 13px; font-weight: 700; color: var(--muted); margin-bottom: 14px; display: block; }
.dk-center .dk-kicker { margin-bottom: 0; }
.dk-title { font-size: clamp(26px, 5vw, 40px); font-weight: 700; letter-spacing: -0.03em; line-height: 1.15; }
.dk-sub { color: var(--muted); font-size: 15px; }
.dk-lead { font-size: clamp(18px, 3vw, 24px); line-height: 1.45; font-weight: 600; letter-spacing: -0.01em; }
.dk-points { margin: 18px 0 0; padding: 0; list-style: none; display: grid; gap: 12px; }
.dk-points li { padding-left: 22px; position: relative; font-size: 16px; }
.dk-points li::before { content: ""; position: absolute; left: 0; top: 0.6em; width: 10px; height: 2px; background: var(--ink); }
.dk-h3 { margin-top: 22px; font-size: 15px; }
.dk-find { margin-top: 12px; }
.dk-find p { color: var(--muted); font-size: 14.5px; }
.dk-note { margin-top: 18px; font-size: 16px; font-weight: 700; }
.dk-in { opacity: 0; transform: translateY(10px); transition: opacity 0.5s ease, transform 0.5s ease; }
.dk-in.on { opacity: 1; transform: none; }
.dk-chart { margin-top: 4px; }
.dk-svg { width: 100%; height: auto; display: block; }

.dk-bars { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 18px; align-items: end; height: 300px; }
.dk-col { display: grid; grid-template-rows: auto 1fr auto; gap: 8px; height: 100%; text-align: center; }
.dk-val { font-size: 20px; font-weight: 700; }
.dk-track { position: relative; min-height: 0; display: flex; align-items: flex-end; }
.dk-bar { width: 100%; border-radius: 12px 12px 0 0; transition: height 1.1s cubic-bezier(0.22, 1, 0.36, 1); height: 0; }
.dk-bar.k { background: var(--ink); } .dk-bar.g { background: var(--muted); } .dk-bar.l { background: var(--line-strong); }
.dk-bar.o { background: transparent; border: 2px dashed var(--ink); border-bottom: 0; }
.dk-lbl { font-size: 13.5px; font-weight: 600; color: var(--muted); }
.dk-hbars { display: grid; gap: 14px; }
.dk-hrow { display: grid; gap: 6px; font-size: 15px; }
.dk-htrack { height: 12px; background: var(--surface-2); border-radius: 999px; overflow: hidden; }
.dk-hbar { height: 100%; border-radius: 999px; transition: width 1.1s cubic-bezier(0.22, 1, 0.36, 1); width: 0; }
.dk-hbar.k { background: var(--ink); } .dk-hbar.g { background: var(--muted); }
.dk-grid { stroke: var(--line); stroke-width: 1; }
.dk-tick { fill: var(--muted); font-size: 11px; font-family: var(--font); }
.dk-line { stroke: var(--ink); stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; }
.dk-line.dash { stroke: var(--muted); stroke-width: 2.5; }
.dk-legend { display: flex; gap: 18px; flex-wrap: wrap; font-size: 13px; font-weight: 600; margin-top: 10px; }
.dk-key { display: inline-flex; align-items: center; gap: 8px; }
.dk-key i { width: 26px; height: 0; border-top: 3px solid var(--ink); display: inline-block; }
.dk-key i.dash { border-top: 3px dashed var(--muted); }
.dk-ring { position: relative; width: min(280px, 70vw); margin: 0 auto; }
.dk-ring-track { fill: none; stroke: var(--surface-2); stroke-width: 20; }
.dk-ring-fill { fill: none; stroke: var(--ink); stroke-width: 20; stroke-linecap: round; }
.dk-ring-text { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; gap: 2px; }
.dk-ring-text b { font-size: 40px; letter-spacing: -0.03em; }
.dk-ring-text span { color: var(--muted); font-size: 13px; font-weight: 600; }
.dk-tasks { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 14px; }
.dk-tasks li { display: grid; grid-template-columns: 26px 1fr; gap: 12px; align-items: start; }
.dk-tasks li b { display: block; font-size: 15.5px; }
.dk-check { width: 22px; height: 22px; border: 2px solid var(--ink); border-radius: 7px; display: grid; place-items: center; font-size: 13px; font-weight: 700; }
.dk-tasks li.done .dk-check { background: var(--ink); color: var(--bg); }
.dk-tasks li.done b { color: var(--muted); text-decoration: line-through; }
@media (prefers-reduced-motion: reduce) { .deck-slide, .dk-in, .dk-bar, .dk-hbar { transition: none !important; } }

/* ── informe de la sesión y tareas con puntos de control ── */
.sess-grid { display: grid; gap: 14px; }
@media (min-width: 1100px) { .sess-grid.two { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; } .main:has(.sess-grid.two) > * { max-width: 1100px; } }
.cp-list { list-style: none; margin: 0; padding: 0; }
.cp { display: grid; grid-template-columns: 24px 1fr; gap: 12px; padding: 14px 0; border-top: 1px solid var(--line); }
.cp:first-child { border-top: 0; }
.cp input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--ink); cursor: pointer; }
.cp .cp-title { font-weight: 700; font-size: 14.5px; }
.cp.done .cp-title { color: var(--muted); text-decoration: line-through; }
.cp .cp-detail { font-size: 13px; color: var(--muted); margin-top: 2px; }
.cp .cp-prog { margin-top: 8px; display: grid; gap: 6px; }
.cp .cp-prog .row { font-size: 12.5px; font-weight: 600; }
.chip { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 700; padding: 2px 10px; border-radius: 999px; border: 1px solid var(--line-strong); color: var(--muted); }
.chip.ok { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.chip.warn { border-color: var(--ink); color: var(--ink); }
.chip.bad { border-color: var(--danger); color: var(--danger); }

/* llamada de voz: animación del asesor */
.call-orb { position: relative; width: 148px; height: 148px; margin: 4px auto 0; display: grid; place-items: center; }
.call-orb .core { position: relative; z-index: 1; width: 96px; height: 96px; border-radius: 50%; display: grid; place-items: center; background: var(--ink); color: var(--bg); font-size: 38px; font-weight: 700; transition: transform 0.25s ease; }
.call-orb .ring { position: absolute; inset: 26px; border-radius: 50%; border: 1.5px solid var(--ink); opacity: 0; }
.call-orb[data-state="speaking"] .core { animation: zv-talk 0.9s ease-in-out infinite; }
.call-orb[data-state="speaking"] .ring { animation: zv-ring 1.8s ease-out infinite; }
.call-orb[data-state="speaking"] .ring.r2 { animation-delay: 0.6s; }
.call-orb[data-state="speaking"] .ring.r3 { animation-delay: 1.2s; }
.call-orb[data-state="listening"] .ring { opacity: 0.35; inset: 16px; animation: zv-breathe 2.4s ease-in-out infinite; }
.call-orb[data-state="thinking"] .core { animation: zv-think 1.1s ease-in-out infinite; }
@keyframes zv-talk { 0%, 100% { transform: scale(1); } 30% { transform: scale(1.07); } 60% { transform: scale(0.97); } }
@keyframes zv-breathe { 0%, 100% { transform: scale(1); opacity: 0.25; } 50% { transform: scale(1.06); opacity: 0.45; } }
@media (prefers-reduced-motion: reduce) { .call-orb .ring, .call-orb .core { animation: none !important; } }
.center { text-align: center; }

/* avatar realista del asesor (Simli) */
/* El rostro se muestra completo (sin acercarlo de más): así se ve natural, como en una videollamada real. */
.tile .face { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; border-radius: inherit; background: #0a0a0a; }
.tile.has-face .ai-avatar { display: none; }

/* uso del asesor */
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.stack-sm { display: grid; gap: 6px; }
@media (max-width: 520px) { .grid-3 { grid-template-columns: 1fr; } }

/* ── ajustes para celular ── */
@media (max-width: 560px) {
  .grid-2 { grid-template-columns: 1fr; }
  .page-head { flex-direction: column; align-items: stretch; }
  .page-head > .btn, .page-head > a.btn { align-self: flex-start; }
  #mv-nl { flex-wrap: wrap; }
  #mv-nl .input { flex: 1 1 100%; }
  #mv-nl .btn { flex: 1; }
  .call { gap: 18px; }
  .call-status { font-size: 19px; min-height: 0; }
  .call-lines { min-height: 90px; }
  .call-orb { width: 120px; height: 120px; }
  .call-orb .core { width: 80px; height: 80px; font-size: 32px; }
  .call-actions { flex-wrap: wrap; }
}

/* Atajos de iPhone: guía paso a paso */
.sc-box { padding: 16px; border-radius: var(--r-sm); background: var(--surface-2); }
.sc-guide { border-top: 1px solid var(--line); padding: 12px 0 4px; }
.sc-guide summary { cursor: pointer; list-style: none; display: flex; gap: 6px; align-items: baseline; flex-wrap: wrap; }
.sc-guide summary::-webkit-details-marker { display: none; }
.steps-sc { margin: 10px 0 8px; padding-left: 22px; display: grid; gap: 8px; font-size: 14px; line-height: 1.5; }
.steps-sc li::marker { font-weight: 700; }

/* notificaciones */
.toggle-row { gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); cursor: pointer; }
.toggle-row input { width: 22px; height: 22px; accent-color: var(--ink); flex: none; }

/* medidor del micrófono (muestra que la app te oye) */
.mic-meter { width: min(220px, 60%); height: 4px; margin: 0 auto; border-radius: 999px; background: var(--line); overflow: hidden; }
.mic-meter span { display: block; height: 100%; background: var(--ink); transform-origin: left center; transform: scaleX(0); transition: transform 0.08s linear; }
.room-meter { position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); z-index: 2; background: rgb(255 255 255 / 0.2); }
.room-meter span { background: #fafafa; }

/* Celular en horizontal: la llamada y la videollamada caben en la pantalla. */
@media (orientation: landscape) and (max-height: 520px) {
  .tile { aspect-ratio: auto; height: 62dvh; }
  .call-orb { width: 104px; height: 104px; }
  .call-orb .core { width: 72px; height: 72px; }
}

/* mascota del asesor: parpadea, escucha, piensa y mueve la boca con la voz */
.mascot { width: 86%; height: 86%; overflow: visible; }
.mascot .m-leaf, .mascot .m-eye, .mascot .m-mouth, .mascot .m-dots { fill: currentColor; }
.mascot .m-brows path, .mascot .m-smile { fill: none; stroke: currentColor; stroke-width: 3.4; stroke-linecap: round; }
.mascot .m-leaf { transform-box: fill-box; transform-origin: 50% 100%; animation: zv-leaf 3.8s ease-in-out infinite; }
.mascot .m-eye { transform-box: fill-box; transform-origin: center; animation: zv-blink 4.8s infinite; }
.mascot .m-eyes { transform-box: view-box; transform-origin: 50px 47px; transition: transform 0.35s ease; }
.mascot .m-brows { opacity: 0; transition: opacity 0.3s, transform 0.3s; }
.mascot .m-smile { transition: opacity 0.15s; }
.mascot .m-mouth { opacity: 0; transform-box: fill-box; transform-origin: 50% 25%; transform: scale(calc(0.6 + var(--mouth, 0) * 0.4), calc(0.12 + var(--mouth, 0) * 0.88)); }
.mascot .m-dots { opacity: 0; transition: opacity 0.3s; }
[data-state="speaking"] .mascot .m-smile { opacity: 0; }
[data-state="speaking"] .mascot .m-mouth { opacity: 1; }
[data-state="listening"] .mascot .m-brows { opacity: 1; transform: translateY(-2px); }
[data-state="listening"] .mascot .m-eyes { transform: scale(1.08); }
[data-state="thinking"] .mascot .m-eyes { transform: translate(4px, -5px); }
[data-state="thinking"] .mascot .m-dots { opacity: 1; }
[data-state="thinking"] .mascot .m-dots circle { animation: zv-think 1.2s ease-in-out infinite; }
[data-state="thinking"] .mascot .m-dots circle:nth-child(2) { animation-delay: 0.2s; }
[data-state="thinking"] .mascot .m-dots circle:nth-child(3) { animation-delay: 0.4s; }
.call-orb[data-state="speaking"] .core:has(.mascot) { animation: none; }
.tile .ai-avatar { width: min(48%, 190px); height: auto; aspect-ratio: 1; }
.tile .ai-avatar .core { width: 74%; height: 74%; }
@keyframes zv-blink { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(0.12); } }
@keyframes zv-leaf { 0%, 100% { transform: rotate(-5deg); } 50% { transform: rotate(6deg); } }
@media (prefers-reduced-motion: reduce) { .mascot .m-leaf, .mascot .m-eye, .mascot .m-dots circle { animation: none !important; } }

/* alertas de gasto fuera de lo normal */
.alert-card { border: 1px solid var(--ink); display: grid; gap: 8px; }

/* escáner de facturas */
.scan-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.scan-card { margin-top: 4px; }

/* Dinero: pestañas dentro de la misma sección */
.subnav { display: flex; gap: 6px; overflow-x: auto; margin: -8px 0 18px; padding-bottom: 2px; scrollbar-width: none; }
.subnav::-webkit-scrollbar { display: none; }
.subnav a { flex: none; padding: 7px 12px; border: 1px solid var(--line-strong); border-radius: var(--r-pill); font-size: 13px; font-weight: 600; color: var(--muted); text-decoration: none; background: var(--surface); }
.subnav a[aria-current="page"] { background: var(--ink); border-color: var(--ink); color: var(--bg); }
/* Listas de dato y valor, tablas y registros de Dinero y el Simulador */
.kv { list-style: none; margin: 0; padding: 0; }
.kv li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); }
.kv li:first-child { border-top: 0; }
.kv li b { text-align: right; white-space: nowrap; }
@media (max-width: 400px) { .subnav a { padding: 7px 10px; font-size: 12.5px; } }
.tbl-wrap { overflow-x: auto; }
.tbl { width: 100%; border-collapse: collapse; font-size: 13.5px; font-variant-numeric: tabular-nums; }
.tbl th { text-align: right; font-size: 12px; font-weight: 600; color: var(--muted); padding: 8px 10px; border-bottom: 1px solid var(--line-strong); white-space: nowrap; }
.tbl td { text-align: right; padding: 9px 10px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.tbl th:first-child, .tbl td:first-child { text-align: left; padding-left: 0; white-space: normal; }
.tbl tr.hl td { font-weight: 700; }
.debt { display: grid; gap: 8px; padding: 14px 0; border-top: 1px solid var(--line); }
.debt:first-of-type { border-top: 0; }
.mat { display: grid; gap: 6px; padding: 12px 0; border-top: 1px solid var(--line); }
.grow { flex: 1; min-width: 0; text-decoration: none; }
.unit-input { position: relative; }
.unit-input .unit { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); font-size: 13px; color: var(--muted); pointer-events: none; }
.unit-input .input { padding-right: 64px; }
.hint.ask { color: var(--ink); font-weight: 600; }
.disclaimer { border-left: 2px solid var(--line-strong); padding-left: 10px; }
.mt-lg { margin-top: 32px; }
.sim-field label .tag { margin-left: 6px; vertical-align: 1px; }

/* respuestas rápidas del asesor y metas */
.quick { display: flex; flex-wrap: wrap; gap: 8px; align-self: flex-start; }
.goal { display: grid; gap: 8px; padding: 12px 0; border-top: 1px solid var(--line); }
.goal:first-of-type { border-top: 0; padding-top: 0; }
.mb { margin-bottom: 14px; }
.t-detail, .cp-detail { white-space: pre-line; }

/* visita guiada */
.tour { position: fixed; inset: 0; z-index: 9000; }
.tour-block { position: fixed; background: rgb(0 0 0 / 0.62); transition: all 0.25s ease; }
.tour-hole { position: fixed; border-radius: 16px; box-shadow: 0 0 0 3px var(--bg), 0 0 0 5px var(--ink); cursor: pointer; transition: all 0.25s ease; animation: tour-pulse 1.6s ease-in-out infinite; }
.tour-card { position: fixed; background: var(--surface); color: var(--ink); border: 1px solid var(--line-strong); border-radius: var(--r); padding: 18px; display: grid; gap: 8px; box-shadow: 0 12px 40px rgb(0 0 0 / 0.3); transition: top 0.25s ease, left 0.25s ease; }
.tour-card h2 { font-size: 19px; margin: 0; }
.tour-card p { margin: 0; font-size: 14.5px; line-height: 1.45; color: var(--ink-2); }
.tour-actions { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.tour-actions .grow { flex: 1; }
@keyframes tour-pulse { 50% { box-shadow: 0 0 0 3px var(--bg), 0 0 0 9px color-mix(in srgb, var(--ink) 35%, transparent); } }
@media (prefers-reduced-motion: reduce) { .tour-hole { animation: none; } .tour-block, .tour-hole, .tour-card { transition: none; } }

/* Celular: el contenido nunca es más ancho que la pantalla (nombres de archivo, enlaces y textos largos se parten). */
@media (max-width: 899px) {
  .main, .main .stack { max-width: 100%; }
  .main .stack { grid-template-columns: minmax(0, 1fr); }
  .main .card, .main .stack > *, .main .field, .main .row > * { min-width: 0; }
  .main .card { overflow-wrap: break-word; }
  .main .card .input, .main .card textarea, .main .card select { max-width: 100%; }
  .main .mat b, .main .mat p { overflow-wrap: anywhere; min-width: 0; }
  .main .kv li > * { overflow-wrap: break-word; min-width: 0; }
  .main .row.wrap .input[type="url"] { flex: 1 1 100%; min-width: 0; width: 100%; }
  .main .mat, .main .card { grid-template-columns: minmax(0, 1fr); }
  .main .mat > * { min-width: 0; }
  .main .kv li b { white-space: normal; overflow-wrap: break-word; }
  .main .kv li { align-items: flex-start; }
  .main { overflow-x: clip; }
  /* Cifras (tasas, valores): conservan su ancho y es el texto de la izquierda el que se parte; nunca se salen del recuadro. */
  .main .kv li > div { flex: 1 1 auto; }
  .main .kv li > b.num { flex: 0 0 auto; max-width: 55%; text-align: right; }
  /* Botones un poco más grandes; nunca se encogen por debajo de su texto: si no caben en la fila, bajan a la siguiente
     y, si el texto es más largo que la pantalla, se parte en dos líneas dentro del botón. */
  .main .btn { min-height: 44px; height: auto; padding-top: 8px; padding-bottom: 8px; white-space: normal; text-align: center; line-height: 1.25; max-width: 100%; }
  .main .btn.sm { min-height: 40px; padding-left: 16px; padding-right: 16px; }
  .main .row > .btn, .main .row > a.btn { flex: 0 0 auto; }
  .main .row:has(> .btn) { flex-wrap: wrap; row-gap: 10px; }
  .main .row > .input { flex: 1 1 150px; width: auto; }
}
@media (max-width: 380px) { .nav a { font-size: 10px; } }

/* diálogo propio (confirmaciones y contraseña) */
dialog.ask { border: 1px solid var(--line-strong); border-radius: var(--r); background: var(--surface); color: var(--ink); padding: 22px; width: min(420px, calc(100vw - 32px)); }
dialog.ask::backdrop { background: rgb(0 0 0 / 0.6); }
dialog.ask h2 { margin: 0; font-size: 19px; }

/* contador de palabras del chat */
.word-count { margin: 4px 4px 0; text-align: right; }
.word-count.over { color: var(--danger); }

/* conversor de monedas */
.fx-pair { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 10px; align-items: end; }
.fx-swap { margin-bottom: 6px; }
.fx-result { font-size: 30px; font-weight: 700; letter-spacing: -0.02em; overflow-wrap: anywhere; }
.fx-amount { font-size: 20px; }
@media (max-width: 520px) { .fx-pair { grid-template-columns: 1fr; } .fx-swap { justify-self: center; transform: rotate(90deg); margin: 0; } }

/* apariencia */
.theme-pick { display: flex; flex-wrap: wrap; gap: 8px; }
.theme-pick button[aria-pressed="true"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }

/* Aprende: videos de educación financiera */
.learn-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: 14px; }
.learn-card { display: grid; gap: 8px; text-align: left; background: none; border: 0; padding: 0; color: inherit; font: inherit; cursor: pointer; }
.learn-thumb { position: relative; display: block; aspect-ratio: 16 / 9; border-radius: var(--r-sm); overflow: hidden; background: var(--surface-2); }
.learn-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.learn-len { position: absolute; right: 8px; bottom: 8px; padding: 1px 6px; border-radius: 6px; background: rgb(0 0 0 / 0.7); color: #fff; font-size: 12px; font-weight: 600; }
.learn-play { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; opacity: 0.9; }
.learn-play svg.i { width: 40px; height: 40px; filter: drop-shadow(0 2px 6px rgb(0 0 0 / 0.5)); }
.learn-title { font-weight: 600; }
dialog.learn-player { border: 0; border-radius: var(--r); background: var(--surface); color: var(--ink); padding: 14px; width: min(960px, calc(100vw - 24px)); display: grid; gap: 10px; }
dialog.learn-player:not([open]) { display: none; }
dialog.learn-player::backdrop { background: rgb(0 0 0 / 0.8); }
dialog.learn-player video { width: 100%; max-height: 78vh; border-radius: var(--r-sm); background: #000; }

/* código del SMS */
.sms-code { font-size: 24px; letter-spacing: 0.4em; text-align: center; }

/* calendario de tareas */
.cal-title { text-transform: capitalize; font-size: 17px; }
.cal-next svg.i { transform: rotate(180deg); }
.cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.cal-dow { text-align: center; font-size: 12px; color: var(--muted); padding: 4px 0; }
.cal-day { aspect-ratio: 1; display: grid; place-items: center; align-content: center; gap: 2px; border: 1px solid transparent; border-radius: 12px; background: var(--surface-2); color: var(--ink); font: inherit; font-size: 14px; cursor: pointer; min-height: 40px; }
.cal-day.today { border-color: var(--ink); font-weight: 700; }
.cal-day.sel { background: var(--ink); color: var(--bg); }
.cal-day.late:not(.sel) { color: var(--danger); }
.cal-dots { display: flex; gap: 3px; }
.cal-dots i { width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.cal-dots i.done { opacity: 0.35; }

/* quién atiende la videollamada */
.persona-pick { display: grid; gap: 8px; }
.persona { display: flex; gap: 12px; align-items: flex-start; padding: 12px; border: 1px solid var(--line-strong); border-radius: var(--r-sm); cursor: pointer; }
.persona:has(input:checked) { border-color: var(--ink); background: var(--surface-2); }
.persona.off { opacity: 0.55; cursor: default; }
.persona input { margin-top: 3px; accent-color: var(--ink); }

/* guía de Siri */
.siri summary { cursor: pointer; padding: 6px 0; }
.siri ol.plain { margin: 6px 0; }

/* simulador: resumen y lectura en el celular */
.sim-summary .sim-lead { font-size: 16px; line-height: 1.5; margin: 0; }
.sim-big { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); gap: 14px; }
.sim-big > div { padding: 12px; border-radius: var(--r-sm); background: var(--surface-2); display: grid; gap: 4px; min-width: 0; }
.sim-big-v { font-size: 24px; font-weight: 700; letter-spacing: -0.02em; overflow-wrap: break-word; }
.sim-alert-link { color: var(--danger); font-weight: 600; background: none; border: 0; padding: 0; font: inherit; font-size: 13px; text-align: left; cursor: pointer; }
.sim-more > summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; }
.sim-more > summary::after { content: '+'; font-size: 20px; color: var(--muted); }
.sim-more[open] > summary::after { content: '−'; }
.sim-more > summary::-webkit-details-marker { display: none; }
.sim-kv li > div { min-width: 0; }
.sim-kv li > div .small:not(.muted) { color: var(--ink-2); margin-top: 2px; }
@media (max-width: 640px) {
  /* tablas como tarjetas apiladas: nada se sale de la pantalla */
  .sim-tbl, .sim-tbl tbody, .sim-tbl tr, .sim-tbl td { display: block; width: 100%; }
  .sim-tbl thead { display: none; }
  .sim-tbl tr { padding: 10px 0; border-top: 1px solid var(--line); }
  .sim-tbl tr:first-child { border-top: 0; }
  .sim-tbl tr.hl { background: var(--surface-2); border-radius: var(--r-sm); padding: 10px; }
  .sim-tbl td { display: flex; justify-content: space-between; gap: 12px; padding: 3px 0; border: 0; text-align: right; overflow-wrap: break-word; }
  .sim-tbl td, .main .kv li b.num { white-space: nowrap; }
  .sim-tbl td::before { white-space: normal; }
  .sim-tbl td::before { content: attr(data-label); color: var(--muted); text-align: left; flex: 0 1 50%; }
  .sim-tbl td:first-child { font-weight: 600; }
  .sim-big-v { font-size: 22px; }
  .sim-kv li { flex-direction: column; align-items: flex-start; gap: 4px; }
  .sim-kv li b { text-align: left; }
}

/* comparación de planes */
.plans-tbl td:first-child { text-align: left; white-space: normal; }
.plans-tbl th, .plans-tbl td { font-size: 13.5px; }
.choice button:disabled { opacity: 0.5; cursor: not-allowed; }

/* Direcciones de la guía de Atajos: se leen completas y se copian con un toque. */
.sc-url { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 6px 0; padding: 8px 10px; background: var(--surface-2); border-radius: 10px; }
.sc-url .mono { flex: 1 1 200px; min-width: 0; overflow-wrap: anywhere; }

/* Dinero: Ingresos y Gastos se tocan para ver el detalle por día. */
.metric-btn { all: unset; box-sizing: border-box; display: block; cursor: pointer; border-radius: 10px; padding: 6px 4px; margin: -6px -4px; -webkit-tap-highlight-color: transparent; }
.metric-btn:hover { background: var(--surface-2); }
.metric-btn:focus-visible { outline: 2px solid var(--ink); }
.metric-btn .chev { display: inline-block; transition: transform 0.2s ease; opacity: 0.6; }
.metric-btn[aria-expanded="true"] .chev { transform: rotate(180deg); }
.metric-btn[aria-expanded="true"] { background: var(--surface-2); }
.mv-detail { margin-top: 14px; border-top: 1px solid var(--line); max-height: 60vh; overflow-y: auto; overscroll-behavior: contain; }
.mv-day { padding: 12px 0; border-bottom: 1px solid var(--line); }
.mv-day:last-child { border-bottom: 0; }
.mv-day ul { margin: 6px 0 0; padding: 0; list-style: none; display: grid; gap: 4px; }
.mv-day li span:first-child { min-width: 0; overflow-wrap: anywhere; padding-right: 10px; }

/* Dinero - Bancos */
a.bank-card { text-decoration: none; color: inherit; }
a.bank-card:hover { border-color: var(--line-strong); }
.bank-card h2 { margin: 0; }
.bank-name { display: inline-flex; align-items: center; gap: 10px; min-width: 0; }
.bank-name h2, .bank-name > span:last-child { overflow-wrap: anywhere; }
/* Logo del banco sobre fondo blanco (muchos son oscuros o transparentes), o sus iniciales. */
.bank-logo { flex: none; width: 36px; height: 36px; border-radius: 10px; background: #fff; border: 1px solid var(--line); display: inline-grid; place-items: center; overflow: hidden; }
.bank-logo img { width: 100%; height: 100%; object-fit: contain; }
.bank-logo.lg { width: 44px; height: 44px; border-radius: 12px; }
.bank-logo.ini { background: hsl(var(--h) 55% 92%); color: hsl(var(--h) 55% 28%); font-weight: 700; font-size: 14px; letter-spacing: 0.02em; }
.bank-logo.lg.ini { font-size: 16px; }

/* Llamada: opciones tocables y barra oculta mientras dura */
.call-opts { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 4px 0 8px; }
.call-opts:empty { display: none; }
body.calling .nav { display: none; }
body.calling .main { padding-bottom: calc(24px + env(safe-area-inset-bottom)); }

/* Comportamiento de gasto: la cifra va debajo de su título, grande y sin desbordarse */
.kv-stack { list-style: none; margin: 8px 0 0; padding: 0; }
.kv-stack li { padding: 12px 0; border-top: 1px solid var(--line); display: grid; gap: 2px; }
.kv-stack li:first-child { border-top: 0; }
.kv-k { font-weight: 600; }
.kv-v { font-size: 20px; line-height: 1.25; overflow-wrap: anywhere; }

/* Inicio: componentes del puntaje de salud */
.health-parts { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 10px; }

/* Punto de partida (cuenta nueva) */
.onb { position: fixed; inset: 0; z-index: 9500; background: rgb(0 0 0 / 0.55); display: grid; place-items: end center; padding: 0; overflow-y: auto; overscroll-behavior: contain; }
.onb-card { background: var(--surface); color: var(--ink); width: 100%; max-width: 520px; border-radius: 22px 22px 0 0; padding: 22px 20px calc(22px + env(safe-area-inset-bottom)); box-shadow: 0 -10px 40px rgb(0 0 0 / 0.3); }
.onb-card h2 { font-size: 22px; }
@media (min-width: 700px) { .onb { place-items: center; padding: 24px; } .onb-card { border-radius: 22px; } }

/* Llamada entrante del asesor (pantalla completa, como WhatsApp o Instagram) */
.incall { position: fixed; inset: 0; z-index: 9800; display: grid; place-items: center; padding: 24px 16px calc(24px + env(safe-area-inset-bottom)); background: radial-gradient(120% 90% at 50% 20%, #1d2a2a 0%, #0b0f10 70%); color: #fff; animation: incall-in 0.25s ease-out; }
.incall-card { width: 100%; max-width: 380px; min-height: min(640px, 92vh); display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; }
.incall-kind { font-size: 13px; letter-spacing: 0.04em; opacity: 0.75; margin-top: 8px; }
.incall-avatar { position: relative; width: 132px; height: 132px; margin: 28px 0 14px; border-radius: 50%; background: #fff; display: grid; place-items: center; }
.incall-avatar svg { width: 96px; height: 96px; }
.incall-ring { position: absolute; inset: 0; border-radius: 50%; border: 2px solid rgb(255 255 255 / 0.55); animation: incall-pulse 1.8s ease-out infinite; }
.incall-ring.r2 { animation-delay: 0.9s; }
.incall h2 { font-size: 28px; margin: 0; color: #fff; }
.incall-why { font-size: 16px; opacity: 0.9; max-width: 30ch; margin: 0; }
.incall-note { font-size: 13px; opacity: 0.6; margin: 0; }
.incall-actions { margin-top: auto; width: 100%; display: flex; justify-content: space-around; padding-bottom: 12px; }
.incall-act { display: flex; flex-direction: column; align-items: center; gap: 8px; font-size: 14px; }
.incall-btn { width: 72px; height: 72px; border-radius: 50%; border: 0; display: grid; place-items: center; color: #fff; cursor: pointer; box-shadow: 0 8px 24px rgb(0 0 0 / 0.35); }
.incall-btn svg { width: 30px; height: 30px; }
.incall-btn.yes { background: #22a861; animation: incall-shake 1.6s ease-in-out infinite; }
.incall-btn.no { background: #e5484d; }
.incall-btn.no svg { transform: rotate(135deg); }
.incall-btn:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
@keyframes incall-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes incall-pulse { from { transform: scale(1); opacity: 0.8; } to { transform: scale(1.7); opacity: 0; } }
@keyframes incall-shake { 0%, 70%, 100% { transform: rotate(0); } 75% { transform: rotate(-12deg); } 85% { transform: rotate(12deg); } 95% { transform: rotate(-6deg); } }
@media (prefers-reduced-motion: reduce) { .incall-ring, .incall-btn.yes, .incall { animation: none; } }

/* Lo que no gastó en la semana (Dinero → tarjeta de hoy) */
.week-box { border-top: 1px solid var(--line, rgb(128 128 128 / 0.25)); padding-top: 12px; }
.week-opts { display: flex; flex-wrap: wrap; gap: 8px; }
.week-opts .btn { white-space: normal; text-align: left; }

/* Esqueleto de carga: la silueta de cada sección mientras llegan los datos */
.sk { display: block; height: 12px; border-radius: 6px; background: linear-gradient(90deg, var(--line) 0%, var(--surface-2) 50%, var(--line) 100%); background-size: 200% 100%; animation: sk-shine 1.4s ease-in-out infinite; }
.sk.w15 { width: 15%; } .sk.w25 { width: 25%; } .sk.w30 { width: 30%; } .sk.w35 { width: 35%; } .sk.w40 { width: 40%; } .sk.w45 { width: 45%; }
.sk.w50 { width: 50%; } .sk.w55 { width: 55%; } .sk.w60 { width: 60%; } .sk.w70 { width: 70%; } .sk.w80 { width: 80%; } .sk.w90 { width: 90%; }
.sk-n { height: 32px; border-radius: 8px; }
.sk-dot { width: 36px; height: 36px; border-radius: 50%; flex: none; }
.sk-chip { width: 72px; height: 32px; border-radius: 999px; }
.sk-back { height: 14px; margin-bottom: 18px; }
.sk-card { display: grid; gap: 12px; }
.sk-col { display: grid; gap: 8px; flex: 1; min-width: 0; }
.sk-row { display: flex; align-items: center; gap: 12px; padding: 4px 0; }
.sk-row > .sk.w15 { flex: none; width: 56px; }
.sk-trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.sk-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.sk-chat { display: grid; gap: 14px; }
.sk-bubble { height: 52px; border-radius: 16px; }
.sk-bubble.sk-me { justify-self: end; }
.sk-page .page-head .sk-col { gap: 10px; }
.sk-page .page-head .sk.w40 { height: 24px; border-radius: 8px; }
.sk-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@keyframes sk-shine { from { background-position: 100% 0; } to { background-position: -100% 0; } }
@media (prefers-reduced-motion: reduce) { .sk { animation: none; } }

/* Animaciones suaves: cada sección entra con un leve desplazamiento y sus bloques aparecen escalonados. Solo opacidad y
   transform (las anima la tarjeta gráfica, no cuestan batería). Nunca se anima .shell ni .nav: la barra de abajo es fija y
   un transform en un contenedor suyo la movería. Al terminar, transform vuelve a «none». */
@media (prefers-reduced-motion: no-preference) {
  .main > * { animation: zv-enter 0.24s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
  .main > *:nth-child(2) { animation-delay: 0.03s; }
  .main > *:nth-child(3) { animation-delay: 0.06s; }
  .main > *:nth-child(n + 4) { animation-delay: 0.09s; }
  .stack > .card, .learn-grid > * { animation: zv-enter 0.26s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
  .stack > .card:nth-child(2) { animation-delay: 0.04s; }
  .stack > .card:nth-child(3) { animation-delay: 0.08s; }
  .stack > .card:nth-child(n + 4) { animation-delay: 0.12s; }
  .btn, .chip, .subnav a, .report-item, .learn-card { transition: transform 0.14s ease, background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease; }
  .btn:active, .report-item:active, .learn-card:active, .subnav a:active { transform: scale(0.98); }
  .nav a { transition: background-color 0.2s ease, color 0.2s ease; }
  .nav a:active { transform: scale(0.94); }
  dialog[open] { animation: zv-pop 0.2s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
}
@keyframes zv-enter { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes zv-pop { from { opacity: 0; transform: translateY(10px) scale(0.98); } to { opacity: 1; transform: none; } }

/* «Un último paso» (aceptación de términos y uso de datos con IA) */
.consent-box { display: grid; gap: 16px; }
.consent-check { align-items: flex-start; gap: 12px; line-height: 1.5; }
.consent-check input { margin-top: 3px; flex: none; width: 20px; height: 20px; }
.consent-links { display: flex; gap: 24px; flex-wrap: wrap; }
.consent-links a { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.consent-links .i { width: 16px; height: 16px; }

/* Metas (Dinero): nada se desborda en el celular; los nombres largos bajan de línea y las cifras no se cortan */
.goal { display: grid; gap: 10px; padding: 16px 0; border-top: 1px solid var(--line); min-width: 0; }
.goal:first-of-type { border-top: 0; }
.goal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; min-width: 0; }
.goal-name { min-width: 0; overflow-wrap: anywhere; }
.goal-head .chip { flex: none; }
.goal-amounts { display: flex; align-items: baseline; justify-content: space-between; gap: 8px 12px; flex-wrap: wrap; }
.goal-amounts .num { overflow-wrap: anywhere; }
.goal-pct { font-weight: 700; }
.goal-options { margin: 8px 0 0; padding-left: 18px; display: grid; gap: 6px; }
.goal-aporte:empty { display: none; }
.goal-aporte-form { padding: 12px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface-2); }
.chip.bad { background: color-mix(in srgb, #e5484d 16%, transparent); }

/* Cuenta por secciones: menú tipo ajustes del teléfono (filas tocables de 52 px, nada se corta ni se desborda) */
.acc-hero { display: flex; align-items: center; gap: 14px; text-decoration: none; color: inherit; margin-bottom: 22px; min-width: 0; }
.acc-hero-card { display: flex; align-items: center; gap: 14px; min-width: 0; }
.avatar { flex: none; width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center; background: var(--surface-2); border: 1px solid var(--line-strong); font-weight: 700; font-size: 18px; letter-spacing: 0.02em; }
.acc-who { display: grid; gap: 3px; min-width: 0; flex: 1; }
.acc-who b { overflow-wrap: anywhere; font-size: 17px; }
.acc-who .small { overflow-wrap: anywhere; }
.acc-who .chip { justify-self: start; margin-top: 4px; }
.acc-link { font-size: 14px; font-weight: 600; margin-top: 4px; }
.acc-group { margin-bottom: 22px; }
.acc-title { font-size: 15px; font-weight: 700; margin: 0 0 10px 4px; color: var(--ink); }
.acc-list { padding: 4px 0; }
.acc-row { display: flex; align-items: center; gap: 14px; min-height: 52px; padding: 10px 18px; text-decoration: none; color: inherit; border-top: 1px solid var(--line); min-width: 0; }
.acc-row:first-child { border-top: 0; }
.acc-row:active { background: var(--surface-2); }
.acc-ico { flex: none; width: 22px; height: 22px; display: grid; place-items: center; color: var(--muted); }
.acc-ico .i { width: 20px; height: 20px; }
.acc-label { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.acc-val { flex: none; max-width: 40%; color: var(--muted); font-size: 14px; text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acc-go { flex: none; color: var(--muted); font-size: 22px; line-height: 1; }
.acc-logout { margin: 6px 0 12px; }

/* Planes: tarjetas que se apilan en el celular y quedan lado a lado en pantallas grandes */
.plan-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: 14px; }
.plan-card { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.plan-card.is-current { border-color: var(--ink); }
.plan-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.plan-top h3 { margin: 0; font-size: 18px; }
.plan-price { margin: 0; font-size: 22px; font-weight: 700; }
.plan-feats { margin: 0; padding-left: 18px; display: grid; gap: 8px; flex: 1; }
.plan-feats li { overflow-wrap: anywhere; }
.plan-offer { display: grid; gap: 6px; border-color: var(--ink); }
.plan-up { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.plan-up > div { flex: 1 1 220px; min-width: 0; }
.plan-up p { margin: 4px 0 0; }
.plan-card { transition: box-shadow 0.4s; }
.plan-card.flash { box-shadow: 0 0 0 2px var(--ink); }
#duo-form { gap: 8px; }
#duo-form .input { flex: 1 1 220px; min-width: 0; }

/* ── gráficos de gastos (Dinero → Movimientos): una sola serie, barras finas con punta redondeada sobre la base ── */
.vblock { display: grid; gap: 8px; }
.vblock p { margin: 0; }
.vchart { display: flex; align-items: flex-end; gap: 2px; height: 132px; padding-bottom: 20px; position: relative; border-bottom: 1px solid var(--line); }
.vcol { all: unset; box-sizing: border-box; flex: 1 1 0; min-width: 0; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; position: relative; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.vcol:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; border-radius: 4px; }
.vbar { display: block; width: min(70%, 28px); min-height: 0; background: color-mix(in srgb, var(--ink) 38%, transparent); border-radius: 4px 4px 0 0; transition: background 0.15s; }
.vcol.now .vbar { background: var(--ink); }
.vcol.on .vbar, .vcol:hover .vbar { background: var(--ink); }
.vlab { position: absolute; bottom: -19px; font-size: 11px; color: var(--muted); white-space: nowrap; }
.vread { margin: 0; min-height: 1.4em; }
.vtable summary { cursor: pointer; color: var(--muted); font-weight: 600; }
.vtable table { width: 100%; border-collapse: collapse; margin-top: 8px; }
.vtable th, .vtable td { text-align: left; padding: 6px 4px; border-top: 1px solid var(--line); }
.vtable td.num, .vtable th:not(:first-child) { text-align: right; }
.switch-row { display: flex; align-items: center; gap: 10px; font-weight: 600; cursor: pointer; }
.switch-row input { width: 22px; height: 22px; accent-color: var(--ink); flex: 0 0 auto; }
.conv-label { display: grid; gap: 2px; }
.archived-log { display: flex; flex-direction: column; gap: 14px; }
/* Botones de la videollamada exclusivos de Pro Plus (en los demás planes se ven con su etiqueta) */
.ctrl { position: relative; }
.ctrl.locked { opacity: 0.6; }
.ctrl-tag { position: absolute; top: -8px; right: -4px; font-style: normal; font-size: 9.5px; font-weight: 700; line-height: 1; padding: 3px 6px; border-radius: var(--r-pill); background: var(--ink); color: var(--bg); white-space: nowrap; }
.fp-pay { border: 1px solid var(--line); border-radius: var(--r); padding: 14px; margin: 0; min-width: 0; }
.fp-pay legend { padding: 0 6px; }
/* Planes en la app: mismo contenido que el sitio (del más básico al más completo; Pro Plus destacado) */
.plan-tag { margin: 0 0 2px; font-size: 11.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.plan-price.soon { font-size: 16px; color: var(--muted); }
.plan-hook { margin: 0; font-weight: 700; line-height: 1.35; }
.plan-vs { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.plan-vs li { padding: 6px 10px; border-radius: 10px; background: var(--surface-2); font-size: 13.5px; font-weight: 600; overflow-wrap: anywhere; }
.plan-vs li::before { content: "↑ "; font-weight: 800; }
.plan-base { margin: 0; font-weight: 700; }
.plan-excl { margin: 0; padding: 10px 12px; border-radius: 12px; border: 1.5px solid var(--ink); font-size: 14px; line-height: 1.45; }
.plan-excl b { display: block; font-size: 11.5px; letter-spacing: 0.05em; text-transform: uppercase; margin-bottom: 3px; }
.plan-more summary { cursor: pointer; font-weight: 700; font-size: 14px; }
.plan-more p { margin: 6px 0 0; }
.plan-card.featured { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
@media (max-width: 380px) { .cal-day { min-height: 0; font-size: 13px; } } /* en pantallas angostas el alto mínimo ensanchaba los días hasta pegarlos */

/* ── guía de cada tarea del plan ── */
a.t-link { color: inherit; text-decoration: none; display: block; }
a.t-link:hover { text-decoration: underline; }
.plan-how summary { cursor: pointer; list-style: none; }
.plan-how summary::-webkit-details-marker { display: none; }
.plan-how summary::after { content: ' +'; color: var(--muted); }
.plan-how[open] summary::after { content: ' −'; }
.plan-how ol { padding-left: 18px; display: grid; gap: 8px; }
.guide-steps { margin: 12px 0 0; padding: 0; list-style: none; display: grid; gap: 10px; counter-reset: paso; }
.guide-steps li { counter-increment: paso; }
.guide-steps .check { align-items: flex-start; gap: 10px; }
.guide-steps .check input { margin-top: 3px; flex: none; }
.guide-steps .check input:checked + span { color: var(--muted); text-decoration: line-through; }
a.task-video { text-decoration: none; color: inherit; align-items: center; gap: 12px; }
a.task-video .i { width: 16px; height: 16px; vertical-align: -3px; }