@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&family=IBM+Plex+Sans:wght@400;500;600;700&family=Newsreader:opsz,wght@6..72,400;6..72,500;6..72,600&display=swap");
@import url("visual.css");
@import url("bolso.css");   /* os quadros de bolso do manual (gerado por web/testes/gerar-bolso.py) */

/* Tokens — claro (padrão) */
:root {
  --menu: #1B2329; --menu-ativo: #26313A; --menu-tx: #E8ECEA; --menu-eu: #232D35;
  --acento: #39B54A; --acento-claro: #7FC15E;
  --fundo: #EEF0ED; --cartao: #FFFFFF; --tinta: #151C22; --fraca: #5E6A66; --linha: #D2D6D0;
  --verde: #2F736F; --alerta: #A8503F; --piloto: #8E6913;
  --campo: #A85B2B; --chip: #151C22; --chip-tx: #FFFFFF; --sobre-verde: #FFFFFF; --sobre-alerta: #FFFFFF;
  --alerta-fundo: #F6E6E1; --ok-fundo: #E1EFEC; --info-fundo: #E6E9E5;
  /* concluído (feito, no prazo, resolvido): verde de verdade — o petróleo (--verde) fica para botão e marca (08/10) */
  --feito: #2E8540; --feito-fundo: #E3F2E5; --sobre-feito: #FFFFFF;
  /* Meu dia: etiquetas de tipo, cabeçalho de grupo, divisória fina, borda do setor em dia */
  --tipo-oc: #2F736F; --tipo-oc-fundo: #E1EFEC; --tipo-ro: #3E4A46; --tipo-ro-fundo: #E6E9E5;
  --tipo-ta: #5B4A7A; --tipo-ta-fundo: #ECE6F2; --tipo-le: #8E6913; --tipo-le-fundo: #F3ECD9;
  --grupo-fundo: #F6F7F5; --linha-fina: #ECEEEA; --setor-ok: #9DB8B3;
  --atencao: #8E6913;   /* painel: o tom "atenção" (●) */
  color-scheme: light;
}
/* escuro, quando o Windows está no escuro e ninguém forçou o claro */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --menu: #0E1317; --menu-ativo: #1C252C; --menu-tx: #D9DFDC; --menu-eu: #161E24;
    --fundo: #151B20; --cartao: #1C242A; --tinta: #E6EAE8; --fraca: #93A19B; --linha: #2B353C;
    --verde: #5FB3A9; --alerta: #E08A76; --campo: #E0A36F; --chip: #2F736F; --sobre-verde: #0E1317; --sobre-alerta: #1A0F0C;
    --alerta-fundo: #35241F; --ok-fundo: #1B302E; --info-fundo: #232C32; --feito: #6CC686; --feito-fundo: #17301F; --sobre-feito: #0E1317;
    --tipo-oc: #7FCFC4; --tipo-oc-fundo: #1B302E; --tipo-ro: #B4C0BB; --tipo-ro-fundo: #232C32;
    --tipo-ta: #BBA8DD; --tipo-ta-fundo: #2A2436; --tipo-le: #D9B45A; --tipo-le-fundo: #33291A;
    --grupo-fundo: #182026; --linha-fina: #252F35; --setor-ok: #4E6A66; --atencao: #D9B45A;
    color-scheme: dark;
  }
}
/* escuro, quando o botão ◐ forçou */
:root[data-theme="dark"] {
  --menu: #0E1317; --menu-ativo: #1C252C; --menu-tx: #D9DFDC; --menu-eu: #161E24;
  --fundo: #151B20; --cartao: #1C242A; --tinta: #E6EAE8; --fraca: #93A19B; --linha: #2B353C;
  --verde: #5FB3A9; --alerta: #E08A76; --campo: #E0A36F; --chip: #2F736F; --sobre-verde: #0E1317; --sobre-alerta: #1A0F0C;
  --alerta-fundo: #35241F; --ok-fundo: #1B302E; --info-fundo: #232C32; --feito: #6CC686; --feito-fundo: #17301F; --sobre-feito: #0E1317;
  --tipo-oc: #7FCFC4; --tipo-oc-fundo: #1B302E; --tipo-ro: #B4C0BB; --tipo-ro-fundo: #232C32;
  --tipo-ta: #BBA8DD; --tipo-ta-fundo: #2A2436; --tipo-le: #D9B45A; --tipo-le-fundo: #33291A;
  --grupo-fundo: #182026; --linha-fina: #252F35; --setor-ok: #4E6A66; --atencao: #D9B45A;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--fundo); color: var(--tinta); font: 14px/1.5 "IBM Plex Sans", system-ui, sans-serif; }
h1, h2 { font-family: Newsreader, Georgia, serif; font-weight: 500; line-height: 1.1; margin: 0; }
h1 { font-size: 25px; }
h2 { font-size: 20px; }
.mono { font-family: "IBM Plex Mono", monospace; font-size: 12px; color: var(--fraca); }
.dia { font: 12px "IBM Plex Mono", monospace; color: var(--fraca); margin-top: 3px; }
.dia.dia-cabecalho { margin: 0 0 10px; }   /* o cabeçalho do resolver (tipo · data · taxa · ª da janela), acima do formulário */
:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }

