:root{
  color-scheme: light;
  --bg:#f6f7f9; --card:#fff; --line:#e6e7eb; --line2:#eff0f3;
  --ink:#16181d; --ink2:#3a3f4b; --mute:#6b7280; --mute2:#9ca0ab;
  --brand:#0569ac; --brand-ink:#04558b; --brand-bg:#e7f1f9;
  --red:#b42318; --red-bg:#fef3f2; --green:#067647; --green-bg:#ecfdf3; --amber:#b45309; --amber-bg:#fffbeb;
  --radius:12px; --shadow:0 1px 2px rgba(16,24,40,.05);
  --topbar:56px;
}
*{ box-sizing:border-box; }
html,body{ margin:0; }
body{
  background:var(--bg); color:var(--ink);
  font:14px/1.45 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}
a{ color:var(--brand-ink); text-decoration:none; }
button,input,select,textarea{ font:inherit; color:inherit; }
.muted{ color:var(--mute); }
.fine{ font-size:12px; color:var(--mute2); }
.hidden{ display:none !important; }
.only-mobile{ display:none; }
@media (max-width: 760px){ .only-mobile{ display:inline; } .only-desktop{ display:none; } }

/* ---------- botones ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  border:1px solid var(--line); background:#fff; color:var(--ink2);
  border-radius:9px; padding:7px 12px; font-weight:600; font-size:13px; cursor:pointer; white-space:nowrap;
}
.btn:hover{ background:#f6f7f9; }
.btn.primary{ background:var(--brand); border-color:var(--brand); color:#fff; }
.btn.primary:hover{ background:var(--brand-ink); }
.btn.danger{ color:var(--red); }
.btn.danger:hover{ background:var(--red-bg); border-color:#fecdca; }
.btn.danger.armed{ background:var(--red); color:#fff; border-color:var(--red); }
.btn.small{ padding:4px 9px; font-size:12px; border-radius:7px; }
.btn.ghost{ border-color:transparent; background:transparent; }
.btn.ghost:hover{ background:#eef0f4; }
.btn:disabled{ opacity:.55; cursor:default; }
.btn.google{ width:100%; padding:11px; font-size:14px; margin:18px 0 10px; }
.login-input{
  width:100%; margin-top:20px; border:1px solid var(--line); border-radius:10px; padding:11px 13px;
  font-size:15px; outline:none; text-align:center;
}
.login-input:focus{ border-color:#a5b4fc; box-shadow:0 0 0 3px rgba(79,70,229,.12); }
.login-input + .btn.google{ margin-top:10px; }

/* ---------- login / mensajes ---------- */
.center-page{ min-height:100vh; display:flex; align-items:center; justify-content:center; padding:20px; }
.card{ background:var(--card); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); }
.login-card,.msg-card{ width:100%; max-width:380px; padding:32px 28px; text-align:center; }
.login-logo{ width:84px; height:84px; }
.brand-big{ font-size:22px; font-weight:800; letter-spacing:-.02em; margin:8px 0 2px; }
.msg-card h1{ font-size:17px; margin:14px 0 6px; }
.msg-card p{ color:var(--mute); margin:0 0 18px; }

