/* Cristal — sistema visual (ver design-system/cristal/MASTER.md)
   Layout: inicio de cada rol = tarjeta oscura con número grande + accesos + lista del día;
   pantallas internas = título grande y tarjetas blancas; barra inferior con píldora activa.
   Movimiento estilo Apple: resortes sin rebote, entrada escalonada, todo interrumpible. */
:root {
  /* Base */
  --bg: #FFFFFF;
  --bg-grouped: #F2F5F9;
  --surface: #FFFFFF;
  --surface-2: #F5F8FB;
  --line: #E3E9F0;
  --fg: #0B1B2B;
  --fg-2: #5B6B7D;
  --ink-1: #0A1724;
  --ink-2: #123049;

  /* Familia de color: aqua, cielo, índigo, gris; coral solo para urgencias */
  --teal: #0D9488;   --teal-hi: #2DD4BF;   --soft-teal: #E0F6F2;
  --sky: #0284C7;    --sky-hi: #38BDF8;    --soft-sky: #E2F1FC;
  --indigo: #4F46E5; --indigo-hi: #818CF8; --soft-indigo: #E9E8FD;
  --slate: #475569;  --slate-hi: #94A3B8;  --soft-slate: #EEF1F5;
  --coral: #E11D48;  --coral-hi: #FB7185;  --soft-coral: #FDE6EB;
  --amber: #B45309;  --soft-amber: #FDF0D5;
  --brand: linear-gradient(135deg, #14B8A6 0%, #0EA5E9 52%, #6366F1 100%);
  --glow: rgba(45, 212, 191, .45); --glow-2: rgba(99, 102, 241, .35);
  --primary: #0B1B2B; --primary-ink: #FFFFFF;     /* botón principal: tinta oscura */
  --accent: #0284C7; --accent-soft: #E2F1FC;      /* enlaces y "en revisión" */
  --ok: #0F8A5F;  --ok-soft: #DDF5EA;
  --warn: #B45309; --warn-soft: #FDF0D5;
  --crit: #E11D48; --crit-soft: #FDE4EA;
  --phone-frame: #0B1B2B;
  --shadow-card: 0 1px 1px rgba(11, 27, 43, .04), 0 10px 28px -6px rgba(11, 27, 43, .12);
  --shadow-float: 0 12px 32px -8px rgba(11, 27, 43, .25);
  --halo-1: rgba(45, 212, 191, .30); --halo-2: rgba(56, 189, 248, .26); --halo-3: rgba(129, 140, 248, .24);
  --chart-1: #0D9488; --chart-2: #0EA5E9; --chart-3: #6366F1; --chart-4: #67E8F9; --chart-5: #1E3A8A; --chart-6: #A5B4C8;

  --font: "Plus Jakarta Sans", -apple-system, "SF Pro Text", "Segoe UI", Roboto, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, Consolas, monospace;
  --fs-xs: .75rem; --fs-sm: .875rem; --fs-md: 1rem; --fs-lg: 1.25rem; --fs-xl: 1.875rem; --fs-2xl: 2.75rem;
  --r-sm: 12px; --r-md: 20px; --r-lg: 28px;

  /* Movimiento (Apple): curva de iOS sin rebote para todo; resorte con rebote solo en "pops" */
  --ease: cubic-bezier(.32, .72, 0, 1);
  --spring: cubic-bezier(.34, 1.4, .64, 1);
  --t-fast: 160ms; --t-med: 380ms; --t-slow: 620ms;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #07111C; --bg-grouped: #07111C; --surface: #111D2B; --surface-2: #0D1825; --line: #1E2D3F;
    --fg: #EAF2FA; --fg-2: #93A4B8; --ink-1: #0E2233; --ink-2: #183F5E;
    --soft-teal: #0F2F2C; --soft-sky: #0F2638; --soft-indigo: #1C1E40; --soft-slate: #172231; --soft-coral: #3A1420; --soft-amber: #33260B;
    --primary: #EAF2FA; --primary-ink: #07111C; --accent: #38BDF8; --accent-soft: #0F2638;
    --ok: #34D399; --ok-soft: #0D2E22; --warn: #FBBF24; --warn-soft: #33260B; --crit: #FB7185; --crit-soft: #3A1420;
    --phone-frame: #000; --shadow-card: 0 10px 28px -6px rgba(0,0,0,.5); --shadow-float: 0 12px 32px -8px rgba(0,0,0,.6);
    --halo-1: rgba(45, 212, 191, .14); --halo-2: rgba(56, 189, 248, .12); --halo-3: rgba(129, 140, 248, .12);
    --chart-4: #22D3EE; --chart-5: #93C5FD; --chart-6: #475569;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #07111C; --bg-grouped: #07111C; --surface: #111D2B; --surface-2: #0D1825; --line: #1E2D3F;
  --fg: #EAF2FA; --fg-2: #93A4B8; --ink-1: #0E2233; --ink-2: #183F5E;
  --soft-teal: #0F2F2C; --soft-sky: #0F2638; --soft-indigo: #1C1E40; --soft-slate: #172231; --soft-coral: #3A1420; --soft-amber: #33260B;
  --primary: #EAF2FA; --primary-ink: #07111C; --accent: #38BDF8; --accent-soft: #0F2638;
  --ok: #34D399; --ok-soft: #0D2E22; --warn: #FBBF24; --warn-soft: #33260B; --crit: #FB7185; --crit-soft: #3A1420;
  --phone-frame: #000; --shadow-card: 0 10px 28px -6px rgba(0,0,0,.5); --shadow-float: 0 12px 32px -8px rgba(0,0,0,.6);
  --halo-1: rgba(45, 212, 191, .14); --halo-2: rgba(56, 189, 248, .12); --halo-3: rgba(129, 140, 248, .12);
  --chart-4: #22D3EE; --chart-5: #93C5FD; --chart-6: #475569;
  color-scheme: dark;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { height: 100%; }
body { margin: 0; background: var(--bg); color: var(--fg); font-family: var(--font); font-size: var(--fs-md); line-height: 1.5; -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4 { margin: 0; line-height: 1.2; text-wrap: balance; }
p { margin: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 3px solid var(--sky-hi); outline-offset: 2px; border-radius: 10px; }
.num { font-variant-numeric: tabular-nums; }
.mono { font-family: var(--mono); font-size: .92em; }
svg.lucide { width: 20px; height: 20px; stroke-width: 2; flex: none; }

/* ---------- Shell de escritorio ---------- */
.shell { display: grid; grid-template-columns: 300px 1fr; min-height: 100%; }
.control { display: flex; flex-direction: column; gap: 20px; padding-block: 24px; padding-left: max(20px, env(safe-area-inset-left, 0px)); padding-right: 20px; background: var(--surface); border-right: 1px solid var(--line); height: 100vh; position: sticky; top: 0; overflow-y: auto; z-index: 2; }
.brand { display: flex; align-items: center; gap: 12px; }
.brand strong { display: block; font-size: var(--fs-lg); letter-spacing: -.02em; }
.brand small { color: var(--fg-2); font-size: var(--fs-xs); }
.brand-mark { width: 40px; height: 40px; border-radius: 12px; background: var(--brand); position: relative; overflow: hidden; flex: none; box-shadow: 0 6px 16px rgba(14, 165, 233, .35); }
.brand-mark::before { content: ""; position: absolute; inset: 0; background: linear-gradient(160deg, rgba(255,255,255,.55), rgba(255,255,255,0) 55%); }
.brand-mark::after { content: ""; position: absolute; inset: 10px; border: 2.5px solid #fff; border-radius: 5px; transform: rotate(45deg); }
.ctl-group { display: flex; flex-direction: column; gap: 8px; }
.ctl-group.grow { flex: 1; min-height: 0; }
.ctl-label { font-size: var(--fs-xs); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--fg-2); }
.count { font-weight: 600; letter-spacing: 0; text-transform: none; }
.seg { display: grid; grid-template-columns: 1fr 1fr; background: var(--surface-2); border-radius: 12px; padding: 4px; gap: 4px; }
.seg button { border: 0; background: transparent; padding: 8px; border-radius: 9px; font-weight: 700; font-size: var(--fs-sm); min-height: 40px; color: var(--fg-2); transition: background var(--t-fast) var(--ease), color var(--t-fast); }
.seg button[aria-selected="true"] { background: var(--surface); box-shadow: var(--shadow-card); color: var(--fg); }
.roles { display: grid; gap: 6px; }
.role-btn { display: flex; align-items: center; gap: 12px; text-align: left; border: 1px solid transparent; background: transparent; border-radius: 14px; padding: 8px 10px; min-height: 52px; transition: background var(--t-fast) var(--ease); }
.role-btn:hover { background: var(--surface-2); }
.role-btn small { display: block; color: var(--fg-2); font-size: var(--fs-xs); }
.role-btn[aria-pressed="true"] { background: var(--surface-2); border-color: var(--line); }
.screen-map { display: flex; flex-direction: column; gap: 2px; overflow-y: auto; padding-right: 4px; }
.screen-map h4 { font-size: var(--fs-xs); color: var(--fg-2); font-weight: 700; margin: 10px 0 4px; }
.screen-map button { display: flex; justify-content: space-between; align-items: center; gap: 8px; border: 0; background: transparent; text-align: left; padding: 7px 10px; border-radius: 9px; font-size: var(--fs-sm); min-height: 36px; }
.screen-map button:hover { background: var(--surface-2); }
.screen-map button[aria-current="true"] { background: var(--fg); color: var(--bg); font-weight: 700; }
.screen-map button[aria-current="true"] .id { color: inherit; opacity: .7; }
.screen-map .id { font-family: var(--mono); font-size: var(--fs-xs); color: var(--fg-2); }
.screen-map .off { font-size: 10px; font-weight: 700; color: var(--warn); background: var(--warn-soft); border-radius: 99px; padding: 1px 6px; }
.ctl-foot { display: flex; flex-wrap: wrap; gap: 8px; }
.ghost { border: 1px solid var(--line); background: var(--surface); border-radius: 10px; padding: 8px 12px; font-size: var(--fs-sm); font-weight: 600; min-height: 40px; }
.ghost:hover { border-color: var(--fg-2); }
.note { font-size: var(--fs-xs); color: var(--fg-2); }
.stage { position: relative; display: grid; place-items: center; padding-block: 28px; padding-left: 24px; padding-right: max(24px, env(safe-area-inset-right, 0px)); min-width: 0; overflow: hidden;
  background: radial-gradient(40% 45% at 35% 30%, var(--halo-1), transparent 70%), radial-gradient(40% 45% at 68% 55%, var(--halo-2), transparent 70%), radial-gradient(35% 40% at 45% 85%, var(--halo-3), transparent 70%), var(--bg); }
.map-fab { display: none; }

/* ---------- Teléfono ---------- */
.phone { position: relative; width: 390px; height: 820px; max-height: calc(100vh - 56px); background: var(--bg-grouped); border: 11px solid var(--phone-frame); border-radius: 54px; overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 40px 80px rgba(11, 27, 43, .25); }
.phone.home::before { content: ""; position: absolute; inset: 0 0 auto; height: 260px; pointer-events: none; opacity: .6;
  background: radial-gradient(70% 60% at 15% 0%, var(--halo-1), transparent 70%), radial-gradient(60% 60% at 95% 10%, var(--halo-3), transparent 70%); }
.phone-status { position: relative; display: flex; justify-content: space-between; align-items: center; padding: 10px 26px 0; font-size: 13px; font-weight: 700; height: 34px; flex: none; z-index: 1; }
.phone-status .notch { width: 110px; height: 30px; background: var(--phone-frame); border-radius: 20px; }
.app-top { position: relative; z-index: 1; flex: none; display: flex; align-items: center; gap: 8px; padding: 6px 12px 4px; min-height: 52px; }
.phone.home .app-top { display: none; }
.app-top .back { display: inline-flex; align-items: center; border: 0; background: none; color: var(--accent); font-weight: 600; font-size: var(--fs-md); min-height: 44px; padding: 0 8px 0 0; transition: opacity var(--t-fast); }
.app-top .back:active { opacity: .5; }
.app-top .back .lucide { width: 26px; height: 26px; stroke-width: 2.4; }
.app-top .spacer { flex: 1; }
.icon-btn, .round { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; border: 0; background: var(--surface); box-shadow: var(--shadow-card); flex: none; position: relative; transition: transform var(--t-fast) var(--ease); }
.icon-btn:active, .round:active { transform: scale(.92); }
.icon-btn .dot, .round .dot { position: absolute; top: 9px; right: 10px; width: 9px; height: 9px; border-radius: 50%; background: var(--coral); border: 2px solid var(--surface); }
.role-chip { font-size: var(--fs-xs); font-weight: 700; padding: 6px 12px; border-radius: 99px; background: var(--surface); box-shadow: var(--shadow-card); }
.app-body { position: relative; z-index: 1; flex: 1; overflow-y: auto; padding: 0 16px 112px; display: flex; flex-direction: column; gap: 16px; }
.phone.home .app-body { padding-top: 6px; }
.app-body > * { flex-shrink: 0; }
.big-title { font-size: var(--fs-xl); font-weight: 800; letter-spacing: -.035em; padding: 2px 4px 0; }
.big-title small { display: block; font-size: var(--fs-sm); font-weight: 500; color: var(--fg-2); letter-spacing: 0; margin-top: 2px; }

/* ---------- Íconos (cuadrito suave con glifo de color) ---------- */
.tile { width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; flex: none; background: var(--soft-teal); color: var(--teal); }
.tile .lucide { width: 24px; height: 24px; }
.tile.sm { width: 32px; height: 32px; border-radius: 10px; }
.tile.sm .lucide { width: 17px; height: 17px; }
.tile.lg { width: 72px; height: 72px; border-radius: 22px; }
.tile.lg .lucide { width: 32px; height: 32px; }
.t-teal { background: var(--soft-teal); color: var(--teal); }
.t-sky { background: var(--soft-sky); color: var(--sky); }
.t-indigo { background: var(--soft-indigo); color: var(--indigo); }
.t-slate { background: var(--soft-slate); color: var(--slate); }
.t-coral { background: var(--soft-coral); color: var(--coral); }
.t-brand { background: var(--brand); color: #fff; }
.app-icon { border: 0; background: none; padding: 0; display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 11px; font-weight: 600; line-height: 1.2; text-align: center; color: var(--fg); position: relative; min-height: 78px; transition: transform var(--t-fast) var(--ease); }
.app-icon:active { transform: scale(.9); }
.badge { position: absolute; top: -6px; right: calc(50% - 34px); min-width: 22px; height: 22px; padding: 0 6px; border-radius: 99px; background: var(--coral); color: #fff; font-size: 12px; font-weight: 800; display: grid; place-items: center; border: 2px solid var(--surface); z-index: 1; }

/* ---------- Inicio ---------- */
.home-top { display: flex; align-items: center; gap: 10px; padding: 4px 2px 0; }
.home-top .me { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-weight: 800; font-size: 13px; background: var(--brand); box-shadow: 0 6px 14px rgba(14, 165, 233, .35); border: 2px solid var(--surface); flex: none; padding: 0; }
.home-top .who { flex: 1; min-width: 0; line-height: 1.25; }
.home-top .who span { display: block; font-size: var(--fs-xs); color: var(--fg-2); font-weight: 600; }
.home-top .who strong { font-size: var(--fs-sm); }
.hello { font-size: 1.85rem; font-weight: 800; letter-spacing: -.035em; line-height: 1.1; padding: 0 2px; }
.hello em { font-style: normal; background: var(--brand); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* Tarjeta principal oscura (inicio y pantallas clave) */
.hero { position: relative; overflow: hidden; border-radius: var(--r-lg); padding: 20px; color: #fff; display: flex; flex-direction: column; gap: 14px;
  background: radial-gradient(120% 90% at 100% 0%, var(--glow), transparent 55%), radial-gradient(90% 80% at 0% 100%, var(--glow-2), transparent 60%), linear-gradient(160deg, var(--ink-2), var(--ink-1));
  box-shadow: 0 24px 48px -12px rgba(10, 23, 36, .55); }
.hero::after { content: ""; position: absolute; right: -40px; top: -40px; width: 170px; height: 170px; border: 22px solid rgba(255,255,255,.06); border-radius: 40px; transform: rotate(45deg); pointer-events: none; }
.hero > * { position: relative; z-index: 1; }
.hero .top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.hero .k { font-size: var(--fs-xs); font-weight: 600; color: rgba(255,255,255,.72); }
.hero .tag { font-size: 11px; font-weight: 800; padding: 4px 10px; border-radius: 99px; background: rgba(251, 191, 36, .18); color: #FCD34D; white-space: nowrap; }
.hero .tag.ok { background: rgba(52, 211, 153, .18); color: #6EE7B7; }
.hero .tag.info { background: rgba(56, 189, 248, .18); color: #7DD3FC; }
.hero .big { font-size: var(--fs-2xl); font-weight: 800; letter-spacing: -.045em; line-height: 1; font-variant-numeric: tabular-nums; }
.hero .big small { font-size: var(--fs-sm); font-weight: 600; letter-spacing: 0; color: rgba(255,255,255,.6); margin-left: 6px; }
.hero .bar { height: 8px; border-radius: 99px; background: rgba(255,255,255,.14); overflow: hidden; }
.hero .bar span { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, #2DD4BF, #38BDF8, #818CF8); box-shadow: 0 0 12px rgba(56, 189, 248, .6); transform-origin: left; }
.hero .bar-k { display: flex; justify-content: space-between; gap: 8px; font-size: 11px; color: rgba(255,255,255,.7); font-weight: 600; margin-top: -6px; }
.hero .muted, .hero .tiny { color: rgba(255,255,255,.72); }
.hero .bar-k .lucide { width: 12px; height: 12px; vertical-align: -2px; }
.hero .split-bar { background: rgba(255,255,255,.1); }
.minis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.mini { background: #fff; color: #0B1B2B; border-radius: 16px; padding: 10px; display: flex; flex-direction: column; gap: 2px; border: 0; text-align: left; min-height: 78px; transition: transform var(--t-fast) var(--ease); }
.mini:active { transform: scale(.95); }
.mini .lucide { width: 16px; height: 16px; margin-bottom: 4px; }
.mini b { font-size: var(--fs-md); font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; line-height: 1.1; }
.mini span { font-size: 10.5px; color: #5B6B7D; font-weight: 600; }
.hero .btn, .hero .cta { background: #fff; color: #0B1B2B; box-shadow: none; }

/* Secciones, accesos y lista del día */
.sec-head { display: flex; justify-content: space-between; align-items: center; padding: 0 4px; margin-bottom: -6px; }
.sec-head h2 { font-size: var(--fs-md); font-weight: 800; letter-spacing: -.01em; }
.sec-head button { border: 0; background: none; font-size: var(--fs-xs); font-weight: 700; color: var(--fg-2); min-height: 32px; }
.qa { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px 8px; background: var(--surface); border-radius: 22px; padding: 16px 8px; box-shadow: var(--shadow-card); }
.feed { background: var(--surface); border-radius: 22px; padding: 4px 14px; box-shadow: var(--shadow-card); }
.feed-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; min-height: 66px; border: 0; background: none; width: 100%; text-align: left; transition: opacity var(--t-fast); }
.feed-row:active { opacity: .55; }
.feed-row + .feed-row { border-top: 1px solid var(--line); }
.state { width: 26px; height: 26px; border-radius: 50%; flex: none; display: grid; place-items: center; border: 2px solid var(--line); }
.state.done { background: var(--fg); border-color: var(--fg); color: var(--bg); }
.state.done .lucide { width: 14px; height: 14px; stroke-width: 3; }
.art { width: 48px; height: 48px; border-radius: 14px; flex: none; display: grid; place-items: center; color: #fff; position: relative; overflow: hidden; }
.art::after { content: ""; position: absolute; inset: 0; background: radial-gradient(80% 60% at 30% 20%, rgba(255,255,255,.35), transparent 60%); }
.art .lucide { width: 22px; height: 22px; position: relative; z-index: 1; }
.art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 2; }
.art:has(img)::after { display: none; }
.art-a { background: linear-gradient(140deg, #5EEAD4, #0D9488 60%, #0F766E); }
.art-b { background: linear-gradient(140deg, #7DD3FC, #0284C7 60%, #075985); }
.art-c { background: linear-gradient(140deg, #A5B4FC, #4F46E5 60%, #3730A3); }
.art-d { background: linear-gradient(140deg, #CBD5E1, #64748B 60%, #334155); }
.feed-row .txt { flex: 1; min-width: 0; }
.feed-row .txt strong { display: block; font-size: var(--fs-sm); font-weight: 700; }
.feed-row .txt span { font-size: var(--fs-xs); color: var(--fg-2); }
.next { font-size: 10.5px; font-weight: 800; padding: 4px 10px; border-radius: 99px; background: var(--fg); color: var(--bg); white-space: nowrap; }
.next.coral { background: var(--coral); color: #fff; }
.next.soft { background: var(--soft-sky); color: var(--sky); }

/* Barra inferior: píldora blanca flotante, la pestaña activa es una píldora oscura */
.tabbar { position: absolute; z-index: 5; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); display: flex; justify-content: space-between; gap: 4px; padding: 8px; border-radius: 99px; background: var(--surface); box-shadow: var(--shadow-float), 0 0 0 1px var(--line); }
.tabbar button { border: 0; background: transparent; display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; min-width: 48px; padding: 0 12px; border-radius: 99px; font-size: 13px; font-weight: 700; color: var(--fg-2); transition: background var(--t-med) var(--ease), color var(--t-med) var(--ease), padding var(--t-med) var(--ease), transform var(--t-fast) var(--ease); }
.tabbar button:active { transform: scale(.92); }
.tabbar button .label { display: none; }
.tabbar button[aria-current="page"] { background: var(--fg); color: var(--bg); padding: 0 18px 0 14px; }
.tabbar button[aria-current="page"] .label { display: inline; animation: label-in var(--t-med) var(--ease) both; }
.tabbar .tile { width: 22px; height: 22px; background: transparent; color: inherit; border-radius: 0; }
.tabbar .tile .lucide { width: 21px; height: 21px; }
.tabbar .sos { color: var(--coral); }
.tabbar .sos[aria-current="page"] { background: var(--coral); color: #fff; }

/* ---------- Componentes de pantallas internas ---------- */
.card { background: var(--surface); border-radius: var(--r-md); padding: 16px; display: flex; flex-direction: column; gap: 10px; box-shadow: var(--shadow-card); }
.card.flat { background: var(--surface); }
button.card { border: 0; text-align: left; transition: transform var(--t-fast) var(--ease); }
button.card:active { transform: scale(.98); }
.card h3 { font-size: var(--fs-md); font-weight: 800; letter-spacing: -.01em; }
.row { display: flex; align-items: center; gap: 12px; }
.row.between { justify-content: space-between; }
.stack { display: flex; flex-direction: column; gap: 10px; }
.muted { color: var(--fg-2); font-size: var(--fs-sm); }
.tiny { font-size: var(--fs-xs); color: var(--fg-2); }
.section-title { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin: 6px 4px -8px; }
.section-title h2 { font-size: var(--fs-md); font-weight: 800; letter-spacing: -.01em; }
.link { border: 0; background: none; color: var(--accent); font-weight: 700; font-size: var(--fs-sm); padding: 6px 0; min-height: 32px; }
.pill { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 800; padding: 4px 10px; border-radius: 99px; white-space: nowrap; }
.pill.ok { background: var(--ok-soft); color: var(--ok); }
.pill.warn { background: var(--warn-soft); color: var(--warn); }
.pill.crit { background: var(--crit-soft); color: var(--crit); }
.pill.info { background: var(--accent-soft); color: var(--accent); }
.pill.neutral { background: var(--surface-2); color: var(--fg-2); }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 0; border-radius: 16px; padding: 12px 18px; min-height: 52px; font-weight: 700; font-size: var(--fs-md); background: var(--primary); color: var(--primary-ink); transition: transform var(--t-fast) var(--ease), opacity var(--t-fast); }
.btn:active { transform: scale(.97); }
.btn.secondary { background: var(--soft-sky); color: var(--sky); }
.btn.outline { background: var(--surface); color: var(--fg); box-shadow: inset 0 0 0 1px var(--line); }
.btn.danger { background: var(--coral); color: #fff; }
.btn.block { width: 100%; }
.btn[disabled] { opacity: .35; cursor: not-allowed; }
.btn.sm { min-height: 38px; padding: 6px 12px; font-size: var(--fs-sm); border-radius: 12px; }
.list { display: flex; flex-direction: column; }
.list-item { display: flex; align-items: center; gap: 12px; padding: 10px 0; min-height: 60px; position: relative; }
.list-item + .list-item { border-top: 1px solid var(--line); }
.list-item .grow { flex: 1; min-width: 0; }
.list-item strong { display: block; font-size: var(--fs-sm); font-weight: 700; }
.list-item > .lucide:last-child { color: var(--slate-hi); }
button.list-item { border: 0; background: none; text-align: left; width: 100%; transition: opacity var(--t-fast); }
button.list-item + button.list-item, .list-item + button.list-item, button.list-item + .list-item { border-top: 1px solid var(--line); }
button.list-item:active { opacity: .55; }
.avatar { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; flex: none; font-weight: 800; font-size: var(--fs-xs); background: var(--soft-teal); color: var(--teal); }
.avatar .lucide { width: 20px; height: 20px; }
.avatar.accent { background: var(--soft-sky); color: var(--sky); }
.avatar.indigo { background: var(--soft-indigo); color: var(--indigo); }
.avatar.warn { background: var(--soft-amber); color: var(--amber); }
.avatar.crit { background: var(--soft-coral); color: var(--coral); }
.avatar.ok { background: var(--soft-teal); color: var(--teal); }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.chips { display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 6px; scrollbar-width: none; }
.chip { border: 0; background: var(--surface); box-shadow: var(--shadow-card); border-radius: 99px; padding: 8px 16px; font-size: var(--fs-sm); font-weight: 700; white-space: nowrap; min-height: 40px; transition: background var(--t-med) var(--ease), color var(--t-med) var(--ease), transform var(--t-fast) var(--ease); }
.chip:active { transform: scale(.94); }
.chip[aria-pressed="true"] { background: var(--fg); color: var(--bg); }
.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-size: var(--fs-sm); font-weight: 700; padding-left: 4px; }
.field input, .field select, .field textarea { border: 0; box-shadow: var(--shadow-card), inset 0 0 0 1px var(--line); background: var(--surface); border-radius: 16px; padding: 12px 14px; min-height: 52px; width: 100%; transition: box-shadow var(--t-med) var(--ease); }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; box-shadow: 0 0 0 4px var(--soft-sky), inset 0 0 0 1.5px var(--sky-hi); }
.field textarea { min-height: 96px; resize: vertical; }
.switch { position: relative; width: 51px; height: 31px; flex: none; }
.switch input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; z-index: 1; }
.switch span { position: absolute; inset: 0; border-radius: 99px; background: var(--line); transition: background var(--t-med) var(--ease); }
.switch span::after { content: ""; position: absolute; top: 2px; left: 2px; width: 27px; height: 27px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(0,0,0,.2); transition: transform var(--t-med) var(--spring); }
.switch input:checked + span { background: #34C759; }
.switch input:checked + span::after { transform: translateX(20px); }
.switch input:focus-visible + span { outline: 3px solid var(--sky-hi); outline-offset: 2px; }
.banner { display: flex; gap: 12px; align-items: flex-start; padding: 14px; border-radius: 18px; font-size: var(--fs-sm); }
.banner.ok { background: var(--ok-soft); color: var(--ok); }
.banner.warn { background: var(--warn-soft); color: var(--warn); }
.banner.info { background: var(--accent-soft); color: var(--accent); }
.banner.crit { background: var(--crit-soft); color: var(--crit); }
.banner p { color: var(--fg); }
.banner strong { display: block; }
.kv { display: grid; grid-template-columns: 1fr auto; gap: 8px 12px; font-size: var(--fs-sm); margin: 0; }
.kv dt { color: var(--fg-2); }
.kv dd { margin: 0; text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
.hero .kv dt { color: rgba(255,255,255,.7); }
.example-tag { align-self: center; font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--fg-2); padding: 2px 8px; }

/* Barra "a dónde va tu cuota" */
.split-bar { display: flex; height: 14px; border-radius: 99px; overflow: hidden; gap: 3px; }
.split-bar span { display: block; height: 100%; border-radius: 99px; transform-origin: left; }
.legend { display: grid; gap: 10px; }
.legend-row { display: grid; grid-template-columns: 12px 1fr auto auto; gap: 10px; align-items: center; font-size: var(--fs-sm); }
.legend-row i { width: 12px; height: 12px; border-radius: 50%; display: block; }
.legend-row .pct { color: var(--fg-2); font-size: var(--fs-xs); min-width: 38px; text-align: right; font-variant-numeric: tabular-nums; }
.legend-row .val { font-weight: 800; font-variant-numeric: tabular-nums; min-width: 64px; text-align: right; }

/* Fotos de antes / después */
.ba { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ba figure { margin: 0; display: flex; flex-direction: column; gap: 4px; }
.ba .ph { aspect-ratio: 4/3; max-width: 100%; border-radius: 14px; display: grid; place-items: center; color: var(--fg-2); font-size: var(--fs-xs); font-weight: 600; background: linear-gradient(135deg, var(--soft-slate), var(--soft-sky)); overflow: hidden; }
.ba .ph img { width: 100%; height: 100%; object-fit: cover; }
.ba figcaption { font-size: var(--fs-xs); color: var(--fg-2); font-weight: 600; }
.geo { display: inline-flex; gap: 4px; align-items: center; font-family: var(--mono); font-size: 11px; color: var(--fg-2); }
.geo .lucide { width: 14px; height: 14px; }

/* Subir comprobante */
.drop { border-radius: var(--r-lg); padding: 24px 18px; display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; background: var(--surface); box-shadow: var(--shadow-card); }
.drop input[type=file] { display: none; }
.scan { position: relative; height: 6px; border-radius: 99px; background: var(--soft-sky); overflow: hidden; }
.scan::after { content: ""; position: absolute; inset: 0; width: 40%; background: var(--brand); border-radius: 99px; animation: scan 1s var(--ease) infinite alternate; }
.receipt { font-family: var(--mono); font-size: var(--fs-xs); background: var(--surface-2); border-radius: 14px; padding: 12px; display: grid; gap: 4px; }
.receipt .hl { background: var(--warn-soft); color: var(--fg); border-radius: 4px; padding: 0 4px; }

/* Emergencia */
.sos-wrap { display: grid; place-items: center; padding: 10px 0; gap: 12px; }
.sos-btn { width: 200px; height: 200px; border-radius: 50%; border: 0; background: radial-gradient(circle at 35% 30%, var(--coral-hi), var(--coral) 70%); color: #fff; font-weight: 800; font-size: var(--fs-xl); display: grid; place-items: center; box-shadow: 0 0 0 14px var(--soft-coral), 0 20px 40px rgba(225, 29, 72, .35); position: relative; touch-action: none; user-select: none; -webkit-user-select: none; animation: breathe 2.8s ease-in-out infinite; }
.sos-btn small { display: block; font-size: var(--fs-xs); font-weight: 600; opacity: .9; }
.sos-btn .ring { position: absolute; inset: -14px; border-radius: 50%; background: conic-gradient(#fff calc(var(--p, 0) * 1%), transparent 0); mask: radial-gradient(circle, transparent 106px, #000 107px); -webkit-mask: radial-gradient(circle, transparent 106px, #000 107px); opacity: .9; pointer-events: none; }

/* Asistente */
.chat { display: flex; flex-direction: column; gap: 8px; }
.bubble { max-width: 85%; padding: 10px 14px; border-radius: 20px; font-size: var(--fs-sm); animation: bubble var(--t-med) var(--spring) both; transform-origin: bottom left; }
.bubble.bot { background: var(--surface); box-shadow: var(--shadow-card); border-bottom-left-radius: 6px; align-self: flex-start; }
.bubble.me { background: var(--fg); color: var(--bg); border-bottom-right-radius: 6px; align-self: flex-end; transform-origin: bottom right; }
.chat-input { display: flex; gap: 8px; }
.chat-input input { flex: 1; min-width: 0; border: 0; box-shadow: var(--shadow-card), inset 0 0 0 1px var(--line); background: var(--surface); border-radius: 99px; padding: 10px 16px; min-height: 48px; }
.chat-input .btn { border-radius: 50%; width: 48px; min-height: 48px; padding: 0; }

/* Marketplace */
.product { display: grid; grid-template-columns: 56px 1fr auto; gap: 12px; align-items: center; }
.thumb { width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center; background: var(--soft-sky); color: var(--sky); }
.thumb .lucide { width: 26px; height: 26px; }

/* Meses de pago */
.months { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
.months div { border-radius: 12px; padding: 8px 0; text-align: center; font-size: 11px; font-weight: 800; }

/* Hoja inferior */
.sheet-wrap { position: absolute; inset: 0; background: rgba(11, 27, 43, .35); display: flex; align-items: flex-end; z-index: 20; animation: fade var(--t-med) var(--ease) both; }
.sheet { width: 100%; max-height: 88%; overflow-y: auto; background: var(--bg-grouped); border-radius: 32px 32px 0 0; padding: 10px 16px 28px; display: flex; flex-direction: column; gap: 14px; animation: sheet-up 520ms var(--ease) both; }
.sheet .grab { width: 40px; height: 5px; border-radius: 99px; background: var(--line); align-self: center; }

/* Aviso tipo "Dynamic Island": nace de la cámara y se expande */
.toast { position: absolute; left: 50%; top: 10px; transform: translateX(-50%); width: max-content; max-width: calc(100% - 32px); background: #000; color: #fff; padding: 12px 18px; border-radius: 24px; font-size: var(--fs-sm); font-weight: 600; z-index: 30; box-shadow: 0 12px 30px rgba(0,0,0,.3); animation: island-in 520ms var(--spring) both; text-align: center; }
.toast.out { animation: island-out 260ms var(--ease) both; }
.disabled-screen { text-align: center; padding: 40px 16px; display: grid; gap: 12px; justify-items: center; }

/* ---------- Panel web ---------- */
.web { width: 100%; max-width: 1240px; display: grid; grid-template-columns: 232px 1fr; background: var(--bg-grouped); border-radius: 28px; overflow: hidden; min-height: calc(100vh - 56px); align-self: start; box-shadow: 0 30px 60px -20px rgba(11, 27, 43, .3); position: relative; z-index: 1; }
.web-nav { background: var(--surface); padding: 18px 12px; display: flex; flex-direction: column; gap: 2px; }
.web-nav .who { display: flex; gap: 10px; align-items: center; padding: 4px 8px 16px; margin-bottom: 6px; border-bottom: 1px solid var(--line); }
.web-nav .who strong { display: block; }
.web-nav button { display: flex; gap: 10px; align-items: center; border: 0; background: none; padding: 6px 8px; border-radius: 14px; font-weight: 700; font-size: var(--fs-sm); text-align: left; min-height: 46px; color: var(--fg); transition: background var(--t-med) var(--ease), color var(--t-med) var(--ease); }
.web-nav button:hover { background: var(--surface-2); }
.web-nav button[aria-current="page"] { background: var(--fg); color: var(--bg); }
.web-main { padding: 26px 28px 40px; display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.web-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.web-head h1 { font-size: var(--fs-xl); font-weight: 800; letter-spacing: -.035em; }
.kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.kpi { background: var(--surface); border-radius: var(--r-md); padding: 16px; display: flex; flex-direction: column; gap: 6px; box-shadow: var(--shadow-card); position: relative; overflow: hidden; }
.kpi:first-child { color: #fff; background: radial-gradient(120% 90% at 100% 0%, var(--glow), transparent 55%), linear-gradient(160deg, var(--ink-2), var(--ink-1)); box-shadow: 0 18px 36px -12px rgba(10, 23, 36, .5); }
.kpi:first-child .l, .kpi:first-child .tiny { color: rgba(255,255,255,.75); }
.kpi .v { font-size: var(--fs-xl); font-weight: 800; letter-spacing: -.035em; font-variant-numeric: tabular-nums; }
.kpi .l { font-size: var(--fs-xs); font-weight: 800; color: var(--fg-2); text-transform: uppercase; letter-spacing: .06em; }
.web-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 16px; }
.web-grid > * { min-width: 0; }
.tbl-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
th { text-align: left; font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .06em; color: var(--fg-2); padding: 8px 10px; border-bottom: 1px solid var(--line); white-space: nowrap; }
td { padding: 12px 10px; border-bottom: 1px solid var(--line); font-variant-numeric: tabular-nums; }
tr:last-child td { border-bottom: 0; }
td.r, th.r { text-align: right; }
.deptos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.depto { border: 0; border-radius: 12px; padding: 8px 4px; font-family: var(--mono); font-size: var(--fs-xs); font-weight: 500; text-align: center; min-height: 36px; transition: transform var(--t-fast) var(--ease); }
.depto:active { transform: scale(.92); }
.depto.ok { background: var(--ok-soft); color: var(--ok); }
.depto.warn { background: var(--warn-soft); color: var(--warn); }
.depto.crit { background: var(--crit-soft); color: var(--crit); }
.depto.info { background: var(--accent-soft); color: var(--accent); }
.floor-label { font-family: var(--mono); font-size: 10px; color: var(--fg-2); align-self: center; }
.bars { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; align-items: end; height: 180px; padding-top: 8px; border-bottom: 1px solid var(--line); }
.bars .col { display: flex; gap: 4px; align-items: flex-end; justify-content: center; height: 100%; }
.bars .col span { width: 14px; border-radius: 6px 6px 2px 2px; display: block; transform-origin: bottom; }
.bars-x { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; font-size: var(--fs-xs); color: var(--fg-2); text-align: center; }
.donut { width: 160px; height: 160px; border-radius: 50%; flex: none; position: relative; }
.donut::after { content: ""; position: absolute; inset: 26px; border-radius: 50%; background: var(--surface); }
.donut-center { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; z-index: 1; font-size: var(--fs-xs); color: var(--fg-2); }
.donut-center strong { display: block; font-size: var(--fs-lg); color: var(--fg); }
.slide { aspect-ratio: 16/9; max-width: 100%; background: var(--surface); border-radius: 18px; padding: 20px; display: flex; flex-direction: column; gap: 10px; box-shadow: var(--shadow-card); position: relative; overflow: hidden; }
.slide::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 5px; background: var(--brand); }
.slide h3 { font-size: var(--fs-lg); }
.plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }

/* ---------- Campanita con contador y vista previa del ícono en el celular ---------- */
.nbadge { position: absolute; top: -4px; right: -4px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 99px; background: var(--coral); color: #fff; font-size: 11px; font-weight: 800; display: grid; place-items: center; border: 2px solid var(--surface); animation: bubble var(--t-med) var(--spring) both; }
.device { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 16px; background: var(--surface-2); }
.device .appicon { position: relative; width: 52px; height: 52px; border-radius: 14px; background: var(--brand); flex: none; box-shadow: 0 6px 14px rgba(14, 165, 233, .3); }
.device .appicon::after { content: ""; position: absolute; inset: 13px; border: 3px solid #fff; border-radius: 6px; transform: rotate(45deg); }
.device .appicon .nbadge { top: -7px; right: -7px; z-index: 1; }
.device small { display: block; color: var(--fg-2); font-size: var(--fs-xs); }
.netrow { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: var(--fs-xs); font-weight: 700; }
.live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); display: inline-block; margin-right: 6px; box-shadow: 0 0 0 0 rgba(52, 211, 153, .6); animation: pulse 1.8s ease-out infinite; }
.live-dot.off { background: var(--slate-hi); animation: none; }
.live-dot.warn { background: var(--amber); }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(52, 211, 153, .55); } 100% { box-shadow: 0 0 0 10px rgba(52, 211, 153, 0); } }
.meter { height: 6px; border-radius: 99px; background: var(--line); overflow: hidden; }
.meter span { display: block; height: 100%; background: var(--teal); border-radius: 99px; transition: width var(--t-med) var(--ease); }

/* Barra "sin conexión" dentro de la app */
.netbar { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 14px; background: var(--fg); color: var(--bg); font-size: var(--fs-xs); font-weight: 700; }
.netbar .lucide { width: 16px; height: 16px; }

/* Línea de tiempo de un reporte (creado → avisado → resuelto) */
.tl { display: grid; gap: 0; margin: 4px 0 0; padding: 0; list-style: none; }
.tl li { display: grid; grid-template-columns: 18px 1fr auto; gap: 8px; align-items: start; font-size: var(--fs-xs); position: relative; padding-bottom: 10px; }
.tl li::before { content: ""; width: 10px; height: 10px; border-radius: 50%; margin-top: 3px; background: var(--line); justify-self: center; }
.tl li::after { content: ""; position: absolute; left: 8px; top: 14px; bottom: 0; width: 2px; background: var(--line); }
.tl li:last-child::after { display: none; }
.tl li.on::before { background: var(--teal); box-shadow: 0 0 0 3px var(--soft-teal); }
.tl li.on + li.on::after, .tl li.on::after { background: var(--teal-hi); }
.tl li span:nth-child(2) { font-weight: 700; }
.tl time { color: var(--fg-2); font-variant-numeric: tabular-nums; }
.sla { font-size: var(--fs-xs); font-weight: 800; padding: 3px 9px; border-radius: 99px; background: var(--soft-teal); color: var(--teal); }
.sla.slow { background: var(--soft-amber); color: var(--amber); }

/* Selector de dos opciones dentro de formularios */
.seg2 { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; border-radius: 14px; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line); }
.seg2 button { border: 0; background: none; min-height: 42px; border-radius: 10px; font-weight: 700; font-size: var(--fs-sm); color: var(--fg-2); transition: background var(--t-med) var(--ease), color var(--t-med) var(--ease); }
.seg2 button[aria-pressed="true"] { background: var(--surface); color: var(--fg); box-shadow: var(--shadow-card); }

/* Comunicados */
.com { display: flex; gap: 12px; align-items: flex-start; }
.com .grow { flex: 1; min-width: 0; }
.com p { color: var(--fg-2); font-size: var(--fs-sm); margin-top: 2px; }
.com-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }

/* ---------- Panel web en bento ---------- */
.bento { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.bento > * { min-width: 0; }
.b-2 { grid-column: span 2; }
.b-r2 { grid-row: span 2; }
.b-4 { grid-column: span 4; }
.bento .hero { min-height: 100%; }
.tile-kpi { background: var(--surface); border-radius: var(--r-md); padding: 16px; display: flex; flex-direction: column; gap: 6px; box-shadow: var(--shadow-card); border: 0; text-align: left; transition: transform var(--t-fast) var(--ease); }
button.tile-kpi:hover { transform: translateY(-2px); }
.tile-kpi .l { font-size: var(--fs-xs); font-weight: 800; color: var(--fg-2); text-transform: uppercase; letter-spacing: .06em; display: flex; align-items: center; gap: 8px; }
.tile-kpi .v { font-size: var(--fs-xl); font-weight: 800; letter-spacing: -.035em; font-variant-numeric: tabular-nums; line-height: 1.1; }
.cmdk-btn { display: inline-flex; align-items: center; gap: 10px; border: 0; background: var(--surface); box-shadow: var(--shadow-card); border-radius: 12px; padding: 8px 12px; min-height: 40px; color: var(--fg-2); font-size: var(--fs-sm); font-weight: 600; }
.cmdk-btn kbd { font-family: var(--mono); font-size: 11px; background: var(--surface-2); border-radius: 6px; padding: 2px 6px; color: var(--fg); }

/* Edificio vivo: cada torre dibujada con sus ventanas (deptos) de color según su pago */
.facades { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; align-items: end; }
.tower { display: flex; flex-direction: column; gap: 4px; padding: 10px 10px 0; border-radius: 14px 14px 4px 4px; background: linear-gradient(180deg, var(--surface-2), var(--soft-slate)); }
.tower .win { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.tower button { border: 0; height: 14px; border-radius: 4px; padding: 0; transition: transform var(--t-fast) var(--ease); }
.tower button:hover { transform: scale(1.25); }
.tower button.ok { background: var(--teal-hi); }
.tower button.info { background: var(--sky-hi); }
.tower button.warn { background: #FBBF24; }
.tower button.crit { background: var(--coral-hi); animation: blink 1.6s ease-in-out infinite; }
.tower button[aria-pressed="true"] { outline: 2px solid var(--fg); outline-offset: 1px; }
.tower .base { height: 10px; margin: 4px -10px 0; background: var(--fg); border-radius: 0 0 4px 4px; opacity: .85; }
.tower-name { text-align: center; font-size: var(--fs-xs); font-weight: 800; color: var(--fg-2); margin-top: 6px; }
@keyframes blink { 50% { opacity: .45; } }
.go-tab .tower button { animation: win-in 500ms var(--ease) both; animation-delay: calc(var(--d, 0) * 8ms); }
.go-tab .tower button.crit { animation: win-in 500ms var(--ease) both, blink 1.6s ease-in-out 600ms infinite; }
@keyframes win-in { from { opacity: 0; transform: scale(.4); } to { opacity: 1; transform: none; } }
.legend-inline { display: flex; flex-wrap: wrap; gap: 12px; font-size: var(--fs-xs); color: var(--fg-2); font-weight: 600; }
.legend-inline i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; margin-right: 6px; vertical-align: -1px; }

/* Actividad en vivo */
.livefeed { display: flex; flex-direction: column; }
.livefeed .ev { display: grid; grid-template-columns: 32px 1fr auto; gap: 10px; align-items: center; padding: 9px 0; font-size: var(--fs-sm); animation: rise var(--t-med) var(--ease) both; }
.livefeed .ev + .ev { border-top: 1px solid var(--line); }
.livefeed .ev strong { display: block; font-size: var(--fs-sm); }
.livefeed time { font-size: var(--fs-xs); color: var(--fg-2); white-space: nowrap; }

/* Paleta de comandos (Ctrl/⌘ + K) */
.cmdk { position: fixed; inset: 0; z-index: 80; background: rgba(11, 27, 43, .35); display: grid; place-items: start center; padding: 12vh 16px 16px; animation: fade var(--t-fast) var(--ease) both; }
.cmdk .box { width: min(560px, 100%); background: var(--surface); border-radius: 20px; box-shadow: 0 30px 60px rgba(11, 27, 43, .35); overflow: hidden; animation: island-in 380ms var(--spring) both; }
.cmdk input { width: 100%; border: 0; border-bottom: 1px solid var(--line); padding: 18px 20px; font-size: var(--fs-md); background: transparent; outline: none; }
.cmdk ul { list-style: none; margin: 0; padding: 8px; max-height: 50vh; overflow-y: auto; }
.cmdk li button { width: 100%; display: flex; align-items: center; gap: 12px; border: 0; background: none; padding: 10px 12px; border-radius: 12px; text-align: left; font-weight: 600; font-size: var(--fs-sm); }
.cmdk li button[aria-selected="true"], .cmdk li button:hover { background: var(--surface-2); }
.cmdk li small { margin-left: auto; color: var(--fg-2); font-weight: 500; }

/* Conciliación bancaria */
.conc { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; align-items: start; }
.conc > .card { min-width: 0; }
.conc h3 { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.match { display: grid; grid-template-columns: 1fr 22px 1fr; gap: 8px; align-items: center; padding: 10px 0; font-size: var(--fs-xs); }
.match + .match { border-top: 1px solid var(--line); }
.match b { display: block; font-size: var(--fs-sm); color: var(--fg); }
.match .lucide { width: 18px; height: 18px; color: var(--teal); }
.dropzone { border-radius: 20px; padding: 22px; display: flex; flex-wrap: wrap; align-items: center; gap: 16px; background: var(--surface); box-shadow: var(--shadow-card); }
.dropzone .grow { flex: 1; min-width: 220px; }

/* Etiquetas QR */
.qrgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 14px; }
.qrcard { background: #fff; color: #0B1B2B; border-radius: 18px; padding: 16px; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; box-shadow: var(--shadow-card); }
.qrcard svg { width: 100%; max-width: 160px; height: auto; }
.qrcard strong { font-size: var(--fs-sm); }
.qrcard span { font-family: var(--mono); font-size: 11px; color: #5B6B7D; }
.evid { display: flex; gap: 6px; }
.evid img { width: 44px; height: 44px; border-radius: 10px; object-fit: cover; }

@media (max-width: 1100px) { .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); } .b-4 { grid-column: span 2; } .conc { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .bento { grid-template-columns: 1fr; } .b-2, .b-4 { grid-column: auto; } .b-r2 { grid-row: auto; } }

/* ---------- Tarjeta que se expande al detalle (View Transitions) ---------- */
.hero { view-transition-name: hero; }
.hero[data-expand] { cursor: pointer; transition: transform var(--t-fast) var(--ease); }
.hero[data-expand]:active { transform: scale(.985); }
.hero .open { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.14); flex: none; }
.hero .open .lucide { width: 16px; height: 16px; }
.hero .top .right { display: flex; align-items: center; gap: 8px; }
::view-transition-group(hero) { animation-duration: 560ms; animation-timing-function: cubic-bezier(.32, .72, 0, 1); }
::view-transition-old(hero), ::view-transition-new(hero) { animation-duration: 560ms; height: 100%; object-fit: cover; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 320ms; }

/* ---------- Deslizar hacia abajo para actualizar ---------- */
.ptr { position: absolute; z-index: 4; left: 50%; top: 40px; width: 40px; height: 40px; margin-left: -20px; border-radius: 50%; background: var(--surface); box-shadow: var(--shadow-card); display: grid; place-items: center; opacity: var(--o, 0); transform: translateY(var(--y, -20px)); pointer-events: none; }
.ptr .brand-mark { width: 24px; height: 24px; border-radius: 7px; box-shadow: none; transform: rotate(var(--r, 0deg)); }
.ptr .brand-mark::after { inset: 6px; border-width: 2px; border-radius: 3px; }
.ptr.spin .brand-mark { animation: ptr-spin 800ms var(--ease) infinite; }
.ptr.settle, .app-body.settle { transition: transform 420ms var(--ease), opacity 420ms var(--ease); }
@keyframes ptr-spin { from { transform: rotate(0deg) scale(1); } 50% { transform: rotate(180deg) scale(.82); } to { transform: rotate(360deg) scale(1); } }

/* ---------- Gráfica que responde al dedo (estilo app Bolsa) ---------- */
.scrub { display: flex; flex-direction: column; gap: 8px; }
.scrub-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 8px; min-height: 44px; }
.scrub-head .m { font-size: var(--fs-xs); font-weight: 700; color: var(--fg-2); }
.scrub-head .v { font-size: var(--fs-lg); font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.scrub-head .s { font-size: var(--fs-xs); color: var(--fg-2); text-align: right; font-variant-numeric: tabular-nums; }
.scrub-head .s b { color: var(--indigo); }
.scrub svg { width: 100%; height: auto; display: block; touch-action: pan-y; cursor: crosshair; overflow: visible; }
.scrub .cursor { transition: transform 140ms var(--ease); }
.scrub-x { display: grid; grid-template-columns: repeat(6, 1fr); font-size: 11px; color: var(--fg-2); text-align: center; font-weight: 600; }
.scrub-x span[aria-current="true"] { color: var(--fg); font-weight: 800; }
.go-fwd .scrub .line, .go-tab .scrub .line { stroke-dasharray: 600; animation: draw 1100ms var(--ease) 200ms both; }
@keyframes draw { from { stroke-dashoffset: 600; } to { stroke-dashoffset: 0; } }

/* Gráfica de barras del panel: al pasar el mouse se resalta el mes */
.bars .col { position: relative; transition: opacity var(--t-med) var(--ease); }
.bars:hover .col { opacity: .35; }
.bars .col:hover { opacity: 1; }
.bars .col:hover::after { content: attr(data-tip); position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%); background: var(--fg); color: var(--bg); font-size: 11px; font-weight: 700; padding: 6px 10px; border-radius: 10px; white-space: nowrap; z-index: 2; box-shadow: var(--shadow-float); }

/* ---------- Movimiento ---------- */
/* Transición entre pantallas: avanzar entra por la derecha, regresar por la izquierda, pestañas se funden */
.app-body.go-fwd > * { animation: push-in var(--t-slow) var(--ease) both; }
.app-body.go-back > * { animation: pop-in var(--t-slow) var(--ease) both; }
.app-body.go-tab > *, .web-main.go-tab > * { animation: rise var(--t-slow) var(--ease) both; }
.app-body > *, .web-main > * { animation-delay: calc(var(--i, 0) * 45ms); }
/* La barra de progreso y las gráficas se llenan al entrar */
.go-fwd .hero .bar span, .go-back .hero .bar span, .go-tab .hero .bar span { animation: grow-x 900ms var(--ease) 180ms both; }
.go-tab .bars .col span { animation: grow-y 800ms var(--ease) both; animation-delay: calc(var(--i, 0) * 60ms + 150ms); }
.go-fwd .split-bar span, .go-tab .split-bar span { animation: grow-x 800ms var(--ease) 200ms both; }
.go-tab .donut { animation: spin-in 900ms var(--ease) 120ms both; }

@keyframes push-in { from { opacity: 0; transform: translateX(28px); } to { opacity: 1; transform: none; } }
@keyframes pop-in { from { opacity: 0; transform: translateX(-28px); } to { opacity: 1; transform: none; } }
@keyframes rise { from { opacity: 0; transform: translateY(14px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes grow-x { from { transform: scaleX(0); } to { transform: none; } }
@keyframes grow-y { from { transform: scaleY(0); } to { transform: none; } }
@keyframes spin-in { from { opacity: 0; transform: rotate(-90deg) scale(.85); } to { opacity: 1; transform: none; } }
@keyframes label-in { from { opacity: 0; transform: translateX(-4px); } to { opacity: 1; transform: none; } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes sheet-up { from { transform: translateY(100%); } to { transform: none; } }
@keyframes island-in { from { opacity: 0; transform: translateX(-50%) scale(.35, .6); border-radius: 30px; } to { opacity: 1; transform: translateX(-50%); } }
@keyframes island-out { to { opacity: 0; transform: translateX(-50%) scale(.5, .7); } }
@keyframes bubble { from { opacity: 0; transform: scale(.7); } to { opacity: 1; transform: none; } }
@keyframes breathe { 0%, 100% { box-shadow: 0 0 0 14px var(--soft-coral), 0 20px 40px rgba(225, 29, 72, .35); } 50% { box-shadow: 0 0 0 22px var(--soft-coral), 0 20px 40px rgba(225, 29, 72, .35); } }
@keyframes scan { from { transform: translateX(-10%); } to { transform: translateX(160%); } }

/* Si la persona pidió menos movimiento: solo un desvanecido corto, sin desplazamientos */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-delay: 0ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; }
}

/* ---------- Responsive ---------- */
@media (max-width: 1100px) { .kpis { grid-template-columns: repeat(2, 1fr); } .web-grid { grid-template-columns: 1fr; } }
@media (max-width: 860px) {
  .shell { grid-template-columns: 1fr; }
  .control { position: fixed; inset: 0 auto 0 0; width: min(320px, 88vw); z-index: 50; transform: translateX(-105%); transition: transform var(--t-med) var(--ease); box-shadow: var(--shadow-float); padding-top: calc(20px + env(safe-area-inset-top, 0px)); }
  .control.open { transform: none; }
  .map-fab { display: inline-flex; position: fixed; z-index: 60; right: calc(12px + env(safe-area-inset-right, 0px)); top: calc(10px + env(safe-area-inset-top, 0px)); border: 0; background: var(--fg); color: var(--bg); font-weight: 700; font-size: var(--fs-xs); border-radius: 99px; padding: 8px 14px; min-height: 36px; box-shadow: var(--shadow-float); }
  .stage { padding: 0; place-items: stretch; background: var(--bg-grouped); }
  .phone { width: 100%; height: 100vh; height: 100dvh; max-height: none; border: 0; border-radius: 0; box-shadow: none; }
  .phone-status { display: none; }
  .app-top { padding-top: calc(10px + env(safe-area-inset-top, 0px)); padding-right: 110px; padding-left: max(12px, env(safe-area-inset-left, 0px)); }
  .phone.home .app-body { padding-top: calc(10px + env(safe-area-inset-top, 0px)); }
  .home-top { padding-right: 96px; }
  .app-body { padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
  .tabbar { left: max(12px, env(safe-area-inset-left, 0px)); right: max(12px, env(safe-area-inset-right, 0px)); }
  .web { grid-template-columns: 1fr; border-radius: 0; min-height: 100vh; box-shadow: none; }
  .web-nav { flex-direction: row; overflow-x: auto; padding: calc(56px + env(safe-area-inset-top, 0px)) max(12px, env(safe-area-inset-right, 0px)) 10px max(12px, env(safe-area-inset-left, 0px)); }
  .web-nav .who { display: none; }
  .web-nav button { white-space: nowrap; }
  .web-main { padding: 18px max(16px, env(safe-area-inset-right, 0px)) 32px max(16px, env(safe-area-inset-left, 0px)); }
  .plans { grid-template-columns: 1fr; }
}
@media (max-width: 420px) { .kpis { grid-template-columns: 1fr 1fr; } .kpi .v { font-size: var(--fs-lg); } }