:root{
  --ink:#eef3f2; --muted:#a3b3b0; --accent:#7fd3c8; --accent-ink:#0d1a1b;
  --panel:rgba(17,24,27,.78); --panel-solid:#141c1f; --line:rgba(255,255,255,.1); --btn:rgba(255,255,255,.06);
  --r:14px; --gut:14px;
  --st:env(safe-area-inset-top,0px); --sb:env(safe-area-inset-bottom,0px);
  color-scheme:dark;
}
*,*::before,*::after{ box-sizing:border-box; }
[hidden]{ display:none !important; }
html,body{ height:100%; margin:0; }
body{ overflow:hidden; background:#9fc3e0; color:var(--ink); font:14px/1.4 'Instrument Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  -webkit-font-smoothing:antialiased; -webkit-tap-highlight-color:transparent; overscroll-behavior:none; }
button,select,input,textarea{ font:inherit; color:inherit; }
button{ cursor:pointer; }
button:focus-visible,select:focus-visible,input:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
svg{ stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }

canvas#c{ position:fixed; inset:0; width:100%; height:100%; display:block; touch-action:none; cursor:grab; }
canvas#c.dragging{ cursor:grabbing; }

/* carga */
#loading{ position:fixed; inset:0; z-index:50; display:grid; place-content:center; justify-items:center; gap:14px;
  background:radial-gradient(120% 80% at 50% 30%, #1d2a2f, #0c1214); color:var(--ink); transition:opacity .5s; }
#loading.done{ opacity:0; pointer-events:none; }
#loading .brand{ color:var(--accent); }
#loading p{ margin:0; color:var(--muted); }
#loading .bar{ width:180px; height:3px; border-radius:3px; background:rgba(255,255,255,.1); overflow:hidden; }
#loading .bar span{ display:block; height:100%; width:0; background:var(--accent); transition:width .3s; }

/* barra superior */
.top{ position:fixed; left:0; right:0; top:0; z-index:5; display:flex; justify-content:space-between; align-items:flex-start; gap:10px;
  padding:calc(var(--gut) + var(--st)) var(--gut) 0; pointer-events:none; }
.top > *{ pointer-events:auto; }
.chip{ background:var(--panel); backdrop-filter:blur(14px) saturate(1.3); -webkit-backdrop-filter:blur(14px) saturate(1.3);
  border:1px solid var(--line); border-radius:var(--r); padding:9px 14px 10px; min-width:0; max-width:min(60vw, 360px); }
.chip .name{ font-size:17px; font-weight:600; letter-spacing:-.01em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.chip .sub{ color:var(--muted); font-size:12.5px; margin-top:1px; font-variant-numeric:tabular-nums; }
.pill{ display:inline-flex; align-items:center; gap:6px; height:40px; padding:0 14px; border-radius:999px; border:1px solid var(--line);
  background:var(--panel); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); font-weight:600; white-space:nowrap; }
.pill:hover{ border-color:rgba(127,211,200,.5); }
.pill.ghost{ background:transparent; }
#designName{ max-width:42vw; overflow:hidden; text-overflow:ellipsis; }

/* panel lateral (PC) / hoja inferior (celular) */
#panel{ position:fixed; z-index:6; right:var(--gut); top:calc(var(--gut) + var(--st) + 52px); width:320px; max-height:calc(100dvh - 150px - var(--st) - var(--sb));
  overflow:auto; background:var(--panel); backdrop-filter:blur(18px) saturate(1.3); -webkit-backdrop-filter:blur(18px) saturate(1.3);
  border:1px solid var(--line); border-radius:18px; padding:8px 14px 16px; }
#panel .grab{ display:none; }
.tabs{ display:flex; gap:4px; padding:4px; margin:4px 0 12px; background:rgba(255,255,255,.05); border-radius:12px; position:sticky; top:0; z-index:1; backdrop-filter:blur(10px); }
.tabs button{ flex:1; border:0; background:none; padding:8px 6px; border-radius:9px; color:var(--muted); font-weight:600; }
.tabs button[aria-selected="true"]{ background:rgba(255,255,255,.1); color:var(--ink); }
.note{ color:var(--muted); font-size:12.5px; line-height:1.5; margin:12px 2px 0; }
.designs{ display:grid; gap:8px; }
.grid{ display:grid; grid-template-columns:1fr 1fr; gap:6px; }
.grid button{ text-align:left; border:1px solid var(--line); background:var(--btn); border-radius:10px; padding:10px 11px; font-size:13px; }
.grid button:hover{ border-color:rgba(127,211,200,.45); }
.grid .lvl{ grid-column:1/-1; color:var(--accent); font-size:12px; font-weight:600; margin:6px 2px 0; }
.field{ margin:4px 0 14px; }
.field .lbl{ display:flex; justify-content:space-between; margin-bottom:6px; }
.field output{ color:var(--muted); font-variant-numeric:tabular-nums; }
.field.row{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
input[type=range]{ width:100%; accent-color:var(--accent); }
select{ background:var(--panel-solid); border:1px solid var(--line); border-radius:9px; padding:7px 9px; }
.toggles{ display:grid; grid-template-columns:1fr 1fr; gap:8px 12px; margin:6px 0 16px; }
.toggles label{ display:flex; align-items:center; gap:8px; font-size:13px; }
input[type=checkbox]{ width:18px; height:18px; accent-color:var(--accent); }

/* barra inferior */
.dock{ position:fixed; z-index:5; left:50%; transform:translateX(-50%); bottom:calc(var(--gut) + var(--sb)); display:flex; gap:8px; align-items:center; }
.seg{ display:flex; padding:4px; gap:2px; background:var(--panel); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border:1px solid var(--line); border-radius:999px; }
.seg button{ display:flex; align-items:center; gap:6px; border:0; background:none; height:38px; padding:0 13px; border-radius:999px; color:var(--muted); font-weight:600; }
.seg.small button{ padding:0 11px; }
.seg button svg{ width:19px; height:19px; }
.seg button[aria-pressed="true"]{ background:var(--accent); color:var(--accent-ink); }
.fab{ display:flex; align-items:center; gap:6px; height:46px; min-width:46px; justify-content:center; padding:0 14px; border-radius:999px; border:1px solid var(--line);
  background:var(--panel); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); font-weight:600; }
.fab svg{ width:20px; height:20px; }
.only-mobile{ display:none; }

#hint{ position:fixed; left:var(--gut); bottom:calc(var(--gut) + var(--sb)); z-index:4; color:rgba(255,255,255,.85); font-size:12.5px; text-shadow:0 1px 3px rgba(0,0,0,.5); pointer-events:none; max-width:420px; }
#joy{ position:fixed; left:22px; bottom:calc(84px + var(--sb)); width:118px; height:118px; border-radius:50%; background:rgba(17,24,27,.28);
  border:1px solid rgba(255,255,255,.35); display:none; touch-action:none; z-index:4; backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px); }
