/* Fluxin · identidade Blocos (briefing, seção 7) */
:root {
  --preto: #111111; --gema: #FFC300; --gema-tint: #FFF1C2; --gema-texto: #5C4400;
  --folha: #00B37E; --folha-tint: #E3F7F0; --folha-texto: #0B6B4B;
  --azul: #2563EB; --azul-tint: #E7EEFD; --azul-texto: #1E40AF;
  --neve: #F5F5F2; --branco: #FFFFFF; --linha: #E2E2DC; --suave: #555555;
  --meia-lua: #111111;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--neve); color: var(--preto); font-family: Manrope, system-ui, sans-serif; font-variant-numeric: tabular-nums; -webkit-font-smoothing: antialiased; }

.logo { display: flex; align-items: center; gap: 10px; }
.logo svg { width: 34px; height: 34px; }
.logo span { font-weight: 800; font-size: 28px; letter-spacing: -0.05em; line-height: 1; }

/* Entrar */
.entrar { min-height: 100dvh; display: grid; grid-template-columns: minmax(0, 380px); justify-content: center; align-content: center; padding: 24px 16px; }
.entrar-caixa { width: 100%; background: var(--branco); border-radius: 20px; padding: 32px 28px; }
.entrar .logo { margin-bottom: 28px; }
.entrar .intro { margin: -12px 0 20px; font-weight: 600; font-size: 16px; }
.entrar form { display: grid; gap: 16px; }
.entrar label { display: grid; gap: 6px; font-size: 14px; font-weight: 600; }
.entrar input:not([type=checkbox]) { font: inherit; font-weight: 500; font-size: 16px; padding: 12px 14px; border: 2px solid var(--linha); border-radius: 12px; background: var(--branco); color: var(--preto); }
.entrar input:focus { outline: none; border-color: var(--azul); }
.entrar .lembrar { display: flex; align-items: center; gap: 8px; font-weight: 500; color: var(--suave); }
.entrar .erro { margin: 0; padding: 10px 12px; border-radius: 10px; background: var(--preto); color: var(--branco); font-size: 14px; font-weight: 600; }
.entrar button { font: inherit; font-weight: 700; font-size: 16px; padding: 13px; border: 0; border-radius: 12px; background: var(--azul); color: var(--branco); cursor: pointer; }
.entrar button:hover { background: var(--azul-texto); }

/* App: menu lateral + principal (referência kanban_visao_geral) */
.app { min-height: 100dvh; display: flex; flex-wrap: wrap; }
.menu { flex: 1 1 248px; max-width: 100%; padding: 22px 14px; background: var(--branco); display: flex; flex-direction: column; gap: 24px; }
.menu .logo { padding: 0 8px; text-decoration: none; color: var(--preto); }
.menu .logo svg { width: 32px; height: 32px; }
.menu .logo span { font-size: 25px; }
.menu a { color: var(--preto); text-decoration: none; }
.menu-fixo { display: flex; flex-direction: column; gap: 2px; }
.menu-item { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 12px; font-size: 14px; font-weight: 600; }
.menu-item:hover { background: var(--neve); }
.menu-item.ativo { background: var(--preto); color: var(--branco); font-weight: 700; }
.menu-item .n { font-size: 12px; color: #666666; }
.menu-item.ativo .n { color: var(--branco); opacity: .7; }
.menu-item .badge { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--gema); font-size: 11px; font-weight: 800; display: flex; align-items: center; justify-content: center; }
.menu-grupo { display: flex; flex-direction: column; gap: 1px; margin-bottom: 20px; }
.menu-grupo h3 { margin: 0; padding: 0 10px 8px; font-size: 12px; font-weight: 800; color: #666666; }
.menu-quadro { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 10px; font-size: 14px; }
.menu-quadro:hover { background: var(--neve); }
.menu-quadro.ativo { background: var(--preto); color: var(--branco); }
.menu-quadro.ativo .n { color: var(--branco); opacity: .7; }
.menu-quadro .nome { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.menu-quadro .n { font-size: 12px; color: #666666; }
.menu-sair { margin-top: auto; padding: 10px; font-size: 13px; font-weight: 600; color: #666666 !important; }
.selo { width: 24px; height: 24px; flex: none; border-radius: 7px; border: 1.5px solid; font-size: 10px; font-weight: 800; display: flex; align-items: center; justify-content: center; letter-spacing: -0.02em; }
.selo.p { width: 22px; height: 22px; border-radius: 6px; font-size: 9px; }

.principal { flex: 999 1 560px; min-width: 0; padding: 26px 28px 32px; display: flex; flex-direction: column; gap: 18px; }
.topo { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px; }
.topo .data { font-size: 14px; font-weight: 600; color: #666666; }
.topo h1 { margin: 6px 0 0; font-size: 34px; font-weight: 800; letter-spacing: -0.04em; line-height: 1.05; }
.topo .resumo { margin: 8px 0 0; font-size: 16px; color: #3A3A3A; }
.topo-acoes { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.vistas { display: flex; padding: 3px; border-radius: 12px; background: #E9E9E4; }
.vistas button { padding: 8px 14px; border: 0; border-radius: 9px; background: transparent; font: inherit; font-size: 13px; font-weight: 600; color: #3A3A3A; cursor: pointer; }
.vistas button[aria-pressed=true] { background: var(--branco); font-weight: 800; color: var(--preto); }
.vistas button:disabled { cursor: default; opacity: .55; }
.btn-azul { height: 42px; padding: 0 18px; border: 0; border-radius: 12px; background: var(--azul); color: var(--branco); font: inherit; font-size: 14px; font-weight: 800; cursor: pointer; }
.btn-azul:hover { background: var(--azul-texto); }

.filtros { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 10px; border-radius: 16px; background: var(--branco); }
.busca { display: flex; align-items: center; gap: 8px; height: 38px; padding: 0 12px; border-radius: 10px; background: var(--neve); min-width: 220px; }
.busca input { border: 0; outline: none; background: transparent; font: inherit; font-size: 14px; width: 160px; }
.chip { position: relative; height: 38px; display: flex; align-items: center; gap: 6px; padding: 0 12px; border-radius: 10px; border: 1.5px solid var(--linha); background: var(--branco); font-size: 13px; font-weight: 700; }
.chip .v { font-weight: 800; color: var(--suave); }
.chip.ativo { border-color: var(--preto); }
.chip.ativo .v { color: var(--preto); }
.chip select { position: absolute; inset: 0; opacity: 0; cursor: pointer; font: inherit; }
.filtros .ordem { margin-left: auto; font-size: 13px; font-weight: 700; color: #666666; }
.limpar { height: 38px; padding: 0 12px; border: 0; border-radius: 10px; background: transparent; font: inherit; font-size: 13px; font-weight: 800; color: var(--azul); cursor: pointer; }

.rolagem { overflow-x: auto; padding-bottom: 8px; }
.colunas { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(244px, 1fr); gap: 14px; align-items: start; }
.coluna { display: flex; flex-direction: column; gap: 10px; border-radius: 20px; padding: 12px; min-height: 120px; transition: box-shadow .15s; }
.coluna.alvo { box-shadow: inset 0 0 0 2px var(--azul); }
.coluna-topo { display: flex; align-items: center; gap: 8px; padding: 4px 6px 6px; }
.coluna-topo svg { width: 18px; height: 18px; flex: none; }
.coluna-topo h2 { margin: 0; flex: 1; font-size: 15px; font-weight: 800; }
.coluna-topo .n { font-size: 13px; font-weight: 800; color: #555555; }
.card { display: flex; flex-direction: column; gap: 10px; padding: 14px; background: var(--branco); border-radius: 16px; cursor: grab; user-select: none; }
.card:hover { box-shadow: 0 2px 10px rgba(17,17,17,.07); }
.card.arrastando { opacity: .4; }
.card-topo { display: flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 700; color: #555555; min-width: 0; }
.card-topo .rot { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card-topo .forma { margin-left: auto; width: 14px; height: 14px; flex: none; }
.card-titulo { font-size: 15px; font-weight: 700; line-height: 1.35; letter-spacing: -0.01em; overflow-wrap: anywhere; }
.card.feito .card-titulo { text-decoration: line-through; color: #777777; }
.card-pe { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.card-pe .esq { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.etiqueta { padding: 4px 9px; border-radius: 8px; font-size: 12px; font-weight: 800; background: var(--neve); color: #3A3A3A; }
.etiqueta.hoje { background: var(--gema-tint); color: var(--gema-texto); }
.etiqueta.atrasada { background: var(--preto); color: var(--branco); }
.etiqueta.feita { background: var(--folha-tint); color: var(--folha-texto); }
.etiqueta.sem { background: transparent; border: 1.5px dashed #CFCFC8; color: #666666; }
.etiqueta.espera { background: var(--azul-tint); color: var(--azul-texto); }
.alta { font-size: 12px; font-weight: 800; }
.urg { font-size: 11px; font-weight: 800; padding: 3px 7px; border-radius: 6px; background: var(--preto); color: var(--branco); }
.avatar { width: 26px; height: 26px; flex: none; border-radius: 50%; font-size: 10px; font-weight: 800; display: flex; align-items: center; justify-content: center; }
.vazio { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 26px 12px; border-radius: 16px; border: 2px dashed #CFCFC8; text-align: center; }
.vazio svg { width: 44px; height: 44px; }
.vazio strong { font-size: 14px; font-weight: 800; }
.vazio span { font-size: 13px; color: var(--suave); }
.ver-mais { padding: 10px; border: 0; border-radius: 12px; background: rgba(17,17,17,.06); font: inherit; font-size: 13px; font-weight: 800; color: var(--preto); cursor: pointer; }

.carregando { display: grid; place-items: center; min-height: 50vh; }
.carregando svg { width: 56px; height: 56px; }
.pulo > * { animation: pulo 1.2s infinite ease-in-out; transform-box: fill-box; transform-origin: center; }
.pulo > :nth-child(2) { animation-delay: .15s; } .pulo > :nth-child(3) { animation-delay: .3s; } .pulo > :nth-child(4) { animation-delay: .45s; }
@keyframes pulo { 0%, 60%, 100% { transform: translateY(0); } 30% { transform: translateY(-14%); } }
.aviso-erro { padding: 12px 14px; border-radius: 12px; background: var(--preto); color: var(--branco); font-weight: 600; }

@media (max-width: 700px) {
  .menu { padding: 16px; gap: 14px; }
  #menu-grupos { display: flex; gap: 16px; overflow-x: auto; }
  .menu-grupo { margin: 0; min-width: 200px; }
  .menu-sair { display: none; }
  .principal { padding: 20px 16px 28px; }
  .topo h1 { font-size: 28px; }
  .busca { min-width: 0; flex: 1 1 100%; }
  .filtros .ordem { display: none; }
  .colunas { grid-auto-columns: minmax(84vw, 1fr); }
}

/* Materiais do cliente: botão no topo do quadro + painel lateral */
.btn-claro { height: 42px; padding: 0 16px; border: 0; border-radius: 12px; background: var(--branco); color: var(--preto); font: inherit; font-size: 14px; font-weight: 800; cursor: pointer; display: flex; align-items: center; gap: 8px; }
.btn-claro span { min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; background: var(--neve); font-size: 12px; display: flex; align-items: center; justify-content: center; }
.btn-claro:hover { background: #EDEDE8; }
.painel-fundo { position: fixed; inset: 0; background: rgba(17,17,17,.28); display: flex; justify-content: flex-end; z-index: 50; }
.painel { width: min(460px, 100%); height: 100%; overflow-y: auto; background: var(--neve); padding: 22px 20px 32px; display: flex; flex-direction: column; gap: 14px; }
.painel-topo { display: flex; align-items: center; gap: 10px; }
.painel-topo h2 { margin: 0; flex: 1; font-size: 22px; font-weight: 800; letter-spacing: -0.03em; }
.fechar { width: 38px; height: 38px; border: 0; border-radius: 10px; background: var(--branco); font: inherit; font-size: 22px; cursor: pointer; }
.material-novo { display: grid; grid-template-columns: 1fr auto; gap: 8px; background: var(--branco); padding: 12px; border-radius: 16px; }
.material-novo input { grid-column: 1 / -1; font: inherit; font-size: 15px; padding: 11px 12px; border: 2px solid var(--linha); border-radius: 10px; min-width: 0; }
.material-novo input:focus { outline: none; border-color: var(--azul); }
.material-novo input[name=titulo] { grid-column: 1; }
.material-novo .btn-azul { height: auto; }
.material { background: var(--branco); border-radius: 16px; padding: 14px; display: flex; flex-direction: column; gap: 8px; }
.material-topo { display: flex; align-items: baseline; gap: 10px; }
.material-topo a, .material-topo strong { flex: 1; color: var(--preto); font-weight: 800; }
.material-topo a { text-decoration: underline; text-decoration-color: var(--azul); text-underline-offset: 3px; }
.material .quando { font-size: 12px; font-weight: 700; color: #666666; }
.material p { margin: 0; font-size: 14px; line-height: 1.5; color: #3A3A3A; overflow-wrap: anywhere; }
.material p a { color: var(--azul-texto); }

/* Card aberto (referência lista_e_tarefa_aberta) */
.card-aberto { width: min(600px, 100%); background: var(--branco); padding: 0; gap: 0; }
.faixa { height: 8px; flex: none; display: grid; grid-template-columns: repeat(4, 1fr); }
.card-corpo { padding: 20px 24px 32px; display: flex; flex-direction: column; gap: 16px; }
.card-acoes { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.estado { position: relative; display: flex; align-items: center; gap: 7px; height: 34px; padding: 0 12px; border-radius: 10px; font-size: 13px; font-weight: 800; cursor: pointer; }
.estado svg { width: 14px; height: 14px; }
.estado select { position: absolute; inset: 0; opacity: 0; cursor: pointer; font: inherit; }
.btn-contorno { height: 34px; padding: 0 12px; border-radius: 10px; border: 1.5px solid var(--linha); background: var(--branco); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; color: var(--preto); }
.btn-contorno:hover { border-color: var(--preto); }
.card-acoes .fechar { margin-left: auto; background: var(--neve); }
.pai { font-size: 13px; font-weight: 700; color: var(--suave); text-decoration: none; }
.titulo-edit { font: inherit; font-size: 26px; font-weight: 800; letter-spacing: -0.03em; line-height: 1.2; border: 0; resize: none; padding: 4px 6px; margin: 0 -6px; border-radius: 10px; color: var(--preto); overflow: hidden; background: transparent; }
.titulo-edit:hover { background: var(--neve); }
.titulo-edit:focus { outline: 2px solid var(--azul); background: var(--branco); }
.campos { margin: 0; display: grid; grid-template-columns: 110px 1fr; gap: 8px 14px; font-size: 14px; align-items: center; }
.campos dt { color: var(--suave); font-weight: 600; }
.campos dd { margin: 0; font-weight: 700; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
.campos select, .campos input[type=date], .campos input[type=time] { font: inherit; font-weight: 700; font-size: 14px; border: 1.5px solid transparent; border-radius: 8px; padding: 5px 6px; background: transparent; color: var(--preto); max-width: 100%; }
.campos select:hover, .campos input:hover { border-color: var(--linha); }
.campos select:focus, .campos input:focus { outline: none; border-color: var(--azul); }
.campos input.hoje { background: var(--gema-tint); color: var(--gema-texto); }
.campos input.atrasada { background: var(--preto); color: var(--branco); }
.com-avatar { display: flex; align-items: center; gap: 6px; }
.com-avatar .avatar { width: 24px; height: 24px; }
.datas { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.aviso-data { flex-basis: 100%; font-size: 12px; font-weight: 700; color: var(--gema-texto); background: var(--gema-tint); padding: 4px 8px; border-radius: 7px; }
.urgente { display: flex; align-items: center; gap: 5px; font-weight: 700; }
.tambem { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.bloco { display: flex; flex-direction: column; gap: 8px; padding-top: 14px; border-top: 1px solid #EFEFEA; }
.bloco h3 { margin: 0; display: flex; justify-content: space-between; font-size: 15px; font-weight: 800; }
.bloco h3 span { font-size: 13px; color: var(--suave); }
.bloco h4 { margin: 6px 0 0; font-size: 13px; font-weight: 800; color: var(--suave); }
.descricao { font: inherit; font-size: 14px; line-height: 1.5; border: 1.5px solid var(--linha); border-radius: 12px; padding: 10px 12px; resize: vertical; min-height: 70px; }
.descricao:focus, .adicionar input:focus, .comentar textarea:focus { outline: none; border-color: var(--azul); }
.item { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 600; }
.item input { width: 18px; height: 18px; accent-color: var(--folha); flex: none; }
.item.feito span, .item.feito a { text-decoration: line-through; color: #777777; }
.item.sub a { flex: 1; color: var(--preto); text-decoration: none; }
.item .quando, .comentario .quando, .evento .quando, .ref em, .versao em { font-size: 12px; font-weight: 600; color: #777777; font-style: normal; }
.avatar.mini { width: 20px; height: 20px; font-size: 8px; }
.adicionar { display: flex; gap: 8px; }
.adicionar input, .adicionar select { flex: 1; font: inherit; font-size: 14px; border: 1.5px dashed #CFCFC8; border-radius: 10px; padding: 8px 10px; background: transparent; min-width: 0; }
.adicionar select { flex: 0 0 auto; border-style: solid; }
.tempo-form .btn-azul { height: auto; padding: 0 14px; }
.versoes { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; }
.versao { border: 2px solid #EFEFEA; border-radius: 12px; padding: 10px; display: flex; flex-direction: column; gap: 4px; font-size: 12px; min-width: 0; }
.versao.atual { border-color: var(--azul); }
.versao strong { font-size: 13px; }
.versao span, .versao a { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #3A3A3A; }
.ref { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; font-weight: 600; }
.ref a, .versao a { color: var(--azul-texto); }
.nota { margin: 0; font-size: 12px; color: #777777; }
.tempo { background: var(--neve); border: 0; border-radius: 14px; padding: 14px; }
.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chips span { padding: 4px 8px; border-radius: 7px; background: var(--branco); font-size: 12px; font-weight: 700; }
.atividade { gap: 12px; }
.comentario { display: flex; gap: 10px; }
.comentario .avatar { width: 28px; height: 28px; }
.comentario > div { flex: 1; min-width: 0; font-size: 13px; }
.comentario p { margin: 4px 0 6px; font-size: 14px; line-height: 1.5; overflow-wrap: anywhere; }
.comentario p a { color: var(--azul-texto); }
.reacao { border: 0; background: var(--neve); border-radius: 8px; padding: 3px 8px; font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; color: var(--suave); }
.reacao.minha { background: var(--azul-tint); color: var(--azul-texto); }
.evento { font-size: 12px; color: var(--suave); padding-left: 38px; line-height: 1.5; }
.evento strong { color: #3A3A3A; }
.sugestao { margin: 0; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 12px; border-radius: 12px; background: var(--azul-tint); color: var(--azul-texto); font-size: 13px; font-weight: 700; }
.sugestao.ok { background: var(--folha-tint); color: var(--folha-texto); }
.comentar { display: flex; gap: 8px; align-items: flex-end; padding: 8px 8px 8px 12px; border-radius: 14px; border: 1.5px solid var(--linha); }
.comentar textarea { flex: 1; border: 0; outline: none; font: inherit; font-size: 14px; resize: none; }
.comentar .btn-azul { height: 36px; padding: 0 14px; font-size: 13px; }
@media (max-width: 700px) { .card-corpo { padding: 16px 16px 28px; } .campos { grid-template-columns: 1fr; gap: 2px; } .campos dt { margin-top: 8px; } .titulo-edit { font-size: 22px; } }

/* Etapa 5: vistas, lista, minhas tarefas, calendário, filtros salvos */
.vistas a { padding: 8px 14px; border-radius: 9px; font-size: 13px; font-weight: 600; color: #3A3A3A; text-decoration: none; }
.vistas a[aria-pressed=true] { background: var(--branco); font-weight: 800; color: var(--preto); }
.salvos { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12px; font-weight: 800; color: #666666; margin-bottom: -8px; }
.salvo { display: inline-flex; align-items: center; border-radius: 10px; background: var(--branco); overflow: hidden; }
.salvo button { border: 0; background: transparent; font: inherit; font-size: 13px; font-weight: 700; color: var(--preto); padding: 7px 10px; cursor: pointer; }
.salvo .tira { color: #999999; padding: 7px 9px 7px 2px; }
.salvo button:hover { background: var(--neve); }
.chip.periodo { gap: 6px; }
.chip.periodo input { font: inherit; font-size: 13px; font-weight: 700; border: 0; background: var(--neve); border-radius: 7px; padding: 4px 6px; }
.tabela { background: var(--branco); border-radius: 16px; overflow: hidden; }
.tabela-cab, .linha { display: grid; grid-template-columns: 26px minmax(0, 2.4fr) minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, .9fr) minmax(0, .7fr) minmax(0, .6fr); gap: 12px; align-items: center; padding: 10px 18px; }
.tabela-cab { padding: 12px 18px; background: #FAFAF8; font-size: 12px; font-weight: 800; color: #555555; }
.tabela-cab button { border: 0; background: transparent; font: inherit; color: inherit; text-align: left; cursor: pointer; padding: 0; }
.tabela-cab button.ativa { color: var(--preto); }
.linha { font-size: 14px; border-top: 1px solid #F2F2EE; cursor: pointer; }
.linha:hover { background: #FAFAF8; }
.linha:focus { outline: 2px solid var(--azul); outline-offset: -2px; }
.linha.hoje { background: #FFF6DA; box-shadow: inset 3px 0 0 var(--gema); }
.linha svg { width: 18px; height: 18px; }
.linha .t { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.linha.feito .t { text-decoration: line-through; color: #777777; }
.linha .cli { display: flex; align-items: center; gap: 6px; min-width: 0; }
.linha .cli span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #3A3A3A; }
.linha .pri { font-weight: 800; }
.linha .sec { color: #555555; }
.linha > span:nth-child(4) { display: flex; align-items: center; gap: 6px; }
.grupo-minhas { display: flex; flex-direction: column; gap: 8px; }
.grupo-minhas h2 { margin: 6px 0 0; font-size: 15px; font-weight: 800; display: flex; gap: 8px; align-items: center; }
.grupo-minhas h2 span { font-size: 13px; color: #555555; }
.vazio.grande { background: var(--branco); border: 0; padding: 48px 16px; }
.vazio.grande svg { width: 64px; height: 64px; }
.cal { background: var(--branco); border-radius: 16px; padding: 14px; display: flex; flex-direction: column; gap: 12px; }
.cal-topo { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cal-topo h2 { margin: 0 8px 0 4px; font-size: 20px; font-weight: 800; letter-spacing: -0.03em; }
.cal-topo .nota { margin-left: auto; }
.cal-grade { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.cal-sem { font-size: 12px; font-weight: 800; color: #666666; padding: 0 6px; }
.cal-dia { min-height: 118px; border-radius: 12px; background: #FAFAF8; padding: 6px; display: flex; flex-direction: column; gap: 4px; min-width: 0; transition: box-shadow .15s; }
.cal-dia.fora { background: transparent; }
.cal-dia.hoje { background: #FFF6DA; }
.cal-dia.alvo { box-shadow: inset 0 0 0 2px var(--azul); }
.cal-num { font-size: 12px; font-weight: 800; color: #555555; padding: 2px 4px; }
.cal-dia.hoje .cal-num { color: var(--gema-texto); }
.cal-item { display: flex; align-items: center; gap: 5px; border: 0; background: var(--branco); border-radius: 7px; padding: 4px 6px; font: inherit; font-size: 12px; font-weight: 700; text-align: left; cursor: pointer; min-width: 0; color: var(--preto); }
.cal-item svg { width: 11px; height: 11px; flex: none; }
.cal-item span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-item.feito span { text-decoration: line-through; color: #888888; }
.cal-item.atrasada { background: var(--preto); color: var(--branco); }
.cal-item.arrastando { opacity: .4; }
.cal-mais { font-size: 11px; font-weight: 800; color: #666666; padding: 0 4px; }
@media (max-width: 700px) {
  .tabela-cab { display: none; }
  .linha { grid-template-columns: 22px 1fr auto; padding: 12px 14px; }
  .linha > span:nth-child(3), .linha > span:nth-child(4), .linha > span:nth-child(6), .linha > span:nth-child(7) { display: none; }
  .cal-grade { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 3px; }
  .cal-dia { min-height: 64px; padding: 3px; }
  .cal-item span { display: none; }
  .cal-topo .nota { display: none; }
}

/* Perfil */
img.avatar { object-fit: cover; padding: 0; }
.menu-perfil { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px; font-size: 14px; font-weight: 700; margin-top: auto; }
.menu-perfil:hover { background: var(--neve); }
.menu-perfil.ativo { background: var(--preto); color: var(--branco) !important; }
.menu-perfil + .menu-sair { margin-top: 0; }
.perfil { display: grid; gap: 16px; max-width: 760px; }
.perfil-bloco { background: var(--branco); border-radius: 18px; padding: 20px; display: flex; flex-direction: column; gap: 14px; }
.perfil-bloco h2 { margin: 0; font-size: 18px; font-weight: 800; letter-spacing: -0.02em; }
.perfil-foto { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.perfil-foto img, .avatar.grande { width: 88px; height: 88px; border-radius: 50%; object-fit: cover; font-size: 28px; }
.perfil-foto > div { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.arquivo { position: relative; display: inline-flex; align-items: center; cursor: pointer; }
.arquivo input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.perfil-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; align-items: end; }
.perfil-form label { display: grid; gap: 6px; font-size: 13px; font-weight: 700; color: var(--suave); }
.perfil-form input, .perfil-form select { font: inherit; font-size: 15px; font-weight: 600; color: var(--preto); padding: 10px 12px; border: 2px solid var(--linha); border-radius: 12px; background: var(--branco); min-width: 0; }
.perfil-form input:focus, .perfil-form select:focus { outline: none; border-color: var(--azul); }
.perfil-form input:disabled { background: var(--neve); color: #777777; }
.perfil-form .btn-azul, .perfil-form .btn-contorno { height: 44px; justify-self: start; }
.silencio .rotulo { grid-column: 1 / -1; font-size: 14px; font-weight: 800; display: grid; gap: 2px; }
.silencio .rotulo em { font-style: normal; font-weight: 600; font-size: 13px; color: var(--suave); }
.prefs { display: flex; flex-direction: column; }
.prefs-cab, .prefs-linha { display: grid; grid-template-columns: 1fr 72px 72px 72px; align-items: center; gap: 8px; padding: 9px 0; }
.prefs-cab { font-size: 12px; font-weight: 800; color: var(--suave); text-align: center; }
.prefs-linha { border-top: 1px solid #F2F2EE; font-size: 14px; font-weight: 600; }
.liga { position: relative; display: flex; justify-content: center; cursor: pointer; }
.liga input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.liga span:first-of-type { width: 38px; height: 22px; border-radius: 11px; background: #E2E2DC; position: relative; transition: background .15s; }
.liga span:first-of-type::after { content: ''; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: var(--branco); transition: transform .15s; }
.liga input:checked + span { background: var(--folha); }
.liga input:checked + span::after { transform: translateX(16px); }
.liga input:focus-visible + span { outline: 2px solid var(--azul); outline-offset: 2px; }
.so-leitor { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
@media (max-width: 700px) { .prefs-cab, .prefs-linha { grid-template-columns: 1fr 52px 52px 52px; } .menu-perfil { margin-top: 0; } }

/* Arquivos (etapa 6) */
.enviar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.enviar .btn-azul.arquivo { height: 36px; padding: 0 14px; font-size: 13px; }
.tempo-envio { flex: 1 1 180px; font: inherit; font-size: 13px; border: 1.5px dashed #CFCFC8; border-radius: 10px; padding: 8px 10px; min-width: 0; }
.tempo-envio:focus { outline: none; border-color: var(--azul); }
.link-form { flex-wrap: wrap; }
.link-form .btn-azul { height: auto; padding: 0 14px; }
.progresso { display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 600; }
.progresso span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.progresso progress { flex: 0 0 140px; height: 8px; accent-color: var(--azul); }
.versao .mini { width: 100%; height: 70px; border-radius: 8px; object-fit: cover; background: var(--neve); }
.versao .mini.vazia { display: flex; flex-direction: column; gap: 5px; padding: 10px; }
.versao .mini.vazia i { display: block; height: 5px; border-radius: 3px; background: #E2E2DC; }
.versao .mini.vazia i:nth-child(1) { width: 70%; background: #DADAD3; } .versao .mini.vazia i:nth-child(2) { width: 90%; } .versao .mini.vazia i:nth-child(3) { width: 55%; }
.card-aberto.soltando { box-shadow: inset 0 0 0 3px var(--azul); }

/* Privacidade e termos (públicas) */
.legal { max-width: 680px; margin: 0 auto; padding: 32px 16px 64px; line-height: 1.6; }
.legal .logo { text-decoration: none; color: var(--preto); margin-bottom: 28px; }
.legal h1 { font-size: 32px; font-weight: 800; letter-spacing: -0.04em; margin: 0; }
.legal h2 { font-size: 18px; font-weight: 800; margin: 28px 0 6px; }
.legal p { margin: 0 0 10px; color: #3A3A3A; }
.legal .data { color: #777777; font-size: 14px; }
.legal .en { margin-top: 32px; padding: 14px 16px; background: var(--branco); border-radius: 14px; font-size: 14px; }
.link-form[hidden] { display: none; }

/* Aprovação (etapa 7) */
.faixa-aprovacao { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; border-radius: 14px; background: var(--azul-tint); }
.faixa-aprovacao > div:first-child { display: grid; gap: 2px; }
.faixa-aprovacao strong { font-size: 15px; font-weight: 800; color: var(--azul-texto); }
.faixa-aprovacao span { font-size: 13px; font-weight: 600; color: var(--azul-texto); opacity: .8; }
.faixa-botoes { display: flex; gap: 8px; flex-wrap: wrap; }
.btn-aprovar, .btn-ajuste { height: 40px; padding: 0 16px; border-radius: 12px; background: var(--branco); font: inherit; font-size: 14px; font-weight: 800; color: var(--preto); cursor: pointer; }
.btn-aprovar { border: 2px solid var(--azul); }
.btn-aprovar:hover { background: var(--azul); color: var(--branco); }
.btn-ajuste { border: 2px solid var(--preto); }
.btn-ajuste:hover { background: var(--preto); color: var(--branco); }
.pedir-ajuste { flex-basis: 100%; display: grid; gap: 8px; }
.pedir-ajuste[hidden] { display: none; }
.pedir-ajuste textarea { font: inherit; font-size: 14px; border: 2px solid var(--linha); border-radius: 12px; padding: 10px 12px; resize: vertical; }
.pedir-ajuste textarea:focus { outline: none; border-color: var(--preto); }
.pedir-ajuste .btn-azul { justify-self: start; }
.btn-enviar-aprovacao { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; height: 40px; padding: 0 16px; border-radius: 12px; border: 2px solid var(--azul); background: var(--branco); font: inherit; font-size: 14px; font-weight: 800; cursor: pointer; color: var(--preto); }
.btn-enviar-aprovacao svg { width: 14px; height: 14px; }
.btn-enviar-aprovacao:hover { background: var(--azul-tint); }
.tempo-form select { flex: 0 1 auto; max-width: 140px; }

/* Avisos (sininho) */
.avisos { display: flex; flex-direction: column; background: var(--branco); border-radius: 16px; overflow: hidden; max-width: 820px; }
.aviso { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border: 0; border-top: 1px solid #F2F2EE; background: var(--branco); font: inherit; text-align: left; cursor: pointer; color: var(--preto); }
.aviso:first-child { border-top: 0; }
.aviso:hover { background: #FAFAF8; }
.aviso.novo { background: #FFF6DA; box-shadow: inset 3px 0 0 var(--gema); }
.aviso .avatar { width: 32px; height: 32px; }
.aviso .avatar svg { width: 18px; height: 18px; }
.aviso-texto { flex: 1; min-width: 0; display: grid; gap: 3px; }
.aviso-texto strong { font-size: 14px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aviso-texto span { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: #666666; }
.aviso > svg { width: 16px; height: 16px; flex: none; }