/* =========================================================================
   E5 Flow — sistema interno de quadros da E5.
   Layout inspirado no fluxo de trabalho do Trello: barra superior fixa,
   quadro com rolagem horizontal, listas em coluna e cartoes arrastaveis.
   ========================================================================= */

:root {
  --bg-app: #f4f5f7;
  --bg-surface: #ffffff;
  --bg-sunken: #ebecf0;
  --bg-hover: #e4e6ea;
  --topbar: #17233d;
  --topbar-hover: #263252;

  --text: #172b4d;
  --text-soft: #5e6c84;
  --text-invert: #ffffff;

  --line: #dfe1e6;
  --accent: #2f6feb;
  --accent-strong: #1f56c3;
  --danger: #c9372c;
  --warn: #b45309;
  --ok: #1f845a;

  --radius-sm: 4px;
  --radius: 8px;
  --radius-lg: 12px;
  --shadow-card: 0 1px 1px rgba(9,30,66,.25), 0 0 1px rgba(9,30,66,.15);
  --shadow-pop: 0 8px 16px -4px rgba(9,30,66,.25), 0 0 1px rgba(9,30,66,.3);
  --shadow-drag: 0 12px 24px -6px rgba(9,30,66,.4);

  --list-w: 288px;
  --topbar-h: 52px;

  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* Paleta de etiquetas — nomes iguais aos do Trello para o import bater 1:1 */
  --l-green-subtle:#baf3db;  --l-green:#4bce97;  --l-green-bold:#1f845a;
  --l-yellow-subtle:#f8e6a0; --l-yellow:#f5cd47; --l-yellow-bold:#946f00;
  --l-orange-subtle:#fedec8; --l-orange:#fea362; --l-orange-bold:#c25100;
  --l-red-subtle:#ffd5d2;    --l-red:#f87168;    --l-red-bold:#c9372c;
  --l-purple-subtle:#dfd8fd; --l-purple:#9f8fef; --l-purple-bold:#6e5dc6;
  --l-blue-subtle:#cce0ff;   --l-blue:#579dff;   --l-blue-bold:#0c66e4;
  --l-sky-subtle:#c6edfb;    --l-sky:#6cc3e0;    --l-sky-bold:#227d9b;
  --l-lime-subtle:#d3f1a7;   --l-lime:#94c748;   --l-lime-bold:#5b7f24;
  --l-pink-subtle:#fdd0ec;   --l-pink:#e774bb;   --l-pink-bold:#ae4787;
  --l-black-subtle:#dcdfe4;  --l-black:#8590a2;  --l-black-bold:#626f86;
  --l-grey:#8590a2;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg-app:#1d2125; --bg-surface:#22272b; --bg-sunken:#282e33; --bg-hover:#2c333a;
    --topbar:#1d2125; --topbar-hover:#2c333a;
    --text:#b6c2cf; --text-soft:#9fadbc; --line:#38414a;
    --shadow-card:0 1px 1px rgba(0,0,0,.5);
  }
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.45;
  color: var(--text);
  background: var(--bg-app);
  -webkit-font-smoothing: antialiased;
}
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; border: 0; background: none; }
[hidden] { display: none !important; }
.icon { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2;
        stroke-linecap: round; stroke-linejoin: round; }

/* ---------------------------------------------------------------- shell -- */
.app-shell { display: flex; flex-direction: column; height: 100vh; height: 100dvh; }