/* ---------- barra superior ---------- */
.topbar{
  position:sticky; top:0; z-index:20; height:var(--topbar);
  display:flex; align-items:center; gap:18px; padding:0 18px;
  background:rgba(255,255,255,.92); backdrop-filter:blur(8px); border-bottom:1px solid var(--line);
}
.brand{ display:flex; align-items:center; gap:8px; font-weight:800; color:var(--ink); font-size:16px; letter-spacing:-.02em; }
.brand img{ width:32px; height:32px; }
.nav{ display:flex; gap:2px; flex:1; }
.nav a{ padding:7px 12px; border-radius:8px; color:var(--mute); font-weight:600; font-size:13.5px; }
.nav a:hover{ background:#f1f2f5; color:var(--ink2); }
.nav a.on{ background:var(--brand-bg); color:var(--brand-ink); }
.top-actions{ display:flex; align-items:center; gap:10px; margin-left:auto; }
.avatar-btn{ border:none; background:none; padding:0; cursor:pointer; border-radius:50%; }
.avatar{
  width:28px; height:28px; border-radius:50%; flex:none; display:inline-flex; align-items:center; justify-content:center;
  background:#dcebf6; color:var(--brand-ink); font-size:11px; font-weight:700; overflow:hidden;
}
.avatar img{ width:100%; height:100%; object-fit:cover; }
.avatar.sm{ width:22px; height:22px; font-size:9.5px; }
.avatar.lg{ width:34px; height:34px; font-size:13px; }
.bottomnav{ display:none; }

.banner{
  display:flex; align-items:center; gap:12px; justify-content:center; flex-wrap:wrap;
  padding:9px 16px; background:var(--amber-bg); color:var(--amber); border-bottom:1px solid #fde68a; font-size:13px; font-weight:500;
}

/* ---------- vistas ---------- */
.view{ max-width:1200px; margin:0 auto; padding:20px 18px 90px; }
.view-head{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:16px; }
.view-head h1{ font-size:20px; margin:0; letter-spacing:-.02em; }
.view-head .grow{ flex:1; }
.loading,.empty{ padding:40px; text-align:center; color:var(--mute); }
.empty-mini{ padding:10px 4px; color:var(--mute2); font-size:13px; }
select.sel,input.inp{
  border:1px solid var(--line); background:#fff; border-radius:8px; padding:6px 9px; font-size:13px; outline:none;
}
select.sel:focus,input.inp:focus,textarea:focus{ border-color:#a5b4fc; box-shadow:0 0 0 3px rgba(79,70,229,.12); }
.seg{ display:inline-flex; background:#eceef2; padding:3px; border-radius:9px; gap:2px; }
.seg button{ border:none; background:transparent; padding:5px 11px; border-radius:7px; font-weight:600; font-size:12.5px; color:var(--mute); cursor:pointer; }
.seg button.on{ background:#fff; color:var(--ink); box-shadow:0 1px 2px rgba(0,0,0,.08); }

/* quick add */
.quick{ display:flex; gap:8px; margin-bottom:18px; }
.quick input{ flex:1; min-width:0; border:1px solid var(--line); background:#fff; border-radius:10px; padding:10px 13px; font-size:14px; outline:none; }
.quick input:focus{ border-color:#a5b4fc; box-shadow:0 0 0 3px rgba(79,70,229,.12); }

/* grupos */
.group{ margin-bottom:20px; }
.group-head{ display:flex; align-items:center; gap:8px; margin:0 2px 8px; font-size:12px; font-weight:700; color:var(--mute); text-transform:uppercase; letter-spacing:.04em; }
.group-head .n{ color:var(--mute2); font-weight:600; }
.group-head.red{ color:var(--red); }
.list{ display:flex; flex-direction:column; gap:7px; }

/* tarjeta de tarea */
.tcard{
  background:#fff; border:1px solid var(--line); border-radius:10px; padding:10px 12px; cursor:pointer;
  box-shadow:var(--shadow); border-left:3px solid transparent; transition:border-color .1s, box-shadow .1s;
}
.tcard:hover{ border-color:#c7cad2; box-shadow:0 2px 6px rgba(16,24,40,.07); }
.tcard.prio-alta{ border-left-color:#ef4444; }
.tcard.prio-baja{ border-left-color:#cbd5e1; }
.tcard.overdue{ background:#fffafa; }
.tcard.done .tc-title{ color:var(--mute2); text-decoration:line-through; }
.tcard.dragging{ opacity:.45; }
.tc-top{ display:flex; align-items:center; gap:6px; margin-bottom:3px; min-height:0; }
.tc-title{ font-weight:600; color:var(--ink); font-size:14px; word-break:break-word; }
.tc-meta{ display:flex; align-items:center; flex-wrap:wrap; gap:6px 10px; margin-top:6px; font-size:12px; color:var(--mute); }
.tc-meta .grow{ flex:1; }
.chip{
  display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:600; padding:1px 8px;
  border-radius:20px; border:1px solid; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.dot{ width:8px; height:8px; border-radius:50%; flex:none; display:inline-block; }
.tag{ display:inline-flex; align-items:center; gap:4px; white-space:nowrap; }
.tag.red{ color:var(--red); font-weight:600; }
.tag.amber{ color:var(--amber); font-weight:600; }
.tag.blue{ color:var(--brand-ink); }
.status-pill{ font-size:11px; font-weight:600; padding:1px 8px; border-radius:20px; }
.st-por_hacer{ background:#f1f5f9; color:#475569; }
.st-en_curso{ background:#eff6ff; color:#1d4ed8; }
.st-bloqueada{ background:#fef3f2; color:#b42318; }
.st-hecha{ background:#ecfdf3; color:#067647; }
.warn-ico{ color:var(--amber); font-size:12px; }
.mini-bar{ width:46px; height:4px; background:#eef0f4; border-radius:4px; overflow:hidden; display:inline-block; }
.mini-bar i{ display:block; height:100%; background:var(--brand); }

details.done-group summary{ cursor:pointer; list-style:none; }
details.done-group summary::-webkit-details-marker{ display:none; }

/* ---------- tablero ---------- */
.board{ display:grid; grid-template-columns:repeat(4, minmax(240px, 1fr)); gap:12px; overflow-x:auto; padding-bottom:8px; }
.col{ background:#eef0f4; border-radius:12px; padding:10px; min-height:200px; display:flex; flex-direction:column; }
.col.drop{ background:#e7f1f9; outline:2px dashed #7fb2d9; }
.col-head{ display:flex; align-items:center; gap:8px; margin:2px 4px 10px; font-weight:700; font-size:13px; }
.col-head .n{ color:var(--mute); font-weight:600; }
.col-head .btn{ margin-left:auto; }
.col .list{ flex:1; }

/* ---------- proyectos ---------- */
.pgrid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); gap:12px; }
.pcard{ background:#fff; border:1px solid var(--line); border-radius:12px; padding:14px 16px; cursor:pointer; box-shadow:var(--shadow); border-top:4px solid var(--c, var(--brand)); }
.pcard:hover{ box-shadow:0 3px 10px rgba(16,24,40,.08); }
.pcard h3{ margin:0; font-size:15px; }
.pcard .client{ font-size:12.5px; color:var(--mute); margin-top:1px; min-height:18px; }
.pcard .stats{ display:flex; gap:12px; font-size:12px; color:var(--mute); margin-top:12px; flex-wrap:wrap; }
.pcard .stats b{ color:var(--ink); }
.bar{ height:6px; background:#eef0f4; border-radius:6px; overflow:hidden; margin-top:10px; }
.bar i{ display:block; height:100%; background:var(--c, var(--brand)); border-radius:6px; }
.proj-head{ background:#fff; border:1px solid var(--line); border-radius:12px; padding:14px 16px; margin-bottom:16px; border-left:5px solid var(--c); }
.proj-head h1{ margin:0; font-size:20px; }
.proj-head .row{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-top:8px; }

/* ---------- semana ---------- */
.week{ display:grid; grid-template-columns:repeat(7, minmax(0,1fr)); gap:8px; }
.day{ background:#fff; border:1px solid var(--line); border-radius:12px; padding:8px; min-height:160px; min-width:0; }
.day.today{ border-color:#a5b4fc; box-shadow:0 0 0 2px rgba(79,70,229,.12); }
.day-head{ display:flex; justify-content:space-between; align-items:baseline; padding:2px 2px 6px; border-bottom:1px solid var(--line2); margin-bottom:6px; }
.day-head b{ font-size:12.5px; text-transform:capitalize; }
.day-head .h{ font-size:11px; color:var(--mute); }
.day-head .h.over{ color:var(--red); font-weight:700; }
.wi{ border-radius:8px; padding:5px 7px; margin-bottom:5px; font-size:12px; cursor:pointer; border-left:3px solid var(--c, var(--brand)); background:#f8f9ff; }
.wi .t{ font-weight:600; color:var(--ink); word-break:break-word; }
.wi .s{ color:var(--mute); font-size:11px; }
.wi.ev{ background:#f6f7f9; border-left-color:#9ca3af; cursor:default; }
.wi.ev a{ color:inherit; }
.wi.due{ background:#fff; border:1px dashed #d6d9df; border-left:3px dashed var(--c, var(--brand)); }

.day-head .add-ev{ margin-left:6px; padding:0 7px; line-height:20px; }
.wi.evt{ background:#f0f9ff; }
.wi .who{ display:flex; gap:3px; margin-top:4px; align-items:center; }
.month{ display:grid; grid-template-columns:repeat(7, minmax(0,1fr)); gap:6px; }
.mhead{ font-size:11.5px; font-weight:700; color:var(--mute); text-transform:uppercase; letter-spacing:.04em; padding:0 4px; }
.mcell{ background:#fff; border:1px solid var(--line); border-radius:10px; min-height:96px; padding:5px; cursor:pointer; min-width:0; }
.mcell:hover{ border-color:#c7cad2; }
.mcell.out{ background:#fafbfc; }
.mcell.out .mnum{ color:var(--mute2); }
.mcell.today{ border-color:#a5b4fc; box-shadow:0 0 0 2px rgba(79,70,229,.12); }
.mnum{ font-size:12px; font-weight:700; margin:0 2px 4px; }
.mchip{ font-size:11px; padding:1px 5px; border-radius:5px; margin-bottom:2px; border-left:3px solid var(--c); background:#f6f7fb;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mdots{ display:none; gap:3px; flex-wrap:wrap; }

/* ---------- equipo ---------- */
.table-wrap{ background:#fff; border:1px solid var(--line); border-radius:12px; overflow-x:auto; }
table.tbl{ width:100%; border-collapse:collapse; font-size:13px; }
.tbl th{ text-align:left; font-size:11.5px; text-transform:uppercase; letter-spacing:.03em; color:var(--mute); font-weight:700; padding:10px 12px; border-bottom:1px solid var(--line); white-space:nowrap; }
.tbl td{ padding:10px 12px; border-bottom:1px solid var(--line2); white-space:nowrap; }
.tbl tr:last-child td{ border-bottom:none; }
.person{ display:flex; align-items:center; gap:8px; }
.num-red{ color:var(--red); font-weight:700; }
.section-title{ font-size:14px; margin:24px 2px 10px; }

/* ---------- panel de tarea (drawer) ---------- */
#overlay{ position:fixed; inset:0; z-index:50; display:none; }
#overlay.open{ display:block; }
.scrim{ position:absolute; inset:0; background:rgba(15,18,30,.35); }
.drawer{
  position:absolute; top:0; right:0; bottom:0; width:min(560px, 100%); background:#fff;
  box-shadow:-8px 0 30px rgba(15,18,30,.15); display:flex; flex-direction:column;
}
.modal{
  position:absolute; left:50%; top:12vh; transform:translateX(-50%); width:min(460px, calc(100% - 24px));
  background:#fff; border-radius:14px; box-shadow:0 20px 50px rgba(15,18,30,.25); padding:18px;
}
.modal h2{ margin:0 0 12px; font-size:16px; }
.modal-wide{ width:min(560px, calc(100% - 24px)); top:6vh; max-height:88vh; overflow-y:auto; }
.modal .only-allday{ display:none; }
.modal.allday .only-allday{ display:flex; }
.modal.allday .timed{ display:none; }
.check{ display:flex !important; align-items:center; gap:8px; text-transform:none !important; letter-spacing:0 !important; font-size:13.5px !important; color:var(--ink2) !important; font-weight:500 !important; height:34px; cursor:pointer; }
.check input{ width:16px !important; height:16px; accent-color:var(--brand); }
.people{ display:flex; flex-wrap:wrap; gap:6px; }
.person-pick{ display:inline-flex !important; align-items:center; gap:6px; border:1px solid var(--line); border-radius:20px; padding:3px 10px 3px 4px; cursor:pointer;
  text-transform:none !important; letter-spacing:0 !important; font-size:13px !important; color:var(--ink2) !important; font-weight:500 !important; }
.person-pick input{ width:15px !important; height:15px; accent-color:var(--brand); margin:0 2px 0 4px; }
.person-pick:has(input:checked){ border-color:#a5b4fc; background:var(--brand-bg); }
.menu-note{ padding:8px 10px; font-size:13px; color:var(--ink2); }
.menu{
  position:absolute; right:14px; top:calc(var(--topbar) - 4px); background:#fff; border:1px solid var(--line);
  border-radius:12px; box-shadow:0 12px 30px rgba(15,18,30,.15); min-width:250px; padding:6px;
}
.menu .who{ padding:8px 10px 10px; border-bottom:1px solid var(--line2); margin-bottom:4px; }
.menu .who b{ display:block; }
.menu button,.menu a{ display:block; width:100%; text-align:left; border:none; background:none; padding:8px 10px; border-radius:8px; cursor:pointer; color:var(--ink2); font-size:13.5px; }
.menu button:hover,.menu a:hover{ background:#f3f4f7; }
.d-head{ display:flex; align-items:flex-start; gap:8px; padding:14px 16px 10px; border-bottom:1px solid var(--line2); }
.d-title{
  flex:1; border:1px solid transparent; border-radius:8px; padding:6px 8px; font-size:17px; font-weight:700; outline:none; resize:none;
  min-height:38px; line-height:1.35;
}
.d-title:hover{ border-color:var(--line); }
.d-title:focus{ border-color:#a5b4fc; }
.d-body{ flex:1; overflow-y:auto; padding:12px 16px 20px; }
.d-foot{ border-top:1px solid var(--line2); padding:10px 16px; display:flex; align-items:center; gap:10px; font-size:12px; color:var(--mute); }
.d-foot .grow{ flex:1; }
.fgrid{ display:grid; grid-template-columns:1fr 1fr; gap:10px 12px; }
.field{ display:flex; flex-direction:column; gap:4px; min-width:0; }
.field.full{ grid-column:1/-1; }
.field label,.lbl{ font-size:11px; font-weight:700; color:var(--mute); text-transform:uppercase; letter-spacing:.04em; }
.field select,.field input,.field textarea{
  width:100%; border:1px solid var(--line); border-radius:8px; padding:7px 9px; background:#fff; font-size:13.5px; outline:none;
}
.field textarea{ resize:vertical; min-height:90px; line-height:1.5; }
.sched{ display:flex; gap:6px; flex-wrap:wrap; align-items:center; }
.sched input{ width:auto; flex:1 1 120px; }
.sched input[type=number]{ flex:0 0 72px; }
.sync-ok{ font-size:12px; color:var(--green); }
.sync-err{ font-size:12px; color:var(--red); background:var(--red-bg); border-radius:8px; padding:6px 9px; }
.range{ display:flex; align-items:center; gap:10px; }
.range input{ flex:1; accent-color:var(--brand); padding:0; border:none; }
.range b{ width:40px; text-align:right; font-size:13px; }
.subs{ display:flex; flex-direction:column; gap:2px; margin-top:4px; }
.sub{ display:flex; align-items:center; gap:8px; padding:3px 4px; border-radius:7px; }
.sub:hover{ background:#f7f8fa; }
.sub input[type=checkbox]{ width:16px; height:16px; accent-color:var(--brand); flex:none; }
.sub input[type=text]{ flex:1; border:1px solid transparent; background:transparent; padding:4px 6px; border-radius:6px; font-size:13.5px; outline:none; }
.sub input[type=text]:focus{ border-color:var(--line); background:#fff; }
.sub.done input[type=text]{ color:var(--mute2); text-decoration:line-through; }
.sub .x{ border:none; background:none; color:var(--mute2); cursor:pointer; font-size:16px; padding:0 6px; border-radius:6px; }
.sub .x:hover{ color:var(--red); background:var(--red-bg); }
.add-sub{ width:100%; border:1px dashed #d6d9df; border-radius:8px; padding:7px 10px; margin-top:6px; font-size:13px; outline:none; background:#fbfbfc; }
.save-state{ font-size:12px; }
.save-state.ok{ color:var(--green); }
.save-state.err{ color:var(--red); }
.swatches{ display:flex; gap:6px; flex-wrap:wrap; }
.swatch{ width:24px; height:24px; border-radius:50%; border:2px solid #fff; box-shadow:0 0 0 1px var(--line); cursor:pointer; }
.swatch.on{ box-shadow:0 0 0 2px var(--ink); }
.modal-actions{ display:flex; justify-content:flex-end; gap:8px; margin-top:16px; }

/* ---------- avisos ---------- */
.toasts{ position:fixed; left:50%; bottom:24px; transform:translateX(-50%); z-index:80; display:flex; flex-direction:column; gap:8px; align-items:center; pointer-events:none; }
.toast{ background:#16181d; color:#fff; padding:10px 14px; border-radius:10px; font-size:13px; box-shadow:0 8px 24px rgba(0,0,0,.2); max-width:min(520px, 92vw); pointer-events:auto; }
.toast.err{ background:var(--red); }

@media (max-width: 440px){
  .fgrid{ grid-template-columns:1fr; }
}
/* ---------- celular ---------- */
@media (max-width: 760px){
  .topbar{ padding:0 12px; gap:10px; }
  .nav{ display:none; }
  .brand span{ display:none; }
  .bottomnav{
    display:flex; position:fixed; left:0; right:0; bottom:0; z-index:30; background:#fff; border-top:1px solid var(--line);
    padding:6px 4px calc(6px + env(safe-area-inset-bottom));
  }
  .bottomnav a{ flex:1; display:flex; flex-direction:column; align-items:center; gap:1px; font-size:10.5px; color:var(--mute); font-weight:600; padding:4px 0; border-radius:8px; }
  .bottomnav a span{ font-size:17px; line-height:1.2; }
  .bottomnav a.on{ color:var(--brand-ink); }
  .view{ padding:14px 12px 100px; }
  .board{ grid-template-columns:repeat(4, 82vw); scroll-snap-type:x mandatory; }
  .col{ scroll-snap-align:start; }
  .week{ grid-template-columns:1fr; }
  .month{ gap:3px; }
  .mcell{ min-height:54px; padding:4px; }
  .mchips{ display:none; }
  .mdots{ display:flex; }
  .day{ min-height:0; }
  .drawer{ width:100%; }
  .modal{ top:8vh; }
  .toasts{ bottom:84px; }
}
.section-row{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin:24px 2px 10px; }
.section-row .section-title{ margin:0; }
.pill-pending{ display:inline-block; margin-left:6px; padding:1px 8px; border-radius:99px; font-size:11px; font-weight:600; background:#fef3c7; color:#92400e; white-space:nowrap; }

/* cajas por proyecto (Mis tareas → Sin fecha) */
.pboxes{ display:grid; grid-template-columns:repeat(auto-fill, minmax(320px, 1fr)); gap:14px; align-items:start; }
.pbox{ background:#fff; border:1px solid var(--line); border-radius:12px; box-shadow:var(--shadow); overflow:hidden; border-top:3px solid var(--pc); }
.pbox-head{ display:flex; align-items:center; gap:8px; padding:10px 12px 8px; }
.pbox-name{ font-weight:700; font-size:14px; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
a.pbox-name:hover{ color:var(--brand-ink); text-decoration:underline; }
.pbox-n{ font-size:12px; font-weight:600; color:var(--mute2); background:#f1f5f9; border-radius:20px; padding:0 7px; }
.pbox-add{ margin-left:auto; width:26px; height:26px; border-radius:7px; border:1px solid transparent; background:none; color:var(--mute); font-size:18px; line-height:1; cursor:pointer; }
.pbox-add:hover{ background:var(--brand-bg); color:var(--brand-ink); }
.pbox-list{ display:flex; flex-direction:column; padding:0 6px 6px; }
.trow{ display:flex; align-items:center; gap:10px; padding:8px 8px; border-radius:8px; cursor:pointer; min-height:38px; }
.trow + .trow{ border-top:1px solid #f1f2f4; }
.trow:hover{ background:#f7f9fb; }
.trow-check{ flex:none; width:18px; height:18px; border-radius:50%; border:2px solid #c7cdd6; background:#fff; cursor:pointer; padding:0; position:relative; }
.trow-check:hover{ border-color:#16a34a; }
.trow-check:hover::after, .trow-check.on::after{ content:'✓'; position:absolute; inset:0; display:grid; place-items:center; font-size:11px; font-weight:800; color:#16a34a; }
.trow-check.on{ background:#dcfce7; border-color:#16a34a; }
.trow-title{ flex:1; min-width:0; font-size:14px; line-height:1.35; color:var(--ink); }
.trow-meta{ display:flex; align-items:center; gap:8px; font-size:12px; color:var(--mute); flex:none; }
.prio-flag{ flex:none; font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:#b42318; background:#fef3f2; border-radius:20px; padding:1px 7px; }
@media (max-width:700px){ .pboxes{ grid-template-columns:1fr; } }