/* LinkMyDate v3 — sistema visual "Dashboard citas" (Claude Design).
   Tema oscuro por defecto + claro (html.light). El acento sigue brand_color del negocio. */

/* ---------- Tema ---------- */
:root {
  --bg:#0b1220; --panel:#0f172a; --card:#151e31; --line:#1e293b; --line2:#24304a;
  --txt:#f1f5f9; --txt2:#94a3b8; --mut:#5b6b87;
  --accent:#3b82f6; --accent-ink:#fff;
  --grn:#4ade80; --grnsoft:rgba(34,197,94,.14); --red:#f87171; --redline:rgba(248,113,113,.4);
  --chip:#24304a; --chiptxt:#94a3b8;
  color-scheme:dark;
}
html.light {
  --bg:#f7f9fc; --panel:#ffffff; --card:#ffffff; --line:#e8edf4; --line2:#eef2f7;
  --txt:#1e293b; --txt2:#64748b; --mut:#94a3b8;
  --accent:#1e6dff;
  --grn:#16a34a; --grnsoft:#e9f9f0; --red:#ef4444; --redline:#fecaca;
  --chip:#f1f5f9; --chiptxt:#475569;
  color-scheme:light;
}
/* Derivados del acento (siguen brand_color aunque se cambie inline) */
:root {
  --accsoft:color-mix(in srgb, var(--accent) 16%, transparent);
  --acctxt:var(--accent);
  --accshadow:color-mix(in srgb, var(--accent) 30%, transparent);
  /* Alias legacy usados por plantillas inline de app.js */
  --paper:var(--card); --canvas:var(--bg); --ink:var(--txt);
  --muted:var(--txt2); --muted2:var(--mut); --success:var(--grn); --danger:var(--red);
}

* { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html, body { margin:0; }
body {
  background:var(--bg); color:var(--txt);
  font-family:'Plus Jakarta Sans', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  -webkit-font-smoothing:antialiased;
}
.hidden { display:none !important; }
.muted { color:var(--txt2); }
.small { font-size:13px; }
img.brand-logo, img.nav-logo { object-fit:contain; display:block; }

/* ---------- Tipografía / cabeceras ---------- */
h2 { font-size:18px; font-weight:800; margin:0 0 12px; letter-spacing:-.3px; }
.stitle { font-size:18px; font-weight:800; letter-spacing:-.3px; }
.sect-h { display:flex; justify-content:space-between; align-items:center; }
.sect-h h2 { margin:0; }
.sect-h .act, .link-act { font-size:12px; font-weight:700; color:var(--acctxt); cursor:pointer; background:none; border:0; padding:0; }
.sect-acts { display:flex; align-items:center; gap:14px; }
/* Selector WhatsApp / WhatsApp Business */
.wa-sheet { position:fixed; inset:0; z-index:1000; background:rgba(0,0,0,.45);
  display:flex; align-items:flex-end; justify-content:center; padding:14px; }
.wa-sheet-card { width:100%; max-width:380px; background:var(--card); border:1px solid var(--line);
  border-radius:18px; padding:14px; box-shadow:0 24px 60px rgba(0,0,0,.35); }
.wa-sheet-title { text-align:center; font-weight:800; color:var(--mut); font-size:13px; margin:4px 0 10px; }
.wa-opt { width:100%; margin-top:8px; padding:14px; border:1px solid var(--line); border-radius:12px;
  background:var(--panel); color:var(--txt); font-size:15px; font-weight:700; cursor:pointer; }
.wa-opt:first-of-type { margin-top:0; }
.wa-opt.wa-cancel { background:none; border:0; color:var(--mut); font-weight:600; }
@media (min-width:520px){ .wa-sheet { align-items:center; } }

/* ---------- Formularios ---------- */
label { display:block; font-size:12px; font-weight:700; color:var(--txt2); margin:12px 0 5px; }
input, select, textarea {
  width:100%; padding:12px 14px; border:1px solid var(--line); background:var(--panel);
  color:var(--txt); font-size:15px; border-radius:10px; font-family:inherit;
}
input::placeholder, textarea::placeholder { color:var(--mut); }
input:focus, select:focus, textarea:focus { outline:0; border-color:var(--accent); box-shadow:0 0 0 3px var(--accsoft); }
textarea { resize:vertical; }

button {
  cursor:pointer; font-family:inherit; font-size:14px; font-weight:700;
  padding:11px 16px; border:1px solid var(--line); background:var(--card); color:var(--txt); border-radius:10px;
}
button:hover { border-color:var(--accent); }
button.primary { background:var(--accent); color:#fff; border:0; width:100%; margin-top:14px; padding:14px; box-shadow:0 6px 16px var(--accshadow); }
button.primary:hover { filter:brightness(1.06); }
button.ghost { background:transparent; border:0; color:var(--txt2); width:100%; font-weight:600; }
button.ghost:hover { color:var(--accent); }
button.wa { background:var(--grn); color:#fff; border:0; }
button.danger { color:var(--red); border-color:var(--redline); background:transparent; }
button.mini { padding:8px 14px; font-size:12px; width:auto; }
button.icon { width:40px; height:40px; padding:0; border:1px solid var(--line); font-size:15px; display:flex; align-items:center; justify-content:center; background:var(--card); color:var(--txt2); border-radius:10px; }

.row { display:flex; gap:8px; margin-top:10px; }
.row > * { flex:1; min-width:0; }
.err { color:var(--red); font-size:14px; margin-top:8px; min-height:16px; font-weight:600; }
.check { display:flex; align-items:center; gap:8px; font-weight:600; font-size:14px; color:var(--txt); margin:12px 0 0; }
.check input { width:auto; }

/* ---------- Login ---------- */
.login { min-height:100vh; min-height:100dvh; display:flex; align-items:center; justify-content:center; padding:20px; background:var(--bg); }
.login-card { width:100%; max-width:380px; background:var(--card); border:1px solid var(--line); border-radius:18px; padding:32px 26px; box-shadow:0 24px 60px rgba(0,0,0,.28); }
.login-card input { margin-top:10px; }
.pw-wrap { position:relative; margin-top:10px; }
.pw-wrap input { margin-top:0; padding-right:44px; }
.pw-toggle { position:absolute; top:0; right:0; height:100%; width:42px; display:flex;
  align-items:center; justify-content:center; background:none; border:0; padding:0;
  cursor:pointer; font-size:17px; line-height:1; opacity:.65; }
.pw-toggle:hover { opacity:1; }
.pw-toggle.on { opacity:1; }
.tpl-card { border:1px solid var(--line); border-radius:12px; padding:12px 14px; margin-top:10px; background:var(--panel); }
.tpl-head { display:flex; align-items:center; gap:8px; justify-content:space-between; margin-bottom:4px; }
.tpl-card textarea { font-size:14px; }
.tpl-msg:empty { display:none; }
.tpl-msg { margin-top:6px; }
.login-card .brand { justify-content:center; margin-bottom:22px; font-size:20px; }
.login-card .brand-logo { width:34px; height:34px; }

/* ---------- Marca / topbar ---------- */
.brand { display:flex; align-items:center; gap:10px; font-size:18px; font-weight:800; letter-spacing:-.3px; }
.brand-logo { width:30px; height:30px; }
.biz { font-size:13px; font-weight:600; color:var(--txt2); }
.topbar-right { display:flex; align-items:center; gap:12px; }
.theme-toggle { width:38px; height:38px; padding:0; border:1px solid var(--line); border-radius:10px; background:var(--card); color:var(--txt2); font-size:15px; display:flex; align-items:center; justify-content:center; }
.theme-toggle::before { content:'🌙'; }
html.light .theme-toggle::before { content:'☀️'; }

/* ---------- Estructura (columna móvil) ---------- */
#app { max-width:520px; margin:0 auto; background:var(--bg); min-height:100vh; min-height:100dvh; position:relative; }
.topbar { position:sticky; top:0; z-index:20; background:var(--bg); padding:calc(env(safe-area-inset-top,0px) + 14px) 20px 0; }
.topbar-inner { display:flex; justify-content:space-between; align-items:center; padding-bottom:14px; border-bottom:1px solid var(--line); }
main { padding:0 20px calc(env(safe-area-inset-bottom,0px) + 92px); }
.view { padding-top:16px; display:flex; flex-direction:column; gap:16px; }
.card { background:var(--card); border:1px solid var(--line); border-radius:14px; padding:18px; }
.card-h { display:flex; justify-content:space-between; align-items:center; margin-bottom:12px; }
.card-h h2 { margin:0; }

/* ---------- Inicio: cabecera con fecha ---------- */
.datehead { display:flex; align-items:center; gap:16px; }
.daynum { font-size:56px; font-weight:800; line-height:.9; letter-spacing:-.03em; }
.dateside { display:flex; flex-direction:column; gap:3px; }
.dateline { font-size:12px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--txt2); }
.daysum { font-size:14px; color:var(--acctxt); font-weight:700; }

/* Stats (3 tarjetas) */
.stats { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.stats:empty { display:none; }
.stat { background:var(--card); border:1px solid var(--line); border-radius:14px; padding:16px 18px; display:flex; flex-direction:column; gap:4px; }
.stat .n { font-size:28px; font-weight:800; letter-spacing:-.02em; }
.stat .l { font-size:12px; color:var(--txt2); font-weight:600; }

/* Agenda / próximos días */
.newnote { background:var(--accsoft); color:var(--acctxt); font-weight:700; font-size:13px; padding:12px 14px; border-radius:12px; }
.agenda-dayh { font-size:12px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; color:var(--mut); padding:8px 2px 0; }
.agenda-empty { padding:24px; text-align:center; color:var(--txt2); font-weight:600; background:var(--card); border:1px dashed var(--line); border-radius:14px; }
#agenda { display:flex; flex-direction:column; gap:10px; }
#agenda:empty { display:none; }
details.agenda-week { background:var(--card); border:1px solid var(--line); border-radius:14px; padding:2px 16px; }
details.agenda-week > summary { list-style:none; cursor:pointer; padding:14px 0; font-weight:700; font-size:14px; display:flex; justify-content:space-between; align-items:center; }
details.agenda-week > summary::-webkit-details-marker { display:none; }
details.agenda-week > summary::after { content:'+'; font-size:18px; font-weight:700; color:var(--txt2); margin-left:12px; }
details.agenda-week[open] > summary::after { content:'\2212'; }
details.agenda-week[open] { padding-bottom:12px; }
details.agenda-week .appt { margin-top:8px; }
.agenda-week .wk-count { font-weight:600; color:var(--txt2); font-size:12px; }
.new-badge { display:inline-block; background:var(--accent); color:#fff; font-size:10px; font-weight:700; padding:2px 6px; border-radius:6px; margin-left:6px; vertical-align:middle; }

/* Bloque HOY */
#hoy { display:flex; flex-direction:column; gap:12px; }
#hoy:empty { display:none; }
.dayprog { display:flex; align-items:center; gap:10px; }
.dayprog .dp-bar { flex:1; height:7px; background:var(--line); border-radius:99px; overflow:hidden; }
.dayprog .dp-bar i { display:block; height:100%; background:var(--grn); border-radius:99px; transition:width .3s; }
.dayprog span { font-size:12px; font-weight:700; color:var(--txt2); white-space:nowrap; }
.hoy-alldone { font-size:13px; font-weight:700; color:var(--grn); }
.hoy-empty { text-align:center; padding:28px 18px; background:var(--card); border:1px solid var(--line); border-radius:14px; }
.hoy-empty b { display:block; font-size:20px; font-weight:800; }
.hoy-empty small { color:var(--txt2); font-weight:600; }

/* Hero: próxima cita (tarjeta acento) */
.hero { background:var(--accent); color:#fff; border-radius:16px; padding:18px 20px; cursor:pointer; box-shadow:0 12px 28px var(--accshadow); }
.hero-kick { font-size:11px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:rgba(255,255,255,.85); }
.hero-main { display:flex; align-items:center; gap:16px; margin-top:10px; }
.hero-time { font-size:38px; font-weight:800; letter-spacing:-.03em; line-height:1; }
.hero-body { min-width:0; flex:1; }
.hero-name { font-size:18px; font-weight:800; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.hero-svc { font-size:12px; font-weight:600; color:rgba(255,255,255,.85); margin-top:4px; display:flex; align-items:center; gap:6px; text-transform:uppercase; letter-spacing:.02em; }
.hero-dot { width:8px; height:8px; border-radius:50%; background:#fff !important; flex:0 0 auto; }
.hero-loc { font-size:12px; color:rgba(255,255,255,.85); margin-top:10px; }

/* Mini-timeline del día */
.timeline { display:flex; flex-direction:column; background:var(--card); border:1px solid var(--line); border-radius:14px; padding:2px 16px; }
.tl-item { display:flex; align-items:center; gap:12px; padding:12px 0; border-bottom:1px solid var(--line2); cursor:pointer; }
.tl-item:last-child { border-bottom:0; }
.tl-time { font-size:13px; font-weight:800; min-width:44px; }
.tl-mark { width:14px; height:14px; border-radius:50%; flex:0 0 auto; border:2px solid var(--c,var(--accent)); display:flex; align-items:center; justify-content:center; font-size:9px; font-weight:800; color:#fff; }
.tl-info { flex:1; min-width:0; }
.tl-svc { font-size:14px; font-weight:700; }
.tl-det { font-size:12px; color:var(--txt2); }
.tl-done { opacity:.5; }
.tl-done .tl-mark { background:var(--txt2); border-color:var(--txt2); }
.tl-now .tl-mark { background:var(--c,var(--accent)); box-shadow:0 0 0 4px var(--accsoft); }
.tl-nowline { display:flex; align-items:center; gap:8px; padding:8px 0; font-size:10px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--acctxt); }
.tl-nowline::before { content:''; width:8px; height:8px; border-radius:50%; background:var(--accent); flex:0 0 auto; }
.tl-nowline::after { content:''; flex:1; height:2px; background:var(--accsoft); }

.upcoming-h { font-size:12px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; color:var(--mut); padding-top:4px; }

/* Botón grande enviar cita */
.bigbtn { background:var(--accent); color:#fff; padding:16px 20px; border-radius:14px; display:flex; justify-content:space-between; align-items:center; cursor:pointer; font-weight:700; font-size:14px; box-shadow:0 10px 24px var(--accshadow); }
.bigbtn span:last-child { font-size:16px; }

/* ---------- Tarjeta de cita ---------- */
.appt { display:flex; gap:12px; align-items:center; padding:14px 16px; background:var(--card); border:1px solid var(--line); border-radius:12px; }
.appt.clickable { cursor:pointer; }
.appt.clickable:hover { border-color:var(--accent); }
.appt .hora { font-size:13px; font-weight:800; background:var(--accsoft); color:var(--acctxt); border-radius:8px; padding:8px 10px; white-space:nowrap; flex:0 0 auto; }
.appt .bar { width:4px; align-self:stretch; border-radius:99px; flex:0 0 auto; }
.appt .info { flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.appt .svc { font-size:14px; font-weight:700; }
.appt .det { font-size:12px; color:var(--txt2); }
.appt .det a { color:var(--acctxt); }
.appt .acts { display:flex; gap:6px; align-items:center; }
.appt .acts button { width:34px; height:34px; padding:0; font-size:13px; }
.appt.done { opacity:.55; }
.appt.cancelled { opacity:.45; }
.appt.cancelled .svc { text-decoration:line-through; }
.tag { font-size:10px; font-weight:700; padding:3px 8px; border-radius:99px; background:var(--chip); color:var(--chiptxt); text-transform:uppercase; }
.chev-appt { color:var(--mut); font-size:18px; font-weight:700; }

/* Ficha de cita */
.status-row { display:grid; grid-template-columns:repeat(2,1fr); gap:8px; margin:4px 0; }
.st-btn { padding:11px; font-size:12px; font-weight:700; border:1px solid var(--line); background:var(--card); color:var(--txt); border-radius:10px; }
.st-btn.on { background:var(--accent); color:#fff; border-color:var(--accent); }

/* Reservas por validar (link público) */
.appt.pending { border-color:var(--accent); box-shadow:0 0 0 1px var(--accent) inset; }
.validate-box { background:var(--accsoft); border:1px solid var(--accent); border-radius:14px; padding:12px 14px 6px; margin-bottom:4px; }
.vb-head { font-weight:800; font-size:14px; color:var(--acctxt); margin-bottom:8px; }
.pcard { display:flex; gap:12px; align-items:center; background:var(--card); border:1px solid var(--line); border-radius:12px; padding:12px 14px; margin-bottom:8px; cursor:pointer; }
.pcard:hover { border-color:var(--accent); }
.pc-bar { width:4px; align-self:stretch; border-radius:99px; flex:0 0 auto; }
.pc-info { flex:1; min-width:0; }
.pc-svc { font-weight:700; font-size:14px; }
.pc-when { font-size:12px; color:var(--acctxt); font-weight:700; }
.pc-cli { font-size:12px; color:var(--txt2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pc-acts { display:flex; flex-direction:column; gap:6px; flex:0 0 auto; }
.pc-acts button { padding:8px 10px; font-size:12px; font-weight:700; border-radius:9px; width:auto; }
.pc-ok { background:var(--success); color:#fff; border:0; }
.pc-no { background:var(--card); color:var(--danger); border:1px solid var(--line); }
.pc-no:hover { border-color:var(--danger); }
.validate-note { background:var(--accsoft); color:var(--acctxt); font-size:12px; font-weight:600; padding:9px 11px; border-radius:10px; margin:4px 0; }
.detail-actions { display:flex; gap:8px; margin-top:12px; flex-wrap:wrap; }
.detail-actions button { flex:1; min-width:120px; }
.notify-box { margin-top:12px; border-top:1px solid var(--line); padding-top:12px; }

/* ---------- Calendario mensual ---------- */
.cal-nav { display:flex; justify-content:space-between; align-items:center; margin-bottom:12px; }
.cal-nav b { font-size:17px; font-weight:800; text-transform:capitalize; }
.cal-nav button { width:40px; height:40px; padding:0; border:1px solid var(--line); border-radius:11px; font-size:16px; background:var(--card); color:var(--txt2); }
.cal-dows { display:grid; grid-template-columns:repeat(7,1fr); gap:5px; margin-bottom:5px; }
.cal-dows span { text-align:center; font-size:10.5px; font-weight:800; letter-spacing:.03em; text-transform:uppercase; color:var(--mut); }
.cal-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:5px; }
.cal-cell { min-height:78px; display:flex; flex-direction:column; gap:3px; padding:5px 4px; cursor:pointer;
  background:var(--card); border:1px solid var(--line); border-radius:10px; overflow:hidden; }
.cal-cell.empty { background:transparent; border:0; cursor:default; pointer-events:none; }
.cal-cell.today { border-color:var(--accent); }
.cal-cell.today .cal-dnum { color:var(--acctxt); }
.cal-cell.sel { border-color:var(--accent); box-shadow:0 0 0 2px var(--accent) inset; }
.cal-dnum { font-size:12.5px; font-weight:800; color:var(--txt2); line-height:1; padding:1px 2px; }
.cal-evs { display:flex; flex-direction:column; gap:2px; min-height:0; overflow:hidden; }
.cal-ev { font-size:10px; line-height:1.35; padding:1px 4px; border-radius:4px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  color:var(--txt); background:color-mix(in srgb, var(--c) 15%, transparent); border-left:3px solid var(--c); }
.cal-ev b { font-weight:800; }
.cal-more { font-size:9.5px; font-weight:800; color:var(--txt2); padding-left:2px; }
.daybar { display:flex; flex-direction:column; gap:12px; margin-top:22px; }
@media (min-width:900px) {
  .cal-cell { min-height:104px; }
  .cal-ev { font-size:11px; }
}
#dayList { display:flex; flex-direction:column; gap:10px; }

/* ---------- Horario ---------- */
.plan-row { display:grid; grid-template-columns:84px 1fr 1fr; gap:12px; align-items:center; padding:10px 0; border-bottom:1px solid var(--line2); }
.plan-row:last-child { border-bottom:0; }
.plan-row .check { width:auto; margin:0; font-size:13px; }
.plan-row input[type=time] { padding:10px 12px; }
#planEditor { margin-bottom:6px; }

/* ---------- Slots ---------- */
.slots { display:grid; grid-template-columns:repeat(auto-fill,minmax(72px,1fr)); gap:8px; margin-top:8px; }
.slot { padding:11px 0; text-align:center; border:1px solid var(--line); border-radius:10px; cursor:pointer; font-size:14px; font-weight:700; background:var(--card); color:var(--txt); }
.slot.sel { background:var(--accent); border-color:var(--accent); color:#fff; }

/* ---------- Ajustes ---------- */
.menu { display:flex; flex-direction:column; background:var(--card); border:1px solid var(--line); border-radius:14px; overflow:hidden; }
.backbtn { background:none; border:0; color:var(--txt2); font-size:13px; font-weight:700; padding:0 0 2px; width:auto; }
.backbtn:hover { color:var(--accent); }
.menu-item { display:flex; align-items:center; justify-content:space-between; gap:14px; text-align:left; padding:16px 18px; background:none; border:0; border-bottom:1px solid var(--line2); width:100%; border-radius:0; }
.menu-item:last-child { border-bottom:0; }
.menu-item:hover { background:var(--accsoft); }
.menu-item div { flex:1; }
.menu-item b { display:block; font-size:14px; font-weight:700; }
.menu-item small { color:var(--txt2); font-size:12px; font-weight:500; }
.menu-item .chev { color:var(--mut); font-size:16px; }
.version { font-size:12px; color:var(--mut); }

/* ---------- Nav (móvil: barra inferior) ---------- */
.bottomnav { position:fixed; bottom:0; left:50%; transform:translateX(-50%); width:100%; max-width:520px; z-index:20;
  display:grid; grid-template-columns:repeat(5,1fr); background:var(--panel); border-top:1px solid var(--line); padding-bottom:env(safe-area-inset-bottom,0px); }
.bottomnav button { background:none; border:0; border-radius:0; color:var(--txt2);
  font-size:10px; font-weight:700; padding:10px 1px 12px; display:flex; flex-direction:column; align-items:center; gap:4px; }
.bottomnav button:hover { border-color:transparent; }
.bottomnav button .nvi { display:flex; }
.bottomnav button.active { color:var(--acctxt); }
.nav-brand { display:none; }

/* ---------- Emails ---------- */
.mail-toolbar { display:flex; gap:8px; }
.mail-toolbar select { flex:1; }
.mail-toolbar .icon { flex:0 0 auto; }
#mailList { display:flex; flex-direction:column; gap:8px; }
.mail-item { display:flex; gap:12px; align-items:center; padding:14px 16px; background:var(--card); border:1px solid var(--line); border-radius:12px; cursor:pointer; }
.mail-item:hover { border-color:var(--accent); }
.mail-item .dot { flex:0 0 8px; width:8px; height:8px; border-radius:50%; background:var(--accent); }
.mail-item .dot.read { background:transparent; border:1px solid var(--line); }
.mail-item .mi-main { flex:1; min-width:0; }
.mail-item .mi-from { font-weight:700; font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mail-item .mi-subj { font-size:13px; color:var(--txt2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mail-item.unread .mi-from { font-weight:800; }
.mail-item.unread .mi-subj { color:var(--txt); }
.mail-item .mi-date { flex:0 0 auto; font-size:11px; color:var(--mut); font-weight:600; }
.mail-pager { display:flex; justify-content:space-between; align-items:center; gap:8px; padding-top:4px; }
.mail-pager button { width:auto; padding:8px 14px; font-size:13px; }
.mail-meta { font-size:13px; color:var(--txt2); margin:2px 0 10px; line-height:1.5; word-break:break-word; }
.mail-iframe { width:100%; height:52vh; border:1px solid var(--line); border-radius:12px; background:#fff; margin-top:4px; }
.mail-atts { display:flex; flex-wrap:wrap; gap:8px; }
.mail-atts a { display:inline-block; padding:7px 10px; border:1px solid var(--line); border-radius:8px; font-size:12px; font-weight:600; color:var(--txt); text-decoration:none; }

/* ---------- Botón de voz flotante ---------- */
.voice-fab { position:fixed; right:16px; bottom:calc(env(safe-area-inset-bottom,0px) + 84px); z-index:25;
  width:56px; height:56px; padding:0; border:0; border-radius:50%; background:var(--accent); color:#fff; font-size:22px; box-shadow:0 12px 26px var(--accshadow); }

/* ---------- Hojas / modales ---------- */
.sheet { position:fixed; inset:0; z-index:40; background:rgba(2,6,20,.6); display:flex; align-items:flex-end; justify-content:center; }
.sheet-card { width:100%; max-width:520px; background:var(--panel); border-top:1px solid var(--line); border-radius:20px 20px 0 0;
  padding:22px 22px calc(env(safe-area-inset-bottom,0px) + 28px); max-height:92vh; overflow-y:auto; display:flex; flex-direction:column; gap:12px; }
.sheet-card .card-h { margin:0; }
.sheet-card label:first-of-type { margin-top:0; }

#chat { max-height:44vh; overflow-y:auto; display:flex; flex-direction:column; gap:8px; }
.bub { display:flex; }
.bub.me { justify-content:flex-end; }
.bub span { max-width:85%; padding:10px 14px; font-size:14px; line-height:1.45; white-space:pre-wrap; border-radius:14px; }
.bub.me span { background:var(--accent); color:#fff; border-bottom-right-radius:4px; }
.bub.ai span { background:var(--card); border:1px solid var(--line); border-bottom-left-radius:4px; }
.pend { border:1px solid var(--line); border-radius:12px; padding:12px; background:var(--card); }

/* ---------- Asistente (rediseño tipo chat) ---------- */
.assist-card { gap:14px; }
.assist-head { display:flex; align-items:center; gap:12px; }
.assist-logo { width:42px; height:42px; border-radius:13px; background:var(--accsoft); color:var(--accent);
  display:flex; align-items:center; justify-content:center; flex:0 0 auto; }
.assist-logo svg { width:22px; height:22px; }
.assist-tt { flex:1; min-width:0; }
.assist-tt h2 { margin:0; font-size:16px; font-weight:800; letter-spacing:-.01em; }
.assist-tt p { margin:2px 0 0; font-size:12.5px; color:var(--txt2); font-weight:500; }
.assist-actions { display:flex; gap:8px; flex:0 0 auto; }
.assist-actions .icon { width:38px; height:38px; border-radius:11px; }
.assist-sep { height:1px; background:var(--line); margin:-2px 0; }
#chat:empty { display:none; }
#pendings:empty { display:none; }
#assistSug { display:flex; flex-direction:column; gap:9px; align-items:flex-start; }
#assistSug.hidden { display:none; }
.sug { width:auto; text-align:left; font-size:13.5px; font-weight:600; line-height:1.3; padding:11px 15px;
  border-radius:15px; cursor:pointer; border:1px solid var(--line); background:var(--card); color:var(--txt); margin:0; }
.sug.accent { background:var(--accsoft); border-color:transparent; color:var(--acctxt); }
.sug:hover { border-color:var(--accent); }
.assist-input { display:flex; align-items:center; gap:9px; }
.assist-input #chatInput { flex:1; border-radius:999px; background:var(--chip); border:1px solid var(--line); padding:13px 18px; margin:0; }
.round-btn { width:46px; height:46px; border-radius:50%; padding:0; margin:0; flex:0 0 auto;
  display:flex; align-items:center; justify-content:center; }
.round-btn svg { width:20px; height:20px; }
#micBtn.round-btn { background:var(--chip); color:var(--txt2); border:1px solid var(--line); }
#micBtn.round-btn.recording { background:var(--red); color:#fff; border-color:transparent; }
#sendBtn.round-btn { background:var(--accent); color:#fff; border:0; box-shadow:0 8px 18px var(--accshadow); }
#sendBtn.round-btn:hover { filter:brightness(.95); }
.voice-fab svg { width:24px; height:24px; }

/* ---------- Banner instalación (PWA) ---------- */
.install-banner { display:flex; align-items:center; gap:12px; background:var(--card); border:1px solid var(--line); border-radius:14px; padding:12px 14px; }
.install-banner .ib-ico { font-size:22px; line-height:1; }
.install-banner .ib-txt { flex:1; min-width:0; }
.install-banner .ib-txt b { display:block; font-size:14px; font-weight:700; }
.install-banner .ib-txt small { font-size:12px; color:var(--txt2); }
.install-banner #ibAction { flex:0 0 auto; margin:0; }
.install-banner #ibClose { flex:0 0 auto; width:34px; height:34px; font-size:14px; }

/* ============================================================
   ESCRITORIO (≥900px): sidebar lateral + contenido
   ============================================================ */
@media (min-width:900px) {
  html, body { height:100%; overflow:hidden; overscroll-behavior:none; }

  #app {
    display:grid;
    grid-template-columns:250px 1fr;
    grid-template-rows:auto 1fr;
    grid-template-areas:"nav header" "nav main";
    max-width:1240px; margin:0 auto; height:100vh; overflow:hidden; background:var(--bg);
  }

  /* Sidebar */
  .bottomnav {
    grid-area:nav; position:static; transform:none; width:auto; max-width:none; height:100%;
    display:flex; flex-direction:column; align-items:stretch; gap:4px; overflow-y:auto;
    border-top:0; border-right:1px solid var(--line); background:var(--panel); padding:16px 12px;
  }
  .nav-brand { display:flex; align-items:center; gap:10px; font-size:16px; font-weight:800; letter-spacing:-.3px; padding:8px 10px 18px; }
  .nav-logo { width:30px; height:30px; }
  .bottomnav button {
    flex-direction:row; justify-content:flex-start; text-align:left; gap:10px;
    padding:11px 12px; font-size:13px; font-weight:600; color:var(--txt2); border-radius:10px;
  }
  .bottomnav button .nvl { font-size:13px; }
  .bottomnav button:hover { background:var(--accsoft); }
  .bottomnav button.active { background:var(--accsoft); color:var(--acctxt); font-weight:700; }

  /* Cabecera */
  .topbar { grid-area:header; position:static; padding:18px 32px 0; background:var(--bg); }
  .topbar-inner { justify-content:flex-end; }
  .topbar .brand { display:none; }

  /* Contenido: única zona con scroll */
  main { grid-area:main; min-height:0; overflow-y:auto; overscroll-behavior:none; padding:22px 32px 28px; }
  main > .view { max-width:860px; margin:0 auto; }

  .voice-fab { right:28px; bottom:28px; }

  /* Hojas → diálogos centrados */
  .sheet { align-items:center; }
  .sheet-card { max-width:540px; border:1px solid var(--line); border-radius:18px; padding:26px 28px; max-height:88vh; }
}

@media (min-width:1400px) { #app { max-width:1320px; } }

/* ---------- Eventos personales del dueño ---------- */
.appt.evento { background:color-mix(in srgb, var(--txt2) 7%, var(--card)); border-style:dashed; }
.appt.evento .hora { background:color-mix(in srgb, var(--txt2) 18%, transparent); color:var(--txt2); }

/* Selector "añadir": cita o evento */
.add-choice { display:flex; flex-direction:column; gap:12px; margin-top:8px; }
.add-choice .choice { display:flex; flex-direction:column; align-items:flex-start; gap:4px; text-align:left;
  padding:16px 18px; border:1px solid var(--line); border-radius:14px; background:var(--card); color:var(--txt); cursor:pointer; }
.add-choice .choice:hover { border-color:var(--accent); }
.add-choice .choice b { font-size:15px; }
.add-choice .choice small { color:var(--txt2); font-weight:500; }

/* Registro de actividad */
.act-list { display:flex; flex-direction:column; gap:2px; margin-top:6px; max-height:60vh; overflow:auto; }
.act-row { display:flex; gap:12px; align-items:flex-start; padding:12px 2px; border-bottom:1px solid var(--line2); }
.act-ic { flex:0 0 auto; font-size:16px; line-height:1.4; }
.act-main { flex:1; min-width:0; }
.act-sum { font-size:14px; font-weight:600; }
.act-meta { margin-top:2px; }