/* Rotinas do setor — prefixo rot-. Espaço em múltiplos de 4.
   Cor é semântica e nunca vem sozinha: verde = confirmada/completa,
   âmbar = a revisar/falta informação, cinza = neutro. */
.rot-page {
  --rot-ink:    #24313b;
  --rot-muted:  #6b747b;
  --rot-line:   #e2e7eb;
  --rot-soft:   #f8fafb;
  --rot-good:   #147a4b;
  --rot-warn:   #9b6414;
  --rot-danger: #bd3d3a;
  --rot-info:   #2f6f9f;
  color: var(--rot-ink);
}

/* ── Cabeçalho ── */
.rot-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
.rot-eyebrow { color: #a23b36; font-size: .68rem; font-weight: 800; letter-spacing: .14em; }
.rot-head h2 { margin: 4px 0; font-size: 1.35rem; font-weight: 750; }
.rot-head p { margin: 0; color: var(--rot-muted); font-size: .86rem; max-width: 66ch; }
.rot-novo { white-space: nowrap; font-weight: 650; }

/* ── KPIs (clicáveis: aplicam o filtro) ── */
.rot-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin-bottom: 16px; }
.rot-kpi { position: relative; display: block; width: 100%; text-align: left; background: #fff; border: 1px solid var(--rot-line);
           border-radius: 10px; padding: 12px 12px 12px 16px; overflow: hidden; cursor: pointer; color: inherit; }
