:root {
     --sidebar-width: 250px;
     --sidebar-width-collapsed: 80px;
 }

 body {
     font-family: 'Inter', sans-serif;
     background-color: #f0f2f5;
 }

 .page {
     display: none;
 }

 .page.active {
     display: block;
 }

 .loading-spinner {
     border: 4px solid rgba(255, 255, 255, 0.3);
     width: 36px;
     height: 36px;
     border-radius: 50%;
     border-left-color: #fff;
     animation: spin 1s ease infinite;
 }

 @keyframes spin {
     0% {
         transform: rotate(0deg);
     }

     100% {
         transform: rotate(360deg);
     }
 }

 .signature-pad-container {
     border: 2px dashed #ccc;
     border-radius: 0.5rem;
     position: relative;
 }

.signature-pad-container canvas {
    width: 100% !important;
    height: 100% !important;
    display: block;
    touch-action: none; /* Importante para não rolar a página enquanto desenha */
}

 .accordion-header {
     cursor: pointer;
     transition: background-color 0.3s ease;
 }

 .accordion-content {
     max-height: 0;
     overflow: hidden;
     transition: max-height 0.3s ease-out;
 }

 .accordion-content.open {
     max-height: 3000px;
 }

 #sidebar {
     transition: transform 0.3s ease-in-out, width 0.3s ease-in-out;
     transform: translateX(-100%);
 }

 #main-content-wrapper {
     transition: margin-left 0.3s ease-in-out;
 }

 #sidebar-overlay {
     transition: opacity 0.3s ease-in-out;
 }

 @media (min-width: 768px) {
     #sidebar {
         transform: translateX(0);
     }

     #main-content-wrapper {
         margin-left: var(--sidebar-width);
     }

     #sidebar.collapsed {
         width: var(--sidebar-width-collapsed);
     }

     #sidebar.collapsed .sidebar-text,
     #sidebar.collapsed #sidebar-header-text,
     #sidebar.collapsed #user-info-details {
         display: none;
     }

     #sidebar.collapsed .nav-link,
     #sidebar.collapsed #logout-btn {
         justify-content: center;
     }

     #main-content-wrapper.collapsed {
         margin-left: var(--sidebar-width-collapsed);
     }
 }

 #sidebar.open {
     transform: translateX(0);
 }

 /* Adicione estas classes dentro da sua tag <style> */
 #online-status-icon.online {
     background-color: #22c55e;
     /* green-500 */
 }

 #online-status-icon.offline {
     background-color: #ef4444;
     /* red-500 */
 }

 .radio-label {
     display: inline-block;
     padding: 0.5rem 1rem;
     border: 2px solid #d1d5db;
     border-radius: 9999px;
     cursor: pointer;
     transition: all 0.2s ease-in-out;
     font-weight: 500;
     min-width: 80px;
     text-align: center;
 }

 .radio-label-bom {
     color: #15803d;
     border-color: #4ade80;
 }

 .radio-label-ruim {
     color: #b91c1c;
     border-color: #f87171;
 }

 .radio-label-na {
     color: #4b5563;
     border-color: #9ca3af;
 }

 .radio-label-bom:hover {
     background-color: #dcfce7;
 }

 .radio-label-ruim:hover {
     background-color: #fee2e2;
 }

 .radio-label-na:hover {
     background-color: #f3f4f6;
 }

 input[type="radio"]:checked+.radio-label-bom {
     background-color: #22c55e;
     border-color: #22c55e;
     color: white;
     box-shadow: 0 4px 14px 0 rgba(34, 197, 94, 0.39);
     transform: scale(1.05);
 }

 input[type="radio"]:checked+.radio-label-ruim {
     background-color: #ef4444;
     border-color: #ef4444;
     color: white;
     box-shadow: 0 4px 14px 0 rgba(239, 68, 68, 0.39);
     transform: scale(1.05);
 }

 input[type="radio"]:checked+.radio-label-na {
     background-color: #6b7280;
     border-color: #6b7280;
     color: white;
     box-shadow: 0 4px 14px 0 rgba(107, 114, 128, 0.39);
     transform: scale(1.05);
 }

 .sr-only {
     position: absolute;
     width: 1px;
     height: 1px;
     padding: 0;
     margin: -1px;
     overflow: hidden;
     clip: rect(0, 0, 0, 0);
     white-space: nowrap;
     border-width: 0;
 }

 .uppercase-input {
     text-transform: uppercase;
 }

 /* Estilos do Calendário */
 .calendar-grid {
     display: grid;
     grid-template-columns: repeat(7, 1fr);
     gap: 1px;
 }

 .calendar-day {
     min-height: 100px;
 }

 .calendar-day.other-month {
     background-color: #f9fafb;
     color: #a1a1aa;
 }

 .schedule-dot {
     width: 8px;
     height: 8px;
     border-radius: 50%;
     display: inline-block;
     margin-right: 4px;
 }

 /* SUBSTITUA O SEU BLOCO @media print POR ESTE */
 @media print {

     /* REGRA MÁGICA: FORÇA A IMPRESSÃO DAS CORES DE FUNDO */
     * {
         -webkit-print-color-adjust: exact !important;
         print-color-adjust: exact !important;
     }

     body {
         background-color: white;
     }

     body * {
         visibility: hidden;
     }

     /* Regras para tornar as seções de relatório visíveis */
     #view-container,
     #view-container *,
     #client-report-page #report-container,
     #client-report-page #report-container *,
     #recurrence-report-page #recurrence-results,
     #recurrence-report-page #recurrence-results *,
     #finance-page #finance-report-results,
     #finance-page #finance-report-results *,
     #pendencies-page #pendencies-list,
     #pendencies-page #pendencies-list *,
     #smoke-pendencies-page #smoke-pendencies-list,
     #smoke-pendencies-page #smoke-pendencies-list * {
         visibility: visible;
     }

     /* Posicionamento para impressão */
     #view-container,
     #client-report-page #report-container,
     #recurrence-report-page #recurrence-results,
     #finance-page #finance-report-results,
     #pendencies-page #pendencies-list,
     #smoke-pendencies-page #smoke-pendencies-list {
         color: #000;
         position: absolute;
         left: 0;
         top: 0;
         width: 100%;
         margin: 0;
         padding: 0;
         /* Removido padding extra para caber melhor */
         border: none;
         box-shadow: none;
         border-radius: 0;
         background-color: white !important;
         /* Garante fundo branco no container principal */
     }

     /* Garante que os boxes de observação mantenham a cor */
     .bg-gray-50 {
         background-color: #f9fafb !important;
         border: 1px solid #e5e7eb !important;
         /* Adiciona borda para contraste na impressão */
     }

     .bg-red-50 {
         background-color: #fef2f2 !important;
         border: 1px solid #fee2e2 !important;
     }

     .page-break-avoid {
         page-break-inside: avoid;
     }
 }

 /* Regra auxiliar (deve ficar FORA do @media print) */
 .print-header-only {
     display: none;
 }

 .drag-handle {
     cursor: move;
     /* ou 'grab' */
     margin-right: 1rem;
     color: #9ca3af;
 }

 .dragging {
     opacity: 0.5;
     background-color: #e0f2fe;
 }

 /* Adicione estas novas regras de estilo */
 .dragging {
     opacity: 0.5;
     transform: scale(0.95);
 }

 .drop-target {
     background-color: #dbeafe !important;
     /* Azul claro para indicar onde soltar */
     border: 2px dashed #3b82f6;
 }

 /* COLE ESTE BLOCO DENTRO DA SUA TAG <style> (NÃO DENTRO DO @media print) */

 /* --- Estilos para a Escala Ringelmann Visual --- */
 @media (max-width: 640) {
 .radio-ringelmann {
     display: flex;
     align-items: center;
     justify-content: center;
     width: 100%;
     padding: 0.75rem 0.25rem;
     border: 2px solid #d1d5db;
     /* Borda cinza-padrão */
     border-radius: 0.5rem;
     cursor: pointer;
     transition: all 0.2s ease-in-out;
     font-weight: 600;
     text-align: center;
     font-size: 0.875rem;
     /* 14px */
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
 }
}

 /* Cor de fundo e texto para cada nível */
 .radio-ringelmann-0 {
     background-color: #ffffff;
     border-color: #9ca3af;
     color: #1f2937;
 }

 .radio-ringelmann-1 {
     background-color: #e5e7eb;
     border-color: #9ca3af;
     color: #1f2937;
 }

 .radio-ringelmann-2 {
     background-color: #9ca3af;
     border-color: #6b7280;
     color: #ffffff;
 }

 .radio-ringelmann-3 {
     background-color: #6b7280;
     border-color: #4b5563;
     color: #ffffff;
 }

 .radio-ringelmann-4 {
     background-color: #4b5563;
     border-color: #374151;
     color: #ffffff;
 }

 .radio-ringelmann-5 {
     background-color: #1f2937;
     border-color: #000000;
     color: #ffffff;
 }

 /* Estilo para o botão que está selecionado */
 /* O "input:checked + label" significa: "Encontre o input que está marcado,
		   e aplique este estilo à label que vem logo a seguir a ele" */
 input[type="radio"]:checked+.radio-ringelmann {
     transform: scale(1.05);
     /* Efeito de zoom ligeiro */
     box-shadow: 0 0 0 3px #3b82f6;
     /* Destaque azul (blue-500) */
     border-color: #3b82f6 !important;
     /* Borda azul */
 }

 /* --- ESTILOS DO MODO NOTURNO --- */

 /* Fundo e texto base */
 body.dark-mode {
     background-color: #111827 !important;
     /* gray-900 */
     color: #f3f4f6 !important;
     /* gray-100 */
 }

 /* Cartões e Modais */
 body.dark-mode .bg-white {
     background-color: #1f2937 !important;
     /* gray-800 */
     color: #e5e7eb !important;
     /* gray-200 */
 }

 /* Textos Escuros viram Claros */
 body.dark-mode .text-gray-900,
 body.dark-mode .text-gray-800,
 body.dark-mode .text-gray-700 {
     color: #f3f4f6 !important;
 }

 body.dark-mode .text-gray-600,
 body.dark-mode .text-gray-500 {
     color: #9ca3af !important;
     /* gray-400 */
 }

 /* Inputs, Selects e Textareas */
 body.dark-mode input,
 body.dark-mode select,
 body.dark-mode textarea {
     background-color: #374151 !important;
     /* gray-700 */
     border-color: #4b5563 !important;
     /* gray-600 */
     color: #ffffff !important;
 }

 body.dark-mode input::placeholder {
     color: #9ca3af !important;
 }

 /* Tabelas */
 body.dark-mode thead.bg-gray-50,
 body.dark-mode thead.bg-gray-700 {
     background-color: #111827 !important;
     /* gray-900 */
 }

 body.dark-mode tbody.bg-white tr:hover,
 body.dark-mode .hover\:bg-gray-50:hover,
 body.dark-mode .hover\:bg-gray-100:hover {
     background-color: #374151 !important;
     /* gray-700 */
 }

 body.dark-mode td,
 body.dark-mode th {
     border-color: #374151 !important;
 }

 /* Bordas e Divisores */
 body.dark-mode .border-gray-200,
 body.dark-mode .border-gray-300 {
     border-color: #4b5563 !important;
 }

 /* Botões de Rádio da Escala Ringelmann */
 body.dark-mode .radio-ringelmann {
     border-color: #4b5563;
     background-color: #374151;
     color: #fff;
 }

 /* Ajuste específico para os níveis claros no modo escuro */
 body.dark-mode .radio-ringelmann-0,
 body.dark-mode .radio-ringelmann-1 {
     background-color: #4b5563;
     color: #fff;
 }

 /* Exceções Importantes */
 body.dark-mode .text-red-500,
 body.dark-mode .text-red-600 {
     color: #f87171 !important;
 }

 /* Vermelho mais claro */
 body.dark-mode .text-green-500,
 body.dark-mode .text-green-600 {
     color: #4ade80 !important;
 }

 /* Verde mais claro */
 body.dark-mode .text-blue-600 {
     color: #60a5fa !important;
 }

 /* Azul mais claro */

 /* Sidebar e Header Mobile */
 body.dark-mode #sidebar {
     background-color: #0f172a !important;
     /* slate-900 */
     border-right: 1px solid #374151;
 }

 body.dark-mode header.bg-white {
     background-color: #1f2937 !important;
     border-bottom: 1px solid #374151;
 }

 body.dark-mode .bg-gray-50 {
     background-color: #374151 !important;
     /* gray-700 (mesma cor dos inputs) */
     border-color: #4b5563 !important;
     /* gray-600 */
     color: #f3f4f6 !important;
     /* texto claro */
 }

 /* Classe utilitária para esconder barra de rolagem */
 .no-scrollbar::-webkit-scrollbar {
     display: none;
 }

 .no-scrollbar {
     -ms-overflow-style: none;
     /* IE and Edge */
     scrollbar-width: none;
     /* Firefox */
 }

 /* Garante que o gráfico não estoure o container */
 .chart-container {
     position: relative;
     width: 100%;
     height: 100%;
     min-height: 0;
     /* Crucial para Flexbox */
 }

 /* Animação de Entrada do Toast */
 @keyframes slideInRight {
     from {
         transform: translateX(100%);
         opacity: 0;
     }

     to {
         transform: translateX(0);
         opacity: 1;
     }
 }

 .toast-enter {
     animation: slideInRight 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
 }

 /* Animação da Barra de Progresso do Toast */
 @keyframes toastProgress {
     from {
         width: 100%;
     }

     to {
         width: 0%;
     }
 }

 .toast-progress-bar {
     position: absolute;
     bottom: 0;
     left: 0;
     height: 4px;
     /* Altura da barra */
     /* background-color: rgba(255, 255, 255, 0.7);
            /* Cor branca semitransparente */
     width: 100%;
     border-bottom-left-radius: 0.25rem;
     /* Arredondar igual ao card */
     /* A duração será definida via JS inline para bater com o timeout */
 }

 @media print {
     * {
         -webkit-print-color-adjust: exact !important;
         print-color-adjust: exact !important;
     }

     @page {
         margin: 1cm;
         size: auto;
         /* FORÇA A FOLHA DEITADA PARA CABER TUDO */
     }

     body {
         background-color: white;
     }

     body * {
         visibility: hidden;
     }

     /* --- LISTA DO QUE DEVE APARECER NA IMPRESSÃO --- */
     #view-container,
     #view-container *,
     #client-report-page #report-container,
     #client-report-page #report-container *,
     #recurrence-report-page #recurrence-results,
     #recurrence-report-page #recurrence-results *,
     #finance-page #finance-report-results,
     #finance-page #finance-report-results *,
     #pendencies-page #pendencies-list,
     #pendencies-page #pendencies-list *,
     #smoke-pendencies-page #smoke-pendencies-list,
     #smoke-pendencies-page #smoke-pendencies-list *,
     #compliance-page,
     #compliance-page *,

     /* OCORRÊNCIAS VISÍVEIS */
     #incidents-page,
     #incidents-page .bg-white,
     #incidents-page table,
     #incidents-page table *,
     #incidents-print-header,
     #incidents-print-header * {
         visibility: visible;
     }

     /* --- RESET DE POSICIONAMENTO PARA A IMPRESSORA --- */
     #view-container,
     #client-report-page #report-container,
     #recurrence-report-page #recurrence-results,
     #finance-page #finance-report-results,
     #pendencies-page #pendencies-list,
     #smoke-pendencies-page #smoke-pendencies-list,
     #compliance-page,
     #incidents-page {
         position: static !important;
         width: 100% !important;
         margin: 0 !important;
         padding: 0 !important;
         background-color: white !important;
         box-shadow: none !important;
         border: none !important;
         overflow: visible !important;
     }

     /* --- ESTILOS ESPECÍFICOS: OCORRÊNCIAS (MELHORADO) --- */

     /* Esconde formulários, filtros e botões */
     #incidents-form-container,
     #incidents-filters,
     #inc-btn-print,
     #inc-btn-excel,
     #inc-btn-clear-filters,
     .delete-incident-btn,
     #incidents-page th:last-child,
     /* Cabeçalho da coluna Ação */
     #incidents-page td:last-child

     /* Botão da coluna Ação */
         {
         display: none !important;
     }

     /* Exibe o cabeçalho de impressão (Logo + Título) */
     #incidents-print-header {
         display: block !important;
         visibility: visible !important;
         margin-bottom: 10px;
         border-bottom: 2px solid #000;
         padding-bottom: 10px;
     }

     /* Tabela de Ocorrências - Layout Arrumado */
     #incidents-page table {
         width: 100% !important;
         table-layout: auto !important;
         /* Deixa o navegador ajustar conforme o texto */
         border-collapse: collapse !important;
         font-size: 11px !important;
         /* Fonte legível */
     }

     #incidents-page th,
     #incidents-page td {
         border: 1px solid #000 !important;
         /* Borda PRETA nítida */
         padding: 5px !important;
         color: #000 !important;
         vertical-align: top !important;
         word-wrap: break-word !important;
         white-space: normal !important;
     }

     /* Larguras Definidas para não espremer o Relato */
     #incidents-page th:nth-child(1) {
         width: 90px;
     }

     /* Data/Hora */
     #incidents-page th:nth-child(2) {
         width: 80px;
     }

     /* Tipo */
     #incidents-page th:nth-child(3) {
         width: 140px;
     }

     /* Transportadora (Mais espaço) */
     #incidents-page th:nth-child(4) {
         width: 80px;
     }

     /* Placa */
     #incidents-page th:nth-child(5) {
         width: 130px;
     }

     /* Motorista */
     #incidents-page th:nth-child(6) {
         width: auto;
     }

     /* Relato (Pega o resto da folha) */


     /* --- ESTILOS ESPECÍFICOS: COMPLIANCE --- */
     #compliance-form,
     #compliance-filters-container,
     #print-compliance-btn,
     .shadow-lg.mb-8,
     .delete-comp-btn,
     .edit-comp-btn,
     #compliance-page th:last-child,
     #compliance-page td:last-child {
         display: none !important;
     }

     #compliance-page table {
         width: 100% !important;
         table-layout: fixed;
         border-collapse: collapse;
     }

     #compliance-page th,
     #compliance-page td {
         font-size: 10px !important;
         padding: 4px !important;
         border: 1px solid #ccc !important;
         word-wrap: break-word !important;
         white-space: normal !important;
     }

     #compliance-print-header {
         display: block !important;
         visibility: visible !important;
         margin-bottom: 15px;
     }

     #compliance-page .shadow-lg {
         box-shadow: none !important;
     }
 }

 /* --- TRAVA DE ROLAGEM (IMPEDE O FUNDO DE MEXER) --- */
 body.no-scroll {
     overflow: hidden !important;
     height: 100vh !important;
     position: fixed;
     /* Trava absoluta no iOS */
     width: 100%;
 }

 /* --- CORREÇÃO DA ALTURA DO SIDEBAR NO MOBILE --- */
 #sidebar {
     /* Use 100dvh para ignorar a barra de endereços do navegador */
     height: 100dvh !important;
     max-height: -webkit-fill-available;
 }

 /* ========================================= */
 /* 🎨 TOOLTIP NO MENU RECOLHIDO (HOVER)     */
 /* ========================================= */
 @media (min-width: 768px) {

     /* 1. Permite que o tooltip "saia" para fora da barra lateral */
     #sidebar.collapsed,
     #sidebar.collapsed nav {
         overflow: visible !important;
     }

     /* 2. Define o link como ponto de referência */
     #sidebar.collapsed .nav-link {
         position: relative;
     }

     /* 3. Faz o texto reaparecer flutuando ao lado quando passa o mouse */
     #sidebar.collapsed .nav-link:hover .sidebar-text {
         display: block !important;
         position: absolute;
         left: 100%;
         /* Posiciona à direita do ícone */
         top: 50%;
         transform: translateY(-50%);
         /* Centraliza verticalmente */
         margin-left: 12px;
         /* Distância do ícone */

         /* Estilo do Balão */
         background-color: #1f2937;
         /* Cinza escuro (slate-800) */
         color: #ffffff;
         padding: 6px 12px;
         border-radius: 6px;
         font-size: 0.75rem;
         /* Tamanho 12px */
         font-weight: 600;
         white-space: nowrap;
         /* Não quebra linha */
         z-index: 1000;
         box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
         border: 1px solid #374151;
         /* Borda sutil */
         pointer-events: none;
         /* O mouse passa direto por ele */
     }

     /* 4. Cria uma "setinha" apontando para o ícone (Detalhe estético) */
     #sidebar.collapsed .nav-link:hover .sidebar-text::before {
         content: "";
         position: absolute;
         top: 50%;
         left: -5px;
         /* Posiciona na esquerda do balão */
         margin-top: -5px;
         border-width: 5px;
         border-style: solid;
         border-color: transparent #1f2937 transparent transparent;
         /* Triângulo */
     }
 }

 /* Animação de Letreiro */
 @keyframes marquee {
     0% {
         transform: translateX(100%);
     }

     100% {
         transform: translateX(-100%);
     }
 }

 .animate-marquee {
     display: inline-block;
     animation: marquee 20s linear infinite;
 }

 /* Linhas da Tabela */
 .driver-row {
     transition: all 0.5s ease;
 }

 .status-aguardando {
     background-color: #334155;
     color: #cbd5e1;
 }

 .status-vistoria {
     background-color: #ca8a04;
     color: #fff;
     animation: pulse-border 2s infinite;
 }

 .status-liberado {
     background-color: #15803d;
     color: #fff;
 }

 .status-bloqueado {
     background-color: #b91c1c;
     color: #fff;
 }

 @keyframes pulse-border {
     0% {
         box-shadow: 0 0 0 0 rgba(202, 138, 4, 0.7);
     }

     70% {
         box-shadow: 0 0 0 10px rgba(202, 138, 4, 0);
     }

     100% {
         box-shadow: 0 0 0 0 rgba(202, 138, 4, 0);
     }
 }

 /* Utilitários */
 .loading-spinner {
     border: 4px solid rgba(255, 255, 255, 0.3);
     border-radius: 50%;
     border-top: 4px solid #3498db;
     width: 40px;
     height: 40px;
     animation: spin 1s linear infinite;
 }

 @keyframes spin {
     0% {
         transform: rotate(0deg);
     }

     100% {
         transform: rotate(360deg);
     }
 }

 .no-scrollbar::-webkit-scrollbar {
     display: none;
 }

 .no-scrollbar {
     -ms-overflow-style: none;
     scrollbar-width: none;
 }

 .uppercase-input {
     text-transform: uppercase;
 }

 @media print {
     .page-break-avoid {
         page-break-inside: avoid;
     }

     .no-print {
         display: none !important;
     }

     .print-header-only {
         display: block !important;
     }
 }

 /* --- MODO AUDITOR (VISUALIZAÇÃO EXTERNA) --- */
 body.auditor-mode #sidebar,
 body.auditor-mode #mobile-sidebar-toggle-btn,
 body.auditor-mode #notification-btn,
 body.auditor-mode .edit-btn,
 body.auditor-mode .delete-btn,
 body.auditor-mode #back-to-inspections-btn,
 body.auditor-mode #edit-inspection-btn,
 body.auditor-mode #vehicle-history-btn {
     display: none !important;
 }

 body.auditor-mode #main-content-wrapper {
     margin-left: 0 !important;
     width: 100% !important;
 }

 body.auditor-mode header {
     background-color: #1e293b !important;
     /* Azul escuro para diferenciar */
     color: white !important;
 }

 .auditor-banner {
     background-color: #f59e0b;
     color: #fff;
     text-align: center;
     padding: 5px;
     font-size: 12px;
     font-weight: bold;
     text-transform: uppercase;
 }

 #inspections-list {
     display: flex;
     flex-direction: column;
     gap: 12px;
     /* Espaço entre os cards */
     padding-bottom: 20px;
 }

 /* Deixa a rolagem mais suave no mobile */
 .page {
     -webkit-overflow-scrolling: touch;
 }

 /* --- RESPONSIVIDADE DE TABELAS (ESTILO CARD NO MOBILE) --- */
 /* Só aplica em telas pequenas e é ignorado pela impressora */
 @media screen and (max-width: 1024px) {

     /* Transforma a tabela em blocos */
     .responsive-table,
     .responsive-table tbody,
     .responsive-table tr,
     .responsive-table td {
         display: block !important;
         width: 100% !important;
     }

     /* Esconde o cabeçalho original da tabela */
     .responsive-table thead {
         display: none !important;
     }

     /* Estilo do "Card" (cada linha da tabela vira um card) */
     .responsive-table tr {
         margin-bottom: 1rem !important;
         border: 1px solid #e2e8f0 !important;
         border-radius: 0.75rem !important;
         background: #fff !important;
         padding: 0 !important;
         box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1) !important;
         overflow: hidden !important;
         /* Garante cantos arredondados */
     }

     /* Estilo das Células (Linhas do card) */
     .responsive-table td {
         position: relative !important;
         padding: 10px 10px 10px 45% !important;
         /* 45% de recuo na esquerda para o título */
         text-align: right !important;
         border: none !important;
         border-bottom: 1px solid #f1f5f9 !important;
         min-height: 40px !important;
         display: flex !important;
         align-items: center !important;
         justify-content: flex-end !important;
         /* Alinha o conteúdo à direita */
         word-wrap: break-word !important;
         /* Quebra palavras longas */
     }

     .responsive-table td:last-child {
         border-bottom: none !important;
     }

     /* O Título da Esquerda (Gerado pelo data-label) */
     .responsive-table td::before {
         content: attr(data-label) !important;
         position: absolute !important;
         left: 10px !important;
         /* Fixado na esquerda */
         top: 50% !important;
         transform: translateY(-50%) !important;
         /* Centraliza verticalmente */
         width: 40% !important;
         /* Ocupa 40% da largura */
         font-weight: 800 !important;
         text-transform: uppercase !important;
         font-size: 0.7rem !important;
         color: #64748b !important;
         text-align: left !important;
         white-space: nowrap !important;
         /* Impede quebra de linha no título */
         overflow: hidden !important;
         text-overflow: ellipsis !important;
     }

     /* Ajuste especial para células de AÇÃO (Botões) */
     .responsive-table td[data-label="Ação"],
     .responsive-table td[data-label="Ações"] {
         padding-left: 10px !important;
         /* Remove o recuo para centralizar */
         justify-content: center !important;
         background-color: #f8fafc !important;
     }

     .responsive-table td[data-label="Ação"]::before,
     .responsive-table td[data-label="Ações"]::before {
         display: none !important;
         /* Esconde o título "AÇÃO" para limpar o visual */
     }

     /* Ajuste para Descrições Longas (Quebra de linha no dado) */
     .responsive-table td[data-label="Descrição"],
     .responsive-table td[data-label="Relato"],
     .responsive-table td[data-label="Motivo"] {
         display: block !important;
         /* Muda para bloco para permitir texto longo */
         padding-left: 10px !important;
         /* Tira o recuo lateral */
         padding-top: 30px !important;
         /* Dá espaço pro título em cima */
         text-align: left !important;
     }

     .responsive-table td[data-label="Descrição"]::before,
     .responsive-table td[data-label="Relato"]::before,
     .responsive-table td[data-label="Motivo"]::before {
         top: 10px !important;
         /* Sobe o título */
         transform: none !important;
         width: 100% !important;
     }
 }