#joy .knob{ position:absolute; left:50%; top:50%; width:50px; height:50px; margin:-25px 0 0 -25px; border-radius:50%; background:rgba(238,243,242,.88); box-shadow:0 2px 10px rgba(0,0,0,.25); }
body.mode-walk #joy{ display:block; }
@media (pointer:fine){ body #joy{ display:none !important; } }
@media (pointer:coarse){ #hint{ display:none; } }

/* etiquetas de planta */
#labels{ position:fixed; inset:0; pointer-events:none; z-index:2; }
#labels .lb{ position:absolute; transform:translate(-50%,-50%); background:rgba(17,24,27,.82); color:var(--ink); padding:3px 8px 4px; border-radius:6px; font-size:12px; line-height:1.25; text-align:center; white-space:nowrap; }
#labels .lb b{ font-weight:600; display:block; }
#labels .lb span{ color:var(--accent); font-variant-numeric:tabular-nums; }

/* aviso */
#toast{ position:fixed; z-index:9; left:50%; transform:translateX(-50%); bottom:calc(76px + var(--sb)); background:var(--panel); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border:1px solid var(--line); border-radius:999px; padding:9px 16px; font-weight:600; }
.fab:disabled{ opacity:.6; }

/* colaboración: tarjetas de diseño, acciones, línea de tiempo y comentarios */
.dcard{ display:flex; align-items:stretch; border:1px solid var(--line); background:var(--btn); border-radius:12px; overflow:hidden; }
.dcard:has(.main[aria-checked="true"]){ border-color:var(--accent); background:rgba(127,211,200,.12); }
.dcard .main{ flex:1; min-width:0; text-align:left; border:0; background:none; padding:11px 12px; }
.dcard .main b{ display:block; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dcard .main small{ color:var(--muted); font-size:12px; }
.dcard .vote{ display:flex; align-items:center; gap:4px; border:0; border-left:1px solid var(--line); background:none; padding:0 12px; color:var(--muted); font-size:13px; font-variant-numeric:tabular-nums; min-width:52px; justify-content:center; }
.dcard .vote svg{ width:18px; height:18px; }
.dcard .vote[aria-pressed="true"]{ color:#ff8f9c; }
.dcard .vote[aria-pressed="true"] svg{ fill:currentColor; }
.dcard:hover{ border-color:rgba(127,211,200,.45); }
.actions{ display:flex; flex-wrap:wrap; gap:6px; margin:12px 0 0; }
.actions button,.verbar button,.dlg-list button{ border:1px solid var(--line); background:var(--btn); border-radius:10px; padding:8px 12px; font-weight:600; font-size:13px; }
.actions button:hover,.verbar button:hover,.dlg-list button:hover{ border-color:rgba(127,211,200,.45); }
button.primary{ background:var(--accent); color:var(--accent-ink); border-color:transparent; }
button.danger{ color:#ff9a9a; }
button.primary.danger{ background:#e06b6b; color:#1b0d0d; }
button.ghost{ background:none; border:1px solid var(--line); }
button.link{ border:0; background:none; padding:0; color:var(--accent); font-weight:600; text-decoration:underline; text-underline-offset:2px; }
.sec{ font-size:12px; font-weight:600; color:var(--accent); text-transform:uppercase; letter-spacing:.06em; margin:20px 2px 8px; }
.sec span{ color:var(--muted); letter-spacing:0; }
.timeline{ list-style:none; margin:0; padding:0; display:grid; gap:2px; max-height:260px; overflow:auto; }
.timeline button{ width:100%; display:flex; gap:10px; align-items:flex-start; text-align:left; border:0; background:none; border-radius:10px; padding:7px 8px; }
.timeline button:hover{ background:var(--btn); }
.timeline button[aria-current="true"]{ background:rgba(127,211,200,.12); }
.timeline .n{ flex:none; min-width:30px; font-weight:700; color:var(--accent); font-variant-numeric:tabular-nums; }
.timeline .t{ min-width:0; }
.timeline .t b{ display:block; font-weight:500; font-size:13px; }
.timeline .t small{ color:var(--muted); font-size:11.5px; }
.comments{ list-style:none; margin:0; padding:0; display:grid; gap:8px; }
.comments li{ background:var(--btn); border-radius:10px; padding:8px 10px; }
.comments li.empty{ background:none; color:var(--muted); padding:0 2px; font-size:13px; }
.comments .h{ display:flex; align-items:baseline; gap:8px; }
.comments .h small{ color:var(--muted); font-size:11.5px; }
.comments .del{ margin-left:auto; border:0; background:none; color:var(--muted); font-size:17px; line-height:1; padding:0 2px; }
.comments p{ margin:3px 0 0; white-space:pre-wrap; overflow-wrap:anywhere; }
.cform{ display:flex; gap:6px; align-items:flex-end; margin-top:10px; }
.cform textarea,.dlg-field input,.dlg-field textarea,.dlg-field select{ width:100%; background:var(--panel-solid); border:1px solid var(--line); border-radius:10px; padding:9px 10px; resize:vertical; font-size:16px; }
.cform textarea{ flex:1; min-height:42px; }
.cform button{ height:42px; border-radius:10px; padding:0 14px; font-weight:600; }
#accountBtn.in{ border-color:rgba(127,211,200,.5); }
.top-actions{ display:flex; gap:8px; }

/* versión anterior en pantalla */
.verbar{ position:fixed; z-index:5; left:50%; transform:translateX(-50%); top:calc(var(--gut) + var(--st) + 58px); display:flex; align-items:center; gap:8px;
  background:var(--panel); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border:1px solid rgba(127,211,200,.5); border-radius:14px; padding:6px 6px 6px 14px; font-weight:600; white-space:nowrap; }
.verbar button{ padding:6px 11px; }

/* diálogo */
.dlg{ width:min(420px, calc(100vw - 24px)); border:1px solid var(--line); border-radius:18px; background:var(--panel-solid); color:var(--ink); padding:20px 18px 16px; box-shadow:0 20px 60px rgba(0,0,0,.45); }
.dlg::backdrop{ background:rgba(6,10,12,.55); backdrop-filter:blur(3px); }
.dlg h2{ margin:0 0 6px; font-size:19px; letter-spacing:-.01em; }
.dlg-text{ margin:0 0 12px; color:var(--muted); line-height:1.5; }
.dlg-fields{ display:grid; gap:12px; }
.dlg-field span{ display:block; font-size:12.5px; color:var(--muted); margin-bottom:5px; }
.dlg-field input[readonly]{ color:var(--accent); }
.dlg-list{ display:grid; gap:6px; }
.dlg-list button{ text-align:left; padding:11px 12px; }
.dlg-err{ margin:12px 0 0; color:#ff9a9a; font-size:13px; }
.dlg-btns{ display:flex; justify-content:flex-end; gap:8px; margin-top:18px; }
.dlg-btns button{ border-radius:10px; padding:10px 16px; font-weight:600; }

@media (max-width:760px){
  :root{ --gut:12px; }
  .only-mobile{ display:flex; }
  .seg button span, .fab span{ display:none; }
  .seg button{ padding:0 11px; }
  #panel{ left:0; right:0; top:auto; bottom:0; width:auto; max-height:72dvh; border-radius:20px 20px 0 0; border-bottom:0;
    padding:6px 16px calc(18px + var(--sb)); transform:translateY(105%); transition:transform .28s cubic-bezier(.2,.8,.2,1); }
  #panel.open{ transform:none; }
  #panel .grab{ display:block; width:40px; height:5px; border-radius:5px; background:rgba(255,255,255,.25); margin:4px auto 6px; }
  body.sheet .dock{ opacity:0; pointer-events:none; }
  .chip{ max-width:calc(100vw - 2*var(--gut) - 150px); padding:8px 12px; }
  .chip .name{ font-size:15.5px; }
  #accountBtn span{ display:none; }
  #accountBtn{ padding:0 12px; }
  .verbar{ top:auto; bottom:calc(var(--gut) + var(--sb) + 62px); }
}
@media (prefers-reduced-motion:reduce){ *{ transition:none !important; } }

body.sheet .verbar{ opacity:0; pointer-events:none; }

/* pedir cambios */
.tabs .badge{ display:inline-grid; place-items:center; min-width:17px; height:17px; margin-left:5px; padding:0 4px; border-radius:9px; background:var(--accent); color:var(--accent-ink); font-size:11px; font-weight:700; vertical-align:1px; }
.note.gate{ margin-top:2px; }
.note.warn{ color:#f3c77a; margin:0 2px 8px; }
.thread{ list-style:none; margin:0 0 12px; padding:0; display:grid; gap:8px; }
.thread .empty{ color:var(--muted); font-size:13px; line-height:1.5; padding:4px 2px; }
.thread .sep{ display:flex; justify-content:space-between; gap:8px; font-size:11.5px; color:var(--muted); margin-top:6px; padding:0 2px; text-transform:uppercase; letter-spacing:.05em; }
.thread .sep b{ font-weight:600; }
.thread .sep.queued b,.thread .sep.running b{ color:#f3c77a; }
.thread .sep.done b{ color:var(--accent); }
.thread .sep.failed b{ color:#ff9a9a; }
.thread .sep.draft b{ color:var(--ink); }
.msg{ background:var(--btn); border:1px solid var(--line); border-radius:12px 12px 12px 4px; padding:8px 10px; }
.msg.draft{ border-style:dashed; border-color:rgba(127,211,200,.4); }
.msg.ai{ background:rgba(127,211,200,.1); border-color:rgba(127,211,200,.3); border-radius:12px 12px 4px 12px; }
.msg .mh{ display:flex; align-items:center; gap:6px; }
.msg p{ margin:5px 0 0; white-space:pre-wrap; overflow-wrap:anywhere; }
.msg .del{ margin-left:auto; border:0; background:none; color:var(--muted); font-size:17px; line-height:1; padding:0 2px; }
.chip-t{ display:inline-block; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; border:0; border-radius:999px; padding:2px 9px; font-size:11.5px; font-weight:600; background:rgba(127,211,200,.16); color:var(--accent); }
button.chip-t:hover{ background:rgba(127,211,200,.28); }
.chip-t.general{ background:rgba(255,255,255,.08); color:var(--muted); }
.chip-t.ai{ background:var(--accent); color:var(--accent-ink); }
.msg .imgs{ display:flex; gap:6px; margin-top:7px; }
.msg .imgs a{ display:block; flex:1; max-width:50%; }
.msg .imgs img{ display:block; width:100%; height:84px; object-fit:cover; border-radius:8px; }
.composer{ display:grid; gap:8px; background:rgba(255,255,255,.04); border:1px solid var(--line); border-radius:14px; padding:8px; }
.composer textarea{ width:100%; background:var(--panel-solid); border:1px solid var(--line); border-radius:10px; padding:9px 10px; resize:vertical; font-size:16px; min-height:64px; }
.target{ display:flex; align-items:center; gap:6px; background:rgba(127,211,200,.14); color:var(--accent); border-radius:10px; padding:5px 6px 5px 9px; font-weight:600; font-size:13px; }
.target svg{ width:16px; height:16px; flex:none; }
.target span{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.target button,.cphoto button{ border:0; background:none; color:inherit; font-size:18px; line-height:1; padding:0 4px; }
.cphoto{ position:relative; width:96px; }
.cphoto img{ display:block; width:96px; height:72px; object-fit:cover; border-radius:8px; }
.cphoto button{ position:absolute; top:2px; right:2px; background:rgba(0,0,0,.6); border-radius:50%; width:22px; height:22px; color:#fff; font-size:15px; }
.crow{ display:flex; justify-content:space-between; gap:8px; }
.iconbtn{ display:inline-flex; align-items:center; gap:6px; border:1px solid var(--line); background:var(--btn); border-radius:10px; padding:0 12px; height:40px; font-weight:600; font-size:13px; cursor:pointer; }
.iconbtn svg{ width:18px; height:18px; }
.crow .primary{ border-radius:10px; padding:0 14px; height:40px; font-weight:600; }
button.wide{ width:100%; height:46px; border-radius:12px; font-weight:700; margin-top:12px; font-size:15px; }
button.wide:disabled{ opacity:.45; cursor:default; }
.pickcard{ position:fixed; z-index:7; display:grid; gap:4px; width:max-content; max-width:min(300px, calc(100vw - 24px)); background:var(--panel-solid); border:1px solid rgba(127,211,200,.45);
  border-radius:14px; padding:10px 12px 12px; box-shadow:0 12px 34px rgba(0,0,0,.4); }
.pickcard b{ font-size:14.5px; }
.pickcard small{ color:var(--muted); font-size:12.5px; }
.pickcard small:empty{ display:none; }
.pickcard button{ margin-top:6px; border-radius:10px; padding:9px 12px; font-weight:600; }