@font-face{font-family:'Neue Montreal';src:url('fonts/NeueMontreal-Light.otf') format('opentype');font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:'Neue Montreal';src:url('fonts/NeueMontreal-Regular.otf') format('opentype');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Neue Montreal';src:url('fonts/NeueMontreal-Medium.otf') format('opentype');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Neue Montreal';src:url('fonts/NeueMontreal-Bold.otf') format('opentype');font-weight:700;font-style:normal;font-display:swap}

/* Layout: sidebar plegable + area de trabajo; registros se editan en panel lateral. Paleta y tipo del Bosco Design System. */
:root{
  --font:'Neue Montreal','Helvetica Neue',Arial,sans-serif;
  --green:#4F7D6A;--green-900:#2F4D40;--green-700:#5E8C79;--green-200:#C9D9D2;--green-100:#E5ECE7;
  --slate:#314043;--slate-900:#1F2A2C;--ice:#E3F1F5;--orange:#D26F2C;--orange-700:#A85820;--orange-300:#E59866;--white:#FFFFFF;

  --bg:#FFFFFF;
  --side:color-mix(in srgb,#E5ECE7 45%,#FFFFFF);
  --raise:#FFFFFF;
  --sunk:color-mix(in srgb,#E5ECE7 50%,#FFFFFF);
  --hover:color-mix(in srgb,#E5ECE7 80%,#FFFFFF);
  --fg:#314043;--fg-strong:#1F2A2C;--muted:rgba(49,64,67,0.74);--faint:rgba(49,64,67,0.5);
  --line:rgba(49,64,67,0.13);--line-strong:rgba(49,64,67,0.26);
  --brand:#4F7D6A;--brand-hover:#2F4D40;--brand-text:#2F4D40;--brand-soft:#E5ECE7;--on-brand:#FFFFFF;
  --accent-text:#A85820;--accent-soft:color-mix(in srgb,#E59866 30%,#FFFFFF);--accent-fill:#A85820;
  --info-soft:#E3F1F5;--info-text:#314043;
  --neutral-soft:color-mix(in srgb,#314043 8%,#FFFFFF);
  --logo:#314043;
  --chart-done:#4F7D6A;--chart-pend:#E59866;--chart-recv:#314043;--chart-sel:color-mix(in srgb,#E5ECE7 75%,transparent);--grid:rgba(49,64,67,0.12);
  --shadow:0 12px 32px rgba(31,42,44,0.18);--shadow-soft:0 2px 8px rgba(31,42,44,0.08);
  --scrim:rgba(31,42,44,0.38);
  --r-sm:6px;--r-md:10px;--r-lg:16px;
  --ease:cubic-bezier(.2,.7,.2,1);
  --sbw:248px;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#1F2A2C;--side:color-mix(in srgb,#1F2A2C 82%,#000000);--raise:color-mix(in srgb,#314043 50%,#1F2A2C);--sunk:color-mix(in srgb,#1F2A2C 72%,#000000);--hover:color-mix(in srgb,#314043 70%,#1F2A2C);
  --fg:#E3F1F5;--fg-strong:#FFFFFF;--muted:rgba(227,241,245,0.72);--faint:rgba(227,241,245,0.5);
  --line:rgba(227,241,245,0.12);--line-strong:rgba(227,241,245,0.24);
  --brand-text:#C9D9D2;--brand-soft:color-mix(in srgb,#4F7D6A 28%,#1F2A2C);
  --accent-text:#E59866;--accent-soft:color-mix(in srgb,#D26F2C 24%,#1F2A2C);
  --info-soft:color-mix(in srgb,#E3F1F5 12%,#1F2A2C);--info-text:#E3F1F5;
  --neutral-soft:color-mix(in srgb,#E3F1F5 9%,#1F2A2C);
  --logo:#E3F1F5;--chart-recv:#C9D9D2;--chart-sel:rgba(227,241,245,0.07);--grid:rgba(227,241,245,0.12);
  --shadow:0 12px 32px rgba(0,0,0,0.5);--shadow-soft:0 2px 8px rgba(0,0,0,0.3);--scrim:rgba(0,0,0,0.55);
  color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#1F2A2C;--side:color-mix(in srgb,#1F2A2C 82%,#000000);--raise:color-mix(in srgb,#314043 50%,#1F2A2C);--sunk:color-mix(in srgb,#1F2A2C 72%,#000000);--hover:color-mix(in srgb,#314043 70%,#1F2A2C);
  --fg:#E3F1F5;--fg-strong:#FFFFFF;--muted:rgba(227,241,245,0.72);--faint:rgba(227,241,245,0.5);
  --line:rgba(227,241,245,0.12);--line-strong:rgba(227,241,245,0.24);
  --brand-text:#C9D9D2;--brand-soft:color-mix(in srgb,#4F7D6A 28%,#1F2A2C);
  --accent-text:#E59866;--accent-soft:color-mix(in srgb,#D26F2C 24%,#1F2A2C);
  --info-soft:color-mix(in srgb,#E3F1F5 12%,#1F2A2C);--info-text:#E3F1F5;
  --neutral-soft:color-mix(in srgb,#E3F1F5 9%,#1F2A2C);
  --logo:#E3F1F5;--chart-recv:#C9D9D2;--chart-sel:rgba(227,241,245,0.07);--grid:rgba(227,241,245,0.12);
  --shadow:0 12px 32px rgba(0,0,0,0.5);--shadow-soft:0 2px 8px rgba(0,0,0,0.3);--scrim:rgba(0,0,0,0.55);
  color-scheme:dark}

*{box-sizing:border-box}
html,body{height:100%}
body{background:var(--bg);color:var(--fg);font-family:var(--font);font-size:15px;line-height:1.45;-webkit-font-smoothing:antialiased}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
a{color:var(--brand-text);text-underline-offset:4px}
:focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:4px}
h1,h2,h3,h4{margin:0;color:var(--fg-strong);text-wrap:balance}
p{margin:0}
.ic{flex-shrink:0;display:block}
.num{font-variant-numeric:tabular-nums}
.muted{color:var(--muted)}
.faint{color:var(--faint)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ---------- shell ---------- */
#app{height:100%}
.app{display:grid;grid-template-columns:var(--sbw) minmax(0,1fr);height:100%;transition:grid-template-columns .25s var(--ease)}
.app.collapsed{--sbw:64px}
.side{background:var(--side);border-right:1px solid var(--line);display:flex;flex-direction:column;min-height:0;overflow:hidden}
.side-top{display:flex;align-items:center;gap:10px;padding:18px 14px 14px 18px}
.side-logo{height:15px;width:auto;color:var(--logo);align-self:flex-start}
.side-ws{font-size:12px;color:var(--muted);letter-spacing:.02em;white-space:nowrap}
.app.collapsed .side-ws,.app.collapsed .side-logo-wrap,.app.collapsed .nav-label,.app.collapsed .nav-count,.app.collapsed .side-sec,.app.collapsed .side-user-txt,.app.collapsed .side-clients{display:none}
.side-logo-wrap{display:flex;flex-direction:column;gap:6px;flex:1;min-width:0}
.iconbtn{display:inline-grid;place-items:center;width:32px;height:32px;border:0;background:transparent;border-radius:var(--r-sm);color:var(--muted)}
.iconbtn:hover{background:var(--hover);color:var(--fg)}
.side-nav{display:flex;flex-direction:column;gap:1px;padding:4px 8px;overflow-y:auto;min-height:0;flex:1}
.nav{display:flex;align-items:center;gap:10px;padding:7px 10px;border-radius:var(--r-sm);color:var(--fg);text-decoration:none;font-size:14px;white-space:nowrap}
.nav:hover{background:var(--hover)}
.nav.on{background:var(--brand-soft);color:var(--brand-text);font-weight:500}
.nav .ic{color:var(--muted)}
.nav.on .ic{color:var(--brand-text)}
.nav-count{margin-left:auto;font-size:12px;color:var(--muted)}
.side-sec{font-size:12px;color:var(--faint);padding:16px 10px 6px}
.side-clients .nav{font-size:13px;padding:5px 10px}
.cdot{width:18px;height:18px;border-radius:5px;display:grid;place-items:center;font-size:10px;font-weight:700;background:var(--brand-soft);color:var(--brand-text);flex-shrink:0}
.side-user{display:flex;align-items:center;gap:10px;padding:12px 14px;border-top:1px solid var(--line)}
.side-user-txt{min-width:0;flex:1}
.side-user-txt b{display:block;font-weight:500;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.side-user-txt span{font-size:12px;color:var(--muted)}
.app.collapsed .side-top{flex-direction:column;padding:14px 8px}
.app.collapsed .nav{justify-content:center;padding:8px}
.app.collapsed .side-user{justify-content:center;flex-direction:column;padding:10px 6px}

.main{min-width:0;overflow-y:auto;overflow-x:hidden;height:100%;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));scroll-behavior:auto}
.topbar{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:8px;height:56px;background:color-mix(in srgb,var(--bg) 86%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--line);margin:0 calc(-1 * max(16px,env(safe-area-inset-right,0px))) 0 calc(-1 * max(16px,env(safe-area-inset-left,0px)));padding:0 max(16px,env(safe-area-inset-right,0px)) 0 max(16px,env(safe-area-inset-left,0px))}
.crumbs{display:flex;align-items:center;gap:6px;min-width:0;font-size:14px;color:var(--muted);overflow:hidden}
.crumbs a{color:var(--muted);text-decoration:none;white-space:nowrap}
.crumbs a:hover{color:var(--fg)}
.crumbs b{font-weight:500;color:var(--fg);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.crumbs .sep{color:var(--faint)}
.spacer{flex:1}
.demo-tag{font-size:12px;padding:3px 9px;border-radius:999px;background:var(--accent-soft);color:var(--accent-text);white-space:nowrap}
.searchbtn{display:flex;align-items:center;gap:8px;height:32px;padding:0 10px;border:1px solid var(--line);background:var(--raise);border-radius:var(--r-sm);color:var(--muted);font-size:13px}
.searchbtn kbd{font:inherit;font-size:11px;padding:1px 5px;border:1px solid var(--line);border-radius:4px}
.bell{position:relative}
.bell i{position:absolute;top:6px;right:6px;width:7px;height:7px;border-radius:50%;background:var(--orange)}
.mobile-only{display:none}

.view{max-width:1240px;margin:0 auto;padding-block:28px 64px;display:flex;flex-direction:column;gap:28px}
@media (min-width:1100px){.view{padding-inline:16px}}
.vhead{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap}
.vhead h1{font-size:30px;font-weight:700;letter-spacing:-0.02em;line-height:1.1}
.eyebrow{font-size:13px;font-weight:500;color:var(--muted);margin-bottom:6px;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.eyebrow a{color:var(--muted)}
.vsub{color:var(--muted);margin-top:6px;max-width:64ch}
.actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:7px;height:34px;padding:0 13px;border-radius:var(--r-sm);border:1px solid var(--line-strong);background:var(--raise);font-size:14px;font-weight:500;white-space:nowrap;transition:background .15s var(--ease),transform .1s var(--ease)}
.btn:hover{background:var(--hover)}
.btn:active{transform:scale(.98)}
.btn.primary{background:var(--brand);border-color:var(--brand);color:var(--on-brand)}
.btn.primary:hover{background:var(--brand-hover)}
.btn.ghost{border-color:transparent;background:transparent}
.btn.ghost:hover{background:var(--hover)}
.btn.warn{background:var(--accent-fill);border-color:var(--accent-fill);color:#FFFFFF}
.btn.sm{height:28px;padding:0 10px;font-size:13px}
.btn[disabled]{opacity:.5;cursor:not-allowed}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:var(--r-sm);padding:2px;background:var(--sunk);gap:2px}
.seg button{display:inline-flex;align-items:center;gap:6px;border:0;background:transparent;height:28px;padding:0 10px;border-radius:5px;font-size:13px;color:var(--muted)}
.seg button.on{background:var(--raise);color:var(--fg);box-shadow:var(--shadow-soft)}

/* tabs */
.tabs{display:flex;gap:2px;border-bottom:1px solid var(--line);overflow-x:auto;scrollbar-width:none}
.tabs a{padding:10px 12px;font-size:14px;color:var(--muted);text-decoration:none;border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap}
.tabs a:hover{color:var(--fg)}
.tabs a.on{color:var(--fg);border-bottom-color:var(--brand);font-weight:500}

/* panels */
.panel{background:var(--raise);border:1px solid var(--line);border-radius:var(--r-lg);padding:20px;min-width:0}
.panel-h{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px;flex-wrap:wrap}
.panel-h h2{font-size:17px;font-weight:500;letter-spacing:-0.01em}
.panel-h .muted{font-size:13px}
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.grid-main{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:20px;align-items:start}
@media (max-width:980px){.grid2,.grid3,.grid-main{grid-template-columns:minmax(0,1fr)}}

/* KPI */
.kpis{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px}
@media (max-width:1100px){.kpis{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:560px){.kpis{grid-template-columns:repeat(2,minmax(0,1fr))}}
.kpis.k4{grid-template-columns:repeat(4,minmax(0,1fr))}.kpis.k5{grid-template-columns:repeat(5,minmax(0,1fr))}
@media (max-width:900px){.kpis.k5{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:560px){.kpis.k4,.kpis.k5{grid-template-columns:repeat(2,minmax(0,1fr))}}
.kpi{border:1px solid var(--line);border-radius:var(--r-md);padding:14px 16px;background:var(--raise);text-align:left;display:flex;flex-direction:column;gap:6px;min-width:0;transition:border-color .15s var(--ease)}
button.kpi:hover{border-color:var(--line-strong)}
.kpi span{font-size:13px;color:var(--muted)}
.kpi b{font-size:28px;font-weight:500;letter-spacing:-0.02em;line-height:1;color:var(--fg-strong);font-variant-numeric:tabular-nums}
.kpi small{font-size:12px;color:var(--muted)}
.kpi small.warn{color:var(--accent-text)}

/* chips */
.chip{display:inline-flex;align-items:center;gap:6px;height:22px;padding:0 8px;border-radius:999px;font-size:12px;font-weight:500;white-space:nowrap;background:var(--neutral-soft);color:var(--fg)}
.chip::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.75}
.chip.nodot::before{display:none}
.st-pendiente{background:var(--neutral-soft);color:var(--fg)}
.st-proceso{background:var(--info-soft);color:var(--info-text)}
.st-revision{background:var(--accent-soft);color:var(--accent-text)}
.st-bloqueada{background:var(--accent-fill);color:#FFFFFF}
.st-completada{background:var(--brand-soft);color:var(--brand-text)}
.st-cancelada{background:transparent;color:var(--faint);text-decoration:line-through;border:1px dashed var(--line-strong)}
.st-ok{background:var(--brand-soft);color:var(--brand-text)}
.st-warn{background:var(--accent-soft);color:var(--accent-text)}
.st-info{background:var(--info-soft);color:var(--info-text)}
.st-neutral{background:var(--neutral-soft);color:var(--fg)}
.st-strong{background:var(--accent-fill);color:#FFFFFF}
.prio{font-size:12px;color:var(--muted);display:inline-flex;align-items:center;gap:4px;white-space:nowrap}
.prio i{display:inline-flex;gap:2px;align-items:flex-end}
.prio i s{display:block;width:3px;border-radius:1px;background:var(--line-strong)}
.prio i s.f{background:var(--fg)}
.prio.urgente i s.f,.prio.alta i s.f{background:var(--accent-text)}
.tag{display:inline-flex;align-items:center;height:22px;padding:0 8px;border-radius:var(--r-sm);font-size:12px;border:1px solid var(--line);color:var(--muted);white-space:nowrap}

/* avatars */
.av{width:26px;height:26px;border-radius:50%;display:inline-grid;place-items:center;font-size:11px;font-weight:500;color:#FFFFFF;flex-shrink:0;border:2px solid var(--raise);letter-spacing:.02em}
.av.lg{width:44px;height:44px;font-size:15px}
.av.xl{width:64px;height:64px;font-size:20px}
.t-slate{background:#314043}.t-green{background:#4F7D6A}.t-orange{background:#A85820}.t-deep{background:#2F4D40}.t-ink{background:#1F2A2C}
.avs{display:inline-flex}
.avs .av+.av{margin-left:-7px}
.who{display:inline-flex;align-items:center;gap:8px;min-width:0}
.who b{font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* task rows */
.tlist{display:flex;flex-direction:column}
.tgroup-h{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:500;color:var(--muted);padding:16px 4px 8px}
.tgroup-h.warn{color:var(--accent-text)}
.trow{display:grid;grid-template-columns:24px minmax(0,1fr) auto auto auto;align-items:center;gap:12px;padding:10px 8px;border-top:1px solid var(--line);cursor:pointer;border-radius:var(--r-sm)}
.trow:hover{background:var(--hover)}
.tlist .trow:first-child{border-top:0}
.tcheck{width:20px;height:20px;border-radius:50%;border:1.5px solid var(--line-strong);background:transparent;display:grid;place-items:center;color:transparent;padding:0}
.tcheck:hover{border-color:var(--brand);color:var(--brand)}
.tcheck.on{background:var(--brand);border-color:var(--brand);color:#FFFFFF}
.ttitle{font-weight:500;color:var(--fg-strong);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.trow.done .ttitle{color:var(--muted);text-decoration:line-through}
.tmeta{font-size:12.5px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tdue{font-size:13px;color:var(--muted);white-space:nowrap;min-width:64px;text-align:right}
.tdue.late{color:var(--accent-text);font-weight:500}
@media (max-width:700px){.trow{grid-template-columns:24px minmax(0,1fr) auto auto;gap:8px}.trow .avs{display:none}.trow .tdue{min-width:0}}
.sub-mark{font-size:12px;color:var(--faint)}

/* kanban */
.kanban{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(250px,1fr);gap:12px;overflow-x:auto;padding-bottom:8px}
.kcol{background:var(--sunk);border-radius:var(--r-md);padding:10px;display:flex;flex-direction:column;gap:8px;min-height:120px}
.kcol-h{display:flex;align-items:center;justify-content:space-between;padding:2px 4px 4px;font-size:13px}
.kcard{background:var(--raise);border:1px solid var(--line);border-radius:var(--r-md);padding:12px;display:flex;flex-direction:column;gap:8px;cursor:pointer;text-align:left;transition:box-shadow .15s var(--ease),border-color .15s var(--ease)}
.kcard:hover{box-shadow:var(--shadow-soft);border-color:var(--line-strong)}
.kcard b{font-weight:500;color:var(--fg-strong);line-height:1.3}
.kcard .row{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:12.5px;color:var(--muted)}

/* table */
.tablewrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r-md);background:var(--raise)}
table.t{width:100%;border-collapse:collapse;font-size:14px;min-width:720px}
table.t th{text-align:left;font-weight:500;font-size:12.5px;color:var(--muted);padding:10px 12px;border-bottom:1px solid var(--line);background:var(--sunk);white-space:nowrap;position:sticky;top:0}
table.t th button{border:0;background:none;padding:0;color:inherit;font:inherit;display:inline-flex;gap:4px;align-items:center}
table.t td{padding:10px 12px;border-bottom:1px solid var(--line);vertical-align:middle}
table.t tr:last-child td{border-bottom:0}
table.t tbody tr{cursor:pointer}
table.t tbody tr:hover{background:var(--hover)}
table.t td.strong{font-weight:500;color:var(--fg-strong)}
.empty{padding:28px;text-align:center;color:var(--muted);font-size:14px}

/* progress */
.bar{height:6px;border-radius:999px;background:var(--neutral-soft);overflow:hidden}
.bar i{display:block;height:100%;background:var(--brand);border-radius:999px}
.prog{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--muted)}
.prog .bar{flex:1;min-width:60px}

/* lists */
.list{display:flex;flex-direction:column}
.li{display:flex;align-items:center;gap:12px;padding:10px 6px;border-top:1px solid var(--line);cursor:pointer;border-radius:var(--r-sm);text-decoration:none;color:inherit}
.li:first-child{border-top:0}
.li:hover{background:var(--hover)}
.li .grow{flex:1;min-width:0}
.li .t1{font-weight:500;color:var(--fg-strong);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.li .t2{font-size:12.5px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.alert-ic{width:28px;height:28px;border-radius:8px;display:grid;place-items:center;background:var(--accent-soft);color:var(--accent-text);flex-shrink:0}
.ok-ic{background:var(--brand-soft);color:var(--brand-text)}
.info-ic{background:var(--info-soft);color:var(--info-text)}

/* cards */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px}
.card{background:var(--raise);border:1px solid var(--line);border-radius:var(--r-lg);padding:18px;display:flex;flex-direction:column;gap:12px;cursor:pointer;text-align:left;text-decoration:none;color:inherit;transition:border-color .15s var(--ease),box-shadow .15s var(--ease)}
.card:hover{border-color:var(--line-strong);box-shadow:var(--shadow-soft)}
.card h3{font-size:16px;font-weight:500}
.card .meta{display:flex;flex-wrap:wrap;gap:6px}
.clogo{width:40px;height:40px;border-radius:10px;display:grid;place-items:center;font-weight:700;font-size:14px;background:var(--brand-soft);color:var(--brand-text);flex-shrink:0}
.clogo.lg{width:56px;height:56px;font-size:18px;border-radius:14px}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;border-top:1px solid var(--line);padding-top:12px}
.stats div{display:flex;flex-direction:column;gap:2px}
.stats b{font-size:18px;font-weight:500;font-variant-numeric:tabular-nums;color:var(--fg-strong)}
.stats span{font-size:12px;color:var(--muted)}

/* props */
.props{display:grid;grid-template-columns:140px minmax(0,1fr);gap:10px 16px;align-items:center;font-size:14px}
.props>dt{color:var(--muted);font-size:13px}
.props>dd{margin:0;min-width:0;display:flex;flex-wrap:wrap;gap:6px;align-items:center}
@media (max-width:520px){.props{grid-template-columns:minmax(0,1fr)}.props>dt{margin-top:6px}}
.field{height:32px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--raise);padding:0 9px;font-size:14px;min-width:0;max-width:100%}
textarea.field{height:auto;padding:8px 10px;resize:vertical;width:100%;line-height:1.45}
.field:hover{border-color:var(--line-strong)}
.field:focus{outline:2px solid var(--brand);outline-offset:-1px;border-color:transparent}
.title-input{width:100%;border:0;background:transparent;font-size:24px;font-weight:700;letter-spacing:-0.02em;color:var(--fg-strong);padding:4px 0;border-radius:var(--r-sm)}
.title-input:hover{background:var(--hover)}
.pick{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);background:transparent;border-radius:999px;padding:2px 10px 2px 2px;font-size:13px}
.pick .av{width:22px;height:22px;font-size:10px;border:0}
.pick.on{background:var(--brand-soft);border-color:transparent;color:var(--brand-text)}

/* drawer & modal */
.scrim{position:fixed;inset:0;background:var(--scrim);z-index:40;animation:fade .2s var(--ease)}
.drawer{position:fixed;top:0;right:0;bottom:0;width:min(560px,100%);background:var(--bg);z-index:41;border-left:1px solid var(--line);box-shadow:var(--shadow);display:flex;flex-direction:column;animation:slide .25s var(--ease);padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px);padding-right:env(safe-area-inset-right,0px)}
.drawer-h{display:flex;align-items:center;gap:8px;padding:12px 16px;border-bottom:1px solid var(--line)}
.drawer-b{overflow-y:auto;padding:20px 24px 40px;display:flex;flex-direction:column;gap:22px}
.dsec h3{font-size:13px;font-weight:500;color:var(--muted);margin-bottom:10px;display:flex;align-items:center;justify-content:space-between;gap:8px}
.modal{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);width:min(560px,calc(100% - 32px));max-height:calc(100% - 48px);overflow-y:auto;background:var(--bg);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow);z-index:42;animation:pop .2s var(--ease)}
.modal form{display:flex;flex-direction:column;gap:16px;padding:22px}
.modal h2{font-size:20px;font-weight:700;letter-spacing:-0.01em}
.fl{display:flex;flex-direction:column;gap:6px;font-size:13px;color:var(--muted)}
.fl .field{width:100%;color:var(--fg)}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:520px){.frow{grid-template-columns:1fr}}
.checks{display:flex;flex-wrap:wrap;gap:6px}
.checks label{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);border-radius:999px;padding:4px 10px;font-size:13px;color:var(--fg);cursor:pointer}
.checks input{accent-color:var(--brand)}
.form-err{color:var(--accent-text);font-size:13px}
.note{font-size:13px;color:var(--muted);background:var(--sunk);border-radius:var(--r-md);padding:10px 12px}
.note b{color:var(--fg);font-weight:500}
@keyframes fade{from{opacity:0}}
@keyframes slide{from{transform:translateX(24px);opacity:0}}
@keyframes pop{from{opacity:0;transform:translate(-50%,-48%)}}

/* comments/history */
.feed{display:flex;flex-direction:column;gap:12px}
.ev{display:flex;gap:10px;font-size:13.5px}
.ev .body{min-width:0;flex:1}
.ev .when{font-size:12px;color:var(--faint)}
.ev-dot{width:8px;height:8px;border-radius:50%;background:var(--line-strong);margin:6px 9px 0;flex-shrink:0}
.comment{background:var(--sunk);border-radius:var(--r-md);padding:8px 12px;margin-top:4px}
.chk{display:flex;align-items:center;gap:10px;padding:5px 0;font-size:14px}
.chk input{accent-color:var(--brand);width:16px;height:16px}
.chk.done span{color:var(--muted);text-decoration:line-through}
.inline-add{display:flex;gap:8px}
.inline-add .field{flex:1}

/* charts */
.chart{width:100%;height:auto;display:block;overflow:visible}
.chart text{fill:var(--muted);font-size:12px;font-family:var(--font)}
.chart .tot{fill:var(--fg);font-weight:500}
.chart .gl{stroke:var(--grid);stroke-width:1}
.chart .bg-sel{fill:var(--chart-sel)}
.chart .s-done{fill:var(--chart-done)}
.chart .s-pend{fill:var(--chart-pend)}
.chart .s-recv{fill:var(--chart-recv)}
.chart .hit{fill:transparent;cursor:pointer}
.chart g.wk:hover .bg-hover{fill:var(--chart-sel)}
.chart .bg-hover{fill:transparent}
.legend{display:flex;gap:14px;flex-wrap:wrap;font-size:12.5px;color:var(--muted)}
.legend span{display:inline-flex;align-items:center;gap:6px}
.legend i{width:10px;height:10px;border-radius:3px;display:inline-block}
.hbars{display:flex;flex-direction:column;gap:10px}
.hb{display:grid;grid-template-columns:120px minmax(0,1fr) 40px;gap:10px;align-items:center;font-size:13.5px}
.hb .track{height:10px;border-radius:999px;background:var(--neutral-soft);display:flex;overflow:hidden}
.hb .track i{display:block;height:100%}
.hb .v{text-align:right;font-variant-numeric:tabular-nums;color:var(--fg-strong);font-weight:500}

/* calendar */
.calwrap{overflow-x:auto}
.cal{display:grid;grid-template-columns:repeat(7,minmax(108px,1fr));border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;min-width:760px;background:var(--raise)}
.cal .dh{padding:8px 10px;font-size:12px;color:var(--muted);background:var(--sunk);border-bottom:1px solid var(--line)}
.cal .cell{min-height:112px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);padding:6px;display:flex;flex-direction:column;gap:4px}
.cal .cell:nth-child(7n){border-right:0}
.cal .cell.out{background:var(--sunk)}
.cal .cell.out .dn{color:var(--faint)}
.cal .dn{font-size:12px;color:var(--muted);padding:2px 4px;font-variant-numeric:tabular-nums}
.cal .cell.today .dn{background:var(--brand);color:#FFFFFF;border-radius:999px;width:fit-content;padding:2px 7px}
.post{display:flex;flex-direction:column;gap:2px;text-align:left;border:1px solid var(--line);background:var(--bg);border-radius:var(--r-sm);padding:5px 7px;font-size:12px;line-height:1.25;width:100%}
.post:hover{border-color:var(--line-strong)}
.post .pt{font-weight:500;color:var(--fg-strong);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.post .pm{display:flex;gap:6px;align-items:center;color:var(--muted)}
.dots{display:inline-flex;gap:3px}
.dots i{width:7px;height:7px;border-radius:50%;display:block}
.d-ok{background:var(--brand)}.d-warn{background:var(--orange)}.d-off{background:var(--line-strong)}.d-info{background:var(--slate)}
:root[data-theme="dark"] .d-info{background:var(--ice)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .d-info{background:var(--ice)}}
.net{font-size:10.5px;font-weight:700;letter-spacing:.04em;padding:1px 5px;border-radius:4px;background:var(--info-soft);color:var(--info-text)}
.thumb{aspect-ratio:4/5;max-width:100%;border-radius:var(--r-md);background:linear-gradient(160deg,var(--green) 0%,var(--slate) 100%);color:#FFFFFF;display:flex;flex-direction:column;justify-content:space-between;padding:10px;font-size:12px;position:relative;overflow:hidden}
.thumb b{font-size:13px;font-weight:500;line-height:1.25}
.thumb.carrusel::after{content:"";position:absolute;right:8px;top:8px;width:16px;height:16px;border:1.5px solid rgba(255,255,255,.8);border-radius:3px;box-shadow:3px -3px 0 -1.5px rgba(255,255,255,.55)}
.thumb.reel,.thumb.video{background:linear-gradient(160deg,var(--slate-900) 0%,var(--green-900) 100%)}
.thumb.story{background:linear-gradient(160deg,var(--green-900) 0%,var(--green) 60%,var(--orange-300) 130%)}
.thumb.articulo{background:linear-gradient(160deg,var(--slate) 0%,var(--slate-900) 100%)}

/* gantt */
.gantt{min-width:760px;display:grid;grid-template-columns:240px minmax(0,1fr);border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;background:var(--raise)}
.g-l,.g-r{display:flex;flex-direction:column}
.g-l .gh,.g-r .gh{height:36px;border-bottom:1px solid var(--line);background:var(--sunk);font-size:12px;color:var(--muted);display:flex;align-items:center;padding:0 12px}
.g-r .gh{padding:0;position:relative}
.g-r .gh span{position:absolute;top:10px;transform:translateX(-50%);white-space:nowrap}
.g-row{height:44px;border-bottom:1px solid var(--line);display:flex;align-items:center;padding:0 12px;gap:8px;font-size:13.5px;min-width:0;cursor:pointer}
.g-row:last-child{border-bottom:0}
.g-row.sub{padding-left:28px;color:var(--muted)}
.g-row .t1{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:500;color:var(--fg-strong)}
.g-track{position:relative;height:44px;border-bottom:1px solid var(--line);cursor:pointer}
.g-track:last-child{border-bottom:0}
.g-bar{position:absolute;top:12px;height:20px;border-radius:999px;background:var(--brand-soft);overflow:hidden;min-width:8px}
.g-bar i{display:block;height:100%;background:var(--brand)}
.g-bar.late{outline:1.5px solid var(--accent-text)}
.g-today{position:absolute;top:0;bottom:0;width:0;border-left:1.5px dashed var(--accent-text);z-index:1}
.g-r .body{position:relative}

/* login */
.login{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);height:100%;background:var(--bg)}
.login-art{position:relative;background:radial-gradient(90% 70% at 30% 35%,rgba(227,241,245,0.16),transparent 70%),linear-gradient(110deg,#2F4D40 0%,#4F7D6A 100%);display:flex;flex-direction:column;justify-content:space-between;padding:40px;color:#FFFFFF;overflow:hidden}
.login-art::before{display:none;content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(15,28,22,.35) 0%,rgba(15,28,22,.15) 40%,rgba(15,28,22,.7) 100%)}
.login-art>*{position:relative}
.login-art .logo-w{height:20px;width:auto;color:#FFFFFF;flex-shrink:0;margin-top:2px}
.login-top{display:flex;justify-content:space-between;align-items:flex-start;gap:20px}
.login-art .slogan{color:#FFFFFF;align-self:auto;flex-shrink:0}
.login-bottom{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap}
.login-art h2{color:#FFFFFF;font-size:clamp(28px,3.4vw,46px);font-weight:700;letter-spacing:-0.02em;line-height:1.05;max-width:14ch}
.slogan{display:inline-flex;gap:12px;font-size:14px;line-height:1.35;text-align:right;align-self:flex-end}
.slogan::before{content:"";width:28px;height:1px;background:currentColor;margin-top:.6em}
.login-form{display:flex;align-items:center;justify-content:center;padding:40px max(16px,env(safe-area-inset-right,0px)) 40px max(16px,env(safe-area-inset-left,0px))}
.login-form form{width:min(380px,100%);display:flex;flex-direction:column;gap:18px}
.login-form h1{font-size:28px;font-weight:700;letter-spacing:-0.02em}
.login-form .field{height:42px;width:100%}
.login-form .btn{height:42px;justify-content:center}
.who-pick{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.who-pick label{display:flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:var(--r-md);padding:8px 10px;cursor:pointer;font-size:14px;color:var(--fg)}
.who-pick input{position:absolute;opacity:0}
.who-pick label:has(input:checked){border-color:var(--brand);background:var(--brand-soft);color:var(--brand-text)}
.who-pick label:has(input:focus-visible){outline:2px solid var(--brand);outline-offset:2px}
@media (max-width:820px){.login{grid-template-columns:1fr;grid-template-rows:220px auto;height:auto;min-height:100%}.login-art{padding:24px}}

/* search & popover */
.search{position:fixed;left:50%;top:12vh;transform:translateX(-50%);width:min(620px,calc(100% - 32px));background:var(--bg);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow);z-index:42;overflow:hidden;animation:fade .15s var(--ease)}
.search-in{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid var(--line);color:var(--muted)}
.search-in input{flex:1;border:0;background:transparent;font-size:17px;outline:none;color:var(--fg)}
.search-res{max-height:52vh;overflow-y:auto;padding:6px}
.sr-h{font-size:12px;color:var(--faint);padding:10px 10px 4px}
.sr-i{display:flex;align-items:center;gap:10px;width:100%;border:0;background:transparent;text-align:left;padding:8px 10px;border-radius:var(--r-sm);font-size:14px}
.sr-i:hover,.sr-i:focus{background:var(--hover);outline:none}
.sr-i small{color:var(--muted);margin-left:auto;font-size:12px;white-space:nowrap}
.pop{position:fixed;top:calc(56px + env(safe-area-inset-top,0px));right:max(16px,env(safe-area-inset-right,0px));width:min(380px,calc(100% - 32px));background:var(--bg);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow);z-index:42;animation:fade .15s var(--ease);max-height:70vh;overflow-y:auto;padding:8px}
.pop h3{font-size:14px;font-weight:500;padding:8px 10px}
.toast{position:fixed;bottom:calc(20px + env(safe-area-inset-bottom,0px));left:50%;transform:translateX(-50%);background:var(--fg-strong);color:var(--bg);padding:10px 16px;border-radius:var(--r-md);font-size:14px;z-index:50;box-shadow:var(--shadow);animation:fade .2s var(--ease);max-width:calc(100% - 32px)}

/* review (client) */
.review{min-height:100%;background:var(--bg)}
.review-bar{background:var(--accent-soft);color:var(--accent-text);font-size:13px;padding:10px max(16px,env(safe-area-inset-right,0px)) 10px max(16px,env(safe-area-inset-left,0px));display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.review-head{background:linear-gradient(110deg,#2F4D40 0%,#4F7D6A 45%,#E3F1F5 140%);color:#FFFFFF;padding:36px max(16px,env(safe-area-inset-right,0px)) 36px max(16px,env(safe-area-inset-left,0px))}
.review-head .in{max-width:900px;margin:0 auto;display:flex;flex-direction:column;gap:14px}
.review-head h1{color:#FFFFFF;font-size:clamp(26px,3.6vw,38px);font-weight:700;letter-spacing:-0.02em}
.review-head .logo-w{height:16px;width:auto;color:#E3F1F5;align-self:flex-start}
.review-body{max-width:900px;margin:0 auto;padding:28px max(16px,env(safe-area-inset-right,0px)) 64px max(16px,env(safe-area-inset-left,0px));display:flex;flex-direction:column;gap:24px}
.ritems{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:16px}
.ritem{border:1px solid var(--line);border-radius:var(--r-lg);padding:12px;display:flex;flex-direction:column;gap:10px;background:var(--raise)}
.ritem .thumb{aspect-ratio:1/1}
.decide{display:flex;gap:8px;flex-wrap:wrap}

/* responsive shell */
@media (max-width:900px){
  .app,.app.collapsed{grid-template-columns:minmax(0,1fr);--sbw:280px}
  .side{position:fixed;top:0;bottom:0;left:0;width:280px;z-index:45;transform:translateX(-100%);transition:transform .25s var(--ease);padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px);padding-left:env(safe-area-inset-left,0px)}
  .app.navopen .side{transform:none;box-shadow:var(--shadow)}
  .app.collapsed .side-ws,.app.collapsed .side-logo-wrap,.app.collapsed .nav-label,.app.collapsed .nav-count,.app.collapsed .side-sec,.app.collapsed .side-user-txt,.app.collapsed .side-clients{display:revert}
  .mobile-only{display:inline-grid}
  .desk-only{display:none}
  .searchbtn span,.searchbtn kbd{display:none}
  .vhead h1{font-size:25px}
  .demo-tag{display:none}
}
.home-banner{background:radial-gradient(90% 120% at 30% 30%,rgba(227,241,245,0.16),transparent 70%),linear-gradient(110deg,#2F4D40 0%,#4F7D6A 100%);color:#FFFFFF;border-radius:var(--r-lg);padding:28px 28px 30px;display:flex;justify-content:space-between;align-items:flex-start;gap:20px}
.home-banner h1{color:#FFFFFF;font-size:clamp(28px,3.6vw,42px);font-weight:700;letter-spacing:-0.02em;line-height:1.05}
.home-banner .hb-eyebrow{font-size:14px;opacity:.9;margin-bottom:8px}
.home-banner p{margin-top:10px;max-width:46ch}
.hb-logo{height:18px;width:auto;color:#FFFFFF;flex-shrink:0;margin-top:6px}
@media (max-width:560px){.home-banner{padding:22px 20px}.hb-logo{height:12px}}
.chipbtn{border:0;cursor:pointer;font-family:inherit}
.chipbtn:hover{filter:brightness(.95)}
.smenu{position:fixed;z-index:46;background:var(--bg);border:1px solid var(--line);border-radius:var(--r-md);box-shadow:var(--shadow);padding:6px;display:flex;flex-direction:column;gap:2px;min-width:190px;animation:fade .12s var(--ease)}
.smenu button{display:flex;align-items:center;justify-content:space-between;gap:8px;border:0;background:transparent;padding:6px 8px;border-radius:var(--r-sm);text-align:left;color:var(--fg)}
.smenu button:hover,.smenu button:focus{background:var(--hover);outline:none}
.kcol.over{outline:2px dashed var(--brand);outline-offset:-2px}
.kcard[draggable=true]{cursor:grab}
.kcard.dragging{opacity:.45}
.toast{display:flex;align-items:center;gap:14px}
.toast button{border:0;background:transparent;color:inherit;font-weight:500;text-decoration:underline;text-underline-offset:3px;padding:0}
.sheetwrap{overflow:auto;max-height:72vh;border:1px solid var(--line);border-radius:var(--r-md);background:var(--raise)}
table.sheet{border-collapse:separate;border-spacing:0;table-layout:fixed;font-size:13px}
.sheet th{position:sticky;top:0;z-index:2;background:var(--sunk);color:var(--muted);font-weight:500;font-size:12px;text-align:left;padding:8px;border-right:1px solid var(--line);border-bottom:1px solid var(--line-strong);vertical-align:bottom;line-height:1.3}
.sheet td{border-right:1px solid var(--line);border-bottom:1px solid var(--line);padding:0;vertical-align:top;background:var(--raise)}
.sheet tr:hover td{background:var(--hover)}
.sheet .rn{position:sticky;left:0;z-index:1;background:var(--sunk);text-align:center}
.sheet th.rn{z-index:4}
.sheet .c1{position:sticky;left:48px;z-index:1;box-shadow:1px 0 0 var(--line-strong)}
.sheet th.c1{z-index:4}
.rnb{border:0;background:transparent;width:100%;height:36px;color:var(--muted);font-size:12px;font-variant-numeric:tabular-nums}
.rnb:hover{color:var(--brand-text);text-decoration:underline}
.sc{display:block;width:100%;border:0;border-radius:0;background:transparent;padding:8px;font:inherit;font-size:13px;color:var(--fg);min-height:36px;line-height:1.35}
textarea.sc{resize:none;height:56px}
textarea.sc:focus{height:140px}
.sc:focus{outline:2px solid var(--brand);outline-offset:-2px;background:var(--bg)}
.pfields{display:flex;flex-direction:column;gap:12px}
.pfields.two{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:620px){.pfields.two{grid-template-columns:1fr}}
.pfields .field,.dsec>.fl .field{width:100%}
.imp-sum{display:flex;gap:8px;flex-wrap:wrap}
.pchecks{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:var(--r-md);max-height:300px;overflow-y:auto;color:var(--fg)}
.pcheck{display:flex;align-items:center;gap:10px;padding:9px 12px;border-top:1px solid var(--line);cursor:pointer;font-size:14px}
.pcheck:first-child{border-top:0}
.pcheck:hover{background:var(--hover)}
.pcheck input{accent-color:var(--brand);width:16px;height:16px;flex-shrink:0}
.pcheck b{display:block;font-weight:500;color:var(--fg-strong);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pcheck small{color:var(--muted);font-size:12.5px}
.qn-btn{position:fixed;right:max(24px,calc(env(safe-area-inset-right,0px) + 16px));bottom:calc(20px + env(safe-area-inset-bottom,0px));z-index:30;width:52px;height:52px;border-radius:50%;background:var(--brand);color:#FFFFFF;border:0;box-shadow:var(--shadow);display:grid;place-items:center;transition:transform .15s var(--ease),background .15s var(--ease)}
.qn-btn:hover{background:var(--brand-hover)}
.qn-btn:active{transform:scale(.96)}
.qn-btn .qn-plus{position:absolute;right:9px;top:9px;width:16px;height:16px;border-radius:50%;background:var(--orange-300);color:#1F2A2C;display:grid;place-items:center}
.qn{position:fixed;right:max(24px,calc(env(safe-area-inset-right,0px) + 16px));bottom:calc(84px + env(safe-area-inset-bottom,0px));z-index:31;width:min(380px,calc(100% - 32px));background:var(--bg);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow);padding:12px 16px 14px;display:flex;flex-direction:column;gap:6px;animation:pop2 .18s var(--ease)}
.qn-h{display:flex;align-items:center;gap:8px}
.qn-h b{font-weight:500;font-size:14px}
.qn-f{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:12.5px;border-top:1px solid var(--line);padding-top:8px}
@keyframes pop2{from{opacity:0;transform:translateY(8px)}}
@media (max-width:900px){.qn-btn,.qn{right:max(16px,env(safe-area-inset-right,0px))}}
.notes{display:grid;grid-template-columns:300px minmax(0,1fr);gap:20px;align-items:start}
.note-list{display:flex;flex-direction:column;gap:4px;max-height:70vh;overflow-y:auto}
.note-i{display:flex;flex-direction:column;gap:3px;text-align:left;border:1px solid transparent;background:transparent;border-radius:var(--r-md);padding:10px 12px;color:var(--fg);width:100%}
.note-i:hover{background:var(--hover)}
.note-i.on{background:var(--brand-soft);border-color:transparent}
.note-i .t1{font-weight:500;color:var(--fg-strong);display:flex;gap:6px;align-items:center;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.note-i .t2{font-size:13px;color:var(--muted);overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.note-i .t3{font-size:12px;color:var(--faint)}
.note-ed{display:flex;flex-direction:column;gap:10px;min-height:60vh}
.note-body{flex:1;min-height:50vh;border:0;background:transparent;resize:vertical;font-size:16px;line-height:1.6;color:var(--fg);padding:4px 0;border-radius:var(--r-sm);width:100%}
.note-body:focus,.note-ed .title-input:focus{outline:none}
.note-bar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;padding-bottom:10px;border-bottom:1px solid var(--line)}
@media (max-width:820px){.notes{grid-template-columns:minmax(0,1fr)}.notes.has-sel .note-side{display:none}.notes:not(.has-sel) .note-main{display:none}}
@media (min-width:821px){.note-back{display:none}}
.imgs{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:8px}
.imgc{position:relative;aspect-ratio:4/5;border-radius:var(--r-md);overflow:hidden;background:var(--sunk);border:1px solid var(--line)}
.imgc img,.thumb.has-img img{width:100%;height:100%;object-fit:cover;display:block}
.imgc .bad,.thumb .bad{position:absolute;inset:0;display:grid;place-items:center;text-align:center;font-size:11.5px;color:var(--muted);padding:8px;background:var(--sunk)}
.imgc .ctrl{position:absolute;left:4px;right:4px;bottom:4px;display:flex;gap:4px;justify-content:flex-end}
.imgc .ctrl button{width:24px;height:24px;border-radius:6px;border:0;background:rgba(31,42,44,.78);color:#FFFFFF;display:grid;place-items:center;padding:0}
.imgc .n,.thumb .n{position:absolute;left:6px;top:6px;font-size:11px;background:rgba(31,42,44,.78);color:#FFFFFF;border-radius:4px;padding:1px 5px}
.thumb.has-img{padding:0;background:var(--sunk)}
.strip{display:flex;gap:8px;overflow-x:auto;scroll-snap-type:x mandatory;position:relative}
.strip img{height:240px;max-width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:var(--r-md);scroll-snap-align:start;flex-shrink:0}
.strip .bad{width:192px;height:240px;display:grid;place-items:center;text-align:center;font-size:12px;color:var(--muted);background:var(--sunk);border-radius:var(--r-md);flex-shrink:0;padding:10px}
.email-prev{background:var(--sunk);border-radius:var(--r-md);padding:16px 18px;font-size:14.5px;line-height:1.55;display:flex;flex-direction:column;gap:12px;color:var(--fg)}
.email-prev b{color:var(--fg-strong);font-weight:700}
.pe-step{display:grid;grid-template-columns:28px minmax(0,1.4fr) minmax(0,1fr) 72px minmax(0,1.5fr) auto;gap:8px;align-items:center;padding:8px 0;border-top:1px solid var(--line)}
.pe-step .field{width:100%}
.pe-head{border-top:0;padding-bottom:0}
.pe-head span{font-size:12.5px;color:var(--muted)}
.pe-ctrl{display:flex;gap:2px}
.iconbtn[disabled]{opacity:.3;cursor:default}
.pe-f{display:flex;flex-direction:column;gap:5px;min-width:0}
.pe-lbl,.pe-m{display:none}
@media (max-width:900px){.pe-step{grid-template-columns:minmax(0,1fr);gap:12px;padding:16px 0}.pe-step.pe-head{display:none}.pe-lbl{display:block;font-size:13px;color:var(--muted)}.pe-m{display:inline}.pe-n{font-weight:500;color:var(--fg-strong)}.pe-days .field{max-width:140px}.pe-ctrl{justify-content:flex-end;border-top:1px dashed var(--line);padding-top:8px}}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:10;background:var(--bg)}

.sync{font-size:12px;color:var(--faint);white-space:nowrap}
.sync.err{color:var(--accent-text)}
.boot{min-height:100%;display:grid;place-items:center;color:var(--muted);font-size:14px;padding:40px}