:root{
  --acento1:#4f46e5; --acento2:#8b5cf6;
  --bg:#f6f7fb; --painel:#fff; --linha:#e6e8f0; --texto:#1a1c25; --fraco:#6b7185;
  --erro:#dc2b46;
  --sombra:0 1px 2px rgba(16,20,40,.04), 0 12px 34px rgba(16,20,40,.08);
}
@media (prefers-color-scheme:dark){
  :root{ --bg:#0e1017; --painel:#161923; --linha:#262b3a; --texto:#e9ebf2; --fraco:#9aa1b5;
         --erro:#ff6b81; --sombra:0 1px 2px rgba(0,0,0,.3), 0 12px 34px rgba(0,0,0,.4); }
}

*{ box-sizing:border-box; }

html,body{ height:100%; }

body{
  margin:0;
  background:var(--bg);
  color:var(--texto);
  font:15px/1.55 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing:antialiased;
}

a{ color:var(--acento1); }

h1,h2,h3{ margin:0 0 4px; line-height:1.25; }

.app{
  max-width:920px;
  margin:0 auto;
  padding:20px 16px 64px;
}

.topo{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:8px 0 20px;
}

.topo h1{ font-size:20px; }

.topo-acoes{
  display:flex;
  align-items:center;
  gap:12px;
}

.usuario{
  font-weight:600;
  color:var(--fraco);
}

.botao{
  appearance:none;
  border:1px solid transparent;
  border-radius:10px;
  padding:11px 14px;
  font:inherit;
  font-weight:600;
  cursor:pointer;
  min-height:44px;
  transition:opacity .15s ease, transform .05s ease;
}
.botao:active{ transform:translateY(1px); }
.botao:disabled{ opacity:.6; cursor:not-allowed; }

.botao-primario{
  background:linear-gradient(135deg, var(--acento1), var(--acento2));
  color:#fff;
  box-shadow:var(--sombra);
}
.botao-primario:hover{ opacity:.94; }

.botao-fantasma{
  background:transparent;
  border-color:var(--linha);
  color:var(--texto);
}
.botao-fantasma:hover{ background:var(--linha); }

.botao-perigo{
  background:transparent;
  border-color:var(--linha);
  color:var(--erro);
}
.botao-perigo:hover{ background:var(--linha); }

.botao-pequeno{
  padding:7px 12px;
  min-height:36px;
  font-size:13px;
}

.botao-full{ width:100%; }

input[type="text"], input[type="date"], input[type="password"], input[type="search"], textarea, select{
  font:inherit;
  border:1px solid var(--linha);
  border-radius:10px;
  padding:11px 14px;
  background:var(--painel);
  color:var(--texto);
  width:100%;
}
input:focus, textarea:focus, select:focus{
  outline:2px solid var(--acento1);
  outline-offset:1px;
}
textarea{ resize:vertical; min-height:64px; }

label{
  display:flex;
  flex-direction:column;
  gap:6px;
  font-weight:600;
  font-size:13px;
  color:var(--fraco);
}

.estado-info, .estado-vazio{
  color:var(--fraco);
  padding:24px 0;
  text-align:center;
}

.estado-erro{
  background:var(--painel);
  border:1px solid var(--erro);
  color:var(--erro);
  border-radius:16px;
  padding:16px;
  margin:16px 0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}

.erro-form{
  color:var(--erro);
  font-size:13px;
  margin:0;
}

.secao{
  background:var(--painel);
  border:1px solid var(--linha);
  border-radius:16px;
  box-shadow:var(--sombra);
  padding:18px;
  margin-bottom:20px;
}

.secao-cabecalho{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:14px;
  flex-wrap:wrap;
}

.filtros{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  margin-bottom:14px;
}
.filtros input{ flex:1 1 200px; }

.filtro-toggle{
  flex-direction:row;
  align-items:center;
  gap:8px;
  font-weight:500;
  color:var(--texto);
  white-space:nowrap;
}
.filtro-toggle input{ width:auto; min-height:auto; accent-color:var(--acento1); }

.lista-tarefas, .lista-reunioes{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:10px;
}

.cartao-tarefa, .cartao-reuniao{
  border:1px solid var(--linha);
  border-radius:14px;
  padding:14px;
  display:flex;
  flex-direction:column;
  gap:8px;
}

.cartao-tarefa.atrasada{
  border-color:var(--erro);
  background:color-mix(in srgb, var(--erro) 7%, var(--painel));
}

.cartao-tarefa.concluida{
  opacity:.7;
}

.tarefa-topo{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:10px;
}

.tarefa-titulo{
  font-weight:600;
  word-break:break-word;
}

.tarefa-titulo.riscado{
  text-decoration:line-through;
  color:var(--fraco);
}

.badge{
  display:inline-flex;
  align-items:center;
  gap:4px;
  font-size:12px;
  font-weight:700;
  padding:3px 9px;
  border-radius:999px;
  white-space:nowrap;
}

.badge-atraso{
  background:var(--erro);
  color:#fff;
}

.badge-origem{
  background:var(--linha);
  color:var(--fraco);
  font-weight:600;
}

button.badge{
  appearance:none;
  border:none;
  cursor:pointer;
  font:inherit;
}

.badge-concluida{
  background:color-mix(in srgb, #16a34a 20%, transparent);
  color:#16a34a;
}

.tarefa-meta{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  font-size:13px;
  color:var(--fraco);
}

.tarefa-nota{
  font-size:13px;
  color:var(--fraco);
  border-left:2px solid var(--linha);
  padding-left:10px;
}

.tarefa-acoes{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-top:4px;
}

.cartao-reuniao-cabecalho{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  cursor:pointer;
  background:transparent;
  border:none;
  padding:0;
  text-align:left;
  font:inherit;
  color:inherit;
  width:100%;
}

.cartao-reuniao-titulo{ font-weight:600; }
.cartao-reuniao-data{ font-size:13px; color:var(--fraco); white-space:nowrap; }

.cartao-reuniao-overview{
  font-size:13px;
  color:var(--fraco);
}

.cartao-reuniao-detalhe{
  border-top:1px solid var(--linha);
  padding-top:10px;
  margin-top:4px;
  display:flex;
  flex-direction:column;
  gap:10px;
  font-size:13px;
}

.lista-participantes{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  list-style:none;
  padding:0;
  margin:0;
}
.lista-participantes li{
  background:var(--linha);
  border-radius:999px;
  padding:2px 10px;
  color:var(--fraco);
}

.lista-itens-acao{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:6px;
}

.item-acao{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  background:var(--bg);
  border:1px solid var(--linha);
  border-radius:10px;
  padding:8px 10px;
}

.item-acao-texto{ flex:1; }

.lista-tarefas-vinculadas{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:6px;
}

dialog.modal{
  border:none;
  border-radius:16px;
  padding:0;
  background:var(--painel);
  color:var(--texto);
  box-shadow:var(--sombra);
  width:min(480px, calc(100vw - 32px));
}
dialog.modal::backdrop{
  background:rgba(10,12,20,.5);
}

.form-modal{
  display:flex;
  flex-direction:column;
  gap:14px;
  padding:20px;
}

.form-acoes{
  display:flex;
  justify-content:flex-end;
  gap:10px;
  margin-top:4px;
}

.pagina-login{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:100vh;
  padding:16px;
}

.login-caixa{
  background:var(--painel);
  border:1px solid var(--linha);
  border-radius:16px;
  box-shadow:var(--sombra);
  padding:28px;
  width:min(380px, 100%);
}

.login-sub{
  color:var(--fraco);
  margin:0 0 18px;
  font-size:13px;
}

@media (max-width:600px){
  .app{ padding:14px 12px 48px; }
  .topo{ flex-wrap:wrap; }
  .secao{ padding:14px; border-radius:14px; }
  .tarefa-acoes .botao{ flex:1 1 auto; }
  .form-acoes{ flex-direction:column-reverse; }
  .form-acoes .botao{ width:100%; }
}