/* Etiqueta */
.etiqueta { display: inline-block; font: 600 10px "IBM Plex Mono", monospace; letter-spacing: .08em; text-transform: uppercase; padding: 2px 7px; border-radius: 4px; background: var(--chip); color: var(--chip-tx); white-space: nowrap; }
.etiqueta.piloto { background: var(--piloto); color: #fff; padding: 3px 9px; border-radius: 99px; }
.etiqueta.estado { background: transparent; color: var(--fraca); border: 1px solid var(--linha); letter-spacing: .06em; }

/* Botão */
.botao { font: 600 13px "IBM Plex Sans", sans-serif; padding: 8px 16px; border-radius: 8px; cursor: pointer; background: var(--cartao); color: var(--tinta); border: 1px solid var(--linha); }
.botao:hover { border-color: var(--verde); }
.botao.principal { background: var(--verde); color: var(--sobre-verde); border-color: var(--verde); }
.botao.principal:hover { filter: brightness(1.08); }
.botao:disabled { opacity: .45; cursor: not-allowed; }

/* Marca de três valores */
.marca3 { display: inline-flex; flex-wrap: wrap; border: 1px solid var(--linha); border-radius: 8px; overflow: hidden; background: var(--cartao); }
.marca { font: 500 13px "IBM Plex Sans", sans-serif; padding: 7px 13px; background: transparent; color: var(--tinta); border: 0; border-left: 1px solid var(--linha); cursor: pointer; }
.marca:first-child { border-left: 0; }
.marca:hover { background: var(--info-fundo); }
.marca.ativa { font-weight: 600; }
.marca.ativa.neutro { background: var(--info-fundo); box-shadow: inset 0 -3px 0 var(--fraca); }
.marca.ativa.ok { background: var(--feito); color: var(--sobre-feito); }
.marca.ativa.alerta { background: var(--alerta); color: var(--sobre-alerta); }
.marca:disabled { cursor: not-allowed; }   /* travada: o valor aparece, mas só quem pode o escolhe (ex.: Exceção da direção para a recepção) */

/* Campo: é o que alguém preenche — no app, rótulo em tinta e borda inteira */
.campo { display: flex; flex-direction: column; gap: 4px; margin-bottom: 14px; }
.campo label { font-weight: 600; font-size: 13px; color: var(--tinta); align-self: flex-start; }   /* rótulo em tinta no app (direção, 08/10 noite); o laranja fica nos manuais */
.campo .obrigatorio { color: var(--alerta); margin-left: 3px; display: inline-block; }
.campo input, .campo select, .campo textarea { font: 14px "IBM Plex Sans", sans-serif; color: var(--tinta); background: var(--cartao); border: 1px solid var(--linha); border-radius: 8px; padding: 9px 11px; width: 100%; max-width: 420px; }
.campo input:focus, .campo select:focus, .campo textarea:focus, .conv-escrever textarea:focus { outline: none; border-color: var(--verde); box-shadow: 0 0 0 3px var(--ok-fundo); }
.campo textarea { max-width: 560px; resize: vertical; }
.campo [aria-invalid="true"] { border-color: var(--alerta); border-bottom: 2px solid var(--alerta); background: var(--alerta-fundo); }
.campo .marca3 { align-self: flex-start; }
.campo .nota { font-size: 12px; color: var(--fraca); }
.campo .erro { font-size: 12.5px; font-weight: 600; color: var(--alerta); }
.campo .auto { padding: 6px 0; color: var(--tinta); font-size: 13px; }
.campo.so-leitura label { color: var(--fraca); text-decoration: none; }

/* Aviso */
.aviso { padding: 9px 13px; border-radius: 8px; border: 1px solid var(--linha); border-left-width: 4px; background: var(--info-fundo); margin: 8px 0; font-size: 13px; }
.aviso.ok { background: var(--feito-fundo); border-left-color: var(--feito); }
.aviso.alerta { background: var(--alerta-fundo); border-left-color: var(--alerta); color: var(--alerta); font-weight: 600; }
.aviso.info { border-left-color: var(--fraca); }
.aviso .aviso-titulo { font-weight: 700; }
.aviso ol { margin: 6px 0 2px; padding-left: 22px; }
.aviso ol li { margin: 2px 0; }
.aviso.alerta ol { font-weight: 500; }

/* Bloco */
.bloco { background: var(--cartao); border: 1px solid var(--linha); border-top: 3px solid var(--verde); border-radius: 10px; padding: 11px 14px; }
.bloco-topo { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 4px; }
.bloco-topo h3 { margin: 0; font: 600 14px "IBM Plex Sans", sans-serif; }
.bloco .contagem { font-weight: 600; background: var(--info-fundo); border-radius: 9px; padding: 1px 8px; }
.bloco .subtitulo { margin: 0 0 6px; font-size: 12px; color: var(--fraca); }
.bloco .vazio { margin: 6px 0; color: var(--fraca); font-style: italic; }

/* Linha */
.linha { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; padding: 7px 0; border-top: 1px solid var(--linha); font-size: 13px; width: 100%; text-align: left; }
.bloco-corpo > .linha:first-child { border-top: 0; }
.linha .l-texto { flex: 1 1 200px; min-width: 0; overflow-wrap: anywhere; }
.linha .l-tipo { color: var(--fraca); }
.linha .l-tipo::before { content: "· "; }
.linha .falta { color: var(--alerta); font-weight: 700; font-size: 12.5px; }
button.linha.clicavel { background: none; border-left: 0; border-right: 0; border-bottom: 0; color: inherit; font-family: inherit; cursor: pointer; padding-left: 6px; padding-right: 6px; border-radius: 6px; }
button.linha.clicavel:hover { background: var(--info-fundo); }

/* Casca: menu grafite + conteúdo */
.casca { display: grid; grid-template-columns: 220px minmax(0, 1fr); min-height: 100vh; }
.menu { background: var(--menu); color: var(--menu-tx); padding: 16px 10px; display: flex; flex-direction: column; gap: 2px; }
.menu .logo { padding: 2px 6px 4px; }
.menu .logo img { width: 100%; max-width: 178px; display: block; }
.menu .unidade { font: 500 10px "IBM Plex Mono", monospace; letter-spacing: .08em; text-transform: uppercase; color: var(--acento-claro); padding: 0 8px 12px; }
.menu-item { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 7px 9px; border-radius: 7px; font-weight: 500; color: inherit; text-decoration: none; background: none; border: 0; font-family: inherit; font-size: 14px; cursor: pointer; text-align: left; width: 100%; }
.menu-item:hover { background: var(--menu-eu); }
.menu-item.ativo { background: var(--menu-ativo); color: #fff; box-shadow: inset 3px 0 0 var(--acento); }
.menu-item.sub { padding-left: 24px; font-size: 13px; font-weight: 400; opacity: .9; }
.menu .grupo { font: 600 10px "IBM Plex Mono", monospace; letter-spacing: .08em; text-transform: uppercase; opacity: .55; padding: 12px 9px 4px; }
.menu .numero { font: 600 10px "IBM Plex Mono", monospace; border-radius: 9px; padding: 1px 6px; background: var(--alerta); color: var(--sobre-alerta); }
.menu .espaco { flex: 1; }
.menu .eu { font-size: 12px; padding: 8px 9px; border-radius: 7px; background: var(--menu-eu); display: flex; justify-content: space-between; align-items: center; gap: 6px; }
.menu .eu b { display: block; }
/* o menu é sempre escuro: etiqueta e seletor usam tons derivados do texto do menu, legíveis nos dois temas */
.menu { --menu-fraca: color-mix(in srgb, var(--menu-tx) 78%, var(--menu)); --menu-linha: color-mix(in srgb, var(--menu-tx) 45%, var(--menu)); }
.menu .etiqueta.estado { color: var(--menu-fraca); border-color: var(--menu-linha); letter-spacing: .03em; padding: 2px 5px; flex: none; }
.menu-item > span:first-child { min-width: 0; }   /* o nome quebra linha; a etiqueta não sai do menu */
.menu .ver-como { display: flex; align-items: center; gap: 6px; font: 500 10px "IBM Plex Mono", monospace; letter-spacing: .04em; padding: 6px 9px; color: var(--menu-fraca); }
.menu .ver-como select { font: 500 11px "IBM Plex Mono", monospace; background: var(--menu-eu); color: var(--menu-tx); border: 1px solid var(--menu-linha); border-radius: 5px; padding: 3px 6px; }
.menu .modo { background: none; border: 0; color: inherit; font-size: 16px; cursor: pointer; opacity: .85; }
.conteudo { padding: 18px 22px 64px; min-width: 0; }   /* 64px: o "Algo errado?" fixo no canto não cobre o último botão */
.topo { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 14px; }
.grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 12px; }

@media (max-width: 720px) {
  .casca { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; }   /* a coluna não cresce além da tela; o menu não estica */
  .menu { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 4px; padding: 10px; align-content: flex-start; }
  .menu .logo { width: 100%; }
  .menu .logo img { max-width: 150px; }
  .menu .unidade, .menu .grupo, .menu .espaco { display: none; }
  .menu-item { width: auto; padding: 6px 10px; }
  .menu-item.sub { padding-left: 10px; }
  .menu .eu { margin-left: auto; }
  .conteudo { padding: 14px 16px; }
  .grade { grid-template-columns: 1fr; }
}

/* Lista de Ocorrências (o registro): os dias, um bloco compacto cada */
.registro { display: grid; gap: 12px; }
.topo > .botao { flex: none; }
.linha .l-estado { font-size: 12.5px; color: var(--fraca); }
.linha .l-estado.ok { color: var(--feito); font-weight: 600; }

/* Meu dia (revisão 1): faixa do dia, lista de pendências por prazo, registradas hoje */
.etiqueta.tipo-ocorrencia { background: var(--tipo-oc-fundo); color: var(--tipo-oc); }
.etiqueta.tipo-rotina { background: var(--tipo-ro-fundo); color: var(--tipo-ro); }
.etiqueta.tipo-tarefa { background: var(--tipo-ta-fundo); color: var(--tipo-ta); }
.etiqueta.tipo-lembrete { background: var(--tipo-le-fundo); color: var(--tipo-le); }
.faixa-dia { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0 0 12px; padding: 8px 12px; background: var(--cartao); border: 1px solid var(--linha); border-radius: 9px; font-size: 13px; }
.faixa-dia b { font-weight: 600; }
.faixa-valor { font: 12px "IBM Plex Mono", monospace; color: var(--fraca); }
.faixa-valor.ok { font: 600 13px "IBM Plex Sans", sans-serif; color: var(--feito); }
.faixa-valor.alerta { font-weight: 600; color: var(--alerta); }
.meu-dia-duas { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 12px; align-items: start; }
.pendencias { background: var(--cartao); border: 1px solid var(--linha); border-radius: 10px; overflow: hidden; }
.pendencias .vazio { margin: 10px 12px; color: var(--fraca); font-style: italic; }
.grupo-prazo { font: 600 10px "IBM Plex Mono", monospace; letter-spacing: .08em; text-transform: uppercase; color: var(--fraca); padding: 7px 12px; background: var(--grupo-fundo); border-top: 1px solid var(--linha); }
.grupo-prazo:first-child { border-top: 0; }
.grupo-prazo.atrasado { color: var(--alerta); }
.pendencia { display: grid; grid-template-columns: 92px minmax(0, 1fr) auto 48px; gap: 10px; align-items: center; width: 100%; padding: 7px 12px; border: 0; border-top: 1px solid var(--linha-fina); background: none; color: inherit; font: inherit; font-size: 13px; text-align: left; cursor: pointer; }
.grupo-prazo + .pendencia { border-top: 0; }
.pendencia:hover { background: var(--info-fundo); }
.pendencia .etiqueta, .comigo-linha .etiqueta { text-align: center; }
.p-quem { min-width: 0; overflow-wrap: anywhere; }
.p-quem small { color: var(--fraca); font-size: 12px; }
.pendencia .falta, .comigo-linha .falta { color: var(--alerta); font-weight: 700; font-size: 12px; text-align: right; }
.pendencia .falta.adiante, .pendencia .falta .adiante { color: var(--fraca); font-weight: 500; }
.p-prazo { text-align: right; }
.p-prazo.atrasado { color: var(--alerta); font-weight: 600; }
.registradas { background: var(--cartao); border: 1px solid var(--linha); border-radius: 10px; padding: 8px 12px; }
.registradas-topo { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 4px; }
.registradas-topo h3 { margin: 0; font: 600 13px "IBM Plex Sans", sans-serif; }
.reg-linha { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 6px; padding: 5px 0; border-top: 1px solid var(--linha-fina); font-size: 12px; overflow-wrap: anywhere; }
.registradas-topo + .reg-linha { border-top: 0; }
.registradas .vazio { margin: 4px 0; color: var(--fraca); font-style: italic; font-size: 12px; }

/* "+ Nova ▾": botão de tamanho normal, no topo à direita, que abre a lista */
.menu-novo { position: relative; flex: 0 0 auto; }
.menu-novo > summary { list-style: none; white-space: nowrap; }
.menu-novo > summary::-webkit-details-marker { display: none; }
.menu-novo-itens { position: absolute; right: 0; top: calc(100% + 4px); z-index: 5; min-width: 170px; background: var(--cartao); border: 1px solid var(--linha); border-radius: 8px; padding: 4px; box-shadow: 0 6px 18px rgb(0 0 0 / .14); }
.menu-novo-item { display: block; padding: 7px 10px; border-radius: 6px; color: var(--tinta); text-decoration: none; font-weight: 500; }
.menu-novo-item:hover { background: var(--info-fundo); }

/* Meu dia da direção: "Comigo agora" e um cartão por setor */
.comigo { background: var(--cartao); border: 1px solid var(--linha); border-top: 3px solid var(--alerta); border-radius: 10px; overflow: hidden; margin-bottom: 12px; }
.comigo-topo { display: flex; align-items: baseline; gap: 10px; padding: 8px 12px; }
.comigo-topo h3 { margin: 0; font: 600 14px "IBM Plex Sans", sans-serif; }
.comigo-topo small { color: var(--fraca); }
.comigo .vazio { margin: 0; padding: 4px 12px 10px; color: var(--fraca); font-style: italic; }
.comigo-linha { display: grid; grid-template-columns: 44px minmax(0, 1fr) minmax(0, auto) auto; gap: 10px; align-items: center; padding: 6px 12px; border-top: 1px solid var(--linha-fina); font-size: 13px; }
.comigo-linha .botao { padding: 3px 12px; font-size: 12px; }
.grade-setores { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; }
.cartao-setor { background: var(--cartao); border: 1px solid var(--linha); border-top: 3px solid var(--setor-ok); border-radius: 10px; padding: 9px 12px; }
.cartao-setor.ruim { border-top-color: var(--alerta); }
.cartao-setor-topo { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 4px; }
.cartao-setor-topo h3 { margin: 0; font: 600 13px "IBM Plex Sans", sans-serif; }
.cs-linha { font-size: 12px; padding: 3px 0; border-top: 1px solid var(--linha-fina); }
.cartao-setor-topo + .cs-linha { border-top: 0; }
.cs-linha.ruim { color: var(--alerta); font-weight: 600; }
.cs-ver { display: block; font-size: 12px; padding: 4px 0 0; border-top: 1px solid var(--linha-fina); color: var(--fraca); text-decoration: none; }
.cs-ver:hover { color: var(--verde); text-decoration: underline; }

@media (max-width: 720px) {
  .meu-dia-duas { grid-template-columns: minmax(0, 1fr); }
  .pendencia { grid-template-columns: 84px minmax(0, 1fr) auto; }
  .pendencia .falta { grid-column: 2 / 4; text-align: left; }
  .pendencia .p-prazo { grid-row: 1; grid-column: 3; }
  .comigo-linha { grid-template-columns: 44px minmax(0, 1fr) auto; }
  .comigo-linha .falta { grid-column: 2 / 3; text-align: left; }
}

/* Formulário: a pergunta do tipo, o grupo "o que se cobra" e a fileira de botões */
.formulario { max-width: 640px; }
.pergunta-texto { font: 600 16px "IBM Plex Sans", sans-serif; margin: 6px 0 10px; }
.pilha { display: flex; flex-direction: column; gap: 6px; max-width: 420px; }
.pilha .botao { text-align: left; padding: 11px 16px; font-size: 14px; }
.acoes { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 8px; }

/* Formulário em duas colunas (revisão 1, §5, opção A): à esquerda as caixas, à direita "o que fazer agora", fixa */
.voltar { display: block; background: none; border: 0; padding: 0 0 4px; font: 500 12.5px "IBM Plex Sans", sans-serif; color: var(--fraca); cursor: pointer; }
.voltar:hover { color: var(--verde); text-decoration: underline; }
.seletor-titulo { font: 500 16px "IBM Plex Sans", sans-serif; color: var(--tinta); background: var(--cartao); border: 1px solid var(--linha); border-radius: 7px; padding: 3px 8px; vertical-align: middle; cursor: pointer; field-sizing: content; max-width: 100%; }
.seletor-titulo:hover { border-color: var(--verde); }
.form-duas { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 14px; align-items: start; max-width: 1180px; }
.form-duas.so-uma { grid-template-columns: minmax(0, 760px); justify-content: center; }
.form-duas .formulario { max-width: none; }
.form-lado { position: sticky; top: 12px; max-height: calc(100vh - 24px); overflow: auto; }
.caixa { background: var(--cartao); border: 1px solid var(--linha); border-radius: 10px; padding: 10px 14px 2px; margin-bottom: 12px; }
.caixa.alerta { border-top: 3px solid var(--alerta); }
.caixa.ok { border-top: 3px solid var(--feito); }
.caixa-titulo { margin: 0 0 8px; font: 600 10px "IBM Plex Mono", monospace; letter-spacing: .08em; text-transform: uppercase; color: var(--fraca); }
.caixa-grade { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 0 12px; }
.caixa-grade > * { grid-column: 1 / -1; min-width: 0; }
.caixa-grade > .campo.l4 { grid-column: span 4; }
.caixa-grade > .campo.l6 { grid-column: span 6; }
.caixa-grade > .botao { justify-self: start; margin: -4px 0 14px; }
.caixa-grade > .aviso { margin: -4px 0 12px; }
.caixa-grade > .linha:first-child { border-top: 0; }
.caixa-grade > .linha { padding: 5px 0; }
.passos { margin: 0 0 10px; padding-left: 20px; font-size: 13px; }
.passos li { margin: 0 0 8px; }
.copiavel { margin: 6px 0 2px; }
.copiavel-texto { margin: 0 0 6px; padding: 8px 10px; white-space: pre-wrap; overflow-wrap: anywhere; font: 12.5px/1.5 "IBM Plex Sans", sans-serif; color: var(--tinta); background: var(--grupo-fundo); border: 1px dashed var(--linha); border-radius: 8px; }
.copiavel-acoes { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.copiavel .botao.copiar { padding: 4px 12px; font-size: 12.5px; }
.copiar-dica { display: block; font-size: 12px; color: var(--fraca); margin-top: 4px; }
/* só para o leitor de tela: fora da vista, mas lido (o "Copiado ✓" que o botão já mostra) */
.so-leitor { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.nota-titulo { font: 400 12px "IBM Plex Sans", sans-serif; color: var(--fraca); vertical-align: middle; }
.seletor-titulo:disabled { cursor: default; opacity: 1; color: var(--tinta); }
.seletor-titulo:disabled:hover { border-color: var(--linha); }
.etiqueta.rascunho { background: transparent; color: var(--piloto); border: 1px dashed var(--piloto); letter-spacing: .06em; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .etiqueta.rascunho { color: var(--atencao); border-color: var(--atencao); } }
:root[data-theme="dark"] .etiqueta.rascunho { color: var(--atencao); border-color: var(--atencao); }
@media (max-width: 900px) {
  .form-duas, .form-duas.so-uma { grid-template-columns: minmax(0, 1fr); }
  .form-lado { position: static; max-height: none; overflow: visible; }
}
@media (max-width: 560px) {
  .caixa-grade > .campo.l4, .caixa-grade > .campo.l6 { grid-column: 1 / -1; }
}

/* Painel do setor (revisão 1, §7): ferramentas, a semana, o mês */
.secao { font: 600 10px "IBM Plex Mono", monospace; letter-spacing: .08em; text-transform: uppercase; color: var(--fraca); margin: 16px 0 6px; }
.grade-ferramentas { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; }
.cartao-ferramenta { display: block; background: var(--cartao); border: 1px solid var(--linha); border-radius: 10px; padding: 10px 12px; color: var(--tinta); text-decoration: none; }
a.cartao-ferramenta:hover { border-color: var(--verde); }
.cartao-ferramenta .etiqueta { float: right; margin-left: 8px; }
.cartao-ferramenta .cf-nome { display: block; font-size: 14px; }
.cartao-ferramenta .cf-desc { color: var(--fraca); }
.cartao-ferramenta.futuro { opacity: .6; }
.semana-setor { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; background: var(--cartao); border: 1px solid var(--linha); border-radius: 10px; padding: 10px 12px; }
.ss-dia { text-align: center; font-size: 12px; min-width: 0; }
.ss-dia > b { display: block; font-weight: 600; margin-bottom: 4px; }
.ss-cel { display: block; padding: 2px 4px; border-radius: 4px; margin-top: 2px; overflow-wrap: anywhere; }
.ss-cel.ok { background: var(--feito-fundo); color: var(--feito); }
.ss-cel.alerta { background: var(--alerta-fundo); color: var(--alerta); font-weight: 600; }
.ss-cel.neutro { background: var(--info-fundo); color: var(--fraca); }
.grade-numeros { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; }
.numero-mes { background: var(--cartao); border: 1px solid var(--linha); border-radius: 10px; padding: 10px 12px; min-width: 0; }
.numero-mes.destaque { border-top: 3px solid var(--verde); }
.nm-rotulo { font-size: 12px; color: var(--fraca); min-height: 32px; }
.nm-valor.mono { font-size: 24px; font-weight: 600; color: var(--tinta); font-variant-numeric: tabular-nums; margin-top: 2px; }
.nm-valor small { font-size: 13px; font-weight: 400; color: var(--fraca); }
.nm-leitura { font-size: 12px; margin-top: 3px; overflow-wrap: anywhere; }
.nm-leitura.ok { color: var(--feito); }
.nm-leitura.alerta { color: var(--alerta); font-weight: 600; }
.nm-leitura.atencao { color: var(--atencao); }
.nm-leitura.neutro { color: var(--fraca); font-style: italic; }
@media (max-width: 720px) {
  .semana-setor { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 12px; }
  .grade-numeros { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
}
@media (max-width: 420px) {
  .semana-setor { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ── Abertura e fechamento (08/10) ── */
.duas-rotinas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: 6px 0 22px; }
.cartao-rotina { background: var(--cartao); border: 1px solid var(--linha); border-top: 3px solid var(--linha); border-radius: 10px; padding: 14px 16px; display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.cartao-rotina.ok { border-top-color: var(--feito); }
.cartao-rotina.alerta { border-top-color: var(--alerta); }
.cartao-rotina h3 { margin: 0; font: 500 19px "Newsreader", Georgia, serif; }
.cartao-rotina .cr-estado { font-weight: 600; }
.cartao-rotina.ok .cr-estado { color: var(--feito); }
.cartao-rotina.alerta .cr-estado { color: var(--alerta); }
.cartao-rotina .cr-detalhe { color: var(--fraca); font-size: 13px; }
.cartao-rotina .botao { margin-top: 6px; }
.leitura { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0; margin: 0; background: var(--cartao); border: 1px solid var(--linha); border-radius: 10px; overflow: hidden; }
.leitura dt, .leitura dd { margin: 0; padding: 8px 14px; border-bottom: 1px solid var(--linha-fina); }
.leitura dt { color: var(--fraca); font-size: 13px; }
.leitura dd { font-family: "IBM Plex Mono", monospace; font-size: 13px; }
.leitura dd.alerta { color: var(--alerta); font-weight: 600; }
.leitura + .leitura { margin-top: 12px; }
@media (max-width: 720px) {
  .duas-rotinas { grid-template-columns: 1fr; }
  .leitura { grid-template-columns: 1fr; }
  .leitura dt { border-bottom: 0; padding-bottom: 0; }
}
.cartao-rotina.atencao { border-top-color: var(--piloto); }
.cartao-rotina.atencao .cr-estado { color: var(--piloto); }
.lista-dias { background: var(--cartao); border: 1px solid var(--linha); border-radius: 10px; overflow: hidden; }

/* duas caixas lado a lado (abertura, 08/10); o formulário que as usa fica mais largo */
.formulario.largo { max-width: 1120px; }
.lado-a-lado { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 14px; align-items: start; }
@media (max-width: 900px) { .lado-a-lado { grid-template-columns: 1fr; } }
/* avisos (08/10): o texto que alguém escreveu, com as quebras de linha dele; o histórico como falas datadas */
.texto-livre { white-space: pre-wrap; margin: 0 0 10px; overflow-wrap: anywhere; }
.conversa { display: flex; flex-direction: column; gap: 10px; padding-bottom: 8px; }
.fala { border-left: 3px solid var(--linha); padding: 2px 0 2px 12px; }
.fala-quando { font-size: 11px; color: var(--fraca); margin-bottom: 2px; }
.algo-errado { position: fixed; right: 18px; bottom: 16px; z-index: 5; font-size: 12px; padding: 6px 12px; border-radius: 99px; opacity: .92; }
@media print { .algo-errado { display: none; } }
.formulario > .leitura { margin-bottom: 12px; }
.algo-errado { text-decoration: none; }

/* ── O estilo adotado para o app todo (direção, 08/10 — croqui dos Avisos) ── */
:root { --tipo-problema: #A8503F; --tipo-problema-fundo: #F6E6E1; --tipo-ideia: #2F736F; --tipo-ideia-fundo: #E1EFEC; --tipo-duvida: #3D6B8C; --tipo-duvida-fundo: #E3ECF2; --conversa-fundo: #F7F8F6; --balao-meu: #E1EFEC; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --tipo-problema: #E08A76; --tipo-problema-fundo: #35241F; --tipo-ideia: #5FB3A9; --tipo-ideia-fundo: #1B302E; --tipo-duvida: #8DB4D1; --tipo-duvida-fundo: #1E2B35; --conversa-fundo: #161D22; --balao-meu: #1B302E; } }
:root[data-theme="dark"] { --tipo-problema: #E08A76; --tipo-problema-fundo: #35241F; --tipo-ideia: #5FB3A9; --tipo-ideia-fundo: #1B302E; --tipo-duvida: #8DB4D1; --tipo-duvida-fundo: #1E2B35; --conversa-fundo: #161D22; --balao-meu: #1B302E; }
.icone { width: 1em; height: 1em; flex: none; }
.problema { --tom: var(--tipo-problema); --tom-fundo: var(--tipo-problema-fundo); }
.ideia { --tom: var(--tipo-ideia); --tom-fundo: var(--tipo-ideia-fundo); }
.duvida { --tom: var(--tipo-duvida); --tom-fundo: var(--tipo-duvida-fundo); }
.chip-tipo { display: inline-flex; align-items: center; gap: 6px; font: 600 11.5px "IBM Plex Sans", sans-serif; border-radius: 99px; padding: 2px 10px; color: var(--tom); background: var(--tom-fundo); white-space: nowrap; }
/* botões grandes */
.botoes-grandes { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; }
.botao-grande { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; text-align: left; padding: 14px; border-radius: 12px; border: 1.5px solid var(--linha); background: var(--cartao); color: var(--tinta); cursor: pointer; font: 14px "IBM Plex Sans", sans-serif; }
.botao-grande .icone { width: 26px; height: 26px; color: var(--tom); }
.botao-grande b { font-size: 15px; }
.botao-grande small { color: var(--fraca); font-size: 12.5px; line-height: 1.35; }
.botao-grande:hover { border-color: var(--tom); }
.botao-grande.ativo { border-color: var(--tom); background: var(--tom-fundo); box-shadow: inset 0 0 0 1px var(--tom); }
.botao-grande:focus-visible { outline: 2px solid var(--tom); outline-offset: 2px; }
.botoes-grandes.com-erro .botao-grande { border-color: var(--alerta); }
/* o caminho do item */
.caminho { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 0; list-style: none; margin: 0; padding: 0; font: 600 11.5px "IBM Plex Sans", sans-serif; color: var(--fraca); }
.caminho li { display: flex; align-items: center; gap: 6px; }
.caminho li + li::before { content: ""; width: 26px; height: 2px; background: var(--linha); margin: 0 8px; }
.caminho li.feito + li::before { background: var(--feito); }
.caminho i { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--linha); background: var(--cartao); }
.caminho li.feito { color: var(--feito); } .caminho li.feito i { background: var(--feito); border-color: var(--feito); }
.caminho li.agora { color: var(--alerta); } .caminho li.agora i { border-color: var(--alerta); background: var(--alerta-fundo); }
/* conversas (como no WhatsApp) */
.conversas { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: 14px; align-items: start; }
.conv-lista { background: var(--cartao); border: 1px solid var(--linha); border-radius: 12px; overflow: hidden; }
.pilulas { display: flex; gap: 6px; padding: 10px; border-bottom: 1px solid var(--linha-fina); flex-wrap: wrap; }
.pilula { font: 600 12px "IBM Plex Sans", sans-serif; border-radius: 99px; padding: 4px 11px; background: var(--grupo-fundo); color: var(--fraca); border: 0; cursor: pointer; }
.pilula.ativa { background: var(--tinta); color: var(--cartao); }
.conv-item { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 2px 10px; width: 100%; text-align: left; padding: 11px 12px; border: 0; border-bottom: 1px solid var(--linha-fina); background: transparent; color: var(--tinta); cursor: pointer; font: 14px "IBM Plex Sans", sans-serif; }
.conv-item:hover { background: var(--grupo-fundo); }
.conv-item.ativo { background: var(--ok-fundo); }
.conv-ico { grid-row: span 2; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; color: var(--tom); background: var(--tom-fundo); }
.conv-ico .icone { width: 16px; height: 16px; }
.conv-titulo { font-weight: 600; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.conv-hora { font-size: 11.5px; color: var(--fraca); text-align: right; }
.conv-previa { color: var(--fraca); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.conv-selo { justify-self: end; min-width: 19px; height: 19px; padding: 0 6px; border-radius: 99px; background: var(--verde); color: var(--sobre-verde, #fff); font: 600 11px "IBM Plex Sans", sans-serif; display: grid; place-items: center; }
.conv-selo.voce { background: var(--alerta); color: var(--sobre-alerta, #fff); }
.conv-painel { background: var(--cartao); border: 1px solid var(--linha); border-radius: 12px; display: flex; flex-direction: column; min-width: 0; overflow: hidden; }
.conv-topo { padding: 14px 16px; border-bottom: 1px solid var(--linha-fina); display: flex; flex-direction: column; gap: 8px; }
.conv-topo h2 { font: 500 20px "Newsreader", Georgia, serif; margin: 0; text-wrap: balance; }
.conv-topo .linha-chips { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; color: var(--fraca); font-size: 12px; }
.baloes { display: flex; flex-direction: column; gap: 10px; padding: 16px; background: var(--conversa-fundo); min-height: 180px; }
.balao { max-width: 76%; padding: 9px 12px 6px; border-radius: 12px; font-size: 13.5px; }
.balao .texto-livre { margin: 0; }
.balao small { display: block; font-size: 11px; color: var(--fraca); margin-top: 4px; text-align: right; }
.balao.meu { align-self: flex-end; background: var(--balao-meu); border-bottom-right-radius: 3px; }
.balao.outro { align-self: flex-start; background: var(--cartao); border: 1px solid var(--linha); border-bottom-left-radius: 3px; }
.balao-autor { display: block; font: 600 11.5px "IBM Plex Sans", sans-serif; color: var(--verde); margin-bottom: 2px; }
.evento { align-self: center; font: 600 11.5px "IBM Plex Sans", sans-serif; border-radius: 99px; padding: 3px 11px; background: var(--grupo-fundo); color: var(--fraca); }
.evento.alerta { background: var(--alerta-fundo); color: var(--alerta); }
.evento.ok { background: var(--feito-fundo); color: var(--feito); }
.conv-escrever { border-top: 1px solid var(--linha-fina); padding: 12px 16px; display: flex; flex-direction: column; gap: 10px; }
.conv-escrever .dica { font-size: 12.5px; font-weight: 600; color: var(--alerta); }
.conv-escrever textarea { font: 14px "IBM Plex Sans", sans-serif; color: var(--tinta); background: var(--cartao); border: 1px solid var(--linha); border-radius: 8px; padding: 9px 11px; width: 100%; min-height: 70px; resize: vertical; }
.conv-vazio { padding: 40px 20px; text-align: center; color: var(--fraca); }
/* anexos */
.anexador { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.botao.anexar { position: relative; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.botao.anexar:focus-within { outline: 2px solid var(--acento); outline-offset: 2px; }   /* o input fica escondido mas alcançável pelo Tab */
.miniaturas { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; flex-basis: 100%; }
.miniatura { position: relative; display: block; width: 92px; height: 66px; border-radius: 8px; overflow: hidden; border: 1px solid var(--linha); background: var(--grupo-fundo); }
.miniatura img { width: 100%; height: 100%; object-fit: cover; display: block; }
.miniatura .tirar { position: absolute; top: 3px; right: 3px; width: 20px; height: 20px; border-radius: 50%; border: 0; background: rgba(21,28,34,.75); color: #fff; cursor: pointer; line-height: 1; }
/* quadro por situação (a visão da direção) */
.quadro { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; align-items: start; }
.quadro-col { background: var(--grupo-fundo); border-radius: 12px; padding: 10px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.quadro-col h3 { margin: 0 2px 2px; display: flex; justify-content: space-between; font: 600 10.5px "IBM Plex Mono", monospace; letter-spacing: .07em; text-transform: uppercase; color: var(--fraca); }
.quadro-col.alerta h3 { color: var(--alerta); }
.quadro-col .vazio { margin: 4px 2px; }
.quadro-cartao { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; text-align: left; width: 100%; background: var(--cartao); border: 1px solid var(--linha); border-top: 3px solid var(--tom, var(--linha)); border-radius: 8px; padding: 10px; color: var(--tinta); cursor: pointer; font: 13px "IBM Plex Sans", sans-serif; }
.quadro-cartao:hover { box-shadow: 0 2px 8px rgba(21,28,34,.08); }
.quadro-cartao b { font-size: 13.5px; }
.quadro-cartao small { color: var(--fraca); font-size: 12px; }
.quadro-ultima { background: var(--conversa-fundo); border-radius: 6px; padding: 6px 8px; font-size: 12.5px; color: var(--fraca); width: 100%; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
@media (max-width: 900px) { .conversas { grid-template-columns: 1fr; } .quadro { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .quadro { grid-template-columns: 1fr; } .balao { max-width: 92%; } }

a.botao { text-decoration: none; display: inline-block; }
.anexar { text-decoration: none; }

.caixa.depois-dos-botoes { margin-top: 14px; }

/* quadro: o que está em análise, contornado de amarelo (direção, 08/10) */
.quadro-col.analise .quadro-cartao { border-color: var(--atencao); box-shadow: inset 0 0 0 1px var(--atencao); }
.quadro-col.analise h3 { color: var(--atencao); }