/* --- CORREÇÃO DEFINITIVA: LAYOUT DE FUMAÇA NO CELULAR --- */
@media screen and (max-width: 640px) {
    
    /* 1. Muda de 5 colunas para 3 colunas no celular */
    /* Isso faz ficar:
       [20%] [40%] [60%]
       [80%] [100%]
       Muito mais espaço para o texto! */
    #smoke-form .grid-cols-5 {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 10px !important;
    }

    /* 2. Devolve o espaçamento interno para ficar bonito */
    .radio-ringelmann {
        padding: 10px 5px !important;
        width: 100% !important;
        min-height: 80px !important; /* Altura boa pro dedo */
    }

    /* 3. Ajusta o tamanho da fonte para um tamanho legível, não minúsculo */
    .radio-ringelmann div:first-child,
    .radio-ringelmann span:first-child {
        font-size: 11px !important;
        margin-bottom: 4px !important;
        display: block !important; /* Garante que 'NÍVEL' fique em cima */
    }

    /* 4. Ajusta o "100%" para um tamanho normal */
    .radio-ringelmann .text-2xl, 
    .radio-ringelmann .text-xl, 
    .radio-ringelmann .font-bold {
        font-size: 16px !important; /* Tamanho bom de ler */
        letter-spacing: normal !important; /* Não precisa mais espremer */
        white-space: nowrap !important;
    }
    
    /* 5. Centraliza o conteúdo caso sobre espaço */
    .radio-ringelmann {
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
    }
}
@media print {
    /* Esconde TUDO por padrão quando estiver imprimindo monitoramento */
    body.printing-compliance #sidebar,
    body.printing-compliance #mobile-header,
    body.printing-compliance .nav-link,
    body.printing-compliance button,
    body.printing-compliance #compliance-form,
    body.printing-compliance .comp-filters-container,
    body.printing-compliance header {
        display: none !important;
    }

    /* Força a seção de Compliance a aparecer, mesmo que o pai esteja oculto */
    body.printing-compliance #app-container,
    body.printing-compliance #main-content-wrapper,
    body.printing-compliance #compliance-page {
        display: block !important;
        position: absolute;
        left: 0;
        top: 0;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Estilização da Tabela para o PDF não sair cortado */
    body.printing-compliance table {
        width: 100% !important;
        border-collapse: collapse !important;
    }
    
    body.printing-compliance th, 
    body.printing-compliance td {
        border: 1px solid #ddd !important;
        padding: 8px !important;
        font-size: 10pt !important;
    }

    /* Remove sombras e fundos cinzas que gastam tinta/bugam o PDF */
    body.printing-compliance .bg-white {
        background-color: #fff !important;
    }
}