.topbar {
  display: flex; align-items: center; gap: 10px;
  height: var(--topbar-h); flex: 0 0 var(--topbar-h);
  padding: 0 12px;
  background: var(--topbar); color: #fff;
  box-shadow: 0 1px 0 rgba(255,255,255,.08);
  z-index: 40;
}
.topbar__brand { display: flex; align-items: center; gap: 8px; padding: 6px 8px;
                 border-radius: var(--radius-sm); color: #fff; }
.topbar__brand:hover { background: var(--topbar-hover); }
/* O simbolo da E5, em vetor. Era um quadrado azul com duas barras brancas,
   desenhado em CSS enquanto a marca nao existia no app. A proporcao
   (639x533) e a do logo oficial: mexer so na altura deforma. */
.brand-mark { width: 25px; height: 21px; flex: 0 0 auto;
              background: url("/static/img/e5-marca.svg") center/contain no-repeat; }
.brand-text { font-weight: 700; letter-spacing: .2px; white-space: nowrap; }

.topbar__nav { display: flex; gap: 2px; }
.tbtn {
  padding: 7px 11px; border-radius: var(--radius-sm); color: #fff;
  font-weight: 500; white-space: nowrap; display: inline-flex; align-items: center; gap: 6px;
}
.tbtn:hover { background: var(--topbar-hover); }
.tbtn.is-active { background: rgba(255,255,255,.18); }
.pill { background: var(--accent); color: #fff; border-radius: 10px;
        padding: 0 6px; font-size: 11px; font-weight: 700; min-width: 18px; text-align: center; }

.topbar__search { position: relative; margin-left: auto; display: flex; align-items: center; }
.topbar__search[hidden] { display: none; }
.topbar__search .icon { position: absolute; left: 9px; color: rgba(255,255,255,.7); pointer-events: none; }
.topbar__search input {
  width: 220px; padding: 7px 10px 7px 32px; border-radius: var(--radius-sm);
  border: 1px solid rgba(255,255,255,.25); background: rgba(255,255,255,.12); color: #fff;
  transition: width .18s ease, background .18s ease;
}
.topbar__search input::placeholder { color: rgba(255,255,255,.65); }
.topbar__search input:focus { outline: none; width: 320px; background: #fff; color: var(--text);
                              border-color: var(--accent); }
.topbar__search input:focus + .icon { color: var(--text-soft); }

.search-results {
  position: absolute; top: calc(100% + 6px); right: 0; width: 380px; max-height: 60vh;
  overflow: auto; background: var(--bg-surface); border-radius: var(--radius);
  box-shadow: var(--shadow-pop); padding: 6px; z-index: 60;
}
.search-results__item { display: block; width: 100%; text-align: left; padding: 8px 10px;
                        border-radius: var(--radius-sm); color: var(--text); }
.search-results__item:hover { background: var(--bg-hover); }
.search-results__item small { color: var(--text-soft); display: block; }
.search-results__empty { padding: 14px; color: var(--text-soft); text-align: center; }

.topbar__right { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.icon-btn { position: relative; width: 34px; height: 34px; border-radius: 50%;
            display: grid; place-items: center; color: #fff; }
.icon-btn:hover { background: var(--topbar-hover); }
.icon-btn .dot { position: absolute; top: 6px; right: 6px; width: 8px; height: 8px;
                 border-radius: 50%; background: #e2483d; border: 2px solid var(--topbar); }
.icon-btn.is-recording { background: #c9372c; animation: pulse 1.1s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .55; } }

.avatar {
  width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center;
  font-size: 12px; font-weight: 700; color: #fff; background: var(--accent);
  text-transform: uppercase; flex: 0 0 auto; overflow: hidden;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar--blue{background:#0c66e4} .avatar--green{background:#1f845a}
.avatar--orange{background:#c25100} .avatar--purple{background:#6e5dc6}
.avatar--red{background:#c9372c} .avatar--sky{background:#227d9b}
.avatar--lime{background:#5b7f24} .avatar--pink{background:#ae4787}
/* As 10 cores usam o tom escuro da paleta: todas passam em contraste AA com o
   texto branco das iniciais (a pior fica em 4,63:1). */
.avatar--yellow{background:#946f00} .avatar--grey{background:#626f86}
.avatar--sm { width: 26px; height: 26px; font-size: 10px; }
.avatar--xs { width: 22px; height: 22px; font-size: 9px; }

/* ----------------------------------------------------------------- view -- */
.view { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
.page { flex: 1; overflow: auto; padding: 28px 32px 60px; }
.page__head { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; flex-wrap: wrap; }
.page__head h1 { font-size: 20px; margin: 0; }
.page__sub { color: var(--text-soft); margin: -10px 0 22px; max-width: 70ch; }

.section-title { font-size: 12px; font-weight: 700; text-transform: uppercase;
                 letter-spacing: .6px; color: var(--text-soft); margin: 26px 0 10px; }

/* Subitens da observacao importada, dentro do cartao da fila. */
.rdo-import__sub { margin: 6px 0 0 18px; padding: 0 0 0 14px; font-size: 12.5px;
                   color: var(--text-soft); }

/* ------------------------------------------------------- calendario --- */
/* A pagina do calendario ocupa a altura da tela e rola por dentro: o mes tem
   altura fixa (seis semanas) e a grade de horas rola sozinha, como no Google.
   Rolar a pagina inteira faria o cabecalho dos dias sumir. */
.cal-page { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.cal-box { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.cal-barra { flex-wrap: wrap; gap: 8px; }
/* Sem `text-transform: capitalize`: ele maiusculiza toda palavra e o mes
   virava "Setembro De 2026". Quem capitaliza e o JS, so a inicial. */
.cal-titulo { font-size: 19px; margin: 0 0 0 6px; }
.cal-visoes { border-bottom: 0; margin: 0; }

/* As setas do calendario tem fundo claro atras; `.icon-btn` e branco porque
   nasceu na barra escura do topo. */
.cal-nav { width: 32px; height: 32px; border-radius: 50%; border: 0; cursor: pointer;
           display: grid; place-items: center; background: transparent;
           color: var(--text); }
.cal-nav:hover { background: var(--bg-hover); }
.cal-nav .icon { width: 18px; height: 18px; }

.cal-ano { width: auto; min-width: 88px; }
/* Os dois menus do filtro andam juntos e quebram juntos para a linha de baixo
   quando a barra aperta — separados, o "de que quadro?" ficaria numa linha e o
   "de que obra?" na outra. */
.cal-filtros { display: flex; gap: 6px; min-width: 0; flex-wrap: wrap; }
/* O nome da obra e longo ("RUA FORTALEZA - DRA CRISTIANE"); um teto evita que
   o menu empurre as visoes para a linha de baixo. */
.cal-filtro { width: auto; max-width: 200px; }
.cal-filtro--obra { max-width: 230px; }
.cal-filtro__aviso { margin: 0 0 10px; }

/* -- visao de mes ------------------------------------------------------- */
.cal-mes { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(7, 1fr);
           grid-template-rows: auto repeat(6, minmax(90px, 1fr));
           background: var(--line); gap: 1px; border: 1px solid var(--line);
           border-radius: var(--radius); overflow: hidden; }
.cal-mes__cabeca { background: var(--bg-sunken); text-align: center; padding: 7px 0;
                   font-size: 11.5px; font-weight: 700; letter-spacing: .4px;
                   text-transform: uppercase; color: var(--text-soft); }

.cal-dia { background: var(--bg-surface); padding: 4px; overflow: hidden;
           display: flex; flex-direction: column; gap: 2px; cursor: pointer; }
.cal-dia.is-fora { background: var(--bg-sunken); }
.cal-dia.is-fora .cal-dia__num { color: var(--text-soft); }
.cal-dia:hover { background: var(--bg-hover); }
.cal-dia__num { align-self: flex-start; font-size: 12.5px; font-weight: 600;
                min-width: 22px; height: 22px; border-radius: 50%; border: 0;
                background: transparent; color: var(--text); cursor: pointer; }
.cal-dia__num:hover { background: var(--bg-hover); }
.cal-dia.is-hoje .cal-dia__num { background: var(--accent); color: #fff; }

/* `flex: none` porque a celula do mes e uma coluna flex de altura fixa: sem
   isso ela espremia o chip de duas linhas de volta para uma, e a etiqueta
   ficava com zero de altura — presente no HTML e invisivel na tela. */
.cal-chip { display: flex; flex-direction: column; align-items: stretch; gap: 1px;
            flex: none; width: 100%; border: 0;
            background: transparent; border-radius: var(--radius-sm); padding: 1px 5px;
            font-size: 12px; text-align: left; cursor: pointer; overflow: hidden; }
.cal-chip__linha { display: flex; align-items: center; gap: 5px; min-width: 0; }
.cal-chip:hover { background: var(--bg-hover); }
.cal-chip--dia:hover { filter: brightness(1.08); }
.cal-chip__ponto { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.cal-chip__hora { color: var(--text-soft); flex: none; font-variant-numeric: tabular-nums; }
/* O titulo tem a linha inteira para ele. */
.cal-chip__nome { flex: 1 1 auto; min-width: 0;
                  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* A lista em que o cartao esta, ao lado da obra. Sem cor de fundo: ela
   acompanha a obra, nao compete com ela. */
.cal-chip__lista { flex: 0 1 auto; min-width: 20px;
                   font-size: 10.5px; line-height: 14px; padding: 0 5px;
                   border: 1px solid var(--line); border-radius: 999px;
                   color: var(--text-soft);
                   overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* A obra na linha de baixo, do tamanho do nome dela e nao da celula. */
.cal-chip__obra { align-self: flex-start; max-width: 100%; flex: none;
                  font-size: 10.5px; font-weight: 600; line-height: 14px;
                  padding: 0 6px; border-radius: 999px;
                  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-mais { border: 0; flex: none;
            background: transparent; color: var(--text-soft); font-size: 11.5px;
            text-align: left; padding: 1px 5px; cursor: pointer; border-radius: var(--radius-sm); }
.cal-mais:hover { background: var(--bg-hover); color: var(--text); }

/* -- visao de semana e de dia ------------------------------------------- */
/* As duas sao a mesma grade; o que muda e o numero de colunas. */
.cal-horas { flex: 1; min-height: 0; display: flex; flex-direction: column;
             border: 1px solid var(--line); border-radius: var(--radius);
             overflow: hidden; background: var(--bg-surface); }
.cal-horas__cabeca { display: grid; grid-template-columns: 58px repeat(7, 1fr);
                     border-bottom: 1px solid var(--line); background: var(--bg-surface); }
.cal-horas--1 .cal-horas__cabeca { grid-template-columns: 58px 1fr; }
.cal-horas__canto { font-size: 11px; color: var(--text-soft); display: flex;
                    align-items: center; justify-content: center; }
.cal-horas__dia { text-align: center; padding: 6px 0; border-left: 1px solid var(--line); }
.cal-horas__semana { display: block; font-size: 11px; text-transform: uppercase;
                     letter-spacing: .4px; color: var(--text-soft); }
.cal-horas__num { display: inline-block; font-size: 18px; font-weight: 600;
                  min-width: 32px; height: 32px; line-height: 32px; border-radius: 50%; }
.cal-horas__dia.is-hoje .cal-horas__num { background: var(--accent); color: #fff; }

.cal-horas__faixa { border-bottom: 2px solid var(--line); min-height: 30px; }
.cal-faixa__cel { border-left: 1px solid var(--line); padding: 3px; display: flex;
                  flex-direction: column; gap: 2px; }

.cal-horas__corpo { flex: 1; min-height: 0; overflow: auto;
                    display: grid; grid-template-columns: 58px repeat(7, 1fr); }
.cal-horas--1 .cal-horas__corpo { grid-template-columns: 58px 1fr; }
.cal-horas__regua { position: relative; }
/* A hora fica no alto da propria faixa, alinhada com o traco. */
.cal-horas__regua .cal-grade__hora { display: flex; justify-content: flex-end;
                                     padding-right: 6px; border-bottom: 0; }
.cal-horas__regua .cal-grade__hora span { font-size: 11px; color: var(--text-soft);
                                          transform: translateY(-6px);
                                          font-variant-numeric: tabular-nums; }
.cal-grade__hora { height: 44px; border-bottom: 1px solid var(--line); }
.cal-coluna { position: relative; border-left: 1px solid var(--line); cursor: pointer; }
.cal-coluna .cal-grade__hora:hover { background: var(--bg-hover); }
.cal-coluna.is-hoje { background: var(--l-blue-subtle); }

.cal-bloco { position: absolute; left: 3px; right: 3px; border: 0; border-radius: 5px;
             padding: 3px 6px; text-align: left; cursor: pointer; overflow: hidden;
             display: flex; flex-direction: column; box-shadow: var(--shadow-card); }
.cal-bloco:hover { filter: brightness(1.06); }
.cal-bloco__hora { font-size: 10.5px; opacity: .9; font-variant-numeric: tabular-nums; }
.cal-bloco__nome { font-size: 12.5px; font-weight: 600; overflow: hidden;
                   text-overflow: ellipsis; white-space: nowrap; }
.cal-bloco__local { font-size: 11px; opacity: .85; overflow: hidden;
                    text-overflow: ellipsis; white-space: nowrap; }
.cal-bloco__obra { display: flex; align-items: center; gap: 4px; font-size: 11px;
                   opacity: .95; min-width: 0; }
.cal-bloco__ponto { width: 7px; height: 7px; border-radius: 50%; flex: none;
                    box-shadow: 0 0 0 1px rgba(0, 0, 0, .18); }
.cal-bloco__obra-nome { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* A linha da hora atual. So aparece na coluna de hoje. */
.cal-agora { position: absolute; left: 0; right: 0; height: 2px; background: var(--danger);
             pointer-events: none; z-index: 2; }
.cal-agora::before { content: ""; position: absolute; left: -4px; top: -3px; width: 8px;
                     height: 8px; border-radius: 50%; background: var(--danger); }

/* -- linha da ata na fila de conferencia --------------------------------- */
/* Um campo por coluna da planilha, com o nome da coluna no rotulo. Quebram
   para a linha de baixo em tela estreita em vez de espremer todos. */
.ata-linha { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; }
.ata-campo { flex: 1 1 190px; min-width: 0; margin: 0; }
.ata-campo > label { font-size: 10.5px; letter-spacing: .3px;
                     text-transform: uppercase; color: var(--text-soft); }

/* -- dialogo ------------------------------------------------------------ */
.cal-quando { display: flex; gap: 6px; }
.cal-quando .input[type="date"] { flex: 1; min-width: 0; }
.cal-quando .input[type="time"] { flex: 0 0 96px; }
.cal-cores { display: grid; grid-template-columns: repeat(10, 1fr); gap: 5px; }
.cal-cor { height: 26px; border-radius: 4px; border: 0; cursor: pointer; }
.cal-cor.is-on { box-shadow: inset 0 0 0 3px var(--accent), 0 0 0 1px var(--accent); }
.cal-cor:hover { filter: brightness(1.1); }

@media (max-width: 860px) {
  .cal-mes { grid-template-rows: auto repeat(6, minmax(64px, 1fr)); }
  .cal-chip__hora { display: none; }
}
/* Mes no celular: um pontinho por compromisso, e o toque no dia abre a vista
   Dia (calendario.js). O nome cortado em "R…" nao dizia nada. */
@media (max-width: 720px) {
  .cal-mes { grid-template-rows: auto repeat(6, minmax(58px, 1fr)); }
  .cal-dia { flex-direction: row; flex-wrap: wrap; align-content: flex-start; gap: 3px; }
  .cal-dia__num { flex: 0 0 100%; text-align: left; }
  .cal-chip { width: auto; padding: 0; background: transparent !important; }
  .cal-chip__nome, .cal-chip__lista, .cal-chip__hora { display: none; }
  .cal-chip__ponto { width: 9px; height: 9px; }
  .cal-mais { font-size: 10.5px; padding: 0; }
}

/* ------------------------------------------------------- cadastros --- */
/* Quatro categorias lado a lado enquanto couber; empilham no monitor estreito
   e no celular. */
.cadastro-grade { display: grid; gap: 14px; align-items: start;
                  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
/* Uma categoria por vez. A caixa cresce ate ~1100px — o nome nao fica sozinho
   num campo de futebol porque a **lista** dentro dela se divide em colunas
   (abaixo), e nao porque a caixa foi espremida. */
.cadastro-grade--uma { grid-template-columns: minmax(280px, 1100px); }
.cadastro-col { background: var(--bg-card); border: 1px solid var(--line);
                border-radius: var(--radius); padding: 14px; }
.cadastro-col__head { display: flex; align-items: center; gap: 8px; }
.cadastro-col__head h2 { margin: 0; font-size: 15px; }
.cadastro-col .btn-row .input { flex: 1; min-width: 0; }

/* Uma linha por cadastro, em coluna unica: e como se le uma lista de nomes.
   Quem rola e a pagina — a barra de rolagem propria da lista obrigava a rolar
   duas coisas na mesma tela. */
.cadastro-lista { display: block; }

/* Cabecalho de ordenacao: mesma altura e mesmas colunas das linhas, so que em
   maiusculas discretas e clicavel. */
.cadastro-head { display: flex; align-items: center; gap: 8px; padding: 4px 2px;
                 font-size: 11px; font-weight: 700; letter-spacing: .04em;
                 text-transform: uppercase; color: var(--text-soft); }
.cadastro-head button { display: inline-flex; align-items: center; gap: 4px;
                        font: inherit; letter-spacing: inherit; color: inherit;
                        text-transform: inherit; padding: 2px 0; }
.cadastro-head button:hover { color: var(--text); }
/* O nome da obra e um botao (abre a ficha) e precisa caber na coluna dele. */
.cadastro-item .tv__card { max-width: 100%; }
.cadastro-head .is-sorted { color: var(--text); }
.cadastro-item { display: flex; align-items: center; gap: 8px; padding: 11px 2px;
                 border-top: 1px solid var(--line); min-height: 44px; }
.cadastro-item__nome { overflow: hidden; text-overflow: ellipsis; }
.cadastro-item__nome.is-off { opacity: .6; text-decoration: line-through; }

/* ------------------------------------------------- grupos de quadros --- */
/* Cada grupo e uma secao da tela inicial: cabecalho com nome e a grade. */
.board-section__head { display: flex; align-items: center; gap: 6px; margin: 26px 0 10px; }
.board-section__count { font-size: 12px; font-weight: 700; color: var(--text-soft);
                        background: var(--bg-sunken); border-radius: 10px; padding: 1px 8px; }

/* Renomear e excluir so aparecem com o mouse na secao: sao acoes raras e nao
   devem competir com os quadros pela atencao. */
.board-section__acao { opacity: 0; transition: opacity .12s; padding: 3px;
                       border-radius: var(--radius-sm); color: var(--text-soft); }
.board-section:hover .board-section__acao { opacity: 1; }
/* Grupo fixo (Obras, Escritorio, Compras): no lugar do lapis e da lixeira, uma
   etiqueta discreta — aparece junto com eles, no passar do mouse. */
.board-section__fixo { opacity: 0; transition: opacity .12s; font-size: 11px;
                       color: var(--text-soft); border: 1px solid var(--line);
                       border-radius: 999px; padding: 0 7px; line-height: 18px; }
.board-section:hover .board-section__fixo { opacity: 1; }
.board-section__acao:hover { background: var(--bg-hover); color: var(--text); }
.board-section__acao .icon { width: 15px; height: 15px; }

.board-section__grip { display: inline-flex; color: var(--text-soft); cursor: grab;
                       opacity: 0; transition: opacity .12s; margin-left: -6px; }
.board-section:hover .board-section__grip { opacity: .8; }
.board-section__grip:active { cursor: grabbing; }
.board-section__grip .icon { width: 16px; height: 16px; }

/* Grupo vazio ainda precisa ocupar espaco: sem altura nao ha onde soltar. */
.board-grid__vazio { grid-column: 1 / -1; height: 74px; display: flex; align-items: center;
                     justify-content: center; text-align: center; padding: 0 14px;
                     border: 2px dashed var(--line); border-radius: var(--radius);
                     color: var(--text-soft); font-size: 13px; }

/* --------------------------------------------------------- boards grid --- */
.board-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(212px, 1fr)); }
/* A linha do "+ Criar quadro", sozinha no topo da pagina. */
.board-grid--criar { margin-top: 4px; }
.board-tile {
  position: relative; height: 104px; border-radius: var(--radius); padding: 11px;
  color: #fff; text-align: left; display: flex; flex-direction: column;
  justify-content: space-between; overflow: hidden; box-shadow: var(--shadow-card);
  background-size: cover; background-position: center;
}
.board-tile::after { content: ""; position: absolute; inset: 0; background: rgba(0,0,0,.14);
                     transition: background .15s; }
.board-tile:hover::after { background: rgba(0,0,0,.3); }
.board-tile > * { position: relative; z-index: 1; }
.board-tile__name { font-weight: 700; font-size: 15px; text-shadow: 0 1px 3px rgba(0,0,0,.4); }
.board-tile__meta { font-size: 12px; opacity: .92; text-shadow: 0 1px 3px rgba(0,0,0,.4); }
.board-tile__star { position: absolute; top: 8px; right: 8px; z-index: 2; color: #fff;
                    opacity: 0; transition: opacity .15s, transform .15s; }
.board-tile:hover .board-tile__star, .board-tile__star.is-on { opacity: 1; }

/* Excluir quadro fica ao lado da estrela e so aparece no hover: e a acao mais
   destrutiva do app e nao deve estar sempre a um clique de distancia. */
.board-tile__del { position: absolute; top: 8px; right: 38px; z-index: 2; color: #fff;
                   opacity: 0; transition: opacity .12s ease; padding: 4px;
                   border-radius: var(--radius-sm); }
.board-tile:hover .board-tile__del { opacity: .85; }
.board-tile__del:hover { opacity: 1; background: rgba(0, 0, 0, .35); }
.board-tile__del .icon { width: 16px; height: 16px; }

.board-tile__grupo { position: absolute; top: 8px; right: 68px; z-index: 2; color: #fff;
                     opacity: 0; transition: opacity .12s ease; padding: 4px;
                     border-radius: var(--radius-sm); }
.board-tile:hover .board-tile__grupo { opacity: .85; }
.board-tile__grupo:hover { opacity: 1; background: rgba(0, 0, 0, .35); }
.board-tile__grupo .icon { width: 16px; height: 16px; }

/* Arrastavel: o cursor avisa antes de tentar. O atalho em Favoritos nao
   arrasta — la o tile so leva ao quadro. */
.board-tile--atalho { cursor: pointer; }
.board-tile[data-board-id] { cursor: grab; }
.board-tile[data-board-id]:active { cursor: grabbing; }
.board-tile__star.is-on { color: #f5cd47; }
.board-tile__star:hover { transform: scale(1.18); }
.board-tile--new { background: var(--bg-sunken); color: var(--text); align-items: center;
                   justify-content: center; font-weight: 600; }
.board-tile--new::after { display: none; }
.board-tile--new:hover { background: var(--bg-hover); }

/* Fundos de quadro — 20 opcoes, todas degrade de 150 graus do tom escuro para
   o claro do mesmo matiz. E o degrade escuro que mantem legivel o titulo branco
   da barra do quadro, que fica por cima com uma sombra leve.

   Os nove primeiros sao os originais do Trello e **nao mudam de nome**: quadro
   que ja existe guarda essa string no banco. A lista com os nomes em portugues
   vive em `UI.BOARD_BACKGROUNDS`. */
.bg--blue{background:linear-gradient(150deg,#0747a6,#1d7afc)}
.bg--green{background:linear-gradient(150deg,#164b35,#1f845a)}
.bg--orange{background:linear-gradient(150deg,#974f0c,#e56910)}
.bg--red{background:linear-gradient(150deg,#5d1f1a,#c9372c)}
.bg--purple{background:linear-gradient(150deg,#352c63,#6e5dc6)}
.bg--pink{background:linear-gradient(150deg,#50253f,#ae4787)}
.bg--lime{background:linear-gradient(150deg,#37471f,#5b7f24)}
.bg--sky{background:linear-gradient(150deg,#164555,#227d9b)}
.bg--grey{background:linear-gradient(150deg,#44546f,#626f86)}
.bg--teal{background:linear-gradient(150deg,#0c4a44,#1d9c8c)}
.bg--olive{background:linear-gradient(150deg,#3b3d16,#7a7d28)}
.bg--amber{background:linear-gradient(150deg,#6b4200,#d99400)}
.bg--brown{background:linear-gradient(150deg,#3f2a1b,#7d5233)}
.bg--wine{background:linear-gradient(150deg,#4a0f1f,#8c2340)}
.bg--rose{background:linear-gradient(150deg,#5c1028,#d13a5e)}
.bg--magenta{background:linear-gradient(150deg,#4d0d38,#c0257f)}
.bg--violet{background:linear-gradient(150deg,#33195c,#7d3fc9)}
.bg--indigo{background:linear-gradient(150deg,#1f2b6b,#4256c7)}
.bg--navy{background:linear-gradient(150deg,#08182f,#1b3f7d)}
.bg--graphite{background:linear-gradient(150deg,#15181c,#3b444d)}

/* Grade de escolha do fundo. Cinco por linha: com 20 opcoes sao quatro linhas,
   que cabem no menu do quadro sem rolagem. */
.bg-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.bg-swatch { border-radius: 4px; border: 0; cursor: pointer; }
/* A borda do escolhido fica por dentro (`inset`), e nao com `border`: uma borda
   de verdade muda o tamanho do quadradinho e a grade inteira dança ao escolher. */
.bg-swatch.is-on { box-shadow: inset 0 0 0 3px var(--accent), 0 0 0 1px var(--accent); }
.bg-swatch:hover { filter: brightness(1.1); }

/* ---------------------------------------------------------------- board -- */
/* `cover` + centro: a imagem preenche o quadro inteiro em qualquer proporcao
   de tela, cortando o excedente em vez de esticar ou ladrilhar. */
.board { flex: 1; display: flex; flex-direction: column; min-height: 0;
         background-size: cover; background-position: center;
         background-repeat: no-repeat; background-color: var(--bg-sunken); }
.board__bar {
  display: flex; align-items: center; gap: 10px; padding: 10px 16px;
  background: rgba(0,0,0,.24); color: #fff; backdrop-filter: blur(4px); flex-wrap: wrap;
}
.board__title { font-size: 17px; font-weight: 700; padding: 4px 8px; border-radius: var(--radius-sm);
                background: transparent; border: 0; color: #fff; min-width: 40px; }
.board__title:hover { background: rgba(255,255,255,.18); }
.board__bar .tbtn { font-size: 13px; }
.board__members { display: flex; margin-left: 4px; }
.board__members .avatar { margin-left: -6px; border: 2px solid rgba(255,255,255,.55); }
.board__spacer { margin-left: auto; }

/* Recebe a visualizacao ativa (Quadro ou Tabela) e ocupa o resto da altura. */
.board__content { flex: 1; min-height: 0; display: flex; flex-direction: column; }

/* Seletor de visualizacao, ao lado do titulo do quadro. */
.view-switch {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 8px; border-radius: var(--radius-sm);
  background: rgba(255,255,255,.22); color: #fff; font-weight: 600; font-size: 13px;
}
.view-switch:hover { background: rgba(255,255,255,.34); }
.view-switch .icon:last-child { width: 14px; height: 14px; opacity: .85; }
.menu__item.is-on { background: var(--l-blue-subtle); }

.lists {
  flex: 1; min-height: 0; display: flex; align-items: flex-start; gap: 10px;
  padding: 12px 16px 20px; overflow-x: auto; overflow-y: hidden;
}

/* ------------------------------------------------ visualizacao em tabela --- */
.table-view {
  flex: 1; min-height: 0; margin: 12px 16px 16px;
  display: flex; flex-direction: column;
  background: var(--bg-surface); border-radius: var(--radius);
  box-shadow: var(--shadow-card); overflow: hidden;
}
.tv__scroll { flex: 1; min-height: 0; overflow: auto; }

.tv { width: 100%; border-collapse: separate; border-spacing: 0; }
.tv th, .tv td { text-align: left; border-bottom: 1px solid var(--line); }
.tv td { padding: 0; vertical-align: middle; }

.tv__th {
  position: sticky; top: 0; z-index: 1;
  background: var(--bg-sunken); cursor: pointer; user-select: none;
  padding: 10px 14px; font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .5px; color: var(--text-soft);
  white-space: nowrap;
}
.tv__th:hover { color: var(--text); }
.tv__th.is-sorted { color: var(--accent); }
.tv__sort { margin-left: 5px; font-size: 9px; }

/* Larguras: o titulo do cartao leva a folga, o resto fica estavel. */
.tv th:nth-child(1) { width: 34%; }
.tv th:nth-child(2) { width: 16%; }
.tv th:nth-child(3) { width: 24%; }
.tv th:nth-child(4) { width: 12%; }
.tv th:nth-child(5) { width: 14%; }

.tv__tr:hover td { background: var(--bg-hover); }

/* Toda celula e um botao de largura inteira: a linha inteira vira area
   clicavel, sem precisar mirar num alvo pequeno. */
.tv__cell, .tv__card {
  display: flex; align-items: center; gap: 6px;
  width: 100%; min-height: 40px; padding: 7px 14px;
  text-align: left; border-radius: 0; color: inherit;
}
.tv__cell:hover, .tv__card:hover { box-shadow: inset 0 0 0 2px var(--accent); }
.tv__cell:focus-visible, .tv__card:focus-visible {
  outline: none; box-shadow: inset 0 0 0 2px var(--accent);
}
.tv__card-name { font-weight: 500; word-break: break-word; }
/* A caixa fica FORA do botao: elemento interativo dentro de <button> e HTML
   invalido e quebra o teclado. */
.tv__card-wrap { display: flex; align-items: center; padding-left: 14px; }
.tv__card-wrap .tv__card { padding-left: 8px; }
.tv__list { color: var(--text-soft); }
.tv__empty { color: var(--text-soft); opacity: .6; }
.tv__chips { display: flex; flex-wrap: wrap; gap: 4px; }
.tv__avatars { display: flex; }
.tv__avatars .avatar { margin-left: -5px; border: 2px solid var(--bg-surface); }
.tv__avatars .avatar:first-child { margin-left: 0; }

.tv__foot {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 10px 14px; border-top: 1px solid var(--line); background: var(--bg-sunken);
}

@media (max-width: 860px) {
  /* Em tela estreita a tabela rola na horizontal em vez de espremer tudo. */
  .tv { min-width: 720px; }
  .tv__scroll { overflow-x: auto; }
}
.list {
  flex: 0 0 var(--list-w); width: var(--list-w); max-height: 100%;
  display: flex; flex-direction: column;
  background: var(--bg-sunken); border-radius: var(--radius-lg); padding: 8px;
  box-shadow: var(--shadow-card);
}
.list__head { display: flex; align-items: center; gap: 6px; padding: 4px 4px 8px; }
.list__name { flex: 1; font-weight: 600; font-size: 14px; padding: 4px 6px;
              border-radius: var(--radius-sm); background: transparent; border: 0; min-width: 0; }
.list__name:hover { background: var(--bg-hover); }
.list__name:focus { background: var(--bg-surface); outline: 2px solid var(--accent); }
.list__count { font-size: 12px; color: var(--text-soft); font-variant-numeric: tabular-nums; }
.list__count.is-over { color: var(--danger); font-weight: 700; }
.list__parados { display: inline-flex; align-items: center; gap: 3px; font-size: 11px;
                 font-weight: 700; padding: 1px 6px; border-radius: 999px; flex: none; }
.list__parados .icon { width: 12px; height: 12px; }
.list__parados.is-aviso { background: var(--l-yellow-subtle); color: var(--warn); }
.list__parados.is-alerta { background: var(--l-red-subtle); color: var(--danger); }
.list__menu { width: 26px; height: 26px; border-radius: var(--radius-sm); display: grid;
              place-items: center; color: var(--text-soft); }
.list__menu:hover { background: var(--bg-hover); }
.list__collapse, .list__menu { width: 26px; height: 26px; border-radius: var(--radius-sm);
                               display: grid; place-items: center; color: var(--text-soft); flex: 0 0 auto; }
.list__collapse:hover { background: var(--bg-hover); color: var(--text); }
.list__cards { flex: 1; min-height: 6px; overflow-y: auto; overflow-x: hidden;
               display: flex; flex-direction: column; gap: 8px; padding: 2px; }
.list__foot { padding-top: 6px; }
.list__add { width: 100%; text-align: left; padding: 8px; border-radius: var(--radius-sm);
             color: var(--text-soft); display: flex; align-items: center; gap: 6px; }
.list__add:hover { background: var(--bg-hover); color: var(--text); }

.list-composer textarea, .card-composer textarea {
  width: 100%; border: 0; border-radius: var(--radius-sm); padding: 8px;
  background: var(--bg-surface); box-shadow: var(--shadow-card); resize: none;
  min-height: 58px; font-family: inherit;
}
.list-composer textarea:focus, .card-composer textarea:focus { outline: 2px solid var(--accent); }
.composer-actions { display: flex; align-items: center; gap: 8px; margin-top: 6px; }

/* ------------------------------------------------- lista recolhida -------- */
/* Faixa estreita: so o nome (na vertical) e a contagem, como no Trello. */
.list--collapsed {
  flex: 0 0 44px; width: 44px; padding: 0;
  max-height: 100%; overflow: hidden;
}
.list__expand {
  width: 100%; height: 100%; min-height: 220px;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 10px 0; color: inherit; border-radius: var(--radius-lg);
}
.list__expand:hover { background: var(--bg-hover); }
.list__expand .icon { flex: 0 0 auto; color: var(--text-soft); }
.list__collapsed-count {
  font-size: 12px; font-weight: 700; color: var(--text-soft);
  font-variant-numeric: tabular-nums; flex: 0 0 auto;
}
.list__collapsed-name {
  /* sideways-rl mantem a leitura de baixo para cima, que e como o olho
     acompanha texto vertical; onde nao houver suporte, o rotate resolve. */
  writing-mode: vertical-rl; transform: rotate(180deg);
  font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  flex: 1; min-height: 0; text-align: right;
}

/* --------------------------------------------------- cor da lista --------- */
/* Tom claro da paleta das etiquetas: a coluna inteira recebe o tom, e o texto
   passa a ser escuro porque o fundo e sempre claro, inclusive no tema escuro. */
.list--color { color: #172b4d; }
.list--color .list__name,
.list--color .list__count,
.list--color .list__collapse,
.list--color .list__menu,
.list--color .list__add,
.list--color .list__collapsed-name,
.list--color .list__collapsed-count,
.list--color .list__expand .icon { color: #44546f; }
.list--color .list__name { color: #172b4d; }

/* Cor escura da paleta (`_bold` e afins): o texto escuro sumiria. O calculo de
   contraste e o mesmo das etiquetas, feito no JS. */
.list--color.is-dark,
.list--color.is-dark .list__name,
.list--color.is-dark .list__count,
.list--color.is-dark .list__collapse,
.list--color.is-dark .list__menu,
.list--color.is-dark .list__add,
.list--color.is-dark .list__collapsed-name,
.list--color.is-dark .list__collapsed-count,
.list--color.is-dark .list__expand .icon { color: #fff; }
.list--color.is-dark .list__name:hover,
.list--color.is-dark .list__collapse:hover,
.list--color.is-dark .list__menu:hover,
.list--color.is-dark .list__add:hover { background: rgba(255, 255, 255, .18); }
.list--color .list__name:hover,
.list--color .list__collapse:hover,
.list--color .list__menu:hover,
.list--color .list__add:hover,
.list--color .list__expand:hover { background: rgba(9, 30, 66, .09); }

/* O fundo da lista colorida vai inline (sao 30 cores da mesma paleta das
   etiquetas). Aqui fica so o que depende da cor ser clara ou escura. */
.list--grey   { background: var(--l-black-subtle); }

/* Paleta no menu: 5 por linha, como no Trello. */
/* 10 cores x 3 tons: uma coluna por cor, uma linha por tom, igual a paleta das
   etiquetas — assim da para achar o tom pela posicao. */
.list-colors { display: grid; grid-template-columns: repeat(10, 1fr); gap: 5px; }
.list-color {
  height: 28px; border-radius: var(--radius-sm); cursor: pointer;
  display: grid; place-items: center; font-weight: 700; font-size: 12px;
  box-shadow: inset 0 0 0 1px rgba(9, 30, 66, .12);
}
.list-color:hover { filter: brightness(.95); }
.list-color.is-on { box-shadow: inset 0 0 0 2px #fff, 0 0 0 2px var(--text); }
.list-color:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Lista de etiquetas a importar: rola quando o quadro de origem tem muitas. */
.label-import { max-height: 320px; overflow: auto; margin-top: 10px; }
.label-import .checkitem { gap: 10px; }

.menu__sep { height: 1px; background: var(--line); margin: 8px 0; }

.add-list {
  flex: 0 0 var(--list-w); width: var(--list-w); border-radius: var(--radius-lg);
  background: rgba(255,255,255,.24); color: #fff; padding: 11px; text-align: left;
  font-weight: 600; backdrop-filter: blur(3px);
}
.add-list:hover { background: rgba(255,255,255,.34); }

/* ----------------------------------------------------------------- card -- */
.card {
  background: var(--bg-surface); border-radius: var(--radius); padding: 8px 10px 6px;
  box-shadow: var(--shadow-card); cursor: pointer; position: relative;
  border: 2px solid transparent; touch-action: manipulation;
}
.card:hover { border-color: var(--accent); }
.card__cover { height: 34px; border-radius: var(--radius-sm); margin: -3px -5px 7px; }
.card__cover-img { display: block; width: calc(100% + 10px); margin: -3px -5px 7px;
                   border-radius: var(--radius-sm); object-fit: cover; max-height: 160px; }
.card__labels { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 6px; }
.card__row { display: flex; align-items: flex-start; gap: 7px; }
.card__title { word-break: break-word; flex: 1; min-width: 0; }

/* ---------------------------------------- concluir cartao (estilo Trello) --- */
/* Input nativo reestilizado: mantem foco, teclado e leitor de tela de graca. */
.card-check {
  appearance: none; -webkit-appearance: none;
  flex: 0 0 16px; width: 16px; height: 16px; margin: 2px 0 0;
  border: 2px solid var(--text-soft); border-radius: 50%;
  background: transparent; cursor: pointer; position: relative;
  transition: opacity .12s ease, background .12s ease, border-color .12s ease;
  /* Fora do estado concluido, so aparece quando o cartao recebe o ponteiro —
     e o que mantem a leitura do quadro limpa, como no Trello. */
  opacity: 0;
}
.card:hover .card-check,
.card:focus-within .card-check,
.tv__tr:hover .card-check,
.tv__tr:focus-within .card-check,
/* :focus tambem, e nao so :focus-visible: quem chega de Tab precisa ver onde
   esta, independente de como o foco chegou ali. */
.card-check:focus,
.card-check:focus-visible,
.card-check.is-focused,
.card-check:checked { opacity: 1; }

.card-check:hover { border-color: var(--ok); }
.card-check:checked { background: var(--ok); border-color: var(--ok); }
/* O "certo" e desenhado, nao e cor sozinha: continua legivel para quem nao
   distingue verde. */
.card-check:checked::after {
  content: ""; position: absolute; left: 3px; top: 0;
  width: 4px; height: 8px; border: solid #fff; border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.card-check:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Sem ponteiro (toque) nao existe hover: a caixa fica sempre visivel. */
@media (hover: none) { .card-check { opacity: 1; } }

/* Dentro da janela do cartao e da tabela ela e permanente. */
.card-modal__head .card-check { opacity: 1; margin-top: 8px; }
.card__badges { display: flex; flex-wrap: wrap; align-items: center; gap: 9px;
                margin-top: 7px; color: var(--text-soft); font-size: 12px; }
.badge { display: inline-flex; align-items: center; gap: 3px; }
.badge .icon { width: 14px; height: 14px; }
.badge--due { padding: 2px 5px; border-radius: var(--radius-sm); }
.badge--due.is-soon { background: var(--l-yellow-subtle); color: var(--warn); }
.badge--due.is-late { background: var(--l-red-subtle); color: var(--danger); }
.badge--due.is-done { background: var(--l-green-subtle); color: var(--ok); }
/* Cartao parado na coluna: mesmo amarelo e vermelho do prazo. */
.badge--parado { padding: 2px 5px; border-radius: var(--radius-sm); font-weight: 600; }
.badge--parado.is-aviso { background: var(--l-yellow-subtle); color: var(--warn); }
.badge--parado.is-alerta { background: var(--l-red-subtle); color: var(--danger); }
/* Inicio nao tem estado de atraso — e um marco, nao um vencimento. */
.badge--start { padding: 2px 5px; border-radius: var(--radius-sm);
                background: var(--bg-hover); color: var(--text-soft); }
/* A marca e preenchida, nao de traco como os outros icones. */
.icon--wa { fill: initial; stroke: none; width: 15px; height: 15px; }
.badge--wa { padding: 0; }
.card__avatars { display: flex; margin-left: auto; }
.card__avatars .avatar { margin-left: -5px; border: 2px solid var(--bg-surface); }

.label-chip { height: 16px; min-width: 40px; border-radius: 4px; padding: 0 7px;
              font-size: 11px; font-weight: 700; color: #fff; display: inline-flex;
              align-items: center; overflow: hidden; white-space: nowrap; }
.label-chip--lg { height: 32px; min-width: 56px; border-radius: var(--radius-sm); font-size: 13px; }

/* drag & drop */
.card.is-dragging { opacity: .35; }
.dnd-ghost { position: fixed; z-index: 999; pointer-events: none; width: var(--list-w);
             transform: rotate(3deg); box-shadow: var(--shadow-drag); }
.dnd-placeholder { background: rgba(9,30,66,.13); border-radius: var(--radius);
                   border: 2px dashed rgba(9,30,66,.22); }
.list.is-drag-over { background: var(--bg-hover); }

/* --------------------------------------------------------------- modal --- */
.overlay { position: fixed; inset: 0; background: rgba(0,0,0,.62); z-index: 100;
           overflow-y: auto; padding: 40px 16px; animation: fade .12s ease; }
@keyframes fade { from { opacity: 0; } }
.modal { background: var(--bg-app); border-radius: var(--radius-lg); max-width: 780px;
         margin: 0 auto; box-shadow: var(--shadow-pop); position: relative; }
.modal--sm { max-width: 460px; }
.modal--md { max-width: 620px; }
.modal__close { position: absolute; top: 10px; right: 10px; width: 32px; height: 32px;
                border-radius: 50%; display: grid; place-items: center; color: var(--text-soft); }
.modal__close:hover { background: var(--bg-hover); }
.modal__body { padding: 20px 24px 28px; }
.modal__cover { height: 116px; border-radius: var(--radius-lg) var(--radius-lg) 0 0;
                background-size: cover; background-position: center; }

.card-modal__head { display: flex; gap: 12px; padding-right: 34px; }
.card-modal__title { flex: 1; font-size: 19px; font-weight: 700; border: 0; background: transparent;
                     resize: none; padding: 4px 6px; border-radius: var(--radius-sm); }
.card-modal__title:focus { background: var(--bg-surface); outline: 2px solid var(--accent); }
.card-modal__sub { color: var(--text-soft); font-size: 12.5px; margin: 2px 0 18px 34px; }
.card-modal__grid { display: grid; grid-template-columns: 1fr 172px; gap: 22px; }
@media (max-width: 680px) { .card-modal__grid { grid-template-columns: 1fr; } }

.cm-block { margin-bottom: 22px; }
.cm-block__head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px;
                  font-weight: 700; font-size: 13.5px; }
.cm-block__head .icon { color: var(--text-soft); }
.cm-side__title { font-size: 11px; font-weight: 700; text-transform: uppercase;
                  letter-spacing: .5px; color: var(--text-soft); margin: 0 0 6px; }
.cm-side__group { margin-bottom: 16px; }

.chips { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; }

/* -------------------------------------------------------------- inputs --- */
.input, .textarea, .select {
  width: 100%; padding: 8px 10px; border-radius: var(--radius-sm);
  border: 1.5px solid var(--line); background: var(--bg-surface); color: var(--text);
}
.input:focus, .textarea:focus, .select:focus { outline: none; border-color: var(--accent);
                                               box-shadow: 0 0 0 1px var(--accent); }
.textarea { resize: vertical; min-height: 90px; font-family: inherit; }
/* Seletor dentro de celula de tabela: a largura e do conteudo, e nao da
   coluna — um select de 100% empurraria as outras colunas para fora da tela. */
.select--sm { width: auto; max-width: 220px; padding: 3px 6px; font-size: 12px; }

/* A aba "Quadro" da Mao de obra: o BoardView espera ser filho de uma coluna
   flex que ocupa a altura toda (e `flex: 1` la dentro). Sem isto o quadro
   nasce com altura zero e a tela fica em branco. */
/* O quadro kanban embutido numa secao do menu (Mao de obra, Compras). A
   classe antiga (`.mo-quadro`) fica por compatibilidade: duas secoes ja usam
   isto, e o nome com dono confundia. */
.mo-quadro, .secao-quadro { flex: 1; min-height: 0; display: flex;
                            flex-direction: column; }
.field { margin-bottom: 14px; }
.field label { display: block; font-size: 12px; font-weight: 700; color: var(--text-soft);
               margin-bottom: 5px; }
.hint { font-size: 12px; color: var(--text-soft); margin-top: 5px; }

.btn { padding: 8px 14px; border-radius: var(--radius-sm); font-weight: 600;
       background: var(--bg-hover); color: var(--text); display: inline-flex;
       align-items: center; gap: 6px; }
.btn:hover { filter: brightness(.95); }
/* O botao do Zapia e um <a> de verdade — abre em outra aba, aceita clique do
   meio e "copiar endereco". So precisa perder o sublinhado de link. */
a.btn { text-decoration: none; }
/* Verde do Zapia, tirado do icone deles (que vai de #108076 a #22bdab). Fica no
   tom escuro da faixa de proposito: com o tom claro, texto branco daria 3,9:1 de
   contraste, abaixo do minimo legivel; neste da 4,9:1. O botao usa a cor da
   outra casa justamente para nao se confundir com os quatro importadores — ele
   leva para fora do E5 Flow. */
.btn--zapia { background: #0f7e74; color: #fff; }
.btn--zapia:hover { background: #0c6a62; filter: none; }
.btn--primary { background: var(--accent); color: #fff; }
.btn--primary:hover { background: var(--accent-strong); filter: none; }
.btn--danger { background: var(--danger); color: #fff; }
.btn--ghost { background: transparent; color: var(--text-soft); }
.btn--ghost:hover { background: var(--bg-hover); color: var(--text); }
.btn--sm { padding: 5px 10px; font-size: 13px; }
.btn--block { width: 100%; justify-content: center; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn-row { display: flex; gap: 8px; flex-wrap: wrap; }

.side-btn { width: 100%; justify-content: flex-start; margin-bottom: 6px; }
/* A caixa do calendario mora entre os botoes da lateral: mesma altura e mesmo
   alinhamento, para nao parecer um corpo estranho no meio deles. */
.side-check { display: flex; align-items: center; gap: 8px; width: 100%;
              margin-bottom: 6px; padding: 7px 10px; border-radius: var(--radius-sm);
              font-size: 13px; cursor: pointer; }
.side-check:hover { background: var(--bg-hover); }
.side-check .icon { width: 16px; height: 16px; flex: none; }
.side-check__aviso { margin: -2px 0 8px; padding-left: 10px; }

/* --------------------------------------------------------------- table --- */
.table { width: 100%; border-collapse: collapse; background: var(--bg-surface);
         border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-card); }
.table th, .table td { padding: 10px 14px; text-align: left; border-bottom: 1px solid var(--line); }
.table th { font-size: 11px; text-transform: uppercase; letter-spacing: .5px;
            color: var(--text-soft); background: var(--bg-sunken); }
.table tr:last-child td { border-bottom: 0; }
.tag { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 11px;
       font-weight: 700; background: var(--bg-hover); color: var(--text-soft); }
.tag--ok { background: var(--l-green-subtle); color: var(--ok); }
.tag--warn { background: var(--l-yellow-subtle); color: var(--warn); }
.tag--off { background: var(--l-red-subtle); color: var(--danger); }

.card-panel { background: var(--bg-surface); border-radius: var(--radius);
              box-shadow: var(--shadow-card); padding: 18px; margin-bottom: 16px; }

/* Abas de uma tela (as duas filas de importacao). Sublinhado em vez de caixa:
   a aba nao e um botao de acao, e sim onde voce esta. */
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin: 4px 0 4px; }
.tab { padding: 8px 14px; font-size: 14px; font-weight: 600; color: var(--text-soft);
       border: 0; background: transparent; cursor: pointer; border-radius: 0;
       border-bottom: 2px solid transparent; margin-bottom: -1px; }
.tab:hover { color: var(--text); background: var(--bg-hover); }
.tab.is-on { color: var(--accent); border-bottom-color: var(--accent); }
/* `.page__sub` sobe 10px para colar no titulo. Depois das abas isso a jogava
   por cima delas: aqui o recuo volta a ser positivo. */
.tabs + .page__sub { margin-top: 14px; }

/* Importacao: um destino por coluna (importar em cima, descartar embaixo).
   Cada par e um flex-column, e nao celulas de um grid, para que a quebra em
   tela estreita leve a dupla junta — num grid de quatro colunas, cair para
   duas separaria "Importar para ata" do descarte dele. */
.imp-colunas { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 2px; }
.imp-coluna { display: flex; flex-direction: column; gap: 6px; flex: 1 1 190px; }
.imp-coluna .btn { justify-content: center; text-align: center; }

/* A caixa "ler com IA" no dialogo do Zapia: caixa a esquerda, explicacao
   a direita — a escolha custa dinheiro, entao ela vem escrita. */
.ia-opcao { display: flex; gap: 10px; align-items: flex-start; margin-top: 10px;
            padding: 10px; border: 1px solid var(--line); border-radius: var(--radius-sm);
            cursor: pointer; }
.ia-opcao:hover { background: var(--bg-hover); }
.ia-grupo { margin: 2px 0; }

/* -- ficha do funcionario ------------------------------------------------ */
/* Duas colunas: rotulo estreito a esquerda, valor a direita. Em tela estreita
   vira uma coluna so, com o rotulo em cima — ler "CPF" e o numero na mesma
   linha apertada e pior do que ler em duas. */
.ficha__topo { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 4px; }
.ficha__topo > div { flex: 1; }
.ficha { display: grid; grid-template-columns: 150px 1fr; gap: 4px 12px; }
.ficha__linha { display: contents; }
.ficha__rotulo { font-size: 12px; color: var(--text-soft); padding: 3px 0; }
.ficha__valor { font-size: 13.5px; padding: 3px 0; }
@media (max-width: 520px) {
  .ficha { grid-template-columns: 1fr; gap: 0 0; }
  .ficha__rotulo { padding-top: 8px; }
}

/* Quem saiu da lista continua visivel, mas apagado: a ficha existe, o vinculo
   nao. */
.tv__tr.is-off .tv__card-name { color: var(--text-soft); }
.tv__tr.is-off td { opacity: .7; }

/* ------------------------------------------------------------ proposals -- */
.proposal { background: var(--bg-surface); border-radius: var(--radius); padding: 16px 18px;
            box-shadow: var(--shadow-card); margin-bottom: 12px; border-left: 4px solid var(--accent); }
.proposal__head { display: flex; align-items: flex-start; gap: 12px; }
/* `width: 100%` porque nem sempre o pai e flex: na linha da ata o input mora
   dentro de um .field, e sem isso ficava no tamanho padrao do browser, cortando
   a acao depois de uns 25 caracteres. Onde o pai e flex, o flex-basis do
   `flex: 1` manda e a largura nao atrapalha. */
.proposal__title { flex: 1; width: 100%; font-weight: 700; font-size: 15px; border: 0;
                   background: transparent;
                   padding: 3px 5px; border-radius: var(--radius-sm); resize: none; }
.proposal__title:focus { background: var(--bg-sunken); outline: 2px solid var(--accent); }
.proposal__meta { display: flex; gap: 12px; flex-wrap: wrap; color: var(--text-soft);
                  font-size: 12px; margin: 8px 0 10px 5px; }
.proposal.is-picked { border-left-color: var(--ok); background: var(--bg-sunken); }

/* Linha de decisao da observacao de RDO: obra, dia e o aviso do que vai
   acontecer. Alinhada com o texto (o recuo salta a caixa de selecao). */
.proposal__row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
                 margin: 10px 0 0 28px; }
.proposal__row .select { flex: 1; min-width: 200px; }
.proposal__foot { display: flex; align-items: center; gap: 8px; margin: 8px 0 0 28px; }
.proposal__pick { width: 16px; height: 16px; margin-top: 6px; flex: none; cursor: pointer; }

/* Barra de acoes em lote: acompanha a rolagem porque a fila e longa e a
   selecao comeca em cima — sem isto voce escolhe 20 e perde os botoes. */
.bulkbar { position: sticky; top: 8px; z-index: 5;
           display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
           background: var(--bg-surface); border-radius: var(--radius);
           box-shadow: var(--shadow-card); padding: 10px 14px; margin-bottom: 12px;
           border-left: 4px solid var(--ok); }
.bulkbar[hidden] { display: none; }
.bulkbar__pick { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: 13px; }
.bulkbar__pick input { width: 16px; height: 16px; cursor: pointer; }

/* Quantas ainda esperam decisao, ao lado do titulo da tela. */
/* No cabecalho da pagina, campo de formulario nao deve esticar e empurrar os
   botoes para a linha de baixo. */
.page__head .input, .page__head .select { width: auto; }

/* ------------------------------------------------ diario de obras -------- */
/* Linha de campos que quebra sozinha em tela estreita: o cadastro da obra tem
   trios (responsavel / tipo / contratante) que nao cabem no celular. */
.form-row { display: grid; gap: 0 14px; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }

/* Todos os cartoes de obra do mesmo tamanho.

   `grid-auto-rows: 1fr` iguala TODAS as linhas a mais alta da grade (e nao so
   as celulas de uma mesma linha): sem isso, uma obra com foto deixava a
   primeira linha alta e a de baixo baixinha, e a tela parecia quebrada. */
.obra-grid { grid-auto-rows: 1fr; }
.obra-grid .obra-tile { height: 100%; }

/* Barra entre os grupos de situacao. Fica **entre** as grades, e nao dentro de
   uma: a grade de obras usa `grid-auto-rows: 1fr`, que iguala todas as linhas a
   mais alta — uma barra la dentro teria a altura de um cartao. */
.obra-sep { display: flex; align-items: center; gap: 8px; margin: 22px 0 12px; }
.obra-sep__rotulo { font-size: 11px; font-weight: 700; letter-spacing: .04em;
                    text-transform: uppercase; color: var(--text-soft); }
.obra-sep__conta { font-size: 11px; font-weight: 700; color: var(--text-soft);
                   background: var(--bg-sunken); border-radius: 10px; padding: 1px 7px; }
.obra-sep__linha { flex: 1; height: 1px; background: var(--line); }

.obra-tile { position: relative; text-align: left; display: flex; flex-direction: column;
             gap: 6px; padding: 14px; min-height: 104px; border-radius: var(--radius);
             background: var(--bg-surface); box-shadow: var(--shadow-card);
             border-left: 4px solid var(--accent); cursor: pointer; }
.obra-tile[data-obra-id] { cursor: grab; }
.obra-tile[data-obra-id]:active { cursor: grabbing; }
.obra-tile:hover { background: var(--bg-hover); }
.obra-tile__name { font-size: 15px; }
.obra-tile__meta { font-size: 12px; color: var(--text-soft); }
.obra-tile__status { align-self: flex-start; font-size: 10.5px; font-weight: 700;
                     letter-spacing: .3px; padding: 2px 7px; border-radius: 3px;
                     background: var(--bg-sunken); color: var(--text-soft); }
.obra-tile__status.is-em_andamento { background: var(--l-blue-subtle); color: var(--l-blue-bold); }
.obra-tile__status.is-concluida { background: var(--l-green-subtle); color: var(--ok); }
.obra-tile__status.is-paralisada { background: var(--l-red-subtle); color: var(--danger); }

/* Foto da obra no cartao: entra depois do texto e ocupa o dobro da altura dele,
   que e o suficiente para reconhecer a obra sem virar um banner. */
.obra-tile.has-foto { padding-bottom: 0; overflow: hidden; }
/* `margin-top: auto` gruda a foto no pe do cartao. Como todos os cartoes tem a
   mesma altura, um nome curto sobraria espaco entre o texto e a foto — e a
   foto de cada cartao apareceria numa altura diferente. O `gap: 6px` do flex
   garante a folga minima quando nao ha espaco sobrando. */
.obra-tile__foto { width: calc(100% + 28px); margin: auto -14px -14px;
                   height: 208px; object-fit: cover; display: block; }

/* Previa dentro do cadastro. */
.obra-foto { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 14px; }
.obra-foto__previa { flex: 0 0 132px; height: 92px; border-radius: var(--radius-sm);
                     background: var(--bg-sunken); display: flex; align-items: center;
                     justify-content: center; overflow: hidden; }
.obra-foto__previa img { width: 100%; height: 100%; object-fit: cover; }

/* Ficha da obra e cabecalho do RDO: rotulo pequeno em cima, valor embaixo. */
.obra-ficha { display: grid; gap: 10px 18px;
              grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.obra-ficha__rot { display: block; font-size: 11px; font-weight: 700; letter-spacing: .3px;
                   color: var(--text-soft); text-transform: uppercase; }

.rdo-head { position: relative; }
.rdo-head__title { text-align: center; font-weight: 700; padding-bottom: 10px;
                   margin-bottom: 12px; border-bottom: 1px solid var(--line); }
/* Canto superior direito do primeiro quadro, sobre o espaco em branco ao lado
   do titulo. Absoluta para nao empurrar o titulo do centro da folha.
   Aparece so na impressao (`print-only` controla o display). */
.rdo-head__logo { position: absolute; top: 2px; right: 2px; width: auto; }

/* Esteira de estagios do relatorio. */
.rdo-steps { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.rdo-step { padding: 7px 13px; border-radius: 999px; font-size: 12.5px; font-weight: 600;
            background: var(--bg-surface); box-shadow: var(--shadow-card); color: var(--text-soft); }
.rdo-step:hover { background: var(--bg-hover); color: var(--text); }
.rdo-step.is-on { background: var(--accent); color: #fff; }
/* Etapa ja cumprida: fica marcada, mas sem competir com a etapa atual. */
.rdo-step.is-done { background: var(--l-green-subtle); color: var(--ok); }

/* Assinatura ja dada: nome sobre a linha, como no papel. */
.rdo-assinado { padding: 4px 0; }
.rdo-assinado__nome { display: block; font-size: 15px; margin: 6px 0 2px; }
.rdo-assinado__linha { display: block; border-top: 1px solid var(--text-soft);
                       max-width: 260px; margin-bottom: 5px; }
.rdo-assina-espera { padding: 4px 0; opacity: .65; }

.rdo-secao__head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.rdo-item { display: flex; align-items: flex-start; gap: 10px; padding: 9px 0;
            border-top: 1px solid var(--line); }
.rdo-item:first-of-type { border-top: 0; }
/* Comentario e ocorrencia sao texto livre, e texto livre tem paragrafo. Sem
   isto as quebras de linha somem e um comentario de tres linhas vira uma
   frase corrida — na tela e no papel. `pre-line` mantem a quebra e continua
   juntando os espacos, entao um texto colado com indentacao nao desalinha. */
.rdo-item strong, .rdo-item .hint { white-space: pre-line; }

.rdo-radios { display: flex; gap: 14px; flex-wrap: wrap; }
.rdo-radio { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; font-size: 13px; }

.rdo-galeria { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
               margin-bottom: 12px; }
.rdo-file-wrap { position: relative; }
.rdo-file { display: block; border-radius: var(--radius-sm); overflow: hidden;
            background: var(--bg-sunken); text-decoration: none; color: var(--text); }
.rdo-file img { display: block; width: 100%; height: 92px; object-fit: cover; }
.rdo-file__ico { display: flex; align-items: center; justify-content: center; height: 92px;
                 color: var(--text-soft); }
.rdo-file__name { display: block; padding: 5px 7px; font-size: 11.5px;
                  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rdo-file-wrap .mini-btn { position: absolute; top: 4px; right: 4px; background: var(--bg-surface); }

.rdo-estagio.is-aprovado { color: var(--ok); }
.rdo-estagio.is-editado_pos_aprovacao { color: var(--danger); }

/* Elementos que so existem no papel (contagem de videos e anexos). */
.print-only { display: none; }

/* --------------------------------------------------------- impressao ----- */
/* Folha A4 com margens padrao. O RDO e documento de obra: sai a navegacao e
   tudo que e controle de tela, e entra so o relatorio, do cabecalho ate as
   assinaturas. */
@page { size: A4; margin: 15mm; }

@media print {
  .topbar, .page__head, .rdo-steps, .btn, .mini-btn, .btn-row,
  .no-print, #toastRoot, #modalRoot, #menuRoot { display: none !important; }
  .print-only { display: block !important; }

  /* O app e uma casca de altura de tela com rolagem por dentro
     (`.app-shell` 100vh, `.view` hidden, `.page` auto). No papel isso vira
     uma caixa do tamanho de um monitor, com barra de rolagem impressa e o
     resto do relatorio cortado. Aqui a casca inteira vira fluxo normal. */
  html, body {
    background: #fff !important; width: auto !important; height: auto !important;
    overflow: visible !important;
  }
  body { font-size: 10.5pt; color: #000; }
  .app-shell, .view, .page, .board, .board__content, .table-view {
    display: block !important; height: auto !important; min-height: 0 !important;
    max-height: none !important; overflow: visible !important; flex: none !important;
  }
  .table-view { margin: 0 !important; box-shadow: none !important; border-radius: 0; }
  .page { background: #fff; padding: 0 !important; margin: 0; max-width: none; }
  .tv__scroll { overflow: visible !important; max-width: 100%; flex: none !important; }
  .card-panel { box-shadow: none; border: 1px solid #999; padding: 8px 10px;
                margin-bottom: 8px; break-inside: auto; }

  /* Tabela do clima: larguras em porcentagem, texto que quebra, sem cortar.
     `max-width` junto com `table-layout: fixed` e o que impede a tabela de ser
     dimensionada pela largura da tela e depois sair da folha. */
  .tv { width: 100% !important; max-width: 100% !important; table-layout: fixed;
        font-size: 9.5pt; }
  .tv th, .tv td { padding: 3px 5px; word-break: break-word; white-space: normal; }
  .tv__th { background: #f0f0f0 !important; -webkit-print-color-adjust: exact;
            print-color-adjust: exact; }
  /* Sem largura definida, "Periodo" fica com meia folha e as tres opcoes de
     tempo empilham em tres linhas — a tabela do clima triplica de altura. */
  .tv--clima th:first-child, .tv--clima td:first-child { width: 20%; }
  .tv--clima th:nth-child(2), .tv--clima td:nth-child(2) { width: 44%; }
  .rdo-radios { gap: 6px; flex-wrap: nowrap; }
  .rdo-radio { font-size: 8.5pt; white-space: nowrap; }
  .rdo-radio input { width: 9px; height: 9px; }

  /* Na folha a logo fica menor e centralizada na altura do quadro, em vez de
     encostada no topo: o quadro tem duas linhas (titulo e ficha) e a marca
     equilibra melhor no meio delas. */
  .rdo-head__logo { height: 15mm; right: 2mm; top: 50%; transform: translateY(-50%); }
  .section-title, .rdo-head__title { break-after: avoid; }
  .rdo-item { break-inside: avoid; padding: 4px 0; }
  .obra-ficha { gap: 5px 12px; }

  /* Foto vai miniaturizada: seis por linha cabem na largura util do A4. */
  .rdo-galeria { grid-template-columns: repeat(6, 1fr); gap: 5px; break-inside: avoid; }
  .rdo-file img { height: 26mm; }
  .rdo-file__name { display: none; }

  /* As assinaturas sao o fim do documento e nao podem quebrar no meio. */
  .rdo-assinado, .rdo-assina-espera { break-inside: avoid; }
  .rdo-assinado__linha { border-top-color: #000; }

  a[href]::after { content: ""; }        /* sem URL impressa depois do link */

  /* ---- tabela do quadro no papel ------------------------------------
     A barra do quadro e fundo colorido com botoes: no papel ela gastaria a
     primeira faixa da folha sem dizer nada. Quem identifica o documento e o
     `.tv-print__head`, que existe so aqui. */
  .board__bar, .tv__foot, .tv__empty, .board-tile__del, .board-tile__star,
  .board-tile__grupo { display: none !important; }
  .board { background: #fff !important; }

  .tv-print__head { margin: 0 0 8px; }
  .tv-print__head h1 { margin: 0; font-size: 15pt; }
  .tv-print__head p { margin: 2px 0 0; font-size: 9pt; color: #444; }

  /* O cabecalho se repete em cada folha: uma tabela de 78 linhas passa de
     duas paginas, e sem isto a segunda chega sem dizer que coluna e qual. */
  .tv thead { display: table-header-group; }
  .tv__th { position: static !important; }
  .tv__tr { break-inside: avoid; }
  .tv--quadro { border-collapse: collapse; }
  .tv--quadro th, .tv--quadro td { border: 1px solid #bbb; }

  /* A caixinha de concluir e invisivel na tela ate o mouse chegar, mas ocupa
     lugar: no papel isso viraria uma coluna de espaco em branco antes de todo
     nome. Fica so a marcada, que ai vale como marca de concluido. */
  .card-check:not(:checked) { display: none; }

  /* Celula clicavel e um <button>: no papel tem que parecer texto. */
  .tv__cell, .tv__card { background: none !important; border: 0 !important;
                         padding: 0 !important; color: #000 !important;
                         width: auto !important; text-align: left; }
  .tv__chips { flex-wrap: wrap; }
  .label-chip { -webkit-print-color-adjust: exact; print-color-adjust: exact; }

  /* Sem largura definida, `table-layout: fixed` daria 1/6 da folha para cada
     coluna — e o titulo do cartao, que e o que se le, ficaria com uma palavra
     por linha. */
  .tv--quadro th:nth-child(1), .tv--quadro td:nth-child(1) { width: 34%; }
  .tv--quadro th:nth-child(2), .tv--quadro td:nth-child(2) { width: 24%; }
  .tv--quadro th:nth-child(3), .tv--quadro td:nth-child(3) { width: 18%; }
  .tv--quadro th:nth-child(4), .tv--quadro td:nth-child(4) { width: 12%; }
  .tv--quadro th:nth-child(5), .tv--quadro td:nth-child(5) { width: 12%; }
}

/* Botao discreto dentro do cartao e da linha da tabela. Fica apagado ate o
   mouse chegar perto: e uma acao de arremate, nao a principal. */
.mini-btn { flex: 0 0 auto; width: 24px; height: 24px; border-radius: var(--radius-sm);
            display: inline-flex; align-items: center; justify-content: center;
            color: var(--text-soft); opacity: .45; transition: opacity .12s ease; }
.mini-btn .icon { width: 15px; height: 15px; }
.card:hover .mini-btn, .tv__tr:hover .mini-btn, .rdo-item:hover .mini-btn,
.rdo-file-wrap:hover .mini-btn, .mini-btn:focus-visible { opacity: 1; }
.mini-btn:hover { background: var(--bg-hover); color: var(--text); opacity: 1; }
.mini-btn[disabled] { opacity: .3; }

/* Linha de cartao que ja foi guardado: continua legivel, mas se distingue do
   que ainda esta no quadro. */
.tv__tr.is-stored .tv__card-name { color: var(--text-soft); }

/* No historico as celulas nao editam: sem cursor de clique nem hover. */
.tv__cell--ro { cursor: default; }
.tv__cell--ro:hover { background: transparent; }

.queue-count { align-self: center; background: var(--bg-sunken); color: var(--text-soft);
               border-radius: 999px; padding: 3px 11px; font-size: 12.5px; font-weight: 600; }
.queue-count[hidden] { display: none; }

/* Bolinha da cor da etiqueta: um <select> nativo nao mostra cor, e a cor e
   justamente como a obra e reconhecida no quadro. */
.label-pick { display: inline-flex; align-items: center; gap: 6px; }
.label-dot { width: 14px; height: 14px; border-radius: 50%; flex: none;
             border: 2px solid transparent; }
.label-dot.is-empty { border-color: var(--line); border-style: dashed; }

.confidence { display: inline-flex; align-items: center; gap: 5px; }
.confidence__bar { width: 46px; height: 5px; border-radius: 3px; background: var(--bg-hover); overflow: hidden; }
.confidence__fill { height: 100%; background: var(--accent); }
.evidence { background: var(--bg-sunken); border-radius: var(--radius-sm); padding: 9px 12px;
            font-size: 12.5px; color: var(--text-soft); margin: 0 0 10px 5px; }
.evidence p { margin: 0 0 4px; }
.evidence p:last-child { margin: 0; }

/* --------------------------------------------------------------- misc ---- */
/* Botao discreto: o historico e consulta, nao acao principal do cartao. */
.historico-toggle {
  display: inline-flex; align-items: center; gap: 5px;
  margin-top: 2px; padding: 5px 9px; border-radius: var(--radius-sm);
  color: var(--text-soft); font-size: 12.5px; font-weight: 600;
}
.historico-toggle:hover { background: var(--bg-hover); color: var(--text); }
.historico-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.historico-toggle .icon { width: 14px; height: 14px; transition: transform .15s ease; }
.historico-toggle.is-open .icon { transform: rotate(180deg); }

.comment { display: flex; gap: 10px; margin-bottom: 14px; }
.comment__body { flex: 1; }
.comment__bubble { background: var(--bg-surface); border-radius: var(--radius);
                   padding: 9px 12px; box-shadow: var(--shadow-card); word-break: break-word; }
.comment__meta { font-size: 11.5px; color: var(--text-soft); margin-top: 4px; }
.comment__meta button { color: var(--text-soft); text-decoration: underline; font-size: 11.5px; }

.checkitem { display: flex; align-items: flex-start; gap: 9px; padding: 5px 6px;
             border-radius: var(--radius-sm); }
.checkitem:hover { background: var(--bg-hover); }
.checkitem input { margin-top: 3px; width: 15px; height: 15px; accent-color: var(--accent); }
.checkitem span { flex: 1; word-break: break-word; }
.checkitem.is-done span { text-decoration: line-through; color: var(--text-soft); }
.progress { height: 7px; border-radius: 4px; background: var(--bg-hover); overflow: hidden; margin: 6px 0 10px; }
.progress__fill { height: 100%; background: var(--ok); transition: width .2s; }

.attach { display: flex; gap: 10px; align-items: center; padding: 7px; border-radius: var(--radius-sm); }
.attach:hover { background: var(--bg-hover); }
.attach__thumb { width: 74px; height: 54px; border-radius: var(--radius-sm); object-fit: cover;
                 background: var(--bg-hover); flex: 0 0 auto; }
.attach__info { flex: 1; min-width: 0; }
/* display:block e obrigatorio: reticencias nao funcionam em elemento inline,
   e sem isso o nome do arquivo passa por cima dos botoes da direita. */
.attach__name { display: block; font-weight: 600; overflow: hidden;
                text-overflow: ellipsis; white-space: nowrap; }
.attach > .btn { flex: 0 0 auto; }
.attach__meta { font-size: 11.5px; color: var(--text-soft); }

.dropzone { border: 2px dashed var(--line); border-radius: var(--radius); padding: 18px;
            text-align: center; color: var(--text-soft); }
.dropzone.is-over { border-color: var(--accent); background: var(--l-blue-subtle); color: var(--accent-strong); }

.menu { position: fixed; z-index: 200; background: var(--bg-surface); border-radius: var(--radius);
        box-shadow: var(--shadow-pop); width: 288px; max-height: 78vh; overflow: auto; }
.menu__head { display: flex; align-items: center; padding: 10px 12px; border-bottom: 1px solid var(--line); }
.menu__head h3 { flex: 1; margin: 0; font-size: 13px; text-align: center; font-weight: 700; }
.menu__body { padding: 10px 12px 14px; }
.menu__item { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left;
              padding: 8px 10px; border-radius: var(--radius-sm); }
.menu__item:hover { background: var(--bg-hover); }
.menu__item.is-danger { color: var(--danger); }
/* Largura suficiente para a paleta de 10 colunas caber sem apertar. */
.menu--wide { width: 348px; }

/* ------------------------------------------------- etiquetas: gerenciar --- */
.label-row { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; }
.label-row__pick {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px;
  padding: 0; border-radius: var(--radius-sm);
}
.label-row__pick .label-chip--lg { flex: 1; min-width: 0; padding: 0 10px; }
.label-row__pick .label-chip--lg span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.label-row__check { width: 18px; flex: 0 0 18px; text-align: center; color: var(--ok); font-weight: 700; }
.label-row__edit {
  width: 30px; height: 30px; flex: 0 0 30px; border-radius: var(--radius-sm);
  display: grid; place-items: center; color: var(--text-soft);
}
.label-row__edit:hover { background: var(--bg-hover); color: var(--text); }

/* Paleta: 3 linhas (claro / medio / escuro) x 10 matizes. */
.swatches { display: grid; grid-template-columns: repeat(10, 1fr); gap: 5px; margin-bottom: 4px; }
.swatch {
  aspect-ratio: 1; border-radius: 5px; padding: 0; cursor: pointer;
  box-shadow: inset 0 0 0 1px rgba(9, 30, 66, .14);
  transition: transform .1s ease;
}
.swatch:hover { transform: scale(1.14); }
.swatch:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* Marcador da cor ativa: anel interno branco + borda escura, legivel sobre
   qualquer uma das 30 cores. */
.swatch.is-on { box-shadow: inset 0 0 0 2px #fff, 0 0 0 2px var(--text); }
.swatch-row-label {
  grid-column: 1 / -1; font-size: 10px; text-transform: uppercase; letter-spacing: .5px;
  color: var(--text-soft); margin: 6px 0 -1px;
}

.label-preview {
  display: flex; align-items: center; justify-content: center; min-height: 44px;
  border-radius: var(--radius-sm); padding: 8px 12px; margin-bottom: 12px;
  font-weight: 700; word-break: break-word; text-align: center;
}

.toasts { position: fixed; bottom: 20px; right: 20px; z-index: 300; display: flex;
          flex-direction: column; gap: 8px; align-items: flex-end; }
.toast { background: #172b4d; color: #fff; padding: 11px 16px; border-radius: var(--radius);
         box-shadow: var(--shadow-pop); max-width: 380px; animation: slide .18s ease; }
.toast--err { background: var(--danger); }
.toast--ok { background: var(--ok); }
/* Aviso de versao nova do app: fica ate a pessoa clicar, com o botao ao lado. */
.toast--acao { display: flex; align-items: center; gap: 12px; }
.toast--acao .btn { background: #fff; color: #172b4d; border: 0; }
@keyframes slide { from { transform: translateX(24px); opacity: 0; } }

.empty { text-align: center; padding: 56px 20px; color: var(--text-soft); }
.empty h2 { color: var(--text); margin: 0 0 8px; font-size: 17px; }
.spinner { width: 22px; height: 22px; border: 2.5px solid var(--line);
           border-top-color: var(--accent); border-radius: 50%; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.center-pad { display: grid; place-items: center; padding: 60px; }

/* ----------------------------------------------------------------- auth -- */
.auth { min-height: 100vh; display: grid; place-items: center; padding: 24px;
        background: linear-gradient(150deg, #0b1220, #17233d 55%, #1f3a6e); }
.auth__card { width: 100%; max-width: 400px; background: var(--bg-surface); border-radius: var(--radius-lg);
              padding: 32px; box-shadow: 0 12px 40px rgba(0,0,0,.4); }
.auth__brand { display: flex; align-items: center; gap: 10px; justify-content: center; margin-bottom: 6px; }
.auth__brand .brand-mark { width: 34px; height: 28px; }
.auth__brand .brand-text { font-size: 20px; color: var(--text); }
.auth__tag { text-align: center; color: var(--text-soft); margin: 0 0 24px; font-size: 13px; }
.auth__err { background: var(--l-red-subtle); color: var(--danger); padding: 9px 12px;
             border-radius: var(--radius-sm); margin-bottom: 14px; font-size: 13px; }

/* -------------------------------------------------------------- celular --
   Abaixo de 720 px o menu do topo vira a gaveta (botao ☰): os dez itens nao
   cabem, e empurravam a busca e a conta para fora da tela. */
.topbar__menu { display: none; }

@media (max-width: 720px) {
  .topbar { gap: 4px; padding: 0 6px; }
  .topbar__menu { display: grid; }
  .topbar__nav { display: none; }
  .brand-text { display: none; }
  .topbar__search input { width: 118px; }
  /* Tocar na busca abre ela na largura inteira, por cima do topo — no
     celular nao ha espaco para "crescer um pouco". */
  .topbar__search input:focus {
    position: fixed; left: 8px; right: 8px; width: auto; z-index: 70;
    top: calc(env(safe-area-inset-top) + (var(--topbar-h) - 34px) / 2);
  }
  .search-results { position: fixed; left: 8px; right: 8px; width: auto;
                    top: calc(env(safe-area-inset-top) + var(--topbar-h) + 4px); }
  .page { padding: 20px 16px 50px; }
  :root { --list-w: 264px; }
}

/* A gaveta do celular. */
.gaveta { position: fixed; inset: 0; z-index: 200; background: rgba(9, 30, 66, .5);
          animation: gaveta-fundo .15s ease; }
.gaveta__painel {
  position: absolute; top: 0; bottom: 0; left: 0; width: min(300px, 86vw);
  background: var(--topbar); color: #fff; display: flex; flex-direction: column;
  padding: env(safe-area-inset-top) 0 env(safe-area-inset-bottom) env(safe-area-inset-left);
  box-shadow: 4px 0 24px rgba(0, 0, 0, .35); animation: gaveta-entra .18s ease;
}
.gaveta__topo { display: flex; align-items: center; justify-content: space-between;
                height: var(--topbar-h); padding: 0 8px 0 18px; flex: none;
                border-bottom: 1px solid rgba(255, 255, 255, .1); }
.gaveta__lista { overflow-y: auto; padding: 8px; display: flex; flex-direction: column; gap: 2px; }
.gaveta__item { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 46px;
                padding: 0 12px; border-radius: var(--radius); color: #fff; font-size: 15px;
                font-weight: 500; text-align: left; }
.gaveta__item:hover, .gaveta__item:focus-visible { background: var(--topbar-hover); outline: none; }
.gaveta__item.is-active { background: rgba(255, 255, 255, .16); }
.gaveta__item .pill { margin-left: auto; }
@keyframes gaveta-fundo { from { opacity: 0; } }
@keyframes gaveta-entra { from { transform: translateX(-100%); } }
@media (prefers-reduced-motion: reduce) {
  .gaveta, .gaveta__painel { animation: none; }
}

/* iPhone aberto pela tela inicial (status-bar translucida): o topo desce o
   tamanho da faixa do relogio e da camera, e as laterais respeitam o recorte
   da tela deitada. Fora do iPhone, env() vale zero e nada muda. */
.topbar {
  height: calc(var(--topbar-h) + env(safe-area-inset-top));
  flex-basis: calc(var(--topbar-h) + env(safe-area-inset-top));
  padding-top: env(safe-area-inset-top);
  padding-left: max(12px, env(safe-area-inset-left));
  padding-right: max(12px, env(safe-area-inset-right));
}
@media (max-width: 720px) {
  .topbar { padding-left: max(6px, env(safe-area-inset-left));
            padding-right: max(6px, env(safe-area-inset-right)); }
}
.toasts { bottom: calc(20px + env(safe-area-inset-bottom)); }

/* ------------------------------------------------------ quadro no celular --
   Barra em duas linhas (sem os avatares, que so ocupam lugar), colunas que
   encaixam uma de cada vez deixando a ponta da proxima a vista, e o cartao
   "levantado" quando o dedo segura (ver dnd.js). */
/* ----------------------------------------- tabelas e abas no celular ----
   Tabela larga rola para o lado dentro da propria caixa, em vez de cortar as
   colunas da direita; abas numa linha so, rolando, em vez de quebrar em tres. */
@media (max-width: 860px) {
  /* O clima do RDO tem tres colunas curtas: herdava os 720px minimos das
     tabelas grandes e escondia "Tempo" e "Condicao" fora da tela. */
  .tv.tv--clima { min-width: 0; }
  .table-view { overflow-x: auto; }
  .table { display: block; overflow-x: auto; white-space: nowrap; }
}
/* Tabelas de pessoas e maquinas no celular (Mao de obra, Equipamentos, a
   vista Tabela do quadro): de ponta a ponta da tela, cada coluna do tamanho
   do que tem dentro, o nome numa linha so — com as larguras em porcentagem o
   seletor de obra roubava o espaco e o nome quebrava letra por letra ("Ana
   Ficti cia"). A coluna do nome fica presa a esquerda enquanto a tabela rola,
   para nunca se perder de quem e a linha. */
@media (max-width: 720px) {
  .page .table-view { margin-left: -16px; margin-right: -16px; border-radius: 0; }
  .tv { width: max-content; min-width: 100%; }
  .tv th:nth-child(n) { width: auto; }
  .tv__card-name { white-space: nowrap; word-break: normal; }
  .tv th:first-child, .tv td:first-child {
    position: sticky; left: 0; background: var(--bg-surface);
    box-shadow: 1px 0 0 var(--line);
  }
  .tv th:first-child { z-index: 3; background: var(--bg-sunken); }
  .tv td:first-child { z-index: 1; }
  .tv__tr.is-off td:first-child { opacity: 1; }
}

@media (max-width: 720px) {
  .tabs { overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; }
  .tabs::-webkit-scrollbar { display: none; }
  .tab { white-space: nowrap; flex: none; }
}

/* iPhone: campo com letra menor que 16px faz o Safari dar zoom na pagina ao
   tocar para digitar — e a tela fica torta ate a pessoa desfazer o zoom com
   dois dedos. No celular, todo campo tem 16px. */
@media (max-width: 720px) {
  input, textarea, select, .input, .textarea, .select { font-size: 16px; }
}

/* ------------------------------------------------ alvos para o dedo ------
   Em tela de toque, o que se clica cresce ate o tamanho de um dedo (~36px).
   No computador fica como esta: o mouse acerta 16px sem esforco. */
@media (pointer: coarse) {
  .mini-btn { width: 36px; height: 36px; }
  .card-check { flex-basis: 22px; width: 22px; height: 22px; }
  .proposal__pick { width: 22px; height: 22px; }
  .cadastro-head button { min-height: 36px; }
  .modal__close, .icon-btn { min-width: 40px; min-height: 40px; }
  /* Sem mouse nao ha "passar por cima": estrela e grupo ficam a vista. A
     lixeira do quadro **nao** — excluir quadro por um toque errado seria facil
     demais; no celular isso se faz pelo menu de dentro do quadro. */
  .board-tile__star, .board-tile__grupo { opacity: .9; padding: 8px; }
  .board-tile__star { top: 4px; right: 4px; }
  .board-tile__grupo { top: 4px; right: 48px; }
  .board-tile__del { display: none; }
  .list__collapse, .list__menu { min-width: 36px; min-height: 36px; }
  /* Caixa de marcar do navegador tem 13px: pequena demais para o dedo. */
  input[type="checkbox"]:not(.card-check), input[type="radio"] { width: 20px; height: 20px; }
  .select--sm { min-height: 36px; }
}
@media (max-width: 720px) {
  /* As tres abas do Financeiro (vencimento, competencia, calendario) passavam
     13px da tela: rolam, como as outras abas. */
  .fin-base { overflow-x: auto; scrollbar-width: none; max-width: 100%; }
  .fin-base::-webkit-scrollbar { display: none; }
}

/* Janelas no celular: as grandes (cartao, fichas, formularios) viram tela
   cheia, como uma tela de app; as pequenas (confirmar, escolher) continuam
   flutuando, porque sao perguntas rapidas por cima do que se estava vendo. */
@media (max-width: 720px) {
  .overlay { padding: 0; }
  .modal:not(.modal--sm) { max-width: none; min-height: 100%; border-radius: 0;
                           padding-top: env(safe-area-inset-top);
                           padding-bottom: env(safe-area-inset-bottom); }
  .modal--sm { margin: 18vh 12px 0; }
  .modal__close { width: 40px; height: 40px; top: calc(6px + env(safe-area-inset-top)); right: 6px; }
  .modal__body { padding: 18px 16px 28px; }
  .modal__cover { border-radius: 0; }
}

.dnd-pronto { transform: scale(1.03); box-shadow: 0 8px 22px rgba(9, 30, 66, .32);
              transition: transform .12s ease, box-shadow .12s ease; }
@media (hover: none) {
  /* Segurar o cartao e gesto de arrastar, e nao de selecionar texto. */
  .card, .list__head { -webkit-user-select: none; user-select: none;
                       -webkit-touch-callout: none; }
}
@media (max-width: 720px) {
  :root { --list-w: min(300px, calc(100vw - 52px)); }
  .board__bar { gap: 6px; padding: 8px 10px; }
  .board__members { display: none; }
  .board__title { font-size: 16px; min-width: 0; max-width: calc(100vw - 110px);
                  text-overflow: ellipsis; }
  .lists { gap: 8px; padding: 10px 12px 16px; scroll-snap-type: x mandatory;
           scroll-padding-left: 12px; overscroll-behavior-x: contain; }
  .list { scroll-snap-align: start; }
}

/* ------------------------------------------------------------- inicial --- */
/* A tela que o icone do E5 Flow abre: o menu de cima em quadrados, sobre o
   mesmo fundo do quadro de Obras (a imagem vem de la, pelo JS). */
/* O escuro por baixo nao e decoracao: o texto e os quadrados sao brancos, e
   se a imagem do quadro demorar, falhar ou sair do ar, e ele que mantem a
   tela legivel. Por isso um tom fixo, e nao `--bg-sunken`, que no tema claro
   deixaria branco sobre branco. */
.inicio { flex: 1; min-height: 0; overflow: auto;
          background-size: cover; background-position: center;
          background-repeat: no-repeat; background-color: #16233c;
          /* Um veu escuro por cima da imagem do quadro. E sombra interna, e
             nao um segundo plano de fundo, porque o endereco da imagem chega
             pelo JS e sobrescreveria qualquer camada declarada aqui. Sem ele,
             o fundo do quadro de Obras aparece recortado em tamanho de
             cartaz e briga com os quadrados. */
          box-shadow: inset 0 0 0 100vmax rgba(11, 18, 32, .62); }
.inicio__interior { max-width: 1040px; margin: 0 auto; padding: 46px 20px 60px; }

/* Texto claro sobre uma imagem qualquer: a sombra e o que garante leitura
   quando o fundo cai numa parte clara da foto. */
.inicio__marca { color: #fff; text-shadow: 0 1px 10px rgba(0,0,0,.55); margin-bottom: 22px; }
.inicio__marca .brand-mark { width: 86px; height: 72px; margin-bottom: 12px;
                             filter: drop-shadow(0 2px 12px rgba(0,0,0,.5)); }
.inicio__marca h1 { margin: 0; font-size: 30px; letter-spacing: .2px; }
.inicio__marca p { margin: 6px 0 0; font-size: 14px; color: rgba(255,255,255,.88); }

.inicio__grade { display: grid; gap: 14px;
                 grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); }

/* O quadrado de cada funcao. O vidro escuro (`backdrop-filter`) e o mesmo
   recurso da barra do quadro: deixa a imagem aparecer sem disputar com o
   texto. */
.inicio-tile {
  position: relative; display: flex; flex-direction: column; align-items: flex-start;
  gap: 6px; text-align: left; min-height: 122px; padding: 15px 16px;
  border-radius: var(--radius); color: #fff;
  background: rgba(13, 20, 32, .56); border: 1px solid rgba(255,255,255,.16);
  backdrop-filter: blur(6px);
  transition: background .14s ease, transform .14s ease, border-color .14s ease;
}
.inicio-tile:hover { background: rgba(13, 20, 32, .72); border-color: rgba(255,255,255,.32);
                     transform: translateY(-2px); }
.inicio-tile:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.inicio-tile__ico { display: inline-flex; padding: 7px; border-radius: 9px;
                    background: rgba(255,255,255,.14); }
.inicio-tile__ico .icon { width: 20px; height: 20px; }
.inicio-tile__nome { font-size: 15.5px; font-weight: 700; margin-top: 2px; }
.inicio-tile__dica { font-size: 12.5px; line-height: 1.35; color: rgba(255,255,255,.76); }

/* O numero da fila de importacao, no canto do quadrado. */
.inicio-tile__selo { position: absolute; top: 12px; right: 12px; background: var(--accent);
                     color: #fff; border-radius: 11px; padding: 1px 8px;
                     font-size: 11.5px; font-weight: 700; }

@media (max-width: 640px) {
  .inicio__interior { padding: 28px 14px 40px; }
  .inicio__marca h1 { font-size: 24px; }
  .inicio__marca .brand-mark { width: 62px; height: 52px; }
  .inicio__grade { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
  .inicio-tile { min-height: 104px; padding: 12px; }
  .inicio-tile__dica { display: none; }   /* no telefone, o nome basta */
}

/* ----------------------------------------------------------- financeiro --- */
/* As duas cores do painel. Nao sao escolha de gosto: passaram pelo teste de
   daltonismo (protanopia/deuteranopia/tritanopia) contra o fundo de cada tema,
   e os tons do modo escuro sao **outros passos da mesma escala**, e nao os
   mesmos clareados — cor que funciona no branco costuma sumir no escuro.
   Verde entra, laranja sai; vermelho fica reservado para o que esta vencido,
   que e estado e nao categoria. */
:root { --fin-despesa: #c25100; --fin-receita: #1f845a; }
@media (prefers-color-scheme: dark) {
  :root { --fin-despesa: #c9782f; --fin-receita: #38a06d; }
}

.fin-filtros { margin: 4px 0 14px; }
.fin-filtros__linha { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.fin-base { display: flex; gap: 2px; }

.fin-aviso { border: 1px solid var(--l-yellow); background: var(--l-yellow-subtle);
             color: var(--warn); border-radius: var(--radius); padding: 10px 12px;
             margin-bottom: 12px; font-size: 13px; }

/* Os numeros de cabeceira. `auto-fit` com minimo de 180px: em monitor largo
   dao uma linha de oito, no telefone viram duas colunas — sem media query. */
.fin-kpis { display: grid; gap: 10px; margin-bottom: 16px;
            grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.fin-kpi { background: var(--bg-card); border: 1px solid var(--line);
           border-radius: var(--radius); padding: 12px 14px; display: flex;
           flex-direction: column; gap: 2px; border-left: 3px solid var(--line); }
.fin-kpi--vazio { opacity: .6; }
.fin-kpi.is-despesa { border-left-color: var(--fin-despesa); }
.fin-kpi.is-receita { border-left-color: var(--fin-receita); }
.fin-kpi.is-alerta  { border-left-color: var(--danger); }
.fin-kpi__titulo { font-size: 11.5px; font-weight: 700; letter-spacing: .03em;
                   text-transform: uppercase; color: var(--text-soft); }
/* `tabular-nums` alinha os algarismos entre um cartao e outro: sem isso, a
   coluna de valores fica com os pontos dancando. */
.fin-kpi__valor { font-size: 21px; font-variant-numeric: tabular-nums; }
.fin-kpi__pe { font-size: 12px; color: var(--text-soft); }

.fin-cartao { background: var(--bg-card); border: 1px solid var(--line);
              border-radius: var(--radius); padding: 14px; margin-bottom: 14px; }
.fin-cartao__head { display: flex; align-items: center; gap: 6px 10px; margin-bottom: 10px;
                    flex-wrap: wrap; }
/* O empurrao e do titulo para a esquerda, e nao do ultimo filho para a
   direita: com `:last-child` o proprio titulo ia para a direita quando o
   cartao nao tinha legenda nenhuma. */
.fin-cartao__head h2 { margin: 0 auto 0 0; font-size: 15px; }

/* Duas colunas quando cabe; uma quando nao cabe. O limite de 760px e onde o
   nome de obra comeca a quebrar em tres linhas na coluna estreita. */
.fin-duas { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); }
/* Item de grade nao encolhe abaixo do seu texto mais largo sem quebra (um
   nome de credor, uma etapa com codigo) — e empurrava o cartao para 794 px
   num celular de 375. `min-width: 0` deixa o texto cortar com reticencias. */
.fin-duas > *, .fin-tres > *, .fin-kpis > * { min-width: 0; }
@media (min-width: 980px) { .fin-duas { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }

/* Os tres rankings. `auto-fit` com minimo de 320px se vira sozinho: tres
   colunas no monitor largo, duas no meio, uma no telefone — e 320px e onde o
   nome de uma etapa com codigo ainda cabe sem cortar. */
.fin-tres { display: grid; gap: 14px;
            grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); }

/* O teto de altura evita que um monitor ultralargo transforme o grafico numa
   parede: passando disso, o SVG encolhe e sobra margem dos lados, que e menos
   ruim do que barras de meio metro. */
.fin-svg { width: 100%; height: auto; max-height: 300px; display: block; }
.fin-grade { stroke: var(--line); stroke-width: 1; }
.fin-eixo { fill: var(--text-soft); font-size: 11px; }
.fin-barra { transition: opacity .12s; }
.fin-barra:hover { opacity: .82; }
.fin-barra--despesa { fill: var(--fin-despesa); background: var(--fin-despesa); }
.fin-barra--receita { fill: var(--fin-receita); background: var(--fin-receita); }

/* A linha de notas de rodape de um cartao: numeros que explicam o grafico sem
   virar mais um grafico. */
.fin-pes { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 10px;
           font-size: 12.5px; color: var(--text-soft); }
.fin-pes .is-alerta { color: var(--danger); font-weight: 700; }

.fin-legenda { display: flex; gap: 14px; font-size: 12px; color: var(--text-soft); }
.fin-legenda__item { display: inline-flex; align-items: center; gap: 6px; }
.fin-legenda__cor { width: 10px; height: 10px; border-radius: 3px; }

/* Ranking: nome em cima, barra embaixo, valor a direita. O valor fica na
   mesma linha do nome (e nao dentro da barra) porque barra curta nao comporta
   texto, e valor que some na barra pequena e justamente o que interessa. */
.fin-rank { display: flex; flex-direction: column; gap: 10px; }
.fin-rank__linha { display: flex; flex-direction: column; gap: 4px; }
.fin-rank__linha.is-clicavel { cursor: pointer; }
.fin-rank__linha.is-clicavel:hover .fin-rank__nome { color: var(--accent); }
.fin-rank__topo { display: flex; gap: 10px; align-items: baseline; font-size: 13px; }
.fin-rank__nome { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis;
                  white-space: nowrap; }
.fin-rank__valor { font-variant-numeric: tabular-nums; font-weight: 700; }
.fin-rank__trilho { height: 8px; border-radius: 4px; background: var(--bg-sunken);
                    overflow: hidden; }
.fin-rank__barra { height: 100%; border-radius: 4px; background: var(--fin-despesa); }
.fin-rank__barra.is-resto { background: var(--text-soft); opacity: .5; }

.fin-lista { display: flex; flex-direction: column; }
.fin-lista__linha { display: flex; gap: 10px; align-items: center; padding: 8px 0;
                    border-top: 1px solid var(--line); font-size: 13px; }
.fin-lista__linha:first-child { border-top: 0; }
.fin-lista__quem { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.fin-lista__quem strong, .fin-lista__quem span { overflow: hidden;
                    text-overflow: ellipsis; white-space: nowrap; }
.fin-lista__data { font-size: 12px; color: var(--text-soft); white-space: nowrap; }
.fin-lista__data.is-vencida { color: var(--danger); font-weight: 700; }
.fin-lista__valor { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* A dica segue o mouse; `pointer-events: none` impede que ela fuja do cursor
   ao passar por baixo dele. */
.fin-dica { position: fixed; z-index: 90; pointer-events: none; font-size: 12px;
            background: var(--topbar); color: #fff; border-radius: var(--radius-sm);
            padding: 6px 9px; box-shadow: var(--shadow-pop); max-width: 260px; }
.fin-dica__forte { font-weight: 700; margin-bottom: 2px; }

/* ------------------------------------------- calendario do financeiro --- */
/* A grade e os dias sao os mesmos do calendario de Obras (`.cal-*`): o que
   muda e o conteudo. Reuso de folha de estilo, e nao de codigo — as duas telas
   nao se enxergam, e so uma delas deixa arrastar. */
.fin-base__vista { margin-left: 10px; position: relative; }
/* O tracinho separa "qual base" de "qual tela", que sao perguntas diferentes
   no mesmo grupo de botoes. */
.fin-base__vista::before { content: ""; position: absolute; left: -6px; top: 18%;
                           bottom: 18%; width: 1px; background: var(--line); }

.fin-cal__topo { display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
                 margin-bottom: 10px; }
.fin-cal__topo .cal-titulo { margin: 0; font-size: 18px; }

/* Chip de parcela: ponto colorido (a cor diz se sai ou entra), valor curto e
   o nome de quem recebe. O valor vem antes do nome porque e o que se procura
   com o olho correndo a grade. */
/* `.cal-chip` empilha as linhas em coluna e centraliza — e o que o chip de
   compromisso precisa. Aqui a primeira linha e "ponto + valor" lado a lado e o
   nome desce inteiro para a segunda, entao a direcao volta a ser linha e o
   nome ocupa 100% para forcar a quebra. */
.fin-chip { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center;
            justify-content: flex-start; gap: 0 5px; width: 100%; text-align: left; }
.fin-chip__valor { flex: 0 1 auto; }
.fin-chip__nome { flex: 1 0 100%; max-width: 100%; min-width: 0; }
.fin-chip__ponto { width: 7px; height: 7px; border-radius: 50%; flex: 0 0 auto;
                   background: var(--fin-despesa); }
.fin-chip.is-receita .fin-chip__ponto { background: var(--fin-receita); }
.fin-chip__valor { font-weight: 700; font-variant-numeric: tabular-nums;
                   white-space: nowrap; }
.fin-chip__nome { overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
                  color: var(--text-soft); }
/* Vencida grita; baixada se apaga. As duas continuam com o ponto da cor do
   tipo, entao a informacao nao esta so na cor. */
.fin-chip.is-vencido { background: var(--l-red-subtle); }
.fin-chip.is-vencido .fin-chip__valor { color: var(--danger); }
.fin-chip.is-pago { opacity: .55; }
.fin-chip.is-pago .fin-chip__valor { text-decoration: line-through; }

/* Origem do equipamento. Tres tons sobrios: e um rotulo de cadastro, nao um
   alerta — o que precisa saltar numa lista de equipamentos e o nome. */
.tag--proprio  { background: var(--l-blue-subtle);  color: var(--l-blue-bold); }
.tag--locado   { background: var(--l-yellow-subtle); color: var(--warn); }
.tag--terceiro { background: var(--l-purple-subtle); color: var(--l-purple-bold); }

/* O nome da obra escolhida, em cima dos numeros. Tamanho de titulo de pagina,
   porque e o que ele e: dali para baixo, tudo na tela e daquela obra. O centro
   de custo vai junto, na linha de base do nome, em tom apagado — e etiqueta de
   conferencia (e por ele que o Sienge chama a obra), nao manchete. */
.fin-obra { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
            margin: 2px 0 12px; }
.fin-obra__nome { margin: 0; font-size: 20px; line-height: 1.25; }
.fin-obra__centro { font-size: 12.5px; color: var(--text-soft);
                    font-variant-numeric: tabular-nums; }

/* MEI: reconhecido pelo jeito como a Receita nomeia o credor. Tom apagado de
   proposito — e informacao de cadastro, nao papel na obra. */
.tag--mei { background: var(--bg-sunken); color: var(--text-soft);
            letter-spacing: .04em; text-transform: uppercase; font-size: 10px; }

/* ------------------------------------------ listas que vem do Sienge --- */
/* Altura igual em todas as linhas: umas tem nome fantasia embaixo e outras
   nao, e uma lista de mil nomes com dois ritmos de altura cansa de ler. */
.cadastro-item--erp { min-height: 60px; padding-top: 8px; padding-bottom: 8px; }

/* Cadastros no celular: as colunas de largura fixa (tipo, centro de custo,
   cidade) somavam mais que a tela. O nome fica com a linha de cima inteira e
   o resto desce para a segunda, do tamanho do conteudo. O `!important` e
   porque essas larguras vem escritas no elemento (cadastros.js, COL). */
@media (max-width: 720px) {
  .cadastro-item, .cadastro-head { flex-wrap: wrap; row-gap: 4px; }
  .cadastro-item > :first-child, .cadastro-head > :first-child { flex: 1 1 100% !important; }
  .cadastro-item > :not(:first-child), .cadastro-head > :not(:first-child) {
    width: auto !important; flex: 0 1 auto !important; }
  .cadastro-head > :not(:first-child):empty { display: none; }
  .cadastro-item--erp { min-height: 0; }
  /* A busca na linha dos botoes encolhia para "Proc…": no celular ela fica
     com a linha inteira, e os botoes descem. */
  .btn-row > .input[type="search"] { flex: 1 1 100%; }
}

/* O nome aqui e botao (abre a ficha), mas tem de parecer texto: sem o respiro
   de 14px do `.tv__card`, senao ele fica deslocado do nome fantasia que vem
   logo abaixo. O aviso de clicavel passa a ser a cor. */
.cadastro-item--erp .tv__card { width: auto; min-height: 0; padding: 0;
                                border-radius: var(--radius-sm); }
.cadastro-item--erp .tv__card:hover { box-shadow: none; color: var(--accent); }
.cadastro-item--erp .tv__card:focus-visible { outline: 2px solid var(--accent);
                                              outline-offset: 2px; }

/* Municipio numa linha so: o nome da cidade com a UF nao se quebra ao meio. */
.cadastro-item__cidade { white-space: nowrap; overflow: hidden;
                         text-overflow: ellipsis; }

/* ------------------------------------------------ pedido de compra ------ */
/* A ficha dentro do cartao. Linhas de item e de cotacao sao grades, e nao
   tabelas: o cartao e estreito, e `grid` deixa cada coluna encolher ate o
   ponto em que ainda cabe. */
.compra__emerg { display: flex; align-items: center; gap: 8px; margin: 10px 0 2px;
                 font-size: 13px; cursor: pointer; }

.compra__itens { display: flex; flex-direction: column; gap: 6px; }
.compra__item { display: grid; gap: 6px; align-items: center;
                grid-template-columns: minmax(0, 1.4fr) 72px 84px 88px minmax(0, 1fr) 32px; }
.compra__item .input, .compra__item .select { padding: 6px 8px; }

/* O cabecalho das grades e so rotulo: nao clica, nao ordena. */
.compra__item--cabeca, .compra__cot--cabeca {
  font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--text-soft); padding: 2px 0;
}
.compra__item--cabeca .input { display: none; }

.compra__cot { display: grid; gap: 6px; align-items: center; margin-bottom: 6px;
               grid-template-columns: minmax(0, 1.4fr) 110px 100px minmax(0, 1fr) 32px 32px; }
.compra__cot .input { padding: 6px 8px; }
/* A escolhida fica marcada na linha inteira: numa tabela de tres cotacoes, so
   a estrela acesa se perde de vista. */
.compra__cot.is-escolhida { background: var(--l-green-subtle); border-radius: var(--radius-sm); }
.compra__cot .mini-btn.is-on { color: var(--ok); }

/* No celular cada item e cada cotacao viram um bloco de tres linhas, com o
   nome dentro de cada campo: o que se quer (e a lixeira), quanto/unidade/
   preco, e a observacao. Em duas colunas soltas ninguem sabia qual campo era
   qual. */
@media (max-width: 720px) {
  .compra__item--cabeca, .compra__cot--cabeca { display: none; }
  .compra__item, .compra__cot { grid-template-columns: 1fr 1fr 1fr 36px; row-gap: 6px;
                                padding-bottom: 10px; border-bottom: 1px solid var(--line); }
  .compra__item > :nth-child(1) { grid-column: 1 / 4; grid-row: 1; }
  .compra__item > :nth-child(6) { grid-column: 4; grid-row: 1; }
  .compra__item > :nth-child(2) { grid-column: 1; grid-row: 2; }
  .compra__item > :nth-child(3) { grid-column: 2; grid-row: 2; }
  .compra__item > :nth-child(4) { grid-column: 3 / 5; grid-row: 2; }
  .compra__item > :nth-child(5) { grid-column: 1 / 5; grid-row: 3; }
  /* cotacao: fornecedor + escolher + apagar; valor e prazo; condicao */
  .compra__cot { grid-template-columns: 1fr 1fr 36px 36px; }
  .compra__cot > :nth-child(1) { grid-column: 1 / 3; grid-row: 1; }
  .compra__cot > :nth-child(5) { grid-column: 3; grid-row: 1; }
  .compra__cot > :nth-child(6) { grid-column: 4; grid-row: 1; }
  .compra__cot > :nth-child(2) { grid-column: 1; grid-row: 2; }
  .compra__cot > :nth-child(3) { grid-column: 2 / 5; grid-row: 2; }
  .compra__cot > :nth-child(4) { grid-column: 1 / 5; grid-row: 3; }
}