/* Modal de confirmação de exclusão (limpar mídias) com fundo diferenciado */
.modal{
  background:var(--default-modal-bg);
  border-radius:var(--default-modal-border-radius,30px);
  box-shadow: var(--default-modal-box-shadow);
  width:min(720px,90%);
  max-width:90%;
  padding:18px;
  box-sizing:border-box;
  color:#111;
  transform: translateY(8px) scale(0.98);
  opacity: 0;
  transition: transform 220ms cubic-bezier(.2,.9,.2,1), opacity 200ms ease;
}
/* Modal de confirmação de exclusão (limpar mídias) com fundo diferenciado - regra movida para o final para garantir prioridade */
#clearMediasModalOverlay .modal {
  background: var(--modal-bg);
}
body > div > div.side-inline-card > div:nth-child(1) {
  box-shadow: none !important;
}
body > div > div.side-inline-card > div:nth-child(1) {
  background: transparent !important;
}
/* Tornar transparentes os backgrounds dos dois primeiros filhos de .side-inline-card */
.side-inline-card > div:nth-child(1),
.side-inline-card > div:nth-child(2) {
  background: transparent !important;
}

/* Fazer o mapa ocupar a mesma altura do container .side-inline-card */
.side-inline-card {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

.side-inline-card > .side-card {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0; /* importante para permitir que filhos flex encolham corretamente */
}

.side-inline-card .side-map {
  flex: 1 1 auto;
  min-height: 0;
}

.side-inline-card .side-map .map-placeholder {
  height: 100%;
  min-height: 0;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1000000;
  background:
    radial-gradient(2000px 2000px at 18% 25%, #b9bdc08a 0%, #ffffffa8 65%),
    radial-gradient(2000px 2000px at 78% 22%, rgba(209, 209, 209, 0.678) 0%, #ffffff00 50%),
    radial-gradient(2000px 2000px at 28% 82%, #efefef6e 0%, #ffffff00 50%),
    radial-gradient(2000px 2000px at 82% 75%, #a8a8a8b4 0%, #ffffff00 50%),
    radial-gradient(2000px 2000px at 50% 50%, #a0a0a06e 0%, #ffffff00 30%);
  background-repeat: no-repeat;
  background-size: 200% 200%;
  animation: moveGradients 20s ease-in-out infinite alternate;
  opacity: 1;
  transition: opacity 360ms ease, background-color 360ms ease;
}

/* Dark theme layer: place dark gradients in ::after and animate only opacity
   so the browser crossfades between the light (::before) and dark (::after)
   layers instead of trying to morph gradient definitions. */
body::after{
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -999999;
  opacity: 0;
  transition: opacity 360ms ease;
  background:
    radial-gradient(1200px 1200px at 10% 20%, rgba(0, 5, 17, 0.88) 0%, rgba(12,16,22,0) 45%),
    radial-gradient(1900px 1900px at 80% 25%, rgba(0, 4, 14, 0.72) 0%, rgba(18,22,34,0) 45%),
    radial-gradient(1800px 1800px at 30% 80%, rgba(0, 3, 7, 0.953) 0%, rgba(14,18,26,0) 45%),
    radial-gradient(1700px 1700px at 70% 70%, rgba(3, 0, 15, 0.62) 0%, rgba(28,32,42,0) 45%),
    linear-gradient(180deg, #000 0%, #000 100%);
  background-repeat:no-repeat;
  background-size:200% 200%;
  animation: moveGradientsDark 30s linear infinite alternate;
}

/* Activate dark overlay by fading in ::after */
body.dark::after{ opacity: 1; }

/* Dark-mode text color adjustments (slightly darker light-gray for readability) */
body.dark {
  color: #d1d1d1; /* default body text in dark mode: light gray, not pure white */
}

/* Navbar text/icons */
body.dark nav, body.dark .top-navbar, body.dark .nav {
  color: #f5f5f5;
}
body.dark .nav .nav-item > .nav-link,
body.dark .nav .dash-label,
body.dark .nav .dash-btn,
body.dark .nav .dash-btn .dash-label {
  color: #f5f5f5 !important;
}

/* Navbar icons: usar versões "white" no modo noturno */
body.dark .top-navbar .dash-icon img{
  filter: brightness(0) saturate(100%) invert(1) !important;
  opacity: 1 !important;
}
body.dark .top-navbar .dash-icon svg,
body.dark .top-navbar .dash-icon svg *{
  fill: currentColor !important;
  stroke: currentColor !important;
}

/* Preservar cor das labels da navbar em todas as opções (não alterar no modo noturno) */
body.dark nav span.dash-label,
body.dark .nav span.dash-label,
body.dark .nav .dash-label,
body.dark .dash-label {
  color: var(--nav-link-color) !important; /* labels da navbar acompanham a cor clara dos dropdowns */
}

/* Preservar cor da fonte do botão 'Ordem de coleta' no modo noturno */
body.dark #ordemColetaBtn {
  color: #111 !important; /* não mudar o título no modo noturno */
}

/* Botões de prazo/status: fundo transparente no modo noturno */
body.dark .status-button,
body.dark #prazoColetaButton,
body.dark #prazoEntregaButton,
body.dark #statusButton {
  background: transparent !important;
  background-color: transparent !important;
}
body.dark .status-button:hover,
body.dark #prazoColetaButton:hover,
body.dark #prazoEntregaButton:hover,
body.dark #statusButton:hover {
  background: transparent !important;
  background-color: transparent !important;
}

/* Side card titles/subtitles and large section headings */
body.dark .side-title,
body.dark .side-subtitle,
body.dark h2,
body.dark .carousel-title,
body.dark .extra-space-section header h2 {
  color: #d0d0d0 !important; /* Títulos e subtítulos em modo escuro */
}

/* Specific lighter tone for section subtitles and smaller labels */
body.dark .side-subtitle,
body.dark .pref-label,
body.dark .status-label,
body.dark label,
body.dark p {
  color: #dcdcdc !important; /* Tom mais claro para subtítulos e rótulos menores */
}

/* Inputs and textarea text color and placeholder color */
body.dark input.control,
body.dark textarea.control,
body.dark .control,
body.dark .textarea-control {
  color: #efefef !important;
  background-color: rgba(134, 134, 134, 0.02);
  border-color: #7a7a7ac9;
}

/* Inputs genéricos (ex.: inputs inline em tabelas) */
body.dark input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
body.dark textarea,
body.dark select {
  color: #efefef !important;
}
body.dark input::placeholder,
body.dark textarea::placeholder,
body.dark .control::placeholder {
  color: #cfcfcf !important;
  opacity: 1;
}
 

/* Ensure buttons / small labels readable in dark mode (preserve carousel button colors) */
body.dark .input-icon,
body.dark .status-button,
body.dark .label-bottom {
  color: #f2f2f2 !important;
}

/* Make large titles even lighter (eg. carousel title) */
/* Make large titles even lighter (eg. carousel title) */
body.dark .carousel-title { color: #d0d0d0 !important; }

/* Exceptions: keep certain UI elements in their original (light) colors
   even when body.dark is active. These preserve contrast for labels/buttons
   that the user requested not to change. */
body.dark #quoteView h1,
body.dark #declaracaoBtn,
body.dark #propostaBtn {
  color: #111 !important;
  background-color: #f2f2f7 !important;
}

/* Finance/planilhas buttons that should not change: target known IDs and
   common link patterns (Faturamento, Despesas). */
body.dark #btn-faturamento,
body.dark a.label-bottom.clickable[href$="despesas.html"],
body.dark a.label-bottom.clickable[href$="faturamento.html"] {
  color: #111 !important;
  background-color: transparent !important;
}

/* Preserve color of transportadora active toggle in dark mode */
body.dark .tv-active-toggle {
  color: #1d1d1f !important;
}

/* Navbar: allow top-level nav labels to adopt dark-mode color but keep
   dropdown items (the menu entries) with their original/light colors. */
body.dark nav > ul > li > button.nav-link {
  color: #f5f5f5 !important; /* top-level labels adapt to dark mode */
}
body.dark nav .dropdown .dash-label,
body.dark nav .dropdown .dash-btn {
  color: var(--nav-link-color) !important; /* dropdown escuro -> texto claro */
}

/* Preserve dark color for quotes pager buttons even in dark mode */
body.dark #quotesPager > button {
  color: #1d1d1f !important;
  opacity: 1 !important;
}

/* Dark-mode: não escurecer links da navbar no hover */
body.dark .nav-link:hover{ color: var(--nav-link-color); }

/* Dark-mode: ensure `#valorObsIcon` shows the same inline image as in light mode.
  Do not hide the <img> or replace it with a background-image; keep original colors. */
/* Exibe a mesma imagem no modo claro, mas a torna branca no modo noturno via filtro */
body.dark #valorObsIcon img {
  display: block !important;
  /* transformar o ícone em branco */
  filter: brightness(0) saturate(100%) invert(1) !important;
  opacity: 1 !important;
  transform: none !important;
  height:20px !important;
  width: auto !important;
}
body.dark #valorObsIcon { background-image: none !important; background-repeat: no-repeat !important; background-position: center !important; background-size: 20px 20px !important; }

/* Tornar brancos os ícones de valorFrete e cubagem no modo noturno */
body.dark #valorFreteIcon > img,
body.dark #cubagemIcon > img {
  display: block !important;
  filter: brightness(0) saturate(100%) invert(1) !important;
  opacity: 1 !important;
  transform: none !important;
  height:20px !important;
  width: auto !important;
}
body.dark #valorFreteIcon,
body.dark #cubagemIcon {
  background-image: none !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 20px 20px !important;
}

/* Upload buttons (shared-upload / clear-storage) use white icons in dark mode */
body.dark .upload-icon-btn img { display: none !important; }
body.dark .upload-icon-btn.shared-upload {
  background-image: url('/customization/sf-symbols-online-master/white_icons/icloud.and.arrow.up.png');
  background-repeat: no-repeat; background-position: center; background-size: 20px 20px;
}
body.dark .upload-icon-btn.clear-storage-btn {
  background-image: url('/customization/sf-symbols-online-master/white_icons/bin.xmark.png');
  background-repeat: no-repeat; background-position: center; background-size: 20px 20px;
}

/* Mostrar o <img> do botão de upload no modal de visualização de motorista
   (por padrão imagens são ocultadas em modo escuro e substituídas por background-images). */
body.dark #viewMotoristaForm footer button.upload-icon-btn img {
  display: block !important;
  filter: none !important; /* manter exatamente a mesma imagem do modo claro */
  opacity: 1 !important;
}
body.dark #viewMotoristaForm footer button.upload-icon-btn {
  background-image: none !important; /* evitar sobreposição do background branco */
}

/* Upload button for cadastrarMotoristas modal moved to paginas/motoristas/motoristas.css */

/* Transportadora upload buttons (#uploadBtn1 / #uploadBtn2) should show white icons */
body.dark #uploadBtn1 img, body.dark #uploadBtn2 img { display:none !important; }
body.dark #uploadBtn1, body.dark #uploadBtn2 {
  background-image: url('/customization/sf-symbols-online-master/white_icons/icloud.and.arrow.up.png');
  background-repeat: no-repeat; background-position: center; background-size: 20px 20px;
}

/* Forçar versão branca do ícone do botão shared-upload específico em modo noturno */
body.dark > section:nth-child(16) > div > div > div > div:nth-child(2) > button.neomorphic-button.shared-upload.upload-icon-btn img {
  display: none !important;
}
body.dark > section:nth-child(16) > div > div > div > div:nth-child(2) > button.neomorphic-button.shared-upload.upload-icon-btn {
  background-image: url('/customization/sf-symbols-online-master/white_icons/icloud.and.arrow.up.png') !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 20px 20px !important;
  background-color: transparent !important;
}

/* Forçar versão branca do ícone do botão clear-storage específico em modo noturno */
body.dark > section:nth-child(16) > div > div > div > div:nth-child(2) > button.shared-upload.clear-storage-btn.upload-icon-btn img {
  display: none !important;
}
body.dark > section:nth-child(16) > div > div > div > div:nth-child(2) > button.shared-upload.clear-storage-btn.upload-icon-btn {
  background-image: url('/customization/sf-symbols-online-master/white_icons/bin.xmark.png') !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 20px 20px !important;
  background-color: transparent !important;
}

/* Forçar versão branca do ícone do botão shared-upload específico em modo noturno (section 18) */
body.dark > section:nth-child(18) > div > div > div > div:nth-child(2) > button.neomorphic-button.shared-upload.upload-icon-btn img {
  display: none !important;
}
body.dark > section:nth-child(18) > div > div > div > div:nth-child(2) > button.neomorphic-button.shared-upload.upload-icon-btn {
  background-image: url('/customization/sf-symbols-online-master/white_icons/icloud.and.arrow.up.png') !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 20px 20px !important;
  background-color: transparent !important;
}

/* Forçar versão branca do ícone clear-storage no mesmo bloco (section 18) */
body.dark > section:nth-child(18) > div > div > div > div:nth-child(2) > button.shared-upload.clear-storage-btn.upload-icon-btn img {
  display: none !important;
}
body.dark > section:nth-child(18) > div > div > div > div:nth-child(2) > button.shared-upload.clear-storage-btn.upload-icon-btn {
  background-image: url('/customization/sf-symbols-online-master/white_icons/bin.xmark.png') !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 20px 20px !important;
  background-color: transparent !important;
}

/* Header / operacional search input colors */
body.dark #operacionalSearch{
  color: #efefef !important;
  border-color: rgba(255,255,255,0.06) !important;
  background: rgba(255,255,255,0.02) !important;
}
body.dark #operacionalSearch::placeholder{ color: #cfcfcf !important; }

/* Texto digitado na barra 'Buscar cotação' em areaprincipal (modo noturno) */
body.dark #quotesSearch{
  color: whitesmoke !important;
  caret-color: whitesmoke !important;
}

/* Financeiro: keep the four main buttons (Faturamento, Despesas, Operacional, Definições)
   visually consistent in both modes. Target by href or id to avoid global overrides. */
body.dark #btn-faturamento,
body.dark a.label-bottom.clickable[href$="despesas.html"],
body.dark a.label-bottom.clickable[href$="tabelaoperacional.html"],
body.dark a.label-bottom.clickable[href$="definicoes.html"] {
  color: #111 !important;
  background-color: #f2f2f7 !important;
}

/* Chart labels / performance percentages and staff names — increase contrast in dark mode */
body.dark .chart .label,
body.dark .chart-percentage,
body.dark .performance-percentage,
body.dark .staff-name,
body.dark .subtitle {
  color: #e6e6e6 !important;
}

/* Financeiro: no gráfico de meta mensal, nomes dos funcionários e porcentagens em cinza claro */
body.dark #employeesChart .employee-meta .employee-name,
body.dark #employeesChart .employee-meta .employee-percent {
  color: #dcdcdc !important;
}

/* Aplicar mesma cor cinza claro aos triggers de estatísticas no financeiro (modo noturno) */
body.dark #trigger-modal-stats,
body.dark #trigger-modal-stats-2,
body.dark #trigger-modal-stats-3,
body.dark #trigger-modal-stats .employee-name,
body.dark #trigger-modal-stats-2 .employee-name,
body.dark #trigger-modal-stats-3 .employee-name,
body.dark #trigger-modal-stats .employee-percent,
body.dark #trigger-modal-stats-2 .employee-percent,
body.dark #trigger-modal-stats-3 .employee-percent {
  color: #dcdcdc !important;
}

/* Editar PDFs: inputs de aplicar cor devem permanecer claros; header buttons use white icons; preview 'Aa' devem ser claros; cláusulas menos intensas */
/* Inputs for hex values: transparent background and light text in dark mode */
body.dark #colorHexInput,
body.dark #colorHexInput2 {
  color: #efefef !important;
  background: transparent !important;
  border-color: rgba(255,255,255,0.08) !important;
  caret-color: #ffffff !important;
}
body.dark #colorHexInput::placeholder,
body.dark #colorHexInput2::placeholder {
  color: #cfcfcf !important;
  opacity: 1 !important;
}
body.dark .editar-proposta-header button img{ display:none !important; }
body.dark .editar-proposta-header button.editar-proposta-extra-btn { background-image: url('/customization/sf-symbols-online-master/white_icons/checkmark.circle.png'); background-repeat:no-repeat; background-position:center; background-size:20px 20px; }
/* Explicit selector for the header inside the editarPDFs card to ensure coverage */
body.dark main > section > div > div > div.card-transparent.active > header button img { display: none !important; }
body.dark .editar-proposta-header button.editar-proposta-remove-btn { background-image: none !important; background-repeat: initial; background-position: initial; background-size: initial; }
body.dark .editar-proposta-header button.editar-proposta-create-btn { background-image: none !important; background-repeat: initial; background-position: initial; background-size: initial; }
body.dark main > section > div > div > div.card-transparent.active > header button.editar-proposta-remove-btn { background-image: none !important; background-repeat: initial; background-position: initial; background-size: initial; }
body.dark main > section > div > div > div.card-transparent.active > header button.editar-proposta-create-btn { background-image: none !important; background-repeat: initial; background-position: initial; background-size: initial; }
body.dark main > section > div > div > div.card-transparent.active > header button.editar-proposta-create-btn.editar-proposta-extra-btn { background-image: none !important; background-repeat: initial; background-position: initial; background-size: initial; }

/* Remover borda dos botões do header (editarPDFs) em ambos os modos */
main > section > div > div > div.card-transparent.active > header button,
.editar-proposta-header button {
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
}

/* Media viewer: evita corte vertical de imagens grandes */
#mediaViewerModal,
#mediaViewerModal .modal-body,
#mediaViewerModal,
#mediaViewerModal .modal-body,
#mediaViewerModal .viewer-content {
  max-height: calc(100vh - 80px);
  overflow: hidden;
  box-sizing: border-box;
}

/* centralizar e permitir imagem ocupar mais largura disponível */
#mediaViewerModal .viewer-content {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 8px 12px; /* reduzir espaços laterais */
}

#mediaViewerModal .viewer-content img,
#mediaViewerModal img {
  display: block;
  width: auto;
  height: auto;
  max-width: calc(100vw - 100px); /* permite a imagem ficar mais larga, reduzindo margens */
  max-height: calc(100vh - 120px);
  object-fit: contain;
}

/* Remover borda dos botões de upload na página Transportadora em ambos os modos */
.bank-rows .upload-box .btn[id^="uploadBtn"] {
  border: none !important;
  box-shadow: none !important;
}

/* Ensure white-icon backgrounds never tile in dark mode (force no-repeat/size/position) */
body.dark #valorObsIcon,
body.dark .upload-icon-btn.shared-upload,
body.dark .upload-icon-btn.clear-storage-btn,
body.dark #uploadBtn1,
body.dark #uploadBtn2,
body.dark .editar-proposta-header button,
body.dark main > section > div > div > div.card-transparent.active > header button {
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 20px 20px !important;
  /* manter fundo e texto idênticos ao modo claro: branco com texto escuro */
  background-color: #ffffff !important;
  color: #111111 !important;
  border: 1px solid rgba(0,0,0,0.06) !important;
}

