/* ======= DCPR THEME (override Bootstrap) ======= */
:root{
  /* Cores institucionais */
  --dcpr-navy: #585570;       /* Azul-marinho */
  --dcpr-navy-700: #474563;   /* Tom mais escuro (hover) */
  --dcpr-orange: #FAA954;     /* Laranja */
  --dcpr-orange-700: #e3923f; /* Laranja escuro */
  --dcpr-bg: #f5f7fb;         /* Fundo neutro */

  /* Integração com Bootstrap */
  --bs-primary: var(--dcpr-navy);
  --bs-primary-rgb: 88,85,112;
  --bs-link-color: var(--dcpr-navy);
  --bs-link-hover-color: var(--dcpr-navy-700);
}

html, body{
  background-color: var(--dcpr-bg);
  font-family: 'Montserrat', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
  color: #222;
}

/* Barra superior / usuário */
.topbar-logout{
  display:flex; justify-content:flex-end; align-items:center; gap:1rem;
  margin: 18px 0 10px;
  padding-bottom: 8px;
  border-bottom: 3px solid var(--dcpr-orange);
}
.topbar-logout .username{
  font-weight: 700;
  color: var(--dcpr-navy);
}
.topbar-logout .btn-danger{
  --bs-btn-bg: var(--dcpr-orange);
  --bs-btn-border-color: var(--dcpr-orange);
  --bs-btn-hover-bg: var(--dcpr-orange-700);
  --bs-btn-hover-border-color: var(--dcpr-orange-700);
  --bs-btn-active-bg: var(--dcpr-orange-700);
  --bs-btn-active-border-color: var(--dcpr-orange-700);
  color:#1b1b1b;
}

/* Hero */
.hero{
  background: linear-gradient(135deg, var(--dcpr-navy) 0%, var(--dcpr-navy-700) 70%);
  color:#fff;
  padding: 2.25rem;
  border-radius: .75rem;
  margin-bottom: 2rem;
  text-align:center;
  position: relative;
  overflow:hidden;
  box-shadow: 0 8px 20px rgba(0,0,0,.12);
}
.hero::after{
  content:"";
  position:absolute; left:0; right:0; bottom:0;
  height:6px; background: var(--dcpr-orange);
}
.hero h1{ font-weight: 700; letter-spacing:.2px; }
.hero .lead{ opacity:.95; }