/* 1. ESTADO GERAL: Botões Inativos (Branco padrão) */
.comp-status-filter, 
.pendency-status-filter, 
.smoke-status-filter,
.ins-status-filter,
.ins-status-btn {
    background-color: #ffffff !important;
    border: 1px solid #d1d5db !important;
    color: #374151 !important;
    font-weight: 700 !important;
    transition: all 0.2s ease;
}

/* 2. ESTADO ATIVO: Permanece AZUL para qualquer botão selecionado */
.comp-status-filter.bg-blue-600, 
.pendency-status-filter.bg-blue-600, 
.smoke-status-filter.bg-blue-600,
.ins-status-btn.active,
.ins-status-btn.bg-blue-600 {
    background-color: #2563eb !important; /* Azul original */
    color: #ffffff !important;
    border-color: #1d4ed8 !important;
}

/* 3. MUDANÇA DE COR DOS BOTÕES INATIVOS ESPECÍFICOS */


/* Ajuste mobile para não quebrar o texto */
@media (max-width: 768px) {
    .comp-status-filter, 
    .pendency-status-filter, 
    .smoke-status-filter,
    .ins-status-btn {
        font-size: 10px !important;
        padding: 8px 4px !important;
    }
}

.fade-in {
    animation: fadeIn 0.3s ease-in-out;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(5px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes fadeInDown {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}
.animate-fade-in-down {
    animation: fadeInDown 0.5s ease-out;
}