/* Restaurar hover/transition em modo noturno para os botões do header e botões similares */
body.dark .editar-proposta-header button:hover,
body.dark main > section > div > div > div.card-transparent.active > header button:hover {
  background-color: #e5e5ea !important;
  transition: background-color 200ms ease !important;
}

/* Aplicar a mesma animação de hover em modo noturno para os botões
   de Declaração de conteúdo, Ordem de coleta e Proposta */
body.dark #declaracaoBtn:hover,
body.dark #ordemColetaBtn:hover,
body.dark #propostaBtn:hover {
  background-color: #e5e5ea !important;
  transition: background-color 200ms ease !important;
}

/* Remove box-shadow from transportadora upload action buttons */
#uploadBtn1, #uploadBtn2, .media-action-btn#uploadBtn1, .media-action-btn#uploadBtn2 {
  box-shadow: none !important;
}
/* Restaurar hover para os botões 'Aplicar cor' caso sejam afetados pelo modo escuro */
body.dark #colorApplyBtn:hover,
body.dark #colorApplyBtn2:hover,
body.dark .prefs-layout .btn:hover {
  background-color: #e5e5ea !important;
  transition: background-color 200ms ease !important;
}

body.dark .font-preview-box .big,
body.dark .font-preview-box .label { color: #d1d1d1 !important; }

/* Clauses text: reduce brightness so it's not overly bright in dark mode */
body.dark .editar-proposta-display { color: #cfcfcf !important; }

/* Transportadora: inputs e placeholders devem ficar claros em modo escuro */
body.dark .prefs-layout input,
body.dark .prefs-layout .full-input {
  color: #efefef !important;
  background: rgba(255,255,255,0.02) !important;
  /* use the shared variable so containers/cards/dividers match input borders */
  border-color: var(--control-border) !important;
}
body.dark .prefs-layout input::placeholder,
body.dark .prefs-layout .full-input::placeholder {
  color: #cfcfcf !important;
  opacity: 1;
}

/* Modais em modo noturno: fundo preto e campos/placeholder mais claros */
body.dark .modal,
body.dark .modal-overlay .modal {
  background: #000 !important;
  color: #efefef !important;
  box-shadow: 0 30px 90px rgba(4,2,20,0.12) !important;
}
body.dark .modal input,
body.dark .modal textarea,
body.dark .modal select,
body.dark .modal .control,
body.dark .modal .textarea-control,
body.dark .modal .full-input {
  color: #efefef !important;
  background-color: transparent !important;
  border-color: rgba(255,255,255,0.08) !important;
  caret-color: #ffffff !important;
}
body.dark .modal input::placeholder,
body.dark .modal textarea::placeholder,
body.dark .modal .control::placeholder {
  color: #cfcfcf !important;
  opacity: 1 !important;
}

/* Também proteger inputs presentes em overlays/modals gerados dinamicamente */
body.dark .modal-overlay .modal input,
body.dark .modal-overlay .modal textarea,
body.dark .modal-overlay .modal select {
  color: #efefef !important;
  background-color: transparent !important;
  border-color: rgba(255,255,255,0.08) !important;
}

/* Preservar cor das labels dentro do painel de simulação (cartão) mesmo em modo noturno */
body.dark .sim-panel label,
body.dark #simulacao-cartao label,
body.dark .modal #simulacao-cartao label,
body.dark .modal .sim-panel label {
  color: #eef6ff !important;
}

/* Aplicar também para combinações específicas de theme-royal + dark */
body.theme-royal.dark .sim-panel label,
body.theme-royal.dark #simulacao-cartao label,
body.theme-royal.dark .modal #simulacao-cartao label,
body.theme-royal.dark .modal .sim-panel label {
  color: #eef6ff !important;
}

/* Não alterar a cor do texto do modal de remoção de motorista em modo noturno */
body.dark #removeDriverOverlay .modal-body p {
  color: #111 !important;
}

/* Manter a cor do parágrafo do modal 'Limpar mídias' inalterada no modo noturno */
body.dark #clearMediasModalOverlay .modal p,
body.dark #clearMediasModalOverlay > div > p {
  color: #111 !important;
}


@keyframes moveGradients {
  0%   { background-position: 0% 0%, 50% 0%, 0% 50%, 50% 50%, 0% 0%; }
  50%  { background-position: 20% 30%, 60% 20%, 30% 70%, 70% 60%, 40% 40%; }
  100% { background-position: 0% 50%, 80% 40%, 20% 90%, 60% 80%, 50% 50%; }
}

@keyframes moveGradientsDark {
  0%   { background-position: 0% 0%, 50% 0%, 0% 50%, 50% 50%, 0% 0%; }
  50%  { background-position: 10% 20%, 60% 10%, 30% 60%, 70% 50%, 40% 40%; }
  100% { background-position: 0% 50%, 80% 30%, 20% 80%, 60% 70%, 50% 50%; }
}

.motoristas-upload,
.upload-icon-btn {
  transition: transform 800ms ease, background 800ms ease, box-shadow 800ms ease;
}
.motoristas-upload:hover,
.upload-icon-btn:hover {
  transform: translateY(-2px);
}
.motoristas-upload:active,
.upload-icon-btn:active {
  transform: translateY(0);
}
.upload-icon-btn {
  width: 48px;
  height: 48px;
  min-width: 48px;
  min-height: 48px;
  max-width: 48px;
  max-height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: var(--card-bg, #f7f7f7);
  box-shadow: var(--card-box-shadow);
  border: none;
  cursor: pointer;
  overflow: hidden;
}
.upload-icon-btn {
  width: 48px !important;
  height: 48px !important;
  min-width: 48px !important;
  min-height: 48px !important;
  max-width: 48px !important;
  max-height: 48px !important;
  border-radius: 50% !important;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--motoristas-upload-bg, #f5f5f5);
  border: none;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  cursor: pointer;
  transition: transform 800ms ease, background 800ms ease, box-shadow 800ms ease;
  padding: 0 !important;
  margin: 0 !important;
  outline: none;
  overflow: hidden;
  box-sizing: border-box;
  padding: 0;
  background: var(--card-bg, #f7f7f7);
  box-shadow: var(--card-box-shadow);
  border: none;
  transition: transform 800ms ease, background 800ms ease, box-shadow 800ms ease;
  cursor: pointer;
}
.upload-icon-btn:hover {
  box-shadow: 0 0 0 3px var(--divider, #d4d4d4);
}
/* Tornar o botão de observações circular; remover background e box-shadow para exibir apenas a imagem */
#valorObsIcon{
  width:48px !important;
  height:48px !important;
  min-width:48px !important;
  min-height:48px !important;
  border-radius:50% !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  padding:0 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  overflow: visible !important;
}

/* Em modo escuro: posicionar 30px mais baixo e garantir fundo/box-shadow removidos */
body.dark .obs-input-wrap #valorObsIcon{ top:38px !important; background: transparent !important; box-shadow: none !important; }

/* Projeto: Site de Cotações - estilos principais */

:root{
  --card-bg: #ffffff5b; /* fundo dos cards e inputs */
  --modal-bg: rgb(238, 238, 238); /* fundo transparente leve dos overlays de modais com blur */
  --dropdown-bg: rgba(0, 0, 0, 0.62); /* cor sólida unificada para todos os dropdowns com transparência */
  --muted:#8a8a8a;
  --divider:#d4d4d4;
  --card-shadow: rgba(0, 0, 0, 0.096);
  --control-border: #cccccc;
  --form-font-size: 15.66px;
  /* Tamanho de fonte padrão para tabelas (pode ser ajustado globalmente) */
  --table-font-size: calc(var(--form-font-size) - 0.5pt);
  
  --card-box-shadow: -7px -7px 30px rgba(255, 255, 255, 0.521),
    6px 6px 18px rgba(0, 0, 0, 0.178),
    inset -2px -2px 25px rgba(255, 255, 255, 0.514),
    inset 6px 6px 12px rgba(87, 87, 87, 0.133);

  /* Default modal appearance variables (shared across modals) */
  --default-modal-bg: var(--modal-bg);
  --default-modal-box-shadow: var(--card-box-shadow);
  --default-modal-border-radius: 40px;

  /* Glass modal (semitransparente + blur) — usado por modais que optam por --dropdown-bg */
  --glass-modal-blur: 22px;
  --glass-modal-padding: 28px;
  /* Default overlay (backdrop) appearance */
  --default-overlay-bg: rgba(230, 230, 230, 0.25);
  --default-overlay-blur: 6px;
  /* Modal/open/close timing variables */
  --modal-overlay-duration: 220ms;
  --modal-overlay-easing: ease;
  --modal-modal-transform-duration: 220ms;
  --modal-modal-transform-easing: cubic-bezier(.2,.9,.2,1);
  --modal-modal-opacity-duration: 200ms;
  --modal-modal-opacity-easing: ease;
  
  /* Variáveis para listas reutilizáveis (itens de lista como motoristas e cotações) */
  --list-item-bg: linear-gradient(180deg,rgba(255, 255, 255, 0),#c0c0c00d);
  --list-item-border-radius: 20px;
  --list-item-box-shadow: var(--soft-shadow);
  --list-item-gap: 30px;

  /* List state variables */
  --list-active-border: 2px solid rgba(246, 38, 38, 0.1);
  --list-inactive-box-shadow: var(--card-box-shadow), inset -33px -33px 46px 0 #d4d4d4a3, inset 28px 28px 54px 0 #b7b7b70e;
  --list-inactive-filter: grayscale(1) contrast(0.8) brightness(0.5);
  --list-inactive-opacity: 0.8;
  --list-transition-duration: 700ms;

  /* Status pill variables */
  --status-active-bg: rgba(34,197,94,0.12);
  --status-active-color: #16a34a;
  --status-inactive-bg: rgba(239,68,68,0.08);
  --status-inactive-color: #ef4444;
  
  /* Scrollbar variables */
  --scrollbar-width: 6px;
  --scrollbar-height: 6px;
  --scrollbar-thumb-color: rgba(0,0,0,0.12);
  --scrollbar-track-color: transparent;
  --scrollbar-thumb-radius: 6px;
  --scrollbar-color-firefox: rgba(0,0,0,0.14) transparent;

  /* Header shared variables (para motoristas e área principal) */
  --header-bg: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(247,245,239,0.95));
  --header-padding: 18px 20px;
  --header-gap: 12px;
  --header-border-radius: 16px;
  --header-box-shadow: 0 6px 18px rgba(13, 13, 13, 0.06);
  --header-title-size: 20px;
  --header-subtitle-size: 13px;
  --header-control-bg: rgba(255,255,255,0.6);
  --header-control-border: 1px solid rgba(0,0,0,0.06);
  --header-title-color: #0f172a; /* cor do título na header (como em /motoristas) */
  --header-subtitle-color: var(--muted); /* cor do subtítulo na header */
  --header-title-weight: 700;
  --header-height: 100px;
  --nav-link-color: #1f2937; /* tom mais escuro para navbar e dropdowns */
  --dropdown-shadow: 0 14px 34px rgba(0, 10, 25, 0.55), 0 8px 18px rgba(0, 45, 95, 0.22);
  /* Search (header) variables */
  --header-search-bg: var(--card-bg);
  --header-search-padding: 10px 12px;
  --header-search-border-radius: 12px;
  --header-search-box-shadow: 0 4px 12px rgba(2,6,23,0.06);
  --header-search-min-width: 220px;
  --header-search-input-width: 140px;
  --header-search-icon-color: #9CA3AF;
  --dropdown-width: 320px; /* largura padrão para dropdowns */
  --list-content-width: max-content; /* largura livre dos conteúdos das listas (cresce conforme conteúdo) */
  --card-width: auto; /* largura do card (pode ser sobrescrita por páginas específicas) */
  --section-title-size: 56px; /* tamanho compartilhado para títulos de seção */
  /* soft shadow fallback used by several components */
  --soft-shadow: 0 4px 12px rgba(2,6,23,0.06);

  /* Variáveis específicas para botões de upload do modal de motoristas */
  --motoristas-upload-padding: 12px 40px;
  --motoristas-upload-font-size: 16px;
  --motoristas-upload-font-weight: 400;
  --motoristas-upload-color: #3a3a3a;
  --motoristas-upload-bg: rgba(232, 232, 232, 0.4);
  --motoristas-upload-backdrop-filter: blur(10px);
  --motoristas-upload-border: none;
  --motoristas-upload-border-radius: 50px;
  --motoristas-upload-transition: all 0.3s ease;
  --motoristas-upload-box-shadow: -6px -6px 16px rgba(255, 255, 255, 0.8), 6px 6px 16px rgba(0, 0, 0, 0.1), inset -2px -2px 8px rgba(255, 255, 255, 0.3), inset 2px 2px 8px rgba(0, 0, 0, 0.05);
  --motoristas-upload-margin: 50px 0 0 0; /* padrão (top right bottom left) */

  /* Compatibilidade: mapear variáveis legadas para os novos nomes (preserva aparência global) */
  --shared-upload-padding: var(--motoristas-upload-padding);
  --shared-upload-font-size: var(--motoristas-upload-font-size);
  --shared-upload-font-weight: var(--motoristas-upload-font-weight);
  --shared-upload-color: var(--motoristas-upload-color);
  --shared-upload-bg: var(--motoristas-upload-bg);
  --shared-upload-backdrop-filter: var(--motoristas-upload-backdrop-filter);
  --shared-upload-border: var(--motoristas-upload-border);
  --shared-upload-border-radius: var(--motoristas-upload-border-radius);
  --shared-upload-transition: var(--motoristas-upload-transition);
  --shared-upload-box-shadow: var(--motoristas-upload-box-shadow);
  --shared-upload-margin: var(--motoristas-upload-margin);
}

/* Ensure dark-mode variable overrides global defaults */
body.dark { 
  --nav-link-color: #fff;
  /* Borda de item ativo em modo noturno: tom mais claro (quase imperceptível) */
  --list-active-border: 2px solid rgba(255, 255, 255, 0.04);
}

/* Estado visual quando o upload estiver saturado (30 mídias) - aparência côncava/afundada e não clicável */
.motoristas-upload.upload-disabled{
  box-shadow: inset 6px 6px 16px rgba(0,0,0,0.25), inset -6px -6px 16px rgba(255,255,255,0.06), 0 2px 4px rgba(0,0,0,0.06);
  transform: translateY(1px);
  pointer-events: none;
  opacity: 0.86;
}

.motoristas-upload.upload-disabled:focus{ outline: none; }

button{
  font: sf-pro-text, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
}

/* Variável compartilhada para tamanho de títulos de seção */

/* Espaçamento global para headers dentro de <section> quando referenciados por body > section > header */
:root{ --section-header-margin-top: 300px; }

body > section > header {
  margin-top: var(--section-header-margin-top);
}

/* Espaçamento superior específico para estruturas aninhadas dentro de section */
body > section > div > div{
  margin-top: 200px;
}


/* Garantir que a header dentro de <main> tenha a mesma largura do header da rota de motoristas */
body > main > .header{
  max-width: 1180px;
  width: 100%;
  margin: 22px auto 18px;
  padding: 0 20px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--header-gap, 12px);
}

/* Header internals: títulos em coluna e controles em linha (como em /motoristas) */
body > main > .header .titles{display:flex;flex-direction:column}
body > main > .header .controls{display:flex;align-items:center;gap:var(--header-gap,12px)}
/* Garantir que a caixa de busca ocupe o espaço disponível e fique antes dos controles
  Forçar o botão de cadastrar a aparecer à direita da busca e evitar sobreposição
*/
body > main > .header .controls .search{ order: 1; flex: 1 1 auto; min-width: 0; }
body > main > .header .controls .register-driver-btn,
body > main > .header .controls button.register-driver-btn{ order: 2; margin-left: 12px; z-index: 4; position: relative; }
body > main > .header .search{min-width:220px}
/* Style the header search to match /motoristas design using variables */
body > main > .header .search{
  font-size: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--card-bg);
  padding: 12px;
  border-radius: 16px;
  box-shadow: var(--card-box-shadow);
  background: var(--header-search-bg);
  padding: var(--header-search-padding);
  border-radius: var(--header-search-border-radius);
  box-shadow: var(--header-search-box-shadow);
  min-width: var(--header-search-min-width);
  border: var(--header-control-border);
}

body > main > .header .search svg{
  stroke: var(--header-search-icon-color);
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  margin: 0;
  position: absolute; /* colocar fora do fluxo, à esquerda do input */
  left: -30px; /* desloca o ícone para fora da caixa */
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
}

body > main > .header .search input{
  border:0;
  background:transparent;
  outline:none;
  font-size:16px;
  width: auto;

/* Default deny: botão de cadastrar motoristas fica sempre oculto
  a menos que o body ganhe a classe permissiva `can-create-driver` */
.register-driver-btn { display: none !important; }
body.can-create-driver .register-driver-btn { display: inline-flex !important; }
  flex: 1 1 auto;
  padding-left: 0; /* remover padding interno à esquerda */
  margin-left: 0; /* garantir que não tenha margem esquerda indesejada */
}

/* Posicionar ícone visualmente fora (à esquerda) do input */
body > main > .header .search{ position: relative; overflow: visible; padding-left: 12px; }
body > main > .header .search input{ position: relative; z-index: 1; padding-left: 0; }

/* Ajuste de tamanho do botão neomórfico quando usado dentro da header/search */
/* Smaller neomorphic button when used near header search */
body > main > .header #extractBtn,
body > div.page-wrap > div.container > .header #extractBtn,
body > div > div > div.header #extractBtn{
  padding: 10px 16px;
  font-size:14px;
  border-radius: 12px;
  margin-top: 0;
  margin-right: 8px;
  color: var(--nav-link-color);
  background: #f2f2f7; /* match 'Despesas' background */
  border: none;
  cursor: pointer;
  transition: background-color .18s, color .18s;
}

/* Hover / darken effect like .label-bottom.clickable in faturamento */
body > main > .header #extractBtn:hover:not(:disabled),
body > div.page-wrap > div.container > .header #extractBtn:hover:not(:disabled),
body > div > div > div.header #extractBtn:hover:not(:disabled){
  background: #e5e5ea;
}

/* Dark mode variants to mirror faturamento button behavior */
body.dark > main > .header #extractBtn,
body.dark > div.page-wrap > div.container > .header #extractBtn,
body.dark > div > div > div.header #extractBtn{
  /* No modo noturno, o botão "Extrair" na área principal NÃO deve mudar cor do texto nem do background */
  background: #f2f2f7;
  color: #1f2937;
  border: none;
}
body.dark > main > .header #extractBtn:hover:not(:disabled),
body.dark > div.page-wrap > div.container > .header #extractBtn:hover:not(:disabled),
body.dark > div > div > div.header #extractBtn:hover:not(:disabled){
  background: #e5e5ea;
}