.rot-kpi:hover { border-color: #c9d3da; }
.rot-kpi:focus-visible { outline: 2px solid var(--rot-info); outline-offset: 1px; }
.rot-kpi::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; background: #adb5bd; }
.rot-kpi.good::before   { background: var(--rot-good); }
.rot-kpi.warn::before   { background: var(--rot-warn); }
.rot-kpi.danger::before { background: var(--rot-danger); }
.rot-kpi span { display: block; font-size: .72rem; font-weight: 650; color: var(--rot-muted); text-transform: uppercase; letter-spacing: .04em; }
.rot-kpi strong { display: block; font-size: 1.35rem; font-weight: 750; margin: 2px 0; font-variant-numeric: tabular-nums; }
.rot-kpi small { display: block; font-size: .74rem; color: var(--rot-muted); line-height: 1.35; }
.rot-kpi.ativo { border-color: var(--rot-info); box-shadow: 0 0 0 1px var(--rot-info) inset; }

/* ── Filtros ── */
.rot-filtros { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 8px; }
.rot-filtros .form-select, .rot-filtros .form-control { width: auto; min-width: 180px; font-size: .82rem; }
.rot-filtros .rot-busca { flex: 1 1 220px; max-width: 320px; }
.rot-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.rot-chip { border: 1px solid #ced4da; background: #fff; color: var(--rot-ink); border-radius: 999px;
            padding: 4px 12px; font-size: .8rem; cursor: pointer; }
.rot-chip:hover { border-color: var(--rot-info); }
.rot-chip.ativo { border-color: var(--rot-info); background: #eef5fa; font-weight: 650; }
.rot-chip:focus-visible { outline: 2px solid var(--rot-info); outline-offset: 1px; }
.rot-ativo { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 6px 12px; margin-bottom: 12px;
             border-radius: 8px; background: #eef5fa; border: 1px solid #cfe0ec; font-size: .8rem; }
.rot-ativo b { font-weight: 650; }
.rot-ativo button { margin-left: auto; }

.rot-corpo.rot-recarregando { opacity: .55; transition: opacity .15s; pointer-events: none; }

/* ── Área e processo ── */
.rot-area { background: #fff; border: 1px solid var(--rot-line); border-radius: 10px; margin-bottom: 16px; overflow: hidden; }
.rot-area-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 12px 16px;
                 border-bottom: 1px solid var(--rot-line); background: var(--rot-soft); }
.rot-area-head h3 { margin: 0; font-size: 1rem; font-weight: 750; }
.rot-area-head small { color: var(--rot-muted); font-size: .78rem; white-space: nowrap; }
.rot-proc-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 12px 16px 4px; }
.rot-proc-head h4 { margin: 0; font-size: .86rem; font-weight: 700; color: #3b4852; }
.rot-proc-head small { color: var(--rot-muted); font-size: .74rem; white-space: nowrap; }

/* ── Tabela de rotinas: rola dentro do próprio container ── */
/* position: relative segura o .visually-hidden do cabeçalho dentro da rolagem —
   sem isso ele se posiciona pela página e cria rolagem horizontal no celular. */
.rot-tabela-wrap { position: relative; overflow-x: auto; padding: 0 8px 8px; }
/* Largura fixa por coluna: cada processo tem a própria tabela, e sem isto as
   colunas de um processo não alinham com as do seguinte. */
.rot-tabela { width: 100%; min-width: 860px; border-collapse: collapse; font-size: .82rem; table-layout: fixed; }
.rot-tabela th:nth-child(1) { width: 30%; }
.rot-tabela th:nth-child(2) { width: 13%; }
.rot-tabela th:nth-child(3) { width: 11%; }
.rot-tabela th:nth-child(4) { width: 17%; }
.rot-tabela th:nth-child(5) { width: 15%; }
.rot-tabela th:nth-child(6) { width: 104px; }
.rot-tabela th:nth-child(7) { width: 112px; }
.rot-tabela td .rot-tag { white-space: normal; text-align: left; }
.rot-tabela th { font-size: .7rem; font-weight: 650; text-transform: uppercase; letter-spacing: .03em; color: var(--rot-muted);
                 padding: 6px 8px; border-bottom: 1px solid var(--rot-line); text-align: left; white-space: nowrap; }
.rot-tabela td { padding: 8px; border-bottom: 1px solid #eef1f3; vertical-align: top; text-align: left; }
.rot-tabela tr:last-child td { border-bottom: none; }
.rot-tabela tbody tr { cursor: pointer; }
.rot-tabela tbody tr:hover td { background: #fafbfc; }
.rot-tabela .rot-col-acao { text-align: right; white-space: nowrap; }
.rot-tabela .rot-badge.falta { white-space: normal; }
.rot-nome { font-weight: 650; overflow-wrap: anywhere; }
.rot-obj { color: var(--rot-muted); font-size: .76rem; margin-top: 2px; overflow-wrap: anywhere;
           display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.rot-mute { color: var(--rot-muted); font-style: italic; }
.rot-falta { display: inline-flex; flex-wrap: wrap; gap: 4px; }

.rot-tag { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; font-size: .72rem;
           background: #eef1f3; color: #3b4852; white-space: nowrap; margin: 0 4px 4px 0; }
.rot-tag i { font-size: .8rem; }
.rot-tag.link { background: #eaf2f8; color: var(--rot-info); cursor: pointer; border: none; }
.rot-tag.link:hover { text-decoration: underline; }
.rot-badge { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 999px;
             font-size: .74rem; font-weight: 700; white-space: nowrap; }
.rot-badge.a_revisar { background: #fbf1e1; color: var(--rot-warn); }
.rot-badge.confirmada { background: #e3f3ea; color: var(--rot-good); }
.rot-badge.falta { background: #fbf1e1; color: var(--rot-warn); font-weight: 600; }
.rot-badge.completa { background: #e3f3ea; color: var(--rot-good); font-weight: 600; }

/* ── Vazio, erro, procedência ── */
.rot-vazio { text-align: center; padding: 32px 16px; background: #fff; border: 1px dashed var(--rot-line); border-radius: 10px; }
.rot-vazio i { font-size: 1.6rem; color: var(--rot-muted); }
.rot-vazio.good i { color: var(--rot-good); }
.rot-vazio strong { display: block; margin-top: 8px; }
.rot-vazio p { margin: 4px 0 0; color: var(--rot-muted); font-size: .84rem; }
.rot-erro { display: flex; gap: 12px; align-items: flex-start; padding: 12px 16px; border-radius: 10px;
            border: 1px solid #f0cfcd; background: #fdf3f2; color: #7c2a27; font-size: .86rem; }
.rot-erro i { font-size: 1.2rem; }
.rot-method { margin-top: 8px; padding: 12px 16px; border-radius: 10px; background: var(--rot-soft); border: 1px solid var(--rot-line);
              color: var(--rot-muted); font-size: .78rem; line-height: 1.5; }
.rot-method b { color: var(--rot-ink); font-weight: 650; }

/* ── Editor (modal) ── */
.rot-modal .modal-body { background: #f6f7f9; }
.rot-sec { background: #fff; border: 1px solid var(--rot-line); border-radius: 10px; padding: 12px 16px; margin-bottom: 12px; }
.rot-sec h5 { font-size: .82rem; font-weight: 750; text-transform: uppercase; letter-spacing: .04em; margin: 0 0 8px; color: #3b4852; }
.rot-sec h5 small { text-transform: none; letter-spacing: 0; font-weight: 500; color: var(--rot-muted); margin-left: 4px; }
.rot-sec label { font-size: .76rem; font-weight: 650; color: #3b4852; margin-bottom: 4px; }
.rot-dica { font-size: .76rem; color: var(--rot-muted); margin: 4px 0 0; }
.rot-grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.rot-grid4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.rot-linha { display: grid; gap: 8px; align-items: start; margin-bottom: 8px; }
.rot-linha.onde { grid-template-columns: 180px minmax(0, 1fr) 220px 36px; }
.rot-linha.resp { grid-template-columns: minmax(0, 1fr) 160px 36px; }
.rot-linha.lig  { grid-template-columns: 150px 220px minmax(0, 1fr) 36px; }
.rot-linha .form-control, .rot-linha .form-select { font-size: .82rem; }
.rot-add { font-size: .8rem; }
.rot-texto-acoes { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.rot-ia-btn { font-size: .8rem; font-weight: 650; }
.rot-novo-proc { display: flex; gap: 8px; margin-top: 8px; }

/* Dias da semana: vários de uma vez. Marcado = fundo azul + ✓ (cor não vem sozinha). */
.rot-quando { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.rot-dias-wrap { grid-column: 1 / -1; }
.rot-dias { display: flex; flex-wrap: wrap; gap: 8px; }
.rot-dia { min-width: 64px; padding: 4px 12px; border: 1px solid #ced4da; border-radius: 8px; background: #fff;
           color: var(--rot-ink); font-size: .8rem; cursor: pointer; }
.rot-dia:hover { border-color: var(--rot-info); }
.rot-dia:focus-visible { outline: 2px solid var(--rot-info); outline-offset: 1px; }
.rot-dia[aria-pressed="true"] { background: #eaf2f8; border-color: var(--rot-info); color: var(--rot-info); font-weight: 650; }
.rot-dia[aria-pressed="true"]::before { content: "✓ "; }
.rot-dia:disabled { cursor: default; opacity: .75; }
.rot-dias-atalho { font-size: .76rem; }

/* Sugestão da IA: antes e depois lado a lado — a pessoa escolhe */
.rot-ia { margin-top: 12px; border: 1px solid #cfe0ec; border-radius: 10px; background: #f5f9fc; padding: 12px; }
.rot-ia-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.rot-ia-col span { display: block; font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--rot-muted); margin-bottom: 4px; }
.rot-ia-col pre { white-space: pre-wrap; font-family: inherit; font-size: .82rem; margin: 0; padding: 8px 12px; background: #fff;
                  border: 1px solid var(--rot-line); border-radius: 8px; max-height: 280px; overflow: auto; }
.rot-ia-col.nova pre { border-color: #b9d3e6; }
.rot-ia-lacunas { margin: 12px 0 0; padding: 8px 12px; border-radius: 8px; background: #fdf8ef; border: 1px solid #ecd9b8; font-size: .8rem; color: #6e4d16; }
.rot-ia-lacunas ul { margin: 4px 0 0; padding-left: 20px; }
.rot-ia-avisos { margin: 8px 0 0; font-size: .76rem; color: var(--rot-warn); }
.rot-ia-acoes { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; margin-top: 12px; }
.rot-ia-carregando { display: flex; align-items: center; gap: 8px; margin-top: 12px; font-size: .8rem; color: var(--rot-muted); }

.rot-rodape { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; width: 100%; }
.rot-rodape-info { font-size: .74rem; color: var(--rot-muted); }
.rot-rodape-acoes { display: flex; gap: 8px; flex-wrap: wrap; margin-left: auto; }
.rot-form-erro { font-size: .8rem; color: var(--rot-danger); width: 100%; }

@media (max-width: 992px) {
  .rot-grid4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rot-quando { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rot-linha.onde { grid-template-columns: 160px minmax(0, 1fr) 36px; }
  .rot-linha.onde .rot-tela { grid-column: 1 / 3; }
  .rot-linha.lig  { grid-template-columns: 140px minmax(0, 1fr) 36px; }
  .rot-linha.lig .rot-oque { grid-column: 1 / 3; }
}
@media (max-width: 576px) {
  .rot-head h2 { font-size: 1.15rem; }
  .rot-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .rot-kpi { padding: 8px 8px 8px 12px; }
  .rot-kpi strong { font-size: 1.1rem; }
  .rot-kpi small { display: none; }
  .rot-filtros .form-select, .rot-filtros .form-control, .rot-filtros .rot-busca { min-width: 0; max-width: none; flex: 1 1 100%; }
  .rot-grid2, .rot-grid4, .rot-ia-cols, .rot-quando { grid-template-columns: minmax(0, 1fr); }
  .rot-dia { min-width: 0; flex: 1 1 calc(25% - 8px); padding: 4px 6px; }
  .rot-linha.onde, .rot-linha.lig { grid-template-columns: minmax(0, 1fr) 36px; }
  .rot-linha.onde .rot-tela, .rot-linha.onde .rot-detalhe,
  .rot-linha.lig .rot-oque, .rot-linha.lig .rot-quem { grid-column: 1 / 2; }
  .rot-linha.resp { grid-template-columns: minmax(0, 1fr) 110px 36px; }
}