body {
    font-family: Arial, sans-serif;
    background: #f3f4f6;
    margin: 0;
    padding: 0;
}

.page {
    max-width: 1200px;
    margin: 20px auto;
    background: #ffffff;
    padding: 20px 24px;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(15,23,42,0.12);
}

h1 {
    margin-top: 0;
    font-size: 20px;
    color: #111827;
}

h2 {
    font-size: 16px;
    margin: 16px 0 8px;
    color: #1f2937;
}

.filtros-card {
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 12px 14px;
    margin-bottom: 16px;
    background: #f9fafb;
}

.linha {
    display: flex;
    gap: 16px;
    margin-bottom: 10px;
    flex-wrap: wrap;
}

.campo {
    display: flex;
    flex-direction: column;
    min-width: 220px;
}

.campo.full {
    flex: 1;
}

label {
    font-size: 13px;
    font-weight: 600;
    color: #374151;
    margin-bottom: 4px;
}

input[type="text"],
input[type="number"] {
    padding: 6px 8px;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    font-size: 13px;
}

small {
    font-size: 11px;
    color: #6b7280;
}

.botoes {
    justify-content: flex-start;
}

button {
    padding: 8px 14px;
    border-radius: 4px;
    border: 1px solid #111827;
    background: #111827;
    color: #fff;
    font-size: 13px;
    cursor: pointer;
}

button.secundario {
    border-color: #4b5563;
    background: #4b5563;
}

button.perigo {
    border-color: #b91c1c;
    background: #dc2626;
}

button + button {
    margin-left: 8px;
}

button:hover {
    filter: brightness(1.05);
}

.msg {
    margin: 8px 0 12px;
}

.msg .erro {
    padding: 6px 10px;
    border-radius: 4px;
    background: #fef2f2;
    color: #b91c1c;
    border: 1px solid #fecaca;
    font-size: 13px;
}

.msg .sucesso {
    padding: 6px 10px;
    border-radius: 4px;
    background: #ecfdf3;
    color: #166534;
    border: 1px solid #bbf7d0;
    font-size: 13px;
}

.info {
    padding: 6px 10px;
    border: 1px dashed #d1d5db;
    border-radius: 4px;
    font-size: 13px;
    color: #4b5563;
}

.grid-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.simulacao-card {
    margin-top: 16px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 12px;
    background: #f9fafb;
}

/* Tabela */
table {
    border-collapse: collapse;
    width: 100%;
    font-size: 12px;
}

th, td {
    border: 1px solid #e5e7eb;
    padding: 4px 6px;
}

th {
    background: #f3f4f6;
    text-align: left;
    font-weight: 600;
}


/* ===== Atalhos de data / filtros (estilo “Consulta — Pedidos da Assistência”) ===== */