/* View-toggle (header) styles to match /motoristas */
body > main > .header .view-toggle,
body > div.page-wrap > div.container > .header .view-toggle,
body > div > div > div.header .view-toggle{
  display:flex;
  background:transparent;
  border-radius:12px;
  overflow:hidden;
  box-shadow: var(--soft-shadow);
}

body > main > .header .view-toggle button,
body > div.page-wrap > div.container > .header .view-toggle button,
body > div > div > div.header .view-toggle button{
  border:0;
  background:transparent;
  padding:10px 14px;
  font-weight:600;
  cursor:pointer;
  color:var(--muted);
}

body > main > .header .view-toggle button.active,
body > div.page-wrap > div.container > .header .view-toggle button.active,
body > div > div > div.header .view-toggle button.active{
  background: linear-gradient(180deg, rgba(255,255,255,0.9), var(--header-control-bg));
  color: var(--header-title-color);
}

/* Quotes-specific styles moved to paginas/areaprincipal/areaprincipal.css */
/* See paginas/areaprincipal/areaprincipal.css */

/* Garantir alinhamento à esquerda para a coluna de rota em todos os itens da lista de cotações */
#quotesList > div > div.route,
#quotesList .item .route{
  text-align: left !important;
}

/* (Regras de alinhamento forçado removidas para permitir alinhamento natural dos itens) */

/* Removida regra específica do primeiro item para evitar conflitos; usamos largura fixa global acima */

/* Aplicar largura fixa para o bloco de info (nth-child(2)) em todos os itens da lista */
#quotesList > div > div.meta > div > div:nth-child(2) {
  width: 200px !important;
  box-sizing: border-box;
  margin-right: 20px !important;
  text-align: left !important;
}

/* Garantir que o bloco de metadados do usuário (avatar-name > user-meta) fique alinhado à esquerda em toda a lista */
#quotesList > div > div.meta > div > div.avatar-name > div.user-meta,
#quotesList .item .meta .user-meta {
  text-align: left !important;
}

/* Removida regra específica do primeiro item — largura aplicada a todos os itens acima */


/* Make all buonny-style toggles use same orange as ActivateStaffToggle when checked */
.toggle-switch{ background: #E9E9EB; width:46px;height:26px;padding:3px;border-radius:999px;border:0;display:inline-flex;align-items:center;position:relative;cursor:pointer;justify-content:flex-start; }
.toggle-switch .toggle-thumb{ width:20px;height:20px;border-radius:50%;background:#FFF;display:block;transition:transform 0.28s ease;transform:translateX(0px); }
.toggle-switch[aria-checked="true"]{ background: #007AFF !important; }
.toggle-switch[aria-checked="true"] .toggle-thumb{ transform: translateX(20px); }
/* dark-mode: preserve contrast if needed */
body.dark .toggle-switch[aria-checked="true"]{ background: #007AFF !important; }

#mediaViewerModal > div.modal-divider {
  /* Força margem vertical e mantém 30px nas laterais (override inline styles) */
  margin: 150px 30px !important;
  height: 1px !important;
  border-top: 1px solid rgba(0,0,0,0.06) !important;
  box-sizing: border-box;
}

/* Aplicar margin-top para footers de páginas (não para footers dentro de modais).
   Removida `.sim-footer` desta lista para permitir estilo específico abaixo. */
body > footer, body > main > footer, .footer-apple-style, .table-footer-actions {
  margin-top: 20px !important;
}

/* Estilo do botão de compartilhar: combinar com o botão 'Declaração de conteúdo' */
.sim-share-btn,
.media-share-btn{
  background-color: #f2f2f7;
  border-radius: 14px;
  border: none;
  transition: background-color 0.2s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 12px;
}
.sim-share-btn:hover,
.media-share-btn:hover{
  background-color: #e5e5ea !important;
}
.sim-share-btn img,
.media-share-btn img{
  width: 28px;
  height: 28px;
  object-fit: contain;
}
.sim-share-btn span,
.media-share-btn span{
  font-size: 16px;
  font-weight: 400;
}

/* Status fica no final, sem encolher */
.list .item > .status, .list .item > div.status{ flex:0 0 auto; }

body > main > #quotesWrapper .list .item.inactive{
  transition: box-shadow var(--list-transition-duration) cubic-bezier(0.34, 1.56, 0.64, 1) !important;
    filter: var(--list-transition-duration) ease-in-out !important;
    opacity: var(--list-transition-duration) ease-in-out !important;
    border: var(--list-transition-duration) ease-in-out !important;
}

/* Em modo noturno, na área principal, itens inativos não devem ter box-shadow
   e devem receber o mesmo filtro cinza usado em /paginas/motoristas/motoristas.html */
body.dark > main > #quotesWrapper .list .item.inactive,
body.dark #quotesList .item.inactive{
  box-shadow: none !important;
  filter: grayscale(1) contrast(0.92) brightness(0.94) !important;
  opacity: 0.92 !important;
  background: var(--list-item-bg) !important;
  border: none !important;
}

/* Ajuste: usar altura automática com uma altura mínima maior para headers */
body > main > .header,
.container > .header,
body > main > div.header {
  min-height: var(--header-height);
  height: auto; /* permitir crescer conforme o conteúdo */
  display: flex;
  align-items: center;
}

/* Garantir que header dentro de page-wrap > container (ex: tabelafaturamento) tenha largura alinhada ao container */
body > div.page-wrap > div.container > .header,
body > div > div > div.header {
  max-width: 1180px;
  width: 100%;
  margin: 0 auto 18px;
  padding: 0;
  box-sizing: border-box;
  display:flex;
  align-items:center;
  justify-content:space-between;
}

/* Corrigir overflow de .titles dentro da header (centralizar verticalmente e remover margens) */
body > main > .header .titles{
  display:flex;
  flex-direction:column;
  justify-content:center;
  min-height:0;
  overflow:hidden;
  height: 100%;
  box-sizing: border-box;
  padding-top: 8px;
  padding-bottom: 8px;
}
body > main > .header .titles h1{
  margin:0;
  line-height:1;
  font-size: var(--header-title-size);
}


/* Ajusta o container direto dentro de .page-wrap: permitir crescimento conforme conteúdo
   (exclui .card para preservar seu box-shadow) */
body > div.page-wrap > div:not(.card) {
  width: auto; /* deixa o elemento crescer com o conteúdo */
  max-width: 100%;
  overflow: visible; /* permitir que o conteúdo transborde visivelmente quando necessário */
  box-shadow: none; /* removido conforme solicitado (não afeta .card) */
  background: transparent; /* remover background */
  border-radius: 50px; /* manter contorno arredondado */
}

/* Estilo global para todos os radios do sistema: sem borda, maior e com sombra inset */
input[type="radio"]{
  -webkit-appearance:none; appearance:none;
  width:15px; height:15px;
  border-radius:50%; border:0; padding:0; margin:0;
  box-sizing:border-box; background:transparent;
  /* visual base: círculo cinza claro com leve sombra interna */
  background: radial-gradient(circle at center, #f6f6f6 48%, transparent 49%), #efefef;
  box-shadow: inset 0 2px 6px rgba(0,0,0,0.06), 0 1px 3px rgba(0,0,0,0.04);
  transition: all 160ms ease-in-out; cursor:pointer; display:inline-block; vertical-align:middle;
}

/* Aplicar zoom leve na página (ajustável) */
@supports (zoom:1) {
  body { zoom: 0.95; }
}
@supports not (zoom:1) {
  /* Sem fallback transform: não aplicamos escala quando `zoom` não é suportado. */
}

/* SF Pro local fallback - coloque os arquivos .woff/.woff2 em /fonts se disponíveis */
@font-face{
  font-family: 'SF Pro';
  src: local('SF Pro'), local('SFPro'),
       url('fonts/SF-Pro.woff2') format('woff2'),
       url('fonts/SF-Pro.woff') format('woff');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* Global baseline: garantir que, por padrão, a tipografia use 16px em toda a aplicação */
/* Base font-size on root elements only; avoid forcing all elements with !important */
html, body {
  font-size: 16px;
}


html,body{
  min-height:100%;
}
body{
  margin:0;
  font-family: 'SF Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
  background: var(--bg);
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: cover;
  color: #111;
}

/* Aplicar SF Pro globalmente a todos os elementos (inclui pseudo-elementos)
   e garantir que controles de formulário herdem a fonte. */
html, body, *, *::before, *::after {
  font-family: 'SF Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

button, input, textarea, select, optgroup, option {
  font-family: inherit;
}

.page-wrap{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:40px;
}

.card { z-index: 2; }

.card{
  background: var(--card-bg);
  border-radius:40px; /* atualizado conforme solicitado */
  display:grid;
  grid-template-columns: 1fr;
  grid-auto-rows: 1fr;
  gap:24px;
  padding:28px;
  box-sizing:border-box;
  box-shadow: var(--card-box-shadow);
}

.card-transparent{
  border-radius:40px;
  width: auto;
  display:flex;
  flex-direction:column;
  border:1px solid var(--control-border);
  padding:20px;
  box-sizing:border-box;
  background:transparent;
}

/* Estilos para side-inline-card */
.side-inline-card {
  width: 460px;
  margin-left: 24px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 50px;
  box-shadow: none;
}

.side-inline-card .side-card {
  position: relative;
  background: var(--card-bg);
  border-radius: 40px;
  padding: 16px;
  box-shadow: var(--card-box-shadow);
  font-family: inherit;
  color: #111;
  width: 460px;
  height: auto;
  min-height: 460px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}

.side-inline-card > div:nth-child(1) {
  box-shadow: none;
}

.side-inline-card > div:nth-child(2) {
  box-shadow: none;
}

.side-inline-card .side-title {
  margin: 0 0 4px 0;
  font-size: 16.33px;
  color: #222;
  font-weight: 600;
  text-align: center;
}

.side-inline-card .side-subtitle {
  margin: 0;
  font-size: 15.66px;
  color: #777;
  line-height: 1.4;
  text-align: center;
}

#routeDistance {
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transition: opacity 220ms ease, max-height 220ms ease, margin 220ms ease;
  margin: 0;
  font-size: 18px;
}

#routeDistance.show {
  opacity: 1;
  max-height: 50px;
  margin-top: 8px;
}

.side-map {
  margin: 12px 0 14px 0;
  flex: 1;
  min-height: 0;
}

/* Aplicar sombra de card à primeira divisão dentro de .side-inline-card */
body > div > div.side-inline-card > div:nth-child(1) {
  box-shadow: var(--card-box-shadow);
}

.map-placeholder {
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, #f7f7f7, #efefef);
  border-radius: 40px;
  position: relative;
  overflow: hidden;
  z-index: 1;
  box-shadow: none;
}

/* Leaflet: remover outline/borda de foco ao clicar no mapa */
.map-placeholder:focus,
.map-placeholder:focus-visible,
.map-placeholder *:focus,
.map-placeholder *:focus-visible,
.leaflet-container,
.leaflet-container:focus,
.leaflet-container:focus-visible,
.leaflet-interactive:focus,
.leaflet-interactive:focus-visible{
  outline: none !important;
  box-shadow: none !important;
}

/* Pill de distância/tempo no rodapé do mapa */
.map-placeholder .map-route-pill{
  position: absolute;
  left: 50%;
  bottom: 14px;
  transform: translateX(-50%);
  z-index: 1200;
  background: #f2f2f7;
  color: #000;
  border-radius: 99px;
  border: 0;
  box-shadow: none;
  padding: 10px 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: calc(100% - 24px);
  pointer-events: none;
}

.map-placeholder .map-route-loader{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 1250;
  pointer-events: none;
  border: 0;
  outline: 0;
  box-shadow: none;
}

.map-placeholder .map-route-pill #routeDistance{
  margin: 0 !important;
  color: #000 !important;
  opacity: 1 !important;
  max-height: none !important;
  overflow: hidden !important;
  transition: none !important;
  font-size: 15.66px;
  line-height: 1.2;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.map-layer-toggle {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 42px;
  height: 42px;
  background: rgba(232, 232, 232, 0.4);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  box-shadow: 
    -6px -6px 16px rgba(255, 255, 255, 0.8),
    6px 6px 16px rgba(0, 0, 0, 0.1),
    inset -2px -2px 8px rgba(255, 255, 255, 0.3),
    inset 2px 2px 8px rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
  padding: 0;
  outline: none;
}

.map-layer-toggle:hover {
  transform: translateY(-2px);
  box-shadow: 
    -8px -8px 20px rgba(255, 255, 255, 0.9),
    8px 8px 20px rgba(0, 0, 0, 0.15),
    inset -2px -2px 8px rgba(255, 255, 255, 0.4),
    inset 2px 2px 8px rgba(0, 0, 0, 0.06);
}

.map-layer-toggle:active {
  transform: translateY(0);
  box-shadow: 
    -2px -2px 8px rgba(255, 255, 255, 0.7),
    2px 2px 8px rgba(0, 0, 0, 0.15),
    inset -4px -4px 12px rgba(255, 255, 255, 0.2),
    inset 4px 4px 12px rgba(0, 0, 0, 0.1);
}

.map-layer-toggle img {
  width: 20px;
  height: 20px;
  object-fit: contain;
  opacity: 0.7;
  filter: brightness(0) saturate(100%);
  transition: opacity 180ms ease;
}

.map-layer-toggle:hover img {
  opacity: 0.9;
}

/* Mapa (cotação): botão de camadas igual aos botões do formulário (ex.: 'Declaração de conteúdo') */
#toggleSatelliteBtn{
  background-color: #f2f2f7 !important;
  box-shadow: none !important;
  transform: none !important;
  transition: background-color 0.18s ease, opacity 180ms ease !important;
}
#toggleSatelliteBtn:hover{
  background-color: #e5e5ea !important;
  box-shadow: none !important;
  transform: none !important;
}
#toggleSatelliteBtn:active{
  background-color: #e5e5ea !important;
  box-shadow: none !important;
  transform: none !important;
}

/* Grade 2x2 removida (não utilizada) */

/* Variáveis compartilhadas para células de mídia */
:root{
  --media-cell-min-width: 210px;
  --media-cell-height: 260px;
  --media-cell-gap: 20px;
  --media-section-height: 320px;
  --media-section-padding: 30px;
  --default-modal-max-height: 800px;
}

/* Grade 5x4 usada em cotacao.html para a seção Mídias; essas células são maiores */
.grid-5x2{
  display: grid;
  grid-template-columns: repeat(5, minmax(var(--media-cell-min-width), 1fr));
  /* usar linhas implícitas para não reservar espaço fixo; criaremos rows conforme necessário */
  grid-auto-rows: var(--media-cell-height);
  align-content: start;
  row-gap: var(--media-cell-gap);
  column-gap: var(--media-cell-gap);
  width: auto;
  max-width: none;
  margin: 0 auto;
  box-sizing: border-box;
}

.grid-5x2 .neo-square{
  min-width: var(--media-cell-min-width);
  min-height: var(--media-cell-height);
  width: 100%;
  height: 100%;
  overflow: hidden;
  display: flex;
  align-items: stretch;
  justify-content: center;
  position: relative;
  z-index: 1;
}

.neo-square {
  width: 100%;
  max-width: none;
  background: transparent;
  border: 1px solid var(--control-border);
  border-radius: 24px;
  box-shadow: none;
  transition: all 0.5s ease-out;
  cursor: pointer;
}

.neo-square:hover {
  transform: scale(0.98);
  box-shadow: none;
}

.neo-square:active {
  transform: scale(0.96);
  box-shadow: none;
}

/* Gradientes acinzentados variados para células vazias na grid-5x2 (como em financeiro.html).
   Usamos :empty:not(.media-present) para que, quando definirmos um background via JS e
   adicionarmos a classe .media-present, os gradientes não sejam aplicados. */
.grid-5x2 .neo-square:empty:not(.media-present){
  background: transparent;
}

/* Forçar mídia dentro das células a cobrir sem distorcer */
.grid-5x2 .neo-square img.media-content,
.grid-5x2 .neo-square video.media-content{
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block;
}

/* Hover: escurecer imagem e mostrar botão de excluir */
.grid-5x2 .neo-square .media-content{
  transition: filter 240ms ease, transform 200ms ease, opacity 200ms ease;
}
.grid-5x2 .neo-square:hover .media-content{
  filter: brightness(0.8) saturate(0.95);
}
.grid-5x2 .neo-square .delete-media-btn{
  position: absolute;
  top: 10px;
  right: 10px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 0;
  background: #ffffff; /* match cadastrar modal upload button background */
  color: #333333; /* X contraste escuro */
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0; /* oculto por padrão */
  transform: scale(0.9);
  transition: opacity 180ms ease, transform 160ms ease;
  z-index: 10001; /* garantir sobreposição acima da mídia (10000) */
  pointer-events: none; /* evitar cliques quando oculto */
  font-size: 16px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.25);
}
.grid-5x2 .neo-square:hover .delete-media-btn{
  opacity: 1;
  transform: scale(1.05);
  pointer-events: auto;
}

/* Small tweak: ensure delete button contrasts on light modals */
.grid-5x2 .neo-square .delete-media-btn:focus{ outline: none; box-shadow: 0 0 0 3px rgba(0,0,0,0.12); }

.grid-5x2{
  grid-auto-rows: var(--media-cell-height);
}
.grid-5x2 .neo-square{
  height: 260px !important;
  min-height: 260px !important;
  max-height: 260px !important;
  flex: none !important;
  overflow: hidden !important;
}
.grid-5x2 .neo-square{
  position: relative;
}
.grid-5x2 .neo-square img.media-content, .grid-5x2 .neo-square video.media-content{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  max-width:none !important;
  max-height:none !important;
}

/* quando mídia é definida por background, remover gradiente */
.grid-5x2 .neo-square.media-present{ /* bring media cell above neighboring shadows */
  position: relative !important;
  z-index: 9999 !important;
}

/* Allow children to overlap visually when using z-index */
.grid-5x2{
  overflow: visible;
}

/* Media content (img/video) absolutely positioned to overlay inset/box-shadows */
.grid-5x2 .neo-square .media-content{
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  z-index: 10000 !important;
  border-radius: inherit !important;
  display: block !important;
}

/* Arquivos não-visuais (pdf/docx/etc) devem ficar dentro da célula sem expandi-la.
   Use um wrapper absoluto com quebra de linha e overflow para manter célula fixa. */
.grid-5x2 .neo-square .file-placeholder,
.grid-5x2 .neo-square p {
  position: absolute;
  top: 10px;
  left: 10px;
  right: 10px;
  bottom: 10px;
  box-sizing: border-box;
  overflow: auto;
  word-break: break-word;
  hyphens: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 8px;
  margin: 0;
  font-size: 16px;
  line-height: 1.2;
  color: var(--muted);
  background: transparent;
  z-index: 10000; /* acima do fundo, abaixo da mídia absoluta (media-content) */
}

