/* Kanban da equipe — cores e regras copiadas do Quadro PET ID de referência; no fim, o que é só
   deste sistema (login, troca de senha, menu da conta, prazo colorido e prioridade). */
:root {
  --bg: #F3F0EA; --col: #E9E4DA; --card: #FFFFFF; --ink: #1E2922; --muted: #5B665F; --faint: #8A938D;
  --line: #DCD5C8; --accent: #2E6A4F; --accent-ink: #FFFFFF; --accent-soft: #DCEBE2; --danger: #B42318; --danger-soft: #FDEDEB;
  --shadow: 0 1px 2px rgba(30,41,34,.08), 0 2px 6px rgba(30,41,34,.05);
  --l-design: #7A4FB5; --l-app: #2F5E9E; --l-back: #A8431F; --l-int: #1F7A6D; --l-bug: #B42318; --l-prod: #6B5A1E;
  --font: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif; --mono: 'JetBrains Mono', ui-monospace, Menlo, monospace;
  /* Prazo: azul = mais de 7 dias, amarelo = 7 dias ou menos, vermelho = 1 dia ou menos. */
  --due-far: #2F5E9E; --due-soon: #8C6A00; --due-soon-dot: #C9A227; --due-late: #B42318;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0F1511; --col: #18201B; --card: #212B25; --ink: #E8EEEA; --muted: #A3AFA8; --faint: #7C8882;
    --line: #2C3830; --accent: #5DB88C; --accent-ink: #0C1A12; --accent-soft: #1F3A2C; --danger: #FF8A80; --danger-soft: #3A1C19;
    --shadow: 0 1px 2px rgba(0,0,0,.4);
    --l-design: #B79AE6; --l-app: #8DB4F0; --l-back: #F0A07C; --l-int: #6FCFBE; --l-bug: #FF8A80; --l-prod: #D8C27A;
    --due-far: #8DB4F0; --due-soon: #E3C45A; --due-soon-dot: #C9A227; --due-late: #FF8A80;
    color-scheme: dark;
  }
}

*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:14px/1.45 var(--font);display:flex;flex-direction:column;overflow-x:hidden;overflow-y:auto}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

