/* ============================================================
Organizador MW5 — folha de estilo base
Design: estilo "TaskFlow" · azul #3B5CFF · cards 16px + sombra sutil
Tipografia: Plus Jakarta Sans (self-hosted).
============================================================ */
@font-face { font-family:"Inter"; font-weight:400; font-display:swap; src:url("../fonts/inter-400.woff2") format("woff2"); }
@font-face { font-family:"Inter"; font-weight:500; font-display:swap; src:url("../fonts/inter-500.woff2") format("woff2"); }
@font-face { font-family:"Inter"; font-weight:600; font-display:swap; src:url("../fonts/inter-600.woff2") format("woff2"); }
@font-face { font-family:"Inter"; font-weight:700; font-display:swap; src:url("../fonts/inter-700.woff2") format("woff2"); }
@font-face { font-family:"Poppins"; font-weight:600; font-display:swap; src:url("../fonts/poppins-600.woff2") format("woff2"); }
@font-face { font-family:"Poppins"; font-weight:700; font-display:swap; src:url("../fonts/poppins-700.woff2") format("woff2"); }
@font-face { font-family:"Plus Jakarta Sans"; font-weight:400; font-display:swap; src:url("../fonts/jakarta-400.woff2") format("woff2"); }
@font-face { font-family:"Plus Jakarta Sans"; font-weight:500; font-display:swap; src:url("../fonts/jakarta-500.woff2") format("woff2"); }
@font-face { font-family:"Plus Jakarta Sans"; font-weight:600; font-display:swap; src:url("../fonts/jakarta-600.woff2") format("woff2"); }
@font-face { font-family:"Plus Jakarta Sans"; font-weight:700; font-display:swap; src:url("../fonts/jakarta-700.woff2") format("woff2"); }
@font-face { font-family:"Plus Jakarta Sans"; font-weight:800; font-display:swap; src:url("../fonts/jakarta-800.woff2") format("woff2"); }
:root {
/* MW5 Workspace — estilo "TaskFlow": azul #3B5CFF, Plus Jakarta Sans,
cards arredondados (16px) + sombra sutil, acentos coloridos vibrantes. */
/* canvas cinza-azulado frio: neutro, combina com o accent azul */
--bg:#f1f4f9; --surface:#ffffff; --surface-2:#eef1f6; --muted:#e6eaf1;
--sidebar:#ffffff;
--border:#e4e8ef; --border-strong:#d6dbe5;
--fg:#0f172a; --fg-2:#475569; --fg-3:#8b93a7;
--accent:#3b5cff; --accent-hi:#2540c8; --accent-ink:#ffffff; --accent-weak:#e1e9ff; --accent-line:#e0e7ff;
--link:#3b5cff;
--sky:#3b5cff; --slate:#8b93a7;
/* acentos vibrantes da referência (ícones, thumbnails, badges) */
--c-blue:#3b5cff; --c-indigo:#6c4bf6; --c-violet:#8b5cf6; --c-pink:#ff6b9d; --c-rose:#f0577c;
--c-amber:#ffa23a; --c-orange:#c25a06; --c-cyan:#06b6d4; --c-teal:#35d0ba; --c-green:#12a150;
--danger:#e11d48; --danger-weak:#ffe4ef; --danger-ink:#d6206e;
/* Tons dos tipos de tarefa (valores que já existiam soltos no arquivo). */
--roxo:#7c3aed; --roxo-weak:#f0eafe;
--verde:#15803d; --verde-weak:#e6f6ec;
--ambar:#b45309; --ambar-weak:#fdf0dc;
--ok:#12854a; --ok-bg:#dcf7e6; --warn:#c25a06; --warn-bg:#ffeedc;
--ring:color-mix(in srgb, var(--accent) 28%, transparent);
--glass:color-mix(in srgb, #ffffff 72%, transparent);
/* Sombra bem sutil (feel TaskFlow: hairline + sombrinha de 1px). */
--shadow-sm:0 1px 2px rgba(15,23,42,.04);
--shadow-md:0 4px 12px rgba(15,23,42,.06);
--shadow-lg:0 12px 34px rgba(15,23,42,.12), 0 30px 60px rgba(15,23,42,.08);
--shadow-raise:0 4px 12px rgba(59,92,255,.24);
--radius:16px; --radius-sm:11px;
--sans:"Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
--display:"Plus Jakarta Sans", var(--sans);
--mono:ui-monospace, "SF Mono", Menlo, monospace;
color-scheme: light;
}
* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body {
margin:0; min-height:100dvh; background:var(--bg); color:var(--fg);
font-family:var(--sans); font-size:16px; line-height:1.5; -webkit-font-smoothing:antialiased;
}
a { color:var(--accent); text-decoration:none; }
a:hover { text-decoration:underline; }
:focus-visible { outline:2px solid var(--accent); outline-offset:2px; border-radius:5px; }
/* ============================================================
LOGIN
============================================================ */
.auth { min-height:100dvh; display:grid; grid-template-columns:1.05fr 0.95fr; }
/* ---------- painel esquerdo: showcase (claro) ---------- */
.auth-showcase {
position:relative; overflow:hidden; isolation:isolate;
padding:44px 52px; display:flex; flex-direction:column; gap:28px;
background:var(--surface); border-right:1px solid var(--border);
}
.auth-showcase::before {
content:""; position:absolute; inset:-10%; z-index:-2;
background:
radial-gradient(38% 42% at 18% 16%, color-mix(in srgb,var(--accent) 16%, transparent), transparent 60%),
radial-gradient(42% 48% at 88% 26%, color-mix(in srgb,var(--sky) 15%, transparent), transparent 62%),
radial-gradient(48% 52% at 72% 96%, color-mix(in srgb,var(--accent) 12%, transparent), transparent 60%),
var(--surface);
filter:blur(8px);
}
@media (prefers-reduced-motion: no-preference) {
.auth-showcase::before { animation:aurora 20s ease-in-out infinite alternate; }
}
@keyframes aurora { from{transform:translate3d(0,0,0) scale(1)} to{transform:translate3d(-2%,-2%,0) scale(1.06)} }
.auth-showcase::after {
content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
background-image:radial-gradient(color-mix(in srgb,var(--fg) 6%, transparent) 1px, transparent 1px);
background-size:24px 24px; mask-image:radial-gradient(85% 85% at 50% 40%, #000 0%, transparent 78%); opacity:.7;
}
.brand-mark { display:flex; align-items:center; gap:12px; }
.brand-mark .brand-logo { width:210px; max-width:100%; height:auto; display:block; }
.auth-logo-sm .brand-logo { width:160px; }
/* Sem logo cadastrado, o nome da empresa ocupa o lugar da imagem. */
.brand-nome { display:block; font-weight:800; letter-spacing:-.3px; font-size:22px; line-height:1.15; color:var(--fg); }
.ws-brand .brand-nome { font-size:16px; text-align:center; }
.brand-mark .logo {
width:44px; height:44px; border-radius:13px; display:grid; place-items:center;
background:linear-gradient(150deg, var(--accent-hi), var(--accent)); color:#fff;
font-family:var(--display); font-weight:700; font-size:18px;
box-shadow:0 6px 16px color-mix(in srgb,var(--accent) 32%, transparent);
}
.brand-mark .brand-name { font-weight:700; font-size:17px; letter-spacing:-.01em; line-height:1.1; color:var(--fg); }
.brand-mark .brand-name small {
display:block; font-weight:500; color:var(--fg-3); font-size:10.5px;
letter-spacing:.14em; text-transform:uppercase; margin-top:2px;
}
.showcase-copy { margin-top:6px; }
.showcase-copy h1 {
font-family:var(--display); font-weight:700;
font-size:clamp(28px, 3.2vw, 42px); line-height:1.12; letter-spacing:-.02em;
margin:0 0 14px; text-wrap:balance; max-width:16ch; color:var(--fg);
}
.showcase-copy h1 .hl {
background:linear-gradient(100deg, var(--accent), var(--sky)); -webkit-background-clip:text;
background-clip:text; color:transparent;
}
.showcase-copy p { color:var(--fg-2); max-width:44ch; margin:0; font-size:15.5px; }
/* preview de produto */
.preview {
margin-top:auto; align-self:flex-start; width:min(430px, 100%);
background:var(--surface); border:1px solid var(--border); border-radius:18px; padding:14px;
box-shadow:var(--shadow-lg);
transform:perspective(1500px) rotateX(4deg) rotateY(-7deg);
transform-origin:bottom left;
}
@media (prefers-reduced-motion: no-preference) { .preview { animation:floaty 7s ease-in-out infinite alternate; } }
@keyframes floaty { from{transform:perspective(1500px) rotateX(4deg) rotateY(-7deg) translateY(0)}
to{transform:perspective(1500px) rotateX(3deg) rotateY(-6deg) translateY(-8px)} }
.preview-head { display:flex; align-items:center; gap:9px; padding:4px 6px 12px; }
.preview-head b { font-size:13px; letter-spacing:-.01em; color:var(--fg); }
.preview-head .pill {
margin-left:auto; font-size:10.5px; font-weight:600; color:var(--accent);
background:var(--accent-weak); border:1px solid color-mix(in srgb,var(--accent) 20%,transparent);
border-radius:999px; padding:2px 9px;
}
.prow {
display:flex; align-items:center; gap:11px; padding:10px 8px 10px 12px;
border-left:3px solid var(--spine, var(--slate)); border-radius:8px;
background:var(--surface-2); margin-bottom:7px;
}
.prow:last-child { margin-bottom:0; }
.prow .t { font-size:12.5px; font-weight:500; color:var(--fg); flex:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.prow .sig { display:inline-flex; align-items:flex-end; gap:2px; height:13px; }
.prow .sig i { width:3px; border-radius:1px; background:var(--border-strong); }
.prow .sig i:nth-child(1){height:5px} .prow .sig i:nth-child(2){height:8px}
.prow .sig i:nth-child(3){height:11px} .prow .sig i:nth-child(4){height:13px}
.prow .sig.urg i{background:#1d4ed8} .prow .sig.high i:nth-child(-n+3){background:#3b82f6}
.prow .sig.med i:nth-child(-n+2){background:#7aa7f2} .prow .sig.low i:nth-child(-n+1){background:var(--slate)}
.prow .av { width:22px; height:22px; border-radius:50%; display:grid; place-items:center; font-size:9.5px; font-weight:700; color:#fff; flex:none; }
.trust { display:flex; align-items:center; gap:10px; color:var(--fg-3); font-size:12.5px; }
.trust svg { width:15px; height:15px; color:var(--accent); flex:none; }
.trust .sep { opacity:.5; }
/* ---------- painel direito: credenciais ---------- */
.auth-panel { display:grid; place-items:center; padding:40px 24px; background:var(--bg); }
.auth-card { width:100%; max-width:392px; }
@media (prefers-reduced-motion: no-preference) {
.auth-card > * { animation:rise .5s cubic-bezier(.2,.7,.3,1) both; }
.auth-card > *:nth-child(1){animation-delay:.02s} .auth-card > *:nth-child(2){animation-delay:.07s}
.auth-card > *:nth-child(3){animation-delay:.12s} .auth-card > *:nth-child(4){animation-delay:.17s}
.auth-card > *:nth-child(5){animation-delay:.22s}
@keyframes rise { from{opacity:0; transform:translateY(9px)} to{opacity:1; transform:none} }
}
.auth-logo-sm { display:none; }
.auth-card h2 { font-family:var(--display); font-size:25px; letter-spacing:-.01em; margin:0 0 7px; font-weight:700; color:var(--fg); }
.auth-card .sub { color:var(--fg-3); margin:0 0 26px; font-size:14.5px; }
.field { margin-bottom:16px; }
.field label { display:block; font-size:13px; font-weight:600; color:var(--fg-2); margin-bottom:8px; }
.control { position:relative; display:flex; align-items:center; }
.control > svg { position:absolute; left:13px; width:18px; height:18px; color:var(--fg-3); pointer-events:none; transition:color .18s; }
.control:focus-within > svg { color:var(--accent); }
.auth-card input[type="email"],
.auth-card input[type="password"],
.auth-card input[type="text"] {
width:100%; font:inherit; font-size:15px; color:var(--fg);
background:var(--surface); border:1px solid var(--border-strong); border-radius:var(--radius-sm);
padding:12px 14px 12px 42px; box-shadow:var(--shadow-sm);
transition:border-color .18s, box-shadow .18s;
}
.auth-card input::placeholder { color:var(--fg-3); }
.auth-card input:hover { border-color:var(--slate); }
.auth-card input:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--ring); }
.field .errors { list-style:none; margin:8px 0 0; padding:0; color:var(--danger-ink); font-size:12.5px; }
.row-between { display:flex; align-items:center; justify-content:space-between; margin:2px 0 20px; }
.remember { display:flex; align-items:center; gap:9px; font-size:13.5px; color:var(--fg-2); cursor:pointer; user-select:none; }
.remember input { appearance:none; -webkit-appearance:none; width:18px; height:18px; margin:0;
border:1.5px solid var(--border-strong); border-radius:5px; background:var(--surface); cursor:pointer; position:relative;
transition:background .15s, border-color .15s; }
.remember input:hover { border-color:var(--accent); }
.remember input:checked { background:var(--accent); border-color:var(--accent); }
.remember input:checked::after { content:""; position:absolute; left:5px; top:1.5px; width:5px; height:9px;
border:solid #fff; border-width:0 2px 2px 0; transform:rotate(42deg); }
.remember input:focus-visible { outline:none; box-shadow:0 0 0 3px var(--ring); }
.row-between .help { font-size:13px; color:var(--accent); font-weight:500; }
.btn-primary {
position:relative; overflow:hidden; width:100%; font:inherit; font-weight:600; font-size:15px;
color:#fff; background:linear-gradient(180deg, var(--accent-hi), var(--accent));
border:0; border-radius:var(--radius-sm); padding:13px 18px; cursor:pointer;
display:inline-flex; align-items:center; justify-content:center; gap:9px;
box-shadow:0 1px 2px rgba(37,99,235,.24), 0 8px 20px rgba(37,99,235,.24);
transition:transform .06s, box-shadow .2s, filter .2s;
}
.btn-primary:hover { filter:brightness(1.05); box-shadow:0 2px 4px rgba(37,99,235,.3), 0 12px 26px rgba(37,99,235,.34); }
.btn-primary:active { transform:translateY(1px); }
.btn-primary svg { width:17px; height:17px; }
.btn-primary::after { content:""; position:absolute; inset:0;
background:linear-gradient(115deg, transparent 35%, rgba(255,255,255,.35) 50%, transparent 65%); transform:translateX(-130%); }
@media (prefers-reduced-motion: no-preference) {
.btn-primary::after { transition:transform .7s ease; }
.btn-primary:hover::after { transform:translateX(130%); }
}
.alert { display:flex; align-items:center; gap:10px; background:var(--danger-weak); color:var(--danger-ink);
border:1px solid color-mix(in srgb,var(--danger) 30%, transparent); border-radius:var(--radius-sm);
padding:11px 13px; font-size:13.5px; margin-bottom:20px; }
.alert svg { flex:none; width:18px; height:18px; color:var(--danger); }
.auth-foot { margin:24px 0 0; font-size:13px; color:var(--fg-3); text-align:center; }
@media (max-width: 940px) {
.auth { grid-template-columns:1fr; }
.auth-showcase { display:none; }
.auth-logo-sm { display:flex; margin-bottom:22px; }
}
/* ============================================================
APP SHELL
============================================================ */
.app-top { display:flex; align-items:center; gap:14px; padding:14px 22px;
border-bottom:1px solid var(--border); background:var(--surface); box-shadow:var(--shadow-sm); }
.app-top .logo { width:32px; height:32px; border-radius:9px; display:grid; place-items:center;
background:linear-gradient(150deg, var(--accent-hi), var(--accent)); color:#fff;
font-family:var(--display); font-weight:700; font-size:14px; }
.app-top strong { color:var(--fg); }
.app-top .who { margin-left:auto; display:flex; align-items:center; gap:12px; color:var(--fg-2); font-size:14px; }
.btn-ghost { font:inherit; font-size:13px; font-weight:500; color:var(--fg-2); background:var(--surface);
border:1px solid var(--border-strong); border-radius:8px; padding:7px 13px; cursor:pointer;
transition:border-color .18s, color .18s; box-shadow:var(--shadow-sm); }
.btn-ghost:hover { color:var(--fg); border-color:var(--slate); }
.app-body { max-width:760px; margin:0 auto; padding:64px 22px; text-align:center; }
.app-body .badge { display:inline-flex; align-items:center; gap:8px; font-size:12.5px; font-weight:600;
color:var(--accent); background:var(--accent-weak);
border:1px solid color-mix(in srgb,var(--accent) 22%, transparent); border-radius:999px; padding:5px 12px; margin-bottom:20px; }
.app-body h1 { font-family:var(--display); font-size:30px; letter-spacing:-.01em; margin:0 0 10px; color:var(--fg); }
.app-body p { color:var(--fg-2); margin:0 auto; max-width:46ch; }
/* ============================================================
NAV do app + LISTA DE TAREFAS
============================================================ */
.app-brand { display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--fg); }
.app-nav { display:flex; gap:4px; margin-left:10px; }
.app-nav a { font-size:14px; font-weight:500; color:var(--fg-2); padding:7px 12px; border-radius:8px; text-decoration:none; }
.app-nav a:hover { background:var(--surface-2); color:var(--fg); }
.app-nav a.on { color:var(--accent); background:var(--accent-weak); }
/* width:100% é o que segura a largura: como item de flex com margin auto, sem
ela a página se dimensiona pelo min-content e cresce além da tela quando
algum item interno é comprido (a busca chegava a 451px numa tela de 360). */
.page { width:100%; max-width:1120px; margin:0 auto; padding:26px 22px 72px; }
.page-head { display:flex; align-items:flex-end; justify-content:space-between; gap:20px; flex-wrap:wrap; margin-bottom:20px; }
.page-head h1 { font-family:var(--display); font-size:24px; letter-spacing:-.01em; margin:0; color:var(--fg); }
.page-head .sub { color:var(--fg-3); margin:5px 0 0; font-size:14px; }
.stats { display:flex; align-items:center; flex:none; background:var(--surface); border:1px solid var(--border);
border-radius:var(--radius-sm); padding:11px 4px; box-shadow:var(--shadow-sm); }
.stat { padding:0 13px; }
.stat span { white-space:nowrap; }
.stat + .stat { border-left:1px solid var(--border); }
.stat b { font-family:var(--display); font-size:22px; font-weight:700; display:block; line-height:1; color:var(--fg); font-variant-numeric:tabular-nums; }
.stat span { font-size:11px; text-transform:uppercase; letter-spacing:.05em; color:var(--fg-3); font-weight:600; }
.stat.st-hot b { color:var(--danger); }
/* Três blocos com rótulo inteiro ("Sem responsável") passam de 300px: no
celular a faixa vira quebra-linha e os rótulos param de estourar a tela. */
@media (max-width:560px){
.head-right { flex-wrap:wrap; gap:10px; width:100%; }
.stats { flex:1 1 100%; justify-content:space-between; padding:10px 2px; }
.stat { padding:0 9px; }
.stat span { white-space:normal; }
}
.sheet { background:var(--surface); border:1px solid var(--border); border-radius:8px; box-shadow:var(--shadow-md); overflow:hidden; }
.grp-h { display:flex; align-items:center; gap:10px; padding:11px 16px; background:var(--surface-2); border-top:1px solid var(--border); }
.sheet > .grp-h:first-child { border-top:0; }
.grp-h .dot { width:9px; height:9px; border-radius:50%; flex:none; }
.grp-h h2 { font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; margin:0; color:var(--fg-2); }
.grp-h .n { font-size:11.5px; color:var(--fg-3); background:var(--surface); border:1px solid var(--border); border-radius:6px; padding:1px 8px; font-variant-numeric:tabular-nums; }
.trow { display:flex; align-items:center; gap:14px; padding:12px 16px; border-top:1px solid var(--border); border-left:4px solid var(--slate); background:var(--surface); transition:background .12s; }
.trow:hover { background:var(--surface-2); }
.trow.done .title { text-decoration:line-through; color:var(--fg-3); }
.trow.done { opacity:.82; }
.prio { display:inline-flex; align-items:flex-end; gap:2px; height:14px; width:20px; flex:none; }
.prio i { width:3px; border-radius:1px; background:var(--border-strong); }
.prio i:nth-child(1){height:5px} .prio i:nth-child(2){height:8px} .prio i:nth-child(3){height:11px} .prio i:nth-child(4){height:14px}
.prio.p-BAIXA i:nth-child(-n+1){ background:var(--slate); }
.prio.p-MEDIA i:nth-child(-n+2){ background:var(--accent); }
.prio.p-ALTA i:nth-child(-n+3){ background:#d97706; }
.prio.p-URGENTE i:nth-child(-n+4){ background:var(--danger); }
.trow .main { flex:1; min-width:0; }
.trow .title { font-weight:500; font-size:14px; color:var(--fg); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.trow .meta { display:flex; align-items:center; gap:9px; margin-top:5px; }
.trow .id { font-size:11px; color:var(--fg-3); font-variant-numeric:tabular-nums; }
.tag-proj { display:inline-flex; align-items:center; gap:6px; font-size:11.5px; color:var(--fg-2); white-space:nowrap; }
.tag-proj i { width:8px; height:8px; border-radius:3px; flex:none; }
/* Ativo / Inativo (projetos, equipe) */
.badge-on, .badge-off, .badge-danger { display:inline-flex; align-items:center; gap:6px; font-size:11.5px;
font-weight:600; padding:2px 9px 2px 8px; border-radius:999px; white-space:nowrap; }
.badge-on::before, .badge-off::before, .badge-danger::before { content:""; width:6px; height:6px; border-radius:50%; }
.badge-on { color:var(--ok); background:var(--ok-bg); }
.badge-on::before { background:var(--ok); }
.badge-off { color:var(--fg-3); background:var(--surface-2); border:1px solid var(--border); }
.badge-off::before { background:var(--fg-3); }
.badge-danger { color:var(--danger-ink); background:var(--danger-weak); border:1px solid transparent; }
.badge-danger::before { background:var(--danger); }
/* Grid de cards de projeto (lista de Projetos) */
.pgrid { display:grid; grid-template-columns:repeat(auto-fill,minmax(min(300px,100%),1fr)); gap:16px; }
.pcard { display:flex; flex-direction:column; background:var(--surface);
border:1px solid var(--border-strong); border-radius:14px; overflow:hidden;
box-shadow:var(--shadow-sm); transition:transform .12s ease, box-shadow .12s ease, border-color .12s ease; }
.pcard:hover { transform:translateY(-2px); border-color:var(--accent-line);
box-shadow:var(--shadow-md); text-decoration:none; }
.pcard-thumb { height:60px; flex:none; }
.pcard-body { padding:13px 16px 15px; display:flex; flex-direction:column; gap:9px; min-width:0; }
.pcard-top { display:flex; align-items:center; gap:8px; }
.pcard-nome { font-size:15px; font-weight:700; color:var(--fg); white-space:nowrap;
overflow:hidden; text-overflow:ellipsis; min-width:0; }
.pcard-top .id { font-family:var(--mono); font-size:11px; color:var(--fg-3);
background:var(--surface-2); border:1px solid var(--border); border-radius:5px; padding:0 5px; flex:none; }
.pcard-top .badge-on, .pcard-top .badge-off { margin-left:auto; flex:none; }
.pcard-bar { height:7px; background:var(--muted); border-radius:999px; overflow:hidden; }
.pcard-bar > span { display:block; height:100%; background:var(--accent); border-radius:999px; }
.pcard-meta { display:flex; align-items:center; gap:9px; font-size:12px; color:var(--fg-3); }
.pcard-pct { font-weight:700; color:var(--fg); }
.pcard-foot { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:1px; }
.pcard-team { display:flex; }
.pcard-team .av.sm { width:24px; height:24px; font-size:9px; margin-left:-6px; border:2px solid var(--surface); box-shadow:none; }
.pcard-team .av.sm:first-child { margin-left:0; }
.pcard-upd { font-size:11.5px; white-space:nowrap; }
.type { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; padding:1.5px 6px; border-radius:5px; white-space:nowrap; }
/* Tons do tipo de tarefa: a empresa escolhe o tom, nunca a cor. */
.type.tom-neutro { color:var(--fg-3); background:var(--surface-2); border:1px solid var(--border); }
.type.tom-azul { color:var(--accent); background:var(--accent-weak); }
.type.tom-vermelho { color:var(--danger); background:var(--danger-weak); }
.type.tom-roxo { color:var(--roxo); background:var(--roxo-weak); }
.type.tom-verde { color:var(--verde); background:var(--verde-weak); }
.type.tom-ambar { color:var(--ambar); background:var(--ambar-weak); }
.tag-grupo { display:inline-flex; align-items:center; font-size:11.5px; font-weight:700; color:#fff; padding:1.5px 8px; border-radius:5px; white-space:nowrap; text-shadow:0 1px 1px rgba(0,0,0,.25); }
.trow .right { display:flex; align-items:center; gap:14px; flex:none; }
.trow .due { font-size:12px; color:var(--fg-3); font-variant-numeric:tabular-nums; white-space:nowrap; }
.pill { font-size:10.5px; font-weight:700; padding:2px 9px; border-radius:999px; white-space:nowrap; }
.av { width:26px; height:26px; border-radius:50%; display:grid; place-items:center; font-size:10px; font-weight:700; color:#fff; flex:none; box-shadow:inset 0 0 0 1px rgba(255,255,255,.25); }
.av.none { background:var(--surface-2); color:var(--fg-3); border:1px dashed var(--border-strong); box-shadow:none; }
/* quando o avatar é foto (![]()
com as mesmas classes .av/.ws-av) */
img.av, img.ws-av, .prow img.av { object-fit:cover; display:block; }
.av-xl { width:72px !important; height:72px !important; font-size:24px !important; border-radius:50%; }
.pd-title { display:flex; align-items:center; gap:10px; }
.pd-av { width:34px !important; height:34px !important; font-size:13px !important; }
/* Foto no Meu perfil (Configurações) */
.perfil-foto { display:flex; align-items:center; gap:16px; margin-bottom:16px; }
.perfil-foto .av-xl { flex:none; }
.perfil-foto-up { min-width:0; }
.perfil-foto-up label { display:block; font-size:12.5px; font-weight:600; color:var(--fg-2); margin-bottom:6px; }
.perfil-foto-up input[type=file] { font:inherit; font-size:13px; color:var(--fg-2); max-width:100%; }
.perfil-foto-up .hint { font-size:11.5px; color:var(--fg-3); margin:5px 0 0; }
.empty { padding:40px 16px; text-align:center; color:var(--fg-3); font-size:14px; }
@media (max-width: 720px) {
.trow .right .due { display:none; }
.trow .meta .tag-proj { display:none; }
}
/* ---- toolbar de filtros ---- */
.toolbar { display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; margin-bottom:14px; }
.views { display:flex; gap:4px; flex-wrap:wrap; }
.chip { font-size:13px; font-weight:500; color:var(--fg-2); text-decoration:none; padding:7px 13px; border-radius:9px; border:1px solid transparent; }
.chip:hover { background:var(--surface-2); color:var(--fg); text-decoration:none; }
.chip.on { background:var(--surface); border-color:var(--border); color:var(--fg); box-shadow:var(--shadow-sm); font-weight:600; }
/* filtros rápidos da página de Tarefas: barra de pílulas, ativo preenchido */
.views { gap:6px; }
.views .chip { border-radius:999px; padding:7px 15px; border-color:var(--border); }
.views .chip:hover { background:var(--surface-2); border-color:var(--border-strong); }
.views .chip.on { background:var(--accent); color:var(--accent-ink); border-color:var(--accent);
box-shadow:var(--shadow-raise); }
.filters { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.filters .fsearch { font:inherit; font-size:13.5px; color:var(--fg); background:var(--surface); border:1px solid var(--border-strong);
border-radius:9px; padding:8px 12px; min-width:170px; box-shadow:var(--shadow-sm); }
.filters .fsearch:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--ring); }
.filters select { font:inherit; font-size:13.5px; color:var(--fg-2); background:var(--surface); border:1px solid var(--border-strong);
border-radius:9px; padding:8px 10px; cursor:pointer; box-shadow:var(--shadow-sm); }
.filters select:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--ring); }
.btn-sm { font:inherit; font-size:13px; font-weight:600; border-radius:9px; padding:8px 14px; cursor:pointer;
border:1px solid var(--accent); background:var(--accent); color:#fff; text-decoration:none; display:inline-flex; align-items:center; }
.btn-sm:hover { filter:brightness(1.05); text-decoration:none; }
.btn-sm.ghost { background:var(--surface); color:var(--fg-2); border-color:var(--border-strong); }
.btn-sm.ghost:hover { color:var(--fg); border-color:var(--slate); }
.btn-sm.danger { background:var(--surface); color:var(--danger-ink); border-color:color-mix(in srgb,var(--danger) 40%, transparent); }
.btn-sm.danger:hover { background:var(--danger-weak); border-color:var(--danger); }
.btn-sm.ok { background:var(--surface); color:#15803d; border-color:color-mix(in srgb,#15803d 40%, transparent); }
.btn-sm.ok:hover { background:#e6f6ec; border-color:#15803d; }
@media (max-width: 760px) { .toolbar { flex-direction:column; align-items:stretch; } .filters { justify-content:flex-start; } }
/* Painel de operações (Portainer) */
.op-grid { display:grid; grid-template-columns:1fr; gap:12px; }
.op-card { background:var(--surface); border:1px solid var(--border-strong); border-radius:8px; padding:14px 16px;
display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; }
.op-card .svc { display:flex; align-items:center; gap:9px; font-weight:600; font-family:ui-monospace,Menlo,monospace; font-size:13.5px; }
.op-card .svc .dot { width:8px; height:8px; border-radius:50%; background:var(--slate); flex:none; }
.op-card.db .svc .dot { background:var(--accent); }
.op-card .acts { display:flex; gap:7px; flex-wrap:wrap; }
.op-card form { margin:0; display:inline; }
.badge-db { font-size:11px; font-weight:600; color:var(--accent); background:color-mix(in srgb,var(--accent) 12%, transparent); padding:2px 7px; border-radius:6px; }
.logbox { margin:0; background:#0d1117; color:#c9d1d9; border-radius:8px; padding:16px 18px; overflow:auto;
max-height:60vh; font:12.5px/1.55 ui-monospace,SFMono-Regular,Menlo,monospace; white-space:pre-wrap; word-break:break-word; }
/* ---- Calendário (visão semanal, estilo Google Calendar) ---- */
.cal-toolbar { display:flex; align-items:center; gap:10px; margin:4px 0 14px; flex-wrap:wrap; }
.cal-arrow { display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; border-radius:50%;
border:1px solid var(--border-strong); background:var(--surface); color:var(--fg-2); font-size:20px; line-height:1;
text-decoration:none; }
.cal-arrow:hover { background:var(--surface-2); color:var(--fg); }
.cal-toolbar .btn-sm.is-on { border-color:var(--accent); color:var(--accent); }
.cal-title { font-weight:700; color:var(--fg); letter-spacing:-.01em; text-transform:capitalize; margin-left:4px; }
.cal { border:1px solid var(--border-strong); border-radius:12px; overflow:hidden; background:var(--surface); box-shadow:var(--shadow-sm); }
.cal-scroll { max-height:70vh; overflow-y:auto; }
.cal-header, .cal-body { display:grid; grid-template-columns:60px repeat(7, minmax(0,1fr)); }
/* Cabeçalho DENTRO do scroll e grudado no topo → colunas do header e do corpo
ficam na mesma largura (a barra de rolagem não desalinha) e ele acompanha. */
.cal-header { position:sticky; top:0; z-index:6; background:var(--surface); border-bottom:1px solid var(--border-strong); }
.cal-corner { border-right:1px solid var(--border); }
.cal-dayhead { display:flex; flex-direction:column; align-items:center; gap:2px; padding:8px 4px; border-left:1px solid var(--border); }
.cal-dow { font-size:11px; font-weight:600; letter-spacing:.04em; color:var(--fg-3); }
.cal-dnum { font-size:18px; font-weight:700; color:var(--fg); width:32px; height:32px; display:flex; align-items:center; justify-content:center; border-radius:50%; }
.cal-dayhead.is-today .cal-dow { color:var(--accent); }
.cal-dayhead.is-today .cal-dnum { background:var(--accent); color:#fff; }
.cal-times { display:flex; flex-direction:column; }
/* rótulo no topo da célula, na mesma linha do slot correspondente (sem gambiarra) */
.cal-time { height:var(--row); position:relative; }
.cal-time span { position:absolute; top:-7px; right:8px; font-size:11px; color:var(--fg-3); background:var(--surface); padding:0 2px; }
.cal-time:first-child span { top:2px; }
.cal-day { position:relative; border-left:1px solid var(--border); }
.cal-day.is-today { background:color-mix(in srgb, var(--accent) 4%, transparent); }
.cal-slot { display:block; height:var(--row); border-top:1px solid var(--border); text-decoration:none; }
.cal-slot:first-child { border-top:none; }
.cal-slot:hover { background:color-mix(in srgb, var(--accent) 9%, transparent); }
.cal-now { position:absolute; left:0; right:0; height:0; border-top:2px solid #ea4335; z-index:4; pointer-events:none; }
.cal-now::before { content:""; position:absolute; left:-4px; top:-5px; width:8px; height:8px; border-radius:50%; background:#ea4335; }
.cal-ev { --evc:var(--accent); position:absolute; z-index:3; box-sizing:border-box; overflow:hidden;
padding:2px 6px; border-radius:6px; border-left:3px solid var(--evc); text-decoration:none;
background:color-mix(in srgb, var(--evc) 16%, var(--surface)); color:var(--fg);
display:flex; flex-direction:column; gap:1px; line-height:1.2; }
.cal-ev:hover { background:color-mix(in srgb, var(--evc) 26%, var(--surface)); z-index:5; }
.cal-ev-t { font-size:12px; font-weight:600; overflow:hidden;
display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; }
.cal-ev.is-short { flex-direction:row; align-items:baseline; }
.cal-ev.is-short .cal-ev-t { -webkit-line-clamp:1; white-space:nowrap; text-overflow:ellipsis; }
.cal-ev-t b { font-weight:700; }
.cal-ev-m { font-size:10.5px; color:var(--fg-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
/* ---- head-right (stats + nova tarefa) + título clicável ---- */
.head-right { display:flex; align-items:flex-end; gap:14px; }
.trow a.title { display:block; text-decoration:none; color:var(--fg); }
.trow a.title:hover { color:var(--accent); text-decoration:none; }
/* ---- formulário de tarefa ---- */
.page.narrow { max-width:640px; }
.page.read { max-width:820px; } /* coluna de leitura (docs/wiki): ~90 caracteres */
/* ---- Documento / Wiki: página de leitura (cabeçalho + TOC + papel) ---- */
@media (prefers-reduced-motion:no-preference){ html { scroll-behavior:smooth; } }
.doc-shell { max-width:none; }
.doc-topbar { display:flex; align-items:center; justify-content:space-between; margin-bottom:24px; }
.doc-topbar .back { font-size:13px; color:var(--fg-3); text-decoration:none; }
.doc-topbar .back:hover { color:var(--accent); }
.doc-actions { display:flex; gap:8px; }
.doc-header { margin-bottom:28px; }
.doc-chip { display:inline-flex; align-items:center; gap:7px; font-size:12.5px; font-weight:600;
color:var(--fg-2); text-decoration:none; background:var(--surface); border:1px solid var(--border);
padding:4px 12px 4px 9px; border-radius:999px; margin-bottom:15px; }
.doc-chip:hover { border-color:var(--border-strong); color:var(--fg); }
.doc-chip i { width:8px; height:8px; border-radius:50%; display:inline-block; }
.doc-chip-wiki i { background:var(--accent); }
.doc-title { font-family:var(--display); font-size:34px; line-height:1.12; letter-spacing:-.025em;
font-weight:700; color:var(--fg); margin:0 0 16px; }
.doc-meta { display:flex; flex-wrap:wrap; align-items:center; font-size:13px; color:var(--fg-3); }
.doc-meta > *:not(:first-child)::before { content:"·"; margin:0 12px; color:var(--border-strong); }
.doc-meta-au { display:inline-flex; align-items:center; gap:8px; color:var(--fg-2); font-weight:500; }
.doc-meta-au .av.sm { width:22px; height:22px; font-size:9px; }
.doc-body { display:grid; grid-template-columns:200px minmax(0,1fr); gap:48px; align-items:start; }
.doc-toc { position:sticky; top:80px; align-self:start; max-height:calc(100dvh - 100px); overflow-y:auto;
display:flex; flex-direction:column; gap:1px; }
.doc-toc:empty { display:none; }
.doc-toc-h { font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.07em;
color:var(--fg-3); padding:0 0 10px 12px; }
.doc-toc-a { font-size:13px; color:var(--fg-3); text-decoration:none; padding:5px 12px; line-height:1.4;
border-left:2px solid var(--border); transition:color .12s ease, border-color .12s ease; }
.doc-toc-a:hover { color:var(--fg); border-left-color:var(--border-strong); text-decoration:none; }
.doc-toc-a.active { color:var(--accent); border-left-color:var(--accent); font-weight:600; }
.doc-toc-a.h3 { padding-left:24px; font-size:12.5px; }
.doc-article { min-width:0; background:var(--surface); border:1px solid var(--border);
border-radius:16px; padding:44px 52px; box-shadow:0 1px 3px rgba(15,23,42,.05); }
@media (max-width:900px){
.doc-body { grid-template-columns:1fr; gap:0; }
.doc-toc { display:none; }
.doc-article { padding:26px 22px; border-radius:12px; }
.doc-title { font-size:27px; }
}
/* Detalhe do projeto: descrição + atividade recente */
.proj-desc { max-width:820px; color:var(--fg-2); line-height:1.6; font-size:14.5px; margin:0 0 18px; }
.proj-atv { display:flex; flex-direction:column; gap:2px; }
.patv { display:flex; align-items:flex-start; gap:9px; padding:7px 0; border-bottom:1px solid var(--border); }
.patv:last-child { border-bottom:0; }
.patv .av.sm { width:24px; height:24px; font-size:9px; flex:none; box-shadow:none; }
.patv-b { min-width:0; font-size:13px; color:var(--fg-3); line-height:1.4; }
.patv-b a { color:var(--link); }
.patv-t { display:block; font-size:11.5px; color:var(--fg-3); margin-top:1px; }
.form-head { margin-bottom:18px; }
.form-head .back { font-size:13px; color:var(--fg-3); text-decoration:none; }
.form-head .back:hover { color:var(--accent); }
.form-head h1 { font-family:var(--display); font-size:22px; letter-spacing:-.01em; margin:10px 0 0; color:var(--fg); }
.card-form { background:var(--surface); border:1px solid var(--border); border-radius:8px; padding:24px; box-shadow:var(--shadow-md); }
.card-form .field { margin-bottom:16px; }
.card-form label { display:block; font-size:13px; font-weight:600; color:var(--fg-2); margin-bottom:7px; }
.card-form input, .card-form select, .card-form textarea {
width:100%; font:inherit; font-size:14.5px; color:var(--fg); background:var(--surface);
border:1px solid var(--border-strong); border-radius:10px; padding:11px 13px; box-shadow:var(--shadow-sm);
}
.card-form textarea { resize:vertical; min-height:96px; }
.card-form input:focus, .card-form select:focus, .card-form textarea:focus {
outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--ring);
}
.card-form .hint { margin:6px 0 0; font-size:12px; color:var(--fg-3); }
.card-form .errors { list-style:none; margin:7px 0 0; padding:0; color:var(--danger-ink); font-size:12.5px; }
.form-actions { display:flex; gap:10px; align-items:center; margin-top:22px; }
.form-actions .btn-primary { width:auto; padding:11px 22px; }
/* ============================================================
LISTA ESTILO REDMINE (tabela empresarial)
============================================================ */
/* Páginas de conteúdo (listas, tabelas, painel) ocupam TODA a largura da área
central. O .ws-main é flex-column; sem zerar o margin auto o .page encolhe
pro tamanho do conteúdo. Formulários continuam com .narrow/.narrow-2. */
.page.wide, .page.full { max-width:none; margin-left:0; margin-right:0; }
.rm-wrap { overflow-x:auto; background:var(--surface); border:1px solid var(--border); border-radius:8px; box-shadow:var(--shadow-md); }
/* Tabela como um bloco só: filtro (topo) + tabela + pager (rodapé) dentro da
mesma borda. Só a tabela rola na horizontal; barra e rodapé ficam fixos. */
.rm-card { background:var(--surface); border:1px solid var(--border); border-radius:8px; box-shadow:var(--shadow-md); overflow:hidden; }
.rm-card .rm-scroll { overflow-x:auto; }
.rm-card table.rm { border:0; border-radius:0; box-shadow:none; }
.rm-card .rm-bar { padding:11px 14px; border-bottom:1px solid var(--border); margin:0; }
.rm-card .rm-foot { padding:11px 14px; border-top:1px solid var(--border); margin:0; }
.rm-empty-box { padding:24px 14px; color:var(--fg-3); font-size:13.5px; }
/* Barra de filtro clássica: rótulo em cima, uma linha só; rola na horizontal se apertar. */
.parc-detalhe .rm-bar { background:var(--surface-2); overflow-x:auto; }
.tf-row { display:flex; align-items:flex-end; gap:12px; flex-wrap:nowrap; min-width:max-content; }
.tf-f { display:flex; flex-direction:column; gap:5px; }
.tf-f.grow { flex:1 1 auto; min-width:170px; }
.tf-lbl { font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--fg-3); white-space:nowrap; }
.tf-inp, .tf-sel { font:inherit; font-size:13.5px; background:var(--surface); border:1px solid var(--border-strong); border-radius:8px; padding:8px 11px; outline:none; }
.tf-inp { color:var(--fg); width:100%; }
.tf-sel { color:var(--fg-2); cursor:pointer; white-space:nowrap; }
.tf-inp:focus, .tf-sel:focus { border-color:var(--accent); box-shadow:0 0 0 3px var(--ring); }
.tf-f:not(.grow) .tf-inp[type=search] { width:130px; }
.tf-inp[type=date] { min-width:150px; }
table.rm { border-collapse:collapse; width:100%; min-width:960px; font-size:13px; }
table.rm thead th { text-align:left; font-size:11px; text-transform:uppercase; letter-spacing:.04em;
color:var(--fg-3); font-weight:700; padding:11px 14px; border-bottom:1px solid var(--border);
background:var(--surface-2); white-space:nowrap; }
table.rm thead th a.sorth { color:var(--fg-3); text-decoration:none; }
table.rm thead th a.sorth:hover { color:var(--accent); }
table.rm tbody td { padding:12px 14px; border-bottom:1px solid var(--border); vertical-align:middle; white-space:nowrap; }
table.rm tbody tr:hover td { background:var(--surface-2); }
table.rm tbody tr:last-child td { border-bottom:0; }
.rm .c-id a { font-family:ui-monospace,"SF Mono","JetBrains Mono",Menlo,monospace; font-size:12px; color:var(--accent); text-decoration:none; }
.rm .c-id a:hover { text-decoration:underline; }
.rm .c-sub { white-space:normal; min-width:280px; max-width:560px; }
.rm .assunto { color:var(--fg); text-decoration:none; font-weight:500; }
.rm .assunto:hover { color:var(--accent); text-decoration:underline; }
.rm .c-upd { color:var(--fg-3); font-size:12px; font-variant-numeric:tabular-nums; }
.rm .who { display:inline-flex; align-items:center; gap:8px; color:var(--fg-2); }
.rm .who .av.sm { width:22px; height:22px; font-size:9px; box-shadow:none; }
.rm .muted { color:var(--fg-3); }
.rm-empty { text-align:center; color:var(--fg-3); padding:36px 14px !important; white-space:normal !important; }
.rm-count { color:var(--fg-3); font-size:12.5px; margin:12px 2px 0; }
/* Parceiro detalhe: alinhar as duas tabelas — mesma 1ª coluna e ações à direita,
números alinhados à direita. Sem table-layout:fixed pra não cortar versão/data. */
.parc-detalhe table.rm th:first-child, .parc-detalhe table.rm td:first-child { width:200px; }
.parc-detalhe table.rm th.acts, .parc-detalhe table.rm td.acts { width:130px; text-align:right; }
.parc-detalhe table.rm th.num, .parc-detalhe table.rm td.num { text-align:right; font-variant-numeric:tabular-nums; }
/* prioridade como rótulo colorido (estilo Redmine) */
.pr { display:inline-flex; align-items:center; gap:7px; font-weight:500; font-size:12.5px; color:var(--fg-2); white-space:nowrap; }
.pr i { width:7px; height:7px; border-radius:50%; flex:none; }
.pr-BAIXA i { background:#94a3b8; }
.pr-MEDIA i { background:#2563eb; }
.pr-ALTA i { background:#d97706; }
.pr-URGENTE i { background:#dc2626; }
.pr-ALTA { color:#b45309; font-weight:600; }
.pr-URGENTE { color:var(--danger); font-weight:700; }
/* assunto: elemento primário — leve destaque de peso/cor */
.rm .assunto { font-size:14px; }
.rm .c-id a { color:var(--fg-3); }
.rm .c-id a:hover { color:var(--accent); }
/* status como pílula */
.stl { font-size:11px; font-weight:700; padding:2.5px 9px; border-radius:999px; white-space:nowrap; }
.stl-BACKLOG { color:#475569; background:#eef1f5; }
.stl-A_FAZER { color:#1d4ed8; background:#e6efff; }
.stl-FAZENDO { color:#6d28d9; background:#f0eafe; }
.stl-REVISAO { color:#b45309; background:#fdf0dc; }
.stl-HOMOLOGACAO { color:#0e7490; background:#dff5fb; }
.stl-QA { color:#7c3aed; background:#f0eafe; }
.stl-APROVADA { color:#15803d; background:#e6f6ec; }
.stl-REPROVADA { color:#b91c1c; background:#fdeeee; }
.stl-BLOQUEADA { color:#b91c1c; background:#fdeeee; }
.stl-CONCLUIDA { color:#15803d; background:#e6f6ec; }
/* Painel de devolução + movimentações na timeline (fluxo/fórum da tarefa) */
.dev-panel { border-color:var(--accent-line); }
.dev-form { display:flex; flex-direction:column; gap:10px; }
.dev-row label { display:flex; flex-direction:column; gap:5px; font-size:12.5px; font-weight:600; color:var(--fg-2); }
.dev-form select, .dev-form textarea { font:inherit; font-size:13.5px; padding:8px 10px; border:1px solid var(--border-strong);
border-radius:8px; background:var(--surface); color:var(--fg); width:100%; box-sizing:border-box; }
.dev-hint { font-size:12px; color:var(--fg-2); margin:6px 0 0; padding:7px 10px; background:var(--surface-2);
border:1px solid var(--border); border-radius:8px; line-height:1.4; }
.dev-hint b { color:var(--accent); font-weight:700; }
.dev-actions { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.dev-actions .btn-primary { width:auto; padding:9px 18px; }
.cmt.mov .mov-verb { font-size:12px; font-weight:600; color:var(--accent); }
.cmt.mov.mov-REPROVAR .mov-verb { color:var(--danger-ink); }
.cmt.mov.mov-APROVAR .mov-verb { color:#15803d; }
.cmt.mov.mov-CONCLUIR .mov-verb { color:#15803d; }
.cmt.mov .cmt-h { display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.mov-check { list-style:none; margin:6px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:4px 12px; }
.mov-check li { font-size:12px; color:#15803d; }
.mono { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:12.5px; }
.commit-list { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:2px; }
.commit-list li { display:flex; align-items:baseline; gap:9px; padding:6px 8px; border-radius:7px; flex-wrap:wrap; }
.commit-list li:hover { background:var(--surface-2); }
.commit-sha { color:var(--accent); text-decoration:none; font-weight:600; flex:none; }
.commit-msg { flex:1; min-width:0; font-size:13px; }
.commit-meta { font-size:11.5px; flex:none; }
/* ---- Agrupar por + cabeçalhos de grupo ---- */
/* Barra de exibição: seções (rótulo em caixa-alta + pills) separadas por espaço
generoso, com o item ativo preenchido no accent (segmented control limpo). */
.groupbar { display:flex; align-items:center; gap:8px 20px; margin:0 0 12px; flex-wrap:wrap; }
.gsec { display:flex; align-items:center; gap:4px; flex-wrap:wrap; }
.groupbar .glabel { color:var(--fg-3); font-weight:700; font-size:10.5px; letter-spacing:.05em;
text-transform:uppercase; margin-right:5px; }
.gchip { font-size:12.5px; font-weight:500; color:var(--fg-2); text-decoration:none; padding:4px 10px;
border-radius:7px; border:1px solid transparent; transition:background .12s, color .12s; }
.gchip:hover { background:var(--surface-2); color:var(--fg); text-decoration:none; }
.gchip.on { background:var(--accent); color:#fff; border-color:var(--accent); font-weight:600; }
/* espaço em branco acima de cada grupo → projetos viram blocos separados */
.grp-row td { background:var(--surface) !important; padding:26px 14px 10px !important; white-space:nowrap;
border-top:0 !important; border-bottom:1px solid var(--border); }
.rm tbody tr.grp-row:first-child td { padding-top:12px !important; }
.grp { display:inline-flex; align-items:center; gap:9px; font-weight:700; font-size:13px; color:var(--fg);
letter-spacing:-.01em; }
.grp .gdot { width:9px; height:9px; border-radius:50%; flex:none; }
.grp .gn { font-size:11px; font-weight:600; color:var(--fg-3); background:var(--surface);
border:1px solid var(--border); border-radius:6px; padding:1px 8px; }
/* ---- densidade + realce de linha quente ---- */
.groupbar .gspace { flex:1; }
.rm.compact thead th { padding:8px 14px; }
.rm.compact tbody td { padding:6px 14px; }
.rm.compact .assunto { font-size:13px; }
.rm.compact .who .av.sm { width:20px; height:20px; }
/* linhas que pedem atenção: faixa à esquerda */
.rm tbody tr.hot td:first-child { box-shadow: inset 3px 0 0 0 var(--danger); }
.rm tbody tr.warn td:first-child { box-shadow: inset 3px 0 0 0 #d97706; }
/* ============================================================
DETALHE DA TAREFA
============================================================ */
.page.narrow-2 { max-width:960px; }
.det-top { display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.det-top .back { font-size:13px; color:var(--fg-3); text-decoration:none; }
.det-top .back:hover { color:var(--accent); }
.det-head { margin-bottom:18px; }
.det-head .id-badge { font-family:ui-monospace,"SF Mono","JetBrains Mono",Menlo,monospace;
font-size:12px; color:var(--fg-3); }
.det-head h1 { font-family:var(--display); font-size:24px; letter-spacing:-.02em; margin:4px 0 12px; color:var(--fg); }
.det-badges { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.det-grid { display:block; }
.det-main { display:flex; flex-direction:column; gap:18px; }
.card-block { background:var(--surface); border:1px solid var(--border-strong); border-radius:8px;
padding:20px; }
.card-block h3 { margin:0 0 14px; font-size:14px; letter-spacing:-.01em; display:flex; align-items:center; gap:8px; }
.card-block h3 .cnt { font-size:11.5px; font-weight:600; color:var(--fg-3); background:var(--surface-2);
border:1px solid var(--border); border-radius:999px; padding:1px 8px; }
.desc { color:var(--fg-2); line-height:1.6; }
.muted { color:var(--fg-3); }
.comments { display:flex; flex-direction:column; gap:14px; margin-bottom:16px; }
.cmt { display:flex; gap:11px; }
.cmt .av.sm { width:30px; height:30px; font-size:11px; flex:none; }
.cmt-body { flex:1; min-width:0; }
.cmt-h { display:flex; align-items:center; gap:9px; margin-bottom:3px; font-size:13px; }
.cmt-h b { color:var(--fg); }
.cmt-txt { color:var(--fg-2); line-height:1.55; font-size:14px; white-space:pre-wrap; }
.cmt-form textarea { width:100%; font:inherit; font-size:14px; color:var(--fg); background:var(--surface);
border:1px solid var(--border-strong); border-radius:10px; padding:11px 13px; box-shadow:var(--shadow-sm);
resize:vertical; min-height:70px; margin-bottom:10px; }
.cmt-form textarea:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--ring); }
.cmt-form .btn-primary { width:auto; padding:10px 20px; }
/* Detalhe da tarefa — card único estilo Redmine (assunto + atributos + descrição) */
.rm-head { display:flex; align-items:center; gap:12px; margin-bottom:12px; }
.rm-head h1 { font-family:var(--display); font-size:21px; letter-spacing:-.01em; color:var(--fg-2);
font-weight:700; margin:0; }
.rm-head .rm-hash { color:var(--fg-3); font-weight:600; }
.rm-issue { background:#f8f3e0; border:1px solid #e6dcbe; border-radius:10px;
padding:20px 22px; margin-bottom:20px; box-shadow:var(--shadow-sm); }
.rm-issue-top { display:flex; gap:14px; align-items:flex-start; }
.rm-icon { flex:none; width:42px; height:42px; border-radius:9px; color:#fff;
display:flex; align-items:center; justify-content:center; font-weight:800; font-size:14px;
letter-spacing:-.02em; box-shadow:inset 0 0 0 1px rgba(0,0,0,.06); }
.rm-issue-hd { min-width:0; }
.rm-subject { font-family:var(--display); font-size:19px; letter-spacing:-.01em; color:var(--fg);
margin:2px 0 5px; line-height:1.25; }
.rm-sub { font-size:12.5px; color:var(--fg-3); margin:0; }
.rm-sub a { color:var(--link); }
.rm-attrs { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 48px; margin:16px 0 2px; }
.rm-col { display:flex; flex-direction:column; }
.rm-attr { display:flex; align-items:baseline; gap:10px; padding:4px 0; font-size:13.5px; }
.rm-k { flex:none; width:130px; font-weight:700; color:var(--fg); }
.rm-k::after { content:":"; }
.rm-v { color:var(--fg-2); min-width:0; word-break:break-word; }
.rm-v .who { display:inline-flex; align-items:center; gap:8px; color:var(--link); }
.rm-v .who .av.sm { width:22px; height:22px; font-size:9px; box-shadow:none; }
.rm-div { border:0; border-top:1px solid #e9e2ca; margin:18px 0 14px; }
.rm-h-row { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:0 0 8px; }
.rm-h { font-family:var(--display); font-size:15px; color:var(--fg); margin:0; }
.rm-reply { font-size:12.5px; color:var(--link); font-weight:600; flex:none; cursor:pointer; }
.rm-issue .desc { color:var(--fg-2); line-height:1.6; }
/* blocos internos do card (Subtarefas / Relações) */
.rm-block-h { display:flex; align-items:center; gap:8px; font-size:14px; color:var(--fg); margin:0 0 8px; }
.rm-block-h b { font-weight:700; }
.rm-block-h .cnt { font-size:11.5px; font-weight:600; color:var(--fg-3);
background:rgba(0,0,0,.04); border:1px solid #e6dcbe; border-radius:999px; padding:1px 8px; }
.rm-block-h .rm-add { margin-left:auto; font-size:12.5px; color:var(--link); font-weight:600; }
.rm-issue .subrow:hover, .rm-issue .rel:hover { background:rgba(0,0,0,.03); }
/* barra de % terminado */
.rm-prog { display:inline-flex; align-items:center; gap:8px; }
.rm-prog-bar { display:inline-block; width:110px; height:9px; border-radius:999px;
background:#e7e0c8; overflow:hidden; vertical-align:middle; }
.rm-prog-bar i { display:block; height:100%; background:#7cb585; border-radius:999px; }
/* Fórum de notas (estilo Redmine) */
.forum { background:var(--surface); border:1px solid var(--border-strong); border-radius:8px;
padding:20px 22px 24px; margin-top:18px; }
.ftab-r { position:absolute; opacity:0; pointer-events:none; }
/* A régua agora é do cabeçalho inteiro: abas à esquerda, botão à direita. */
.forum-head { display:flex; align-items:center; gap:12px;
border-bottom:1px solid var(--border-strong); margin:-2px 0 2px; }
.forum-tabs { display:flex; flex-wrap:wrap; gap:4px; min-width:0; }
.ftab { font-size:12.5px; color:var(--fg-3); padding:7px 13px; border:1px solid transparent;
border-bottom:none; border-radius:8px 8px 0 0; cursor:pointer; margin-bottom:-1px; user-select:none; }
.ftab:hover { color:var(--fg-2); }
.forum:has(#ftab-hist:checked) label[for=ftab-hist],
.forum:has(#ftab-notas:checked) label[for=ftab-notas],
.forum:has(#ftab-campos:checked) label[for=ftab-campos] {
color:var(--fg); font-weight:700; background:var(--surface);
border-color:var(--border-strong); border-bottom-color:var(--surface); }
.forum:has(#ftab-notas:checked) .note:not(.k-nota) { display:none; }
.forum:has(#ftab-campos:checked) .note:not(.k-campo) { display:none; }
.notes { display:flex; flex-direction:column; }
.note { border-bottom:1px solid var(--border); padding-bottom:14px; margin-bottom:2px; }
.note-h { display:flex; align-items:center; gap:9px; background:var(--surface-2);
border:1px solid var(--border); border-radius:8px; padding:6px 10px; margin:14px 0 10px;
font-size:13px; color:var(--fg-2); }
.note-h .av.sm { width:24px; height:24px; font-size:9px; flex:none; box-shadow:none; }
.note-by { min-width:0; }
.note-by a { color:var(--link); font-weight:600; }
.note-n { margin-left:auto; color:var(--fg-3); font-weight:700; font-size:12.5px; flex:none; }
.note-body { padding-left:4px; }
.note-changes { margin:0 0 8px; padding-left:22px; list-style:disc; color:var(--fg-3); font-size:13px; }
.note-changes li { padding:1px 0; }
.note-changes b { color:var(--fg-2); font-weight:700; }
.note-changes i { color:var(--fg-2); font-style:italic; }
.note-txt { color:var(--fg); line-height:1.6; font-size:14px; white-space:pre-wrap; }
.note-form { margin-top:18px; }
.note-form .rm-h { margin:0 0 8px; }
.note-form textarea { width:100%; font:inherit; font-size:14px; color:var(--fg); background:var(--surface);
border:1px solid var(--border-strong); border-radius:10px; padding:11px 13px; box-shadow:var(--shadow-sm);
resize:vertical; min-height:80px; margin-bottom:10px; }
.note-form textarea:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--ring); }
.note-form .btn-primary { width:auto; padding:10px 20px; }
/* Formulário de tarefa — layout Redmine (label à esquerda, 2 colunas) */
.rm-form-card { background:var(--surface); border:1px solid var(--border-strong);
border-radius:var(--radius); padding:18px 24px; margin-bottom:16px; box-shadow:var(--shadow-sm); }
.rm-form .form-top-errors { margin-bottom:14px; }
.rf-row, .rm-form .field { display:grid; grid-template-columns:150px minmax(0,1fr); gap:16px;
align-items:center; padding:7px 0; }
.rf-row > label, .rm-form .field > label { text-align:right; font-size:13px; font-weight:600;
color:var(--fg-2); line-height:1.3; }
.rf-row.rf-top { align-items:start; }
.rf-row.rf-top > label { padding-top:9px; }
.req { color:#e5484d; font-weight:700; }
.rf-ctrl { min-width:0; }
.rf-ctrl.rf-narrow > select, .rf-ctrl.rf-narrow > input { max-width:240px; }
.rf-cols { display:grid; grid-template-columns:1fr 1fr; gap:0 44px; margin:4px 0; }
.rf-self { display:inline-flex; align-items:center; gap:6px; margin-top:8px; font-size:12.5px;
font-weight:500; color:var(--link); cursor:pointer; }
.rf-self input { width:auto !important; }
.rm-form input[type=text], .rm-form input[type=search], .rm-form input[type=date],
.rm-form input[type=number], .rm-form select, .rm-form textarea {
width:100%; font:inherit; font-size:14px; color:var(--fg); background:var(--surface);
border:1px solid var(--border-strong); border-radius:9px; padding:8px 11px;
box-shadow:var(--shadow-sm); }
.rm-form textarea { resize:vertical; min-height:150px; line-height:1.55; }
.rm-form input:focus, .rm-form select:focus, .rm-form textarea:focus {
outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--ring); }
.rm-form .hint { font-size:12px; color:var(--fg-3); margin:5px 0 0; }
.rm-form .field .hint { grid-column:2; margin-top:0; }
@media (max-width:820px){
.rf-cols { grid-template-columns:1fr; gap:0; }
}
@media (max-width:560px){
.rf-row, .rm-form .field { grid-template-columns:1fr; gap:5px; }
.rf-row > label, .rm-form .field > label { text-align:left; }
.rm-form .field .hint { grid-column:1; }
}
/* Editor visual (WYSIWYG) + barra de formatação Markdown */
.mdbar { display:flex; flex-wrap:wrap; align-items:center; gap:3px; padding:5px 6px;
background:var(--surface-2); border:1px solid var(--border-strong); border-bottom:none;
border-radius:9px 9px 0 0; }
.mdbar + textarea, .mdbar + .rte-body { border-top-left-radius:0 !important; border-top-right-radius:0 !important; }
.mdbar button { font:inherit; font-size:12.5px; line-height:1; color:var(--fg-2); background:transparent;
border:1px solid transparent; border-radius:6px; padding:5px 8px; cursor:pointer; min-width:28px; }
.mdbar button:hover { background:var(--surface); border-color:var(--border); color:var(--fg); }
.mdbar-sep { width:1px; height:16px; background:var(--border-strong); margin:0 3px; }
.rte-body { min-height:150px; font:inherit; font-size:14px; color:var(--fg); line-height:1.6;
background:var(--surface); border:1px solid var(--border-strong); border-top:none;
border-radius:0 0 9px 9px; padding:11px 13px; overflow-y:auto; box-shadow:var(--shadow-sm); }
.rte-body:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--ring); }
.rte-body:empty::before { content:attr(data-ph); color:var(--fg-3); pointer-events:none; }
.rte-body > :first-child { margin-top:0; }
.rte-body > :last-child { margin-bottom:0; }
.rte-body h1 { font-size:19px; font-family:var(--display); margin:12px 0 6px; }
.rte-body h2 { font-size:16px; font-family:var(--display); margin:12px 0 6px; }
.rte-body ul, .rte-body ol { padding-left:22px; margin:6px 0; }
.rte-body blockquote { margin:6px 0; padding:2px 12px; border-left:3px solid var(--border-strong);
color:var(--fg-2); }
.rte-body code { font-family:var(--mono); font-size:.9em; background:var(--surface-2);
border:1px solid var(--border); border-radius:5px; padding:1px 5px; }
.rte-body a { color:var(--link); }
/* a nota herda a mesma caixa do editor */
.note-form .rte-body { min-height:90px; }
.note-form .rte { margin-bottom:12px; }
/* Modal (sem JS — checkbox + label). O próprio .modal é o fundo escuro + rolável;
o card fica dentro. Assim é impossível "aparecer o fundo mas não o card". */
.modaltog { display:none; }
.dev-open { cursor:pointer; }
.modal { display:none; position:fixed; inset:0; z-index:9999; overflow-y:auto;
background:rgba(15,23,42,.45); }
.modaltog:checked ~ .modal { display:block; }
.modal-dismiss { position:fixed; inset:0; cursor:default; }
.modal-card { position:relative; z-index:1; width:calc(100% - 32px); max-width:560px; margin:5vh auto;
background:var(--surface); border:1px solid var(--border-strong); border-radius:16px;
box-shadow:0 24px 60px rgba(15,23,42,.28); }
.modal-head { display:flex; align-items:center; justify-content:space-between;
padding:15px 20px; border-bottom:1px solid var(--border); }
.modal-head h3 { margin:0; font-family:var(--display); font-size:16px; color:var(--fg); }
.modal-x { cursor:pointer; font-size:22px; line-height:1; color:var(--fg-3);
padding:2px 9px; border-radius:8px; user-select:none;
border:0; background:none; display:grid; place-items:center; width:34px; height:34px; }
.modal-x:hover { background:var(--surface-2); color:var(--fg); }
.modal .dev-form { display:flex; flex-direction:column; gap:0; }
.modal-body { padding:18px 20px; display:flex; flex-direction:column; gap:10px; }
.dev-actions.modal-foot { padding:13px 20px; border-top:1px solid var(--border); }
/* Markdown renderizado */
.md > :first-child { margin-top:0; }
.md > :last-child { margin-bottom:0; }
.md p { margin:0 0 10px; line-height:1.6; }
.md h1, .md h2, .md h3 { font-family:var(--display); line-height:1.25; margin:14px 0 8px; }
.md h1 { font-size:19px; } .md h2 { font-size:16px; } .md h3 { font-size:14.5px; }
.md ul, .md ol { margin:0 0 10px; padding-left:22px; }
.md li { margin:2px 0; }
.md code { font-family:var(--mono); font-size:.9em; background:var(--surface-2);
border:1px solid var(--border); border-radius:5px; padding:1px 5px; }
.md pre { background:var(--surface-2); border:1px solid var(--border); border-radius:8px;
padding:12px 14px; overflow-x:auto; margin:0 0 10px; }
.md pre code { background:none; border:none; padding:0; }
.md blockquote { margin:0 0 10px; padding:2px 14px; border-left:3px solid var(--border-strong);
color:var(--fg-2); }
.md a { color:var(--link); }
.md table { border-collapse:collapse; margin:0 0 10px; }
.md th, .md td { border:1px solid var(--border-strong); padding:5px 9px; font-size:13px; }
.note-txt.md { white-space:normal; }
@media (max-width:620px){
.rm-attrs { grid-template-columns:1fr; }
}
/* ---- timeline: atividade (mudanças) intercalada com comentários ---- */
.timeline { display:flex; flex-direction:column; gap:14px; margin-bottom:16px; }
.act { display:flex; align-items:flex-start; gap:11px; padding-left:5px; }
.act .act-dot { width:9px; height:9px; border-radius:50%; background:var(--border-strong);
margin-top:6px; flex:none; box-shadow:0 0 0 3px var(--surface-2); }
.act-body { font-size:13px; color:var(--fg-2); line-height:1.5; }
.act-body b { color:var(--fg); font-weight:600; }
.chip-old, .chip-new { font-size:12px; padding:1px 7px; border-radius:6px; font-weight:600; white-space:nowrap; }
.chip-old { color:var(--fg-3); background:var(--surface-2); border:1px solid var(--border); text-decoration:line-through; }
.chip-new { color:var(--accent); background:var(--accent-weak); border:1px solid color-mix(in srgb,var(--accent) 22%,transparent); }
/* ============================================================
PAINEL (dashboard)
============================================================ */
.kpis { display:grid; grid-template-columns:repeat(5,1fr); gap:14px; margin-bottom:16px; }
@media (max-width:900px){ .kpis { grid-template-columns:repeat(2,1fr); } }
.kpi { background:var(--surface); border:1px solid var(--border); border-radius:8px; padding:16px 18px; box-shadow:var(--shadow-sm); }
.kpi .lab { font-size:11px; text-transform:uppercase; letter-spacing:.05em; color:var(--fg-3); font-weight:600; }
.kpi .val { font-family:var(--display); font-size:30px; font-weight:700; letter-spacing:-.02em; margin-top:6px;
color:var(--fg); font-variant-numeric:tabular-nums; }
/* Sem cor de estado no número: os cards de KPI têm fundo sólido (ver "KPIs como
cards coloridos"), e estas regras — herdadas do desenho anterior, de cards
claros — têm especificidade maior que `.kpi .val`. Sobreviviam pintando verde
sobre vermelho no card de Concluídas. O estado quem diz é o rótulo. */
.grid2 { display:grid; grid-template-columns:1.25fr 1fr; gap:16px; }
@media (max-width:900px){ .grid2 { grid-template-columns:1fr; } }
.panel { background:var(--surface); border:1px solid var(--border); border-radius:8px; padding:20px; box-shadow:var(--shadow-md); }
.panel h3 { margin:0 0 18px; font-size:14px; letter-spacing:-.01em; display:flex; align-items:center; gap:8px; }
.panel h3 .cnt { font-size:11.5px; font-weight:600; color:var(--fg-3); background:var(--surface-2);
border:1px solid var(--border); border-radius:999px; padding:1px 8px; }
.barrow { display:flex; align-items:center; gap:12px; margin-bottom:13px; }
.barrow:last-child { margin-bottom:0; }
.barrow .nm { width:130px; flex:none; font-size:12.5px; color:var(--fg-2); display:flex; align-items:center; gap:7px;
white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.barrow .nm i { width:8px; height:8px; border-radius:3px; flex:none; }
.barrow .nm .av.sm { width:20px; height:20px; font-size:9px; }
.barrow .track { flex:1; height:22px; background:var(--surface-2); border-radius:6px; overflow:hidden; display:flex; }
.barrow .track span { height:100%; }
.barrow .tot { width:26px; text-align:right; flex:none; font-size:12.5px; color:var(--fg-3);
font-variant-numeric:tabular-nums; font-weight:600; }
.legend { display:flex; gap:14px; flex-wrap:wrap; margin-top:16px; padding-top:14px; border-top:1px solid var(--border);
font-size:11.5px; color:var(--fg-2); }
.legend i { width:9px; height:9px; border-radius:3px; display:inline-block; margin-right:5px; vertical-align:-1px; }
.atencao { display:flex; flex-direction:column; }
.at-row { display:flex; align-items:center; gap:12px; padding:11px 6px; border-top:1px solid var(--border);
text-decoration:none; color:var(--fg); }
.atencao .at-row:first-child { border-top:0; }
.at-row:hover { background:var(--surface-2); text-decoration:none; }
.at-row .id { font-family:ui-monospace,"SF Mono",Menlo,monospace; font-size:11px; color:var(--fg-3); flex:none; }
.at-row .at-title { flex:1; font-size:13.5px; font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.at-row .av.sm.none { background:var(--surface-2); color:var(--fg-3); border:1px dashed var(--border-strong); }
@media (max-width:720px){ .at-row .tag-proj { display:none; } }
/* ============================================================
WIKI
============================================================ */
.wiki-item { display:flex; align-items:center; justify-content:space-between; gap:14px;
padding:14px 16px; border-top:1px solid var(--border); text-decoration:none; color:var(--fg); }
.wiki-list .wiki-item:first-child { border-top:0; }
.wiki-item:hover { background:var(--surface-2); text-decoration:none; }
.wi-title { font-weight:600; font-size:14.5px; }
.wi-meta { font-size:12px; color:var(--fg-3); white-space:nowrap; }
.wiki-h1 { font-family:var(--display); font-size:26px; letter-spacing:-.02em; margin:0 0 4px; color:var(--fg); }
.wiki-meta { color:var(--fg-3); font-size:12.5px; margin:0 0 20px; }
/* prosa (markdown renderizado) */
.prose { color:var(--fg-2); line-height:1.75; font-size:15.5px; }
.prose > :first-child { margin-top:0; }
.prose h1,.prose h2,.prose h3,.prose h4 { color:var(--fg); font-family:var(--display);
letter-spacing:-.015em; line-height:1.25; scroll-margin-top:84px; }
.prose h1 { font-size:24px; margin:1.6em 0 .5em; font-weight:700; }
.prose h2 { font-size:20px; font-weight:700; margin:2.4em 0 .7em; padding-top:1.3em;
border-top:1px solid var(--border); }
.prose > h2:first-child { margin-top:0; padding-top:0; border-top:0; }
.prose h3 { font-size:16px; font-weight:600; margin:1.9em 0 .5em; }
.prose h4 { font-size:14px; font-weight:600; margin:1.5em 0 .4em; }
.prose p { margin:.75em 0; }
.prose ul,.prose ol { margin:.65em 0; padding-left:1.4em; }
.prose li { margin:.28em 0; }
.prose a { color:var(--accent); }
.prose strong { color:var(--fg); }
.prose code { font-family:ui-monospace,"SF Mono",Menlo,monospace; font-size:.88em;
background:var(--surface-2); border:1px solid var(--border); border-radius:5px; padding:1px 5px; }
.prose pre { background:var(--surface-2); border:1px solid var(--border); border-radius:10px;
padding:14px; overflow-x:auto; }
.prose pre code { background:none; border:0; padding:0; }
.prose blockquote { border-left:3px solid var(--border-strong); margin:.9em 0; padding:2px 14px; color:var(--fg-3); }
.prose table { border-collapse:collapse; margin:.9em 0; font-size:14px; }
.prose th,.prose td { border:1px solid var(--border); padding:6px 11px; text-align:left; }
.prose th { background:var(--surface-2); }
/* ---- anexos ---- */
.anexos { display:flex; flex-direction:column; gap:8px; margin-bottom:14px; }
.anexo { display:flex; align-items:center; gap:10px; padding:10px 12px; border:1px solid var(--border);
border-radius:10px; text-decoration:none; color:var(--fg); background:var(--surface-2); }
.anexo:hover { border-color:var(--accent); background:var(--accent-weak); text-decoration:none; }
.anexo svg { width:18px; height:18px; color:var(--accent); flex:none; }
.anexo .an-nome { font-weight:500; font-size:13.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.anexo .an-meta { margin-left:auto; font-size:11.5px; color:var(--fg-3); white-space:nowrap; }
.anexo-form { display:flex; align-items:center; gap:10px; }
.anexo-form input[type="file"] { font:inherit; font-size:13px; color:var(--fg-2); flex:1; min-width:0; }
.anexo-form input[type="file"]::file-selector-button { font:inherit; font-size:12.5px; font-weight:600;
color:var(--fg-2); background:var(--surface); border:1px solid var(--border-strong); border-radius:8px;
padding:7px 12px; margin-right:10px; cursor:pointer; }
.anexo-form input[type="file"]::file-selector-button:hover { border-color:var(--accent); color:var(--accent); }
/* ---- subtarefas + pai ---- */
.parent-of { margin:12px 0 0; font-size:13px; color:var(--fg-3); }
.parent-of a { color:var(--accent); }
.subtarefas { display:flex; flex-direction:column; gap:7px; margin-bottom:14px; }
.subrow { display:flex; align-items:center; gap:10px; padding:9px 12px; border:1px solid var(--border);
border-radius:9px; text-decoration:none; color:var(--fg); background:var(--surface-2); }
.subrow:hover { border-color:var(--accent); background:var(--accent-weak); text-decoration:none; }
.subrow .s-id { font-family:ui-monospace,Menlo,monospace; font-size:11px; color:var(--fg-3); flex:none; }
.subrow .s-title { flex:1; font-size:13.5px; font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.subrow .s-title.done { text-decoration:line-through; color:var(--fg-3); }
/* ============================================================
MW5 WORKSPACE — casca (sidebar + topbar)
============================================================ */
/* Shell estilo TaskFlow: sidebar branca, ícones em tile colorido, ativo em pill azul */
.app { display:grid; grid-template-columns:262px 1fr; min-height:100dvh; }
/* Rail (página inicial) = DRAWER lateral sem JS (checkbox + label). Começa fechada. */
.railtog { display:none; }
.railbtn { display:inline-flex; align-items:center; gap:8px; height:38px; padding:0 14px; border-radius:11px;
border:1px solid var(--border-strong); background:var(--surface); color:var(--fg-2); font-size:12.5px; font-weight:700; cursor:pointer; }
.railbtn:hover { background:var(--surface-2); border-color:var(--fg-3); }
.railbtn .ham { width:16px; height:12px; display:flex; flex-direction:column; justify-content:space-between; flex:none; }
.railbtn .ham i { display:block; height:2px; border-radius:2px; background:var(--accent); }
.rail-backdrop { position:fixed; inset:0; z-index:55; background:rgba(15,23,42,.30);
opacity:0; visibility:hidden; transition:opacity .2s; }
.ws-rail { position:fixed; top:0; right:0; height:100dvh; width:340px; max-width:88vw; z-index:60;
transform:translateX(100%); transition:transform .26s cubic-bezier(.4,0,.2,1);
background:var(--surface); border-left:1px solid var(--border); box-shadow:-16px 0 44px rgba(15,23,42,.14);
padding:22px 20px; display:flex; flex-direction:column; gap:24px; overflow-y:auto; }
.railtog:checked ~ .ws-rail { transform:translateX(0); }
.railtog:checked ~ .rail-backdrop { opacity:1; visibility:visible; }
/* Menu global = gaveta abaixo de 900px (mesma mecânica do rail, sem JS). O
botão só aparece na faixa estreita; no desktop o menu é coluna fixa. */
.navtog { display:none; }
.navbtn { display:none; align-items:center; justify-content:center; width:38px; height:38px; flex:none;
border:1px solid var(--border-strong); border-radius:11px; background:var(--surface); cursor:pointer; }
.navbtn:hover { background:var(--surface-2); border-color:var(--fg-3); }
.navbtn .ham { width:16px; height:12px; display:flex; flex-direction:column; justify-content:space-between; flex:none; }
.navbtn .ham i { display:block; height:2px; border-radius:2px; background:var(--accent); }
.nav-backdrop { position:fixed; inset:0; z-index:55; background:rgba(15,23,42,.30);
opacity:0; visibility:hidden; transition:opacity .2s; }
.ws-side { background:var(--sidebar); border-right:1px solid var(--border); display:flex;
flex-direction:column; position:sticky; top:0; height:100dvh; overflow-y:auto; padding:6px 14px 14px; }
.ws-brand { display:flex; align-items:center; justify-content:center; gap:10px; padding:20px 6px 20px; text-decoration:none; color:var(--fg); }
.ws-brand .ws-logo { width:100%; max-width:210px; height:auto; display:block; margin:0 auto; }
.ws-brand b { font-weight:800; letter-spacing:-.2px; font-size:14.5px; line-height:1.1; }
.ws-brand small { display:block; color:var(--fg-3); font-size:10.5px; font-weight:500; }
.ws-nav { padding:0; display:flex; flex-direction:column; gap:2px; }
.ws-nav .grp { font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:.9px;
color:#a3aab8; padding:20px 10px 7px; }
.ws-nav a { display:flex; align-items:center; gap:11px; padding:8px 10px; border-radius:11px;
color:var(--fg-2); font-weight:600; font-size:13.5px; text-decoration:none; }
/* tiles neutros (corporativo); só o item ativo fica azul */
.ws-nav a svg { width:24px; height:24px; padding:5px; border-radius:7px; background:var(--surface-2); stroke:var(--fg-3); fill:none;
stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; flex:none; }
.ws-nav a:hover { background:var(--surface-2); color:var(--fg); text-decoration:none; }
.ws-nav a:hover svg { background:var(--muted); stroke:var(--fg-2); }
.ws-nav a.on { background:var(--accent); color:#fff; box-shadow:var(--shadow-raise); }
.ws-nav a.on svg { background:rgba(255,255,255,.22); stroke:#fff; }
.ws-nav a .badge { margin-left:auto; font-size:11px; font-weight:700; color:var(--fg-3); background:transparent;
border:0; border-radius:0; padding:0; line-height:1; }
.ws-nav a.on .badge { color:rgba(255,255,255,.85); }
.ws-me { margin-top:auto; border:1px solid var(--border); background:var(--surface-2); border-radius:14px;
padding:10px; display:flex; align-items:center; gap:10px; }
.ws-av { width:32px; height:32px; border-radius:50%; background:var(--accent); color:#fff; display:grid;
place-items:center; font-size:12px; font-weight:700; flex:none; }
.ws-me .nm { font-size:12.5px; font-weight:700; line-height:1.15; min-width:0; }
.ws-me .nm span { display:block; color:var(--fg-3); font-size:10.5px; font-weight:600; }
.ws-mewho { flex:1; min-width:0; display:flex; align-items:center; gap:10px; text-decoration:none; color:inherit; }
.ws-mewho:hover { text-decoration:none; }
.ws-mewho:hover .nm { color:var(--accent); }
.ws-mewho .nm { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ws-main { display:flex; flex-direction:column; min-width:0; }
.ws-top { position:sticky; top:0; z-index:20; background:color-mix(in srgb,var(--bg) 86%, transparent);
backdrop-filter:blur(10px); border-bottom:1px solid var(--border); display:flex; align-items:center; gap:14px; padding:14px 26px; }
.ws-crumb { display:flex; align-items:center; min-width:0; font-size:13px; color:var(--fg-3); }
.ws-crumb > * + *::before { content:"›"; margin:0 8px; color:var(--fg-3); opacity:.55; font-weight:400; }
.ws-crumb a { color:var(--fg-3); font-weight:600; text-decoration:none; white-space:nowrap; }
.ws-crumb a:hover { color:var(--fg); text-decoration:underline; }
.ws-crumb b { color:var(--fg); font-weight:700; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* min-width:0 nos dois: sem isso o input guarda a largura padrão dele e a
barra inteira ganha um mínimo de ~448px — mais que a tela de um celular. */
.ws-search { margin-left:8px; flex:1; min-width:0; max-width:440px; display:flex; align-items:center; gap:9px;
background:var(--surface); border:1px solid var(--border-strong); border-radius:11px; padding:9px 14px; color:var(--fg-3); }
.ws-search svg { width:15px; height:15px; stroke:currentColor; fill:none; stroke-width:1.9; }
.ws-search input { border:0; background:transparent; font:inherit; font-size:13px; color:var(--fg); flex:1; min-width:0; outline:none; }
.ws-top .spacer { flex:1; }
@media (max-width:560px){
.ws-top { gap:9px; padding:12px 14px; }
.ws-crumb { display:none; } /* o título da página repete logo abaixo */
.ws-search { margin-left:0; padding:8px 11px; }
/* "Ações" encolhe, mas mantém o rótulo: dois botões de três traços lado a
lado (menu e ações) ficariam indistinguíveis. */
.railbtn { padding:0 10px; font-size:11.5px; gap:6px; }
}
/* Flash messages (feedback de ação) */
.flash-wrap { padding:14px 24px 0; display:flex; flex-direction:column; gap:8px; }
.flash { font-size:13px; padding:10px 14px; border-radius:8px; border:1px solid;
display:flex; align-items:center; gap:8px; }
.flash::before { font-weight:700; }
.flash-success { color:#15803d; background:#e9f7ef; border-color:#bfe6cd; }
.flash-success::before { content:"✓"; }
.flash-error, .flash-danger { color:#b42318; background:#fbeef0; border-color:#f3c9cf; }
.flash-error::before, .flash-danger::before { content:"!"; }
.flash-warning { color:#b45309; background:#fdf4e6; border-color:#f3ddb0; }
.flash-info { color:#1d4ed8; background:#eaf0ff; border-color:#c9d8f7; }
/* Páginas de erro (403/404/500) */
.err-standalone { min-height:100vh; display:grid; place-items:center; padding:24px; }
.err-card { max-width:460px; margin:8vh auto 0; text-align:center; padding:32px 28px; }
.err-card .err-code { font-size:52px; font-weight:800; color:var(--border); line-height:1; letter-spacing:-1px; }
.err-card h1 { margin:10px 0 8px; font-size:20px; }
.err-card p { color:var(--fg-2); font-size:14px; line-height:1.55; margin-bottom:20px; }
/* Anexo com botão de remover ao lado; ações inline em Arquivos */
.anexo-row { display:flex; align-items:center; gap:6px; }
.anexo-row .anexo { flex:1; }
td.acts { display:flex; gap:12px; align-items:center; }
td.acts .lnk.danger-tx { background:none; border:0; cursor:pointer; font:inherit; padding:0; }
/* Automações — chips de status por repo */
.repo-chips { display:grid; grid-template-columns:repeat(auto-fill,minmax(min(240px,100%),1fr)); gap:12px; }
.repo-chip { display:block; padding:13px 15px; border:1px solid var(--border); border-radius:10px;
background:var(--surface); text-decoration:none; color:inherit; }
.repo-chip:hover { border-color:var(--accent); }
.rc-top { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.rc-nome { font-weight:600; font-size:14px; }
.rc-sub { font-size:11.5px; margin-top:5px; }
/* Monitoramento — faixa de uptime (quadradinhos) */
.spark { display:inline-flex; gap:2px; align-items:center; }
.spark .sq { width:8px; height:14px; border-radius:2px; display:inline-block; }
.sq-ok { background:#22c55e; }
.sq-bad { background:#ef4444; }
/* Configurações — perfil + senha lado a lado */
/* ===== Minha conta (perfil profissional, tempo real) ===== */
.prof-hero { display:flex; align-items:center; gap:18px; background:var(--surface);
border:1px solid var(--border-strong); border-radius:16px; padding:20px 24px;
box-shadow:var(--shadow-sm); margin-bottom:18px; position:relative; overflow:hidden; }
.prof-hero::before { content:""; position:absolute; inset:0 auto 0 0; width:5px;
background:linear-gradient(180deg,var(--accent),color-mix(in srgb,var(--accent) 55%,var(--c-violet))); }
.prof-hero-av { flex:none; }
.prof-hero-txt { min-width:0; }
.prof-hero-txt h1 { font-family:var(--display); font-size:22px; letter-spacing:-.01em; margin:0 0 3px; color:var(--fg); }
.prof-hero-sub { margin:0; font-size:13px; color:var(--fg-3); display:flex; align-items:center;
gap:8px; flex-wrap:wrap; }
.prof-role { font-size:11px; font-weight:700; color:var(--accent-hi); background:var(--accent-weak);
border-radius:999px; padding:2px 10px; }
.prof-hero-hint { margin-left:auto; font-size:11.5px; font-weight:600; color:var(--ok);
background:var(--ok-bg); border-radius:999px; padding:4px 11px; flex:none; align-self:flex-start; }
.prof-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; align-items:start; }
.prof-grid .prof-full { grid-column:1 / -1; }
@media (max-width:820px){ .prof-grid { grid-template-columns:1fr; } }
.prof-card-h { display:flex; align-items:center; gap:10px; margin:0 0 14px; }
.prof-card-h h3 { margin:0; }
.prof-flash { font-size:12px; font-weight:700; color:var(--ok); background:var(--ok-bg);
border-radius:999px; padding:2px 10px; animation:profpop .28s ease; }
@keyframes profpop { from{opacity:0; transform:translateY(-3px) scale(.96)} to{opacity:1; transform:none} }
.prof-form { display:flex; flex-direction:column; gap:14px; }
.prof-form .field { display:flex; flex-direction:column; gap:6px; }
.prof-form .field > label { font-size:12.5px; font-weight:600; color:var(--fg-2); }
.prof-form input[type=text], .prof-form input[type=password], .prof-form select {
width:100%; font:inherit; font-size:14px; color:var(--fg); background:var(--surface);
border:1px solid var(--border-strong); border-radius:9px; padding:9px 11px; box-shadow:var(--shadow-sm); }
.prof-form input:focus, .prof-form select:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--ring); }
.prof-form .hint { font-size:11.5px; color:var(--fg-3); margin:0; }
.prof-form .errors { margin:2px 0 0; }
.prof-actions { display:flex; align-items:center; gap:12px; margin-top:2px; }
/* controle de foto */
.prof-photo { display:flex; align-items:center; gap:16px; }
.prof-photo-av { flex:none; }
.prof-av { width:64px !important; height:64px !important; font-size:22px !important; border-radius:50%; }
.prof-av-xl { width:76px !important; height:76px !important; font-size:26px !important; border-radius:50%; }
.prof-photo-ctl { min-width:0; display:flex; flex-direction:column; gap:6px; align-items:flex-start; }
.sr-file { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
.prof-photo-rm { display:inline-flex; align-items:center; gap:6px; font-size:12px; color:var(--fg-3); cursor:pointer; }
.prof-photo-rm input { width:auto; }
/* Meu Dia — briefing pessoal */
.dia-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(min(320px,100%),1fr)); gap:14px; align-items:start; }
.dia-grid .dia-wide { grid-column:1 / -1; }
.dia-alerta { border-color:#f3c9cf; background:#fdf6f7; }
.dia-item { display:flex; align-items:center; gap:9px; padding:8px 6px; border-top:1px solid var(--border);
text-decoration:none; color:inherit; font-size:13px; }
.dia-item:first-of-type { border-top:0; }
.dia-item:hover { background:var(--muted); border-radius:6px; }
.dia-more { display:inline-block; margin-top:9px; font-size:12.5px; font-weight:600; color:var(--accent); text-decoration:none; }
.dia-more:hover { text-decoration:underline; }
.di-cod { font-family:ui-monospace,Menlo,monospace; font-size:11.5px; color:var(--fg-3); flex:none; }
.di-hora { font-weight:700; font-size:12px; flex:none; }
/* min-width:0 junto do nowrap: sem ele o título inteiro vira largura mínima
do item e empurra a página (a busca estourava por causa disto). */
.di-tit { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sec-div { font-size:13px; font-weight:600; color:var(--fg-3); text-transform:uppercase;
letter-spacing:.4px; margin:24px 0 12px; padding-top:16px; border-top:1px solid var(--border); }
.ws-icbtn { width:38px; height:38px; border-radius:11px; border:1px solid var(--border-strong); background:var(--surface);
display:grid; place-items:center; color:var(--fg-2); cursor:pointer; position:relative; }
.ws-icbtn:hover { background:var(--surface-2); border-color:var(--fg-3); }
.ws-icbtn svg { width:17px; height:17px; stroke:currentColor; fill:none; stroke-width:1.9; }
.ws-icbtn .dot { position:absolute; top:-3px; right:-3px; min-width:16px; height:16px; padding:0 3px;
border-radius:9px; background:var(--danger); color:#fff; font-size:10px; font-weight:700;
display:flex; align-items:center; justify-content:center; border:2px solid var(--surface); }
/* Notificações */
.notif-list { display:flex; flex-direction:column; gap:6px; }
.notif { display:flex; align-items:center; gap:12px; padding:11px 14px; border:1px solid var(--border);
border-radius:9px; background:var(--surface); text-decoration:none; color:var(--fg); }
.notif:hover { border-color:var(--accent); }
.notif.unread { background:var(--accent-weak); border-color:var(--accent-line); }
.notif-mark { width:8px; height:8px; border-radius:50%; flex:none; background:transparent; }
.notif.unread .notif-mark { background:var(--accent); }
.notif.unread.nv-URGENTE .notif-mark { background:var(--danger); }
.notif-body { flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.notif-body b { font-weight:600; font-size:14px; }
.notif-txt { font-size:12.5px; color:var(--fg-2); }
.notif-when { flex:none; font-size:12px; color:var(--fg-3); }
/* Faixa estreita: uma coluna só, e o menu passa a deslizar por cima do
conteúdo. Antes ele era escondido sem substituto — não havia como navegar. */
@media (max-width:900px){
.app, .app.has-rail { grid-template-columns:1fr; }
.ws-side { position:fixed; top:0; left:0; width:280px; max-width:86vw; z-index:60;
transform:translateX(-100%); transition:transform .26s cubic-bezier(.4,0,.2,1);
box-shadow:16px 0 44px rgba(15,23,42,.14); }
.navtog:checked ~ .ws-side { transform:translateX(0); }
.navtog:checked ~ .nav-backdrop { opacity:1; visibility:visible; }
.navbtn { display:inline-flex; }
}
@media (prefers-reduced-motion:reduce){
.ws-side { transition:none; }
}
/* ---- Projetos: equipe + progresso ---- */
.team { display:inline-flex; }
.team .av { width:24px; height:24px; font-size:9.5px; border:2px solid var(--surface); margin-left:-6px; box-shadow:none; }
.team .av:first-child { margin-left:0; }
.prog-cell { display:flex; align-items:center; gap:9px; min-width:130px; }
.prog-bar { flex:1; height:6px; border-radius:4px; background:var(--muted); overflow:hidden; max-width:130px; }
.prog-bar > span { display:block; height:100%; border-radius:4px; background:var(--accent); }
.prog-pct { font-size:12px; color:var(--fg-3); width:34px; text-align:right; font-variant-numeric:tabular-nums; }
/* ---- placeholder "em breve" ---- */
.ph-card { background:var(--surface); border:1px dashed var(--border-strong); border-radius:8px;
padding:60px 24px; text-align:center; margin-top:8px; }
.ph-ic { width:48px; height:48px; border-radius:8px; background:var(--accent-weak); color:var(--accent);
display:grid; place-items:center; margin:0 auto 16px; }
.ph-ic svg { width:23px; height:23px; }
.ph-card h2 { font-size:19px; letter-spacing:-.01em; margin:0 0 8px; color:var(--fg); }
.ph-card p { margin:0 auto; max-width:56ch; color:var(--fg-2); }
/* ---- PRs / GitHub ---- */
.rm .lnk { color:var(--accent); font-weight:600; }
.ph-card code, .card-form .hint code, .prose-inline code { font-family:ui-monospace,Menlo,monospace;
font-size:.88em; background:var(--muted); border:1px solid var(--border); border-radius:5px; padding:1px 6px; color:var(--fg-2); }
/* ---- Reuniões ---- */
.sec-h { font-size:12px; text-transform:uppercase; letter-spacing:.05em; color:var(--fg-3); font-weight:700; margin:20px 0 10px; }
.reuni-list { display:flex; flex-direction:column; gap:8px; }
.reuni { display:flex; align-items:center; gap:14px; padding:11px 14px; background:var(--surface);
border:1px solid var(--border); border-radius:10px; text-decoration:none; color:var(--fg); }
.reuni:hover { border-color:var(--accent); text-decoration:none; }
.reuni.past { opacity:.92; }
/* calendar chip (mesma linguagem do detalhe) */
.reuni-cal { width:44px; flex:none; text-align:center; border:1px solid var(--border);
border-radius:9px; overflow:hidden; }
.reuni-cal .m { display:block; background:var(--accent); color:#fff; font-size:9px; font-weight:700;
text-transform:uppercase; letter-spacing:.05em; padding:2px 0; }
.reuni-cal .dd { display:block; font-size:17px; font-weight:800; line-height:1; padding:5px 0; color:var(--fg); }
.reuni-body { flex:1; min-width:0; }
.reuni-body b { font-weight:600; font-size:14.5px; display:block; }
.reuni-meta { display:flex; flex-wrap:wrap; align-items:center; gap:7px 10px; margin-top:5px;
color:var(--fg-3); font-size:12.5px; }
.reuni-team { flex:none; display:flex; }
.reuni-team .av.sm { margin-left:-6px; border:2px solid var(--surface); }
.reuni-team .av.sm:first-child { margin-left:0; }
/* ---- Reunião: detalhe (hero + calendário + ata) ---- */
.rd-hero { display:flex; align-items:center; gap:18px; background:var(--surface);
border:1px solid var(--border); border-left:3px solid var(--accent); border-radius:14px;
padding:18px 22px; margin-bottom:16px; }
.rd-cal { width:62px; flex:none; text-align:center; border:1px solid var(--border);
border-radius:12px; overflow:hidden; background:var(--surface); }
.rd-cal .m { background:var(--accent); color:#fff; font-size:11px; font-weight:700;
text-transform:uppercase; letter-spacing:.06em; padding:3px 0; }
.rd-cal .d { font-size:26px; font-weight:800; line-height:1; padding:8px 0 2px; color:var(--fg); }
.rd-cal .wd { font-size:10px; color:var(--fg-3); text-transform:uppercase; letter-spacing:.04em; padding-bottom:7px; }
.rd-head { flex:1; min-width:0; }
.rd-head h1 { font-family:var(--display); font-size:23px; letter-spacing:-.02em; margin:0 0 9px; color:var(--fg); }
.rd-meta { display:flex; flex-wrap:wrap; gap:8px 12px; align-items:center; color:var(--fg-3); font-size:13px; text-transform:capitalize; }
.rd-meta .muted, .rd-meta .tag-proj { text-transform:none; }
.rd-pill { font-size:11px; font-weight:700; padding:3px 11px; border-radius:999px; text-transform:none; }
.rd-pill.next { background:var(--accent-weak); color:var(--accent); }
.rd-pill.done { background:var(--muted); color:var(--fg-2); }
.rd-recorr { font-size:12px; color:var(--accent); font-weight:600; }
.rd-attendees { flex:none; max-width:230px; padding-left:20px; border-left:1px solid var(--border); align-self:stretch; display:flex; flex-direction:column; justify-content:center; }
.rd-label { font-size:11px; text-transform:uppercase; letter-spacing:.04em; color:var(--fg-3); font-weight:700; margin-bottom:10px; }
.rd-people { display:flex; flex-direction:column; gap:8px; }
.rd-person { display:flex; align-items:center; gap:8px; font-size:13px; color:var(--fg-2); }
.rd-body { display:grid; grid-template-columns:1fr 1fr; gap:16px; align-items:stretch; }
.rd-body .card-block { display:flex; flex-direction:column; }
/* form dentro de um card meia-largura vai em coluna única (não o grid 2-col) */
.rd-body .card-form { display:block; box-shadow:none; border:0; padding:0; }
.rd-body .ata-empty { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.rd-foot { color:var(--fg-3); font-size:12.5px; margin:16px 2px 0; }
.ata-empty { border:1px dashed var(--border-strong); border-radius:10px; padding:22px;
text-align:center; color:var(--fg-3); }
.ata-empty p { margin:0 0 12px; font-size:13.5px; }
/* itens de ação */
.ia-block { margin-top:16px; }
.ia-list { display:flex; flex-direction:column; }
.ia-row { display:flex; align-items:center; gap:14px; padding:10px 2px; border-top:1px solid var(--border); }
.ia-row:first-child { border-top:0; }
.ia-desc { flex:1; font-size:14px; color:var(--fg); }
.ia-acts { display:flex; align-items:center; gap:10px; margin-left:auto; }
.tag-tarefa { font-family:ui-monospace,Menlo,monospace; font-size:12px; font-weight:600;
color:var(--accent); background:var(--accent-weak); padding:3px 9px; border-radius:6px; }
.ia-x { background:none; border:0; color:var(--fg-3); font-size:18px; line-height:1; cursor:pointer; padding:0 4px; }
.ia-x:hover { color:var(--danger); }
.ia-add { display:flex; gap:10px; margin-top:14px; padding-top:14px; border-top:1px solid var(--border); }
.ia-add input[type=text] { flex:1; font:inherit; font-size:14px; color:var(--fg); background:var(--surface);
border:1px solid var(--border-strong); border-radius:8px; padding:8px 11px; }
.ia-add input[type=text]:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--ring); }
.ia-add select { font:inherit; font-size:13px; border:1px solid var(--border-strong); border-radius:8px; padding:8px 10px; background:var(--surface); color:var(--fg); }
@media (max-width:760px){
.rd-body { grid-template-columns:1fr; }
.rd-hero { flex-wrap:wrap; }
.rd-attendees { border-left:0; padding-left:0; max-width:none; }
}
/* participantes (checkbox multiple) */
.card-form ul[id$="participantes"] { list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:9px 18px; }
.card-form ul[id$="participantes"] li label { display:flex; align-items:center; gap:7px; font-weight:500; color:var(--fg-2); cursor:pointer; }
.card-form ul[id$="participantes"] li label input { width:auto; box-shadow:none; }
/* Colaboradores da tarefa: checkboxes em vez do multi-select nativo. Bloco
próprio porque o form de tarefa usa .rf-ctrl, não .card-form.
Sem JS: lista simples (flex). Com JS (.colab-lista): caixa rolável em grade +
campo de busca — escala pra centenas de pessoas sem virar um paredão. */
[id$="colaboradores"] { list-style:none; margin:6px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:8px 16px; }
[id$="colaboradores"] > div { margin:0; }
[id$="colaboradores"] label { display:flex; align-items:center; gap:7px; font-size:13.5px; font-weight:500; color:var(--fg-2); cursor:pointer; }
[id$="colaboradores"] label input { width:auto; margin:0; box-shadow:none; accent-color:var(--accent); }
.colab-picker { margin-top:6px; }
.colab-busca {
width:100%; max-width:320px; margin-bottom:8px; padding:8px 11px;
font:inherit; font-size:13.5px; color:var(--fg); background:var(--surface);
border:1px solid var(--border-strong); border-radius:8px; box-shadow:var(--shadow-sm);
}
.colab-busca:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--ring); }
[id$="colaboradores"].colab-lista {
display:grid; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:8px 14px;
max-height:200px; overflow-y:auto; margin:0; padding:10px 12px;
border:1px solid var(--border); border-radius:8px; background:var(--surface);
}
/* ---- Widget "Alocados": toggle pessoa/grupo + chips + busca ----
Sem JS: `.alocados-fallback` aparece (os três campos reais empilhados).
Com JS: `[data-alocados].js-on` esconde o fallback e mostra `.alocados-ui`. */
.rf-sub { margin-bottom:12px; }
.rf-sub > label { display:block; font-weight:500; color:var(--fg-3); font-size:11px;
text-transform:uppercase; letter-spacing:.04em; margin-bottom:5px; }
[data-alocados].js-on [data-fallback] { display:none; }
.alocados-toggle { display:inline-flex; padding:3px; gap:3px; margin-bottom:10px;
background:var(--surface-2); border:1px solid var(--border); border-radius:999px; }
.alocados-toggle button { font:inherit; font-size:12.5px; font-weight:600; color:var(--fg-2);
background:transparent; border:0; border-radius:999px; padding:5px 16px; cursor:pointer; }
.alocados-toggle button.on { color:var(--accent-ink); background:var(--accent); box-shadow:var(--shadow-sm); }
.alocados-chips { display:flex; flex-wrap:wrap; gap:7px; margin-bottom:8px; }
.alocados-chips:empty { display:none; }
/* Chips do widget Alocados — escopados sob .alocados-chips para não vazarem
no .chip genérico (filtros de tarefa, rótulos de roadmap/histórico etc.). */
.alocados-chips .chip { display:inline-flex; align-items:center; gap:6px; padding:3px 4px 3px 3px;
font-size:12.5px; font-weight:500; color:var(--fg); background:var(--surface);
border:1px solid var(--border-strong); border-radius:999px; }
.alocados-chips .chip.is-principal { border-color:color-mix(in srgb,var(--accent) 45%,transparent);
background:var(--accent-weak); }
.chip-av { width:22px; height:22px; border-radius:50%; display:grid; place-items:center;
font-size:9.5px; font-weight:700; color:#fff; background:var(--slate); flex:none; }
.chip-nome { padding:0 2px; }
.chip-star { font:inherit; font-size:13px; line-height:1; color:var(--fg-3); background:transparent;
border:0; cursor:pointer; padding:0 2px; }
.chip-star:hover { color:var(--accent); }
.chip-star.on { color:var(--accent); cursor:default; }
.chip-x { font:inherit; font-size:15px; line-height:1; color:var(--fg-3); background:transparent;
border:0; cursor:pointer; padding:0 4px 0 2px; }
.chip-x:hover { color:var(--danger); }
/* Combobox estilo Runrun: o "campo" Adicionar (parece um input) abre um popover
com a busca dentro. */
.alocados-combo { position:relative; max-width:340px; }
.alocados-add { display:flex; align-items:center; justify-content:space-between; gap:8px;
width:100%; padding:9px 11px; font:inherit; font-size:13.5px; text-align:left; cursor:pointer;
background:var(--surface); color:var(--fg-3); border:1px solid var(--border-strong);
border-radius:8px; box-shadow:var(--shadow-sm); }
.alocados-add:hover { border-color:var(--slate); }
.alocados-add.aberto { border-color:var(--accent); box-shadow:0 0 0 3px var(--ring); }
.alocados-add-caret { color:var(--fg-3); font-size:11px; flex:none; }
.alocados-pop { position:absolute; z-index:20; left:0; right:0; top:calc(100% + 4px);
background:var(--surface); border:1px solid var(--border-strong); border-radius:8px;
box-shadow:var(--shadow-md); padding:8px; }
.alocados-busca { width:100%; box-sizing:border-box; padding:8px 11px; font:inherit; font-size:13.5px;
color:var(--fg); background:var(--surface); border:1px solid var(--border-strong); border-radius:7px; }
.alocados-busca:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--ring); }
.alocados-drop { max-height:220px; overflow-y:auto; margin-top:6px; }
.alocados-op { display:flex; align-items:center; gap:9px; width:100%; text-align:left;
font:inherit; background:transparent; border:0; border-radius:6px; padding:7px 9px; cursor:pointer; }
.alocados-op:hover { background:var(--accent-weak); }
.alocados-op-meta { display:flex; flex-direction:column; line-height:1.25; }
.alocados-op-nome { font-size:13.5px; font-weight:500; color:var(--fg); }
.alocados-op-sub { font-size:11.5px; color:var(--fg-3); }
.alocados-msg { padding:9px 11px; font-size:12.5px; color:var(--fg-3); }
.alocados-self { display:inline-flex; margin-top:8px; }
/* ---- Chamados: status + categoria ---- */
.cs { font-size:11px; font-weight:700; padding:2.5px 9px; border-radius:999px; white-space:nowrap; }
.cs-ABERTO { color:#1d4ed8; background:#e6efff; }
.cs-EM_ANDAMENTO { color:#6d28d9; background:#f0eafe; }
.cs-AGUARDANDO { color:#b45309; background:#fdf0dc; }
.cs-RESOLVIDO { color:#15803d; background:#e6f6ec; }
.cs-FECHADO { color:#475569; background:#eef1f5; }
.cat { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--fg-3);
background:var(--muted); border:1px solid var(--border); padding:2px 7px; border-radius:6px; white-space:nowrap; }
/* ---- Arquivos: barra de upload ---- */
.upload-bar { display:flex; align-items:center; gap:10px; margin-bottom:16px; background:var(--surface);
border:1px solid var(--border); border-radius:8px; padding:12px 14px; box-shadow:var(--shadow-sm); flex-wrap:wrap; }
.upload-bar select { font:inherit; font-size:13.5px; color:var(--fg-2); background:var(--surface);
border:1px solid var(--border-strong); border-radius:8px; padding:8px 10px; cursor:pointer; }
.upload-bar input[type="file"] { font:inherit; font-size:13px; color:var(--fg-2); flex:1; min-width:180px; }
.upload-bar input[type="file"]::file-selector-button { font:inherit; font-size:12.5px; font-weight:600;
color:var(--fg-2); background:var(--surface); border:1px solid var(--border-strong); border-radius:8px;
padding:7px 12px; margin-right:10px; cursor:pointer; }
/* ---- Arquivos unificados ---- */
.arquivos-head { align-items:center; padding:22px 24px; border:1px solid var(--border);
border-radius:16px; background:linear-gradient(120deg,var(--surface),var(--accent-weak)); box-shadow:var(--shadow-sm); }
.arquivos-eyebrow { display:block; color:var(--accent); font-size:10px; font-weight:800;
letter-spacing:.11em; text-transform:uppercase; margin-bottom:4px; }
.arquivos-total { display:flex; align-items:baseline; gap:7px; color:var(--accent); font-size:28px; font-weight:800; }
.arquivos-total small { color:var(--fg-3); font-size:12px; font-weight:600; }
.arquivos-ferramentas { display:grid; grid-template-columns:minmax(0,1.4fr) minmax(280px,.6fr); gap:12px; margin-bottom:16px; }
.arquivo-painel { display:flex; align-items:center; gap:10px; min-width:0; padding:13px 14px;
background:var(--surface); border:1px solid var(--border); border-radius:12px; box-shadow:var(--shadow-sm); }
.arquivo-painel-icone { width:34px; height:34px; flex:none; display:grid; place-items:center;
border-radius:9px; background:var(--accent-weak); color:var(--accent); font-size:18px; font-weight:700; }
.arquivo-painel > div { display:grid; min-width:130px; }
.arquivo-painel > div b { font-size:12.5px; color:var(--fg); }
.arquivo-painel > div small { font-size:10.5px; color:var(--fg-3); }
.arquivo-painel select,.arquivo-painel input[type=search] { min-width:0; padding:8px 10px; border:1px solid var(--border-strong);
border-radius:8px; background:var(--surface); color:var(--fg); font:inherit; font-size:12.5px; }
.arquivo-painel input[type=search] { flex:1; }
.arquivo-upload input[type=file] { min-width:150px; max-width:240px; color:var(--fg-3); font-size:11px; }
.arquivo-upload input[type=file]::file-selector-button { border:0; background:var(--surface-2); color:var(--fg-2);
border-radius:7px; padding:7px 9px; font:inherit; font-weight:600; cursor:pointer; }
.arquivo-origem { display:inline-flex; align-items:center; padding:4px 9px; border-radius:999px; font-size:10.5px; font-weight:700; }
.origem-biblioteca { color:#3157cc; background:#e6edff; }
.origem-tarefa { color:#7c3aed; background:#f1e9ff; }
.origem-canal { color:#087d69; background:#def8f1; }
.arquivo-linha .cell-main { font-weight:600; color:var(--fg); }
@media(max-width:900px){ .arquivos-ferramentas{grid-template-columns:1fr}.arquivo-upload{flex-wrap:wrap} }
/* ---- Módulos do canal: Canvas, tarefas e reuniões ---- */
.canal-mod-page { padding-top:24px; }
.canal-mod-head { display:flex; justify-content:space-between; align-items:center; gap:24px; margin-bottom:18px;
padding:22px 24px; border:1px solid var(--border); border-radius:16px;
background:linear-gradient(120deg,var(--surface),color-mix(in srgb,var(--accent-weak) 72%,var(--surface))); box-shadow:var(--shadow-sm); }
.canal-mod-head h1 { margin:3px 0 3px; font-family:var(--display); font-size:25px; letter-spacing:-.02em; }
.canal-mod-head p { margin:0; color:var(--fg-3); font-size:13px; }
.canal-mod-voltar { display:block; width:max-content; margin-bottom:13px; color:var(--fg-3); font-size:12px; font-weight:600; }
.canal-mod-voltar:hover { color:var(--accent); text-decoration:none; }
.canal-mod-eyebrow { color:var(--accent); font-size:10px; font-weight:800; letter-spacing:.11em; text-transform:uppercase; }
.canal-mod-contador { min-width:82px; display:grid; justify-items:center; padding:11px 16px; border:1px solid var(--accent-line);
border-radius:12px; background:var(--surface); }
.canal-mod-contador b { color:var(--accent); font-size:24px; line-height:1; }
.canal-mod-contador span { margin-top:4px; color:var(--fg-3); font-size:10px; font-weight:700; text-transform:uppercase; }
.canvas-layout { display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:16px; align-items:start; }
.canvas-card,.canvas-history { background:var(--surface); border:1px solid var(--border); border-radius:14px; box-shadow:var(--shadow-sm); }
.canvas-card { padding:18px; }
.canvas-card-head,.canvas-history-head { display:flex; gap:11px; align-items:center; padding-bottom:15px; margin-bottom:15px; border-bottom:1px solid var(--border); }
.canvas-card-head > div,.canvas-history-head > div { display:grid; }
.canvas-card-head b,.canvas-history-head h2 { margin:0; color:var(--fg); font-size:14px; }
.canvas-card-head small,.canvas-history-head p { margin:2px 0 0; color:var(--fg-3); font-size:11px; }
.canvas-doc-icon,.canvas-history-head > span { width:36px; height:36px; display:grid; place-items:center; flex:none;
border-radius:9px; background:var(--accent-weak); color:var(--accent); font-weight:800; }
.canal-campo { display:grid; gap:6px; margin-bottom:14px; }
.canal-campo > span { color:var(--fg-2); font-size:12px; font-weight:700; }
.canal-campo em { color:var(--fg-3); font-size:10px; font-style:normal; font-weight:500; }
.canal-campo input,.canal-campo textarea,.canal-quick-add input { width:100%; padding:10px 12px; border:1px solid var(--border-strong);
border-radius:9px; background:var(--surface); color:var(--fg); font:inherit; font-size:13px; }
.canal-campo textarea { min-height:420px; resize:vertical; font-family:var(--mono); line-height:1.6; }
.canal-campo input:focus,.canal-campo textarea:focus,.canal-quick-add input:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--ring); }
.canvas-actions { display:flex; justify-content:space-between; align-items:center; gap:14px; }
.canvas-actions > span { color:var(--fg-3); font-size:10.5px; }
.canvas-history { padding:16px; }
.canvas-history-list { display:grid; gap:8px; max-height:560px; overflow:auto; }
.canvas-history-list article { display:flex; gap:10px; padding:10px; border:1px solid var(--border); border-radius:9px; }
.canvas-history-list article > div { display:grid; min-width:0; }
.canvas-history-list article b { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:12px; }
.canvas-history-list article small { color:var(--fg-3); font-size:10.5px; }
.canvas-version { align-self:start; padding:2px 7px; border-radius:6px; color:var(--accent); background:var(--accent-weak); font:700 10px var(--mono); }
.canal-empty { display:grid; justify-items:center; gap:5px; padding:34px 18px; color:var(--fg-3); text-align:center; }
.canal-empty > span { font-size:27px; color:var(--accent); }.canal-empty b { color:var(--fg-2); font-size:13px; }.canal-empty p { margin:0; font-size:11px; }
.canal-quick-add { display:flex; align-items:center; gap:10px; padding:12px 14px; margin-bottom:14px; background:var(--surface);
border:1px solid var(--border); border-radius:12px; box-shadow:var(--shadow-sm); }
.canal-quick-add > span { color:var(--accent); font-size:20px; }.canal-quick-add input { flex:1; }
.canal-table table.rm { min-width:820px; }
.reunioes-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.reuniao-card { display:grid; gap:15px; padding:17px; background:var(--surface); border:1px solid var(--border); border-radius:14px; box-shadow:var(--shadow-sm); }
.reuniao-card-top { display:flex; align-items:center; gap:12px; }.reuniao-card-top > div { min-width:0; }
.reuniao-data { width:48px; height:48px; display:grid; place-content:center; justify-items:center; flex:none; border-radius:11px; background:var(--accent-weak); color:var(--accent); }
.reuniao-data b { font-size:17px; line-height:1; }.reuniao-data small { font-size:9px; font-weight:800; text-transform:uppercase; }
.reuniao-card h2 { margin:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:15px; }.reuniao-card h2 a { color:var(--fg); }
.reuniao-card-top p { margin:3px 0 0; color:var(--fg-3); font-size:11px; }
.reuniao-card-body { display:grid; gap:8px; }.reuniao-card-body p { margin:0; color:var(--fg-2); font-size:12px; line-height:1.5; }
.reuniao-card-body p span { display:block; margin-bottom:2px; color:var(--fg-3); font-size:9px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; }
.reuniao-card footer { display:flex; align-items:center; justify-content:space-between; gap:10px; padding-top:12px; border-top:1px solid var(--border); }
.reuniao-card footer > div { display:flex; align-items:center; gap:12px; }.reuniao-acoes-count { color:var(--ok); font-size:10.5px; font-weight:700; }
.reuniao-card .lnk { font-size:11px; font-weight:700; }.canal-empty-wide { grid-column:1/-1; background:var(--surface); border:1px dashed var(--border-strong); border-radius:14px; }
@media(max-width:900px){.canvas-layout{grid-template-columns:1fr}.reunioes-grid{grid-template-columns:1fr}.canal-mod-head{align-items:flex-start}.canvas-actions{align-items:flex-start;flex-direction:column}.canvas-actions .btn-sm{width:100%}}
.canvas-preview-web{grid-column:1;margin-top:0}.canvas-history{grid-column:2;grid-row:1 / span 2}.canvas-preview-web .prose{padding:4px 2px;overflow-wrap:anywhere}.canvas-presenca-web,.canvas-conflito-web{margin:0 0 14px;padding:10px 12px;border-radius:8px;font-size:.9rem}.canvas-presenca-web{color:var(--fg-2);background:var(--surface-2);border:1px solid var(--border)}.canvas-conflito-web{color:var(--danger-ink);background:var(--danger-weak);border:1px solid var(--danger)}.canvas-conflito-acoes{display:flex;gap:8px;margin-top:10px}.canal-quick-add select{padding:10px 12px;border:1px solid var(--border-strong);border-radius:8px;background:var(--surface)}
@media(max-width:900px){.canvas-preview-web,.canvas-history{grid-column:1;grid-row:auto}}
/* ---- Roadmap / Versões ---------------------------------------------- */
.mut { color:var(--fg-3); }
.rm-proj { margin-top:22px; }
.rm-proj + .rm-proj { margin-top:30px; }
.rm-proj-head { margin:0 0 12px; padding-bottom:9px; border-bottom:1px solid var(--border); }
.rm-proj-head .tag-proj { font-size:13px; font-weight:600; color:var(--fg); }
.rm-proj-head .tag-proj i { width:10px; height:10px; }
.rm-cards { display:grid; grid-template-columns:repeat(auto-fill,minmax(min(280px,100%),1fr)); gap:14px; }
.ver-card { display:block; background:var(--surface); border:1px solid var(--border);
border-radius:8px; padding:15px 16px; box-shadow:var(--shadow-md); transition:border-color .12s, box-shadow .12s; }
.ver-card:hover { border-color:var(--accent-line); box-shadow:0 6px 18px color-mix(in srgb,var(--accent) 12%, transparent); }
.ver-card.atrasada { border-color:color-mix(in srgb,var(--danger) 32%, transparent); }
.ver-top { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:11px; }
.ver-nome { font-weight:600; font-size:14px; color:var(--fg); }
.ver-data { font-size:11.5px; color:var(--fg-3); font-variant-numeric:tabular-nums; white-space:nowrap; }
.ver-flag { font-size:10.5px; font-weight:600; color:var(--danger-ink); background:var(--danger-weak);
border:1px solid color-mix(in srgb,var(--danger) 26%,transparent); border-radius:999px; padding:2px 8px; white-space:nowrap; }
.ver-bar { height:8px; border-radius:999px; background:var(--accent-weak); overflow:hidden; }
.ver-bar.big { height:11px; margin:16px 0 8px; }
.ver-bar > span { display:block; height:100%; border-radius:999px;
background:linear-gradient(90deg, var(--accent), var(--accent-hi)); }
.ver-card.atrasada .ver-bar > span { background:linear-gradient(90deg, var(--warn), #c88a00); }
.ver-meta { display:flex; align-items:baseline; gap:9px; margin:9px 0 0; }
.ver-pct { font-weight:700; font-size:13px; color:var(--fg); font-variant-numeric:tabular-nums; }
.ver-meta .mut { font-size:12px; }
.ver-desc { color:var(--fg-2); margin:2px 0 4px; font-size:14px; max-width:70ch; }
/* ---- Time tracking / Horas ------------------------------------------ */
.tempo-est { margin:0 0 12px; }
.tempo-bar { height:8px; border-radius:999px; background:var(--accent-weak); overflow:hidden; }
.tempo-bar > span { display:block; height:100%; border-radius:999px; background:linear-gradient(90deg,var(--accent),var(--accent-hi)); }
.tempo-bar.over > span { background:linear-gradient(90deg,var(--warn),#c88a00); }
.tempo-est .mut { margin:6px 0 0; font-size:12px; }
.apontamentos { display:flex; flex-direction:column; gap:2px; margin-bottom:12px; }
.apt { display:flex; align-items:center; gap:10px; padding:7px 2px; border-bottom:1px solid var(--border); font-size:13px; }
.apt:last-child { border-bottom:0; }
.apt-h { font-weight:700; color:var(--fg); font-variant-numeric:tabular-nums; min-width:46px; }
.apt-txt { flex:1; color:var(--fg-2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.apt-data { color:var(--fg-3); font-size:12px; font-variant-numeric:tabular-nums; white-space:nowrap; }
.apt-form { display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.apt-form input { padding:7px 10px; border:1px solid var(--border); border-radius:8px; background:var(--surface); font:inherit; color:var(--fg); }
.apt-form input[type=number] { width:92px; }
.apt-form input[name=descricao] { flex:1; min-width:140px; }
.apt-form input:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--ring); }
.hr-filtro { display:flex; gap:10px; align-items:end; flex-wrap:wrap; }
.hr-filtro label { display:flex; flex-direction:column; gap:4px; font-size:12px; color:var(--fg-3); }
.hr-filtro input { padding:7px 10px; border:1px solid var(--border); border-radius:8px; background:var(--surface); font:inherit; color:var(--fg); }
.hr-cols { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
@media (max-width:820px){ .hr-cols { grid-template-columns:1fr; } }
.hr-proj { margin-bottom:12px; }
.hr-proj-top { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:6px; }
.hr-proj-top .tag-proj { font-size:13px; color:var(--fg); }
.hr-proj-top b { font-variant-numeric:tabular-nums; }
.hr-bar { height:9px; border-radius:999px; background:var(--bg); overflow:hidden; }
.hr-bar > span { display:block; height:100%; border-radius:999px; }
.hr-pessoa { display:flex; align-items:center; gap:10px; padding:8px 0; border-bottom:1px solid var(--border); font-size:14px; }
.hr-pessoa:last-child { border-bottom:0; }
.hr-pessoa .hr-nome { flex:1; color:var(--fg); }
.hr-pessoa b { font-variant-numeric:tabular-nums; }
/* ---- Projeto: link na lista + detalhe -------------------------------- */
.proj-link { text-decoration:none; }
.proj-link .tag-proj { font-size:14px; font-weight:600; color:var(--fg); }
.proj-link:hover .tag-proj { color:var(--accent); text-decoration:underline; }
.proj-membros { display:flex; flex-direction:column; }
.proj-membros .who { color:var(--fg); font-size:14px; font-weight:500; min-width:0; }
.proj-membros .who .av.sm { flex:none; }
/* A linha do membro é uma grade de duas colunas: quem, e o que se faz com ele.
Sem isto o `who` (inline-flex) e o formulário empilham como blocos, que era
o motivo de o avatar, o nome e o papel nunca ficarem na mesma régua. */
.proj-membro {
display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center;
gap:12px; padding:9px 0; border-bottom:1px solid var(--border);
}
.proj-membro:last-child { border-bottom:0; }
.papel-form { display:flex; align-items:center; gap:6px; }
/* O select do papel vive fora de `.card-form`, então não herdava o desenho dos
outros campos e caía no controle nativo do navegador. */
.papel-form select {
appearance:none; -webkit-appearance:none; cursor:pointer;
font:inherit; font-size:12.5px; color:var(--fg-2);
padding:5px 30px 5px 10px; border:1px solid var(--border); border-radius:8px;
background-color:var(--surface);
background-image:url("data:image/svg+xml;utf8,");
background-repeat:no-repeat; background-position:right 9px center; background-size:15px;
}
.papel-form select:hover { border-color:var(--border-strong); }
.proj-versoes { display:flex; flex-direction:column; }
/* Nome à esquerda no seu tamanho, barra ocupando a folga, percentual à direita:
antes o nome era `1fr` e empurrava a barra de 80px para o canto, abrindo um
vão no meio da linha. */
.proj-ver {
display:grid; grid-template-columns:auto minmax(60px,1fr) 40px;
align-items:center; gap:12px; text-decoration:none;
padding:9px 0; border-bottom:1px solid var(--border);
}
.proj-ver:last-child { border-bottom:0; }
.proj-ver .pv-nome { color:var(--fg); font-size:13.5px; font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.proj-ver:hover .pv-nome { color:var(--accent); }
.proj-ver .ver-bar { height:7px; }
.proj-ver .mut { font-size:12px; font-variant-numeric:tabular-nums; text-align:right; }
.proj-ver.cheia .mut { color:var(--ok); font-weight:600; }
/* Cabeçalho de seção da coluna: mesmo ritmo entre as três, sem style inline. */
.det-side .sec-titulo { margin:22px 0 4px; padding-top:16px; border-top:1px solid var(--border); }
.det-side .sec-titulo:first-child { margin-top:0; padding-top:0; border-top:0; }
.det-side .vazio { margin:10px 0 0; font-size:13.5px; color:var(--fg-3); line-height:1.5; }
/* ---- Controles de formulário refinados (todos os card-form) ---------- */
/* Selects: tira o chevron nativo e desenha um próprio, alinhado ao tema. */
.card-form select {
appearance:none; -webkit-appearance:none; cursor:pointer; padding-right:40px;
background-image:url("data:image/svg+xml;utf8,");
background-repeat:no-repeat; background-position:right 13px center; background-size:17px;
}
.card-form select:hover { border-color:var(--border-strong); }
.card-form ::placeholder { color:var(--fg-3); }
/* Color: swatch compacto e arredondado. */
.card-form input[type=color] { width:52px; height:38px; padding:4px; cursor:pointer; box-shadow:none; border-radius:9px; }
/* Checkbox/radio custom (equipe, participantes, flags). */
.card-form input[type=checkbox], .card-form input[type=radio] {
appearance:none; -webkit-appearance:none; width:18px; height:18px; flex:none; margin:0;
border:1.5px solid var(--border-strong); background:var(--surface); cursor:pointer;
box-shadow:none; transition:background .12s, border-color .12s;
}
.card-form input[type=checkbox] { border-radius:5px; }
.card-form input[type=radio] { border-radius:50%; }
.card-form input[type=checkbox]:checked, .card-form input[type=radio]:checked {
background-color:var(--accent); border-color:var(--accent);
background-image:url("data:image/svg+xml;utf8,");
background-repeat:no-repeat; background-position:center; background-size:14px;
}
.card-form input[type=checkbox]:focus-visible, .card-form input[type=radio]:focus-visible {
outline:none; box-shadow:0 0 0 3px var(--ring);
}
/* Flag booleana (ex.: "Projeto ativo") vira toggle switch. */
.card-form input[type=checkbox][id$="ativo"] {
width:44px; height:25px; border-radius:999px; border:none; background:var(--border-strong);
position:relative; background-image:none;
}
.card-form input[type=checkbox][id$="ativo"]::after {
content:""; position:absolute; top:3px; left:3px; width:19px; height:19px; border-radius:50%;
background:#fff; box-shadow:0 1px 2px rgba(31,35,40,.25); transition:left .15s;
}
.card-form input[type=checkbox][id$="ativo"]:checked { background:var(--accent); background-image:none; }
.card-form input[type=checkbox][id$="ativo"]:checked::after { left:22px; }
/* Equipe/participantes: cada pessoa é um chip que acende quando marcada.
O widget do Django renderiza …
(não
- ), então os seletores são agnósticos à tag do wrapper. */
.card-form :is([id$="membros"], [id$="participantes"]) {
list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:9px;
}
.card-form :is([id$="membros"], [id$="participantes"]) > * { margin:0; }
.card-form :is([id$="membros"], [id$="participantes"]) label {
display:inline-flex; align-items:center; gap:8px; margin:0; padding:7px 13px 7px 11px;
border:1px solid var(--border-strong); border-radius:999px; cursor:pointer;
font-size:13.5px; font-weight:500; color:var(--fg-2); background:var(--surface);
transition:border-color .12s, background .12s, color .12s;
}
.card-form :is([id$="membros"], [id$="participantes"]) label:hover { border-color:var(--accent-line); }
.card-form :is([id$="membros"], [id$="participantes"]) label:has(input:checked) {
border-color:var(--accent); background:var(--accent-weak); color:var(--accent); font-weight:600;
}
/* ---- Formulários em largura total, 2 colunas ------------------------- */
.form-page .card-form { max-width:none; }
.card-form { display:grid; grid-template-columns:1fr 1fr; column-gap:22px; }
.card-form > input[type="hidden"] { display:none; }
/* Campos largos ocupam a linha inteira: textarea, equipe/participantes, ações. */
.card-form .field:has(textarea),
.card-form .field:has(select[multiple]),
.card-form .field:has([id$="membros"]),
.card-form .field:has([id$="participantes"]),
.card-form .form-actions { grid-column:1 / -1; }
/* Tabela de status da empresa: campos ocupam a célula; ordem é curta. */
.rm .tf-inp { width:100%; }
.rm .tf-inp.cfg-ordem { width:72px; }
/* Erro do formulário inteiro (não de um campo) ocupa a linha toda. */
.card-form > .errors { grid-column:1 / -1; }
@media (max-width:720px){ .card-form { grid-template-columns:1fr; } }
/* Select múltiplo (Equipe): lista clara, sem chevron, itens marcados em azul. */
.card-form select[multiple] {
appearance:none; -webkit-appearance:none; background-image:none;
height:auto; padding:6px; cursor:default;
}
.card-form select[multiple] option {
padding:8px 11px; border-radius:7px; margin:1px 0; color:var(--fg);
}
.card-form select[multiple] option:checked {
background:var(--accent) linear-gradient(0deg, var(--accent), var(--accent));
color:#fff; font-weight:600;
}
/* Checkbox + rótulo (preferências) */
.chk { display:flex; align-items:center; gap:9px; font-size:14px; line-height:1.2; color:var(--fg-2); margin-bottom:11px; cursor:pointer; }
.chk input { margin:0; flex:none; }
/* Busca global */
.bsec { margin-bottom:20px; }
.bsec h3 { font-size:12px; text-transform:uppercase; letter-spacing:.05em; color:var(--fg-3); font-weight:700; margin:0 0 8px; }
.bitem { display:flex; align-items:center; gap:10px; padding:9px 12px; border:1px solid var(--border);
border-radius:8px; background:var(--surface); text-decoration:none; color:var(--fg); margin-bottom:6px; font-size:14px; }
.bitem:hover { border-color:var(--accent); }
.bitem .di-tit { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* Sub-abas de grupos consolidados (Docs / GitHub / Infra) */
.subtabs { display:flex; gap:4px; margin:0 0 18px; border-bottom:1px solid var(--border); }
.subtabs a { padding:8px 14px; font-size:13.5px; font-weight:500; color:var(--fg-2);
border-bottom:2px solid transparent; margin-bottom:-1px; }
.subtabs a:hover { color:var(--fg); }
.subtabs a.on { color:var(--accent); border-bottom-color:var(--accent); font-weight:600; }
/* Ações no topo do detalhe + botão destrutivo */
.det-actions { display:inline-flex; gap:8px; }
.btn-primary.danger { background:linear-gradient(180deg,#e5484d,var(--danger));
box-shadow:0 1px 2px rgba(207,34,46,.24), 0 8px 20px rgba(207,34,46,.22); }
.btn-primary.danger:hover { filter:brightness(1.05); }
/* Prazo atrasado na lista */
.prazo { font-variant-numeric:tabular-nums; color:var(--fg-2); }
.prazo.atrasado { color:var(--danger); font-weight:600; }
/* A data e o "sem responsável" têm duas grafias no HTML; aqui fica a do
desktop, e a media query do celular troca qual delas aparece. */
.pz-curto, .rv-texto { display:none; }
/* Rodapé da lista + paginação */
.rm-foot { display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-top:12px; }
.pager { display:inline-flex; align-items:center; gap:12px; }
.pager-info { font-size:13px; color:var(--fg-3); font-variant-numeric:tabular-nums; }
/* Relações entre tarefas */
.relacoes { display:flex; flex-direction:column; gap:2px; margin-bottom:12px; }
.rel { display:flex; align-items:center; gap:10px; padding:8px 2px; border-bottom:1px solid var(--border); font-size:13px; }
.rel:last-child { border-bottom:0; }
.rel-label { min-width:120px; font-weight:600; color:var(--fg-2); }
.rel-alvo { flex:1; color:var(--fg); text-decoration:none; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.rel-alvo:hover { color:var(--accent); text-decoration:underline; }
.rel-alvo .s-id { font-family:ui-monospace,Menlo,monospace; font-size:12px; color:var(--accent); }
.rel-rm button { border:0; background:none; color:var(--fg-3); font-size:18px; line-height:1; cursor:pointer; padding:0 4px; }
.rel-rm button:hover { color:var(--danger); }
.rel-form { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.rel-form select, .rel-form input { padding:8px 10px; border:1px solid var(--border-strong); border-radius:6px; background:var(--surface); font:inherit; color:var(--fg); }
.rel-form input { flex:1; min-width:160px; }
.rel-form select:focus, .rel-form input:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--ring); }
/* Selects do filtro de Horas (mesmo chevron dos forms) */
.hr-filtro select {
appearance:none; -webkit-appearance:none; cursor:pointer; padding:7px 32px 7px 10px;
border:1px solid var(--border-strong); border-radius:6px; background:var(--surface); font:inherit; color:var(--fg);
background-image:url("data:image/svg+xml;utf8,");
background-repeat:no-repeat; background-position:right 9px center; background-size:15px;
}
.hr-filtro select:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--ring); }
/* Documentação — grupos por projeto */
.doc-grupo { margin-top:22px; }
.doc-grupo + .doc-grupo { margin-top:26px; }
.doc-grupo-head { display:flex; align-items:center; gap:12px; margin:0 0 10px; padding-bottom:8px; border-bottom:1px solid var(--border); }
.doc-grupo-head .tag-proj { font-size:13px; font-weight:600; color:var(--fg); }
.doc-grupo-head .mut { font-size:12px; }
/* Deploys — ambiente e status */
.amb { font-size:11px; font-weight:600; padding:2px 9px; border-radius:999px; white-space:nowrap; }
.amb-PRODUCAO { color:#b42318; background:#fbeef0; }
.amb-HOMOLOGACAO { color:#b45309; background:#fdf0dc; }
.amb-DEV { color:#475569; background:#eef1f5; }
.dstatus { font-size:11px; font-weight:700; padding:2.5px 9px; border-radius:999px; white-space:nowrap; }
.dstatus-SUCESSO { color:#15803d; background:#e6f6ec; }
.dstatus-EM_ANDAMENTO { color:#1d4ed8; background:#e6efff; }
.dstatus-FALHA { color:#b91c1c; background:#fdeeee; }
.dstatus-REVERTIDO { color:#b45309; background:#fdf0dc; }
/* Texto de ação destrutiva */
.danger-tx { color:var(--danger); }
.danger-tx:hover { color:var(--danger); filter:brightness(.92); }
/* Credenciais — aviso de inventário */
.cred-nota { display:flex; gap:8px; align-items:flex-start; font-size:13px; line-height:1.5;
color:#7c4a03; background:#fff8ec; border:1px solid #f3dcae; border-radius:8px;
padding:11px 14px; margin:14px 0 18px; max-width:820px; }
.cred-nota b { color:#5c3702; }
/* ============================================================
VISÃO DO TIME — dashboard estilizado (colorido, self-contained)
Único bloco "repaginado"; o resto do app segue o visual original.
============================================================ */
.quick-actions { display:grid; grid-template-columns:repeat(6,1fr); gap:12px; margin-bottom:18px; }
.quick-actions a { display:flex; flex-direction:column; align-items:center; gap:8px; padding:16px 10px;
background:var(--surface); border:1px solid var(--border); border-radius:12px;
color:var(--fg-2); font-size:12.5px; font-weight:600; text-decoration:none; text-align:center;
transition:transform .08s, box-shadow .2s, border-color .2s, color .2s; }
.quick-actions a:hover { color:#8833ff; border-color:#e4d6ff; box-shadow:0 6px 18px rgba(20,20,43,.08); transform:translateY(-2px); text-decoration:none; }
.quick-actions svg { width:22px; height:22px; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.quick-actions a:nth-child(1) svg { stroke:#8833ff; }
.quick-actions a:nth-child(2) svg { stroke:#4d74ff; }
.quick-actions a:nth-child(3) svg { stroke:#0bb5c9; }
.quick-actions a:nth-child(4) svg { stroke:#ff6633; }
.quick-actions a:nth-child(5) svg { stroke:#29cc39; }
.quick-actions a:nth-child(6) svg { stroke:#ec4899; }
@media (max-width:900px){ .quick-actions { grid-template-columns:repeat(3,1fr); } }
@media (max-width:520px){ .quick-actions { grid-template-columns:repeat(2,1fr); } }
/* KPIs como cards coloridos sólidos */
.kpi { border:0; border-radius:12px; padding:18px 20px; color:#fff;
box-shadow:0 6px 18px rgba(20,20,43,.10); background:#8833ff; }
.kpi .lab { color:rgba(255,255,255,.9); }
.kpi .val { color:#fff; }
.kpi:nth-child(1) { background:#8833ff; }
.kpi:nth-child(2) { background:#ff6633; }
.kpi:nth-child(3) { background:#ef4444; }
.kpi:nth-child(4) { background:#202839; }
.kpi:nth-child(5) { background:#29cc39; }
/* Cards de projeto */
.proj-cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr)); gap:14px; }
.proj-card { display:flex; flex-direction:column; gap:10px; padding:16px; border:1px solid var(--border);
border-radius:12px; background:var(--surface); text-decoration:none; color:var(--fg);
transition:transform .08s, box-shadow .2s; }
.proj-card:hover { box-shadow:0 8px 22px rgba(20,20,43,.10); transform:translateY(-2px); text-decoration:none; }
.pc-head { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.pc-head .tag-proj { font-size:14px; font-weight:600; color:var(--fg); }
.pc-head .tag-proj i { width:10px; height:10px; }
.pc-key { color:var(--fg-3); font-size:11.5px; font-family:ui-monospace,"JetBrains Mono",Menlo,monospace; }
.pc-prog-top { font-size:12.5px; color:var(--fg-2); }
.pc-prog-top b { font-size:15px; color:var(--fg); font-weight:700; }
.pc-track { height:8px; background:var(--surface-2); border-radius:999px; overflow:hidden; display:flex; }
.pc-track span { height:100%; }
.pc-foot { display:flex; align-items:center; margin-top:2px; }
.av-stack { display:flex; align-items:center; }
.av-stack .av.sm { width:26px; height:26px; font-size:9.5px; margin-left:-7px; box-shadow:0 0 0 2px var(--surface); }
.av-stack .av.sm:first-child { margin-left:0; }
.av-stack .av.more { background:var(--surface-2); color:var(--fg-2); font-weight:700; }
/* ============================================================
PÁGINA INICIAL — estilo "TaskFlow" (3 colunas, dados reais)
============================================================ */
.tf-wrap { display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:24px;
align-items:start; padding:22px 26px 44px; }
.tf-main { display:flex; flex-direction:column; gap:34px; min-width:0; padding:22px 26px 44px; }
.tf-hello h1 { font-family:var(--display); font-size:26px; font-weight:800; letter-spacing:-.6px; margin:0; color:var(--fg); }
.tf-hello p { margin:4px 0 0; font-size:13.5px; font-weight:500; color:var(--fg-3); text-transform:capitalize; }
.tf-sec { display:flex; flex-direction:column; gap:14px; }
.tf-h { display:flex; align-items:center; gap:10px; }
.tf-h h2 { font-family:var(--display); font-size:15.5px; font-weight:800; letter-spacing:-.2px; margin:0; color:var(--fg); }
.tf-tag { padding:3px 9px; border-radius:99px; background:var(--accent-weak); color:var(--accent-hi); font-size:10.5px; font-weight:700; }
/* ---- Meu dia: cards ---- */
.tf-daygrid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr)); gap:16px; align-items:stretch; }
/* min-width:0: sem isso o item de grade não encolhe abaixo do próprio
min-content e a coluna passa da largura da tela no celular. */
.tf-card { display:flex; flex-direction:column; min-width:0; background:var(--surface); border:1px solid var(--border);
border-radius:16px; padding:16px 18px; box-shadow:var(--shadow-sm); }
.tf-card.is-alert { border-color:#fde0ea; }
.tf-card-h { display:flex; align-items:center; gap:9px; font-size:13px; font-weight:700; color:var(--fg); margin-bottom:12px; }
.tf-dot { width:8px; height:8px; border-radius:50%; flex:none; }
.tf-cnt { margin-left:auto; padding:2px 9px; border-radius:99px; font-size:10.5px; font-weight:700; }
.tf-cnt-rose { background:#ffe4ef; color:#d6206e; } .tf-cnt-blue { background:var(--accent-weak); color:var(--accent-hi); }
.tf-cnt-violet { background:#ede4ff; color:#6b32d6; } .tf-cnt-amber { background:#ffeedc; color:var(--c-orange); }
.tf-item { display:flex; align-items:center; gap:10px; padding:8px 6px; border-radius:9px; text-decoration:none; color:var(--fg); }
.tf-item:hover { background:var(--surface-2); text-decoration:none; }
.tf-code { font-family:var(--mono); font-size:10.5px; font-weight:800; padding:3px 6px; border-radius:6px; flex:none; letter-spacing:-.02em; }
.tf-ttl { flex:1; min-width:0; font-size:12.5px; font-weight:500; color:var(--fg-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tf-late { flex:none; font-size:10.5px; font-weight:700; color:var(--danger); }
.tf-meet { gap:12px; }
.tf-hora { flex:none; font-size:13px; font-weight:800; color:var(--c-violet); }
.tf-empty { margin:6px 0; font-size:12.5px; color:var(--fg-3); }
.tf-more { display:inline-block; margin-top:10px; font-size:12px; font-weight:700; color:var(--accent); text-decoration:none; }
.tf-more:hover { text-decoration:underline; }
/* ---- painéis brancos (Na sua mão / Projetos / Atenção) ---- */
.tf-panel { min-width:0; background:var(--surface); border:1px solid var(--border); border-radius:16px; padding:18px 20px; box-shadow:var(--shadow-sm); }
.tf-panel-h { display:flex; align-items:center; gap:9px; font-size:13px; font-weight:700; color:var(--fg); margin-bottom:14px; }
.tf-sub { font-size:11px; font-weight:600; color:var(--fg-3); }
.tf-lnk { margin-left:auto; font-size:11.5px; font-weight:700; color:var(--accent); text-decoration:none; }
.tf-lnk:hover { text-decoration:underline; }
/* tabela Na sua mão */
.tf-tablewrap { overflow-x:auto; }
.tf-table { width:100%; min-width:620px; border-collapse:collapse; }
.tf-table th { text-align:left; font-size:10px; font-weight:800; letter-spacing:.5px; text-transform:uppercase;
color:var(--fg-3); padding:0 6px 10px; border-bottom:1px solid var(--border); }
.tf-table th.r, .tf-table td.r { text-align:right; }
.tf-table td { padding:11px 6px; border-bottom:1px solid var(--surface-2); font-size:13px; cursor:pointer; }
.tf-table tr:last-child td { border-bottom:0; }
.tf-table tbody tr:hover td { background:#fafbfe; }
.tf-table td.tf-ttl { font-weight:600; color:var(--fg); }
.tf-proj-tag { display:inline-flex; align-items:center; gap:7px; font-size:12px; font-weight:600; color:var(--fg-2); }
.tf-proj-tag i { width:8px; height:8px; border-radius:3px; }
.tf-muted { color:var(--fg-3); font-weight:700; font-size:11.5px; }
/* ---- KPIs coloridos suaves ---- */
.tf-kpis { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(150px,100%),1fr)); gap:12px; }
/* KPIs sólidos (cor cheia + texto branco), tons ricos pra não gritar */
.tf-kpi { display:flex; flex-direction:column; gap:5px; border-radius:15px; padding:16px; border:0;
color:#fff; box-shadow:var(--shadow-md); }
.tf-kpi .lab { font-size:11.5px; font-weight:700; color:rgba(255,255,255,.92); }
.tf-kpi .val { font-family:var(--display); font-size:26px; font-weight:800; letter-spacing:-1px; line-height:1; color:#fff; }
.tf-kpi .sub { font-size:10.5px; font-weight:600; color:rgba(255,255,255,.78); }
.tf-kpi.k-blue { background:#3b5cff; }
.tf-kpi.k-rose { background:#e8446e; }
.tf-kpi.k-amber { background:#e0842a; }
.tf-kpi.k-violet { background:#8b5cf6; }
.tf-kpi.k-green { background:#17a558; }
/* ---- Projetos ---- */
.tf-projs { display:flex; flex-direction:column; gap:12px; }
.tf-proj { display:grid; grid-template-columns:60px minmax(0,1fr) auto; gap:16px; align-items:center;
padding:12px; border-radius:14px; border:1px solid var(--surface-2); text-decoration:none; color:var(--fg); transition:border-color .15s, background .15s; }
.tf-proj:hover { border-color:var(--border-strong); background:#fcfcfe; text-decoration:none; }
.tf-thumb { width:60px; height:60px; border-radius:14px; flex:none; }
.tf-proj-mid { display:flex; flex-direction:column; gap:8px; min-width:0; }
.tf-proj-top { display:flex; align-items:center; gap:9px; }
.tf-proj-top b { font-size:13.5px; font-weight:700; }
.tf-key { font-family:var(--mono); font-size:11px; color:var(--fg-3); }
.tf-pct { margin-left:auto; font-size:11.5px; font-weight:700; color:var(--fg-2); }
.tf-track { height:7px; border-radius:99px; background:var(--surface-2); overflow:hidden; }
.tf-track i { display:block; height:100%; border-radius:99px; }
.tf-dist { display:flex; gap:3px; height:6px; }
.tf-dist i { border-radius:99px; }
.tf-proj-meta { font-size:10.5px; font-weight:600; color:var(--fg-3); }
.tf-avstack { display:flex; align-items:center; justify-content:flex-end; }
.tf-av { width:28px; height:28px; border-radius:50%; display:grid; place-items:center; font-size:10px; font-weight:700;
color:#fff; border:2px solid #fff; margin-left:-8px; }
.tf-av:first-child { margin-left:0; }
.tf-av.more { background:var(--surface-2); color:var(--fg-2); }
.tf-legend { display:flex; flex-wrap:wrap; gap:14px; margin-top:14px; padding-top:12px; border-top:1px solid var(--surface-2); }
.tf-legend span { display:flex; align-items:center; gap:6px; font-size:10.5px; font-weight:600; color:var(--fg-3); }
.tf-legend i { width:7px; height:7px; border-radius:50%; }
/* ---- Precisam de atenção ---- */
.tf-atgrid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr)); gap:12px; }
.tf-anote { display:flex; flex-direction:column; gap:8px; padding:14px; border-radius:14px;
background:#fffafb; border:1px solid #fde7ee; text-decoration:none; color:var(--fg); }
.tf-anote:hover { text-decoration:none; box-shadow:var(--shadow-sm); }
.tf-anote-h { display:flex; align-items:center; gap:8px; }
.tf-anote-ttl { font-size:12.5px; font-weight:600; color:var(--fg); }
.tf-anote-meta { font-size:10.5px; font-weight:600; color:var(--fg-3); }
/* ---- Rail direita ---- */
.tf-rail { position:sticky; top:14px; display:flex; flex-direction:column; gap:24px; }
.tf-railsec { display:flex; flex-direction:column; gap:10px; }
.tf-railh { display:flex; align-items:center; gap:8px; font-size:10px; font-weight:800; letter-spacing:.9px; text-transform:uppercase; color:var(--fg-3); }
.tf-railh em { font-style:normal; padding:2px 7px; border-radius:99px; background:#ffe4ef; color:#d6206e; font-size:9.5px; font-weight:800; letter-spacing:0; text-transform:none; }
.tf-railh .tf-lnk { text-transform:none; letter-spacing:0; }
.tf-qa { display:flex; align-items:center; gap:10px; padding:12px 14px; border:1px solid var(--border); border-radius:12px;
background:var(--surface); color:var(--fg-2); font-size:12.5px; font-weight:700; text-decoration:none; }
.tf-qa:hover { border-color:var(--border-strong); background:#fafbfe; text-decoration:none; }
.tf-qa .ic { width:22px; height:22px; border-radius:7px; display:grid; place-items:center; font-size:13px; line-height:1; flex:none;
background:var(--surface-2); color:var(--fg-2); }
.tf-qa-primary { background:var(--accent); color:#fff; border-color:transparent; box-shadow:var(--shadow-raise); }
.tf-qa-primary:hover { background:var(--accent-hi); color:#fff; }
.tf-qa-primary .ic { background:rgba(255,255,255,.22); color:#fff; }
.tf-aviso { display:flex; flex-wrap:wrap; align-items:center; gap:8px; padding:12px; border:1px solid var(--surface-2);
border-radius:13px; text-decoration:none; color:var(--fg); }
.tf-aviso:hover { background:#fafbfe; border-color:var(--border); text-decoration:none; }
.tf-badge { padding:2px 8px; border-radius:99px; font-size:9.5px; font-weight:800; }
.tf-badge.b-blue { background:var(--accent-weak); color:var(--accent-hi); }
.tf-badge.b-rose { background:#ffe4ef; color:#d6206e; }
.tf-aviso-when { margin-left:auto; font-size:9.5px; font-weight:700; color:var(--fg-3); }
.tf-aviso-txt { flex-basis:100%; font-size:12px; font-weight:600; color:var(--fg); line-height:1.45; }
@media (max-width:1100px){
.tf-wrap { display:flex; flex-direction:column; }
.tf-rail { order:-1; position:static; display:grid; grid-template-columns:1fr 1fr; gap:16px 20px; align-items:start; }
}
@media (max-width:640px){
.tf-daygrid { grid-template-columns:1fr; }
.tf-rail { grid-template-columns:1fr; }
.tf-wrap { padding:18px 16px 36px; }
}
/* Ações rápidas como hamburguer (details nativo, sem JS — sempre inicia fechado) */
.tf-actions { border:1px solid var(--border); border-radius:12px; background:var(--surface); box-shadow:var(--shadow-sm); }
.tf-actions > summary { list-style:none; cursor:pointer; display:flex; align-items:center; gap:11px;
padding:12px 14px; font-size:12.5px; font-weight:800; color:var(--fg); user-select:none; }
.tf-actions > summary::-webkit-details-marker { display:none; }
.tf-actions > summary:hover { background:var(--surface-2); border-radius:12px; }
.tf-actions .ham { width:20px; height:14px; display:flex; flex-direction:column; justify-content:space-between; flex:none; }
.tf-actions .ham i { display:block; height:2.5px; border-radius:2px; background:var(--accent); }
.tf-actions .chev { margin-left:auto; font-size:18px; line-height:1; color:var(--fg-3); transition:transform .2s; }
.tf-actions[open] > summary { border-bottom:1px solid var(--border); border-radius:12px 12px 0 0; }
.tf-actions[open] .chev { transform:rotate(90deg); }
.tf-actions-body { display:flex; flex-direction:column; gap:8px; padding:12px; }
/* Barra de controles (tarefas) num card branco — não dissolve no canvas cinza */
.ctrlcard { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
box-shadow:var(--shadow-sm); padding:2px 14px; margin-bottom:16px; }
.ctrlcard .toolbar { margin:0; padding:11px 0; }
.ctrlcard .groupbar { margin:0; padding:12px 2px 4px; border-top:1px solid var(--border); }
/* Botão que recolhe o painel — só existe no celular (ver media query no fim
do arquivo). No desktop fica escondido e nada muda. */
.filtrostog { display:none; }
.filtrosbtn { display:none; align-items:center; gap:8px; width:100%; margin:10px 0;
padding:10px 12px; border:1px solid var(--border-strong); border-radius:11px;
background:var(--surface-2); color:var(--fg-2); font-size:13px; font-weight:700; cursor:pointer; }
.filtrosbtn svg { width:16px; height:16px; flex:none; stroke:var(--accent); fill:none;
stroke-width:2; stroke-linecap:round; }
.filtrosbtn::after { content:"▾"; margin-left:auto; color:var(--fg-3); }
.filtrostog:checked ~ .filtrosbtn::after { content:"▴"; }
/* ---- Kanban (tarefas: layout=kanban) ---- */
.gpipe { width:1px; align-self:center; height:18px; background:var(--border); margin:0 4px; }
/* board preenche a tela e a barra horizontal fica colada no rodapé */
.kb-page { height:calc(100dvh - 67px); display:flex; flex-direction:column; padding-top:18px; padding-bottom:0; overflow:hidden; }
.kb-page .page-head { margin-bottom:14px; }
.kb-page .ctrlcard { margin-bottom:14px; }
.kb-board { display:flex; gap:14px; overflow-x:auto; overflow-y:hidden; align-items:stretch; flex:1; min-height:0; cursor:grab; }
.kb-board.kb-grabbing { cursor:grabbing; user-select:none; }
.kb-board.kb-grabbing a { pointer-events:none; }
.kb-col { flex:0 0 300px; width:300px; background:var(--surface-2); border:1px solid var(--border);
border-radius:var(--radius); padding:10px; display:flex; flex-direction:column; gap:10px; max-height:100%; }
.kb-colh { display:flex; align-items:center; gap:8px; font-size:12.5px; font-weight:800; color:var(--fg); padding:2px 4px; }
.kb-dot { width:9px; height:9px; border-radius:50%; flex:none; }
.kb-n { margin-left:auto; font-size:11px; font-weight:700; color:var(--fg-3); background:var(--surface);
border:1px solid var(--border); border-radius:99px; padding:1px 8px; }
.kb-cards { display:flex; flex-direction:column; gap:8px; overflow-y:auto; min-height:0; }
.kb-card { display:flex; flex-direction:column; gap:8px; background:var(--surface); border:1px solid var(--border);
border-left:3px solid var(--border); border-radius:11px; padding:11px 12px; text-decoration:none; color:var(--fg);
box-shadow:var(--shadow-sm); transition:box-shadow .15s, transform .08s; }
.kb-card:hover { box-shadow:var(--shadow-md); text-decoration:none; transform:translateY(-1px); }
.kb-card-top { display:flex; align-items:center; gap:8px; }
.kb-card-ttl { font-size:13px; font-weight:600; color:var(--fg); line-height:1.35; }
.kb-card-foot { display:flex; align-items:center; gap:8px; }
.kb-card-foot .tf-proj-tag { font-size:11.5px; min-width:0; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.kb-right { margin-left:auto; display:flex; align-items:center; gap:8px; flex:none; }
.kb-right .av.none { background:var(--surface-2); color:var(--fg-3); border:1px dashed var(--border-strong); }
/* --- Diff de revisões (histórico de wiki/documentação) ------------------- */
.diff { border:1px solid var(--border); border-radius:8px; overflow:hidden;
background:var(--surface); box-shadow:var(--shadow-md);
font-family:var(--mono); font-size:12.5px; line-height:1.7; }
.diff-linha { display:flex; gap:10px; padding:1px 12px; color:var(--fg-2);
white-space:pre-wrap; overflow-wrap:anywhere; }
.diff-marca { flex:0 0 1ch; color:var(--fg-3); user-select:none; }
.diff-add { background:var(--ok-bg); color:var(--fg); }
.diff-add .diff-marca { color:var(--ok); }
.diff-del { background:var(--danger-weak); color:var(--fg); }
.diff-del .diff-marca { color:var(--danger); }
.seguir-form { display:inline; }
.seguir-form button { font:inherit; cursor:pointer; }
/* --- Visões salvas (consultas da listagem de tarefas) -------------------- */
.visoes { display:flex; flex-wrap:wrap; align-items:center; gap:8px;
padding:10px 14px; border-top:1px solid var(--border); font-size:12.5px; }
.visoes-rot { color:var(--fg-3); text-transform:uppercase; letter-spacing:.04em;
font-size:11px; margin-right:2px; }
.visao { display:inline-flex; align-items:center; gap:2px; border:1px solid var(--border);
border-radius:999px; padding:2px 4px 2px 10px; background:var(--surface); }
.visao.on { border-color:var(--accent); background:var(--accent-weak); }
.visao a { color:var(--fg-2); text-decoration:none; }
.visao.on a { color:var(--accent-hi); }
.visao-del { display:inline; }
.visao-del button { border:0; background:none; cursor:pointer; color:var(--fg-3);
padding:0 4px; font-size:14px; line-height:1; }
.visao-del button:hover { color:var(--danger); }
.visao-salvar { display:inline-flex; align-items:center; gap:8px; margin-left:auto; }
.visao-salvar input[type=text] { width:180px; font:inherit; font-size:12.5px; color:var(--fg);
background:var(--surface); border:1px solid var(--border-strong); border-radius:8px;
padding:7px 10px; box-shadow:var(--shadow-sm); }
.visao-salvar input[type=text]::placeholder { color:var(--fg-3); }
.visao-salvar input[type=text]:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--ring); }
.visao-salvar label { color:var(--fg-2); display:inline-flex; align-items:center; gap:6px; cursor:pointer; }
.visao-salvar input[type=checkbox] { appearance:none; -webkit-appearance:none; width:16px; height:16px;
flex:none; margin:0; border:1.5px solid var(--border-strong); border-radius:5px; background:var(--surface);
cursor:pointer; box-shadow:none; transition:background .12s, border-color .12s; }
.visao-salvar input[type=checkbox]:checked { background-color:var(--accent); border-color:var(--accent);
background-image:url("data:image/svg+xml;utf8,");
background-repeat:no-repeat; background-position:center; background-size:12px; }
.visao-salvar input[type=checkbox]:focus-visible { outline:none; box-shadow:0 0 0 3px var(--ring); }
@media (max-width:560px){
.visao-salvar { display:flex; flex-wrap:wrap; margin-left:0; width:100%; }
.visao-salvar input[type=text] { width:100%; min-width:0; }
}
/* --- Cronograma (Gantt em SVG) ------------------------------------------ */
.gantt-wrap { display:flex; border:1px solid var(--border); border-radius:8px;
background:var(--surface); box-shadow:var(--shadow-md); overflow:hidden; }
/* min-width:0 senão o título mais longo estica a coluna além dos 300px
declarados e come a largura do gráfico (em 768px ela ia a 344). */
.gantt-nomes { flex:0 0 400px; min-width:0; border-right:1px solid var(--border); }
.gantt-nome { display:flex; align-items:center; gap:8px; padding:0 12px;
text-decoration:none; color:var(--fg-2); font-size:14px;
white-space:nowrap; overflow:hidden; }
.gantt-nome:hover { background:var(--surface-2); }
.gantt-cod { color:var(--fg-3); font-family:var(--mono); font-size:12.5px; flex:none; }
.gantt-tit { overflow:hidden; text-overflow:ellipsis; }
.gantt-tela { overflow-x:auto; flex:1; min-width:0; }
.gantt-svg { display:block; }
.gantt-grade { stroke:var(--slate); stroke-width:1.5; }
.gantt-grade-semana { stroke:var(--slate); stroke-width:1; opacity:.5; stroke-dasharray:3 3; }
.gantt-mes { fill:var(--fg-2); font-size:12.5px; font-weight:600; }
.gantt-semana { fill:var(--fg-3); font-size:10.5px; opacity:.7; }
.gantt-hoje { stroke:var(--accent); stroke-width:2; stroke-dasharray:3 3; }
.gantt-hoje-pill { fill:var(--accent); }
.gantt-hoje-txt { fill:#fff; font-size:9.5px; font-weight:700; }
.gantt-seta { stroke:var(--fg-3); stroke-width:1.5; fill:none; opacity:.7; }
.gantt-barra { opacity:.45; }
.gantt-barra.atrasada { stroke:var(--danger); stroke-width:1.5; }
.gantt-feito { fill:var(--accent); opacity:.9; }
.gantt-legenda { margin-top:10px; font-size:12px; }
.aviso-corte { margin:0 0 12px; padding:8px 12px; border-radius:6px; font-size:12.5px;
background:var(--danger-weak); color:var(--fg-2);
border:1px solid var(--border); }
/* --- Papel do membro no detalhe do projeto ------------------------------ */
.proj-membro { display:flex; align-items:center; gap:8px; flex-wrap:wrap;
padding:4px 0; }
.proj-membro .who { flex:1 1 auto; min-width:0; }
.papel-form { display:inline-flex; align-items:center; gap:4px; }
.papel-form select { font-size:12px; padding:2px 4px; }
/* --- Seletor de colunas da listagem ------------------------------------- */
.colunas-picker { border-top:1px solid var(--border); padding:8px 14px; font-size:12.5px; }
.colunas-picker summary { cursor:pointer; color:var(--fg-3); }
.colunas-picker summary:hover { color:var(--accent); }
.colunas-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(min(150px,100%),1fr));
gap:4px 12px; margin:10px 0; }
.colunas-grid label { display:flex; align-items:center; gap:6px; color:var(--fg-2); }
/* --- Edição em lote na listagem ----------------------------------------- */
.col-sel { width:28px; text-align:center; }
.lote-bar { display:flex; flex-wrap:wrap; align-items:center; gap:8px;
padding:10px 14px; margin-top:-1px; font-size:12.5px;
border:1px solid var(--border); border-top:0;
border-radius:0 0 8px 8px; background:var(--surface); }
.lote-bar select { font:inherit; font-size:12.5px; color:var(--fg-2); background:var(--surface);
border:1px solid var(--border-strong); border-radius:8px; padding:7px 10px; cursor:pointer;
box-shadow:var(--shadow-sm); }
.lote-bar select:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--ring); }
/* Aba de tempos gastos + marca de nota privada */
.forum:has(#ftab-hist:checked) .note.k-tempo { display:none; }
.forum:has(#ftab-notas:checked) .note:not(.k-nota) { display:none; }
.forum:has(#ftab-campos:checked) .note:not(.k-campo) { display:none; }
.forum:has(#ftab-tempos:checked) .note:not(.k-tempo) { display:none; }
.forum:has(#ftab-tempos:checked) label[for=ftab-tempos] { color:var(--fg); border-color:var(--border); }
.nota-privada { background:var(--danger-weak); color:var(--danger); }
.nota-privada-check { display:flex; align-items:center; gap:6px; margin:8px 0; font-size:12.5px; }
/* Relacionadas em tabela; form aparece só ao clicar em "+ Adicionar" */
.rel-toggle { position:absolute; opacity:0; pointer-events:none; }
.rel-form { display:none; margin-top:10px; }
.rel-toggle:checked ~ .rel-form { display:flex; gap:8px; align-items:center; }
table.rm.rel-tbl { min-width:0; }
.rel-tbl .rel-label { color:var(--fg-3); white-space:nowrap; }
.rel-rm button { border:0; background:none; cursor:pointer; color:var(--fg-3); font-size:15px; }
.rel-rm button:hover { color:var(--danger); }
/* Edição unificada: propriedades + tempo + nota numa tela só */
.bloco-titulo { font-size:13px; text-transform:uppercase; letter-spacing:.04em;
color:var(--fg-3); margin:0 0 14px; }
.bloco-edicao { border:1px solid var(--border); border-radius:8px; padding:14px 16px;
margin:16px 0; background:var(--surface); }
.bloco-edicao legend { font-size:12px; text-transform:uppercase; letter-spacing:.04em;
color:var(--fg-3); padding:0 6px; }
.bloco-edicao textarea { width:100%; }
/* Propriedades recolhíveis: abertas ao Editar/criar, fechadas ao Responder
(aí a pessoa só quer comentar).
nativo, sem JS. */
.props-collapse > summary.props-sum { font-size:12px; color:var(--fg-3); cursor:pointer;
list-style:none; padding:2px 0; user-select:none; }
.props-collapse > summary.props-sum::-webkit-details-marker { display:none; }
.props-collapse > summary.props-sum::before { content:"\25B8\00a0"; }
.props-collapse[open] > summary.props-sum::before { content:"\25BE\00a0"; }
.props-collapse > summary.props-sum .mut { text-transform:none; }
/* Chip do Roadmap: explica por extenso que a versão não recebe tarefa. */
.ver-card .ver-lock { background:var(--surface); color:var(--fg-3);
border:1px solid var(--border); }
/* Botão "Adicionar comentário" alinhado à direita da barra de abas. */
.forum-comentar { margin-left:auto; align-self:center; flex:none; }
/* Numa faixa estreita as quatro abas não cabem numa linha com o botão: elas
passam a rolar de lado e ele desce para uma linha inteira, abaixo da régua. */
@media (max-width:700px){
.forum-head { flex-direction:column; align-items:stretch; gap:0; border-bottom:0; }
.forum-tabs { flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none;
border-bottom:1px solid var(--border-strong); }
.forum-tabs::-webkit-scrollbar { display:none; }
.forum-tabs .ftab { flex:none; }
.forum-comentar { margin:12px 0 2px; align-self:stretch; text-align:center;
min-height:42px; display:inline-flex; align-items:center; justify-content:center; }
}
/* Lista de tarefas na confirmação da edição em lote. */
.lote-lista { margin:8px 0 4px; padding-left:18px; }
.lote-lista li { margin:2px 0; }
.linha-hora { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:8px; }
.linha-hora label { color:var(--fg-3); font-size:12.5px; }
.linha-hora input[type=text], .linha-hora input[type=number] { width:110px; }
.linha-hora input[name$=descricao] { flex:1; min-width:200px; }
.note-quote { margin-left:auto; color:var(--fg-3); text-decoration:none; font-size:14px; }
.note-quote:hover { color:var(--accent); }
/* Edição embutida: fechada até clicar em Editar/Responder, como no Redmine.
:target cobre o clique em "#editar"; a classe .aberta cobre a citação e o
retorno com erro de validação, que não têm fragmento na URL. */
.edicao-inline { display:none; }
.edicao-inline:target,
.edicao-inline.aberta { display:block; }
/* --- Formulário da tarefa no formato do Redmine ------------------------- */
.rm-form .bloco-edicao { border:1px solid var(--border); border-radius:6px;
padding:14px 18px 16px; margin:0 0 14px;
background:var(--surface); }
.rm-form .bloco-edicao legend { font-size:12px; color:var(--fg-3); padding:0 6px;
text-transform:none; letter-spacing:0; }
/* Campos compactos: o Redmine não estica select na largura da tela. */
.rm-form .rf-ctrl > select,
.rm-form .rf-ctrl > input[type=text],
.rm-form .rf-ctrl > input[type=number],
.rm-form .rf-ctrl > input[type=date] { max-width:340px; width:100%; }
.rm-form .rf-row.rf-wide .rf-ctrl > input[type=text] { max-width:none; }
.rm-form .rf-row { gap:10px; margin-bottom:6px; }
.rm-form .rf-cols { gap:0 36px; }
.rm-form .form-actions { display:flex; align-items:center; gap:12px; }
/* Descrição recolhida atrás do link, como no Redmine */
.desc-toggle { position:absolute; opacity:0; pointer-events:none; }
.desc-abrir { display:inline-block; color:var(--link); cursor:pointer; font-size:12.5px; }
.desc-abrir:hover { text-decoration:underline; }
.desc-campo { display:none; }
.desc-toggle:checked ~ .desc-campo { display:block; }
.desc-toggle:checked ~ .desc-abrir { display:none; }
/* --- Tour guiado do primeiro login -------------------------------------- */
/* display:contents tira a camada da árvore de caixas. Com position:fixed +
z-index ela criaria um contexto de empilhamento, e aí o z-index do balão só
valeria DENTRO dela — a camada inteira continuaria abaixo do alvo (10000) e
o balão sumiria atrás de qualquer destaque grande. */
.tour-camada { display:contents; }
/* O escurecido é feito de quatro faixas em volta do alvo, não de um painel
inteiro com o alvo por cima. Subir o alvo acima do painel não acende nada:
a maioria dos elementos é transparente, então o escuro aparecia ATRAVÉS
deles — o menu e o painel de colunas ficavam cinzentos justamente quando
deviam estar em destaque. Com o buraco recortado, o alvo continua no lugar
e mantém o próprio fundo. */
.tour-fundo { position:fixed; inset:0; z-index:9999; }
.tour-veu { position:fixed; background:rgba(15,23,42,.55); }
/* O anel vive num elemento à parte porque as faixas cobririam uma borda
desenhada no próprio alvo. */
.tour-realce { position:fixed; z-index:10000; border-radius:8px; pointer-events:none;
box-shadow:0 0 0 3px var(--accent), 0 0 0 9px rgba(34,197,94,.25); }
.tour-balao { position:fixed; top:50%; left:50%; transform:translate(-50%,-50%);
width:min(420px, calc(100vw - 24px)); background:var(--surface);
border:1px solid var(--border-strong); border-radius:10px;
box-shadow:0 18px 40px rgba(0,0,0,.35); padding:18px 20px 16px;
outline:none; }
.tour-balao.tour-ancorado { transform:none; }
.tour-passo-n { margin:0 0 6px; font-size:11px; letter-spacing:.06em;
text-transform:uppercase; color:var(--fg-3); }
.tour-balao h2 { margin:0 0 8px; font-size:16px; color:var(--fg); }
.tour-texto { margin:0 0 16px; font-size:13.5px; line-height:1.6; color:var(--fg-2); }
.tour-acoes { display:flex; align-items:center; gap:8px; }
.tour-espaco { flex:1; }
/* O alvo não recebe mais z-index nem sombra: quem desenha o anel é
.tour-realce, e quem escurece o resto são as faixas. */
.tour-alvo { border-radius:8px; }
/* Balão do tour. Rola na vertical se o texto for longo; na horizontal nunca —
barra lateral aqui é sempre sintoma de conteúdo mais largo que o balão. */
/* Acima do anel (10000). Sem isto, alvo grande — o formulário de nova tarefa
ocupa a tela toda — cobre o balão e o tour trava sem saída. */
.tour-balao { z-index:10001; max-height:calc(100vh - 24px);
overflow-y:auto; overflow-x:hidden; }
.tour-acoes { flex-wrap:nowrap; }
.tour-acoes button { white-space:nowrap; flex:0 0 auto; }
/* .btn-primary nasce com width:100% no design system; sem desfazer isso ele
exige a largura toda, empurra os outros e o balão passa a cortar. Mesma
correção que .form-actions e .dev-actions já fazem. */
.tour-acoes .btn-primary { width:auto; padding:10px 20px; font-size:14px; }
/* Sair é ação secundária: vira link e devolve a largura que faltava aos dois
botões que importam. Como botão, os três não cabiam e o Próximo era cortado. */
.tour-sair { border:0; background:none; padding:0; cursor:pointer;
color:var(--fg-3); font-size:12.5px; text-decoration:underline; }
.tour-sair:hover { color:var(--danger); }
@media (max-width:719px) {
.tour-balao { width:calc(100vw - 24px); }
.tour-espaco { flex:1; }
}
/* --- Legenda das situações (ao lado do campo Status) --------------------- */
/* Recolhida: dez definições abertas empurrariam o formulário inteiro. */
.ajuda-campo > summary { color:var(--link); cursor:pointer; font-size:12.5px;
list-style:none; }
.ajuda-campo > summary::-webkit-details-marker { display:none; }
.ajuda-campo > summary::before { content:"？ "; }
.ajuda-campo > summary:hover { text-decoration:underline; }
.ajuda-caixa { margin:8px 0 0; padding:12px 14px; border:1px solid var(--border);
border-radius:8px; background:var(--surface-2, var(--surface));
display:grid; gap:18px; }
/* Os três campos lado a lado em tela larga: numa coluna só, dezoito definições
ficam mais altas que a tela. */
/* Status tem dez opções contra quatro dos outros dois: em três colunas iguais
ele sozinho estica o painel para além da tela. Ganha o dobro de largura e
quebra em duas colunas internas, e os três grupos ficam de alturas parecidas. */
@media (min-width:1000px) {
.ajuda-caixa { grid-template-columns:2fr 1fr 1fr; }
.ajuda-grupo--status .ajuda-lista { columns:2; column-gap:18px; }
}
.ajuda-grupo h4 { margin:0 0 6px; font-size:12px; letter-spacing:.06em;
text-transform:uppercase; color:var(--fg-3); }
.ajuda-lista { margin:0; }
.ajuda-item { break-inside:avoid; }
.ajuda-lista dt { font-weight:600; font-size:12.5px; color:var(--fg); }
.ajuda-lista dd { margin:2px 0 8px; font-size:12.5px; line-height:1.5;
color:var(--fg-2); }
.ajuda-lista dd:last-child { margin-bottom:0; }
/* ============================================================
Chat — lista de canais e tela de canal (mensagens ao vivo)
============================================================ */
/* ===== Chat — módulo DENTRO do Workspace (Material 3, indigo) ============
O chat NÃO toma a tela: o menu global e o topbar do app continuam. Aqui só
fixamos a altura para o fluxo de mensagens rolar por dentro (sem rolar a
página inteira), e o chat vira um sub-layout de 3 colunas na área central. */
.app.app-chat { height:100dvh; }
.app-chat .ws-main { min-height:0; }
/* Paleta indigo escopada só ao chat (não afeta o resto do Workspace) */
.chat-shell { --ind:#4338ca; --ind-hi:#3730a3; --ind-weak:#e0e7ff; --ind-ring:#c7d2fe;
--line:#e9ecef; --sub:#f8f9fa; --card:#ffffff; --ink:#08090a; --ink-2:#404753; --ink-3:#717784;
flex:1; min-height:0; display:grid; grid-template-columns:240px 1fr 300px; background:var(--sub); font-family:var(--sans); }
@media (max-width:1320px){ .chat-shell{ grid-template-columns:240px 1fr; } }
@media (max-width:1000px){ .chat-shell{ grid-template-columns:1fr; } }
/* Atenção: as colunas que somem (.chat-info, .chat-side) são desligadas no FIM
desta seção. Aqui o display:none seria anulado pelas regras base delas, que
vêm depois no arquivo e têm a mesma especificidade. */
/* ---- Coluna esquerda: canais + DMs + perfil ---- */
.chat-side { background:var(--card); border-right:1px solid var(--line); display:flex; flex-direction:column;
min-height:0; padding:16px 12px; }
.chat-brand { display:flex; align-items:center; gap:10px; margin:2px 6px 22px; }
.chat-brand .mk { width:40px; height:40px; border-radius:10px; background:var(--ind); color:#fff;
display:grid; place-items:center; box-shadow:0 1px 2px rgba(0,0,0,.12); }
.chat-brand .mk svg { width:22px; height:22px; }
.chat-brand b { font-size:18px; font-weight:700; color:var(--ink); line-height:1.1; display:block; }
.chat-brand span { font-size:11px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); }
.chat-nav { flex:1; overflow-y:auto; }
.chat-back { display:flex; align-items:center; gap:10px; padding:8px 12px; border-radius:8px;
color:var(--ink-2); text-decoration:none; font-size:14px; font-weight:500; }
.chat-back:hover { background:var(--sub); color:var(--ink); }
.chat-grp { display:flex; align-items:center; justify-content:space-between;
padding:0 12px; margin:20px 0 8px; font-size:12px; font-weight:600; letter-spacing:.06em;
text-transform:uppercase; color:var(--ink-3); }
.chat-grp button { background:none; border:0; color:var(--ink-3); cursor:pointer; display:grid; place-items:center; }
.chat-grp button:hover { color:var(--ink); }
.chat-ch { display:flex; align-items:center; gap:12px; padding:8px 12px; border-radius:8px;
text-decoration:none; color:var(--ink-2); font-size:14px; font-weight:500; line-height:1.2; margin-bottom:2px; }
.chat-ch:hover { background:var(--sub); color:var(--ink); }
.chat-ch.on { background:var(--ind-weak); color:var(--ind); font-weight:700;
box-shadow:0 1px 2px rgba(0,0,0,.05); }
.chat-ch .hash { color:var(--ink-3); font-weight:600; width:18px; text-align:center; }
.chat-ch.on .hash { color:var(--ind); }
.chat-ch .nm { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.chat-ch .dot { width:8px; height:8px; border-radius:50%; background:var(--ind); flex:none; }
.chat-ch .badge { flex:none; min-width:20px; height:18px; padding:0 6px; border-radius:6px;
background:var(--surface-container-high,#e7e8e9); color:var(--ink-2); font-size:10px; font-weight:700;
display:flex; align-items:center; justify-content:center; }
.chat-ch.on .badge { background:var(--ind); color:#fff; }
.chat-ch.mudo { opacity: .55; }
.chat-ch-salvos { margin-bottom: 6px; }
.chat-av-wrap { position:relative; flex:none; }
.chat-av-wrap .av { width:24px; height:24px; font-size:9px; }
.chat-pres { position:absolute; bottom:-1px; right:-1px; width:9px; height:9px; border-radius:50%;
border:2px solid var(--card); background:#cbd5e1; }
.chat-pres.pres-online { background:#22c55e; }
.chat-pres.pres-ausente { background:#f59e0b; }
.chat-pres.pres-ocupado { background:#ef4444; }
/* controle de status (topo) */
.chat-status-wrap { position:relative; }
.chat-status { display:inline-flex; align-items:center; gap:7px; font:inherit; font-size:12.5px; font-weight:500;
color:var(--ink-2); background:var(--card); border:1px solid var(--line); border-radius:8px; padding:5px 10px; cursor:pointer; }
.chat-status i { width:8px; height:8px; border-radius:50%; background:#22c55e; flex:none; }
.chat-status.pres-ausente i { background:#f59e0b; }
.chat-status.pres-ocupado i { background:#ef4444; }
.chat-status-menu { position:absolute; top:calc(100% + 6px); right:0; z-index:20; background:var(--card);
border:1px solid var(--line); border-radius:10px; padding:4px; box-shadow:0 12px 32px rgba(0,0,0,.14); min-width:150px; }
.chat-status-menu[hidden] { display:none; }
.chat-status-menu button { display:flex; align-items:center; gap:8px; width:100%; font:inherit; font-size:13px;
color:var(--ink-2); background:none; border:0; border-radius:7px; padding:7px 10px; cursor:pointer; text-align:left; }
.chat-status-menu button:hover { background:var(--sub); }
.chat-status-menu i.d { width:8px; height:8px; border-radius:50%; flex:none; }
.chat-status-menu i.pres-online { background:#22c55e; }
.chat-status-menu i.pres-ausente { background:#f59e0b; }
.chat-status-menu i.pres-ocupado { background:#ef4444; }
.chat-me { margin-top:8px; padding-top:12px; border-top:1px solid var(--line);
display:flex; align-items:center; gap:10px; }
.chat-me .av { width:32px; height:32px; }
.chat-me .who { flex:1; min-width:0; }
.chat-me .who b { display:block; font-size:14px; color:var(--ink); font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.chat-me .who span { font-size:11px; color:var(--ink-3); }
/* ---- Coluna central: conversa ---- */
.chat-conv { display:flex; flex-direction:column; min-height:0; min-width:0; position:relative; }
.chat-top { height:64px; flex:none; display:flex; align-items:center; gap:14px;
padding:0 24px; background:rgba(248,249,250,.85); backdrop-filter:blur(8px);
border-bottom:1px solid var(--line); }
.chat-top .h { font-size:22px; font-weight:700; color:var(--ink); }
.chat-top .pill { display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:500;
color:var(--ink-2); background:var(--card); border:1px solid var(--line); border-radius:8px; padding:4px 10px; }
.chat-top .pill svg { width:14px; height:14px; opacity:.6; }
.chat-top .on-pill i { width:8px; height:8px; border-radius:50%; background:#22c55e; display:inline-block; }
.chat-search { font:inherit; font-size:13px; padding:7px 12px; border:1px solid var(--line); border-radius:8px;
background:var(--sub); color:var(--ink); outline:none; width:220px; }
.chat-search:focus { border-color:var(--ind); }
.chat-search[hidden] { display:none; }
.chat-search-n { font-size:12px; color:var(--ink-3); white-space:nowrap; }
.chat-top .tools { margin-left:auto; display:flex; align-items:center; gap:6px; }
.chat-top .ic { width:36px; height:36px; border-radius:8px; border:0; background:none; color:var(--ink-2);
display:grid; place-items:center; cursor:pointer; }
.chat-top .ic:hover { background:var(--card); color:var(--ind); }
.chat-top .ic svg { width:20px; height:20px; }
/* O botão de silenciar mora num