/* Estrutura interna do placeholder: badge do tipo e nome do arquivo */
.grid-5x2 .neo-square .file-placeholder{ display:flex; flex-direction:column; align-items:center; justify-content:center; }
.grid-5x2 .neo-square .file-placeholder .file-badge{
  font-size: 12px;
  padding: 6px 10px;
  border-radius: 12px;
  background: #2b7be4;
  color: #fff;
  box-shadow: 0 4px 12px rgba(43,123,228,0.18);
  margin-bottom: 8px;
  text-transform: uppercase;
}
.grid-5x2 .neo-square .file-placeholder .file-name{
  font-size: 16px;
  color: #111;
  text-align:center;
  word-break: break-word;
  hyphens: auto;
}

/* Dark mode: tornar o nome do arquivo nas células de mídia claro para melhor legibilidade */
body.dark .grid-5x2 .neo-square.media-present .file-name,
body.dark .grid-5x2 .neo-square .file-placeholder .file-name {
  color: #ffffff !important;
}

/* Em dispositivos pequenos, reduzir fonte para evitar overflow visual */
@media (max-width: 600px){
  .grid-5x2 .neo-square .file-placeholder,
  .grid-5x2 .neo-square p { font-size: 13px; }
}

/* Upload modal styles */
.upload-progress{
  width:100%;
  background:#e6e6e6;
  height:14px;
  border-radius:8px;
  overflow:hidden;
}
.upload-progress-bar{
  width:0%;
  height:100%;
  background: linear-gradient(90deg,#2b7be4,#2b7be4);
  transition: width 120ms linear;
}

/* Specific upload modal appearance aligned with cubagemModal */
#uploadModal{ width:340px; height:340px; border-radius:40px; padding:24px; display:flex; flex-direction:column; align-items:center; justify-content:center; box-shadow: var(--card-box-shadow); }
#uploadModal > .modal-body{ padding:20px; box-sizing:border-box; width:100%; }
#uploadModal .modal-header h3{ margin:0; font-size:16px; color: #111; text-align:center; }

/* Reutilizar estilo do modal de upload para outros modals que devam ter a mesma largura/visual */
.upload-modal{ width:340px; height:340px; border-radius:40px; padding:24px; display:flex; flex-direction:column; align-items:center; justify-content:center; box-shadow: var(--card-box-shadow); }
.upload-modal > .modal-body{ padding:20px; box-sizing:border-box; width:100%; }
.upload-modal .modal-header h3{ margin:0; font-size:16px; color:#111; text-align:center; }





/* Aplicar o mesmo tamanho de título à seção de Mídias (cotacao.html) */
.extra-space-section header h2{
  font-size: var(--section-title-size);
}

.extra-space-section .media-inner .side-card{
  padding: 30px;
  border-radius: 30px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 24px;
  margin-top: 150px;
}

/* Permitir que sombras das células não sejam cortadas pelo contêiner */
.extra-space-section .media-inner .side-card{
  overflow: visible !important;
}

/* Garantir que a grid possa posicionar itens com z-index acima do contêiner sem ser cortada */
.extra-space-section .media-inner .side-card > .grid-5x2{
  position: relative;
  z-index: 1;
}

/* Garantir overflow visível em elementos-pai que possam cortar sombras */
.extra-space-section,
.extra-space-section .media-wrapper,
.extra-space-section .media-inner{
  overflow: visible !important;
}

/* Aumentar padding em 20px no elemento específico solicitado */

body > section:nth-child(12) > div > div > div > div.grid-5x2,
body > section:nth-child(13) > div > div > div > div.grid-5x2 {
  padding: var(--media-section-padding) !important;
  box-sizing: border-box !important;
  scrollbar-gutter: stable;
}

body > section:nth-child(12) > div > div > div > div.grid-5x2,
body > section:nth-child(13) > div > div > div > div.grid-5x2 {
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thumb-color) transparent;
}

body > section:nth-child(12) > div > div > div > div.grid-5x2::-webkit-scrollbar,
body > section:nth-child(13) > div > div > div > div.grid-5x2::-webkit-scrollbar {
  width: var(--scrollbar-width);
  background: transparent;
}

body > section:nth-child(12) > div > div > div > div.grid-5x2::-webkit-scrollbar-thumb,
body > section:nth-child(13) > div > div > div > div.grid-5x2::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb-color);
  border-radius: 8px;
}


/* Também aplicar o mesmo padding ao container pai da seção 12 */
body > section:nth-child(12) > div > div > div{
  padding: 30px !important;
  box-sizing: border-box !important;
}

/* Aplicar mesma limitação e padding à seção seguinte (documentos) */
/* Mesmo ajuste para a seção de Documentos: garantir 420px de área útil */

body > section:nth-child(13) > div > div > div {
  padding: var(--media-section-padding) !important;
  box-sizing: border-box !important;
}

/* Styles moved from inline in cotacao.html for the media section */
/* Ajuste: .media-inner em coluna */
.extra-space-section .media-wrapper{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding:24px 20px 0 20px;
}
.extra-space-section .media-inner{
  display:inline-block;
  text-align:left;
  box-sizing:border-box;
}
.extra-space-section header{ padding:0 0 12px 0; }

.motoristas-upload{
  padding: var(--motoristas-upload-padding);
  font-size: var(--motoristas-upload-font-size);
  font-weight: var(--motoristas-upload-font-weight);
  color: var(--motoristas-upload-color);
  background: var(--motoristas-upload-bg);
  backdrop-filter: var(--motoristas-upload-backdrop-filter);
  -webkit-backdrop-filter: var(--motoristas-upload-backdrop-filter);
  border: none !important;
  border-radius: var(--motoristas-upload-border-radius);
  cursor: pointer;
  transition: var(--motoristas-upload-transition);
  box-shadow: var(--motoristas-upload-box-shadow);
  font-family: inherit;
  margin: 0;
}

.motoristas-upload:hover{
  transform: translateY(-2px);
}

.motoristas-upload:active{
  transform: translateY(0);
}

/* Neomorphic button styles removed to simplify visuals. */

/* Clean override: remover background e box-shadow para botões de upload compartilhados
   (cobre tanto `shared-upload` quanto `clear-storage-btn`) e manter apenas borda */
.upload-icon-btn.shared-upload,
.upload-icon-btn.clear-storage-btn {
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: 1px solid var(--control-border) !important;
}
.upload-icon-btn.shared-upload:hover,
.upload-icon-btn.shared-upload:active,
.upload-icon-btn.clear-storage-btn:hover,
.upload-icon-btn.clear-storage-btn:active {
  background: transparent !important;
  box-shadow: none !important;
}

/* Apply 'Despesas'-like visual to shared upload / clear-storage buttons (light & dark modes) */
.neomorphic-button.shared-upload,
.shared-upload.clear-storage-btn{
  background: #f2f2f7;
  border: 1px solid var(--control-border);
  color: #1d1d1f;
  padding: 8px 12px;
  border-radius: 12px;
  cursor: pointer;
  transition: background-color .18s, color .18s;
  box-shadow: var(--shared-upload-box-shadow, none);
}
.neomorphic-button.shared-upload:hover:not(:disabled),
.shared-upload.clear-storage-btn:hover:not(:disabled){
  background: #e5e5ea;
}

/* Dark mode variants */
body.dark .neomorphic-button.shared-upload,
body.dark .shared-upload.clear-storage-btn{
  background: #2b2b2b;
  color: #ffffff;
}
body.dark .neomorphic-button.shared-upload:hover:not(:disabled),
body.dark .shared-upload.clear-storage-btn:hover:not(:disabled){
  background: #3a3a3a;
}

/* Disabled appearance for shared upload / clear buttons: dark and non-interactive */
.neomorphic-button.shared-upload:disabled,
.shared-upload.clear-storage-btn:disabled{
  background: #1d1d1f !important;
  color: #f2f2f2 !important;
  cursor: default !important;
  pointer-events: none !important;
  opacity: 1 !important;
  box-shadow: none !important;
}

/* Remover padding do elemento principal (body > div > div > main) conforme solicitado */
body > div > div > main,
body > div.page-wrap > div > main,
main.main-area {
  padding: 0 !important;
}

/* Permitir que o card cresça conforme o conteúdo e não clipar overflow */
.card{ max-height: none; overflow: visible; min-height:0 }

/* Sidebar / menus */
.sidebar{
  padding:8px 12px;
  box-sizing: border-box;
  overflow-y: auto; /* permitir scroll vertical interno */
  overflow-x: hidden; /* evitar scroll horizontal */
  align-self: stretch; /* ocupar toda a altura da célula do grid */
  height: 100%; /* garantir altura igual ao container pai */
  min-height: 0; /* permitir que o conteúdo role internamente */
  scrollbar-width: none; /* Firefox: esconder scrollbar */
}

/* WebKit: tornar scrollbar invisível mas ainda rolável */
.sidebar::-webkit-scrollbar{ width:8px; }
.sidebar::-webkit-scrollbar-track{ background: transparent; }
.sidebar::-webkit-scrollbar-thumb{ background: transparent; }

/* Top navbar (substitui menu lateral): ocupa largura total, sem borda, dropdown on hover */
.top-navbar{
  width:100%;
  position:relative;
  background:transparent;
  border:none;
  box-shadow:none;
  border-bottom: 1px solid var(--control-border);
  height: var(--header-height) !important; /* altura uniforme para navbar em todas as páginas */
  min-height: var(--header-height) !important;
  display: flex;
  align-items: center;
  margin-bottom:100px; /* distância solicitada entre navbar e container */
  box-sizing:border-box;
  z-index:1200; /* garantir que navbar e seus dropdowns fiquem acima de outros elementos */
}
.top-navbar .nav{
  position: static; /* use normal flow so flex centering is consistent */
  display:flex;
  justify-content:center; /* center horizontally */
  align-items:center; /* center vertically within navbar */
  gap:24px;
  margin:0 auto;
  padding:0 40px;
  list-style:none;
}
.nav-item{ position:relative; }
.nav-link{ background:transparent; border:0; padding:8px 12px; border-radius:8px; cursor:pointer; font-size: var(--form-font-size); color: var(--nav-link-color); transition: color 0.2s; }
.nav-item .dropdown,
.nav-item .dropdown .dash-btn,
.nav-item .dropdown .dash-label {
  font-size: var(--form-font-size) !important;
}
.nav-link:hover{ color: #1d1d1f; }
.nav-item .dropdown{ position:absolute; top:100%; left:0; margin-top:4px; background:var(--dropdown-bg); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-radius:12px; box-shadow: var(--dropdown-shadow); padding:8px; min-width: var(--dropdown-width); max-width: var(--dropdown-width); z-index:1300; list-style:none; color:#fff; --nav-link-color:#fff; }
.nav-item .dropdown li{ margin:0; }
.nav-item .dropdown::before {
  content: "";
  position: absolute;
  top: -15px;
  left: 0;
  right: 0;
  height: 15px;
  background: transparent;
}
/* Use opacity/visibility for smoother hide/show and allow a small interactive gap
   so moving the mouse between the label and the dropdown doesn't immediately close it. */
.nav-item .dropdown{
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity 160ms ease, transform 160ms ease, visibility 160ms;
  pointer-events: none;
}
.nav-item:hover .dropdown,
.nav-item.hover-open .dropdown{
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}
.nav-item .dropdown .dash-btn{ display:flex; align-items:center; gap:8px; width:100%; box-sizing:border-box; justify-content:space-between; text-align:left; padding:10px 12px; border-radius:8px; background:transparent; border:1px solid transparent; color: var(--nav-link-color); white-space:nowrap; }
.nav-item .dropdown .dash-btn:hover{ background: rgba(255,255,255,0.12) }

.nav-item .dropdown .dash-label{ white-space:nowrap; }

/* Coming soon (inativos) styling for dropdown items */
.nav-item .dropdown .dash-btn.coming-soon{
  background: transparent; /* revertido para transparente */
  color: var(--nav-link-color);
  pointer-events: none; /* não interativos */
  opacity: 1;
}
.nav-item .dropdown .dash-btn .soon-pill{
  display:inline-block;
  margin-left:8px;
  padding:3px 10px; /* mais largo para ficar extenso */
  font-size:11px;
  line-height:1;
  border-radius:99px;
  border:1px solid rgba(0,0,0,0.06);
  color: var(--muted);
  background: transparent;
  vertical-align: middle;
  white-space: nowrap; /* impedir quebra automática */
  max-width: none; /* permitir extensão horizontal */
}

/* Align the quote-control-bar to the extreme right of the navbar */
.top-navbar > .quote-control-bar{
  position:absolute;
  left: calc(50% + 300px); /* 300px espaço a partir do centro (menu central) */
  top:50%;
  transform:translateY(-50%);
  width:auto;
  display:inline-flex;
  align-items:center;
}
.top-navbar > .quote-control-bar .qc-center { width:auto; max-width:140px }

.section{
  margin-bottom:18px;
}

.section-label{
  display:block;
  font-size:12px; /* menor */
  color:var(--muted);
  text-align:left; /* alinhado à esquerda */
  padding:8px 0 10px 0;
  border-top:1px solid var(--control-border); /* linha fina encima */
  margin-top:6px;
}

.menu{
  list-style:none;
  padding:6px 0 0 0;
  margin:0;
}

.menu li{
  margin:0; /* garantir 0 espaçamento entre itens */
  padding:0; /* remover padding para que botões encostem uns nos outros */
  font-size:14px;
  color:#222;
}

/* Dashboard: botões em lista, um embaixo do outro, espaçamento 20px */
.dashboard-menu{
  padding:6px 0 0 0;
}

.dashboard-menu li{
  margin:0; /* remove qualquer margem */
  padding:0; /* remove padding das li para garantir 0 espaçamento */
}

.dash-btn{
  width:100%;
  display:block;
  padding:10px 12px;
  border-radius:8px;
  border:1px solid transparent;
  background:transparent;
  text-align:left;
  font-size:14px;
  cursor:pointer;
  transition:background-color 180ms ease; /* animação de hover */
}

/* garantir que botões não tragam margens extras */
.dash-btn{margin:0;}

/* Hover muda apenas o background para um cinza */
.dash-btn:hover{
  background:#c8c8c89d; /* cinza claro */
}

/* Main e right columns */
.main-area{
  background:transparent;
  display:flex;
  flex-direction:column;
  align-items:stretch;
  box-sizing:border-box;
  min-height: 0; /* allow flex/grid children to shrink and enable internal scrolling */
  overflow-x: hidden; /* evitar scroll horizontal indesejado */
}

/* Permitir scroll vertical interno e customizar scrollbar */
.main-area{
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: rgba(0,0,0,0.12) transparent;
  min-height: 0; /* allow flex/grid children to shrink and enable internal scrolling */
}
.main-area{
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  /* tornar scrollbar transparente no Firefox */
  scrollbar-color: transparent transparent;
  min-height: 0; /* allow flex/grid children to shrink and enable internal scrolling */
}

/* WebKit: tornar scrollbar transparente (thumb e track) */
.main-area::-webkit-scrollbar{ width:8px; height:8px; }
.main-area::-webkit-scrollbar-track{ background: transparent; }
.main-area::-webkit-scrollbar-thumb{ background: transparent; border-radius:6px; border:2px solid transparent; background-clip: padding-box; }
.main-area::-webkit-scrollbar-thumb:hover{ background: transparent; }

/* Scrollbar transparente globalmente (WebKit) */
html::-webkit-scrollbar, body::-webkit-scrollbar, .sim-body::-webkit-scrollbar, textarea::-webkit-scrollbar{ width:8px; height:8px }
html::-webkit-scrollbar-track, body::-webkit-scrollbar-track, .sim-body::-webkit-scrollbar-track, textarea::-webkit-scrollbar-track{ background: transparent }
html::-webkit-scrollbar-thumb, body::-webkit-scrollbar-thumb, .sim-body::-webkit-scrollbar-thumb, textarea::-webkit-scrollbar-thumb{ background: transparent; border-radius:6px; border:2px solid transparent; background-clip: padding-box }
html::-webkit-scrollbar-thumb:hover, body::-webkit-scrollbar-thumb:hover, .sim-body::-webkit-scrollbar-thumb:hover, textarea::-webkit-scrollbar-thumb:hover{ background: transparent }

.main-area::-webkit-scrollbar{ width:8px; height:8px; }
.main-area::-webkit-scrollbar-track{ background: transparent; }
.main-area::-webkit-scrollbar-thumb{ background: rgba(0,0,0,0.12); border-radius:6px; border:2px solid transparent; background-clip: padding-box; }
.main-area::-webkit-scrollbar-thumb:hover{ background: rgba(0,0,0,0.18); }

/* Scrollbar mais fina globalmente (WebKit) */
html::-webkit-scrollbar, body::-webkit-scrollbar, .sim-body::-webkit-scrollbar, textarea::-webkit-scrollbar{ width:8px; height:8px }
html::-webkit-scrollbar-track, body::-webkit-scrollbar-track, .sim-body::-webkit-scrollbar-track, textarea::-webkit-scrollbar-track{ background: transparent }
html::-webkit-scrollbar-thumb, body::-webkit-scrollbar-thumb, .sim-body::-webkit-scrollbar-thumb, textarea::-webkit-scrollbar-thumb{ background: rgba(0,0,0,0.12); border-radius:6px; border:2px solid transparent; background-clip: padding-box }
html::-webkit-scrollbar-thumb:hover, body::-webkit-scrollbar-thumb:hover, .sim-body::-webkit-scrollbar-thumb:hover, textarea::-webkit-scrollbar-thumb:hover{ background: rgba(0,0,0,0.18) }

/* Form controls com mesmo visual do status-button */
.form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  align-items: start;
}
.form-row{display:flex;flex-direction:column;gap:6px}
.form label{font-size:var(--form-font-size);color:var(--muted)}

/* Divisórias usadas no formulário: estilo igual ao das seções do carrossel */
.form-divider{
  border:0;
  height:1px;
  background: rgba(0,0,0,0.06);
  margin:18px 0 18px 0;
  display:block;
  width:100%;
  box-sizing:border-box;
  margin-left:0;
  margin-right:0;
  grid-column: 1 / -1;
  justify-self: stretch;
}
.control{
  padding:10px 12px;
  font-size: var(--form-font-size);
  border:1px solid var(--control-border); /* borda mais visível */
  border-radius:8px;
  background:transparent; /* transparente conforme solicitado */
  color: #111;
  min-width:0;
  width:100%;
  box-sizing:border-box;
}
.control:focus{outline:2px solid rgba(0,0,0,0.06)}
.control[readonly]{background:#fafafa}
.textarea-control{
  width: 50%;
  height:250px; /* ajustado para 250px */
  padding:25px; /* top 25px, right 50px, bottom 50px, left 50px */
  box-sizing:border-box; /* incluir padding na largura */
  background:transparent;
  resize:none; /* desativar redimensionamento conforme solicitado */
  overflow-y:auto; /* barra de rolagem vertical */
  overflow-x:hidden; /* sem barra horizontal */
  white-space:pre-wrap; /* quebra de linha natural */
  /* permitir quebra em sequências muito longas (URLs/base64/strings sem espaços) */
  overflow-wrap: anywhere;
  /* compatibilidade para motores antigos */
  word-break: break-word;
  scrollbar-width: thin; /* Firefox: scrollbar fina */
  scrollbar-color: var(--scrollbar-color-firefox);
}

/* Estilo específico para textarea do painel de agendamento: largura 100% e altura 200px */
#agendamentoTextoBruto.textarea-control{
  width:100% !important;
  height:200px !important;
  resize:none !important;
  padding:12px !important;
}

/* Layout para linhas que devem agrupar múltiplos campos (nome + cpf) */
.agendamento-bruto .form-row.pair{
  display:flex;
  gap:12px;
  align-items:flex-start;
  margin-bottom:12px;
  width:100%;
  flex-wrap:nowrap;
}
.agendamento-bruto .form-row.pair .col{
  display:flex;
  flex-direction:column;
}
.agendamento-bruto .form-row.pair .col.main{
  flex:1 1 auto;
}
.agendamento-bruto .form-row.pair .col.small{
  flex:0 0 220px;
  max-width:260px;
}
.agendamento-bruto .form-row.pair .col .control{
  width:100%;
  box-sizing:border-box;
}

.agendamento-bruto .form-row.pair .col label{
  display:block;
  margin-bottom:6px;
  font-weight:400; /* alinhar ao estilo das labels do formulário principal */
  font-size:var(--form-font-size);
  color:var(--muted);
}

.agendamento-bruto .two-inline{
  display: flex; /* fallback mais robusto para garantir lado a lado */
  flex-direction: row;
  gap: 12px;
  align-items: flex-start;
  width: 100%;
}

/* ---- Tornar barras de rolagem invisíveis globalmente (mantém a rolagem funcional) ---- */
/* Firefox */
html, body { scrollbar-width: none; }
/* IE 10+ / Edge Legacy */
html, body { -ms-overflow-style: none; }
/* WebKit (Chrome, Safari, Edge Chromium) */
html::-webkit-scrollbar, body::-webkit-scrollbar { width: 0; height: 0; background: transparent; display: none; }

/* Também esconder barras internas em elementos que ainda as mostrem */
*::-webkit-scrollbar { width: 0; height: 0; background: transparent; display: none; }
* { scrollbar-width: none; -ms-overflow-style: none; }


#section-agendamento-bruto .two-inline .col{
  flex: 1 1 0; /* cada coluna cresce igualmente */
}