.top{display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding-block:14px;padding-inline:24px;border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:10px;min-width:0}
.mark{width:30px;height:30px;border-radius:9px;background:var(--accent);color:var(--accent-ink);display:grid;place-items:center;flex-shrink:0}
.brand h1{margin:0;font-size:16px;font-weight:800;letter-spacing:-.01em;white-space:nowrap}
.brand small{display:block;font-size:12px;color:var(--muted);font-weight:500}
.spacer{flex:1}
.filters{display:flex;gap:6px;flex-wrap:wrap}
.chip{height:32px;padding:0 12px;border-radius:999px;border:1px solid var(--line);background:transparent;font-size:13px;font-weight:600;color:var(--muted);display:inline-flex;align-items:center;gap:6px}
.chip:hover{color:var(--ink)}
.chip[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--bg)}
.search{height:32px;width:200px;max-width:100%;border-radius:999px;border:1px solid var(--line);background:var(--card);padding:0 14px;font-size:13px}
.status{font-size:12px;font-weight:600;color:var(--muted);display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.dot{width:8px;height:8px;border-radius:50%;background:var(--faint)}
.status[data-s="saved"] .dot{background:var(--accent)}
.status[data-s="saving"] .dot{background:#C9A227}
.status[data-s="error"] .dot,.status[data-s="readonly"] .dot{background:var(--danger)}
.iconbtn{width:32px;height:32px;border-radius:50%;border:1px solid var(--line);background:transparent;display:grid;place-items:center;color:var(--muted)}
.iconbtn:hover{color:var(--ink)}

.board{flex:0 0 auto;overflow-x:auto;overflow-y:hidden;display:flex;gap:14px;align-items:flex-start;padding-block:18px 24px;padding-inline:24px}
.col{flex:0 0 288px;max-height:min(64vh,660px);display:flex;flex-direction:column;background:var(--col);border-radius:14px}
.col-h{display:flex;align-items:center;gap:8px;padding:12px 14px 8px}
.col-h h2{margin:0;font-size:13px;font-weight:800;letter-spacing:.02em}
.count{font:500 12px var(--mono);color:var(--muted)}
.list{flex:1;min-height:40px;overflow-y:auto;padding:4px 8px;display:flex;flex-direction:column;gap:8px}
.list.over{background:color-mix(in srgb,var(--accent) 7%,transparent);border-radius:10px}
.drop-line{height:3px;border-radius:3px;background:var(--accent);margin:-2px 2px}

.card{position:relative;background:var(--card);border-radius:10px;box-shadow:var(--shadow);padding:10px 12px 10px;text-align:left;border:1px solid transparent;width:100%;display:flex;flex-direction:column;gap:8px}
.card:hover{border-color:var(--line)}
.card.dragging{opacity:.45}
.card .t{font-size:14px;font-weight:600;line-height:1.35;overflow-wrap:anywhere}
.card.is-done .t{color:var(--muted)}
.lbl{align-self:flex-start;display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--lc)}
.lbl::before{content:"";width:18px;height:4px;border-radius:4px;background:var(--lc)}
.meta{display:flex;align-items:center;gap:10px;font-size:12px;color:var(--muted)}
.meta .grow{flex:1}
.due{display:inline-flex;align-items:center;gap:4px;font-family:var(--mono);font-size:11.5px}
.due.late{color:var(--danger);font-weight:700}
.av{width:24px;height:24px;border-radius:50%;background:var(--accent-soft);color:var(--accent);font-size:11px;font-weight:800;display:grid;place-items:center}
.av.none{background:transparent;border:1px dashed var(--line);color:var(--faint)}

.add{margin:6px 8px 10px;padding:8px 10px;border-radius:10px;border:0;background:transparent;color:var(--muted);font-weight:600;text-align:left;display:flex;align-items:center;gap:6px}
.add:hover{background:color-mix(in srgb,var(--ink) 6%,transparent);color:var(--ink)}
.composer{margin:6px 8px 10px;display:flex;flex-direction:column;gap:8px}
.composer textarea{resize:none;min-height:64px;border-radius:10px;border:1px solid var(--accent);background:var(--card);padding:10px 12px;box-shadow:var(--shadow)}
.row{display:flex;gap:8px;align-items:center}
.btn{height:34px;padding:0 14px;white-space:nowrap;border-radius:8px;border:0;background:var(--accent);color:var(--accent-ink);font-weight:700}
.btn.ghost{background:transparent;color:var(--muted)}
.btn.ghost:hover{color:var(--ink)}
.btn.danger{background:transparent;color:var(--danger);border:1px solid color-mix(in srgb,var(--danger) 40%,transparent)}
.btn.danger.confirm{background:var(--danger);color:#fff}

dialog{border:0;padding:0;border-radius:16px;background:var(--card);color:var(--ink);width:min(560px,calc(100vw - 32px));box-shadow:0 24px 60px rgba(0,0,0,.25)}
dialog::backdrop{background:rgba(15,21,17,.45)}
.dlg{padding:22px 24px 20px;display:flex;flex-direction:column;gap:16px}
.dlg-h{display:flex;align-items:flex-start;gap:12px}
.dlg-h input{flex:1;font-size:18px;font-weight:700;border:1px solid transparent;border-radius:8px;padding:6px 8px;margin:-6px -8px;background:transparent}
.dlg-h input:hover,.dlg-h input:focus{border-color:var(--line);background:var(--bg)}
.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.f{display:flex;flex-direction:column;gap:6px;min-width:0}
.f label{font-size:12px;font-weight:700;color:var(--muted);letter-spacing:.03em}
.f select,.f input,.f textarea{height:38px;border-radius:8px;border:1px solid var(--line);background:var(--bg);padding:0 10px}
.f textarea{height:110px;padding:10px;resize:vertical;line-height:1.5}
.dlg-f{display:flex;align-items:center;gap:8px;border-top:1px solid var(--line);padding-top:14px}
.muted{color:var(--muted);font-size:12px}
.banner{padding-inline:24px;padding-block:8px;background:var(--danger-soft);color:var(--danger);font-size:13px;font-weight:600}

.notes{padding-inline:24px;padding-block:8px 40px;display:flex;flex-direction:column;gap:14px}
.notes-h{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.notes-h h2{margin:0;font-size:15px;font-weight:800}
.notes-h p{margin:0;font-size:12px;color:var(--muted)}
.composer-n{display:flex;gap:10px;align-items:center;flex-wrap:wrap;background:var(--col);border-radius:14px;padding:12px}
.composer-n textarea{flex:1 1 320px;min-width:0;min-height:38px;height:38px;max-height:200px;resize:vertical;border-radius:8px;border:1px solid var(--line);background:var(--card);padding:8px 12px;line-height:1.45}
.composer-n textarea:focus{height:90px}
.notes-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px}
.note{background:var(--card);border-radius:12px;box-shadow:var(--shadow);padding:12px 14px;display:flex;flex-direction:column;gap:8px;border:1px solid transparent;min-width:0}
.note.pinned{border-color:color-mix(in srgb,var(--accent) 45%,transparent)}
.note-h{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--muted);white-space:nowrap;min-width:0}
.note-h strong{color:var(--ink);font-size:13px}
.note-t{white-space:pre-wrap;overflow-wrap:anywhere;font-size:14px;line-height:1.5;margin:0}
.note-a{display:flex;gap:4px;justify-content:flex-end;margin:-4px -6px -6px}
.mini{height:26px;padding:0 8px;border-radius:6px;border:0;background:transparent;color:var(--muted);font-size:12px;font-weight:700}
.mini:hover{color:var(--ink);background:color-mix(in srgb,var(--ink) 6%,transparent)}
.mini.danger{color:var(--danger)}
.empty{font-size:13px;color:var(--muted);padding:8px 2px}
@media (max-width:640px){.notes{padding-inline:16px}.top{padding-inline:16px}.board{padding-inline:16px}.col{flex-basis:260px}.search{width:100%}}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* ================================================================ Só deste sistema */

/* Cores das etiquetas (a variável --lc pinta a barrinha e o texto). */
.lb-App{--lc:var(--l-app)} .lb-Back-end{--lc:var(--l-back)} .lb-Bug{--lc:var(--l-bug)}
.lb-Design{--lc:var(--l-design)} .lb-Integração{--lc:var(--l-int)} .lb-Produto{--lc:var(--l-prod)}

/* Prazo pela distância até a data (Feito não pinta). */
.due.far{color:var(--due-far)}
.due.soon{color:var(--due-soon);font-weight:700}
.due.late{color:var(--due-late);font-weight:700}

/* Prioridade: no cartão, à direita da etiqueta. */
.card-top{display:flex;align-items:center;gap:8px;min-height:16px}
.prio{margin-left:auto;display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:700;letter-spacing:.02em;color:var(--pc)}
.prio::before{content:"";width:8px;height:8px;border-radius:2px;background:var(--pc)}
.p-alta{--pc:var(--danger)} .p-media{--pc:var(--due-soon)} .p-baixa{--pc:var(--faint)}
.chip .pdot{width:8px;height:8px;border-radius:2px;background:var(--pc)}
.chip[aria-pressed="true"] .pdot{box-shadow:0 0 0 1.5px var(--bg)}
.filters .sep{width:1px;height:22px;background:var(--line);align-self:center;margin:0 4px}
.chip .av{width:20px;height:20px;font-size:10px}
.composer select{height:34px;border-radius:8px;border:1px solid var(--line);background:var(--card);padding:0 8px;font-size:13px}

/* Menu da conta */
.me{position:relative}
.me > .av{width:32px;height:32px;font-size:12px;border:0}
.menu{position:absolute;right:0;top:40px;z-index:20;min-width:220px;background:var(--card);border:1px solid var(--line);border-radius:12px;box-shadow:0 12px 30px rgba(0,0,0,.15);padding:6px;display:flex;flex-direction:column}
.menu .who{padding:8px 10px 10px;border-bottom:1px solid var(--line);margin-bottom:4px}
.menu .who b{display:block}
.menu button{text-align:left;background:transparent;border:0;border-radius:8px;padding:9px 10px;font-weight:600}
.menu button:hover{background:var(--col)}

/* Login e troca de senha (layout de cartão dividido: formulário + painel) */
.erro{color:var(--danger);background:var(--danger-soft);border-radius:8px;padding:10px 12px;font-size:13px;font-weight:600;margin:0}
.auth{min-height:100vh;display:grid;place-items:center;padding:24px 16px}
.auth-card{width:min(880px,100%);min-height:480px;display:grid;grid-template-columns:1fr 1.05fr;background:var(--card);border-radius:16px;overflow:hidden;box-shadow:0 24px 60px rgba(0,0,0,.18)}
.auth-form{padding:44px 48px;display:flex;flex-direction:column;justify-content:center;gap:22px}
.auth-brand{display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center}
.auth-brand .mark{width:48px;height:48px;border-radius:14px}
.auth-brand h1{margin:0;font-size:26px;font-weight:800;letter-spacing:-.02em}
.auth-brand p{margin:0;color:var(--muted);font-size:13px}
.auth-form form{display:flex;flex-direction:column;gap:14px}
.auth-form .f label{text-align:center;font-size:14px;font-weight:500;color:var(--ink);letter-spacing:0}
.auth-form .f input{height:44px;background:var(--col);border-color:transparent}
.auth-form .f input:focus{outline:none;background:var(--card);border-color:var(--accent)}
.auth-form .btn{height:46px;font-size:15px}
.auth-hint{text-align:center;margin:0}
.auth-art{position:relative;background:radial-gradient(circle at 70% 20%,#3A7A5C 0%,#1E4A36 55%,#102A1F 100%);color:#F3F0EA;display:flex;flex-direction:column;justify-content:flex-end;padding:36px;overflow:hidden}
.auth-art::before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.08) 1px,transparent 1px);background-size:22px 22px}
.auth-art h2{position:relative;margin:0 0 6px;font-size:22px;letter-spacing:-.01em}
.auth-art p{position:relative;margin:0;opacity:.8;line-height:1.5}
.mini-board{position:absolute;top:44px;left:36px;right:-30px;display:flex;gap:12px;transform:rotate(-4deg)}
.mini-col{flex:0 0 150px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.14);border-radius:12px;padding:10px;display:flex;flex-direction:column;gap:8px}
.mini-col b{font-size:11px;letter-spacing:.06em;text-transform:uppercase;opacity:.75}
.mini-card{background:#FFFFFF;border-radius:8px;padding:8px;display:flex;flex-direction:column;gap:6px}
.mini-card i{display:block;height:5px;border-radius:4px;background:#DCD5C8}
.mini-card i:first-child{width:36%;background:#2E6A4F}
.mini-card i.b{width:40%;background:#2F5E9E}
.mini-card i.r{width:32%;background:#A8431F}
.mini-card i.short{width:65%}
@media (max-width:760px){.auth-card{grid-template-columns:1fr}.auth-art{display:none}.auth-form{padding:36px 24px}}