.filtros-top {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.filtros-grupo {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  align-items: flex-end;
}

.campo.compacto { min-width: 180px; }
.campo.curto { min-width: 140px; }
.campo.medio { min-width: 220px; }

.acoes {
  display: flex;
  gap: 10px;
  align-items: center;
}

.acoes button,
.acoes a button {
  min-width: 120px;
}

.toggle-atalhos {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  color: #374151;
  cursor: pointer;
  user-select: none;
  margin-top: 6px;
}

.toggle-atalhos .seta {
  display: inline-block;
  width: 16px;
  text-align: center;
}

.atalhos-box {
  margin-top: 10px;
  border: 1px solid #e5e7eb;
  background: #f9fafb;
  border-radius: 8px;
  padding: 10px;
  display: none;
}

.atalhos-box.open { display: block; }

.atalhos-grid {
  display: grid;
  grid-template-columns: 160px;
  gap: 10px;
}

@media (max-width: 800px){
  .atalhos-grid { grid-template-columns: 1fr; }
}

.btn-atalho {
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid #dbeafe;
  background: #eef2ff;
  color: #1d4ed8;
  font-weight: 700;
  cursor: pointer;
  text-align: center;
}

.btn-atalho:hover { filter: brightness(1.02); }

.divisor-filtros {
  height: 1px;
  background: #e5e7eb;
  margin: 10px 0;
}

button.link {
  background: transparent;
  border: none;/*  */
  color: #6b7280;
  padding: 0;
  cursor: pointer;
  font-size: 13px;
  text-decoration: underline;
}
button.link:hover { color: #374151; }


/*

Cadastro QRCODE


*/


/*
Analise TV20
*/

/* ============================================================
   TV20 – Análise do Cliente (DEMONSTRAÇÃO)
   (colar no FINAL do FormatBaseNew.css)
============================================================ */

.page.tv20-page { max-width: 1200px; }

.tv20-card {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 16px;
  box-shadow: 0 6px 18px rgba(15,23,42,0.06);
  margin-bottom: 14px;
}

.tv20-header { padding: 18px; }

.tv20-title {
  font-size: 20px;
  font-weight: 800;
  color: #111827;
  margin-bottom: 14px;
}

.tv20-filtros {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: flex-end;
}

.tv20-filtro {
  display: flex;
  flex-direction: column;
  min-width: 220px;
}

.tv20-filtro input[type="number"],
.tv20-filtro input[type="date"]{
  height: 40px;
  border-radius: 10px;
  border: 1px solid #d1d5db;
  padding: 0 12px;
  font-size: 14px;
  background: #fff;
}

.tv20-actions { display:flex; align-items:flex-end; }
.tv20-actions button {
  height: 40px;
  border-radius: 10px;
  padding: 0 16px;
  border: 0;
  background: #2563eb;
  color: #fff;
  font-weight: 800;
  cursor: pointer;
}

.tv20-actions button:hover { filter: brightness(1.03); }

.tv20-hint {
  background: #ffffff;
  border: 1px dashed #d1d5db;
  border-radius: 12px;
  padding: 14px 16px;
  color: #4b5563;
  margin-bottom: 14px;
}

.tv20-metrics {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 14px;
}

.tv20-metric {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 12px 14px;
}

.tv20-metric-label {
  font-size: 12px;
  color: #6b7280;
  margin-bottom: 6px;
}

.tv20-metric-value {
  font-size: 16px;
  font-weight: 900;
  color: #111827;
}

.tv20-grid2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 14px;
}

.tv20-subtitle {
  font-size: 16px;
  font-weight: 800;
  color: #111827;
  margin-bottom: 10px;
}

.tv20-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.tv20-table th,
.tv20-table td {
  border: 1px solid #e5e7eb;
  padding: 8px 10px;
  white-space: nowrap;
}

.tv20-table th {
  background: #f9fafb;
  font-weight: 800;
  color: #374151;
}

.tv20-muted { color: #6b7280; }

@media (max-width: 1100px) {
  .tv20-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tv20-grid2 { grid-template-columns: 1fr; }
  .tv20-filtro { min-width: 100%; }
}


/*
Continuacao tv20
*/

/* =========================
   TV20 - Refinos (cards + modal)
   (colar no final do FormatBaseNew.css)
========================= */

.tv20-page { max-width: 1400px; }

.tv20-filtros-compact{
  display: grid;
  grid-template-columns: 240px 220px 220px 140px;
  gap: 14px;
  align-items: end;
}
@media (max-width: 900px){
  .tv20-filtros-compact{ grid-template-columns: 1fr; }
}

.tv20-kpis{
  margin-top: 14px;
  display: grid;
  grid-template-columns: repeat(5, minmax(160px, 1fr));
  gap: 12px;
}
@media (max-width: 1100px){
  .tv20-kpis{ grid-template-columns: repeat(2, minmax(160px, 1fr)); }
}

.tv20-kpi{
  border: 1px solid #e5e7eb;
  background: #fff;
  border-radius: 12px;
  padding: 12px 14px;
  text-align: left;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(15,23,42,0.06);
}
.tv20-kpi:hover{ filter: brightness(1.01); }
.tv20-kpi:active{ transform: translateY(1px); }

.tv20-kpi-static{
  cursor: default;
  background: #f9fafb;
}
.tv20-kpi-static:hover{ filter:none; }

.tv20-kpi-label{
  font-size: 12px;
  font-weight: 700;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: .02em;
}
.tv20-kpi-value{
  margin-top: 6px;
  font-size: 18px;
  font-weight: 800;
  color: #111827;
}
.tv20-kpi-sub{
  margin-top: 4px;
  font-size: 12px;
  color: #6b7280;
}

.tv20-summary{ margin-top: 10px; }
.tv20-summary-row{
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
}
.tv20-summary-tip{
  color: #6b7280;
  font-size: 12px;
}

/* Tabelas compactas no modal */
.tv20-table-compact th, .tv20-table-compact td{
  padding: 6px 8px;
  font-size: 12px;
}

/* Modal flutuante */
.tv20-modal-backdrop{
  position: fixed;
  inset: 0;
  background: rgba(17,24,39,0.45);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 18px;
  z-index: 9999;
}
.tv20-modal-backdrop.open{ display: flex; }

.tv20-modal{
  width: min(1100px, 96vw);
  max-height: 86vh;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.25);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.tv20-modal-top{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid #e5e7eb;
  background: #f9fafb;
}
.tv20-modal-head{
  font-weight: 800;
  color: #111827;
}
.tv20-modal-close{
  padding: 8px 12px;
  border-radius: 10px;
  border: 1px solid #111827;
  background: #111827;
  color: #fff;
  cursor: pointer;
}
.tv20-modal-body{
  padding: 12px 14px;
  overflow: auto;
}
.tv20-modal-title{
  font-weight: 800;
  margin-bottom: 10px;
  color: #111827;
}

/* =========================
   TV20 - Resumo + Drawer
========================= */

.tv20-page { max-width: 1400px; }

.tv20-filtros-compact{
  display: grid;
  grid-template-columns: 240px 220px 220px 140px;
  gap: 14px;
  align-items: end;
}
@media (max-width: 900px){
  .tv20-filtros-compact{ grid-template-columns: 1fr; }
}

.tv20-kpis{
  margin-top: 14px;
  display: grid;
  grid-template-columns: repeat(5, minmax(170px, 1fr));
  gap: 12px;
}
@media (max-width: 1100px){
  .tv20-kpis{ grid-template-columns: repeat(2, minmax(170px, 1fr)); }
}

.tv20-kpiCard{
  border: 1px solid #e5e7eb;
  background: #ffffff;
  border-radius: 12px;
  padding: 12px 14px;
  box-shadow: 0 2px 10px rgba(15,23,42,0.06);
}
.tv20-kpiWarn{ background: #f9fafb; }

.tv20-kpiLabel{
  font-size: 12px;
  font-weight: 800;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: .02em;
}
.tv20-kpiValue{
  margin-top: 6px;
  font-size: 18px;
  font-weight: 900;
  color: #111827;
}
.tv20-kpiSub{
  margin-top: 4px;
  font-size: 12px;
  color: #6b7280;
}

.tv20-tableWrap{
  width: 100%;
  overflow: auto;
  border-radius: 10px;
}

.tv20-table-compact th, .tv20-table-compact td{
  padding: 6px 8px;
  font-size: 12px;
}

.tv20-row-click{
  cursor: pointer;
}
.tv20-row-click:hover{
  background: #f9fafb;
}

.tv20-tipLine{
  margin-top: 8px;
  font-size: 12px;
  color: #6b7280;
}

/* status pills */
.tv20-pill{
  display: inline-flex;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  border: 1px solid #e5e7eb;
  background: #fff;
}
.tv20-pill-sem\ dev { color:#6b7280; }
.tv20-pill-parcial { color:#b45309; border-color:#fde68a; background:#fffbeb; }
.tv20-pill-integral{ color:#166534; border-color:#bbf7d0; background:#ecfdf3; }

/* Drawer (painel lateral) */
.tv20-drawer{
  position: fixed;
  top: 0;
  right: 0;
  height: 100vh;
  width: min(520px, 96vw);
  background: #ffffff;
  border-left: 1px solid #e5e7eb;
  box-shadow: -10px 0 30px rgba(0,0,0,0.15);
  transform: translateX(110%);
  transition: transform .18s ease;
  z-index: 9999;
  display: flex;
  flex-direction: column;
}
.tv20-drawer.open{ transform: translateX(0); }

.tv20-drawer-head{
  padding: 12px 14px;
  border-bottom: 1px solid #e5e7eb;
  background: #f9fafb;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.tv20-drawer-title{ font-weight: 900; color:#111827; }
.tv20-drawer-sub{ font-size: 12px; color:#6b7280; margin-top: 2px; }

.tv20-drawer-close{
  padding: 8px 12px;
  border-radius: 10px;
  border: 1px solid #111827;
  background: #111827;
  color: #fff;
  cursor: pointer;
}

.tv20-drawer-body{
  padding: 12px 14px;
  overflow: auto;
}

.tv20-detailGrid{
  display: grid;
  gap: 12px;
}
.tv20-detailCard{
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 10px;
  background: #fff;
}
.tv20-detailTitle{
  font-weight: 900;
  color:#111827;
  margin-bottom: 8px;
}

/* TV20 - 6 KPIs */
.tv20-kpis-6{
  grid-template-columns: repeat(6, minmax(180px, 1fr));
}
@media (max-width: 1300px){
  .tv20-kpis-6{ grid-template-columns: repeat(3, minmax(180px, 1fr)); }
}
@media (max-width: 900px){
  .tv20-kpis-6{ grid-template-columns: 1fr; }
}
.tv20-kpiWarn{
  background: #f9fafb;
}

/* =========================
   TV20 - Ajuste layout filtro (barra compacta)
========================= */

.tv20-filtroBar{
  display: grid;
  grid-template-columns: 260px 220px 220px 140px;
  gap: 14px;
  align-items: end;
  margin-top: 10px;
}

.tv20-filtroBar-item label{
  display:block;
  font-size: 13px;
  font-weight: 700;
  color: #374151;
  margin-bottom: 6px;
}

.tv20-filtroBar-item input{
  width: 100%;
  height: 36px;
  box-sizing: border-box;
}

.tv20-filtroBar-btn button{
  width: 140px;
  height: 36px;
  border-radius: 10px;
}

@media (max-width: 980px){
  .tv20-filtroBar{
    grid-template-columns: 1fr 1fr;
  }
  .tv20-filtroBar-btn button{
    width: 100%;
  }
}

@media (max-width: 640px){
  .tv20-filtroBar{
    grid-template-columns: 1fr;
  }
}


/* =========================
   TV20 - Card do Cliente abaixo do filtro
========================= */
.tv20-cliBox{
  margin-top: 10px;
  border: 1px solid #e5e7eb;
  background: #f9fafb;
  border-radius: 12px;
  padding: 12px 14px;
  display: none;
}
.tv20-cliBox.open{ display:block; }

.tv20-cliTitle{
  display:flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}
.tv20-cliName{
  font-size: 14px;
  font-weight: 800;
  color: #111827;
}
.tv20-cliCode{
  font-size: 12px;
  font-weight: 800;
  color: #6b7280;
  white-space: nowrap;
}

.tv20-cliGrid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 16px;
  font-size: 12px;
  color: #374151;
}
@media (max-width: 900px){
  .tv20-cliGrid{ grid-template-columns: 1fr; }
}

.tv20-cliEmpty{
  font-size: 13px;
  color: #6b7280;
}

/* ===== TV20 - input group com lupa + ações ===== */
.tv20-inputGroup{
  display: flex;
  gap: 8px;
  align-items: center;
}
.tv20-btnIcon{
  height: 36px;
  width: 44px;
  border-radius: 10px;
  border: 1px solid #d1d5db;
  background: #fff;
  color: #111827;
  cursor: pointer;
}
.tv20-btnIcon:hover{ filter: brightness(0.98); }

.tv20-miniActions{
  margin-top: 6px;
  display: flex;
  gap: 10px;
  align-items: center;
}
.tv20-linkBtn{
  background: transparent;
  border: none;
  padding: 0;
  color: #1d4ed8;
  cursor: pointer;
  font-weight: 700;
  text-decoration: underline;
  font-size: 12px;
}
.tv20-linkBtn:disabled{
  color: #9ca3af;
  cursor: not-allowed;
  text-decoration: none;
}

.tv20-cliStatus{
  font-size: 12px;
  font-weight: 700;
  color: #6b7280;
}
.tv20-cliStatus.ok{ color: #166534; }
.tv20-cliStatus.bad{ color: #b91c1c; }

/* Card do cliente */
.tv20-cliBox{
  margin-top: 10px;
  border: 1px solid #e5e7eb;
  background: #f9fafb;
  border-radius: 12px;
  padding: 12px 14px;
  display: none;
}
.tv20-cliBox.open{ display:block; }

.tv20-cliTitle{
  display:flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}
.tv20-cliName{ font-size: 14px; font-weight: 800; color: #111827; }
.tv20-cliCode{ font-size: 12px; font-weight: 800; color: #6b7280; white-space: nowrap; }

.tv20-cliGrid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 16px;
  font-size: 12px;
  color: #374151;
}
@media (max-width: 900px){
  .tv20-cliGrid{ grid-template-columns: 1fr; }
}
.tv20-cliEmpty{ font-size: 13px; color: #6b7280; }

/* =========================================================
   TV20 – Dropdown de Cliente + Card de Seleção
   (colar no FINAL do FormatBaseNew.css)
========================================================= */

/* Campo cliente com lupa */
.tv20-field-cli {
    position: relative;
}

.tv20-cliSearch {
    display: flex;
    gap: 6px;
}

.tv20-cliSearch input {
    flex: 1;
}

.tv20-cliSearch button {
    padding: 6px 10px;
    border-radius: 4px;
    border: 1px solid #111827;
    background: #111827;
    color: #fff;
    cursor: pointer;
    font-size: 14px;
}

.tv20-cliSearch button:hover {
    filter: brightness(1.05);
}

/* Dropdown de resultados */
.tv20-drop {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin-top: 4px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    background: #ffffff;
    max-height: 260px;
    overflow-y: auto;
    z-index: 999;
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.18);
}

/* Item do dropdown */
.tv20-dropItem {
    padding: 8px 10px;
    font-size: 13px;
    border-bottom: 1px solid #f3f4f6;
    cursor: pointer;
    color: #111827;
}

.tv20-dropItem:last-child {
    border-bottom: none;
}

.tv20-dropItem:hover {
    background: #f3f4f6;
}

.tv20-dropItem b {
    color: #1d4ed8;
}

/* Estados */
.tv20-muted {
    color: #6b7280;
    font-style: italic;
}

.tv20-bad {
    color: #b91c1c;
    background: #fef2f2;
}

/* Card do cliente selecionado */
.tv20-cliCard {
    margin-top: 8px;
    padding: 10px 12px;
    border-radius: 8px;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
}

.tv20-cliTitle {
    font-size: 14px;
    font-weight: 700;
    color: #111827;
    margin-bottom: 4px;
}

.tv20-cliMini {
    font-size: 12px;
    color: #4b5563;
    line-height: 1.3;
}

/* Badge status (TOTAL / PARCIAL / SEM DEV) */
.tv20-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
}

.tv20-badge.b-total {
    background: #dcfce7;
    color: #166534;
    border: 1px solid #86efac;
}

.tv20-badge.b-parcial {
    background: #fff7ed;
    color: #9a3412;
    border: 1px solid #fdba74;
}

.tv20-badge.b-sem {
    background: #f3f4f6;
    color: #374151;
    border: 1px solid #d1d5db;
}


/*
Formato para consultar DUIMP

*/

/* =========================================================
   DUIMP - Extrato Siscomex-like + Tabs + Compare (colar no FINAL)
========================================================= */

.duimp-page{ max-width: 1400px; }

.duimp-header{
  margin-top: 10px;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 14px 16px;
  background: #ffffff;
  box-shadow: 0 6px 18px rgba(15,23,42,0.06);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}

.duimp-title{
  font-size: 18px;
  font-weight: 900;
  color: #111827;
}

.duimp-num{
  display: inline-block;
  margin-left: 8px;
  font-weight: 900;
  color: #1d4ed8;
}

.duimp-sub{
  margin-top: 6px;
  color: #4b5563;
  font-size: 13px;
}

.duimp-header-actions{
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}

.duimp-btn{
  border-radius: 10px;
  padding: 10px 12px;
}

/* Tabs */
.duimp-tabs{
  margin-top: 12px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.duimp-tab{
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid #e5e7eb;
  background: #fff;
  cursor: pointer;
  font-weight: 900;
  color: #111827;
}
.duimp-tab.active{
  background: #111827;
  border-color: #111827;
  color: #fff;
}

.duimp-pane{ display:none; margin-top: 12px; }
.duimp-pane.active{ display:block; }

/* Extrato (siscomex-like) */
.duimp-extrato{
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  background: #fff;
  overflow: hidden;
  box-shadow: 0 10px 22px rgba(15,23,42,0.06);
}
.duimp-extrato-head{
  padding: 12px 14px;
  font-weight: 900;
  color: #111827;
  background: #f9fafb;
  border-bottom: 1px solid #e5e7eb;
}

.duimp-section{
  padding: 12px 14px;
  border-bottom: 1px solid #f3f4f6;
}
.duimp-section-title{
  font-weight: 900;
  color: #111827;
  margin-bottom: 10px;
}

.duimp-kv-grid{
  display: grid;
  grid-template-columns: repeat(4, minmax(180px, 1fr));
  gap: 10px;
}
@media (max-width: 1100px){ .duimp-kv-grid{ grid-template-columns: repeat(2, minmax(180px, 1fr)); } }
@media (max-width: 640px){ .duimp-kv-grid{ grid-template-columns: 1fr; } }

.duimp-kv{
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  background: #fff;
  padding: 10px 12px;
}
.duimp-kv span{
  display:block;
  font-size: 12px;
  color: #6b7280;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .02em;
  margin-bottom: 6px;
}
.duimp-kv b{
  color: #111827;
}

/* Tabela extrato */
.duimp-extrato-tableWrap{ overflow:auto; }
.duimp-extrato-table{
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.duimp-extrato-table th,
.duimp-extrato-table td{
  border: 1px solid #e5e7eb;
  padding: 6px 8px;
  white-space: nowrap;
}
.duimp-extrato-table th{
  background: #f3f4f6;
  font-weight: 900;
}

/* JSON e XML */
.duimp-jsonTop{
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.duimp-jsonTitle{
  font-weight: 900;
  color: #111827;
}
.duimp-jsonSearch input{
  width: min(420px, 80vw);
  height: 36px;
  border-radius: 10px;
  border: 1px solid #d1d5db;
  padding: 0 12px;
}

.duimp-jsonBox, .duimp-xmlBox{
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  overflow: auto;
  max-height: 70vh;
  background: #0b1220;
}
.duimp-jsonPre, .duimp-xmlPre{
  margin: 0;
  padding: 12px;
  font-size: 12px;
  line-height: 1.35;
  color: #e5e7eb;
  white-space: pre;
}
.duimp-mark{
  background: #fde68a;
  color: #111827;
  padding: 0 2px;
  border-radius: 3px;
}

/* Compare (lado a lado) */
.duimp-compare-wrap{
  display: none;
  margin-top: 12px;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  background: #fff;
  overflow: hidden;
  box-shadow: 0 10px 22px rgba(15,23,42,0.06);
}
.duimp-compare-wrap.compare-on{ display:block; }

.duimp-compare-head{
  padding: 12px 14px;
  background: #f9fafb;
  border-bottom: 1px solid #e5e7eb;
  display:flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.duimp-compare-title{
  font-weight: 900;
  color: #111827;
}
.duimp-compare-actions{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
}

.duimp-compare-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
}
@media (max-width: 980px){
  .duimp-compare-grid{ grid-template-columns: 1fr; }
}

.duimp-compare-col{
  border-right: 1px solid #e5e7eb;
  padding: 12px;
  min-height: 60vh;
}
.duimp-compare-col:last-child{ border-right: none; }

/* =========================
   DUIMP – Refinos visuais finais
========================= */

/* Cabeçalho do processo */
.duimp-header{
  position: sticky;
  top: 0;
  z-index: 50;
}

.duimp-header-main{
  display: flex;
  flex-direction: column;
}

.duimp-sub{
  font-size: 13px;
  margin-top: 4px;
  color: #374151;
}

/* Barra de ações */
.duimp-header-actions{
  background: #f9fafb;
  padding: 8px;
  border-radius: 10px;
  border: 1px dashed #e5e7eb;
}

/* Extrato – blocos colapsáveis */
.duimp-section{
  background: #ffffff;
  border-radius: 12px;
  margin-bottom: 12px;
}

.duimp-section-title{
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.duimp-section-title::after{
  content: "▾";
  font-size: 16px;
  color: #6b7280;
}

.duimp-section.collapsed .duimp-section-body{
  display: none;
}

.duimp-section.collapsed .duimp-section-title::after{
  content: "▸";
}

/* Tabela de mercadorias */
.duimp-extrato-table th{
  position: sticky;
  top: 0;
  z-index: 2;
}

/* JSON / XML – deixar mais legível */
.duimp-jsonBox,
.duimp-xmlBox{
  background: #020617;
}

.duimp-jsonPre,
.duimp-xmlPre{
  font-family: Consolas, Monaco, monospace;
  font-size: 12px;
}

/* Botões */
.duimp-btn{
  font-weight: 800;
  letter-spacing: .01em;
}

/* Comparação */
.duimp-compare-col{
  background: #f8fafc;
}

/* Destaque número DUIMP */
.duimp-num{
  background: #eef2ff;
  padding: 2px 8px;
  border-radius: 999px;
}

/* ============================================================
   BEM PATRIMONIAL - OVERRIDES (sobrepõe CSS global da Functions)
   (colar no FINAL do FormatBaseNew.css)
============================================================ */

body.bp-page{
  font-family: Arial, sans-serif;
  background: #f3f4f6;
  margin: 0;
  padding: 0;
}

body.bp-page .ConteudoPadrao{
  max-width: 1200px;
  margin: 20px auto;
  background: #ffffff;
  padding: 20px 24px;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(15,23,42,0.12);
}

body.bp-page .TituloPadrao{
  margin-top: 0;
  font-size: 20px;
  color: #111827;
}

body.bp-page label{
  font-size: 13px;
  font-weight: 600;
  color: #374151;
}

body.bp-page table{
  border-collapse: collapse;
  width: 100%;
  font-size: 12px;
}

body.bp-page th, body.bp-page td{
  border: 1px solid #e5e7eb;
  padding: 4px 6px;
}

body.bp-page th{
  background: #f3f4f6;
  text-align: left;
  font-weight: 600;
}

/* Dropdown responsavel */
body.bp-page .bp-drop{
  position: relative;
}
body.bp-page .bp-dropBox{
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin-top: 4px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  background: #fff;
  max-height: 240px;
  overflow: auto;
  z-index: 9999;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.18);
  display: none;
}
body.bp-page .bp-dropBox.open{ display:block; }

body.bp-page .bp-dropItem{
  padding: 8px 10px;
  font-size: 13px;
  border-bottom: 1px solid #f3f4f6;
  cursor: pointer;
  color: #111827;
}
body.bp-page .bp-dropItem:hover{ background: #f3f4f6; }
body.bp-page .bp-dropItem:last-child{ border-bottom:none; }

body.bp-page .bp-muted{ color:#6b7280; font-size:12px; }


/* =========================================================
   DUIMP – Importar JSON / Listagem / Ações (ANTI-ESTOURO)
   Usado em DuimpImportar.php
========================================================= */

/* Card não pode estourar a page */
.duimp-card {
  overflow: hidden;
}

/* Wrapper da tabela com scroll horizontal */
.duimp-tableWrap {
  width: 100%;
  overflow-x: auto;
}

/* Tabela DUIMP */
.duimp-table {
  width: 100%;
  min-width: 860px;              /* evita esmagar colunas */
  table-layout: fixed;
  border-collapse: collapse;
  font-size: 12px;
}

.duimp-table th,
.duimp-table td {
  border: 1px solid #e5e7eb;
  padding: 6px 8px;
  vertical-align: top;
}

.duimp-table th {
  background: #f3f4f6;
  font-weight: 700;
}

/* Larguras controladas */
.duimp-col-arq   { width: 340px; }
.duimp-col-data  { width: 150px; }
.duimp-col-xml   { width: 90px; }
.duimp-col-acoes { width: 260px; }

/* Nome do arquivo quebra linha */
.duimp-col-arq code {
  display: block;
  white-space: normal;
  word-break: break-word;
}

/* Ações em coluna (não empurra a tabela) */
.duimp-actions {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Botões ocupam a largura da coluna */
.duimp-actions a,
.duimp-actions button,
.duimp-actions form {
  width: 100%;
}

/* Botões menores (harmoniza com FormatBaseNew) */
.duimp-actions a,
.duimp-actions button {
  padding: 6px 8px;
  border-radius: 6px;
  font-size: 12px;
  text-align: center;
}

/* Checkbox do excluir */
.duimp-del-check {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: #374151;
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  padding: 4px 8px;
  border-radius: 999px;
}

/* Badge XML */
.duimp-badge-ok {
  background: #ecfdf3;
  color: #166534;
  border: 1px solid #bbf7d0;
  border-radius: 999px;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 800;
}

.duimp-badge-no {
  background: #fff7ed;
  color: #9a3412;
  border: 1px solid #fdba74;
  border-radius: 999px;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 800;
}

/* Botão perigo (excluir) alinhado ao padrão */
.duimp-btn-danger {
  background: #dc2626;
  border: 1px solid #b91c1c;
  color: #fff;
  font-weight: 800;
}

.duimp-btn-danger:hover {
  filter: brightness(1.05);
}

/* =========================================================
   SISCOMEX DESIGN SYSTEM (baseado no FormatBaseNew.css)
   - use essas classes no módulo /Deptos/Imp/...
========================================================= */

/* ---------- TOKENS ---------- */
:root{
  --sx-bg: #f3f4f6;
  --sx-card: #ffffff;
  --sx-text: #111827;
  --sx-muted: #6b7280;
  --sx-border: #e5e7eb;

  --sx-primary: #2563eb;
  --sx-success: #10b981;
  --sx-warning: #f59e0b;
  --sx-danger:  #ef4444;
  --sx-dark:    #111827;
  --sx-teal:    #0f766e;
  --sx-purple:  #7c3aed;

  --sx-radius: 12px;
  --sx-shadow: 0 4px 12px rgba(15,23,42,.12);
}

/* ---------- LAYOUT ---------- */
.sx-page{
  max-width: 1280px;
  margin: 18px auto;
  background: var(--sx-card);
  padding: 18px 20px;
  border-radius: var(--sx-radius);
  box-shadow: var(--sx-shadow);
}

.sx-topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}

.sx-title{
  margin:0;
  font-size: 26px;
  color: var(--sx-text);
}

.sx-subtitle{
  margin: 4px 0 0 0;
  font-size: 12px;
  color: var(--sx-muted);
}

.sx-card{
  border:1px solid var(--sx-border);
  border-radius: var(--sx-radius);
  padding: 14px;
  margin: 12px 0;
  background: var(--sx-card);
}

.sx-row{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  align-items:center;
}

.sx-right{ margin-left:auto; }
.sx-muted{ color: var(--sx-muted); font-size: 12px; }
.sx-mono{ font-family: ui-monospace, Menlo, Consolas, "Liberation Mono", "Courier New", monospace; }

/* ---------- FORMS ---------- */
.sx-formgrid{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  align-items:flex-end;
}

.sx-field{
  display:flex;
  flex-direction:column;
  gap:6px;
  min-width: 220px;
  flex:1;
}

.sx-label{ font-size:12px; color: var(--sx-muted); font-weight:600; }

.sx-input, .sx-select{
  padding:10px 12px;
  border:1px solid #d1d5db;
  border-radius: 10px;
  width:100%;
  max-width:100%;
  box-sizing:border-box;
}

.sx-hint{
  font-size:12px;
  color: var(--sx-muted);
}

/* ---------- ALERTAS ---------- */
.sx-alert{
  border-radius: var(--sx-radius);
  padding: 10px 12px;
  margin: 10px 0;
  border:1px solid var(--sx-border);
}

.sx-ok{
  background:#ecfdf5;
  border-color: #10b981;
  color:#065f46;
}

.sx-err{
  background:#fef2f2;
  border-color:#ef4444;
  color:#7f1d1d;
}

/* ---------- PILLS (AÇÕES) ---------- */
.sx-pillbar{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
}

.sx-pillbar.center{ justify-content:center; }
.sx-pillbar.right{ justify-content:flex-end; }

.sx-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 10px 16px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  text-decoration:none;
  border:none;
  cursor:pointer;
  transition: .2s ease;
  white-space:nowrap;
}

.sx-pill:hover{ transform: translateY(-1px); opacity:.95; }

.sx-pill.primary{ background: var(--sx-primary); color:#fff; }
.sx-pill.success{ background: var(--sx-success); color:#fff; }
.sx-pill.warning{ background: var(--sx-warning); color:#111; }
.sx-pill.danger { background: var(--sx-danger);  color:#fff; }
.sx-pill.dark   { background: var(--sx-dark);    color:#fff; }
.sx-pill.teal   { background: var(--sx-teal);    color:#fff; }
.sx-pill.purple { background: var(--sx-purple);  color:#fff; }

/* badge/etiqueta */
.sx-badge{
  display:inline-flex;
  align-items:center;
  padding: 6px 12px;
  border-radius: 999px;
  font-size:12px;
  font-weight:700;
  background:#f3f4f6;
  border:1px solid var(--sx-border);
}

.sx-badge.ok{ background:#dcfce7; border-color:#86efac; color:#166534; }
.sx-badge.no{ background:#fff7ed; border-color:#fdba74; color:#9a3412; }

/* checkbox chip */
.sx-chip{
  display:inline-flex;
  gap:8px;
  align-items:center;
  padding: 6px 10px;
  border-radius: 999px;
  font-size:12px;
  font-weight:600;
  background:#f9fafb;
  border:1px solid var(--sx-border);
}

/* ---------- TABELAS ---------- */
.sx-tablewrap{
  width:100%;
  overflow-x:auto;
  -webkit-overflow-scrolling: touch;
  border-radius: 10px;
  border:1px solid var(--sx-border);
}

.sx-table{
  width:100%;
  min-width: 980px;
  border-collapse: collapse;
  background:#fff;
}

.sx-table th, .sx-table td{
  border-bottom:1px solid var(--sx-border);
  padding: 10px 8px;
  font-size: 13px;
  text-align:left;
  vertical-align: top;
}

.sx-table th{
  background:#f8fafc;
  font-size:12px;
  color:#0f172a;
}

.sx-actions{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  justify-content:flex-end;
}

.sx-toggle{
  padding: 8px 12px;
  border-radius: 999px;
  border:none;
  cursor:pointer;
  font-weight:700;
  font-size:12px;
  background: var(--sx-teal);
  color:#fff;
}

.sx-hidden{ display:none; }

/* ---------- JSON/PRE ---------- */
.sx-pre{
  max-width:100%;
  background:#0b1220;
  color:#e5e7eb;
  padding:12px;
  border-radius: var(--sx-radius);
  overflow:auto;
  margin:10px 0;
  white-space: pre-wrap;
  word-break: break-word;
  overflow-wrap: anywhere;
}

/* ---------- RESPONSIVO ---------- */
@media (max-width: 720px){
  .sx-page{ padding: 14px 14px; }
  .sx-title{ font-size: 18px; }
  .sx-pill{ width:100%; }
  .sx-actions{ justify-content:flex-start; }
}

.sx-hidden { display: none !important; }

/* ===== TV20 - complementos que o HTML já usa ===== */

.tv20-cards{
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 12px;
}
@media (max-width: 980px){
  .tv20-cards{ grid-template-columns: 1fr; }
}

.tv20-cardItem{
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 12px;
  background: #fff;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(15,23,42,0.06);
}
.tv20-cardItem:hover{ background:#f9fafb; }
.tv20-cardItem.active{
  outline: 2px solid #2563eb;
  border-color: #2563eb;
}

.tv20-cardTop{
  display:flex;
  justify-content: space-between;
  gap: 10px;
  align-items: flex-start;
}
.tv20-cardTitle{ font-weight: 900; color:#111827; }
.tv20-cardSub{ font-size: 12px; color:#6b7280; margin-top: 2px; }

.tv20-cardCols{
  margin-top: 8px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 6px 10px;
  font-size: 12px;
  color:#374151;
}
@media (max-width: 980px){
  .tv20-cardCols{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}

.tv20-chip{
  display:inline-flex;
  align-items:center;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  border: 1px solid #e5e7eb;
  background:#fff;
}
.tv20-chip.ok{ background:#ecfdf3; border-color:#bbf7d0; color:#166534; }
.tv20-chip.no{ background:#f3f4f6; border-color:#e5e7eb; color:#6b7280; }
.tv20-chip.warn{ background:#fffbeb; border-color:#fde68a; color:#b45309; }

.tv20-chipBar{
  margin-top: 10px;
  display:flex;
  gap: 8px;
  flex-wrap: wrap;
}

/* detalhe */
.tv20-detailWrap{
  margin-top: 14px;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  background:#fff;
  overflow:hidden;
  display:none;
}
.tv20-detailWrap.open{ display:block; }

.tv20-detailHead{
  padding: 12px 14px;
  display:flex;
  justify-content: space-between;
  align-items:center;
  gap:10px;
  background:#f9fafb;
  border-bottom: 1px solid #e5e7eb;
}
.tv20-detailActions{ display:flex; gap:8px; align-items:center; }

.tv20-detailBody{ padding: 12px 14px; }

.tv20-btnSmall{
  height: 34px;
  padding: 0 12px;
  border-radius: 10px;
  border: 1px solid #111827;
  background: #111827;
  color:#fff;
  font-weight: 800;
  cursor:pointer;
}
.tv20-btnSmall.sec{
  border-color:#4b5563;
  background:#4b5563;
}
.tv20-btnSmall:disabled{ opacity:.6; cursor:not-allowed; }

.tv20-tableWrap2{ width:100%; overflow:auto; border-radius: 10px; }
.tv20-table2{
  width:100%;
  border-collapse: collapse;
  font-size: 12px;
}
.tv20-table2 th, .tv20-table2 td{
  border: 1px solid #e5e7eb;
  padding: 6px 8px;
  white-space: nowrap;
}
.tv20-table2 th{ background:#f3f4f6; font-weight:900; }

/* =========================================================
   TC (Transferência Claro) — Drawer + tabela resumo
   (colar no FINAL do FormatBaseNew.css)
========================================================= */

.tc-page .page { max-width: 1450px; }

/* tabela mais “profissa” */
.tc-tablewrap{
  width:100%;
  overflow:auto;
  border-radius:10px;
  border:1px solid #e5e7eb;
  margin-top:12px;
}
.tc-table{
  width:100%;
  min-width: 1200px;
  border-collapse:collapse;
  font-size:12px;
  background:#fff;
}
.tc-table th,.tc-table td{
  border:1px solid #e5e7eb;
  padding:8px 10px;
  vertical-align:top;
}
.tc-table th{
  background:#f3f4f6;
  font-weight:900;
  position:sticky;
  top:0;
  z-index:2;
}
.tc-row{
  cursor:pointer;
}
.tc-row:hover{ background:#f9fafb; }
.tc-row.selected{
  background:#eef2ff !important;
  outline:2px solid #c7d2fe;
  outline-offset:-2px;
}

.tc-obsCell{
  white-space: normal !important;
  min-width: 340px;
  max-width: 520px;
  word-break: break-word;
  overflow-wrap: anywhere;
}

/* Drawer (painel lateral) */
.tc-drawer{
  position: fixed;
  top: 0;
  right: 0;
  height: 100vh;
  width: min(620px, 96vw);
  background: #ffffff;
  border-left: 1px solid #e5e7eb;
  box-shadow: -10px 0 30px rgba(0,0,0,0.15);
  transform: translateX(110%);
  transition: transform .18s ease;
  z-index: 9999;
  display: flex;
  flex-direction: column;
}
.tc-drawer.open{ transform: translateX(0); }

.tc-drawer-head{
  padding: 12px 14px;
  border-bottom: 1px solid #e5e7eb;
  background: #f9fafb;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.tc-drawer-title{ font-weight: 900; color:#111827; }
.tc-drawer-sub{ font-size:12px; color:#6b7280; margin-top:2px; }

.tc-drawer-close{
  padding: 8px 12px;
  border-radius: 10px;
  border: 1px solid #111827;
  background: #111827;
  color: #fff;
  cursor: pointer;
}

.tc-drawer-body{
  padding: 12px 14px;
  overflow: auto;
}

.tc-detailGrid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap:10px;
}
@media (max-width: 640px){
  .tc-detailGrid{ grid-template-columns: 1fr; }
}

.tc-kv{
  border:1px solid #e5e7eb;
  border-radius:12px;
  padding:10px 12px;
  background:#fff;
}
.tc-kv span{
  display:block;
  font-size:11px;
  color:#6b7280;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.02em;
  margin-bottom:6px;
}
.tc-kv b{ color:#111827; }

.tc-iframeWrap{
  margin-top:12px;
  border:1px solid #e5e7eb;
  border-radius:12px;
  overflow:hidden;
  background:#fff;
}
.tc-iframeBar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:10px 12px;
  background:#f3f4f6;
  flex-wrap: wrap; /* evita “estouro” */
}
.tc-iframeBar b{ color:#111827; }
.tc-iframeActions{
  display:flex;
  gap:8px;
  flex-wrap: wrap;
}
.tc-iframe{
  width:100%;
  height:520px;
  border:0;
  background:#fff;
}

/* backdrop pra clicar fora e fechar */
.tc-backdrop{
  position: fixed;
  inset: 0;
  background: rgba(17,24,39,0.35);
  display:none;
  z-index: 9998;
}
.tc-backdrop.open{ display:block; }


/* Grid de cards (vamos reutilizar tv20-cards já existente) */


        /* =========================================================
   RECEBIMENTO DE CARGA
========================================================= */

.rcv-page .page {
  max-width: 1450px;
}

.rcv-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.rcv-kpis {
  display: grid;
  grid-template-columns: repeat(5, minmax(180px, 1fr));
  gap: 10px;
  margin-top: 12px;
}

.rcv-kpi {
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 10px 12px;
  background: #f9fafb;
}

.rcv-kpi span {
  display: block;
  font-size: 11px;
  font-weight: 900;
  color: #6b7280;
  text-transform: uppercase;
  margin-bottom: 4px;
}

.rcv-kpi b {
  color: #111827;
  font-size: 20px;
}

.rcv-kpi small {
  display: block;
  margin-top: 4px;
}

.rcv-toptools {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: flex-end;
  margin: 12px 0;
}

.rcv-gridwrap {
  width: 100%;
  overflow: auto;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  background: #fff;
  margin-top: 12px;
}

.rcv-table {
  width: 100%;
  min-width: 1200px;
  border-collapse: collapse;
  font-size: 12px;
}

.rcv-table th,
.rcv-table td {
  border: 1px solid #e5e7eb;
  padding: 8px 10px;
  vertical-align: top;
}

.rcv-table th {
  background: #f3f4f6;
  font-weight: 900;
}

.rcv-inline-check {
  display: flex;
  align-items: center;
  justify-content: center;
}

.rcv-status {
  display: inline-flex;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 900;
  border: 1px solid #d1d5db;
  background: #f9fafb;
  color: #374151;
}

.rcv-status.s3 {
  background: #ecfdf3;
  border-color: #bbf7d0;
  color: #166534;
}

.rcv-status.s4 {
  background: #fff7ed;
  border-color: #fdba74;
  color: #9a3412;
}

.rcv-status.s5 {
  background: #eff6ff;
  border-color: #bfdbfe;
  color: #1d4ed8;
}

.rcv-detail-btn {
  cursor: pointer;
  font-weight: 700;
  color: #0f172a;
}

.rcv-detail-btn:hover {
  text-decoration: underline;
}

.rcv-detail-row td {
  background: #f8fafc;
  border-top: none;
}

.rcv-detail-box {
  display: grid;
  grid-template-columns: repeat(2, minmax(220px, 1fr));
  gap: 6px 16px;
  padding: 8px 4px;
  font-size: 12px;
  line-height: 1.4;
}

.rcv-detail-box div {
  word-break: break-word;
}

.rcv-highlight {
  background: #ecfeff !important;
  outline: 2px solid #67e8f9;
  outline-offset: -2px;
}

.rcv-chk-auto {
  accent-color: #166534;
}

.rcv-flow-hint {
  padding: 8px 10px;
  border: 1px dashed #d1d5db;
  border-radius: 8px;
  background: #f9fafb;
  color: #4b5563;
  font-size: 12px;
  margin-top: 8px;
}

@media (max-width: 1100px) {
  .rcv-kpis {
    grid-template-columns: repeat(2, minmax(180px, 1fr));
  }

  .rcv-detail-box {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .rcv-kpis {
    grid-template-columns: 1fr;
  }
}

/* =========================================================
   CORREIOS RASTREIO
========================================================= */

.page.crr-page{
  max-width: 1040px;
  width: min(1040px, calc(100vw - 320px));
  margin: 20px auto;
  position: relative;
  z-index: 1;
}

.crr-header{
  margin-bottom: 16px;
}

.crr-subtitle{
  color: #6b7280;
  font-size: 13px;
  margin-top: 4px;
}

.crr-tabs{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.crr-tab{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 16px;
  border-radius: 999px;
  background: #e5e7eb;
  color: #4b5563;
  text-decoration: none;
  font-size: 13px;
  font-weight: 700;
}

.crr-tab.active{
  background: #0f766e;
  color: #fff;
}

.crr-page .filtros-card{
  margin-bottom: 16px;
}

.crr-tablewrap{
  width: 100%;
  overflow: auto;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  background: #fff;
}

.crr-table{
  min-width: 1180px;
}

.crr-table th{
  position: sticky;
  top: 0;
  z-index: 2;
}

.crr-mini{
  font-size: 12px;
  color: #6b7280;
}

.crr-form-actions{
  margin-top: 16px;
}

@media (max-width: 1200px){
  .page.crr-page{
    width: calc(100vw - 48px);
    max-width: 1040px;
  }
}


/* =========================================================
   CORREIOS RASTREIO
========================================================= */

body .page.crr-page{
  max-width: 1040px !important;
  width: min(1040px, calc(100vw - 320px)) !important;
  margin: 20px auto !important;
  position: relative !important;
  z-index: 1 !important;
}

body .crr-header{
  margin-bottom: 16px !important;
}

body .crr-subtitle{
  color: #6b7280 !important;
  font-size: 13px !important;
  margin-top: 4px !important;
}

body .crr-tabs{
  display: flex !important;
  gap: 10px !important;
  flex-wrap: wrap !important;
  margin-bottom: 16px !important;
}

body .crr-tab{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 10px 16px !important;
  border-radius: 999px !important;
  background: #e5e7eb !important;
  color: #4b5563 !important;
  text-decoration: none !important;
  font-size: 13px !important;
  font-weight: 700 !important;
}

body .crr-tab.active{
  background: #0f766e !important;
  color: #fff !important;
}

body .crr-page .filtros-card{
  margin-bottom: 16px !important;
}

body .crr-campo-acao{
  min-width: 160px !important;
}

body .crr-actions-bar{
  margin-bottom: 14px !important;
  gap: 10px !important;
  flex-wrap: wrap !important;
}

body .crr-tablewrap{
  width: 100% !important;
  overflow: auto !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 8px !important;
  background: #fff !important;
}

body .crr-table{
  min-width: 980px !important;
}

body .crr-table th{
  position: sticky !important;
  top: 0 !important;
  z-index: 2 !important;
}

body .crr-row-main:hover{
  background: #f9fafb !important;
}

body .crr-row-detail{
  display: none !important;
  background: #f8fafc !important;
}

body .crr-row-detail.open{
  display: table-row !important;
}

body .crr-row-detail td{
  padding: 10px 12px !important;
}

body .crr-detail-grid{
  display: grid !important;
  grid-template-columns: repeat(2, minmax(220px, 1fr)) !important;
  gap: 8px 16px !important;
  font-size: 12px !important;
  color: #374151 !important;
}

body .crr-row-toggle{
  min-width: 84px !important;
}

body .crr-form-actions{
  margin-top: 16px !important;
}

@media (max-width: 1200px){
  body .page.crr-page{
    width: calc(100vw - 48px) !important;
    max-width: 1040px !important;
  }
}

@media (max-width: 720px){
  body .crr-detail-grid{
    grid-template-columns: 1fr !important;
  }

  body .crr-actions-bar{
    flex-direction: column !important;
    align-items: flex-start !important;
  }
}

/* =========================================================
   CADASTRO ORIGEM MERCADORIA TRIBUTARIA
========================================================= */

body.origmerc-page {
  font-family: Arial, sans-serif;
  background: #f3f4f6;
  margin: 0;
  padding: 0;
  color: #111827;
}

body.origmerc-page .wrap {
  max-width: 1450px;
  margin: 20px auto;
  background: #fff;
  padding: 20px 24px;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(15,23,42,0.12);
}

body.origmerc-page .head {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 16px;
}

body.origmerc-page .filters,
body.origmerc-page .tablewrap {
  background: #fff;
  padding: 14px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  margin-top: 8px;
}

body.origmerc-page .filters {
  background: #f9fafb;
}

body.origmerc-page .filters .grid {
  display: grid;
  grid-template-columns: 220px 280px 280px 240px auto;
  gap: 14px;
  align-items: start;
  padding-bottom: 22px;
}

body.origmerc-page .group {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

body.origmerc-page .group-filial {
  position: relative;
}

body.origmerc-page .group label {
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 4px;
  color: #374151;
}

body.origmerc-page .group input[type="text"],
body.origmerc-page .group select {
  padding: 8px;
  width: 100%;
  box-sizing: border-box;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  font-size: 13px;
  background: #fff;
  min-height: 40px;
}

body.origmerc-page .actions {
  display: flex;
  gap: 12px;
  align-items: center;
  align-self: start;
  margin-top: 29px;
}

body.origmerc-page .btn {
  padding: 8px 14px;
  border-radius: 4px;
  border: 1px solid #111827;
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  font-size: 13px;
}

body.origmerc-page .btn-primary {
  background: #2563eb;
  color: #fff;
  border-color: #2563eb;
  font-weight: 700;
}

body.origmerc-page .btn-secondary {
  background: #4b5563;
  color: #fff;
  border-color: #4b5563;
}

body.origmerc-page .btn-light {
  background: #fff;
  color: #111827;
  border-color: #d1d5db;
}

body.origmerc-page .msg.err,
body.origmerc-page .msg.ok {
  margin: 10px 0;
  padding: 10px;
  border-radius: 6px;
  border: 1px solid transparent;
}

body.origmerc-page .msg.err {
  background: #fdecea;
  color: #a12622;
  border-color: #f5c6cb;
}

body.origmerc-page .msg.ok {
  background: #e7f6eb;
  color: #256029;
  border-color: #b7dfc1;
}

body.origmerc-page .origmerc-hidden {
  display: none;
}

body.origmerc-page .tablewrap {
  overflow: auto;
}

body.origmerc-page table {
  width: 100%;
  min-width: 1230px;
  border-collapse: collapse;
  font-size: 12px;
}

body.origmerc-page th,
body.origmerc-page td {
  border: 1px solid #e5e7eb;
  padding: 6px 7px;
  font-size: 12px;
  vertical-align: middle;
}

body.origmerc-page th {
  background: #f3f4f6;
  text-align: left;
  white-space: nowrap;
  font-weight: 600;
}

body.origmerc-page tr:nth-child(even) {
  background: #f8fafc;
}

body.origmerc-page td.number,
body.origmerc-page th.number {
  text-align: center;
}

body.origmerc-page td.actions-cell {
  text-align: center;
}

body.origmerc-page .orig-null {
  background: #ffef8a;
  font-weight: bold;
}

body.origmerc-page .tag-yes,
body.origmerc-page .tag-no {
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 11px;
  display: inline-block;
}

body.origmerc-page .tag-yes {
  background: #f9d7da;
  color: #a12622;
}

body.origmerc-page .tag-no {
  background: #d7f9e2;
  color: #256029;
}

body.origmerc-page .th-link {
  color: #333;
  text-decoration: none;
  display: inline-block;
  padding-right: 4px;
}

body.origmerc-page .th-link.active {
  font-weight: bold;
}

body.origmerc-page .orig-select {
  width: 70px;
  min-width: 70px;
}

body.origmerc-page .row-actions {
  display: flex;
  gap: 4px;
  justify-content: center;
  align-items: center;
}

body.origmerc-page .ncm-cell {
  min-width: 210px;
}

body.origmerc-page .ncm-current {
  display: grid;
  grid-template-columns: repeat(3, minmax(52px,1fr));
  gap: 2px;
  margin-bottom: 2px;
}

body.origmerc-page .ncm-pill {
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  background: #fff;
  padding: 2px 3px;
  min-width: 0;
}

body.origmerc-page .ncm-pill span {
  display: block;
  font-size: 8px;
  color: #6b7280;
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

body.origmerc-page .ncm-pill strong {
  font-size: 8px;
  color: #111827;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.origmerc-page .ncm-searchline {
  display: grid;
  grid-template-columns: minmax(88px, 1fr) 34px 34px;
  gap: 2px;
  align-items: center;
}

body.origmerc-page .ncm-searchline .js-ncm-input {
  min-width: 0;
  padding: 4px 5px;
}

body.origmerc-page .btn-ncm-save {
  min-width: 34px;
  width: 34px;
  min-height: 32px;
  padding: 3px 0;
  font-weight: 900;
  font-size: 14px;
  line-height: 1;
}

body.origmerc-page .btn-ncm-search {
  min-width: 34px;
  width: 34px;
  min-height: 32px;
  padding: 3px 0;
  font-weight: 900;
  letter-spacing: 0;
  font-size: 12px;
  line-height: 1;
}

body.origmerc-page th:nth-child(1),
body.origmerc-page td:nth-child(1) {
  width: 82px;
}

body.origmerc-page th:nth-child(2),
body.origmerc-page td:nth-child(2) {
  width: 230px;
}

body.origmerc-page th:nth-child(3),
body.origmerc-page td:nth-child(3) {
  width: 165px;
}

body.origmerc-page th:nth-child(4),
body.origmerc-page td:nth-child(4) {
  width: 72px;
}

body.origmerc-page th:nth-child(5),
body.origmerc-page td:nth-child(5) {
  width: 290px;
}

body.origmerc-page th:nth-child(6),
body.origmerc-page td:nth-child(6) {
  width: 56px;
}

body.origmerc-page th:nth-child(7),
body.origmerc-page td:nth-child(7) {
  width: 108px;
}

body.origmerc-page th:nth-child(8),
body.origmerc-page td:nth-child(8) {
  width: 110px;
}

body.origmerc-page th:nth-child(9),
body.origmerc-page td:nth-child(9) {
  width: 118px;
}

body.origmerc-page td:nth-child(2),
body.origmerc-page td:nth-child(3) {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

body.origmerc-page .filial-picker-btn {
  min-height: 40px;
  justify-content: space-between;
  width: 100%;
  background: #fff;
  color: #111827;
  border-color: #d1d5db;
}

body.origmerc-page .filial-summary {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 4px);
  margin-top: 0;
  font-size: 11px;
  color: #4b5563;
  min-height: 0;
  line-height: 1.1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

body.origmerc-page .overlay,
body.origmerc-page .modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(17,24,39,.45);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

body.origmerc-page .overlay.open,
body.origmerc-page .modal-backdrop.open {
  display: flex;
}

body.origmerc-page .panel {
  width: min(900px, 96vw);
  max-height: 88vh;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 20px 60px rgba(0,0,0,.25);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

body.origmerc-page .panel-header {
  padding: 12px 14px;
  border-bottom: 1px solid #e5e7eb;
  background: #f9fafb;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

body.origmerc-page .panel-title {
  font-weight: 800;
  color: #111827;
}

body.origmerc-page .panel-body {
  padding: 12px 14px;
  overflow: auto;
}

body.origmerc-page .panel-actions {
  padding: 12px 14px;
  border-top: 1px solid #e5e7eb;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

body.origmerc-page .picker-search-grid {
  display: grid;
  grid-template-columns: 180px 1fr auto;
  gap: 10px;
  align-items: end;
  margin-bottom: 12px;
}

body.origmerc-page .picker-checkline {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 12px;
  font-size: 12px;
  color: #374151;
}

body.origmerc-page .picker-list {
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  overflow: auto;
  max-height: 350px;
}

body.origmerc-page .picker-item {
  display: grid;
  grid-template-columns: 32px 60px 1fr;
  gap: 10px;
  padding: 8px 10px;
  border-bottom: 1px solid #f3f4f6;
  align-items: flex-start;
}

body.origmerc-page .picker-item:last-child {
  border-bottom: none;
}

body.origmerc-page .picker-item small {
  display: block;
  margin-top: 2px;
  color: #6b7280;
}

body.origmerc-page .ncm-picker-wrap {
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  overflow: auto;
  max-height: 380px;
}

body.origmerc-page .ncm-picker-table {
  width: 100%;
  min-width: 680px;
  border-collapse: collapse;
  font-size: 12px;
}

body.origmerc-page .ncm-picker-table th,
body.origmerc-page .ncm-picker-table td {
  border: 1px solid #e5e7eb;
  padding: 6px 8px;
}

body.origmerc-page .ncm-picker-table th {
  background: #f3f4f6;
  position: sticky;
  top: 0;
  font-weight: 700;
}

body.origmerc-page .ncm-picker-row {
  cursor: pointer;
}

body.origmerc-page .ncm-picker-row:hover {
  background: #eef2ff;
}

body.origmerc-page .ncm-picker-row.active {
  background: #dbeafe;
}

body.origmerc-page .modal {
  background: #fff;
  width: 96%;
  max-width: 680px;
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0,0,0,.2);
}

body.origmerc-page .modal header,
body.origmerc-page .modal footer {
  padding: 12px 14px;
}

body.origmerc-page .modal header {
  font-weight: bold;
  border-bottom: 1px solid #eee;
}

body.origmerc-page .modal footer {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  border-top: 1px solid #eee;
}

body.origmerc-page .modal .content {
  padding: 12px 14px;
}

body.origmerc-page .modal .row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin: 6px 0;
}

body.origmerc-page .modal .diff {
  margin-top: 8px;
  padding: 8px;
  background: #f8f9ff;
  border: 1px solid #e4e7ff;
  border-radius: 6px;
  font-family: monospace;
}

body.origmerc-page .replicate-box {
  margin-top: 8px;
  padding: 8px;
  border: 1px dashed #d7b649;
  border-radius: 6px;
  background: #fffdf4;
}

body.origmerc-page .replicate-actions {
  margin-top: 8px;
}

body.origmerc-page .replicate-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  margin-top: 8px;
}

body.origmerc-page .btn-mini {
  padding: 4px 8px;
  font-size: 12px;
}

body.origmerc-page .origmerc-empty {
  text-align: center;
  color: #666;
}

body.origmerc-page .origmerc-picker-empty {
  padding: 12px;
  color: #6b7280;
}

body.origmerc-page .saida-trib-modal {
  width: min(980px, 95vw);
  max-width: min(980px, 95vw);
}

body.origmerc-page .saida-trib-wrap {
  max-height: 52vh;
  width: 100%;
  max-width: 100%;
  overflow-y: auto;
  overflow-x: hidden !important;
}

body.origmerc-page .saida-trib-wrap .saida-trib-table {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100%;
  table-layout: fixed;
}

body.origmerc-page .saida-trib-wrap .saida-trib-table th,
body.origmerc-page .saida-trib-wrap .saida-trib-table td {
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
  vertical-align: top;
  padding: 5px 6px;
}

body.origmerc-page .saida-trib-wrap .saida-trib-table th:nth-child(1),
body.origmerc-page .saida-trib-wrap .saida-trib-table td:nth-child(1) {
  width: 72px;
}

body.origmerc-page .saida-trib-wrap .saida-trib-table th:nth-child(2),
body.origmerc-page .saida-trib-wrap .saida-trib-table td:nth-child(2) {
  width: 70px;
}

body.origmerc-page .saida-trib-wrap .saida-trib-table th:nth-child(3),
body.origmerc-page .saida-trib-wrap .saida-trib-table td:nth-child(3) {
  width: 28px;
}

body.origmerc-page .saida-trib-wrap .saida-trib-table th:nth-child(4),
body.origmerc-page .saida-trib-wrap .saida-trib-table td:nth-child(4) {
  width: 44px;
}

body.origmerc-page .saida-trib-wrap .saida-trib-table th:nth-child(6),
body.origmerc-page .saida-trib-wrap .saida-trib-table td:nth-child(6) {
  width: 56px;
}

body.origmerc-page .saida-trib-wrap .saida-trib-table th:nth-child(5),
body.origmerc-page .saida-trib-wrap .saida-trib-table td:nth-child(5) {
  width: calc(100% - 286px);
}

body.origmerc-page .saida-trib-filter-row.origmerc-hidden {
  display: none;
}

body.origmerc-page .saida-trib-filter-row th {
  padding: 4px 6px;
}

body.origmerc-page .saida-trib-filter-row input {
  width: 100%;
  box-sizing: border-box;
  min-width: 0;
}

body.origmerc-page .saida-trib-filter-cell.origmerc-hidden {
  display: none;
}

body.origmerc-page .saida-trib-head {
  cursor: pointer;
  user-select: none;
}

body.origmerc-page .saida-trib-head::after {
  content: attr(data-order-indicator);
  margin-left: 4px;
  font-size: 11px;
  color: #5f6b7a;
}

body.origmerc-page .saida-trib-wrap .saida-trib-table .origmerc-empty {
  text-align: center;
  white-space: normal;
}

@media (max-width: 1280px) {
  body.origmerc-page .filters .grid {
    grid-template-columns: repeat(2, minmax(260px, 1fr));
  }
}

@media (max-width: 820px) {
  body.origmerc-page .wrap {
    margin: 10px;
    padding: 14px;
  }

  body.origmerc-page .filters .grid,
  body.origmerc-page .picker-search-grid,
  body.origmerc-page .ncm-searchline {
    grid-template-columns: 1fr;
  }

  body.origmerc-page .actions {
    flex-direction: column;
  }

  body.origmerc-page .ncm-current {
    grid-template-columns: 1fr;
  }
}

/* =========================================================
   PEDIDOS STATUS NEW
========================================================= */

.ped-page { max-width: 1450px; }

.ped-hero {
  padding: 18px 20px;
  background: linear-gradient(180deg, #f8fafc 0%, #eef2ff 100%);
}

.ped-subtitle {
  color: #4b5563;
  font-size: 14px;
  margin-top: 6px;
}

.ped-toolbar {
  display: flex;
  gap: 12px;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 12px;
}

.ped-tabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: stretch;
}

.ped-tab {
  border: none;
  background: #192235;
  color: #fff;
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: none;
  position: relative;
}

.ped-tab.active {
  background: #0f6bff;
  color: #fff;
}

.ped-tabCount {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-width: 170px;
  min-height: 56px;
  text-align: left;
  padding: 10px 14px;
}

.ped-tabInfo {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  flex: 1;
}

.ped-tabTitle {
  display: block;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.1;
  white-space: nowrap;
}

.ped-tabMeta {
  display: block;
  margin-top: 3px;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.58);
  font-weight: 500;
}

.ped-tab.active .ped-tabMeta {
  color: rgba(255, 255, 255, 0.78);
}

.ped-tabCountNum {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  font-size: 24px;
  font-weight: 900;
  line-height: 1;
  flex-shrink: 0;
}

.ped-search {
  min-width: 260px;
  flex: 1;
  max-width: 380px;
}

.ped-search-top label {
  display: none;
}

.ped-search input {
  width: 100%;
  height: 38px;
  border-radius: 10px;
  padding-left: 12px;
}

.ped-toolbar-top {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 10px 12px;
}

.ped-filterRow {
  margin-top: 12px;
  margin-bottom: 0;
  align-items: end;
}

.ped-fieldLabel label {
  color: #4b5563;
  font-weight: 700;
}

.ped-inlineActions {
  margin-left: auto;
  align-items: end;
  padding-bottom: 1px;
}

.ped-grid {
  width: 100%;
  overflow: auto;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  background: #fff;
}

.ped-table {
  width: 100%;
  min-width: 1250px;
  border-collapse: collapse;
  font-size: 12px;
}

.ped-table th,
.ped-table td {
  padding: 10px 8px;
  border: 1px solid #e5e7eb;
  vertical-align: top;
}

.ped-table th {
  background: #ffffff;
  color: #374151;
  font-size: 12px;
  font-weight: 800;
  position: sticky;
  top: 0;
}

.ped-sortable {
  cursor: pointer;
  user-select: none;
}

.ped-sortable::after {
  content: '';
  margin-left: 6px;
}

.ped-sortable.active[data-sort-dir="asc"]::after {
  content: '▲';
  font-size: 10px;
  color: #2563eb;
}

.ped-sortable.active[data-sort-dir="desc"]::after {
  content: '▼';
  font-size: 10px;
  color: #2563eb;
}

.ped-order {
  color: #2563eb;
  font-weight: 800;
  font-size: 18px;
  text-decoration: none;
}

.ped-order:hover {
  text-decoration: underline;
}

.ped-orderLine {
  white-space: nowrap;
}

.ped-row {
  cursor: pointer;
}

.ped-row:nth-child(even) {
  background: #fbfdff;
}

.ped-row:hover {
  background: #f3f7ff;
}

.ped-row.selected {
  background: #e8f0ff;
  outline: 2px solid #93c5fd;
  outline-offset: -2px;
}

.ped-muted {
  color: #6b7280;
  font-size: 12px;
  margin-top: 2px;
}

.ped-pill {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  border: 1px solid #e5e7eb;
  white-space: nowrap;
}

.ped-pill.emitidos {
  background: #eff6ff;
  color: #1d4ed8;
  border-color: #bfdbfe;
}

.ped-pill.faturados {
  background: #ecfdf3;
  color: #166534;
  border-color: #bbf7d0;
}

.ped-pill.separacao {
  background: #fef3c7;
  color: #92400e;
  border-color: #fde68a;
}

.ped-pill.em_rota {
  background: #ede9fe;
  color: #5b21b6;
  border-color: #c4b5fd;
}

.ped-pill.retira {
  background: #e0f2fe;
  color: #0369a1;
  border-color: #bae6fd;
}

.ped-pill.entregues {
  background: #e2e8f0;
  color: #1e293b;
  border-color: #cbd5e1;
}

.ped-pill.problemas {
  background: #fee2e2;
  color: #b91c1c;
  border-color: #fecaca;
}

.ped-summary {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  font-size: 13px;
  color: #4b5563;
  margin-top: 10px;
}

.ped-summary strong {
  color: #111827;
}

.ped-flowCell {
  min-width: 250px;
}

.ped-flowHead {
  margin-bottom: 6px;
}

.ped-statusBadge {
  display: inline-flex;
  align-items: center;
  padding: 5px 10px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 800;
  border: 1px solid transparent;
  line-height: 1;
}

.ped-statusBadge.emitidos {
  background: #eff6ff;
  color: #1d4ed8;
  border-color: #bfdbfe;
}

.ped-statusBadge.faturados {
  background: #ecfdf3;
  color: #166534;
  border-color: #bbf7d0;
}

.ped-statusBadge.separacao {
  background: #fef3c7;
  color: #92400e;
  border-color: #fde68a;
}

.ped-statusBadge.em_rota {
  background: #ede9fe;
  color: #5b21b6;
  border-color: #c4b5fd;
}

.ped-statusBadge.retira {
  background: #e0f2fe;
  color: #0369a1;
  border-color: #bae6fd;
}

.ped-statusBadge.entregues {
  background: #e2e8f0;
  color: #1e293b;
  border-color: #cbd5e1;
}

.ped-statusBadge.problemas {
  background: #fee2e2;
  color: #b91c1c;
  border-color: #fecaca;
}

.ped-flowMain {
  font-weight: 800;
  color: #111827;
}

.ped-flowSub {
  color: #6b7280;
  font-size: 12px;
  margin-top: 3px;
  line-height: 1.3;
}

.ped-title {
  margin-bottom: 2px;
}

.ped-titleLine {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}

.ped-titleName {
  font-weight: 900;
}

.ped-topline {
  color: #4b5563;
  font-size: 13px;
  font-weight: 700;
  margin-top: 6px;
}

.ped-title {
  font-size: 22px;
}

@media (max-width: 720px) {
  .ped-toolbar {
    flex-direction: column;
    align-items: stretch;
  }

  .ped-tabCount {
    min-width: 100%;
    min-height: 52px;
  }

  .ped-inlineActions {
    margin-left: 0;
    width: 100%;
  }

  .ped-search {
    max-width: none;
  }
}

/*

Css - Carga tabela NCM

*/


/* =========================================================
   CARGA NCM - TABS / ESTRUTURA
========================================================= */

body.ncm-page .page {
  max-width: 1450px;
}

.ncm-topbar {
  margin-bottom: 14px;
}

.ncm-topbar h1 {
  margin-bottom: 6px;
}

.ncm-topbar-sub {
  color: #6b7280;
  font-size: 13px;
}

.ncm-tabs {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin: 14px 0 18px;
}

.ncm-tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 16px;
  border-radius: 999px;
  background: #e5e7eb;
  color: #374151;
  text-decoration: none;
  font-size: 13px;
  font-weight: 700;
  border: 1px solid #d1d5db;
}

.ncm-tab.active {
  background: #111827;
  color: #fff;
  border-color: #111827;
}

.ncm-pane {
  display: none;
}

.ncm-pane.active {
  display: block;
}

.ncm-section-card {
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  background: #fff;
  padding: 14px;
  margin-bottom: 14px;
}

.ncm-kpis {
  display: grid;
  grid-template-columns: repeat(6, minmax(160px, 1fr));
  gap: 10px;
  margin: 12px 0 14px;
}

.ncm-kpi {
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 10px 12px;
  background: #f9fafb;
}

.ncm-kpi span {
  display: block;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  color: #6b7280;
  margin-bottom: 4px;
}

.ncm-kpi b {
  font-size: 20px;
  color: #111827;
}

.ncm-report-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.ncm-report-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.ncm-grid-scroll {
  width: 100%;
  overflow: auto;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  background: #fff;
}

.ncm-grid-scroll table {
  width: 100%;
  min-width: 1180px;
  border-collapse: collapse;
  font-size: 12px;
}

.ncm-grid-scroll th,
.ncm-grid-scroll td {
  border: 1px solid #e5e7eb;
  padding: 6px 8px;
  vertical-align: top;
}

.ncm-grid-scroll th {
  background: #f3f4f6;
  font-weight: 700;
  position: sticky;
  top: 0;
  z-index: 2;
}

.ncm-pill {
  display: inline-flex;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 900;
  border: 1px solid #d1d5db;
  background: #fff;
}

.ncm-pill.ok {
  background: #dcfce7;
  border-color: #86efac;
  color: #166534;
}

.ncm-pill.warn {
  background: #ffedd5;
  border-color: #fdba74;
  color: #9a3412;
}

.ncm-pill.info {
  background: #eff6ff;
  border-color: #bfdbfe;
  color: #1d4ed8;
}

.ncm-pill.err {
  background: #fee2e2;
  border-color: #fca5a5;
  color: #b91c1c;
}

.ncm-alert {
  border-radius: 10px;
  padding: 10px 12px;
  margin-bottom: 12px;
  border: 1px solid #d1d5db;
  font-size: 13px;
}

.ncm-alert.warn {
  background: #fff7ed;
  border-color: #fdba74;
  color: #9a3412;
}

.ncm-alert.ok {
  background: #ecfdf3;
  border-color: #bbf7d0;
  color: #166534;
}

.ncm-inline-sub {
  color: #6b7280;
  font-size: 12px;
}

.ncm-toolbar-line {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.ncm-toolbar-left,
.ncm-toolbar-right {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}

/* =========================================================
   CARGA NCM - IMPORTAÇÃO / RELATÓRIO
========================================================= */
/* =========================================================
   CARGA NCM - TABS / ESTRUTURA
========================================================= */

body.ncm-page .page {
  max-width: 1450px;
}

.ncm-topbar {
  margin-bottom: 14px;
}

.ncm-topbar h1 {
  margin-bottom: 6px;
}

.ncm-topbar-sub {
  color: #6b7280;
  font-size: 13px;
}

.ncm-tabs {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin: 14px 0 18px;
}

.ncm-tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 16px;
  border-radius: 999px;
  background: #e5e7eb;
  color: #374151;
  text-decoration: none;
  font-size: 13px;
  font-weight: 700;
  border: 1px solid #d1d5db;
}

.ncm-tab.active {
  background: #111827;
  color: #fff;
  border-color: #111827;
}

.ncm-pane {
  display: none;
}

.ncm-pane.active {
  display: block;
}

.ncm-section-card {
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  background: #fff;
  padding: 14px;
  margin-bottom: 14px;
}

.ncm-kpis {
  display: grid;
  grid-template-columns: repeat(6, minmax(160px, 1fr));
  gap: 10px;
  margin: 12px 0 14px;
}

.ncm-kpi {
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 10px 12px;
  background: #f9fafb;
}

.ncm-kpi span {
  display: block;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  color: #6b7280;
  margin-bottom: 4px;
}

.ncm-kpi b {
  font-size: 20px;
  color: #111827;
}

.ncm-report-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.ncm-report-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.ncm-grid-scroll {
  width: 100%;
  overflow: auto;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  background: #fff;
}

.ncm-grid-scroll table {
  width: 100%;
  min-width: 1180px;
  border-collapse: collapse;
  font-size: 12px;
}

.ncm-grid-scroll th,
.ncm-grid-scroll td {
  border: 1px solid #e5e7eb;
  padding: 6px 8px;
  vertical-align: top;
}

.ncm-grid-scroll th {
  background: #f3f4f6;
  font-weight: 700;
  position: sticky;
  top: 0;
  z-index: 2;
}

.ncm-pill {
  display: inline-flex;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 900;
  border: 1px solid #d1d5db;
  background: #fff;
}

.ncm-pill.ok {
  background: #dcfce7;
  border-color: #86efac;
  color: #166534;
}

.ncm-pill.warn {
  background: #ffedd5;
  border-color: #fdba74;
  color: #9a3412;
}

.ncm-pill.info {
  background: #eff6ff;
  border-color: #bfdbfe;
  color: #1d4ed8;
}

.ncm-pill.err {
  background: #fee2e2;
  border-color: #fca5a5;
  color: #b91c1c;
}

.ncm-alert {
  border-radius: 10px;
  padding: 10px 12px;
  margin-bottom: 12px;
  border: 1px solid #d1d5db;
  font-size: 13px;
}

.ncm-alert.warn {
  background: #fff7ed;
  border-color: #fdba74;
  color: #9a3412;
}

.ncm-alert.ok {
  background: #ecfdf3;
  border-color: #bbf7d0;
  color: #166534;
}

.ncm-inline-sub {
  color: #6b7280;
  font-size: 12px;
}

.ncm-toolbar-line {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.ncm-toolbar-left,
.ncm-toolbar-right {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}

/* =========================================================
   CARGA NCM - IMPORTAÇÃO / RELATÓRIO
========================================================= */

.ncm-resumo-pill {
  border: 1px solid #111827;
  background: #111827;
  color: #fff;
  border-radius: 4px;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.ncm-resumo-pill.ativo {
  outline: 2px solid #93c5fd;
  outline-offset: 1px;
}

.ncm-preview-row {
  cursor: pointer;
}

.ncm-preview-row:hover {
  background: #f9fafb;
}

.ncm-preview-row.is-selected {
  outline: 2px solid #93c5fd;
  outline-offset: -2px;
  background: #eef6ff !important;
}

.ncm-hidden {
  display: none;
}

.ncm-detail-grid {
  display: grid;
  grid-template-columns: 180px 1fr 1fr;
  gap: 0;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  overflow: hidden;
}

.ncm-detail-head,
.ncm-detail-label,
.ncm-detail-grid > div {
  padding: 8px 10px;
  border-bottom: 1px solid #e5e7eb;
}

.ncm-detail-head {
  background: #f3f4f6;
  font-weight: 800;
  color: #111827;
}

.ncm-detail-label {
  background: #f9fafb;
  font-weight: 700;
  color: #374151;
}

.ncm-detail-diff {
  background: #fff7ed;
  color: #9a3412;
  font-weight: 700;
}

.ncm-detail-meta {
  margin-top: 10px;
  font-size: 13px;
  color: #374151;
}

.no-print {
  display: flex;
}

/* =========================================================
   RESPONSIVO
========================================================= */

@media (max-width: 1200px) {
  .ncm-kpis {
    grid-template-columns: repeat(2, minmax(160px, 1fr));
  }
}

@media (max-width: 900px) {
  .ncm-detail-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .ncm-kpis {
    grid-template-columns: 1fr;
  }
}

/* =========================================================
   IMPRESSÃO
========================================================= */

@media print {
  .no-print,
  #frmFiltroTipo,
  #frmCargaNcm,
  .msg {
    display: none !important;
  }

  body.ncm-page .page {
    max-width: 100%;
    box-shadow: none;
    margin: 0;
    padding: 0;
  }

  .ncm-section-card,
  .filtros-card,
  .ncm-grid-scroll {
    border: none;
    box-shadow: none;
    background: #fff;
  }
}

.ncm-loading-overlay {
  position: fixed;
  inset: 0;
  background: rgba(17, 24, 39, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.ncm-loading-box {
  background: #fff;
  border-radius: 12px;
  padding: 18px 24px;
  font-size: 15px;
  font-weight: 700;
  color: #111827;
  box-shadow: 0 10px 30px rgba(0,0,0,.18);
}

.ncm-hidden {
  display: none !important;
}


.ncm-loading-overlay {
  position: fixed;
  inset: 0;
  background: rgba(17, 24, 39, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.ncm-loading-box {
  background: #fff;
  border-radius: 12px;
  padding: 18px 24px;
  font-size: 15px;
  font-weight: 700;
  color: #111827;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .18);
}

.ncm-hidden {
  display: none !important;
}

.ncm-title-reset,
.ncm-subtitle-reset {
  margin: 0;
}


/* =========================================================
   RAMAIS — PADRÃO VISUAL DA INTRANET
========================================================= */

body.ramais-page {
  min-width: 0;
  overflow-x: hidden;
  background: #f4f6f9;
  color: #1f2937;
}

body.ramais-page .ramais-container {
  width: calc(100% - 36px);
  max-width: 1600px;
  margin: 18px auto;
  padding: 22px;

  border: 1px solid #dfe4ec;
  border-radius: 10px;

  background: #ffffff;
  box-shadow: 0 3px 14px rgba(15, 23, 42, 0.08);
}

/* Cabeçalho da página */

body.ramais-page .ramais-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;

  margin-bottom: 18px;
}

body.ramais-page .ramais-header h1 {
  margin: 0;

  color: #172033;

  font-size: 24px;
  font-weight: 800;
}

body.ramais-page .ramais-subtitulo {
  margin: 5px 0 0;

  color: #6b7280;
  font-size: 13px;
}

/* Pesquisa */

body.ramais-page .ramais-header-acoes {
  display: grid;
  grid-template-columns: minmax(300px, 420px) auto;
  gap: 6px 8px;
  align-items: end;
}

body.ramais-page .ramais-pesquisa-label {
  grid-column: 1 / -1;

  margin: 0;

  color: #334155;

  font-size: 12px;
  font-weight: 700;
}

body.ramais-page .ramais-pesquisa {
  width: 100%;
  height: 40px;
  padding: 8px 12px;

  border: 1px solid #cfd6df;
  border-radius: 6px;

  color: #1f2937;
  background: #ffffff;

  outline: none;

  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease;
}

body.ramais-page .ramais-pesquisa:focus {
  border-color: #4a70c9;
  box-shadow: 0 0 0 3px rgba(74, 112, 201, 0.14);
}

body.ramais-page .ramais-btn-limpar {
  min-height: 40px;
  margin: 0;
  padding: 0 18px;

  border-radius: 6px;

  background: #4b5563;
  color: #ffffff;

  font-weight: 700;
}

/* Local */

body.ramais-page .ramais-local {
  margin-bottom: 24px;
}

body.ramais-page .ramais-local-header {
  display: flex;
  align-items: center;
  gap: 10px;

  margin-bottom: 10px;
  padding: 10px 14px;

  border: 1px solid #ccd8f0;
  border-radius: 7px;

  background: #eef3ff;
}

body.ramais-page .ramais-local-codigo {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-width: 50px;
  height: 27px;
  padding: 0 11px;

  border-radius: 999px;

  background: #3f46b5;
  color: #ffffff;

  font-size: 12px;
  font-weight: 800;
}

body.ramais-page .ramais-local-nome {
  color: #273b83;

  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.05em;
}

/* Grid */

body.ramais-page .ramais-departamentos-grid {
  display: grid;
  grid-template-columns: repeat(
    auto-fit,
    minmax(340px, 1fr)
  );
  gap: 12px;
  align-items: start;
}

/* Card */

body.ramais-page .ramais-departamento-card {
  min-width: 0;
  overflow: hidden;

  border: 1px solid #d8dee8;
  border-radius: 8px;

  background: #ffffff;

  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.06);

  transition:
    transform 0.15s ease,
    box-shadow 0.15s ease,
    border-color 0.15s ease;
}

body.ramais-page .ramais-departamento-card:hover {
  transform: translateY(-2px);

  border-color: #9fb4db;

  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.12);
}

body.ramais-page .ramais-departamento-card[hidden],
body.ramais-page .ramais-local[hidden] {
  display: none !important;
}

/* Cabeçalho do card */

body.ramais-page .ramais-departamento-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;

  min-height: 52px;
  padding: 10px 12px;

  border-bottom: 1px solid #d8dee8;

  background: #f3f6fa;
}

body.ramais-page .ramais-departamento-titulo {
  min-width: 0;

  color: #111827;

  font-size: 14px;
  font-weight: 800;

  overflow-wrap: anywhere;
}

body.ramais-page .ramais-departamento-codigo {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-width: 46px;
  height: 27px;
  padding: 0 9px;

  border: 1px solid #c9d3f5;
  border-radius: 999px;

  background: #eef2ff;
  color: #3f51b5;

  font-size: 11px;
  font-weight: 800;
}

/* Linhas */

body.ramais-page .ramais-lista {
  display: flex;
  flex-direction: column;
}

body.ramais-page .ramais-item {
  position: relative;

  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;

  min-height: 48px;
  padding: 9px 11px;

  border-bottom: 1px solid #e4e8ef;

  background: #ffffff;

  transition:
    background-color 0.15s ease,
    color 0.15s ease,
    padding-left 0.15s ease,
    box-shadow 0.15s ease;
}

body.ramais-page .ramais-item:last-child {
  border-bottom: 0;
}

body.ramais-page .ramais-item:nth-child(even) {
  background: #f7f9fc;
}

/* Destaque ao passar o mouse */

body.ramais-page .ramais-item:hover {
  padding-left: 15px;

  background: #eaf2ff;

  box-shadow: inset 4px 0 0 #4a70c9;
}

body.ramais-page .ramais-item:hover .ramais-item-nome,
body.ramais-page .ramais-item:hover .ramais-item-telefone {
  color: #2352b8;
}

/* Linha principal */

body.ramais-page .ramais-item-principal {
  background: #edf3ff;
}

body.ramais-page .ramais-item-principal:nth-child(even) {
  background: #edf3ff;
}

body.ramais-page .ramais-item-principal:hover {
  background: #dfeaff;
}

/* Nome */

body.ramais-page .ramais-item-nome {
  min-width: 0;

  color: #4b5563;

  font-family:
    Consolas,
    Monaco,
    "Courier New",
    monospace;

  font-size: 13px;
  line-height: 1.35;

  overflow-wrap: anywhere;
}

body.ramais-page
.ramais-item-principal
.ramais-item-nome {
  color: #2e5fc5;
  font-weight: 800;
}

/* Telefone */

body.ramais-page .ramais-item-telefone {
  color: #26364d;

  font-family:
    Consolas,
    Monaco,
    "Courier New",
    monospace;

  font-size: 13px;
  font-weight: 700;

  text-decoration: none;
  white-space: nowrap;
}

body.ramais-page .ramais-item-telefone:hover {
  color: #174da8;
  text-decoration: underline;
}

body.ramais-page
.ramais-item-principal
.ramais-item-telefone {
  color: #2e5fc5;
}

/* Badge principal */

body.ramais-page .ramais-badge-principal {
  display: inline-flex;
  align-items: center;

  margin-left: 6px;
  padding: 2px 7px;

  border: 1px solid #b8cff7;
  border-radius: 999px;

  background: #dce9ff;
  color: #2458bd;

  font-family: Arial, sans-serif;

  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
}

/* Sites */

body.ramais-page .ramais-sites {
  margin-top: 28px;
  padding-top: 18px;

  border-top: 1px solid #dfe4eb;
}

body.ramais-page .ramais-sites-header h2 {
  margin: 0;

  color: #172033;

  font-size: 18px;
  font-weight: 800;
}

body.ramais-page .ramais-sites-header p {
  margin: 4px 0 0;

  color: #6b7280;
  font-size: 12px;
}

body.ramais-page .ramais-sites-grid {
  display: grid;
  grid-template-columns: repeat(
    auto-fit,
    minmax(230px, 1fr)
  );
  gap: 12px;
  margin-top: 12px;
}

body.ramais-page .ramais-site-card {
  overflow: hidden;

  border: 1px solid #d8dee8;
  border-radius: 8px;

  background: #ffffff;

  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.06);

  transition:
    transform 0.15s ease,
    box-shadow 0.15s ease;
}

body.ramais-page .ramais-site-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 15px rgba(15, 23, 42, 0.10);
}

body.ramais-page .ramais-site-card h3 {
  margin: 0;
  padding: 10px 12px;

  border-bottom: 1px solid #dde2e9;

  background: #f3f6fa;
  color: #172033;

  font-size: 14px;
  font-weight: 800;
}

body.ramais-page .ramais-site-servicos {
  padding: 6px 12px;
}

body.ramais-page .ramais-site-servico {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;

  padding: 7px 0;

  border-bottom: 1px solid #edf0f4;

  font-size: 12px;
}

body.ramais-page .ramais-site-servico:last-child {
  border-bottom: 0;
}

/* Responsividade */

@media (max-width: 900px) {
  body.ramais-page .ramais-container {
    width: calc(100% - 18px);
    margin: 9px auto;
    padding: 14px;
  }

  body.ramais-page .ramais-header {
    align-items: stretch;
    flex-direction: column;
  }

  body.ramais-page .ramais-header-acoes {
    grid-template-columns: 1fr auto;
    width: 100%;
  }

  body.ramais-page .ramais-departamentos-grid {
    grid-template-columns: repeat(
      auto-fit,
      minmax(290px, 1fr)
    );
  }
}

@media (max-width: 620px) {
  body.ramais-page .ramais-container {
    width: 100%;
    margin: 0;
    padding: 10px;

    border: 0;
    border-radius: 0;

    box-shadow: none;
  }

  body.ramais-page .ramais-header h1 {
    font-size: 21px;
  }

  body.ramais-page .ramais-header-acoes {
    grid-template-columns: 1fr;
  }

  body.ramais-page .ramais-pesquisa-label {
    grid-column: auto;
  }

  body.ramais-page .ramais-departamentos-grid {
    grid-template-columns: 1fr;
  }

  body.ramais-page .ramais-item {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  body.ramais-page .ramais-item-telefone {
    width: fit-content;
  }
}
/* =========================================================
   RAMAIS NEW — LEGADO MODERNIZADO
   Página: RamaisNew.php
========================================================= */

body.ramais-page {
  --ramais-page-bg: #e5e6fb;
  --ramais-container-bg: #f8f8ff;

  --ramais-local-bg: #c5c5fa;
  --ramais-local-border: #8e90b6;
  --ramais-local-text: #25225e;

  --ramais-card-bg: #ededfc;
  --ramais-card-border: #9b9db7;

  --ramais-header-bg: #d2bfbf;
  --ramais-header-hover: #c6adad;
  --ramais-header-border: #8d8585;

  --ramais-row-one: #e7e7f8;
  --ramais-row-two: #effcff;

  --ramais-main-bg: #d8dcfa;
  --ramais-main-hover: #bcc8f6;

  --ramais-normal-text: #686878;
  --ramais-main-text: #000000;

  --ramais-blue: #0000dd;
  --ramais-hover-bg: #cbd5fa;
  --ramais-hover-border: #3e4fc1;

  min-width: 0;
  margin: 0;
  padding: 0;
  overflow-x: hidden;

  color: #111111;
  background: var(--ramais-page-bg);
}

/* =========================================================
   CONTAINER
========================================================= */

body.ramais-page .ramais-container {
  width: calc(100% - 32px);
  max-width: 1800px;
  margin: 16px auto;
  padding: 18px;

  border: 1px solid #a4a6c2;
  border-radius: 8px;

  background: var(--ramais-container-bg);

  box-shadow:
    0 5px 16px rgba(42, 43, 90, 0.14);
}

/* =========================================================
   CABEÇALHO DA PÁGINA
========================================================= */

body.ramais-page .ramais-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;

  margin-bottom: 14px;
  padding: 0 2px 14px;

  border-bottom: 1px solid #b5b7d2;
}

body.ramais-page .ramais-header h1 {
  margin: 0;

  color: #171717;

  font-size: 24px;
  font-weight: 800;
}

body.ramais-page .ramais-subtitulo {
  margin: 5px 0 0;

  color: #646474;

  font-size: 12px;
}

/* =========================================================
   PESQUISA
========================================================= */

body.ramais-page .ramais-header-acoes {
  display: grid;
  grid-template-columns: minmax(300px, 440px) auto;
  gap: 5px 8px;
  align-items: end;
}

body.ramais-page .ramais-pesquisa-label {
  grid-column: 1 / -1;

  margin: 0;

  color: #29293a;

  font-size: 12px;
  font-weight: 700;
}

body.ramais-page .ramais-pesquisa {
  width: 100%;
  height: 40px;
  padding: 8px 12px;

  border: 1px solid #a4a6bf;
  border-radius: 6px;

  color: #111111;
  background: #ffffff;

  font-size: 13px;

  outline: none;

  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease;
}

body.ramais-page .ramais-pesquisa:hover {
  border-color: #7477a5;
}

body.ramais-page .ramais-pesquisa:focus {
  border-color: #4a4ebc;

  box-shadow:
    0 0 0 3px rgba(74, 78, 188, 0.2);
}

body.ramais-page .ramais-pesquisa::placeholder {
  color: #858595;
}

body.ramais-page .ramais-btn-limpar {
  min-height: 40px;
  margin: 0;
  padding: 0 18px;

  border: 1px solid #4a4b61;
  border-radius: 6px;

  color: #ffffff;
  background: #4a4b61;

  font-size: 12px;
  font-weight: 800;
}

body.ramais-page .ramais-btn-limpar:hover {
  border-color: #303142;
  background: #303142;
  filter: none;
}

/* =========================================================
   LOCAL
========================================================= */

body.ramais-page .ramais-local {
  margin-bottom: 20px;
}

body.ramais-page .ramais-local-header {
  display: flex;
  align-items: center;
  gap: 11px;

  margin-bottom: 10px;
  padding: 7px 12px;

  border: 1px solid var(--ramais-local-border);
  border-radius: 4px;

  color: var(--ramais-local-text);
  background: var(--ramais-local-bg);

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    0 2px 5px rgba(49, 50, 110, 0.1);
}

body.ramais-page .ramais-local-codigo {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-width: 52px;
  height: 25px;
  padding: 0 11px;

  border: 1px solid #5557a7;
  border-radius: 999px;

  color: #ffffff;
  background: #484ab9;

  font-family:
    Consolas,
    Monaco,
    "Courier New",
    monospace;

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

  box-shadow:
    0 2px 6px rgba(35, 37, 124, 0.28);
}

body.ramais-page .ramais-local-nome {
  color: var(--ramais-local-text);

  font-family:
    Consolas,
    Monaco,
    "Courier New",
    monospace;

  font-size: 15px;
  font-style: italic;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* =========================================================
   GRID
========================================================= */

body.ramais-page .ramais-departamentos-grid {
  display: grid;
  grid-template-columns: repeat(
    auto-fit,
    minmax(330px, 1fr)
  );
  gap: 12px;
  align-items: start;
}

/* =========================================================
   CARD DO DEPARTAMENTO
========================================================= */

body.ramais-page .ramais-departamento-card {
  position: relative;

  min-width: 0;
  overflow: hidden;

  border: 1px solid var(--ramais-card-border);
  border-radius: 6px;

  background: var(--ramais-card-bg);

  box-shadow:
    0 3px 9px rgba(49, 50, 95, 0.14);

  transition:
    transform 0.16s ease,
    box-shadow 0.16s ease,
    border-color 0.16s ease;
}

body.ramais-page .ramais-departamento-card:hover {
  z-index: 3;

  transform: translateY(-5px) scale(1.01);

  border-color: #4c50b8;

  box-shadow:
    0 15px 28px rgba(48, 51, 151, 0.28),
    0 5px 11px rgba(25, 26, 64, 0.16);
}

body.ramais-page .ramais-departamento-card[hidden],
body.ramais-page .ramais-local[hidden] {
  display: none !important;
}

/* =========================================================
   CABEÇALHO DO DEPARTAMENTO
========================================================= */

body.ramais-page .ramais-departamento-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;

  min-height: 43px;
  padding: 7px 10px;

  border-bottom: 1px solid var(--ramais-header-border);

  color: #171717;
  background: var(--ramais-header-bg);

  transition:
    background-color 0.16s ease,
    border-color 0.16s ease;
}

body.ramais-page
.ramais-departamento-card:hover
.ramais-departamento-header {
  border-bottom-color: #696a9d;
  background: var(--ramais-header-hover);
}

body.ramais-page .ramais-departamento-titulo {
  min-width: 0;

  color: #171717;

  font-size: 14px;
  font-style: italic;
  font-weight: 800;

  overflow-wrap: anywhere;
}

body.ramais-page .ramais-departamento-codigo {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  flex-shrink: 0;

  min-width: 52px;
  height: 25px;
  padding: 0 9px;

  border: 1px solid #8587ad;
  border-radius: 999px;

  color: #29296b;
  background: #e3e3f3;

  font-family:
    Consolas,
    Monaco,
    "Courier New",
    monospace;

  font-size: 11px;
  font-weight: 800;
}

/* =========================================================
   LISTA
========================================================= */

body.ramais-page .ramais-lista {
  display: flex;
  flex-direction: column;
}

body.ramais-page .ramais-item {
  position: relative;

  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;

  min-height: 40px;
  padding: 7px 10px;

  border-bottom: 1px solid #cfd0e3;

  color: var(--ramais-normal-text);
  background: var(--ramais-row-one);

  transition:
    padding-left 0.14s ease,
    background-color 0.14s ease,
    color 0.14s ease,
    box-shadow 0.14s ease;
}

body.ramais-page .ramais-item:nth-child(even) {
  background: var(--ramais-row-two);
}

body.ramais-page .ramais-item:last-child {
  border-bottom: 0;
}

/* Hover da linha */

body.ramais-page .ramais-item:hover {
  padding-left: 16px;

  color: #000000;
  background: var(--ramais-hover-bg);

  box-shadow:
    inset 6px 0 0 var(--ramais-hover-border),
    inset 0 1px 0 #a7b2e8,
    inset 0 -1px 0 #a7b2e8;
}

body.ramais-page .ramais-item:hover .ramais-item-nome,
body.ramais-page .ramais-item:hover .ramais-item-telefone {
  color: #000000;
  font-weight: 800;
}

/* =========================================================
   NOME E TELEFONE COMUNS
========================================================= */

body.ramais-page .ramais-item-nome {
  min-width: 0;

  color: var(--ramais-normal-text);

  font-family:
    Consolas,
    Monaco,
    "Courier New",
    monospace;

  font-size: 12px;
  font-weight: 400;
  line-height: 1.3;

  overflow-wrap: anywhere;
}

body.ramais-page .ramais-item-telefone {
  color: var(--ramais-normal-text);

  font-family:
    Consolas,
    Monaco,
    "Courier New",
    monospace;

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

  text-decoration: none;
  white-space: nowrap;
}

/* =========================================================
   ORDEM = 0
========================================================= */

body.ramais-page .ramais-item-principal {
  color: var(--ramais-main-text);
  background: var(--ramais-main-bg);

  box-shadow:
    inset 5px 0 0 var(--ramais-blue);
}

body.ramais-page .ramais-item-principal:nth-child(even) {
  background: var(--ramais-main-bg);
}

body.ramais-page
.ramais-item-principal
.ramais-item-nome,
body.ramais-page
.ramais-item-principal
.ramais-item-telefone {
  color: #000000;
  font-weight: 900;
}

body.ramais-page .ramais-item-principal:hover {
  color: #000000;
  background: var(--ramais-main-hover);

  box-shadow:
    inset 7px 0 0 #0000bb,
    inset 0 1px 0 #8f9cdf,
    inset 0 -1px 0 #8f9cdf;
}

body.ramais-page
.ramais-item-principal:hover
.ramais-item-nome,
body.ramais-page
.ramais-item-principal:hover
.ramais-item-telefone {
  color: #000000;
  font-weight: 900;
}

/* =========================================================
   VAGO
   Segurança visual caso passe pela consulta
========================================================= */

body.ramais-page .ramais-item-vago,
body.ramais-page .ramais-item-vago:nth-child(even) {
  background: #f0dada;
}

body.ramais-page
.ramais-item-vago
.ramais-item-nome,
body.ramais-page
.ramais-item-vago
.ramais-item-telefone {
  color: #8e2020;
  font-weight: 800;
}

body.ramais-page .ramais-item-vago:hover {
  background: #e8c4c4;

  box-shadow:
    inset 6px 0 0 #a12020,
    inset 0 1px 0 #d7a4a4,
    inset 0 -1px 0 #d7a4a4;
}

/* =========================================================
   SITES
========================================================= */

body.ramais-page .ramais-sites {
  margin-top: 24px;
  padding-top: 16px;

  border-top: 1px solid #aaaaca;
}

body.ramais-page .ramais-sites-header {
  margin-bottom: 10px;
}

body.ramais-page .ramais-sites-header h2 {
  margin: 0;

  color: #171717;

  font-size: 17px;
  font-style: italic;
  font-weight: 800;
}

body.ramais-page .ramais-sites-header p {
  margin: 4px 0 0;

  color: #666677;

  font-size: 11px;
}

body.ramais-page .ramais-sites-grid {
  display: grid;
  grid-template-columns: repeat(
    auto-fit,
    minmax(220px, 1fr)
  );
  gap: 11px;
}

body.ramais-page .ramais-site-card {
  overflow: hidden;

  border: 1px solid var(--ramais-card-border);
  border-radius: 6px;

  background: var(--ramais-card-bg);

  box-shadow:
    0 2px 7px rgba(49, 50, 95, 0.11);

  transition:
    transform 0.15s ease,
    box-shadow 0.15s ease,
    border-color 0.15s ease;
}

body.ramais-page .ramais-site-card:hover {
  transform: translateY(-3px);

  border-color: #5558bd;

  box-shadow:
    0 10px 20px rgba(48, 51, 151, 0.21);
}

body.ramais-page .ramais-site-card h3 {
  margin: 0;
  padding: 8px 10px;

  border-bottom: 1px solid var(--ramais-header-border);

  color: #171717;
  background: var(--ramais-header-bg);

  font-size: 13px;
  font-style: italic;
  font-weight: 800;
}

body.ramais-page .ramais-site-servicos {
  padding: 5px 10px;
}

body.ramais-page .ramais-site-servico {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;

  padding: 6px 0;

  border-bottom: 1px solid #d8d9ea;

  color: #555566;

  font-size: 11px;
}

body.ramais-page .ramais-site-servico:last-child {
  border-bottom: 0;
}

body.ramais-page .ramais-site-status-online,
body.ramais-page .ramais-site-status-offline,
body.ramais-page .ramais-site-status-indisponivel {
  display: inline-flex;
  align-items: center;
  gap: 6px;

  font-size: 10px;
  font-weight: 800;
}

body.ramais-page .ramais-site-status-online {
  color: #087322;
}

body.ramais-page .ramais-site-status-offline {
  color: #a40000;
}

body.ramais-page .ramais-site-status-indisponivel {
  color: #777777;
}

body.ramais-page .ramais-site-indicador {
  display: inline-block;

  width: 9px;
  height: 9px;

  border-radius: 50%;

  background: currentColor;

  box-shadow:
    0 0 0 3px rgba(70, 70, 100, 0.12);
}

/* =========================================================
   MENSAGENS
========================================================= */

body.ramais-page .ramais-vazio,
body.ramais-page .ramais-sem-resultado {
  padding: 22px;

  border: 1px dashed #9698b5;
  border-radius: 5px;

  color: #555566;
  background: #eeeeff;

  font-size: 12px;
  font-weight: 600;
  text-align: center;
}

body.ramais-page .ramais-sem-resultado[hidden] {
  display: none !important;
}

/* =========================================================
   RESPONSIVIDADE
========================================================= */

@media (max-width: 1250px) {
  body.ramais-page .ramais-departamentos-grid {
    grid-template-columns: repeat(
      auto-fit,
      minmax(300px, 1fr)
    );
  }
}

@media (max-width: 900px) {
  body.ramais-page .ramais-container {
    width: calc(100% - 18px);
    margin: 9px auto;
    padding: 13px;
  }

  body.ramais-page .ramais-header {
    align-items: stretch;
    flex-direction: column;
  }

  body.ramais-page .ramais-header-acoes {
    grid-template-columns: 1fr auto;
    width: 100%;
  }

  body.ramais-page .ramais-departamentos-grid {
    grid-template-columns: repeat(
      auto-fit,
      minmax(280px, 1fr)
    );
  }
}

@media (max-width: 620px) {
  body.ramais-page .ramais-container {
    width: 100%;
    margin: 0;
    padding: 9px;

    border-right: 0;
    border-left: 0;
    border-radius: 0;

    box-shadow: none;
  }

  body.ramais-page .ramais-header {
    gap: 13px;
    margin-bottom: 13px;
    padding-bottom: 12px;
  }

  body.ramais-page .ramais-header h1 {
    font-size: 20px;
  }

  body.ramais-page .ramais-header-acoes {
    grid-template-columns: 1fr;
  }

  body.ramais-page .ramais-pesquisa-label {
    grid-column: auto;
  }

  body.ramais-page .ramais-btn-limpar {
    width: 100%;
  }

  body.ramais-page .ramais-local-header {
    align-items: flex-start;
    padding: 7px 10px;
  }

  body.ramais-page .ramais-local-nome {
    padding-top: 4px;

    font-size: 12px;
    letter-spacing: 0.08em;
  }

  body.ramais-page .ramais-departamentos-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  body.ramais-page .ramais-departamento-header {
    min-height: 41px;
  }

  body.ramais-page .ramais-item {
    grid-template-columns: 1fr;
    gap: 3px;

    min-height: 50px;
    padding: 8px 10px;
  }

  body.ramais-page .ramais-item-telefone {
    width: fit-content;

    font-size: 12px;
  }
}

/* =========================================================
   RAMAIS — TEXTO DAS LINHAS EM PRETO
========================================================= */

body.ramais-page .ramais-item-nome,
body.ramais-page .ramais-item-telefone {
  color: #000000;
}

body.ramais-page .ramais-item-nome {
  font-weight: 500;
}

body.ramais-page .ramais-item-telefone {
  font-weight: 800;
}

/* ORDEM = 0 permanece com destaque mais forte */

body.ramais-page
.ramais-item-principal
.ramais-item-nome,
body.ramais-page
.ramais-item-principal
.ramais-item-telefone {
  color: #000000;
  font-weight: 900;
}

/* Mantém preto também no hover */

body.ramais-page .ramais-item:hover .ramais-item-nome,
body.ramais-page .ramais-item:hover .ramais-item-telefone {
  color: #000000;
}
/* =========================================================
   PRODUTOS COM FOTO — REFINAMENTOS VISUAIS
   Página: ProdutosComFoto.php
   Uso esperado no HTML:
   <body class="body_full prod-foto-page">

   Carregar APÓS o FormatBase.css:
   <link rel="stylesheet" href="/Css/FormatBase.css">
   <link rel="stylesheet" href="/Css/FormatBaseNew.css">
========================================================= */

body.prod-foto-page {
  margin: 0;
  padding: 0;
  min-width: 0;
  overflow-x: hidden;
  font-family: Arial, sans-serif;
  background: #f3f4f6;
  color: #111827;
}

/* =========================================================
   FORMULÁRIO / ÁREA PRINCIPAL
========================================================= */

body.prod-foto-page form {
  width: calc(100% - 32px);
  max-width: 1800px;
  margin: 16px auto;
}

body.prod-foto-page table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 2px;
  background: transparent;
  font-size: 12px;
}

body.prod-foto-page td,
body.prod-foto-page th {
  box-sizing: border-box;
}

/* =========================================================
   CABEÇALHOS PRINCIPAIS
========================================================= */

body.prod-foto-page .head {
  padding: 8px 12px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  background: #f8fafc;
  color: #1d4ed8;
  font-size: 13px;
  font-weight: 800;
  text-align: center;
}

body.prod-foto-page .headest {
  padding: 10px 12px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  background: #ffffff;
  color: #111827;
  font-size: 14px;
  font-weight: 800;
  text-align: center;
}

/* =========================================================
   CÉLULAS / BLOCOS
========================================================= */

body.prod-foto-page .centerbord {
  padding: 8px 10px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  background: #ffffff;
  color: #374151;
  vertical-align: middle;
  transition:
    border-color .15s ease,
    box-shadow .15s ease,
    background-color .15s ease;
}

body.prod-foto-page .centerbord:hover {
  border-color: #9ca3af;
}

body.prod-foto-page .tr_hed_fundo td {
  background: #f9fafb;
}

body.prod-foto-page .celulaproduto td {
  background: #ffffff;
}

/* =========================================================
   DADOS DO PRODUTO — COLUNA ESQUERDA
========================================================= */

body.prod-foto-page .celulaproduto > td:first-child {
  min-width: 230px;
  padding: 14px 16px;
  background: #f8fafc;
  line-height: 1.32;
  vertical-align: top;
}

body.prod-foto-page .celulaproduto > td:first-child label {
  color: #1d4ed8;
  font-size: 11px;
  font-weight: 800;
}

/* NCM fica no mesmo padrão dos demais dados do produto */
body.prod-foto-page .celulaproduto > td:first-child br + label {
  margin-top: 1px;
}

/* =========================================================
   LABELS E VALORES
========================================================= */

body.prod-foto-page label {
  color: #374151;
  font-size: 11px;
  font-weight: 800;
}

body.prod-foto-page .discription {
  display: inline-block;
  margin-bottom: 3px;
  color: #475569;
  font-size: 11px;
  font-weight: 800;
}

body.prod-foto-page .blue {
  color: #1d4ed8;
  font-size: 12px;
  font-weight: 600;
}

body.prod-foto-page .red {
  color: #b91c1c;
  font-weight: 800;
}

/* =========================================================
   FOTOS
========================================================= */

body.prod-foto-page .foto_prod {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 230px;
  margin: 6px auto;
  object-fit: contain;
  border-radius: 8px;
  background: #ffffff;
  transition:
    transform .16s ease,
    box-shadow .16s ease;
}

body.prod-foto-page .foto_prod:hover {
  transform: scale(1.025);
  box-shadow: 0 7px 18px rgba(15,23,42,.14);
}

/* =========================================================
   DADOS TÉCNICOS DAS FOTOS
========================================================= */

body.prod-foto-page .font_menu {
  color: #6b7280;
  font-size: 10px;
}

body.prod-foto-page .data {
  color: #6b7280;
  font-size: 9px;
  font-weight: 700;
}

body.prod-foto-page .datamin {
  color: #374151;
  font-size: 9px;
}

/* =========================================================
   STATUS DO PRODUTO
========================================================= */

body.prod-foto-page .titlered {
  display: inline-block;
  padding: 7px 14px;
  border: 1px solid #fecaca;
  border-radius: 999px;
  background: #fef2f2;
  color: #b91c1c;
  font-size: 15px;
  font-weight: 800;
}

/* suaviza o bloco em que o status aparece */
body.prod-foto-page .headest:has(.titlered) {
  background: #fffafa;
  border-color: #fecaca;
}

/* fallback visual para navegadores sem :has */
body.prod-foto-page .headest .titlered {
  margin: 2px 0;
}

/* =========================================================
   INFORMAÇÕES DE IMPORTAÇÃO
========================================================= */

body.prod-foto-page .head + .tr_hed_fundo .centerbord {
  padding: 11px 14px;
}

body.prod-foto-page .tr_hed_fundo .centerbord[colspan="36"] {
  text-align: left;
  line-height: 1.45;
}

body.prod-foto-page .tr_hed_fundo .centerbord[colspan="36"] .blue {
  color: #0f172a;
  font-size: 12px;
  font-weight: 600;
}

/* =========================================================
   INFORMAÇÕES TÉCNICAS
========================================================= */

body.prod-foto-page .tr_hed_fundo .centerbord {
  min-height: 46px;
  vertical-align: top;
}

body.prod-foto-page .tr_hed_fundo .centerbord:hover {
  background: #ffffff;
  box-shadow: 0 2px 8px rgba(15,23,42,.05);
}

/* =========================================================
   CAMPOS DE PESQUISA
========================================================= */

body.prod-foto-page input[type="text"],
body.prod-foto-page input[type="number"],
body.prod-foto-page input:not([type]),
body.prod-foto-page select {
  box-sizing: border-box;
  min-height: 36px;
  padding: 7px 10px;
  border: 1px solid #d1d5db;
  border-radius: 7px;
  background: #ffffff;
  color: #111827;
  font-size: 13px;
}

body.prod-foto-page input:focus,
body.prod-foto-page select:focus {
  outline: none;
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37,99,235,.12);
}

body.prod-foto-page .buton_header {
  min-height: 36px;
  border: 1px solid #d1d5db;
  border-radius: 7px;
  background: #ffffff;
  color: #111827;
}

/* =========================================================
   TELA DE PESQUISA INICIAL
========================================================= */

body.prod-foto-page .r50 {
  width: min(760px, calc(100% - 24px));
  max-width: 760px;
  margin: 18px auto;
  padding: 14px;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  background: #ffffff;
  box-shadow: 0 4px 12px rgba(15,23,42,.08);
}

body.prod-foto-page .r50 td {
  padding: 8px;
}

/* =========================================================
   BOTÕES
========================================================= */

body.prod-foto-page input[type="submit"] {
  padding: 9px 18px;
  border: 0;
  border-radius: 8px;
  background: #111827;
  color: #ffffff;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition:
    transform .15s ease,
    filter .15s ease;
}

body.prod-foto-page input[type="submit"]:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
}

/* =========================================================
   MANUAIS / DOWNLOADS
========================================================= */

body.prod-foto-page .logDownload {
  max-width: 42px;
  height: auto;
  margin-top: 6px;
  transition: transform .15s ease;
}

body.prod-foto-page .logDownload:hover {
  transform: scale(1.08);
}

/* =========================================================
   EMBALAGENS
========================================================= */

body.prod-foto-page .tr_transp td,
body.prod-foto-page .tr_zebra td {
  padding: 7px 8px;
  border: 1px solid #e5e7eb;
}

body.prod-foto-page .tr_transp td {
  background: #ffffff;
}

body.prod-foto-page .tr_zebra td {
  background: #f8fafc;
}

/* =========================================================
   RESPONSIVIDADE
========================================================= */

@media (max-width: 1250px) {
  body.prod-foto-page form {
    width: calc(100% - 20px);
    margin: 10px auto;
  }

  body.prod-foto-page .foto_prod {
    max-height: 200px;
  }

  body.prod-foto-page .celulaproduto > td:first-child {
    min-width: 210px;
  }
}

@media (max-width: 900px) {
  body.prod-foto-page form {
    width: calc(100% - 12px);
    margin: 6px auto;
    overflow-x: auto;
  }

  body.prod-foto-page table {
    min-width: 980px;
  }

  body.prod-foto-page .r50 {
    min-width: 0;
    width: calc(100% - 12px);
  }

  body.prod-foto-page .r50 table,
  body.prod-foto-page .r50 {
    overflow: visible;
  }
}

@media (max-width: 640px) {
  body.prod-foto-page form {
    width: 100%;
    margin: 0;
  }

  body.prod-foto-page .r50 {
    width: calc(100% - 12px);
    margin: 6px auto;
    padding: 10px;
  }
}