.agendamento-bruto .two-inline .col label{
  display:block;
  margin-bottom:6px;
  font-size:var(--form-font-size);
  color:var(--muted);
}

#section-agendamento-bruto .two-inline .col .control{
  width:100%;
  box-sizing:border-box;
}

.agendamento-bruto > div:nth-child(3){
  display: flex;
  flex-direction: row;
  gap: 12px;
  align-items: flex-start;
  width: 100%;
  flex-wrap: nowrap;
}
#section-agendamento-bruto > div:nth-child(3) > div:nth-child(1),
.agendamento-bruto > div:nth-child(3) > div:nth-child(2){
  flex: 1 1 0;
  min-width: 0; /* evita overflow em conteúdos longos */
}

.agendamento-bruto .form-row .col label,
.agendamento-bruto .agendamento-bruto label,
.agendamento-bruto .form-row > label{
  font-size:var(--form-font-size);
  color:var(--muted);
  font-weight:400;
}

/* Aplicar o mesmo estilo do formulário principal a todas as labels do painel */
.agendamento-bruto label{ font-size:var(--form-font-size); color:var(--muted); font-weight:400 }

/* Caso algum rótulo use strong, evitar que fique em negrito diferente do restante */
.agendamento-bruto label strong{ font-weight:inherit; font-size:inherit }

/* WebKit thin scrollbar styling */
.textarea-control::-webkit-scrollbar{width:6px}
.textarea-control::-webkit-scrollbar-track{background:transparent}
.textarea-control::-webkit-scrollbar-thumb{background:rgba(0,0,0,0.12);border-radius:6px}

/* Input with icon wrapper */
.input-icon-wrap{position:relative}
.input-icon{position:absolute;right:8px;top:50%;transform:translateY(-50%);border:0;background:transparent;padding:6px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center}
.input-icon svg, .input-icon img{
  display: block;
  width: auto;
  height: 18px;
  max-width: 18px;
  object-fit: contain;
}
/* aplicar leve acinzentamento ao ícone dentro do input */
.input-icon img{
  filter: brightness(0) saturate(100%);
  opacity: 0.5;
}

/* Modal overlay + modal styles */
.modal-overlay{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:var(--default-overlay-bg);backdrop-filter:blur(var(--default-overlay-blur));-webkit-backdrop-filter:blur(var(--default-overlay-blur));z-index:9999;overflow:hidden;}

/* Em modo dark, escurecer e aumentar o blur do overlay dos modais (apenas no modo dark) */
body.dark .modal-overlay,
body.dark [class*="modal-overlay"]{
  background: rgba(0,0,0,0.62) !important;
  --default-overlay-blur: 10px;
  backdrop-filter: blur(var(--default-overlay-blur)) !important;
  -webkit-backdrop-filter: blur(var(--default-overlay-blur)) !important;
}

/* Quando o modal estiver aberto, evitar rolagem do fundo */
html.modal-open, body.modal-open{ overflow: hidden; height: 100%; }

/* Transição suave para overlays e modais: aplicada globalmente a todos os modais */
.modal-overlay{
  opacity: 0;
  transition: opacity var(--modal-overlay-duration) var(--modal-overlay-easing), backdrop-filter var(--modal-overlay-duration) var(--modal-overlay-easing);
  pointer-events: none;
}
.modal-overlay.is-open{ opacity: 1; pointer-events: auto; }

.modal{
  background:var(--default-modal-bg);
  border-radius:var(--default-modal-border-radius);
  box-shadow: var(--default-modal-box-shadow);
  width:min(720px,90%);
  max-width:90%;
  padding:18px;
  box-sizing:border-box;
  color:#111;
  max-height: var(--default-modal-max-height);
  overflow-y: auto;
  transform: translateY(8px) scale(0.98);
  opacity: 0;
  transition: transform var(--modal-modal-transform-duration) var(--modal-modal-transform-easing), opacity var(--modal-modal-opacity-duration) var(--modal-modal-opacity-easing);
}
.modal-overlay.is-open .modal{
  transform: translateY(0) scale(1);
  opacity: 1;
}

/* Ensure modals respect the global max-height variable even when broad selectors set height:auto !important */
body > div.modal-overlay > div.modal{
  height: auto !important;
  max-height: var(--default-modal-max-height) !important;
  overflow-y: auto !important;
  box-sizing: border-box !important;
}
.modal-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.modal-header h3{margin:0;font-size:16px}
.modal-close{background:transparent;border:0;font-size:20px;line-height:1;cursor:pointer}

/* Botão que foi movido para o topo do cabeçalho (posicionamento global) */
.top-header-btn{
  position: absolute;
  top: 6px;
  right: 18px;
  z-index: 600;
  transform: translateY(0);
}

/* Posicionamento específico do botão .dot-btn na rota /usuarios: mover 100px para cima */
.users-card .user-top-btn{
  position: absolute;
  left: 12px; /* colado à direita, mas dentro do container */
  top: 12px; /* próximo ao topo do cabeçalho */
  z-index: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto !important;
  padding: 8px;
  border-radius: 8px;
  background: transparent;
  border: 1px solid transparent;
}

/* Botão de ação (círculo com borda) posicionado à direita do campo de perfil público */
.users-card .users-action-btn{
  position: absolute;
  right: 12px; /* posicionado à direita, dentro do container */
  top: 12px;
  z-index: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 6px;
  border-radius: 50%;
  border: none; /* borda removida conforme solicitado */
  background: transparent;
  cursor: pointer;
}
.users-card .users-action-btn img{ width:18px; height:18px; display:block }

/* Garantir que o container .card permita posicionamento absoluto de filhos */
.card{ position: relative; }

/* Barra de controle de cotações adicionada ao menu lateral */
.quote-control-bar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  padding:6px 4px;
  margin-bottom:10px;
  width:100%; /* ocupar toda a largura do nav pai */
  max-width:100%;
  box-sizing:border-box;
  overflow:hidden; /* evitar vazamento para fora do nav */
}
.quote-control-bar .qc-left,
.quote-control-bar .qc-right{
  display:flex;
  gap:6px;
  align-items:center;
  flex:0 0 auto;
}
.qc-btn{
  background:transparent;
  border:1px solid transparent;
  padding:2px 4px; /* reduzir padding para caber melhor */
  border-radius:6px;
  cursor:pointer;
  font-size:12px; /* reduzir fonte */
  line-height:1;
  flex:0 0 22px; /* largura fixa menor do botão */
  min-width:22px;
  box-sizing:border-box;
  text-align:center;
}
.qc-btn:hover{ background: rgba(0,0,0,0.06); }
.qc-center{ flex:0 0 70px; display:flex; align-items:center; justify-content:center; }
.current-quote{
  font-size:14px;
  padding:2px 4px;
  width:100%;
  box-sizing:border-box;
  text-align:center;
  display:block;
  background:transparent;
  border:0;
  outline:0;
  overflow-x:hidden; /* esconder overflow horizontal sem barra */
  overflow-y:visible;
  white-space:nowrap;
  text-overflow:ellipsis; /* não expandir */
  min-width:0; max-width:100%;
  -ms-overflow-style: none; /* Internet Explorer 10+ */
  scrollbar-width: none; /* Firefox */
}
.current-quote::-webkit-scrollbar{ display: none; }

/* Forçar largura fixa específica para o elemento com id #currentQuote */
#currentQuote{
  width:70px !important;
  min-width:70px !important;
  max-width:70px !important;
  display:inline-block !important;
  box-sizing:border-box !important;
  overflow-x:hidden !important;
  white-space:nowrap !important;
  text-overflow:ellipsis !important;
}
#currentQuote:focus{
  overflow-x:auto !important; /* permitir rolagem horizontal enquanto edita */
  text-overflow:clip !important; /* não mostrar reticências enquanto em foco */
}
#currentQuote::-webkit-scrollbar{ display: none; height: 0; }
.current-quote:focus{ outline: none; box-shadow: none; }
.current-quote[contenteditable="true"]{ caret-color: #111 }

.modal-body{max-height:calc(var(--default-modal-max-height) - 60px);overflow:auto}

/* Ensure sections used as modal content use the modal background */
body > div > section{ background: var(--modal-bg); }

/* Overrides específicos para o viewer de mídia (mediaViewer) */
/* Usar seletor com ID para ter maior especificidade que a regra global `.modal-body` */
#mediaViewerModal { overflow: hidden !important; max-height: 90vh; max-width: 90vw; }
#mediaViewerModal .modal-body { max-height: none; overflow: visible; display:flex; align-items:stretch; justify-content:center; padding:10px; box-sizing:border-box; }
#mediaViewerModal .modal-body .viewer-content { height: 100%; min-height: 0; box-sizing: border-box; display:flex; align-items:center; justify-content:center; }
#mediaViewerModal .modal-body .viewer-content .pdf-scroll { overflow-y: auto; -webkit-overflow-scrolling: touch; }
.modal-footer{text-align:right;margin-top:12px}
.modal-footer button{font-size:16px;}
.modal button{padding:8px 12px;border-radius:8px;border:1px solid var(--control-border);background:transparent;cursor:pointer}

/* Garantir que botões de compartilhar usem o mesmo visual mesmo quando movidos para dentro de um modal
   Sem usar !important: selector com maior especificidade que `.modal button`. */
.modal .sim-share-btn,
.modal .media-share-btn{
  background-color: #f2f2f7;
  border: none;
  border-radius: 14px;
}

/* Botão circular simples (bolinha) reutilizável */
.dot-btn{ display:inline-block; width:14px; height:14px; padding:0; border-radius:50%; border:0; background:#e74c3c; cursor:pointer; vertical-align:middle; box-shadow: 0 2px 6px rgba(0,0,0,0.08); font-size:0; line-height:0 }
.dot-btn:focus{ outline:none; }
.dot-btn > *{ display:none !important; }
.dot-btn::before, .dot-btn::after{ display:none !important; }
.dot-btn--small{ width:12px; height:12px }

/* Forçar estilo do botão de fechar dentro do modal de cubagem (override potente) */
#cubagemModal .modal-header > button{
  width:14px !important;
  height:14px !important;
  padding:0 !important;
  border-radius:50% !important;
  border:0 !important;
  background:#e74c3c !important;
  box-shadow:none !important;
  display:inline-block !important;
}
#cubagemModal .modal-header > button *{ display:none !important; }
#cubagemModal .modal-header > button::before, #cubagemModal .modal-header > button::after{ display:none !important; }

/* Status button/menu base (reutilizável) */
.status-button{
  padding:10px 12px;
  border:1px solid #f5f5f5; /* borda mais clara */
  position:relative;
  z-index:1;
  border-radius:8px;
  background:var(--card-bg);
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:space-between;
  min-width:0;
  width:100%;
}
.status-button .status-label{margin-right:8px}
.status-button .caret{opacity:0.7; transition: transform 120ms ease}
.status-button.open .caret{transform:rotate(90deg)}

/* coluna direita removida - .side-area não utilizada */

/* Status dropdown (coluna direita) */
.status-menu{position: relative; display:block; width:100%; overflow: visible;}

.status-button{
  padding:10px 12px;
  border:1px solid #f5f5f5;
  border-radius:8px;
  background:var(--bg);
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:space-between;
  min-width:0;
  width:100%;
}

/* Painel de simulação (cartão) */
.sim-panel{ background: transparent; border-radius:12px; }
.sim-panel, #simulacao-cartao{ box-sizing: border-box; }

/* Ocupa 100% da altura do container pai e organiza o conteúdo para permitir
   que a área da tabela role se necessário. */
#simulacao-cartao{
  display:flex;
  flex-direction:column;
  box-sizing: border-box;
}
.sim-body{ flex:0 0 auto; overflow: visible; max-height: none; box-sizing: border-box; }

/* Quando a simulação estiver ativa, esconder todos os filhos diretos da main
   exceto o painel de simulação para evitar sobreposição de elementos. */
.main-area.sim-active > :not(#simulacao-cartao){
  display: none !important;
}
.main-area.sim-active > #simulacao-cartao{ display: flex !important; }

/* Estado para exibir apenas o painel de agendamento */
.main-area.agendamento-active > :not(#agendamento-campos){
  display: none !important;
}
.main-area.agendamento-active > #agendamento-campos{ display: block !important; }
.sim-header{ display:flex; gap:12px; align-items:end; justify-content:space-between; margin-bottom:20px }
.sim-left, .sim-right{ display:flex; flex-direction:column; gap:6px }
.sim-left{ flex:1 1 0; min-width:0 }
.sim-right{ flex:1 1 0; min-width:0; align-items:flex-end }
.sim-right #valorContainer{ width:100%; max-width:none }

/* Forçar ambos os campos (juros e valor do frete) a ocuparem a mesma largura
   dentro do header da simulação: duas colunas iguais e inputs com 100% width */
#simulacao-cartao > .sim-header > .sim-left,
#simulacao-cartao > .sim-header > .sim-right{
  flex: 1 1 0;
  min-width: 0;
}

#simulacao-cartao > .sim-header input.control,
#simulacao-cartao > .sim-header #valorContainer,
#simulacao-cartao > .sim-header #valorContainer > #inputValorFrete,
#simulacao-cartao > .sim-header #valorContainer > #inputValorFrete_sim,
#simulacao-cartao > .sim-header input#inputJurosSimulacao,
#simulacao-cartao > .sim-header input#inputJurosSimulacao_sim{
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  box-sizing: border-box;
}

/* Alinhar a label do 'Valor do frete' à esquerda (igual ao rótulo de juros) */
#simulacao-cartao > .sim-header > .sim-right > label{
  align-self: flex-start !important;
  text-align: left !important;
  display: block !important;
}

.sim-table{ width: 420px; max-width:100%; border-collapse:separate; border:1px solid var(--control-border); border-radius:30px; overflow:hidden; margin:16px auto 0; box-sizing:border-box; padding:32px }

/* Fazer com que o header da simulação tenha a mesma largura da tabela */
#simulacao-cartao > div.sim-header{
  /* Tornar responsivo: ocupar 100% do espaço disponível
     mas nunca ultrapassar a largura da tabela (420px) */
  width: 100%;
  max-width: 420px;
  margin: 16px auto 20px;
  box-sizing: border-box;
}
.sim-table th, .sim-table td{ text-align:center; padding:10px 16px; font-size:14px; line-height:0.9 }
.sim-table tbody tr{ /* aumentar espaço entre linhas */
  min-height:40px;
}