/* Cartões */
.card{
  border: 1px solid #e8e9ef;
  border-top: 4px solid var(--dcpr-orange);
  border-radius: .75rem;
  box-shadow: 0 4px 14px rgba(0,0,0,.06);
  transition: transform .15s ease, box-shadow .15s ease;
}
.card:hover{
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(0,0,0,.10);
}
.card .card-title{ font-weight:700; color:#222; }
.card i{
  font-size: 2.5rem;
  color: var(--dcpr-navy);
}
.card .card-text{ color:#4b4b4b; }

/* Botões principais */
.btn-primary{
  --bs-btn-bg: var(--dcpr-orange);
  --bs-btn-border-color: var(--dcpr-orange);
  --bs-btn-hover-bg: var(--dcpr-orange-700);
  --bs-btn-hover-border-color: var(--dcpr-orange-700);
  --bs-btn-active-bg: var(--dcpr-orange-700);
  --bs-btn-active-border-color: var(--dcpr-orange-700);
  color:#1b1b1b;
  font-weight:600;
  border-radius: .6rem;
}
.btn-outline-primary{
  --bs-btn-color: var(--dcpr-navy);
  --bs-btn-border-color: var(--dcpr-navy);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--dcpr-navy);
  --bs-btn-hover-border-color: var(--dcpr-navy);
  --bs-btn-active-bg: var(--dcpr-navy);
  --bs-btn-active-border-color: var(--dcpr-navy);
  font-weight:600;
  border-radius: .6rem;
}

/* Links e focos */
a{ text-decoration: none; }
a:hover{ text-decoration: underline; }
.form-control:focus, .btn:focus, .btn:active{
  box-shadow: 0 0 0 .2rem rgba(var(--bs-primary-rgb), .18);
}

/* Grid */
.row.g-4{ --bs-gutter-x: 1.25rem; --bs-gutter-y: 1.25rem; }

/* Container spacing em telas grandes */
@media (min-width: 1200px){
  .container.py-5{ padding-top: 2.5rem!important; padding-bottom: 2.5rem!important; }
}

/* ===== Listagem OM - refinamentos ===== */
.table thead th{
  background: #fff;
  border-bottom: 2px solid var(--dcpr-navy);
}

.table tbody tr{
  border-top: 1px solid #eee;
}
.table tbody tr:nth-child(odd){
  background: #fafbff;                    /* zebra leve */
}
.table-hover tbody tr:hover{
  background: #f2f5ff !important;         /* hover mais visível */
}
.table td, .table th{
  vertical-align: middle;
}

/* Botões de ação mais coesos */
.btn-actions .btn{
  border-radius: .6rem;
  min-width: 86px;
}
.btn-actions .btn i{
  vertical-align: -2px;
  margin-right: .25rem;
}

.table .btn-icon {
  font-size: 0.9rem;
  padding: 0.35rem 0.5rem;
  line-height: 1;
  border-radius: .4rem;
}
.table .btn-icon span {
  display: none; /* esconde o texto, mostra só ícone */
}
/* ===== POLISH PACK – Listagens ===== */

/* container do card da listagem */
.list-card{
  border: 1px solid #e7e9f1;
  border-radius: .8rem;
  box-shadow: 0 8px 20px rgba(0,0,0,.06);
  background: #fff;
}

/* ===== TOOLBAR PADRÃO (UNIFICADA) ===== */
.om-toolbar{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.9rem 1rem 0 1rem;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}

.om-toolbar .title{
  font-weight: 800;
  font-size: 1.15rem;
  margin: 0;
  color: #2b2b2b;
}

.om-toolbar .actions{
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.om-toolbar .left,
.om-toolbar .right{
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.om-search{
  max-width: 300px;
}

/* Responsivo */
@media (max-width: 768px){
  .col-solicitante{ display:none; }

  .om-toolbar{
    flex-direction: column;
    align-items: stretch;
  }

  .om-toolbar .actions{
    justify-content: space-between;
  }
}

.table{
  margin-bottom: 0;
  font-size: .95rem;
}
.table thead th{
  background: #fff;
  color:#2e2f38;
  font-weight: 800;
  border-bottom: 2px solid var(--dcpr-navy);
}

.table thead th.text-primary{
  color: var(--dcpr-navy) !important;
}
.table tbody tr{ border-top: 1px solid #f0f2f7; }
.table tbody tr:nth-child(odd){ background: #fafbff; }
.table-hover tbody tr:hover{ background: #f2f6ff !important; }
.table td, .table th{ padding: .85rem .9rem; vertical-align: middle; }

/* número OM como chip */
.chip{
  display:inline-block; padding:.18rem .5rem;
  border-radius: 999px; background:#eef1fb; color:#2b3a67;
  font-weight:700; font-size:.85rem; border:1px solid #e2e6f6;
}

/* grupo de ações compacto (ícones com tooltip) */
.action-group{ display:inline-flex; gap:.35rem; }
.action-group .btn{
  --size: 34px;
  width: var(--size); height: var(--size);
  padding: 0; border-radius: .55rem;
  display:inline-flex; align-items:center; justify-content:center;
  line-height:1; font-size: 1rem;
  border: 1px solid transparent;
}
.action-group .btn i{ font-size: 1.05rem; }

/* “soft buttons” – versões discretas por cor */
.btn-soft-primary{
  background: #eef2ff; color: #2b3a67; border-color: #dfe7ff;
}
.btn-soft-primary:hover{ background:#dde5ff; }

.btn-soft-danger{
  background: #ffecef; color:#8c2431; border-color:#ffd6dc;
}
.btn-soft-danger:hover{ background:#ffdbe0; }

.btn-soft-warning{
  background: #fff4e6; color:#7b4700; border-color:#ffe6c7;
}
.btn-soft-warning:hover{ background:#ffe9cf; }

/* compactar botões maiores da toolbar */
.btn-toolbar-lg{
  padding:.55rem .9rem; border-radius:.7rem; font-weight:700;
}


/* ============================
   COMPACT MODE – Dashboard / Home
   ============================ */

/* Hero mais baixo e tipografia menor */
.hero {
  padding: 1.25rem 1.25rem 1.1rem;
}
.hero.with-logo { gap: 0.9rem; }
.hero .hero-logo { height: 60px; padding: 5px; border-radius: 10px; }
.hero h1 {
  /* reduz, mas mantém boa leitura */
  font-size: clamp(1.6rem, 2.2vw + 0.8rem, 2.35rem);
  margin-bottom: .25rem;
}
.hero .lead {
  font-size: clamp(.95rem, .6vw + .7rem, 1.12rem);
  opacity: .95;
}

/* Grid com menos espaçamento (somente >= md) */
@media (min-width: 768px){
  .row.g-4 { --bs-gutter-x: 1rem; --bs-gutter-y: 1rem; }
}

/* Cards mais enxutos */
.card {
  border-radius: .65rem;
  box-shadow: 0 4px 12px rgba(0,0,0,.06);
}
.card .card-body {
  padding: 1.1rem 1rem 1rem;
}
.card i {
  font-size: 2.1rem;
  margin-bottom: .15rem;
  color: var(--dcpr-navy);
}
.card .display-6 {
  /* número grande dos contadores */
  font-size: 2.2rem;      /* era enorme; agora elegante */
  line-height: 1.1;
  margin-bottom: .2rem;
}
.card .card-title {
  font-size: 1.15rem;
  margin-bottom: .35rem;
}
.card .card-text {
  font-size: .96rem;
}

/* Botões mais discretos */
.btn, .btn-toolbar-lg {
  padding: .45rem .9rem;
  font-size: .95rem;
  border-radius: .55rem;
}
.btn-toolbar-lg i { margin-right: .3rem; }

/* Reduz o tamanho dos chips (se usados) */
.chip {
  font-size: .9rem;
  padding: .2rem .5rem;
}

/* Em telas grandes, encolhe mais um pouco */
@media (min-width: 1200px){
  .hero { padding: 1.1rem 1.2rem; }
  .hero .hero-logo { height: 56px; }
  .card .display-6 { font-size: 2.0rem; }
  .card .card-title { font-size: 1.12rem; }
}

/* Em telas muito pequenas, mantém tudo confortável */
@media (max-width: 575.98px){
  .hero.with-logo {
    gap: .6rem;
    padding: .9rem .9rem .8rem;
  }
  .hero .hero-logo { height: 54px; }
  .hero h1 { font-size: 1.6rem; }
  .hero .lead { font-size: .98rem; }
  .card .card-body { padding: .9rem .85rem; }
  .card i { font-size: 1.9rem; }
  .btn, .btn-toolbar-lg { padding: .42rem .8rem; font-size: .94rem; }
}
/* Hero com logo alinhada */
/*.hero.with-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.9rem;
  text-align: left; /* título fica mais elegante alinhado à esquerda */
}*/

.hero.with-logo .hero-logo {
  height: 58px; /* ajusta o tamanho do selo */
  flex-shrink: 0;
  border-radius: 8px;
  background: #fff;
  padding: 4px;
  box-shadow: 0 2px 6px rgba(0,0,0,.15);
}

/* Ajuste responsivo: em telas pequenas volta pro centro */
@media (max-width: 575.98px) {
  .hero.with-logo {
    flex-direction: column;
    text-align: center;
    gap: .6rem;
  }
  .hero.with-logo .hero-logo {
    height: 52px;
    padding: 3px;
  }
}
.hero.with-logo {
  display: flex;
  align-items: center;
  justify-content: center; /* garante centralização do texto */
  gap: 1rem;
  text-align: center;
}

.hero-logo-wrap {
  flex-shrink: 0; /* não deixa a logo encolher */
}

.hero .hero-logo {
  height: 78px; /* aumente aqui para deixar mais visível */
  width: auto;
  border-radius: 6px;
}

/* ===== OM forms – correções visuais para evitar campos "tortos" ===== */
.card .rota-row,
.card .eq-row {
  align-items: flex-start !important;
}

.card .rota-row > [class*="col-"],
.card .eq-row   > [class*="col-"] {
  display: flex;
  flex-direction: column;
}

.card .rota-row label.form-label,
.card .eq-row   label.form-label {
  margin-bottom: .25rem;
}

.card .rota-row input[placeholder^="Filtrar"] {
  margin-bottom: .25rem;
  height: calc(2.5rem + 2px);
}

.card .rota-row select.form-select {
  margin-bottom: .25rem;
}

.card .rota-row .form-text {
  min-height: 1.125rem;
  line-height: 1.125rem;
  margin-top: .125rem;
}

.card .rota-row .d-grid {
  align-self: end;
}

.card .rota-row .form-control,
.card .rota-row .form-select {
  height: calc(2.5rem + 2px);
}
.card .rota-row .form-control[type="time"],
.card .rota-row .form-control[type="date"] {
  padding-top: .375rem;
  padding-bottom: .375rem;
}

.card .eq-row .form-control,
.card .eq-row .form-select {
  height: calc(2.5rem + 2px);
}
/* ===== FIM: OM forms ===== */

/* QS2: dropdown sempre acima (fora de overflow/stacking context) */
.qs2-dd{
  position: fixed;
  z-index: 2147483647;
  display: none;
}
.qs2-dd .qs2-list{ max-height: 260px; overflow: auto; }
.qs2-dd .qs2-search{
  border: 0;
  border-bottom: 1px solid rgba(0,0,0,.08);
  border-radius: 0;
}
/* QS2: enquanto dropdown estiver aberto, desativa transform/hover dos cards
   para evitar “piscando” e desalinhamento (o tema aplica transform em .card:hover). */
body.qs2-open .card,
body.qs2-open .card:hover{
  transform: none !important;
}
body.qs2-open .card{
  transition: none !important;
}
.qs2-dd .list-group-item{ cursor: pointer; user-select: none; }
.qs2-wrap{ position: relative; }

.table td, .table th {
  padding: 6px 8px !important;
  vertical-align: middle;
}

/* ==========================================================
   STATUS DROPDOWN - VERSÃO FINAL LIMPA
========================================================== */

.status-box {
    position: relative;
    display: inline-block;
    overflow: visible;
}

.status-label{
  display: inline-block;
  padding: 4px 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  text-align: center;

  width: 100%;
  max-width: 100%;

  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.status-label.cancelado { background:#dc3545; color:#fff; }
.status-label.finalizado { background:#198754; color:#fff; }
.status-label.solicitado { background:#0d6efd; color:#fff; }
.status-label.aguardando_recibo { background:#ffc107; color:#111; }
.status-label.rascunho { background:#adb5bd; color:#111; }
.status-label.publicar_bi { background:#fd7e14; color:#111; }
.status-label.avisar_comprovante { background:#6f42c1; color:#fff; }
.status-label.prestar_contas { background:#d6b25e; color:#111; }

.status-dropdown{
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 220px;
  padding: 8px;
  background: #fff;
  border: 1px solid #d9deea;
  border-radius: 12px;
  box-shadow: 0 12px 30px rgba(0,0,0,.14);
  z-index: 9999;
}

.status-item{
  display: block;
  margin-bottom: 4px;
  padding: 6px 8px;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.2;
  cursor: pointer;
  white-space: nowrap;
  color: #fff;
}

.status-item.cancelado { background:#dc3545; }
.status-item.finalizado { background:#198754; }
.status-item.solicitado { background:#0d6efd; }
.status-item.aguardando_recibo { background:#ffc107; color:#111; }
.status-item.rascunho { background:#adb5bd; color:#111; }
.status-item.publicar_bi { background:#fd7e14; color:#111; }
.status-item.avisar_comprovante { background:#6f42c1; }
.status-item.prestar_contas { background:#d6b25e; color:#111; }

.status-item:hover{
  filter: brightness(0.95);
}

.status-item:last-child{
  margin-bottom: 0;
}

/* ===== PAINEL DE DIÁRIAS ===== */

/* ==========================================================
   🔧 AJUSTES FINAIS - PAINEL DIÁRIAS (CORREÇÃO DE LAYOUT)
========================================================== */

/* ===== COLUNA SITUAÇÃO ===== */
/* COLUNA SITUAÇÃO — AJUSTE FINAL */
.painel-diarias-table th:nth-child(7),
.painel-diarias-table td:nth-child(7) {
    width: 110px;
    min-width: 110px;
    max-width: 110px;
    text-align: center;
}

/* Corrige o badge */
.status-label {
    min-width: unset !important;
    width: 100%;
    max-width: 110px;

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ===== COLUNA OBSERVAÇÃO ===== */

/* INPUT DA OBSERVAÇÃO */
.painel-diarias-table td:nth-child(14) input {
    width: 100%;
    min-width: 220px;
    max-width: 100%;
    box-sizing: border-box;
}

/* 🔥 LIBERA QUEBRA DE TEXTO APENAS NA OBSERVAÇÃO */
.painel-diarias-table td:nth-child(14) {
    white-space: normal;
    word-break: break-word;
}

/* ===== AJUSTE GERAL PARA NÃO ESTOURAR ===== */
.painel-diarias-table td {
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ===== TABELA PRINCIPAL ===== */
/* largura fixa para gerar scroll horizontal */

.painel-diarias-table {
    table-layout: fixed;
    min-width: 1800px;
}

/* ===== HEADER FIXO (topo da tabela) ===== */

.painel-diarias-table thead th {
    position: sticky;
    top: 0;
    z-index: 30;
    background: #fff;
    border-bottom: 2px solid var(--dcpr-navy);
}

/* ===== COLUNAS FIXAS (tipo Excel) ===== */

/* células do corpo */
.painel-diarias-table td:nth-child(1) {
    position: sticky;
    left: 0;
    background: #fff;
    z-index: 20;
}

.painel-diarias-table td:nth-child(2) {
    position: sticky;
    left: 110px;
    background: #fff;
    z-index: 20;
}

.painel-diarias-table td:nth-child(3) {
    position: sticky;
    left: 250px;
    background: #fff;
    z-index: 20;
}

/* cabeçalho dessas colunas fica acima do corpo */
.painel-diarias-table th:nth-child(1) {
    position: sticky;
    left: 0;
    background: #fff;
    z-index: 40;
}

.painel-diarias-table th:nth-child(2) {
    position: sticky;
    left: 110px;
    background: #fff;
    z-index: 40;
}

.painel-diarias-table th:nth-child(3) {
    position: sticky;
    left: 250px;
    background: #fff;
    z-index: 40;
}

/* sombra lateral (acabamento profissional) */
.painel-diarias-table th:nth-child(3),
.painel-diarias-table td:nth-child(3) {
    box-shadow: 4px 0 6px rgba(0,0,0,0.05);
}

.painel-diarias-table th,
.painel-diarias-table td {
    vertical-align: middle;
}

.painel-diarias-table th:nth-child(1) { width: 110px; } /* Recebimento */
.painel-diarias-table th:nth-child(2) { width: 140px; } /* E-protocolo */
.painel-diarias-table th:nth-child(3) { width: 140px; } /* Solicitação */
.painel-diarias-table th:nth-child(4) { width: 200px; } /* Viajante */
.painel-diarias-table th:nth-child(5) { width: 120px; } /* Divisão */
.painel-diarias-table th:nth-child(6) { width: 80px; }  /* OM */
.painel-diarias-table th:nth-child(7) { width: 110px; } /* Situação */
.painel-diarias-table th:nth-child(8) { width: 180px; } /* Responsável */
.painel-diarias-table th:nth-child(9) { width: 110px; } /* Valor */
.painel-diarias-table th:nth-child(10) { width: 110px; } /* VRs */
.painel-diarias-table th:nth-child(11) { width: 110px; } /* Saída */
.painel-diarias-table th:nth-child(12) { width: 110px; } /* Retorno */
.painel-diarias-table th:nth-child(13),
.painel-diarias-table td:nth-child(13) {
    width: 140px;
    max-width: 140px;

}
.painel-diarias-table th:nth-child(14),
.painel-diarias-table td:nth-child(14) {
    width: 320px;
    min-width: 320px;
    max-width: 320px;
    white-space: nowrap !important;
}

/* input da observação */
.painel-diarias-table td:nth-child(14) .observacao {
    width: 100%;
    height: 32px;
    padding: 4px 8px;
    font-size: 12px;
    box-sizing: border-box;
}

.painel-diarias-table td:nth-child(5) {
    width: 120px;
    max-width: 120px;
}


.painel-diarias-table input {
    width: 100%;
    font-size: 12px;
    padding: 4px 6px;
}

/* ===== PAINEL DIÁRIAS - LARGURA ===== */

.painel-diarias-table th {
    white-space: nowrap;
}

.painel-diarias-table td {
    white-space: nowrap;
}

/* LIBERA TEXTO ONDE PRECISA */
.painel-diarias-table td:nth-child(4), /* Viajante */
.painel-diarias-table td:nth-child(5)  /* Divisão */
{
    white-space: normal;
    word-break: break-word;
}

/* ===== WRAP INTERNO DA TABELA ===== */
/* controla SOMENTE o scroll da grade de dados */

.painel-diarias-wrap {
    width: 100%;
    max-height: 58vh;
    overflow-x: auto;
    overflow-y: visible;
    border-top: 1px solid #e3e6f0;
}
  

/* ===== INPUT DE DATA COMPACTO ===== */

.painel-diarias-table input[type="date"] {
    max-width: 120px;   /* reduz largura do campo */
    font-size: 12px;
    padding: 3px 6px;
}

/* botão do calendário (ícone) */
.painel-diarias-table input[type="date"]::-webkit-calendar-picker-indicator {
    transform: scale(0.8);  /* diminui o ícone */
    cursor: pointer;
}

.painel-diarias-table input[type="date"] {
    max-width: 100px;
}

/* ===== SCROLL ESTILO SISTEMA ===== */

.painel-diarias-wrap::-webkit-scrollbar {
    height: 10px;
    width: 10px;
}

.painel-diarias-wrap::-webkit-scrollbar-track {
    background: #f1f3f8;
    border-radius: 10px;
}

.painel-diarias-wrap::-webkit-scrollbar-thumb {
    background: #c2c7d6;
    border-radius: 10px;
}

.painel-diarias-wrap::-webkit-scrollbar-thumb:hover {
    background: #9aa1b5;
}

/* 🔥 PERMITE DROPDOWN SAIR DA LINHA */
.painel-diarias-table tr,
.painel-diarias-table td {
    overflow: visible !important;
}

/* Link da OM */
.link-om{
    font-weight: 700;
    color: #0d6efd;
    text-decoration: none;
    transition: all .15s ease;
}

.link-om:hover{
    text-decoration: underline;
    color: #0a58ca;
}

/* ===== AÇÕES - PADRÃO PROFISSIONAL ===== */

.acoes-wrapper{
    display: flex;
    justify-content: flex-end;
    gap: 6px;
}

/* botão base */
.btn-acao{
    display: inline-flex;
    align-items: center;
    gap: 5px;

    padding: 6px 10px;
    border-radius: 8px;

    font-size: 12px;
    font-weight: 600;

    text-decoration: none;
    border: none;

    transition: all .15s ease;
}

/* ícone */
.btn-acao i{
    font-size: 13px;
}

/* ===== CORES ===== */

.btn-editar{
    background: #e7f1ff;
    color: #0d6efd;
}

.btn-editar:hover{
    background: #0d6efd;
    color: #fff;
}

.btn-inativar{
    background: #fdeaea;
    color: #dc3545;
}

.btn-inativar:hover{
    background: #dc3545;
    color: #fff;
}

.btn-manut{
    background: #fff3cd;
    color: #b8860b;
}

.btn-manut:hover{
    background: #ffc107;
    color: #000;
}

.btn-km{
    background: #e6f7ec;
    color: #198754;
}

.btn-km:hover{
    background: #198754;
    color: #fff;
}

/* ALERTAS MAIS PROFISSIONAIS */

.btn-alerta{
    background: #fdeaea;
    color: #dc3545;
    border: 1px solid #f5c2c7;
}

.btn-alerta:hover{
    background: #dc3545;
    color: #fff;
}

.btn-km{
    padding: 4px 10px;
    font-size: 12px;
    border-radius: 6px;
}

.btn-km span{
    margin-left: 4px;
}

#tabelaKM td,
#tabelaKM th{
    padding: 8px 10px;
    font-size: 13px;
    vertical-align: middle;
}

/* ==========================================================
   LISTAR OM - AJUSTES DO HTML ATUAL
   Complementa o código que já está em listar_om.php
========================================================== */

.om-list-table {
  background: #fff;
}

.om-list-table thead th {
  white-space: nowrap;
}

.om-list-table td {
  vertical-align: middle;
}

.om-numero {
  display: inline-flex;
  min-width: 42px;
  height: 30px;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: #eef1fb;
  color: #2b3a67;
  font-weight: 800;
  font-size: .9rem;
  border: 1px solid #e2e6f6;
}

.om-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 6px;
  flex-wrap: nowrap;
  white-space: nowrap;
}

.om-actions .btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border-radius: .55rem;
  font-weight: 700;
  padding: 6px 9px;
  line-height: 1.1;
  text-decoration: none;
  white-space: nowrap;
}

.om-actions .btn:hover {
  text-decoration: none;
}

.om-actions form {
  display: inline-flex;
  margin: 0;
}

.btn-soft-dark {
  background: #f1f2f4;
  color: #222;
  border-color: #d7dae0;
}

.btn-soft-dark:hover {
  background: #222;
  color: #fff;
}

.btn-soft-success {
  background: #e9f7ef;
  color: #198754;
  border-color: #cbead8;
}

.btn-soft-success:hover {
  background: #198754;
  color: #fff;
}

.btn-soft-secondary {
  background: #f3f5f8;
  color: #5d6675;
  border-color: #dbe0e7;
}

.btn-soft-secondary:hover {
  background: #5d6675;
  color: #fff;
}

/* Em telas menores, mantém a tabela respirando e reduz texto dos botões */
@media (max-width: 1200px) {
  .om-actions .btn span {
    display: none;
  }

  .om-actions .btn {
    width: 36px;
    height: 36px;
    justify-content: center;
    padding: 0;
  }
}

/* ==========================================================
   LISTAR PESSOAS - AJUSTE FINO USANDO PADRÃO DA OM
========================================================== */

.om-list-table td:last-child,
.om-list-table th:last-child {
  white-space: nowrap;
}

.om-actions {
  flex-wrap: nowrap;
}

.om-actions .btn {
  min-width: auto;
}

/* ==========================================================
   BOTÃO COPIAR CPF
========================================================== */

.col-cpf {
    white-space: nowrap;
}

.cpf-chip {
    display: inline-block;
    min-width: 125px;
}

.btn-copiar-cpf {
    margin-left: 6px;
    padding: 2px 8px;
    font-size: 12px;
}

/* ==========================================================
   LISTAR RTV - UNIFICADO COM O PADRÃO VISUAL DA LISTAGEM OM
   Objetivo: RTV herda a mesma tabela, chips e botões usados em listar_om.php.
   Manter este bloco no final para neutralizar CSS local/Bootstrap divergente.
========================================================== */

.rtv-list-table {
  background: #fff;
}

.rtv-list-table thead th {
  white-space: nowrap;
}

.rtv-list-table thead th a {
  color: inherit !important;
  text-decoration: none !important;
}

.rtv-list-table td {
  vertical-align: middle;
}

.rtv-list-table td:last-child,
.rtv-list-table th:last-child {
  white-space: nowrap;
}

.rtv-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 6px;
  flex-wrap: nowrap;
  white-space: nowrap;
}

.rtv-actions form {
  display: inline-flex;
  margin: 0;
}

.rtv-actions .btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border-radius: .55rem;
  font-weight: 700;
  padding: 6px 9px;
  line-height: 1.1;
  text-decoration: none;
  white-space: nowrap;
  min-width: auto;
}

.rtv-actions .btn:hover {
  text-decoration: none;
}

.rtv-status-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.1;
  white-space: nowrap;
}

.rtv-status-success {
  background: #e9f7ef;
  color: #198754;
  border: 1px solid #cbead8;
}

.rtv-status-warning {
  background: #fff4e6;
  color: #7b4700;
  border: 1px solid #ffe6c7;
}

.rtv-status-danger {
  background: #ffecef;
  color: #8c2431;
  border: 1px solid #ffd6dc;
}

.rtv-status-neutral {
  background: #f3f5f8;
  color: #5d6675;
  border: 1px solid #dbe0e7;
}

.rtv-alteracao-badge {
  display: inline-block;
  margin-left: 6px;
  padding: 2px 6px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.1;
  background: #fff4e6;
  color: #7b4700;
  border: 1px solid #ffe6c7;
  white-space: nowrap;
}

@media (max-width: 1200px) {
  .rtv-actions .btn span {
    display: none;
  }

  .rtv-actions .btn {
    width: 36px;
    height: 36px;
    justify-content: center;
    padding: 0;
  }
}

/* ==========================================================
   RESPONSIVO (celular/tablet) — listar_om.php, cadastro_om.php,
   listar_rtv.php, cadastro_rtv.php (2026-07-31). Selecionado por
   classe (.om-list-table, .rt-row etc.), então só tem efeito nessas
   páginas mesmo estando no CSS global. Abordagem: adapta a estrutura
   (tabela vira cartão, cabeçalho quebra linha, alvos de toque
   maiores), não só encolhe o layout de desktop. Ver CLAUDE.md.
========================================================== */

/* ---- Cabeçalho de página: título + botões nunca "espremem" ---- */
@media (max-width: 575.98px) {
  .container > .d-flex.justify-content-between.align-items-center {
    flex-wrap: wrap;
    row-gap: .6rem;
  }

  .container > .d-flex.justify-content-between.align-items-center > .btn-group,
  .container > .d-flex.justify-content-between.align-items-center > div {
    flex-wrap: wrap;
  }
}

/* ---- Alvo de toque mínimo em botões e campos, telas com ponteiro grosso ----
   Exclui .btn-link: são links de texto inline (ex.: "❓ Ajuda", "✨ Analisar
   com IA"), não botões de ação — forçar altura mínima neles só criaria
   espaço vazio ao redor do texto sem ganho real de área de toque. */
@media (pointer: coarse) {
  .btn:not(.btn-link) {
    min-height: 44px;
  }

  .btn.btn-sm:not(.btn-link) {
    min-height: 38px;
  }

  .form-control,
  .form-select {
    min-height: 44px;
  }

  /* botões de ação viram só ícone em telas médias (já existia) — mantém
     o alvo de toque confortável mesmo assim */
  .om-actions .btn,
  .rtv-actions .btn {
    min-width: 40px;
    min-height: 40px;
  }
}

/* ==========================================================
   LISTAGENS LONGAS — ROLAGEM PRÓPRIA E CONTROLES AO ALCANCE
   Aplicado ao contêiner .table-responsive das listagens de OM,
   RTV e Pessoas (classe ".listagem-scroll") e à barra de
   paginação logo abaixo dele (".listagem-paginacao").

   O que faz: prende a altura da tabela à altura da janela, de
   modo que a rolagem vertical das linhas aconteça DENTRO da
   caixa, e fixa a barra de paginação no rodapé da janela.

   Por que existe: com 50 linhas por página, a barra de rolagem
   horizontal (que fica na base da tabela) e a barra de
   paginação (que vem depois dela) caíam a mais de 7.000px do
   topo — o usuário precisava rolar a página inteira, até
   acabarem os registros, para alcançar qualquer uma das duas.
========================================================== */

/* Sem min-height de propósito: com poucas linhas a caixa encolhe
   junto e não sobra área branca. O teto é que importa. */
.listagem-scroll {
  max-height: calc(100vh - 230px);
  overflow: auto;
}

/* Cabeçalho preso ao topo da caixa durante a rolagem interna,
   para as colunas não se perderem. O fundo precisa ser opaco,
   senão as linhas ficam legíveis por baixo dele. A borda
   inferior vem de box-shadow porque, em tabela com
   border-collapse, a borda de um elemento sticky não é
   repintada e some ao rolar. */
.listagem-scroll thead th {
  position: sticky;
  top: 0;
  z-index: 3;
  background: #fff;
  box-shadow: inset 0 -2px 0 var(--dcpr-navy);
}

/* Paginação sempre visível no rodapé da janela enquanto a
   listagem estiver em tela. Fundo opaco porque ela passa por
   cima das linhas ao rolar. */
.listagem-paginacao {
  position: sticky;
  bottom: 0;
  z-index: 4;
  padding: .5rem .25rem;
  background: #fff;
  border-top: 1px solid #e6e9f0;
}

/* Abaixo de 768px a listagem vira cartões (regra logo adiante)
   e não existe rolagem horizontal — prender a altura ali só
   criaria uma segunda barra vertical dentro da página. */
@media (max-width: 767.98px) {
  .listagem-scroll {
    max-height: none;
    overflow: visible;
  }
}

/* ---- Tabelas de listagem viram cartões abaixo de 768px ----
   Usa os atributos data-label já presentes no HTML. Selector genérico
   ".tabela-cartao-mobile" reaproveita a mesma regra em qualquer listagem
   do sistema (pedido_desbloqueio.php, aprovar_pedidos_desbloqueio.php
   incluídos), sem duplicar a regra — ".om-list-table" continua valendo
   por compatibilidade com listar_om.php/listar_rtv.php. */
@media (max-width: 767.98px) {
  .table-responsive {
    overflow-x: visible;
  }

  .om-list-table thead,
  .tabela-cartao-mobile thead {
    display: none;
  }

  .om-list-table,
  .om-list-table tbody,
  .om-list-table tr,
  .om-list-table td,
  .tabela-cartao-mobile,
  .tabela-cartao-mobile tbody,
  .tabela-cartao-mobile tr,
  .tabela-cartao-mobile td {
    display: block;
    width: 100% !important;
    min-width: 0 !important;
  }

  .om-list-table tr,
  .tabela-cartao-mobile tr {
    margin-bottom: .9rem;
    border: 1px solid #e2e6f6;
    border-radius: .75rem;
    padding: .85rem 1rem;
    box-shadow: 0 2px 10px rgba(43, 58, 103, .06);
  }

  .om-list-table td,
  .tabela-cartao-mobile td {
    border: none !important;
    padding: .3rem 0 !important;
    text-align: left !important;
  }

  .om-list-table td:empty,
  .tabela-cartao-mobile td:empty {
    display: none;
  }

  .om-list-table td[data-label]::before,
  .tabela-cartao-mobile td[data-label]::before {
    content: attr(data-label);
    display: block;
    font-size: .7rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: #8890a0;
    margin-bottom: .15rem;
  }

  .om-list-table td[data-label="Ações"],
  .tabela-cartao-mobile td[data-label="Ações"] {
    margin-top: .4rem;
    padding-top: .6rem !important;
    border-top: 1px solid #eef1fb !important;
  }

  .tabela-cartao-mobile td[data-label="Ações"] form {
    justify-content: flex-start !important;
  }

  .om-list-table .om-actions,
  .om-list-table .rtv-actions {
    justify-content: flex-start !important;
    flex-wrap: wrap;
  }

  .om-list-table .om-actions .btn,
  .om-list-table .rtv-actions .btn {
    width: auto !important;
    height: auto !important;
    padding: .5rem .8rem !important;
  }

  .om-list-table .om-actions .btn span,
  .om-list-table .rtv-actions .btn span {
    display: inline !important;
  }

  /* filtros de listagem: um campo por linha, botão "Filtrar" de largura total */
  form.row.g-2 .col-md-1 > .btn,
  form.row.g-2 .col-md-1.d-grid > .btn {
    width: 100%;
  }
}

/* ---- Formulário de OM: trechos e equipe ganham mais respiro no celular ----
   Classes reais em cadastro_om.php são .rt-row (trechos) e .eq-row (equipe)
   — ".rota-row" é resíduo de CSS legado que não bate com HTML nenhum, não
   confundir (ver bloco "OM forms" mais acima neste mesmo arquivo). */
@media (max-width: 767.98px) {
  .card .rt-row,
  .card .eq-row {
    padding-bottom: .5rem;
    border-bottom: 1px dashed #e2e6f6;
    margin-bottom: .5rem;
  }

  .card .rt-row:last-child,
  .card .eq-row:last-child {
    border-bottom: none;
  }

  /* botão "remover trecho/integrante" some ao lado, sobe pra própria linha
     e fica de largura total — alvo de toque grande, sem disputar espaço
     com os campos numa coluna estreita */
  .card .rt-row .d-grid,
  .card .eq-row .d-grid {
    margin-top: .25rem;
  }

  .card .rt-row .d-grid .btn,
  .card .eq-row .d-grid .btn {
    width: 100%;
  }
}