.sim-footer{ display:flex; justify-content:center; padding-top:20px; margin-top:5px }
/* Botão de compartilhar no painel de simulação - estilo consistente com 'Declaração de conteúdo' */
.sim-share-btn{
  background-color: #f2f2f7;
  border-radius: 14px;
  border: none;
  transition: background-color 0.2s;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  cursor: pointer;
}
.sim-share-btn:hover{ background-color: #e5e5ea !important; }
.sim-share-btn img{ width:25px; height:25px; object-fit:contain; display:block }
.sim-share-btn span{ font-size:16px; font-weight:400; color:#111 }
.sim-table th{ font-weight:600; color:var(--muted) }

/* Tornar labels do painel de simulação iguais às do formulário principal */
.sim-header label{ font-size:var(--form-font-size); color:var(--muted); font-weight:400 }

/* Quando o painel de simulação for exibido dentro do modal (cotacao.html), usar fonte maior */
#simulacaoModal .sim-table th,
#simulacaoModal .sim-table td{
  font-size:16px;
  line-height:1.1;
}

.status-button .status-label{margin-right:8px}
.status-button .caret{opacity:0.7; transition: transform 120ms ease}
.status-button.open .caret{transform:rotate(90deg)}

.status-dropdown{
  /* Visual alinhado ao dropdown da navbar */
  position: absolute;
  left: 0;
  top: 100%;
  margin-top: 2px;
  list-style: none;
  padding: 8px; /* mesmo padding do dropdown da navbar */
  background: var(--dropdown-bg);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 12px;
  box-shadow: var(--dropdown-shadow);
  min-width: 220px; /* mesma largura mínima */
  max-width: 320px;
  box-sizing: border-box;
  display: none;
  z-index: 1300;
  font-size: 15px; /* mesmo tamanho de fonte */
  color: #fff;
}

/* Quando houver falta de espaço à direita, adicionamos a classe .flip para alinhar a direita do botão */
.status-dropdown.flip{
  left: auto;
  right: 0;
  top: 100%;
  margin-top: 8px;
}

/* Sugestões de cidade: abrir abaixo do input ao qual pertencem */
.suggestions-dropdown{
  left: 0 !important;
  top: 100% !important;
  margin-left: 0 !important;
  margin-top: 8px !important;
  border-color: var(--control-border) !important;
  min-width: 160px;
  max-width: 360px;
  width: 100%;
  border-radius:12px;
  z-index:70;
  color: #fff;
  background: var(--dropdown-bg) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  box-shadow: var(--dropdown-shadow) !important;
}

.suggestions-dropdown.flip{
  /* ao flipar, alinhar à direita do container (mantém abaixo) */
  left: auto !important;
  right: 0 !important;
  margin-right: 0 !important;
}

/* Garantir que o botão de status dentro da coluna direita nunca ultrapasse
   a largura disponível do container (override de regras anteriores). */
/* Regras específicas da antiga coluna direita removidas. */

.status-dropdown[aria-hidden="false"]{display:block}

/* Forçar visibilidade quando o dropdown estiver marcado como visível via aria-hidden
   Usa !important para sobrepor .js-aria-hidden aplicado por scripts */
.status-dropdown[aria-hidden="false"]{
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.status-dropdown li{ margin:0; padding:10px 12px; border-radius:8px; cursor:pointer }
.status-dropdown li:hover{ background: rgba(255,255,255,0.12) }

/* Helper class used by JS to hide elements without immediately setting aria-hidden
  Avoids browser warning when a focused descendant might be present. */
.js-aria-hidden{ display: none !important; }

/* Não alterar cor de fundo no hover dos botões de status */
.status-button:hover{
  background-color: inherit !important;
  background: transparent !important;
  filter: none !important;
}

/* Paridade visual: inputs e botões com mesmo padding, borda, raio e foco */
.control, .status-button, .btn, .pz-spin, .pz-edit, .input-icon {
  padding:10px 12px;
  font-size: var(--form-font-size);
  border:1px solid var(--control-border);
  border-radius:8px;
  background:transparent;
  box-sizing:border-box;
  font-family:inherit;
}

/* Ícones à esquerda dos botões do sidebar (dash-btn) */
.dash-btn{
  display:flex !important;
  align-items:center;
  gap:8px;
}
.dash-icon{ display:inline-flex; width:18px; height:18px; align-items:center; justify-content:center; flex:0 0 18px }
.dash-icon svg, .dash-icon img{
  width: auto;
  height: 18px;
  max-width: 18px;
  display: block;
  object-fit: contain;
}
/* filtro acinzentado apenas visual */
.dash-icon img{
  /* transformar cores em preto puro e aplicar opacidade para virar cinza escuro */
  filter: brightness(0) saturate(100%);
  opacity: 0.5;
}
.dash-label{ display:inline-block; text-align:left; width:100%; }

/* Forçar labels da navbar a permanecerem escuras em modo noturno
   Regra altamente específica colocada no final para garantir precedência. */
body.dark nav > ul > li > ul > li > button > span.dash-label,
body.dark nav ul.nav li.nav-item ul.dropdown li button span.dash-label,
body.dark .nav .dropdown .dash-btn span.dash-label,
body.dark .nav .dash-btn > .dash-label,
body.dark button.dash-btn .dash-label {
  color: var(--nav-link-color) !important;
}

/* Também proteger estados hover/active que possam mudar a cor */
body.dark nav ul.nav li.nav-item ul.dropdown li button.dash-btn:hover span.dash-label,
body.dark nav ul.nav li.nav-item ul.dropdown li button.dash-btn:active span.dash-label {
  color: var(--nav-link-color) !important;
}

.status-button, .btn, .pz-spin, .pz-edit{ background:var(--card-bg); }

.control{ background:transparent; }

.control:focus, .status-button:focus, .btn:focus, .pz-spin:focus, .pz-edit:focus, .input-icon:focus{
  outline:2px solid rgba(0,0,0,0.06);
}

/* Botões quadrados de prazo: manter dimensão consistente com altura de inputs */
.pz-spin, .pz-edit{ display:inline-flex; align-items:center; justify-content:center; min-width:38px; min-height:38px; padding:0 8px; }
.pz-spin.pz-up, .pz-spin.pz-dn{ width:38px; }

/* Botão principal dentro do painel */
.btn{ display:inline-flex; align-items:center; justify-content:center; cursor:pointer; }

/* Campo full (largura total) semelhante ao .control */
.full{ width:100%; box-sizing:border-box; padding:10px 12px; border:1px solid var(--control-border); border-radius:8px; background:transparent }

/* Pequenos ajustes de hover para consistência */
.status-button:hover, .btn:hover, .pz-spin:hover, .pz-edit:hover{ background:#ffffff }

/* Radios estilizados dentro do painel de agendamento
   Garantir linha única com label à esquerda e controles à direita.
   - forçar direção em row para sobrepor regras gerais
   - o primeiro label funciona como legenda e ganha largura fixa
   - os labels seguintes são os botões/rótulos inline
*/
#section-agendamento-bruto .form-row{ display:flex; flex-direction:row !important; gap:32px; align-items:center; flex-wrap:wrap }
#section-agendamento-bruto .form-row > label:first-child{ min-width:180px; text-align:left; font-weight:400; margin-right:6px }
#section-agendamento-bruto .form-row > label{ display:inline-flex; align-items:center; gap:8px; cursor:pointer; user-select:none; margin-right:32px !important }
#section-agendamento-bruto .form-row > label:last-child{ margin-right:0 !important }

/* Garantir gap entre labels adjacentes (mais robusto para estruturas sem .form-row) */
#section-agendamento-bruto label + label{ margin-left:32px !important }

/* Ajuste fino removido: margin-left específico para o segundo label do bloco 16 (não é mais necessário) */

/* Garantir espaço entre o input radio e o texto do label dentro do painel */
#section-agendamento-bruto label input[type="radio"],
#section-agendamento-bruto label input[type="checkbox"]{
  margin-right:8px !important;
}

/* Ajuste específico: adicionar margin-bottom em labels dentro do bloco 7 */
#section-agendamento-bruto > div:nth-child(7) > div label{
  display:block !important;
  margin-bottom:8px !important;
}

/* Aplicar margin-bottom a todos os rótulos de grupo dentro do painel */
#section-agendamento-bruto .group-label{
  display:block !important;
  margin-bottom:8px !important;
}
#section-agendamento-bruto .form-row > label input[type="radio"]{ /* aparência customizada: sem borda, maior e com sombra interna + externa */
  -webkit-appearance:none; appearance:none;
  width:22px; height:22px; min-width:22px; min-height:22px;
  border-radius:50%; border:0; padding:0; margin:0; cursor:pointer; box-sizing:border-box;
  transition:all 160ms ease; display:inline-block; vertical-align:middle;
  /* base cinza suave quando não selecionado */
  background: radial-gradient(circle at center, #f6f6f6 48%, transparent 49%), #efefef;
  box-shadow: inset 0 2px 6px rgba(0,0,0,0.06), 0 1px 3px rgba(0,0,0,0.04);
}

/* Forçar .form-row.pair a ocupar 100% e alinhar em linha mesmo com regras conflitantes */
#section-agendamento-bruto .form-row.pair{
  display:flex !important;
  flex-direction:row !important;
  gap:32px !important;
  align-items:flex-start !important;
  width:100% !important;
}
#section-agendamento-bruto .form-row.pair .col.main{ flex:1 1 auto !important; }
#section-agendamento-bruto .form-row.pair .col.small{ flex:0 0 200px !important; max-width:260px !important; }
#section-agendamento-bruto .form-row.pair .col .control{ width:100% !important; }
#section-agendamento-bruto .form-row label input[type="radio"]:focus{ outline:none; box-shadow: 0 0 0 3px rgba(0,0,0,0.06); }
#section-agendamento-bruto .form-row label input[type="radio"]:checked{
  /* indicar seleção: azul com ponto branco central */
  background: radial-gradient(circle at center, #ffffff 44%, transparent 45%), #2b9cff;
  box-shadow: inset 0 2px 6px rgba(0,0,0,0.12), 0 6px 18px rgba(43,156,255,0.14);
}
#section-agendamento-bruto .form-row > label span.radio-label{ display:inline-block }

/* Quando não selecionado, manter transparente com inner-shadow */
#section-agendamento-bruto .form-row label input[type="radio"]:not(:checked){ background:transparent }

/* Ajuste fino: unificar espaçamento, tamanho e cor das labels do painel
  para seguirem o estilo da label principal (ex.: .form-row.pair .col label) */
#section-agendamento-bruto .form-row label{ font-size:var(--form-font-size); color: var(--muted); gap:8px }

/* Campos de horário: colocar label à esquerda e inputs com largura reduzida
   e que cresçam conforme o conteúdo. Override específico para não afetar
   outros controles do painel. */
#section-agendamento-bruto .form-row > label[for="remetenteHorario"],
#section-agendamento-bruto .form-row > label[for="destinatarioHorario"]{
  min-width:140px; /* menor que o padrão para evitar esmagar input */
  text-align:left;
}
#section-agendamento-bruto #remetenteHorario,
#section-agendamento-bruto #destinatarioHorario{
  width:auto !important;
  flex: 0 1 auto !important;
  min-width:110px;
  max-width:48%;
  box-sizing:border-box;
}

/* Forçar inputs de horário abaixo das labels (remetente/destinatário) */
#section-agendamento-bruto label[for="remetenteHorario"],
#section-agendamento-bruto label[for="destinatarioHorario"]{
  display:block !important;
  margin: 0 0 6px 0 !important;
}
#section-agendamento-bruto #remetenteHorario,
#section-agendamento-bruto #destinatarioHorario{
  display:block !important;
  width:100% !important;
  max-width:100% !important;
  min-width:0 !important;
  box-sizing:border-box !important;
}

/* Aplicar margin-top e margin-bottom de 10px a todas as divs filhas diretas
   dentro de #section-agendamento-bruto conforme solicitado */
#section-agendamento-bruto > div{
  margin: 10px 0;
}

/* Ajuste específico: aumentar margin-top para o bloco bruto de agendamento */
#section-agendamento-bruto > div.agendamento-bruto{
  margin-top: 20px;
}

/* Centralizar botão 'Gerar Ordem de Coleta' dentro de seu container */
#section-agendamento-bruto .remessa-actions{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
}

/* Adicionar margin-bottom de 30px em elementos específicos do painel de agendamento */
#section-agendamento-bruto > div:nth-child(8),
#section-agendamento-bruto > div:nth-child(16),
#section-agendamento-bruto > div.agendamento-bruto{
  margin-bottom: 30px;
}

/* Classe comum para blocos com espaçamento uniforme */
.common-spacing{ margin: 10px 0 !important; }

/* Garantir que os botões de prazo na área principal não vazem do contêiner */
.form .status-menu{width:100% !important; max-width:100% !important}
.form #prazoColetaButton, .form #prazoEntregaButton{
  width:100% !important;
  max-width:100% !important;
  box-sizing:border-box;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
}

.status-dropdown li{padding:8px 12px; cursor:pointer; white-space:normal}
.status-dropdown li:hover{ background: rgba(255,255,255,0.12) }

/* Ajustar bordas para corresponder à cor de `#inputNome` */
/* Ajuste: remover borda do container direto dentro da section (rota de simulação usa painel próprio) */
body > div.page-wrap > div > section > div { 
  border: none !important;
  border-radius: 8px;
  box-sizing: border-box;
}

#statusDropdown{
  background: var(--dropdown-bg) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  box-shadow: var(--dropdown-shadow) !important;
  border: none !important;
  position: absolute !important;
  left: 0 !important;
  top: 100% !important;
  margin-top: 8px !important;
}

.form #prazoColetaButton, .form #prazoEntregaButton{
  border-color: var(--control-border) !important;
}


/* Regras adicionadas: layout para os três campos numéricos (cubagem, peso, valor NF) */
.numeric-triple{
  display:flex !important;
  flex-direction:row !important;
  gap:12px;
  align-items:stretch;
  width:100%;
  box-sizing:border-box;
  flex-wrap:nowrap;
}
/* garantir que o wrapper ocupe toda a largura do grid/form parent */
.numeric-triple{ grid-column: 1 / -1 !important; max-width:100% !important; }
/* garantir que os filhos imediatos .form-row fiquem como colunas internas e ocupem larguras iguais */
.numeric-triple > .form-row{
  display:flex !important;
  flex-direction:column !important;
  flex:1 1 0 !important;
  min-width:0 !important;
  margin:0 !important;
}
.numeric-triple > .form-row .control{ width:100%; box-sizing:border-box; }

/* garantir que os controles do painel façam box-sizing correto e textarea acompanhe */
#section-agendamento-bruto .control, #section-agendamento-bruto .textarea-control{ box-sizing:border-box; }

/* Forçar o primeiro bloco dentro de #cotacaoForm a ocupar 100% da largura */
#cotacaoForm > div:nth-child(1){
  width:100% !important;
  max-width:100% !important;
  box-sizing:border-box !important;
  display:block !important;
  grid-column: 1 / -1 !important;
}

body.dark #cotacaoForm label,
body.dark .media-wrapper label{
  color: #696969 !important;
}

body.dark .media-wrapper #aliquotaPercent{
  color: #696969 !important;
}

/* Remover borda e estilo visual do botão de ícone de cubagem */
#cubagemIcon{
  border:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  padding:0 !important;
}
#cubagemIcon:focus{ outline:none !important; }

/* Estilização específica para a row do Valor do frete: remover borda da div, manter borda apenas no input; espaçamento acima/abaixo */
/* Estilização removida: a row externa do valor do frete foi eliminada e
   o input agora existe dentro do painel de simulação. */

/* Remover borda especificamente do painel de simulação (segunda div dentro de section) */
#simulacao-cartao{ border: none !important; box-shadow: none !important; }



/* Três colunas iguais para o bloco de prazos e status (substitui uso de .numeric-triple) */
.three-cols{
  display:flex;
  gap:12px;
  width:100%;
  box-sizing:border-box;
  margin:0;
  padding:0;
  overflow:visible;
}
.three-cols > .form-row{
  flex:1 1 0;
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:6px;
  margin:0;
  padding:0;
  position:relative;
  overflow:visible;
}

/* Garantir que o wrapper de três colunas ocupe toda a largura do form grid
   e que seus filhos fiquem lado a lado (uma row). */
#cotacaoForm > .three-cols{
  grid-column: 1 / -1 !important;
  display: flex !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

#cotacaoForm > .three-cols > .form-row{
  flex: 1 1 0 !important;
  max-width: none !important;
}

/* garantir inputs e botões ocupem toda a largura das colunas e tenham padding horizontal */
#cotacaoForm > .three-cols > .form-row .control,
#cotacaoForm > .three-cols > .form-row .status-button {
  box-sizing:border-box !important;
  padding: 10px 12px !important; /* 10px vertical, 12px horizontal */
  font-size: var(--form-font-size) !important;
}

#cotacaoForm > .three-cols > .form-row label{
  font-size: var(--form-font-size) !important;
}

/* manter menus/containers sem padding extra, mas com largura total */
#cotacaoForm > .three-cols > .form-row .status-menu{
  width:100% !important;
  box-sizing:border-box !important;
  margin:0 !important;
  padding:0 !important;
}

/* Quatro colunas iguais para blocos que necessitam de mais campos */
.four-cols{
  display:flex;
  gap:12px;
  width:100%;
  box-sizing:border-box;
  margin:0;
  padding:0;
  overflow:visible;
}
.four-cols > .form-row{
  flex:1 1 0;
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:6px;
  margin:0;
  padding:0;
  position:relative;
  overflow:visible;
}

#cotacaoForm > .four-cols{
  grid-column: 1 / -1 !important;
  display: flex !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

#cotacaoForm > .four-cols > .form-row{
  flex: 1 1 0 !important;
  max-width: none !important;
}

#cotacaoForm > .four-cols > .form-row .control,
#cotacaoForm > .four-cols > .form-row .status-button {
  box-sizing:border-box !important;
  padding: 10px 12px !important;
  font-size: var(--form-font-size) !important;
}

#cotacaoForm > .four-cols > .form-row label{
  font-size: var(--form-font-size) !important;
}

#cotacaoForm > .four-cols > .form-row .status-menu{
  width:100% !important;
  box-sizing:border-box !important;
  margin:0 !important;
  padding:0 !important;
}

/* Remover setas de navegação de inputs numéricos */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Unificar estilo do botão de fechar em modals (inclui overlays dinâmicos) para igualar #cubagemModal */
.modal .modal-header > button,
.modal-overlay .modal-header > button,
#cubagemModal .modal-header > button,
body > div.modal-overlay > div > div.modal-header > button{
  width:14px !important;
  height:14px !important;
  padding:0 !important;
  border-radius:50% !important;
  border:0 !important;
  background:#e74c3c !important;
  box-shadow: 0 2px 6px rgba(0,0,0,0.08) !important;
  display:inline-block !important;
  font-size:0 !important;
  line-height:0 !important;
}

/* Ajuste: garantir espaçamento entre label e input do primeiro campo do formulário
   para igualar ao espaçamento usado nas colunas (.three-cols) */
#cotacaoForm > div:nth-child(1) > label{
  display:block;
  margin-bottom:6px;
}
.modal .modal-header > button *,
.modal-overlay .modal-header > button *,
#cubagemModal .modal-header > button *,
body > div.modal-overlay > div > div.modal-header > button *{ display:none !important; }

/* Ajuste: colocar as labels acima dos inputs no bloco específico (2)
   e manter os blocos 10 e 11 com inputs na mesma linha. */

/* bloco 2: grid com duas colunas; cada label fica acima do input correspondente */
#section-agendamento-bruto > div:nth-child(2) {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: auto;
  gap: 8px 12px;
  align-items: start;
  width: 100%;
  box-sizing: border-box;
}

#section-agendamento-bruto > div:nth-child(2) label{ display:block; margin:0; }

#section-agendamento-bruto > div:nth-child(2) label:nth-child(1){ grid-column: 1; grid-row: 1; }
#section-agendamento-bruto > div:nth-child(2) label:nth-child(1) + .control{ grid-column: 1; grid-row: 2; }

#section-agendamento-bruto > div:nth-child(2) label:nth-child(3){ grid-column: 2; grid-row: 1; }
#section-agendamento-bruto > div:nth-child(2) label:nth-child(3) + .control{ grid-column: 2; grid-row: 2; }

/* blocos 10 e 11: grid com duas colunas (labels acima dos inputs) */
#section-agendamento-bruto > div:nth-child(10),
#section-agendamento-bruto > div:nth-child(11) {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: auto;
  gap: 8px 12px;
  align-items: start;
  width: 100%;
  box-sizing: border-box;
}

#section-agendamento-bruto > div:nth-child(10) label,
#section-agendamento-bruto > div:nth-child(11) label{ display:block; margin:0 }

/* Fazer com que o bloco 3 tenha o mesmo layout simples (label acima do input)
   que o bloco de Responsável (child 15) — layout de coluna única. */
#section-agendamento-bruto > div:nth-child(3) {
  display: block;
  width: 100%;
  box-sizing: border-box;
}

#section-agendamento-bruto > div:nth-child(3) label{
  display:block;
  margin:0 0 6px 0;
}

#section-agendamento-bruto > div:nth-child(3) .control{ width:100%; box-sizing:border-box; }

/* mapear label/input pares assumindo a estrutura label + .control */
#section-agendamento-bruto > div:nth-child(10) label:nth-child(1){ grid-column:1; grid-row:1 }
#section-agendamento-bruto > div:nth-child(10) label:nth-child(1) + .control{ grid-column:1; grid-row:2 }
#section-agendamento-bruto > div:nth-child(10) label:nth-child(3){ grid-column:2; grid-row:1 }
#section-agendamento-bruto > div:nth-child(10) label:nth-child(3) + .control{ grid-column:2; grid-row:2 }

#section-agendamento-bruto > div:nth-child(11) label:nth-child(1){ grid-column:1; grid-row:1 }
#section-agendamento-bruto > div:nth-child(11) label:nth-child(1) + .control{ grid-column:1; grid-row:2 }
#section-agendamento-bruto > div:nth-child(11) label:nth-child(3){ grid-column:2; grid-row:1 }
#section-agendamento-bruto > div:nth-child(11) label:nth-child(3) + .control{ grid-column:2; grid-row:2 }

/* Forçar label do bloco 13 a ficar acima do input (label em bloco) */
#section-agendamento-bruto > div:nth-child(13) {
  display: block;
  width: 100%;
  box-sizing: border-box;
}

#section-agendamento-bruto > div:nth-child(13) label{
  display: block;
  margin: 0 0 6px 0;
}

#section-agendamento-bruto > div:nth-child(13) .control{ width:100%; box-sizing:border-box; }

/* Aplicar mesma regra para o bloco 6: label acima do input */
#section-agendamento-bruto > div:nth-child(6) {
  display: block;
  width: 100%;
  box-sizing: border-box;
}

#section-agendamento-bruto > div:nth-child(6) label{
  display: block;
  margin: 0 0 6px 0;
}

#section-agendamento-bruto > div:nth-child(6) .control{ width:100%; box-sizing:border-box; }

/* Três colunas para campos RG / CPF / Telefone quando for necessário */
.three-inline{ display:flex !important; flex-direction:row !important; gap:12px !important; align-items:start !important; width:100%; box-sizing:border-box }
.three-inline .col{ flex:1 1 0; min-width:0; box-sizing:border-box }
.three-inline .col label{ display:block; margin:0 0 6px 0 }
.three-inline .col .control{ width:100%; box-sizing:border-box }


#section-agendamento-bruto > div:nth-child(3) label:nth-child(1){ grid-column:1; grid-row:1 }
#section-agendamento-bruto > div:nth-child(3) label:nth-child(1) + .control{ grid-column:1; grid-row:2 }
#section-agendamento-bruto > div:nth-child(3) label:nth-child(3){ grid-column:2; grid-row:1 }
#section-agendamento-bruto > div:nth-child(3) label:nth-child(3) + .control{ grid-column:2; grid-row:2 }

/* Ajuste do bloco 9: usar flexbox para permitir labels lado a lado quando desejado */
#section-agendamento-bruto > div:nth-child(9) {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
  align-items: center !important;
  width: 100%;
  box-sizing: border-box;
}

/* Tornar labels no bloco 9 inline e com width automática (ocupando só o necessário) */
#section-agendamento-bruto > div:nth-child(9) > label{
  display: inline-flex !important;
  align-items: center !important;
  width: auto !important;
  margin: 0 !important;
  gap: 8px !important;
}

/* Inputs imediatamente seguintes aos labels devem ficar inline e com width automática */
#section-agendamento-bruto > div:nth-child(9) > label + .control,
#section-agendamento-bruto > div:nth-child(9) > label + input.control,
#section-agendamento-bruto > div:nth-child(9) > label + input[type="text"]{
  display: inline-block !important;
  width: auto !important;
  min-width: 120px !important;
}

/* Tornar o segundo label do bloco 9 (e seu(s) label(s) irmãos imediatos) inline e com largura conforme conteúdo,
   semelhante ao comportamento do label do bloco 8 */
#section-agendamento-bruto > div:nth-child(9) > label:nth-child(2),
#section-agendamento-bruto > div:nth-child(9) > label:nth-child(2) ~ label{
  display: inline-flex !important;
  align-items: center !important;
  width: auto !important;
  margin: 0 16px 0 0 !important;
  gap: 8px !important;
}

/* Garantir que os inputs/radios dentro desses labels não ocupem 100% */
#section-agendamento-bruto > div:nth-child(9) > label:nth-child(2) input,
#section-agendamento-bruto > div:nth-child(9) > label:nth-child(2) .control,
#section-agendamento-bruto > div:nth-child(9) > label:nth-child(2) ~ label input,
#section-agendamento-bruto > div:nth-child(9) > label:nth-child(2) ~ label .control{
  width: auto !important;
  display: inline-block !important;
}

/* Label real para Destinatário (inserida no HTML) */
.section-heading, #destinatarioHeading, #remetenteHeading{
  font-weight:700; /* negrito */
  /* 1pt maior que o tamanho padrão do texto do container */
  font-size: calc(1em + 1pt);
  margin: 50px 0 30px 0; /* 50px top, 30px bottom conforme solicitado */
  color: #111;
  display:block;
}

/* (removido bloco redundante de .remetente-heading — agora ambos usam .section-heading) */

/* Garantir que o label dentro do segundo bloco ocupe 100% da largura */
#section-agendamento-bruto > div:nth-child(2) > label{
  display:block;
  width:100%;
  box-sizing:border-box;
}

/* Ajuste específico para o bloco 9: input ocupa 100% e radios vão para a linha abaixo */
#section-agendamento-bruto > div:nth-child(9) > div{
  width:100% !important;
  display:flex !important;
  flex-direction:column !important;
  gap:8px !important;
  box-sizing:border-box;
}

#section-agendamento-bruto > div:nth-child(9) > div .control,
#section-agendamento-bruto > div:nth-child(9) > div input.control,
#section-agendamento-bruto > div:nth-child(9) > div input[type="text"],
#section-agendamento-bruto > div:nth-child(9) > div textarea{
  width:100% !important;
  box-sizing:border-box;
}

/* Garantir que os labels (radios) dentro do bloco 9 fiquem em linha separada abaixo do input */
#section-agendamento-bruto > div:nth-child(9) > div label{
  display:block !important;
  margin-top:6px !important;
}

/* Se houver .group-label no bloco 9, mantê-lo acima dos radios e com espaçamento */
#section-agendamento-bruto > div:nth-child(9) > div .group-label{
  display:block !important;
  margin-bottom:6px !important;
}

/* Radios do bloco 9: usar o estilo global de `input[type="radio"]`; apenas garantir display e espaçamento */
#section-agendamento-bruto > div:nth-child(9) input[type="radio"],
#section-agendamento-bruto > div:nth-child(9) > label input[type="radio"]{
  display: inline-block !important;
  width: 15px !important; /* acompanhar tamanho global */
  height: 15px !important;
  min-width: 15px !important;
  min-height: 15px !important;
  margin: 0 8px 0 0 !important;
  vertical-align: middle !important;
  box-sizing: border-box !important;
}

/* Override: fazer label e inputs do bloco 2 ocuparem toda a largura das colunas */
#section-agendamento-bruto > div:nth-child(2) > label{
  grid-column: 1 / -1 !important;
}
#section-agendamento-bruto > div:nth-child(2) > .control,
#section-agendamento-bruto > div:nth-child(2) input.control{
  grid-column: 1 / -1 !important;
  width:100% !important;
  box-sizing:border-box;
}

/* Remover margin-bottom do bloco 8 do painel de agendamento */
#section-agendamento-bruto > div:nth-child(8){
  margin-bottom: 0 !important;
}

/* Remover linha divisória acima do rótulo 'Dashboard' (override específico) */
body > div > div > aside > nav > div:nth-child(1) > div{
  border-top: none !important;
}

/* Observações + duas caixas à direita (duas empilhadas) */
.obs-wrapper{ display:flex; gap:12px; align-items:stretch; width:100%; box-sizing:border-box }
.obs-left{ flex:1 1 0; min-width:0; display:flex; flex-direction:column; gap:6px }
.obs-right{ flex:1 1 0; min-width:0; display:flex; flex-direction:column; gap:12px }
.obs-right .obs-box{ flex:0 0 100px; height:100px; padding:12px; box-sizing:border-box; background:var(--card-bg); border-radius:8px }

/* usar a mesma box-shadow definida no topo do arquivo (linhas ~13-22) */
.obs-right .obs-box{
  /* shadow reduced to avoid overflowing the card while keeping a soft lift */
  box-shadow: 0 6px 18px rgba(0,0,0,0.08), inset 0 2px 6px rgba(255,255,255,0.6);
}

/* Aplicar o mesmo design do .card ao modal de cubagem */
#cubagemModal{
  background: var(--default-modal-bg);
  border-radius: var(--default-modal-border-radius);
  box-shadow: var(--default-modal-box-shadow);
  padding: 24px;
}

/* Forçar largura automática em modais específicos para respeitar conteúdo */
#clearMediasModalOverlay > div,
#cubagemModal,
#simulacaoModal {
  width: auto !important;
  max-width: 100% !important;
}

/* Modal de simulação (cartão): mesmo estilo “glass modal” padronizado */
#simulacaoModal{
  padding: var(--glass-modal-padding, 28px) !important;
  box-shadow: none !important;
  border: 1px solid var(--control-border) !important;
  box-sizing: border-box;
}
body:not(.dark) #simulacaoModal{
  background: var(--dropdown-bg) !important;
  backdrop-filter: blur(var(--glass-modal-blur, 22px)) !important;
  -webkit-backdrop-filter: blur(var(--glass-modal-blur, 22px)) !important;
}
/* Espaçamento interno maior apenas para o corpo do modal de cubagem */
#cubagemModal > .modal-body{
  padding: 50px;
  box-sizing: border-box;
}
/* Garantir que a textarea do modal de cubagem ocupe 100% da largura */
#cubagemModal .textarea-control,
#modalCubagemObs{
  width: 100% !important;
  box-sizing: border-box;
  display: block;
}
/* Garantir que a textarea dentro de .obs-left mantenha a mesma altura padrão e ocupe toda a coluna */
.obs-left .textarea-control{ height:250px !important; width:100%; box-sizing:border-box }

/* Colocar Origem e Destino na mesma linha (duas colunas iguais) */
.cotacao-two-cols{
  display:flex !important;
  gap:12px !important;
  width:100% !important;
  box-sizing:border-box !important;
  align-items:flex-start;
}
.cotacao-two-cols > .form-row{
  flex:1 1 0 !important;
  min-width:0 !important;
  display:flex !important;
  flex-direction:column !important;
  gap:6px !important;
  margin:0 !important;
}
.cotacao-two-cols .status-menu{ width:100% !important; box-sizing:border-box !important }

/* Garantir que o wrapper de origem/destino ocupe toda a largura do formulário grid */
#cotacaoForm > .cotacao-two-cols{
  grid-column: 1 / -1 !important;
  width:100% !important;
  box-sizing:border-box !important;
}

  #cotacaoForm{ grid-template-columns: repeat(3, 1fr); gap: 12px; }

  /* Posicionar os três campos sequenciais nas colunas 1,2 e 3 */
  #cotacaoForm > div:nth-child(5){ grid-column: 1 / 2; }
  #cotacaoForm > div:nth-child(6){ grid-column: 2 / 3; }
  #cotacaoForm > div:nth-child(7){ grid-column: 3 / 4; }

  /* Garantir que os inputs internos ocupem 100% de sua coluna */
  #cotacaoForm > div:nth-child(5) .control,
  #cotacaoForm > div:nth-child(6) .control,
  #cotacaoForm > div:nth-child(7) .control{ width:100% !important; box-sizing:border-box !important; }

/* Página de Usuários: permitir que o container principal adapte a largura conforme o conteúdo */
.users-card{
  min-width: 0 !important;
  width: auto !important;
  max-width: none !important;
  display: block; /* manter comportamento de bloco dentro do layout */
  box-sizing: border-box;
}

/* Padding para o campo de observações */
#inputObs{
  padding: 50px !important;
  box-sizing: border-box;
  /* permitir quebra automática e lidar com palavras/sequências longas */
  white-space: pre-wrap; /* preservar quebras e permitir wrap */
  overflow-wrap: anywhere; /* quebra em pontos necessários, mais permissivo */
  word-break: break-word; /* compatibilidade ampla para motores diferentes */
  overflow-x: hidden; /* evitar scroll horizontal */
  resize: vertical; /* permitir redimensionar verticalmente se necessário */
}

/* Regra específica para ter maior especificidade que generic #cotacaoForm textarea { padding: 10px !important } */
#cotacaoForm textarea#inputObs { padding: 50px !important; }

/* Styles for injected Lucro / Comissão row */
.lucro-comissao-row{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:16px;
  margin-top:12px;
}
.lucro-comissao-row .lucro-block{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  flex: 1 1 50%;
  box-sizing: border-box;
}
.lucro-comissao-row .lucro-label{
  font-size: var(--form-font-size);
  color: var(--muted);
  font-weight: 400;
}
.lucro-comissao-row .loader-img{
  width:20px;
  height:20px;
  display:block;
}

/* Footer Apple Style */
.footer-apple-style {
  margin-top: 100px;
  border-top: 1px solid var(--control-border);
  height: 100px;
  display: flex;
  align-items: center;
  background: transparent;
  width: 100%;
}

.footer-container {
  max-width: 1180px;
  width: 100%;
  margin: 0 auto;
  padding: 0 40px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
  color: #86868b;
}

.footer-btn {
  background: transparent;
  border: none;
  color: #86868b;
  cursor: pointer;
  font-size: 14px;
  padding: 0;
  font-family: inherit;
  transition: color 0.2s;
}

.footer-btn:hover {
  text-decoration: none;
  color: #1d1d1f;
}
/* Strong override: force footer height on problematic pages (higher specificity + !important) */
body > footer.footer-apple-style, body > main > footer.footer-apple-style {
  height: 100px !important;
  min-height: 100px !important;
  margin-top: 100px !important;
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
}
/* Footer Apple Style */
.footer-apple-style {
  margin-top: 100px;
  border-top: 1px solid var(--control-border);
  height: 100px;
  display: flex;
  align-items: center;
  background: transparent;
  width: 100%;
}

.footer-container {
  max-width: 1180px;
  width: 100%;
  margin: 0 auto;
  padding: 0 40px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
  color: #86868b;
}

.footer-btn {
  background: transparent;
  border: none;
  color: #86868b;
  cursor: pointer;
  font-size: 14px;
  padding: 0;
  font-family: inherit;
  transition: color 0.2s;
}

.footer-btn:hover {
  text-decoration: none;
  color: #1d1d1f;
}
/* Table Footer Actions */
.table-header-title {
  padding: 16px 20px;
  margin-bottom: 10px;
}

.table-header-title h2 {
  font-size: 20px;
  font-weight: 600;
  color: #1d1d1f;
  margin: 0;
}

.table-footer-actions {
  display: flex;
  flex-direction: row;
  gap: 16px;
  margin-top: 50px;
  margin-bottom: 15px;
  padding: 0 4px;
  justify-content: flex-end;
  margin-right: 28px;
  align-items: center;
}

.table-footer-left {
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  padding: 12px;
  padding-bottom: 12px;
  overflow-x: auto;
  overflow-y: hidden;
  width: 100%;
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-color-firefox);
  align-items: center;
}

.table-footer-left::-webkit-scrollbar {
  height: var(--scrollbar-height);
  width: var(--scrollbar-width);
}

.table-footer-left::-webkit-scrollbar-track {
  background: var(--scrollbar-track-color);
}

.table-footer-left::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb-color);
  border-radius: var(--scrollbar-thumb-radius);
}

.table-footer-left::-webkit-scrollbar-thumb:hover {
  background: rgba(0,0,0,0.18);
}



.faturamento-table {
  display: none;
}

.faturamento-table.active {
  display: table;
}

.table-footer-btns {
  display: flex;
  flex-direction: row;
  gap: 16px;
  align-items: center;
  margin-left: 15px;
}

.table-footer-btn {
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 5px 0;
}

.table-footer-btn img {
  width: 24px;
  height: 24px;
  object-fit: contain;
  opacity: 0.5;
  filter: brightness(0) saturate(100%);
  transition: opacity 0.2s;
}

/* Aumenta ícone do botão Adicionar para combinar com o ícone de Compartilhar */
.table-footer-btn-add img {
  width: 28px;
  height: 28px;
}


.table-footer-btn:hover img {
  opacity: 0.8;
}

/* Regras globais reutilizáveis para listas (itens) */
.list .item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:16px;
  border-radius:var(--list-item-border-radius);
  background: transparent; /* ativos: fundo transparente */
  margin-bottom:var(--list-item-gap);
  box-shadow: none; /* removida sombra, manter apenas borda */
  border: var(--list-active-border);
  transition: all var(--list-transition-duration) cubic-bezier(0.34, 1.56, 0.64, 1);
}

.list .item.inactive{
  background: var(--list-item-bg); /* inativos: fundo levemente sombreado pelo fundo, mas remover box-shadow */
  filter: var(--list-inactive-filter);
  opacity: var(--list-inactive-opacity);
  box-shadow: none;
  border: none;
  transition: all var(--list-transition-duration) cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Status pill global styles */
.status{padding:6px 10px;border-radius:999px;font-weight:700}
.status.active{background:var(--status-active-bg);color:var(--status-active-color)}
.status.inactive{background:var(--status-inactive-bg);color:var(--status-inactive-color)}

/* Keep media viewer modal configuration unchanged (no fixed width here) */
#mediaViewerModal {
  overflow: hidden !important;
  max-height: 90vh;
  max-width: 90vw;
  box-sizing: border-box;
}

#mediaViewerModal .modal-body {
  box-sizing: border-box;
  padding: 10px;
  display: block; /* permitir conteúdo crescer verticalmente */
  overflow-y: auto; /* mostrar barra de rolagem vertical quando necessário */
  max-height: 90vh; /* limitar altura do modal e permitir scroll interno */
  position: relative;
}

/* Hover: escurecer levemente a imagem dentro do viewer e mostrar o botão de compartilhar */
#mediaViewerModal { position: relative; }
#mediaViewerModal .modal-body img { transition: filter 180ms ease, transform 120ms ease; display:block; max-width:100%; height:auto; }
#mediaViewerModal .modal-body:hover img { filter: brightness(0.86); }

/* iframe/object usado para PDFs deve preencher a largura e permitir rolagem dentro do modal */
#mediaViewerModal .modal-body .viewer-content { box-sizing: border-box; display:block; width:100%; min-height:0; }
#mediaViewerModal .modal-body .viewer-iframe, #mediaViewerModal .modal-body .viewer-object {
  width: 100%;
  height: auto;
  min-height: 60vh;
  border: none;
  display: block;
}

/* Override: force modal to match image natural size, minimal padding (5px) */
/* Uses !important to override earlier general modal rules for the media viewer */
#mediaViewerModal {
  display: inline-block !important;
  width: auto !important;
  max-width: none !important;
  height: auto !important;
  max-height: none !important;
  padding: 5px !important;
  box-sizing: border-box !important;
}

#mediaViewerModal .modal-body {
  padding: 5px !important;
  overflow: visible !important;
  display: block !important;
}

#mediaViewerModal .viewer-content {
  display: block !important;
  padding: 0 !important;
}

/* Image keeps its natural size; if larger than viewport it scales down and modal follows */
#mediaViewerModal img,
#mediaViewerModal .viewer-content img {
  display: block !important;
  width: auto !important;
  height: auto !important;
  max-width: calc(100vw - 10px) !important; /* viewport minus 2*padding */
  max-height: calc(100vh - 10px) !important; /* viewport minus 2*padding */
  object-fit: contain !important;
}

/* Ensure overlay centers inline-block modal as before */
#mediaViewerOverlay .modal { margin: 0 auto; }

/* PDF canvas pages rendered via PDF.js */
#mediaViewerModal .modal-body .pdf-canvas { display:block; width:100%; height:auto; margin:12px 0; box-shadow: none; }
#mediaViewerModal .modal-body .viewer-content { width: 100%; }

/* Forçar rolagem vertical dentro do modal e empilhar páginas PDF */
#mediaViewerModal .modal-body {
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
}

#mediaViewerModal .modal-body .viewer-content {
  display: flex;
  flex-direction: column;
  align-items: stretch; /* não centralizar por padrão para não afetar imagens/PDFs */
  gap: 12px;
  width: 100%;
}

#mediaViewerModal .modal-body .pdf-canvas {
  margin: 12px auto;
  box-sizing: border-box;
}

/* DOCX viewer styles (Mammoth output) */
#mediaViewerModal .modal-body .viewer-docx {
  width: 100%;
  box-sizing: border-box;
  padding: 12px 16px;
  background: var(--modal-bg, #fff);
  color: var(--text-color, #222);
  line-height: 1.45;
  max-width: 900px; /* limitar largura horizontal apenas para docx */
  margin: 0 auto; /* centralizar dentro do modal */
  font-family: var(--font-sans, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial);
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-wrap: break-word;
}

/* Normalize common elements produced by Mammoth */
#mediaViewerModal .modal-body .viewer-docx * { box-sizing: border-box; }
#mediaViewerModal .modal-body .viewer-docx h1,
#mediaViewerModal .modal-body .viewer-docx h2,
#mediaViewerModal .modal-body .viewer-docx h3,
#mediaViewerModal .modal-body .viewer-docx h4,
#mediaViewerModal .modal-body .viewer-docx h5,
#mediaViewerModal .modal-body .viewer-docx h6 {
  margin: 0.75rem 0 0.5rem; font-weight:600; line-height:1.2;
}
#mediaViewerModal .modal-body .viewer-docx p { margin: 0.5rem 0; }
#mediaViewerModal .modal-body .viewer-docx ul,
#mediaViewerModal .modal-body .viewer-docx ol { margin: 0.5rem 0 0.5rem 1.25rem; }
#mediaViewerModal .modal-body .viewer-docx a { color: var(--link-color, #0366d6); text-decoration: underline; }

#mediaViewerModal .modal-body .viewer-docx img { max-width: 100%; height: auto; display:block; margin: 8px auto; }
#mediaViewerModal .modal-body .viewer-docx table { width: 100%; max-width: 100%; border-collapse: collapse; margin: 8px 0; }
#mediaViewerModal .modal-body .viewer-docx th,
#mediaViewerModal .modal-body .viewer-docx td { border: 1px solid rgba(0,0,0,0.08); padding: 6px 8px; text-align: left; word-break: break-word; }
#mediaViewerModal .modal-body .viewer-docx pre { white-space: pre-wrap; background: rgba(0,0,0,0.04); padding:8px; border-radius:6px; overflow:auto; }

#mediaViewerModal .modal-body .viewer-docx blockquote { border-left: 3px solid rgba(0,0,0,0.08); margin:8px 0; padding:8px 12px; color: rgba(0,0,0,0.7); background: rgba(0,0,0,0.02); }

#mediaViewerModal .modal-body .viewer-docx code { background: rgba(0,0,0,0.06); padding: 2px 6px; border-radius:4px; }

#mediaViewerModal .modal-body .viewer-docx .mammoth-generated { width:100%; }

/* Remover borda/outline do botão direto filho do modal de mídia */
#mediaViewerModal > button {
  width: 48px !important;
  height: 48px !important;
  min-width: 48px !important;
  min-height: 48px !important;
  max-width: 48px !important;
  max-height: 48px !important;
  border-radius: 50% !important;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #EEEEEE !important;
  box-shadow: none !important;
  border: none !important;
  cursor: pointer;
  overflow: hidden;
  outline: none !important;
  padding: 0 !important;
}

/* botão de compartilhar sobre a imagem (aparece ao passar o mouse) */
.media-share-btn {
  position: absolute;
  top: 42px; /* 12px + 30px: mover 30px para baixo */
  right: 42px; /* 12px + 30px: mover 30px para a esquerda */
  width: 42px;
  height: 42px;
  background-color: #f1f1f1;
  /* usar fundo sólido igual ao container do modal de mídia; !important evita overrides */
  border: none;
  border-radius: 50% !important; /* garantir que apenas este botão seja circular */
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1001;
  box-shadow:
    -6px -6px 16px rgba(255, 255, 255, 0.8),
    6px 6px 16px rgba(0, 0, 0, 0.1),
    inset -2px -2px 8px rgba(255, 255, 255, 0.3),
    inset 2px 2px 8px rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
  padding: 0;
  outline: none;
  opacity: 1; /* tornar visível por padrão */
  pointer-events: auto; /* permitir interação */
}
.media-share-btn img { width: 20px; height: 20px; object-fit: contain; opacity: 0.7; filter: brightness(0) saturate(100%); transition: opacity 180ms ease; }
#mediaViewerModal .modal-body:hover + .media-share-btn,
#mediaViewerModal .modal-body:hover .media-share-btn,
#mediaViewerModal:hover .media-share-btn { opacity: 1; pointer-events: auto; transform: translateY(0); }

/* hover/active like map-layer-toggle */
.media-share-btn:hover { transform: translateY(-2px); box-shadow: -8px -8px 20px rgba(255,255,255,0.9), 8px 8px 20px rgba(0,0,0,0.15), inset -2px -2px 8px rgba(255,255,255,0.4), inset 2px 2px 8px rgba(0,0,0,0.06); }
.media-share-btn:active { transform: translateY(0); box-shadow: -2px -2px 8px rgba(255,255,255,0.7), 2px 2px 8px rgba(0,0,0,0.15), inset -4px -4px 12px rgba(255,255,255,0.2), inset 4px 4px 12px rgba(0,0,0,0.1); }
.media-share-btn:focus { outline: 2px solid rgba(0,0,0,0.08); }
.media-share-btn:hover img { opacity: 0.9; }

/* Mensagens do viewer removidas: estilos relacionados ao painel de mensagens foram eliminados */

/* Seção de mídias (body > section:nth-child(12)) - fundo radial mais visível */
body > section:nth-child(12) {
  background: transparent !important;
  padding: var(--media-section-padding) !important;
  /* sem border-radius e sem box-shadow (fundo flush) */
  border-radius: 0;
  box-shadow: none;
  box-sizing: border-box;
}

/* Garantir que o primeiro filho <div> da seção de mídias preencha toda a altura do container */
body > section:nth-child(12) { display: grid; }
body > section:nth-child(12) > div { width: 100%; height: 100%; box-sizing: border-box; align-self: stretch; justify-self: stretch; }

/* Restaurar linha divisória entre a seção de mídias e a próxima seção (documentos) */
body > section:nth-child(12) + section {
  border-top: 1px solid var(--control-border) !important;
  box-sizing: border-box;
}
/* Remover margin-top do header da seção de documentos (override global) */
body > section:nth-child(12) + section > header {
  margin-top: 0 !important;
}
body > section:nth-child(12) + section .form-divider,
body > section:nth-child(12) + section .section-line-divider,
body > section:nth-child(12) + section hr {
  display: block !important;
  border-top: 1px solid var(--control-border) !important;
  background: transparent !important;
  margin: 12px 0 !important;
}

/* Limitar altura do card direito em Operacional (para evitar altura excessiva) */
body > section:nth-child(14) > div.media-wrapper > div > div:nth-child(2) > div:nth-child(2) {
  box-sizing: border-box;
}

/* Limitar primeiro filho do card direito se necessário */
body > section:nth-child(14) > div.media-wrapper > div > div:nth-child(2) > div:nth-child(2) > div:nth-child(1) {
  max-height: 240px;
  overflow: auto;
}
/* Ajuste específico: aumentar o tamanho do texto do botão 'Extrair' na área principal */
#extractBtn {
  font-size: 16px;
}
/* Tornar o título 'Cotações' claramente visível no modo escuro (sobrescreve estilo inline) */
body.dark main > .header > .titles > h1 {
  color: #ffffff !important;
}

/* Dark-mode variable overrides (clean approach: update variables only) */
body.dark{
  --control-border: rgba(255,255,255,0.06);

/* Smooth theme transition: add this class to body briefly when toggling theme */


  --divider: rgba(255,255,255,0.06);
}

/* Theme transition removed: no runtime transition on theme toggle */

/* Minimal login button styling to match 'Despesas' look without importing other styles */
#loginSubmit.label-bottom.clickable{
  display:inline-block;
  width:100%;
  padding:10px 14px;
  border-radius:14px;
  background:#f2f2f7;
  color:#1d1d1f;
  border:0;
  cursor:pointer;
  transition: background-color .18s;
}
#loginSubmit.label-bottom.clickable:hover:not(:disabled){
  background:#e5e5ea;
}
#loginSubmit:disabled{opacity:.6;cursor:default}

/* Ensure font color and hover color match 'Despesas' in light and dark modes */
#loginSubmit.label-bottom.clickable{ color: #1d1d1f; }
body.dark #loginSubmit.label-bottom.clickable{ color: #ffffff; background: #2b2b2b; }
body.dark #loginSubmit.label-bottom.clickable:hover:not(:disabled){ background: #3a3a3a; }

/* Evitar efeito de "esticando" por reflow/transitions */
body > div > div.card-transparent,
.side-inline-card,
.side-inline-card > .side-card,
.side-inline-card .side-map,
.side-inline-card .map-placeholder,
#map,
.leaflet-container {
  transition: none !important;
}

/* ---- THEMES (ui_theme) ---- */
body.theme-royal::before {
  /* fundo azul royal (muda apenas o base) */
  background:
    radial-gradient(1200px 800px at 10% 10%, rgba(7, 27, 87, 0.55), rgba(0,0,0,0) 60%),
    radial-gradient(1000px 700px at 90% 20%, rgba(4, 11, 84, 0.35), rgba(0,0,0,0) 55%),
    radial-gradient(900px 600px at 50% 95%, rgba(10, 10, 61, 0.55), rgba(0,0,0,0) 60%),
    linear-gradient(180deg, #09102c 0%, #000221 100%);
}

body.theme-royal::after {
  /* remove o overlay escuro do noturno para deixar o azul aparecer */
  opacity: 0 !important;
}
/* (moved) Localized month-container contrast rules were moved to financeiro/financeiro.css */

/* ---- THEME SAKURA (light pink, same typography/colors as light) ---- */
body.theme-sakura::before {
  background:
    radial-gradient(1200px 800px at 10% 10%, rgba(255, 149, 165, 0.75), rgba(0,0,0,0) 60%),
    radial-gradient(1000px 700px at 90% 20%, rgba(247, 179, 190, 0.55), rgba(0,0,0,0) 55%),
    radial-gradient(900px 600px at 50% 95%, rgba(255, 228, 235, 0.85), rgba(0,0,0,0) 60%),
    linear-gradient(180deg, #ffdeea 0%, #ffeaf1 100%);
}

body.theme-sakura::after {
  opacity: 0 !important;
}

/* ---- THEME SAKURA: timeline segments pink override ---- */
body.theme-sakura .work-overview .timeline .segment-1::before,
body.theme-sakura > div > section.work-overview-section > div > div > div.timeline > div.segment-1::before {
  background-image:
    radial-gradient(circle at 20% 30%, rgba(237, 192, 255, 0.98) 0%, rgba(254, 132, 250, 0.85) 18%, transparent 48%),
    radial-gradient(circle at 80% 70%, rgba(255,192,203,0.95) 0%, rgba(255,150,170,0.3) 20%, transparent 56%);
  background-position: 20% 30%, 80% 70%;
  animation: move-bg-1 9s ease-in-out infinite;
}

body.theme-sakura .work-overview .timeline .segment-2::before,
body.theme-sakura > div > section.work-overview-section > div > div > div.timeline > div.segment-2::before {
  background-image:
    radial-gradient(circle at 20% 60%, rgba(255,182,215,0.98) 0%, rgba(255,105,180,0.18) 18%, transparent 48%),
    radial-gradient(circle at 75% 25%, rgba(255,130,200,0.95) 0%, rgba(255,20,147,0.3) 20%, transparent 56%);
  background-position: 10% 60%, 75% 25%;
  animation: move-bg-2 10s ease-in-out infinite;
}

body.theme-sakura .work-overview .timeline .segment-3::before,
body.theme-sakura > div > section.work-overview-section > div > div > div.timeline > div.segment-3::before {
  background-image:
    radial-gradient(circle at 30% 20%, rgba(255,150,200,0.98) 0%, rgba(255,110,170,0.34) 18%, transparent 48%),
    radial-gradient(circle at 70% 75%, rgba(255,180,210,0.95) 0%, rgba(255,140,185,0.3) 20%, transparent 56%);
  background-position: 30% 20%, 70% 75%;
  animation: move-bg-3 10s ease-in-out infinite;
}

body.theme-sakura .work-overview .timeline .segment-4::before,
body.theme-sakura > div > section.work-overview-section > div > div > div.timeline > div.segment-4::before {
  background-image:
    radial-gradient(circle at 25% 75%, rgba(255, 189, 246, 0.98) 0%, rgba(253, 116, 146, 0.36) 18%, transparent 48%),
    radial-gradient(circle at 80% 20%, rgba(253, 138, 195, 0.95) 0%, rgba(255,160,200,0.3) 20%, transparent 56%);
  background-position: 25% 75%, 80% 20%;
  animation: move-bg-4 12s ease-in-out infinite;
}

/* Align research progress bars with sakura timeline segment colors */
body.theme-sakura .user-research-section .bar-part-1-left::before,
body.theme-sakura > div > section.user-research-section > div > div > div.research-grid > div .bar-part-1-left::before {
  background-image:
    radial-gradient(circle at 20% 30%, rgba(231, 231, 231, 0.98) 0%, rgba(255, 255, 255, 0.85) 18%, transparent 48%),
    radial-gradient(circle at 80% 70%, rgba(255,192,203,0.95) 0%, rgba(255,150,170,0.3) 20%, transparent 56%);
  background-size: 600% 600%;
  animation: research-bar-move-1 5s ease-in-out infinite;
}

body.theme-sakura .user-research-section .bar-part-1-right::before,
body.theme-sakura > div > section.user-research-section > div > div > div.research-grid > div .bar-part-1-right::before {
  background-image:
    radial-gradient(circle at 20% 30%, rgba(237, 192, 255, 0.98) 0%, rgba(200, 160, 230, 0.85) 18%, transparent 48%),
    radial-gradient(circle at 80% 70%, rgba(255,192,203,0.9) 0%, rgba(200,150,180,0.28) 20%, transparent 56%);
  background-size: 300% 300%;
  animation: research-bar-move-1 5s ease-in-out infinite;
}

body.theme-sakura .user-research-section .bar-part-2-left::before,
body.theme-sakura > div > section.user-research-section > div > div > div.research-grid > div .bar-part-2-left::before {
  background-image:
    radial-gradient(circle at 20% 60%, rgba(255,182,215,0.98) 0%, rgba(255,105,180,0.18) 18%, transparent 48%),
    radial-gradient(circle at 75% 25%, rgba(255,130,200,0.95) 0%, rgba(255,20,147,0.3) 20%, transparent 56%);
  background-size: 600% 600%;
  animation: research-bar-move-2 7s ease-in-out infinite;
}

body.theme-sakura .user-research-section .bar-part-2-right::before,
body.theme-sakura > div > section.user-research-section > div > div > div.research-grid > div .bar-part-2-right::before {
  background-image:
    radial-gradient(circle at 20% 60%, rgba(255,182,215,0.98) 0%, rgba(255,105,180,0.18) 18%, transparent 48%),
    radial-gradient(circle at 75% 25%, rgba(255,130,200,0.95) 0%, rgba(255,20,147,0.3) 20%, transparent 56%);
  background-size: 300% 300%;
  animation: research-bar-move-2 7s ease-in-out infinite;
}

body.theme-sakura .user-research-section .bar-part-3-left::before,
body.theme-sakura > div > section.user-research-section > div > div > div.research-grid > div .bar-part-3-left::before {
  background-image:
    radial-gradient(circle at 30% 20%, rgba(255,150,200,0.98) 0%, rgba(255,110,170,0.34) 18%, transparent 48%),
    radial-gradient(circle at 70% 75%, rgba(255,180,210,0.95) 0%, rgba(255,140,185,0.3) 20%, transparent 56%);
  background-size: 600% 600%;
  animation: research-bar-move-3 10s ease-in-out infinite;
}

body.theme-sakura .user-research-section .bar-part-3-right::before,
body.theme-sakura > div > section.user-research-section > div > div > div.research-grid > div .bar-part-3-right::before {
  background-image:
    radial-gradient(circle at 30% 20%, rgba(255,150,200,0.98) 0%, rgba(255,110,170,0.34) 18%, transparent 48%),
    radial-gradient(circle at 70% 75%, rgba(255,180,210,0.95) 0%, rgba(255,140,185,0.3) 20%, transparent 56%);
  background-size: 300% 300%;
  animation: research-bar-move-3 10s ease-in-out infinite;
}

/* Ajuste localizado: cor do seletor de tema por contexto */
/* modo noturno: usar cor clara */
body.dark #Theme-Select {
  color: var(--nav-link-color) !important;
  background-color: transparent !important;
}
/* tema sakura (claro): manter texto escuro */
body.theme-sakura #Theme-Select {
  color: #1d1d1f !important;
  background-color: transparent !important;
}