/* Reset e Base - Estilo Windows Forms */
/* 🛡️ BLOQUEIO VISUAL ABSOLUTO CONTRA INTERFERÊNCIAS EXTERNAS (CORRETORES/PLUGINS) */
grammarly-extension,
grammarly-popover,
grammarly-card,
.lt-mirror,
.lt-toolbar,
.lt-popover,
.lt-card,
[class*="lt-"],
[id*="lt-"],
.gr-custom-popover,
.gr-top-carousel,
div[id^="languagetool-"],
div[class^="languagetool-"] {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    width: 0 !important;
    height: 0 !important;
    position: fixed !important;
    top: -9999px !important;
    left: -9999px !important;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background: #ffffff;
    color: #000;
    font-size: 14px;
    overflow: hidden !important;
    width: 100vw !important;
    position: relative;
}

html {
    overflow-x: hidden !important;
    width: 100vw !important;
}

/* Janela principal - igual ao Windows Forms */
.form-window {
    background: #ffffff;
    border: 1px solid #8b8b8b;
    margin: 0;
    height: 100vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Barra de título - moderna */
.title-bar {
    background: linear-gradient(135deg, #4a90e2, #357abd);
    color: white;
    padding: 6px 14px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 36px;
    font-size: 13px;
    font-weight: 500;
    box-shadow: 0 2px 8px rgba(74,144,226,0.2);
}

/* Menu discreto na barra de título */
.title-bar-menu {
    display: flex;
    gap: 8px;
    margin-left: auto;
    flex-wrap: wrap; /* Permitir quebra no celular */
    justify-content: flex-end;
}

.title-bar-btn {
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.85);
    font-size: 13px;
    cursor: pointer;
    padding: 4px 10px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    gap: 4px;
    transition: all 0.2s ease;
    font-weight: 500;
}

.title-bar-btn:hover {
    background: rgba(255, 255, 255, 0.2);
    color: white;
}

/* Botões que nunca devem ser ocultados por restrições de usuário */
.btn-sempre-visivel {
    display: inline-flex !important;
}

.title-bar-btn span {
    font-size: 14px;
}

.btn-cursos-wrapper {
    display: inline-flex;
    flex-direction: column;
    align-items: stretch;
}

.btn-cursos-status-bar {
    height: 3px;
    border-radius: 0 0 3px 3px;
    background: transparent;
    transition: background 0.3s ease;
    margin-top: 1px;
}

.btn-cursos-status-bar.active-renovar {
    background: white;
}

.btn-cursos-status-bar.active-vencido {
    background: white;
}

.curso-status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
    margin-left: auto;
    flex-shrink: 0;
    background: transparent;
    transition: background 0.3s ease;
}

.curso-status-dot.dot-renovar {
    background: #ff8c00;
    box-shadow: 0 0 4px rgba(255, 140, 0, 0.6);
}

.curso-status-dot.dot-vencido {
    background: #e81123;
    box-shadow: 0 0 4px rgba(232, 17, 35, 0.6);
}

.title-text {
    font-size: 13px;
    font-weight: 600;
}

.window-controls {
    display: flex;
    gap: 2px;
}

.control-btn {
    background: #e1e1e1;
    border: 1px solid #adadad;
    width: 16px;
    height: 14px;
    font-size: 9px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.control-btn:hover {
    background: #e5f1fb;
}

.control-btn.close:hover {
    background: #e81123;
    color: white;
}

/* Filtros superiores - igual ao desktop */
.filters-top {
    background: #ffffff;
    padding: 8px;
    border-bottom: none; /* Removido a borda */
}

.filter-row {
    display: flex;
    gap: 8px;
    align-items: end;
    width: 100%;
}

.filter-group {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
}

.filter-group label {
    font-size: 13px;
    color: #333;
    font-weight: 500;
}

.filter-input {
    width: 100%;
    height: 38px;
    border: 1px solid #cce8f4;
    padding: 6px 12px;
    font-size: 14px;
    background: white;
    border-radius: 6px;
    transition: all 0.2s ease;
}

.filter-input:focus {
    outline: none;
    border-color: #4a90e2;
    box-shadow: 0 0 0 3px rgba(74,144,226,0.12);
}

/* Aumentar fonte de todos os selects */
select {
    font-size: 14px;
    height: 38px;
    padding: 6px 10px;
    border: 1px solid #cce8f4;
    border-radius: 6px;
    background: white;
    transition: all 0.2s ease;
}

select:focus {
    outline: none;
    border-color: #4a90e2;
    box-shadow: 0 0 0 3px rgba(74,144,226,0.12);
}

.date-range {
    display: flex;
    gap: 4px;
    width: 100%;
}

@media (max-width: 480px) {
    .date-range {
        flex-direction: column;
    }
}

.date-input {
    flex: 1;
    height: 20px;
    border: 1px solid #7f9db9;
    padding: 2px 4px;
    font-size: 12px;
    background: white;
}

.btn-atualizar {
    background: #4a90e2;
    color: white;
    border: 1px solid #357abd;
    padding: 4px 12px;
    height: 32px;
    font-size: 13px;
    cursor: pointer;
    flex-shrink: 0;
    min-width: 70px;
    border-radius: 6px;
    font-weight: 500;
    transition: all 0.2s ease;
}

.btn-atualizar:hover {
    background: #5ba0f2;
    border-color: #4080cc;
}

/* Botões de ação - estilo moderno azul e branco */
.action-buttons {
    background: #ffffff;
    padding: 4px 8px;
    border-bottom: none;
    display: flex;
    align-items: center;
    gap: 8px;
}

.action-btn {
    background: #ffffff;
    border: 1px solid #cce8f4;
    padding: 4px 12px;
    height: 32px;
    font-size: 14px;
    cursor: pointer;
    min-width: 50px;
    border-radius: 6px;
    color: #005dac;
    font-weight: 500;
    transition: all 0.2s ease;
    box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}

.action-btn:hover {
    background: #e8f0fe;
    border-color: #4a90e2;
    box-shadow: 0 2px 6px rgba(74,144,226,0.15);
}

.action-btn:active {
    background: #d0e0fc;
    transform: translateY(1px);
}

.btn-editar {
    background: #e8f0fe;
    color: #005dac;
    border: 1px solid #cce8f4;
    border-radius: 6px;
    font-weight: 500;
    transition: all 0.2s ease;
}

.btn-editar:hover {
    background: #d0e0fc;
    border-color: #4a90e2;
}

.btn-add {
    background: #4a90e2;
    color: white;
    border: 1px solid #357abd;
    border-radius: 6px;
    font-weight: 500;
    transition: all 0.2s ease;
    box-shadow: 0 1px 3px rgba(74,144,226,0.2);
}

.btn-add:hover {
    background: #5ba0f2;
    border-color: #4080cc;
    box-shadow: 0 2px 8px rgba(74,144,226,0.3);
}

.btn-limpar {
    background: #ffffff;
    color: #dc3545;
    border: 1px solid #f5c6cb;
    border-radius: 6px;
    font-weight: 500;
    transition: all 0.2s ease;
}

.btn-limpar:hover {
    background: #fff5f5;
    border-color: #dc3545;
}

.btn-ativar {
    background: #4a90e2;
    color: white;
    border: 1px solid #357abd;
    border-radius: 6px;
    font-weight: 500;
    transition: all 0.2s ease;
}

.btn-ativar:hover {
    background: #5ba0f2;
}

.btn-inativar {
    background: #ffffff;
    color: #dc3545;
    border: 1px solid #f5c6cb;
    border-radius: 6px;
    font-weight: 500;
    transition: all 0.2s ease;
}

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

.status-filter {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}

/* Toggle Button Moderno */
.toggle-container {
    display: flex;
    align-items: center;
    gap: 8px;
}

.toggle-input {
    display: none;
}

.toggle-label {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 12px;
    font-weight: bold;
}

.toggle-slider {
    width: 50px;
    height: 24px;
    background: #32cd32;
    border-radius: 24px;
    position: relative;
    transition: all 0.3s ease;
    border: 2px solid #28a428;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.1);
}

.toggle-slider::before {
    content: '';
    position: absolute;
    width: 18px;
    height: 18px;
    background: white;
    border-radius: 50%;
    top: 2px;
    left: 2px;
    transition: all 0.3s ease;
    box-shadow: 0 2px 6px rgba(0,0,0,0.3);
}

/* Estado Inativo (Vermelho) */
.toggle-input:not(:checked) + .toggle-label .toggle-slider {
    background: #e81123;
    border-color: #c50e1f;
}

.toggle-input:not(:checked) + .toggle-label .toggle-slider::before {
    transform: translateX(24px);
}

.toggle-input:not(:checked) + .toggle-label .toggle-text {
    color: #e81123;
}

/* Estado Ativo (Verde) */
.toggle-input:checked + .toggle-label .toggle-text {
    color: #32cd32;
}

/* Toggle Pequeno para Grid */
.toggle-container-small {
    display: flex;
    align-items: center;
    gap: 4px;
}

.toggle-input-small {
    display: none;
}

.toggle-label-small {
    display: flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    font-size: 9px;
    font-weight: bold;
}

.toggle-slider-small {
    width: 32px;
    height: 16px;
    background: #32cd32;
    border-radius: 16px;
    position: relative;
    transition: all 0.3s ease;
    border: 1px solid #28a428;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
}

.toggle-slider-small::before {
    content: '';
    position: absolute;
    width: 12px;
    height: 12px;
    background: white;
    border-radius: 50%;
    top: 2px;
    left: 2px;
    transition: all 0.3s ease;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

/* Estado Inativo (Vermelho) */
.toggle-input-small:not(:checked) + .toggle-label-small .toggle-slider-small {
    background: #e81123;
    border-color: #c50e1f;
}

.toggle-input-small:not(:checked) + .toggle-label-small .toggle-slider-small::before {
    transform: translateX(16px);
}

.toggle-input-small:not(:checked) + .toggle-label-small .toggle-text-small {
    color: #e81123;
}

/* Estado Ativo (Verde) */
.toggle-input-small:checked + .toggle-label-small .toggle-text-small {
    color: #32cd32;
}

.progress-bar {
    width: 100px;
    height: 16px;
    background: #e1e1e1;
    border: 1px solid #adadad;
    position: relative;
    border-radius: 8px;
    overflow: hidden;
}

.progress-fill {
    height: 100%;
    background: #32cd32;
    transition: all 0.3s ease;
    border-radius: 8px;
}

.progress-fill.inactive {
    background: #e81123;
}

.progress-text {
    font-size: 11px;
    font-weight: bold;
    color: #32cd32;
    transition: color 0.3s ease;
}

.progress-text.inactive {
    color: #e81123;
}

/* Data de cadastro */
.cadastro-data {
    font-size: 9px;
    color: #666;
    font-style: italic;
    margin-top: 2px;
}

/* Toggle Mini na Tabela */
.toggle-mini-container {
    display: inline-flex;
    align-items: center;
    margin: 0 5px;
}

.toggle-mini-input {
    display: none;
}

.toggle-mini-label {
    cursor: pointer;
    display: inline-block;
}

.toggle-mini-slider {
    width: 24px;
    height: 12px;
    background: #e81123;
    border-radius: 12px;
    position: relative;
    transition: all 0.3s ease;
    display: inline-block;
    border: 1px solid #c50e1f;
}

.toggle-mini-slider::before {
    content: '';
    position: absolute;
    width: 10px;
    height: 10px;
    background: white;
    border-radius: 50%;
    top: 1px;
    left: 1px;
    transition: all 0.3s ease;
    box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}

/* Estado Ativo (Verde) */
.toggle-mini-input:checked + .toggle-mini-label .toggle-mini-slider {
    background: #32cd32;
    border-color: #28a428;
}

.toggle-mini-input:checked + .toggle-mini-label .toggle-mini-slider::before {
    transform: translateX(12px);
}

/* Tabela principal - igual ao desktop */
.main-table {
    flex: 1;
    min-height: 0;
    overflow-x: auto;
    overflow-y: auto;
    background: white;
    position: relative;
}

/* OVERLAY ANTI-FLICKERING - Cobre as colunas de vencimento durante atualização */
.update-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: white;
    z-index: 9999;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.05s ease-out;
}

.update-overlay.active {
    opacity: 1;
}

.desktop-table {
    width: auto;
    border-collapse: collapse;
    font-size: 14px; /* Aumentado de 11px para 14px */
    background: white;
    transition: none !important;
    /* OTIMIZAÇÕES ANTI-FLICKERING */
    will-change: contents;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
}

.desktop-table tbody {
    /* RENDERIZAÇÃO ULTRA RÁPIDA */
    will-change: contents;
    contain: layout style paint;
}

.desktop-table th,
.desktop-table td {
    transition: none !important;
    /* OTIMIZAÇÃO DE RENDERIZAÇÃO */
    will-change: auto;
    contain: layout style;
}

.desktop-table th {
    background: #e8f0fe;
    border: 1px solid #ffffff;
    padding: 8px 10px;
    text-align: left;
    font-weight: 600;
    font-size: 14px;
    height: 36px;
    position: sticky;
    top: 0;
    z-index: 10;
    box-shadow: 0 2px 4px rgba(0,0,0,0.06);
    color: #005dac;
}

.desktop-table thead {
    position: sticky;
    top: 0;
    z-index: 10;
}

.desktop-table td {
    border: 1px solid #ffffff;
    padding: 4px 6px;
    font-size: 15px; /* Aumentado de 13px para 15px */
    height: 100px;
    vertical-align: top;
    cursor: default;
    user-select: none;
}

.desktop-table td * {
    cursor: default;
    user-select: none;
}

.desktop-table tbody tr {
    /* TRANSIÇÃO IMPERCEPTÍVEL */
    transition: background-color 0.05s ease-out;
}

.desktop-table tbody tr:hover {
    background-color: #f5f9ff;
}

.desktop-table tbody tr:nth-child(even) {
    background-color: #fafcff;
}

.desktop-table tbody tr:nth-child(even):hover {
    background-color: #f0f6ff;
}

.desktop-table tbody tr.selected {
    background-color: #ffffff;
    color: #000000;
}

/* Remover cursor e seleção de texto nas células */
.desktop-table td:focus,
.desktop-table th:focus {
    outline: none;
}

.desktop-table td[contenteditable],
.desktop-table th[contenteditable] {
    cursor: default;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

/* Remover cursor de texto das colunas de vencimento */
.col-venc,
.col-venc * {
    cursor: default !important;
    caret-color: transparent !important;
}

/* Garantir que nenhuma célula seja editável */
.desktop-table td,
.desktop-table th {
    pointer-events: auto;
}

/* Colunas específicas - igual ao desktop */
.col-expand {
    width: 20px;
    text-align: center;
}

.col-nome {
    width: 230px;
    text-transform: uppercase;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

.col-empresa {
    width: 90px;
    text-transform: uppercase;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

.col-funcao {
    width: 100px;
    text-transform: uppercase;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

.col-id {
    width: 50px;
    text-align: center;
    display: none;
}

.col-venc {
    width: 95px !important;
    min-width: 95px !important;
    max-width: 95px !important;
    text-align: center;
    font-size: 16px;
    white-space: nowrap;
}

.col-foto {
    width: 90px;
    text-align: center;
    padding: 4px;
}

.col-situacao {
    width: 60px;
    text-align: center;
}

.col-acoes {
    width: 80px;
    text-align: center;
}

/* Estilos para múltiplas linhas dentro das células */
.nome-principal {
    font-weight: bold;
    color: #005dac;
    margin-bottom: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
    display: block;
}

.situacao-linha {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 2px;
    font-size: 10px;
}

.situacao-label {
    color: #666;
}

.situacao-indicator {
    font-size: 8px;
}

.situacao-indicator.ativo {
    color: #008000;
}

.situacao-indicator.inativo {
    color: #ff0000;
}

.situacao-text {
    color: #666;
}

.acoes-linha {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 10px;
}

.acoes-label {
    color: #666;
}

.action-btn-mini {
    background: #f0f5ff;
    border: 1px solid #cce8f4;
    padding: 2px 6px;
    font-size: 12px;
    cursor: pointer;
    margin: 0 2px;
    border-radius: 4px;
    color: #005dac;
    transition: all 0.2s ease;
}

.action-btn-mini:hover {
    background: #dce8ff;
    border-color: #4a90e2;
    transform: scale(1.1);
}

.cadastro-link {
    color: #005dac;
    text-decoration: underline;
    cursor: pointer;
    font-size: 10px;
}

.cadastro-link:hover {
    color: #004499;
}

.venc-epi {
    font-weight: bold;
    margin-bottom: 2px;
}

.venc-epi-label {
    font-size: 9px;
    color: #666;
}

/* Foto na tabela - ocupar todo o espaço */
.foto-thumbnail {
    width: 100%;
    height: 70px;
    object-fit: cover;
    border: 1px solid #d4d4d4;
    border-radius: 4px;
    display: block;
}

.foto-placeholder {
    width: 100%;
    height: 70px;
    background: #e1e1e1;
    border: 1px solid #d4d4d4;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: #999;
}

/* Status na tabela - cores iguais ao desktop */
.status-ok {
    color: #008000;
    font-weight: bold;
}

.status-renovar {
    color: #ff8c00;
    font-weight: bold;
}

.status-vencido {
    color: #ff0000;
    font-weight: bold;
}

.status-nao-informado {
    color: #808080;
}

/* Situação */
.situacao-ativo {
    color: #008000;
    font-weight: bold;
}

.situacao-inativo {
    color: #ff0000;
    font-weight: bold;
}

/* Rodapé com estatísticas - igual ao desktop */
.footer-stats {
    background: #ffffff;
    border-top: 1px solid #d4d4d4;
    padding: 4px 8px;
}

.stats-row {
    display: flex;
    gap: 20px;
    margin-bottom: 4px;
}

.stat-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.stat-label {
    font-size: 10px;
    font-weight: bold;
    color: #000;
}

.stat-counts {
    display: flex;
    flex-direction: column;
    gap: 1px;
    font-size: 9px;
}

.stat-ok {
    color: #008000;
}

.stat-venc {
    color: #ff0000;
}

.pagination-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 4px;
}

.pagination-controls {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
}

.page-btn {
    width: 34px;
    height: 30px;
    font-size: 13px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    border: none;
    font-weight: 600;
    color: white;
    transition: all 0.2s ease;
}

.page-btn.btn-first,
.page-btn.btn-last {
    background: linear-gradient(135deg, #4a90e2 0%, #357abd 100%);
    width: 44px;
}

.page-btn.btn-prev,
.page-btn.btn-next {
    background: linear-gradient(135deg, #4a90e2 0%, #357abd 100%);
}

.page-btn:hover:not(:disabled) {
    transform: scale(1.05);
    box-shadow: 0 2px 8px rgba(74,144,226,0.3);
}

.page-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.page-info {
    font-size: 12px;
    min-width: 100px;
    text-align: center;
    border: 1px solid #cce8f4;
    padding: 4px 12px;
    background: #f8faff;
    border-radius: 8px;
    font-weight: 600;
    color: #005dac;
}

.record-info {
    display: flex;
    gap: 12px;
    font-size: 11px;
}

.record-count {
    color: #000;
}

.active-count {
    color: #008000;
}

.canceled-count {
    color: #ff0000;
}

/* Loading */
.loading-row {
    text-align: center;
}

.loading-cell {
    padding: 20px;
    color: #666;
    font-style: italic;
}

.loading-spinner {
    display: inline-block;
    animation: spin 1s linear infinite;
    margin-right: 8px;
}

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

/* Modal - estilo Windows */
.modal {
    display: none;
    position: fixed;
    z-index: 100;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4);
}

/* Quando modal de habilitar cursos está aberta */
body.modal-open {
    overflow: hidden !important;
}

body.modal-open * :not(.modal):not(.modal *) {
    display: none !important;
}

.modal-content {
    background-color: #ffffff;
    margin: 2% auto;
    border: none;
    width: 95%;
    max-width: 600px;
    max-height: 95vh;
    overflow-y: auto;
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.12);
    height: fit-content;
}

/* Override para o modal de cadastro não ficar espremido */
.form-modal.modal-content {
    max-width: 1400px !important;
    width: 95% !important;
    overflow-y: hidden;
    display: flex;
    flex-direction: column;
}

.modal-small {
    max-width: 300px;
}

/* Modal de Exportação */
.modal-exportar {
    max-width: 100vw !important;
    width: 100vw !important;
    height: 100vh !important;
    max-height: 100vh !important;
    margin: 0 !important;
    border-radius: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
}

.export-columns-list {
    overflow-y: auto;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 5px;
    background: #f9f9f9;
}

.export-grupo {
    margin-bottom: 5px;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    background: white;
}

.export-grupo-header {
    display: flex;
    align-items: center;
    padding: 8px 10px;
    background: #f0f0f0;
    cursor: pointer;
    border-radius: 3px 3px 0 0;
}

.export-grupo-header:hover {
    background: #e8e8e8;
}

.export-grupo-toggle {
    margin-right: 8px;
    font-size: 10px;
    color: #666;
}

.export-grupo-check {
    margin-left: auto;
    display: flex;
    align-items: center;
    font-size: 11px;
    color: #666;
}

.export-grupo-check input {
    margin-right: 4px;
}

.export-grupo-items {
    padding: 5px 10px;
}

.export-checkbox {
    display: flex;
    align-items: center;
    padding: 4px 8px;
    cursor: pointer;
    border-radius: 3px;
    margin-bottom: 2px;
}

.export-checkbox:hover {
    background: #e8f4fc;
}

.export-checkbox input {
    margin-right: 10px;
    cursor: pointer;
}

.export-checkbox span {
    font-size: 12px;
}

.export-options {
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid #ddd;
}

.export-radio {
    display: inline-flex;
    align-items: center;
    margin-right: 20px;
    cursor: pointer;
}

.export-radio input {
    margin-right: 6px;
    cursor: pointer;
}

.modal-header {
    background: linear-gradient(135deg, #4a90e2, #357abd);
    color: white;
    padding: 8px 14px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 36px;
    font-size: 13px;
    border-radius: 8px 8px 0 0;
}

.modal-header h2,
.modal-header h3 {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: white;
}

.modal-close {
    background: rgba(255,255,255,0.15);
    border: none;
    width: 28px;
    height: 28px;
    font-size: 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    border-radius: 6px;
    transition: all 0.2s ease;
}

.modal-close:hover {
    background: rgba(255,255,255,0.3);
    color: white;
}

.modal-body {
    padding: 16px;
}

.modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 16px;
    background: #f8faff;
    border-top: 1px solid #e8eeff;
    border-radius: 0 0 12px 12px;
}

/* Formulário - estilo Windows Forms */
.form-container {
    padding: 12px;
}

.form-section {
    margin-bottom: 12px;
    border: 1px solid #e0ebff;
    padding: 12px;
    border-radius: 8px;
    background: #fafcff;
}

.form-section legend {
    font-size: 12px;
    font-weight: 600;
    color: #005dac;
    padding: 0 8px;
}

.form-row {
    display: flex;
    gap: 12px;
    margin-bottom: 8px;
}

.form-group {
    flex: 1;
}

.form-group label {
    display: block;
    margin-bottom: 2px;
    font-size: 11px;
    color: #000;
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    height: 20px;
    border: 1px solid #cce8f4;
    padding: 2px 4px;
    font-size: 11px;
    background: white;
    transition: all 0.2s ease;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: #4a90e2;
    box-shadow: 0 0 0 3px rgba(74,144,226,0.12);
}

.form-group input[type="file"] {
    height: 22px;
    padding: 2px;
}

.form-help {
    display: block;
    margin-top: 2px;
    font-size: 9px;
    color: #666;
    font-style: italic;
}

/* Botões do formulário - moderno */
.btn {
    background: #ffffff;
    border: 1px solid #cce8f4;
    padding: 6px 14px;
    height: 32px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border-radius: 6px;
    color: #005dac;
    transition: all 0.2s ease;
    box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}

.btn:hover {
    background: #e8f0fe;
    border-color: #4a90e2;
    box-shadow: 0 2px 6px rgba(74,144,226,0.15);
}

.btn:active {
    background: #d0e0fc;
    transform: translateY(1px);
}

.btn-primary {
    background: #4a90e2;
    color: white;
    border: 1px solid #357abd;
    box-shadow: 0 1px 3px rgba(74,144,226,0.2);
}

.btn-primary:hover {
    background: #5ba0f2;
    border-color: #4080cc;
    box-shadow: 0 2px 8px rgba(74,144,226,0.3);
}

.btn-secondary {
    background: #ffffff;
    color: #005dac;
    border: 1px solid #cce8f4;
}

.btn-secondary:hover {
    background: #e8f0fe;
    border-color: #4a90e2;
}

.btn-danger {
    background: #dc3545;
    color: white;
    border: 1px solid #c82333;
    border-radius: 6px;
}

.btn-danger:hover {
    background: #e74c3c;
    border-color: #d04434;
}

.btn-icon {
    font-size: 10px;
}

.btn-text {
    font-size: 11px;
}

/* Toast - notificações */
.toast {
    position: fixed;
    top: 20px;
    right: 20px;
    background: #28a745;
    color: white;
    padding: 12px 16px;
    border: none;
    display: none;
    z-index: 999999;
    max-width: 400px;
    font-size: 13px;
    font-weight: 600;
    border-radius: 10px;
    box-shadow: 0 4px 25px rgba(0,0,0,0.3);
}

.toast.success {
    background: #28a745;
    color: white;
}

.toast.error {
    background: #dc3545;
    color: white;
}

.toast.warning {
    background: #ff9500;
    color: white;
}

.toast.info {
    background: #4a90e2;
    color: white;
}

.toast-close {
    background: rgba(255,255,255,0.2);
    border: none;
    color: white;
    font-size: 16px;
    cursor: pointer;
    margin-left: 10px;
    width: 24px;
    height: 24px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.toast-close:hover {
    background: rgba(255,255,255,0.35);
}

/* Scrollbar - estilo moderno */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: #f5f5f5;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb {
    background: #cce8f4;
    border-radius: 4px;
    border: none;
}

::-webkit-scrollbar-thumb:hover {
    background: #4a90e2;
}

::-webkit-scrollbar-corner {
    background: #f5f5f5;
}

/* Botões de ação na tabela */
.action-btn-small {
    background: #f0f5ff;
    border: 1px solid #cce8f4;
    padding: 2px 6px;
    font-size: 10px;
    cursor: pointer;
    margin: 0 1px;
    border-radius: 4px;
    color: #005dac;
    transition: all 0.2s ease;
}

.action-btn-small:hover {
    background: #dce8ff;
    border-color: #4a90e2;
}

.action-edit {
    background: #e8f0fe;
    color: #005dac;
    border-color: #cce8f4;
}

.action-delete {
    background: #fff5f5;
    color: #dc3545;
    border-color: #f5c6cb;
}

.action-toggle {
    background: #e8f8e8;
    color: #28a745;
    border-color: #c3e6cb;
}

/* Checkbox personalizado */
input[type="checkbox"] {
    width: 13px;
    height: 13px;
}

/* Modal Tabela Mês - Flexível e Equilibrado */
.modal-tabela-mes {
    max-width: 95% !important;
    width: 95% !important;
    max-height: 90vh;
    margin: 2% auto !important;
    border-radius: 8px !important;
    border: 1px solid #8b8b8b !important;
}

.modal-body-tabela-mes {
    padding: 10px;
}

/* ============ RESPONSIVIDADE MOBILE (REFINADA) ============ */
@media (max-width: 768px) {
    /* Viewport & Body Reset */
    html, body {
        overflow-x: hidden !important;
        width: 100vw !important;
        position: relative !important;
    }

    .form-window,
    .filters-top,
    .action-buttons,
    .main-table,
    .footer-stats {
        width: 100vw !important;
        max-width: 100vw !important;
        overflow-x: hidden;
    }

    /* Barra de título compacta */
    .title-bar {
        height: auto !important;
        padding: 5px 8px !important;
    }
    .title-text { display: none; }
    .title-bar-menu { flex-wrap: wrap; justify-content: flex-end; gap: 4px; }
    .title-bar-btn span { display: none; }

    /* Filtros empilhados */
    .filter-row {
        flex-direction: column !important;
        gap: 10px !important;
        padding: 5px !important;
    }
    .filter-group { width: 100% !important; flex: none !important; }
    .date-range { flex-direction: column !important; gap: 5px !important; }

    /* Botões de ação */
    .action-buttons {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 8px !important;
    }
    .export-options-main {
        border-left: none !important;
        border-top: 1px solid #adadad !important;
        padding: 10px 0 !important;
        margin-left: 0 !important;
        margin-top: 5px !important;
        width: 100% !important;
        justify-content: center !important;
    }

    /* Tabela Principal */
    .main-table {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }
    .desktop-table {
        width: auto !important;
        min-width: 1200px !important; /* Permitir scroll mas não vácuo */
    }

    /* Modais Full Screen */
    .form-modal,
    .modal-tabela-mes {
        width: 100vw !important;
        max-width: 100vw !important;
        height: 100vh !important;
        max-height: 100vh !important;
        margin: 0 !important;
        top: 0 !important;
        left: 0 !important;
        border-radius: 0 !important;
    }

    /* Formulários Internos */
    .aso-layout, 
    .main-fields-row, 
    .dates-row, 
    .bottom-row-line1, 
    .bottom-row-line2,
    .nr-tabs {
        flex-direction: column !important;
        gap: 10px !important;
    }
    .dates-row .field-group { min-width: 100% !important; }
    .aso-logo-area { display: none !important; }
    .nr-tabs { flex-wrap: wrap !important; }
}

/* Ajustes finos para o modal de cadastro no Desktop */
@media (min-width: 1025px) {
    .form-modal {
        max-width: 1400px !important;
        width: 95% !important;
        margin: 2vh auto !important;
    }
}

/* Celulares pequenos (até 480px) */
@media (max-width: 480px) {
    body { font-size: 11px; }
    .action-btn { font-size: 10px; height: 32px; }
}
    
    .page-btn {
        width: 24px;
        height: 24px;
        font-size: 9px;
    }
    
    .page-info {
        font-size: 9px;
        min-width: 70px;
    }
    
    .footer-counters {
        font-size: 9px;
        gap: 4px;
    }
    
    .form-group input,
    .form-group select,
    .form-group textarea {
        height: 28px;
        font-size: 13px;
    }
    
    .aso-icon {
        width: 50px;
        height: 50px;
        font-size: 12px;
    }
    
    .btn {
        font-size: 10px;
        padding: 3px 6px;
        height: 24px;
    }
}
/* Mo
dal do formulário com abas - igual ao desktop */
.form-modal {
    max-width: 1400px;
    width: 95%;
    height: 94vh;
    max-height: 94vh;
    margin: 2.5vh auto !important;
    background: #ffffff;
    display: flex;
    flex-direction: column;
    overflow: hidden !important;
}

/* Abas do formulário */
.form-tabs {
    display: flex;
    flex-wrap: wrap; /* Permitir quebra de linha */
    background: #ffffff;
    border-bottom: 1px solid #d4d4d4;
}

.tab-btn {
    background: #f0f5ff;
    border: 1px solid #cce8f4;
    border-bottom: none;
    padding: 8px 16px;
    font-size: 12px;
    cursor: pointer;
    margin-right: 2px;
    border-radius: 6px 6px 0 0;
    color: #005dac;
    font-weight: 500;
    transition: all 0.2s ease;
}

.tab-btn.active {
    background: #ffffff;
    border-bottom: 1px solid #ffffff;
    position: relative;
    z-index: 1;
    color: #4a90e2;
    font-weight: 600;
}

.tab-btn:hover:not(.active) {
    background: #e0ebff;
    border-color: #4a90e2;
}

/* Modo tabela (fornecedor/documentação) - tela cheia */
#modalForm.tabela-mode {
    background: #ffffff !important;
}

#modalForm.tabela-mode .form-modal {
    max-width: 100vw !important;
    width: 100vw !important;
    height: 100vh !important;
    max-height: 100vh !important;
    margin: 0 !important;
    border-radius: 0 !important;
}

/* Abas das NRs */
.nr-tabs {
    display: flex;
    flex-wrap: wrap; /* Permitir quebra de linha em telas pequenas */
    background: #ffffff;
    border-bottom: 1px solid #d4d4d4;
    padding: 4px;
    gap: 4px; /* Aumentado para facilitar toque */
}

.nr-tab {
    background: #f0f5ff;
    border: 1px solid #cce8f4;
    padding: 6px 12px;
    font-size: 11px;
    cursor: pointer;
    min-width: 44px;
    text-align: center;
    border-radius: 6px;
    color: #005dac;
    font-weight: 500;
    transition: all 0.2s ease;
}

.nr-tab.active {
    background: #4a90e2;
    color: white;
    border-color: #357abd;
    font-weight: 600;
    box-shadow: 0 1px 4px rgba(74,144,226,0.3);
}

.nr-tab:hover:not(.active) {
    background: #dce8ff;
    border-color: #4a90e2;
}

/* Conteúdo do formulário */
.form-content {
    display: flex;
    flex: 1; /* Ocupa todo o espaço restante */
    overflow: hidden; /* Mantém scroll interno */
    background: #ffffff;
}

form#formSSMA {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

.form-main {
    flex: 1;
    min-height: 0;
    position: relative;
    padding-right: 15px;
}

.nr-content {
    display: none;
    height: 100%;
    padding: 0;
    margin: 0;
    width: 100%;
}

.nr-content.active {
    display: flex;
    width: 100%;
    min-height: 0;
}

#content-documentacao {
    padding: 0 !important;
    margin: 0 !important;
    width: 100%;
}

.nr-content.active {
    display: flex;
    min-height: 0;
}

/* Layout ASO - exatamente igual ao desktop */
#content-aso {
    padding: 15px;
    height: 100%;
}

.aso-layout {
    display: flex;
    gap: 15px;
    height: 100%;
}

/* Logo ASO à esquerda */
.aso-logo-area {
    flex-shrink: 0;
    padding-top: 20px;
}

.aso-icon {
    width: 80px;
    height: 80px;
    background: #ff6b35;
    border: 3px solid #000;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 16px;
    color: white;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
}

/* Área principal do formulário */
.aso-form-area {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

/* Linha dos campos principais (Nome, Empresa, Função) */
.main-fields-row {
    display: flex;
    gap: 15px;
}

.main-fields-row .field-group {
    flex: 1;
}

/* Linha das datas (5 campos em linha) */
.dates-row {
    display: flex;
    gap: 12px;
    padding: 8px;
    background: rgba(255, 255, 255, 0.3);
}

.dates-row .field-group {
    flex: 1;
    min-width: 100px;
}

/* Linha inferior (Status + Gênero + Celular + CPF em linha horizontal) */
/* Linha 1: Status + Celular + CPF + Datas + Botão Status */
.bottom-row-line1 {
    display: flex;
    gap: 12px;
    align-items: flex-end;
    margin-bottom: 8px;
}

.bottom-row-line1 .field-group {
    flex: 1;
}

.bottom-row-line1 .field-group.small {
    flex: 0 0 120px;
}

.bottom-row-line1 .field-group label {
    display: block;
    margin-bottom: 2px;
    font-size: 11px;
    color: #000;
}

.bottom-row-line1 .field-group input,
.bottom-row-line1 .field-group select {
    width: 100%;
    height: 22px;
    border: 1px solid #7f9db9;
    padding: 2px 4px;
    font-size: 11px;
    background: white;
}

/* Linha 2: Gênero + Anotações */
.bottom-row-line2 {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    margin-bottom: 10px;
}

.bottom-row-line2 .field-group.small {
    flex: 0 0 120px;
}

.bottom-row-line2 .field-group label {
    display: block;
    margin-bottom: 2px;
    font-size: 11px;
    color: #000;
}

.bottom-row-line2 .field-group select {
    width: 100%;
    height: 22px;
    border: 1px solid #7f9db9;
    padding: 2px 4px;
    font-size: 11px;
    background: white;
}

/* Anotações inline ao lado do Gênero */
.annotations-inline {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.annotations-inline label {
    font-size: 11px;
    color: #005dac;
    font-weight: bold;
}

.annotations-inline textarea {
    width: 100%;
    height: 60px;
    border: 1px solid #7f9db9;
    padding: 4px;
    font-size: 11px;
    font-family: inherit;
    resize: none;
    background: white;
}

/* Linha inferior: Status + Gênero + Celular + CPF + Datas/Status */
.bottom-row {
    display: flex;
    gap: 15px;
    align-items: flex-end;
    margin-bottom: 10px;
}

.left-small-fields {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100px;
}

.field-group.small {
    width: 100%;
}

/* Campos de contato no meio (Celular, CPF e Datas inline) */
.middle-contact-fields {
    display: flex;
    gap: 12px;
    flex: 1;
    align-items: flex-end;
}

.middle-contact-fields .field-group {
    flex: 1;
}

.middle-contact-fields .field-group label {
    display: block;
    margin-bottom: 2px;
    font-size: 11px;
    color: #000;
}

.middle-contact-fields .field-group input {
    width: 100%;
    height: 22px;
    border: 1px solid #7f9db9;
    padding: 2px 4px;
    font-size: 11px;
    background: white;
}

/* Datas e status inline na mesma linha */
.dates-status-inline {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Anotações em linha completa abaixo */
.annotations-full-row {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 10px;
}

.annotations-full-row label {
    font-size: 11px;
    color: #005dac;
    font-weight: bold;
}

.annotations-full-row textarea {
    width: 100%;
    height: 60px;
    border: 1px solid #7f9db9;
    padding: 4px;
    font-size: 11px;
    font-family: inherit;
    resize: none;
    background: white;
}

.left-small-fields {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100px;
}

.field-group.small {
    width: 100%;
}

/* Campos de contato em linha horizontal */
.contact-fields-row {
    display: flex;
    gap: 10px;
    align-items: flex-end;
}

.contact-fields-row .field-group {
    display: flex;
    flex-direction: column;
    gap: 2px;
    width: 150px;
}

.contact-fields-row .field-group label {
    font-size: 11px;
    color: #000;
}

.contact-fields-row .field-group input {
    width: 100%;
    height: 22px;
    border: 1px solid #7f9db9;
    padding: 2px 4px;
    font-size: 11px;
    background: white;
}

/* Seção de datas e status */
.dates-status-section {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}

/* Seção de Anotações (linha separada abaixo) */
.annotations-section {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 8px;
}

.annotations-section label {
    font-size: 11px;
    color: #005dac;
    font-weight: bold;
}

.annotations-section textarea {
    width: 100%;
    height: 60px;
    border: 1px solid #7f9db9;
    padding: 4px;
    font-size: 11px;
    font-family: inherit;
    resize: none;
    background: white;
}

.annotations-area {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

/* Área de Anotações */
.annotations-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4px;
}

.annotations-row label {
    font-size: 11px;
    color: #005dac;
    font-weight: bold;
}

.dates-status-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.date-field {
    width: 80px;
    height: 20px;
    border: 1px solid #7f9db9;
    padding: 2px 4px;
    font-size: 10px;
    text-align: center;
    background: white;
}

.date-field[readonly] {
    background: #ffffff;
    color: #666;
}

.annotations-area textarea {
    width: 100%;
    height: 60px;
    border: 1px solid #7f9db9;
    padding: 4px;
    font-size: 11px;
    font-family: inherit;
    resize: none;
    background: white;
}

.btn-status {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border: 1px solid #666;
    border-radius: 12px;
    background: #666;
    color: white;
    font-size: 10px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s;
}

.btn-status:hover {
    background: #555;
    border-color: #555;
}

.btn-status.ativo {
    background: #32cd32;
    border-color: #28a428;
}

.btn-status.cancelado {
    background: #e74c3c;
    border-color: #c0392b;
}

.status-icon {
    font-size: 8px;
}

.status-text {
    font-size: 10px;
}

.annotations-section label {
    display: block;
    margin-bottom: 4px;
    font-size: 11px;
    color: #005dac;
    font-weight: bold;
}

.annotations-section textarea {
    width: 100%;
    height: 60px;
    border: 1px solid #7f9db9;
    padding: 4px;
    font-size: 11px;
    font-family: inherit;
    resize: none;
    background: white;
}

/* Botões */
.buttons-row {
    display: flex;
    gap: 8px;
    margin-top: 10px;
}

/* Estilos gerais dos campos */
.field-dropdown,
.field-group input,
.field-group select {
    width: 100%;
    height: 22px;
    border: 1px solid #7f9db9;
    padding: 2px 4px;
    font-size: 11px;
    background: white;
}

.field-group input:focus,
.field-group select:focus {
    outline: none;
    border-color: #4a90e2;
}

.field-group input[readonly] {
    background: #ffffff;
    color: #666;
}

/* Campos calculados automaticamente */
.calc-field {
    background: #e6f0f8 !important;
    color: #005dac !important;
    font-weight: bold !important;
    text-align: center !important;
}

/* Campo de data brasileira */
.date-input-br {
    text-align: center;
    font-family: monospace;
}

/* Status com cores dinâmicas */
.status-select.status-ok {
    background: #d4edda !important;
    color: #155724 !important;
    font-weight: bold !important;
}

.status-select.status-renovar {
    background: #fff3cd !important;
    color: #856404 !important;
    font-weight: bold !important;
}

.status-select.status-vencido {
    background: #f8d7da !important;
    color: #721c24 !important;
    font-weight: bold !important;
}

.field-row {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.field-row label {
    font-size: 11px;
    color: #005dac;
    font-weight: bold;
}

.field-row input,
.field-row select {
    height: 22px;
    border: 1px solid #7f9db9;
    padding: 2px 4px;
    font-size: 11px;
    background: white;
}

.field-row input:focus,
.field-row select:focus {
    outline: none;
    border-color: #4a90e2;
}

.field-row input[readonly] {
    background: #ffffff;
    color: #666;
}

/* Radio buttons */
.radio-group {
    display: flex;
    gap: 10px;
    align-items: center;
}

.radio-group input[type="radio"] {
    width: 13px;
    height: 13px;
}

.radio-group label {
    font-size: 11px;
    color: #000 !important;
    font-weight: normal !important;
}

/* Parte inferior do formulário */
.form-bottom {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 10px;
    align-items: end;
}

.status-indicator {
    display: flex;
    align-items: center;
    gap: 5px;
}

.status-indicator input[type="checkbox"] {
    width: 13px;
    height: 13px;
}

.status-indicator label {
    font-size: 11px;
    color: #000;
}

/* Seção de anotações */
.annotations-section {
    flex: 1;
}

.annotations-section label {
    font-size: 11px;
    color: #005dac;
    font-weight: bold;
    display: block;
    margin-bottom: 4px;
}

.annotations-section textarea {
    width: 100%;
    border: 1px solid #7f9db9;
    padding: 4px;
    font-size: 11px;
    font-family: inherit;
    resize: vertical;
    background: white;
}

.annotations-section textarea:focus {
    outline: none;
    border-color: #4a90e2;
}

/* Botões do formulário */
.form-buttons {
    display: flex;
    gap: 8px;
}

.btn-form {
    padding: 6px 14px;
    border: 1px solid #cce8f4;
    font-size: 12px;
    cursor: pointer;
    min-width: 60px;
    border-radius: 6px;
    background: #ffffff;
    color: #005dac;
    font-weight: 500;
    transition: all 0.2s ease;
}

.btn-form:hover {
    background: #e8f0fe;
    border-color: #4a90e2;
}

.btn-novo,
.btn-cadastrar,
.btn-salvar,
.btn-alterar {
    min-width: 70px;
    padding: 6px 14px;
    font-size: 12px;
    font-weight: bold;
    border-radius: 4px;
    cursor: pointer;
    box-sizing: border-box;
}

.btn-novo {
    background: #4a90e2 !important;
    color: white !important;
    border: 1px solid #357abd !important;
    border-radius: 6px !important;
    box-shadow: 0 1px 3px rgba(74,144,226,0.2) !important;
    transition: all 0.2s ease !important;
}

.btn-novo:hover {
    background: #5ba0f2 !important;
    border-color: #4080cc !important;
    box-shadow: 0 2px 8px rgba(74,144,226,0.3) !important;
}

.btn-salvar {
    background: #4a90e2 !important;
    color: white !important;
    border: 1px solid #357abd !important;
    border-radius: 6px !important;
    box-shadow: 0 1px 3px rgba(74,144,226,0.2) !important;
    transition: all 0.2s ease !important;
}

.btn-salvar:hover {
    background: #5ba0f2 !important;
    border-color: #4080cc !important;
    box-shadow: 0 2px 8px rgba(74,144,226,0.3) !important;
}

.btn-cadastrar {
    background: #4a90e2 !important;
    color: white !important;
    border: 1px solid #357abd !important;
    border-radius: 6px !important;
    box-shadow: 0 1px 3px rgba(74,144,226,0.2) !important;
    transition: all 0.2s ease !important;
}

.btn-cadastrar:hover {
    background: #5ba0f2 !important;
    border-color: #4080cc !important;
    box-shadow: 0 2px 8px rgba(74,144,226,0.3) !important;
}

.btn-alterar {
    background: #4a90e2;
    color: white;
    border: 1px solid #357abd;
    border-radius: 6px;
    transition: all 0.2s ease;
}

.btn-alterar:hover {
    background: #5ba0f2;
    border-color: #4080cc;
}

/* Outras NRs (layout simples) */
.nr-form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    padding: 20px;
}

/* Seção da foto */
.photo-section {
    width: 180px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 15px;
    border-left: 1px solid #d4d4d4;
}

.photo-container {
    width: 150px;
    height: 150px;
    border: 2px solid #999;
    border-radius: 4px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ffffff;
    margin: 0 auto;
}

.foto-preview {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.foto-placeholder-large {
    font-size: 60px;
    color: #999;
}

.photo-buttons {
    display: flex;
    gap: 4px;
    justify-content: center;
}

.btn-photo {
    background: #4a90e2;
    color: white;
    border: 1px solid #357abd;
    padding: 6px 12px;
    font-size: 11px;
    cursor: pointer;
    border-radius: 6px;
    transition: all 0.2s ease;
    box-shadow: 0 1px 3px rgba(74,144,226,0.2);
}

.btn-photo:hover {
    background: #5ba0f2;
    border-color: #4080cc;
    box-shadow: 0 2px 6px rgba(74,144,226,0.3);
}

.btn-photo.btn-remove {
    background: #dc3545;
    border-color: #c82333;
}

.btn-photo.btn-remove:hover {
    background: #e74c3c;
}

/* Layout NR-10 - sem área de foto duplicada */
#content-nr10 {
    padding: 15px;
    height: 100%;
}

.nr10-layout {
    display: flex;
    gap: 15px;
    height: 100%;
    width: 100%;
}

/* Logo NR-10 à esquerda */
.nr10-logo-area {
    flex-shrink: 0;
    padding-top: 20px;
}

.nr10-icon {
    width: 80px;
    height: 80px;
    background: #ffd23f;
    border: 3px solid #000;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 14px;
    color: #000;
    text-align: center;
    line-height: 1.2;
}

/* Área principal do formulário NR-10 */
.nr10-form-area {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 15px;
    width: 100%;
}

/* Campos readonly (cinza escuro) */
.readonly-fields .field-group input,
.readonly-field {
    background: #666 !important;
    color: white !important;
    border: 1px solid #555 !important;
    cursor: not-allowed !important;
}

.readonly-fields .field-group label {
    color: #005dac;
    font-weight: bold;
}

/* Campo com foco inicial */
.nr10-focus {
    border: 2px solid #ff6600 !important;
    background: #fff !important;
}

.nr10-focus:focus {
    border: 2px solid #ff6600 !important;
    box-shadow: 0 0 5px rgba(255, 102, 0, 0.5) !important;
}

/* Layout NR-11 - IGUAL ao NR-10, só muda o logo */
#content-nr11 {
    padding: 15px;
    height: 100%;
}

.nr11-layout {
    display: flex;
    gap: 15px;
    height: 100%;
    width: 100%;
}

/* Logo NR-11 à esquerda - IGUAL ao NR-10 */
.nr11-logo-area {
    flex-shrink: 0;
    padding-top: 20px;
}

.nr11-icon {
    width: 80px;
    height: 80px;
    background: #ffd23f;
    border: 3px solid #000;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 14px;
    color: #000;
    text-align: center;
    line-height: 1.2;
}

/* Área principal do formulário NR-11 - IGUAL ao NR-10 */
.nr11-form-area {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 15px;
    width: 100%;
}

/* Campo com foco inicial NR-11 - IGUAL ao NR-10 */
.nr11-focus {
    border: 2px solid #ff6600 !important;
    background: #fff !important;
}

.nr11-focus:focus {
    border: 2px solid #ff6600 !important;
    box-shadow: 0 0 5px rgba(255, 102, 0, 0.5) !important;
}

/* Layout NR-12 - IGUAL ao NR-10 e NR-11, com campo Ferramenta */
#content-nr12 {
    padding: 15px;
    height: 100%;
}

.nr12-layout {
    display: flex;
    gap: 15px;
    height: 100%;
    width: 100%;
}

/* Logo NR-12 à esquerda */
.nr12-logo-area {
    flex-shrink: 0;
    padding-top: 20px;
}

.nr12-icon {
    width: 80px;
    height: 80px;
    background: #ffd23f;
    border: 3px solid #000;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 14px;
    color: #000;
    text-align: center;
    line-height: 1.2;
}

/* Área principal do formulário NR-12 */
.nr12-form-area {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 15px;
    width: 100%;
}

/* Campo com foco inicial NR-12 */
.nr12-focus {
    border: 2px solid #ff6600 !important;
    background: #fff !important;
}

.nr12-focus:focus {
    border: 2px solid #ff6600 !important;
    box-shadow: 0 0 5px rgba(255, 102, 0, 0.5) !important;
}

/* Seção Ferramenta (específica da NR-12) */
.ferramenta-section {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-top: 10px;
}

.ferramenta-section label {
    font-size: 13px; /* Reduzido de 16px para 13px */
    color: #005dac;
    font-weight: bold;
}

.ferramenta-section textarea {
    width: 100%;
    border: 1px solid #7f9db9;
    padding: 6px; /* Reduzido de 8px para 6px */
    font-size: 14px; /* Reduzido de 18px para 14px */
    font-family: inherit;
    resize: vertical;
    background: white;
    min-height: 70px; /* Reduzido de 80px para 70px */
}

.ferramenta-section textarea:focus {
    outline: none;
    border-color: #4a90e2;
}

/* Layout NR-17 - IGUAL ao NR-10 e NR-11 */
#content-nr17 {
    padding: 15px;
    height: 100%;
}

.nr17-layout {
    display: flex;
    gap: 15px;
    height: 100%;
    width: 100%;
}

/* Logo NR-17 à esquerda */
.nr17-logo-area {
    flex-shrink: 0;
    padding-top: 20px;
}

.nr17-icon {
    width: 80px;
    height: 80px;
    background: #ffd23f;
    border: 3px solid #000;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 14px;
    color: #000;
    text-align: center;
    line-height: 1.2;
}

/* Área principal do formulário NR-17 */
.nr17-form-area {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 15px;
    width: 100%;
}

/* Campo com foco inicial NR-17 */
.nr17-focus {
    border: 2px solid #ff6600 !important;
    background: #fff !important;
}

.nr17-focus:focus {
    border: 2px solid #ff6600 !important;
    box-shadow: 0 0 5px rgba(255, 102, 0, 0.5) !important;
}

/* Layout NR-18 - IGUAL ao NR-10, NR-11 e NR-17 */
#content-nr18 {
    padding: 15px;
    height: 100%;
}

.nr18-layout {
    display: flex;
    gap: 15px;
    height: 100%;
    width: 100%;
}

/* Logo NR-18 à esquerda */
.nr18-logo-area {
    flex-shrink: 0;
    padding-top: 20px;
}

.nr18-icon {
    width: 80px;
    height: 80px;
    background: #ffd23f;
    border: 3px solid #000;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 14px;
    color: #000;
    text-align: center;
    line-height: 1.2;
}

/* Área principal do formulário NR-18 */
.nr18-form-area {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 15px;
    width: 100%;
}

/* Campo com foco inicial NR-18 */
.nr18-focus {
    border: 2px solid #ff6600 !important;
    background: #fff !important;
}

.nr18-focus:focus {
    border: 2px solid #ff6600 !important;
    box-shadow: 0 0 5px rgba(255, 102, 0, 0.5) !important;
}

/* Layout NR-33 - IGUAL ao NR-11 */
#content-nr33 {
    padding: 15px;
    height: 100%;
}

.nr33-layout {
    display: flex;
    gap: 15px;
    height: 100%;
    width: 100%;
}

/* Logo NR-33 à esquerda */
.nr33-logo-area {
    flex-shrink: 0;
    padding-top: 20px;
}

.nr33-icon {
    width: 80px;
    height: 80px;
    background: #ffd23f;
    border: 3px solid #000;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 14px;
    color: #000;
    text-align: center;
    line-height: 1.2;
}

/* Área principal do formulário NR-33 */
.nr33-form-area {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 15px;
    width: 100%;
}

/* Campo com foco inicial NR-33 */
.nr33-focus {
    border: 2px solid #ff6600 !important;
    background: #fff !important;
}

.nr33-focus:focus {
    border: 2px solid #ff6600 !important;
    box-shadow: 0 0 5px rgba(255, 102, 0, 0.5) !important;
}

/* Layout NR-35 - IGUAL ao NR-11 */
#content-nr35 {
    padding: 15px;
    height: 100%;
}

.nr35-layout {
    display: flex;
    gap: 15px;
    height: 100%;
    width: 100%;
}

/* Logo NR-35 à esquerda */
.nr35-logo-area {
    flex-shrink: 0;
    padding-top: 20px;
}

.nr35-icon {
    width: 80px;
    height: 80px;
    background: #ffd23f;
    border: 3px solid #000;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 14px;
    color: #000;
    text-align: center;
    line-height: 1.2;
}

/* Área principal do formulário NR-35 */
.nr35-form-area {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 15px;
    width: 100%;
}

/* Campo com foco inicial NR-35 */
.nr35-focus {
    border: 2px solid #ff6600 !important;
    background: #fff !important;
}

.nr35-focus:focus {
    border: 2px solid #ff6600 !important;
    box-shadow: 0 0 5px rgba(255, 102, 0, 0.5) !important;
}

/* Status row */
.status-row {
    display: flex;
    gap: 15px;
}

.status-row .field-group.small {
    width: 80px;
}

.status-row .field-group.small select {
    width: 100%;
}

/* Layout EPI - IGUAL ao NR-11, só muda a cor do logo */
#content-epi {
    display: none;
    padding: 15px;
    height: 100%;
}

#content-epi.active {
    display: flex;
}

.epi-layout {
    display: flex;
    gap: 15px;
    height: 100%;
    width: 100%;
}

/* Logo EPI à esquerda - IGUAL ao NR-11 */
.epi-logo-area {
    flex-shrink: 0;
    padding-top: 20px;
}

.epi-icon {
    width: 80px;
    height: 80px;
    background: #ff9500;
    border: 3px solid #000;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 14px;
    color: #000;
    text-align: center;
    line-height: 1.2;
}

/* Área principal do formulário EPI - IGUAL ao NR-11 */
.epi-form-area {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 15px;
    width: 100%;
}

/* Campo com foco inicial EPI - IGUAL ao NR-11 */
.epi-focus {
    border: 2px solid #ff6600 !important;
    background: #fff !important;
}

.epi-focus:focus {
    border: 2px solid #ff6600 !important;
    box-shadow: 0 0 5px rgba(255, 102, 0, 0.5) !important;
}

/* Foto readonly */
.readonly-photo {
    pointer-events: none;
    opacity: 0.8;
}

.readonly-photo .photo-container {
    border: 2px solid #666;
    background: #ffffff;
}



/* Responsividade do modal */
@media (max-width: 1024px) {
    .form-modal {
        width: 95%;
        max-width: none;
    }
    
    #content-aso {
        flex-direction: column;
    }
    
    .form-right {
        width: 100%;
    }
    
    .form-content {
        display: flex;
        flex-direction: column;
        height: auto;
        max-height: 70vh;
        overflow-y: auto;
    }

    .photo-section {
        order: 99; /* Move para o final no mobile */
        width: 100%;
        border-left: none;
        border-bottom: 1px solid #eee;
        padding: 20px 15px;
        background: #fcfcfc;
    }

    .buttons-row {
        flex-wrap: wrap;
        gap: 10px;
    }

    
    .nr10-layout {
        flex-direction: column;
    }

    .btn-cfg-mobile-hide {
        display: none !important;
    }

    .print-menu-vertical {
        top: 10px !important;
        right: 10px !important;
        scale: 0.8;
        transform-origin: top right;
    }
}/*
 Botões de ação na tabela - sem fundo colorido */
.action-btn-mini {
    background: none !important;
    border: none !important;
    padding: 2px !important;
    font-size: 14px !important;
    cursor: pointer !important;
    margin: 0 2px !important;
    color: #666 !important;
    transition: transform 0.2s ease !important;
}

.action-btn-mini:hover {
    transform: scale(1.2) !important;
    color: #333 !important;
    background: none !important;
}

.action-edit:hover {
    color: #ff8c00 !important;
    background: none !important;
}

.action-delete:hover {
    color: #e81123 !important;
    background: none !important;
}

/* Garantir que NENHUM botão na tabela tenha fundo */
.desktop-table button {
    background: none !important;
    border: none !important;
}

.desktop-table button:hover {
    background: none !important;
}/* 
Logo ASO com imagem da pasta */
.aso-icon {
    width: 80px;
    height: 80px;
    background-image: url('ASO.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border: 3px solid #000;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0; /* Esconder o texto ASO */
    color: transparent; /* Garantir que o texto não apareça */
}

/* Layout ASO */
.aso-layout {
    display: flex;
    gap: 15px;
    height: 100%;
}

.aso-logo-area {
    flex-shrink: 0;
    padding-top: 20px;
}

.aso-form-area {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 15px;
}/* Escon
der botões de foto APENAS na aba EPI */
.nr-tab[data-nr="epi"].active ~ * .photo-buttons,
.nr-content#content-epi ~ * .photo-buttons,
body:has(.nr-tab[data-nr="epi"].active) .photo-buttons {
    display: none !important;
}
/* Botões do formulário - linha de botões */
.buttons-row {
    display: flex;
    gap: 8px;
    margin-top: 15px;
    justify-content: flex-start;
    align-items: center;
}

.buttons-row button,
.buttons-row .btn-form,
.buttons-row .btn-novo,
.buttons-row .btn-cadastrar,
.buttons-row .btn-salvar,
.buttons-row .btn-alterar {
    padding: 6px 14px !important;
    font-size: 12px !important;
    font-weight: bold !important;
    border-radius: 4px !important;
    min-width: 70px !important;
    height: 30px !important;
    line-height: 1.2 !important;
    box-sizing: border-box !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    border: none !important;
}

.buttons-row .btn-novo {
    background: #4a90e2 !important;
    color: white !important;
}

.buttons-row .btn-novo:hover {
    background: #357abd !important;
}

.buttons-row .btn-cadastrar {
    background: #27ae60 !important;
    color: white !important;
}

.buttons-row .btn-cadastrar:hover {
    background: #219a52 !important;
}

.buttons-row .btn-alterar {
    background: #ff8c00 !important;
    color: white !important;
}

.buttons-row .btn-alterar:hover {
    background: #e67e22;
}

/* FORNECEDOR - LAYOUT CONFORME ANEXO */
#content-fornecedor {
    display: none;
    padding: 0;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

#content-fornecedor.active {
    display: flex;
    min-height: 0;
}

.fornecedor-layout {
    width: 100%;
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* FORNECEDOR HEADER - Logo + Campos */
.fornecedor-header {
    display: flex;
    gap: 20px;
    padding: 10px;
    background: #fff;
    border-radius: 0;
    flex-shrink: 0;
}

.fornecedor-logo-box {
    width: 120px;
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: transparent;
}

.logo-icon {
    font-size: 70px;
}

.fornecedor-logo-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.fornecedor-form {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.form-line {
    display: flex;
    gap: 15px;
    align-items: flex-end;
}

.form-line.full-width {
    flex-direction: column;
    align-items: stretch;
}

.form-field {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.form-field.small {
    flex: 0.5;
}

.form-field label {
    font-size: 11px;
    color: #4a90e2;
    font-weight: bold;
}

.form-field input,
.form-field select {
    padding: 4px;
    border: 1px solid #7f9db9;
    font-size: 11px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    height: 22px;
}

.form-field input[readonly] {
    background: #ffffff;
}

.form-field textarea {
    width: 100%;
    height: 80px;
    padding: 4px;
    border: 1px solid #7f9db9;
    font-size: 11px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    resize: vertical;
}

/* TABLE HEADER */
.table-header-row {
    display: flex;
    height: 25px;
    background: #fff;
    border: none;
}

.header-col {
    display: flex;
    align-items: center;
    padding: 0 8px;
    font-size: 12px;
    font-weight: bold;
    color: #4a90e2;
    border-right: none;
}

.header-col:last-child {
    border-right: none;
}

.empresa-col {
    flex: 1.2;
}

.cnpj-col {
    flex: 1;
}

.contato-col {
    flex: 1;
}

.data-cadastro-col {
    flex: 1;
}

.data-inativacao-col {
    flex: 1;
}

.acao-col {
    flex: 0.5;
    text-align: center;
}

.situacao-col {
    flex: 0.8;
}

/* GRID */
/* NÃO REMOVER: fornecedor-grid, grid-body, grid-row, grid-cell usados no fornecedor.aba */
/* Regras principais estão agrupadas mais abaixo (seção "FORNECEDOR - LAYOUT FINAL") */

.grid-body {
    display: flex;
    flex-direction: column;
}

.grid-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #999;
    font-size: 12px;
}

.grid-cell.empresa {
    flex: 1.2;
}

.grid-cell.cnpj {
    flex: 2.0;
}

.grid-cell.contato {
    flex: 2.2;
}

.grid-cell.data-cadastro {
    flex: 1.3;
}

.grid-cell.data-inativacao {
    flex: 1.2;
}

.grid-cell.acao {
    flex: 0.5;
    justify-content: center;
    align-items: center;
}

.grid-cell.situacao {
    flex: 0.6;
    justify-content: center;
}

.btn-eye {
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
}

.btn-eye:hover {
    background: #e0ebff;
}

.btn-eye:hover svg {
    stroke: #005dac;
}

.grid-cell.nome {
    flex: 0.8;
}

/* FOOTER - Botões e Abas */
.fornecedor-footer {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 15px;
    padding: 10px;
    background: #fff;
    border-bottom: 1px solid #e0e0e0;
    flex-shrink: 0;
}

.buttons-group {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}

.search-section {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
    margin: 0 20px;
}

.btn-novo,
.btn-salvar {
    padding: 6px 12px;
    border: 1px solid #adadad;
    font-size: 11px;
    cursor: pointer;
    font-weight: normal;
}

.btn-novo {
    background: #e1e1e1;
    color: #000;
}

.btn-novo:hover {
    background: #d0d0d0;
}

.btn-salvar {
    background: #32cd32;
    color: white;
    border-color: #28a428;
}

.btn-salvar:hover {
    background: #28a428;
}

/* Seletor de tipo de busca com radio buttons */
.search-type-selector {
    display: flex;
    gap: 15px;
    align-items: center;
    flex-shrink: 0;
}

.radio-label {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    color: #666;
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}

.radio-label input[type="radio"] {
    cursor: pointer;
    accent-color: #4a90e2;
    width: 14px;
    height: 14px;
}

.radio-label span {
    font-weight: 500;
}

.radio-label:hover {
    color: #333;
}

.search-inputs {
    display: flex;
    gap: 10px;
    flex: 1;
}

.search-input {
    padding: 8px 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 12px;
    width: 200px;
    font-family: Arial, sans-serif;
}

.search-input:focus {
    outline: none;
    border-color: #4a90e2;
    box-shadow: 0 0 4px rgba(74, 144, 226, 0.4);
}

.toggle-filtro-situacao {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
    flex-shrink: 0;
    padding-left: 20px;
    border-left: 1px solid #e0e0e0;
}

.toggle-filtro-situacao label {
    font-size: 11px;
    color: #666;
    font-weight: normal;
    white-space: nowrap;
}

.tab-btn {
    background: none;
    border: none;
    border-bottom: 2px solid #e0e0e0;
    font-size: 11px;
    cursor: pointer;
    color: #999;
    padding: 0 0 4px 0;
    font-weight: normal;
}

.tab-btn:hover {
    border-bottom: 2px solid #e0e0e0;
    color: #666;
}

.tab-btn.active {
    border-bottom: 2px solid #e0e0e0;
    color: #4a90e2;
    font-weight: bold;
}

/* Container dos campos */
.fornecedor-fields-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Linha 1: Empresa, CNPJ, ID */
.fornecedor-row-1 {
    display: flex;
    gap: 15px;
    align-items: end;
}

.field-empresa {
    flex: 2;
    min-width: 350px;
}

.field-cnpj {
    flex: 1.5;
    min-width: 200px;
}

.field-id {
    width: 80px;
    flex-shrink: 0;
}

/* Linha 2: Telefone, Celular, Contato */
.fornecedor-row-2 {
    display: flex;
    gap: 15px;
    align-items: end;
}

.field-telefone {
    width: 150px;
    flex-shrink: 0;
}

.field-celular {
    width: 150px;
    flex-shrink: 0;
}

.field-contato {
    flex: 1;
    min-width: 250px;
}

/* Campo Observação */
.fornecedor-observacao-container {
    margin: 8px 0;
}

.fornecedor-observacao-container textarea {
    width: 100%;
    height: 50px;
    padding: 4px;
    border: 1px solid #7f9db9;
    font-size: 11px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    resize: vertical;
}

/* Botões */
.fornecedor-buttons-container {
    display: flex;
    gap: 8px;
    margin: 8px 0;
}

.fornecedor-buttons-container .btn-form {
    padding: 6px 12px;
    border: 1px solid #adadad;
    font-size: 11px;
    cursor: pointer;
    min-width: 60px;
}

.fornecedor-buttons-container .btn-novo {
    background: #e1e1e1;
    color: #000;
}

.fornecedor-buttons-container .btn-novo:hover {
    background: #d0d0d0;
}

.fornecedor-buttons-container .btn-salvar {
    background: #32cd32;
    color: white;
    border-color: #28a428;
}

.fornecedor-buttons-container .btn-salvar:hover {
    background: #28a428;
}

/* Campo com foco inicial Fornecedor */
.fornecedor-focus {
    border: 2px solid #4a90e2 !important;
    background: #fff !important;
}

.fornecedor-focus:focus {
    border: 2px solid #4a90e2 !important;
    box-shadow: 0 0 5px rgba(74, 144, 226, 0.5) !important;
}

/* Seção de observação */
.observacao-section {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.observacao-section label {
    font-size: 11px;
    color: #000;
    font-weight: normal;
}

.observacao-section textarea {
    width: 100%;
    padding: 4px;
    border: 1px solid #7f9db9;
    font-size: 11px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    resize: vertical;
    min-height: 60px;
}

.observacao-section textarea:focus {
    border: 2px solid #4a90e2;
    outline: none;
}

/* Formatação de telefones */
#fornecedor_telefone, #fornecedor_celular {
    font-family: monospace;
}

/* Formatação de CNPJ */
#fornecedor_cnpj {
    font-family: monospace;
}/* Est
ilos específicos para a aba fornecedor */

/* Área de ações (botões) */
.fornecedor-actions {
    display: flex;
    gap: 8px;
    margin: 15px 0;
    justify-content: flex-start;
}

.fornecedor-actions .btn-form {
    padding: 6px 12px;
    border: 1px solid #adadad;
    font-size: 11px;
    cursor: pointer;
    min-width: 60px;
}

.fornecedor-actions .btn-buscar {
    background: #4a90e2;
    color: white;
    border-color: #357abd;
}

.fornecedor-actions .btn-buscar:hover {
    background: #357abd;
}

/* Área de pesquisa */
.fornecedor-search {
    margin: 15px 0;
    padding: 10px;
    background: #f8f9fa;
    border: 1px solid #d4d4d4;
    border-radius: 4px;
}

.search-row {
    display: flex;
    gap: 15px;
}

.search-group {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.search-group label {
    font-size: 11px;
    color: #000;
    font-weight: normal;
}

.search-input {
    padding: 4px;
    border: 1px solid #7f9db9;
    font-size: 11px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.search-input:focus {
    border: 2px solid #4a90e2;
    outline: none;
}

/* Grid de fornecedores */
.fornecedor-grid {
    margin: 15px 0;
    border: 1px solid #d4d4d4;
    border-radius: 4px;
    max-height: 400px;
    overflow-y: auto;
}

.fornecedor-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 11px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.fornecedor-table th {
    background: #e1e1e1;
    border: 1px solid #adadad;
    padding: 6px 8px;
    text-align: left;
    font-weight: normal;
    color: #000;
    position: sticky;
    top: 0;
    z-index: 1;
}

.fornecedor-table td {
    border: 1px solid #d4d4d4;
    padding: 4px 8px;
    background: #fff;
}

.fornecedor-table tbody tr:hover {
    background: #e5f1fb;
}

.fornecedor-table tbody tr.selected {
    background: #cce8ff;
}

/* Ações na tabela */
.fornecedor-actions-cell {
    text-align: center;
    white-space: nowrap;
}

.fornecedor-action-btn {
    background: none;
    border: none;
    padding: 2px 4px;
    font-size: 12px;
    cursor: pointer;
    margin: 0 2px;
    color: #666;
    transition: transform 0.2s ease;
}

.fornecedor-action-btn:hover {
    transform: scale(1.2);
    color: #333;
}

.fornecedor-edit:hover {
    color: #ff8c00;
}

.fornecedor-delete:hover {
    color: #e81123;
}

/* Loading na tabela */
.loading-cell {
    text-align: center;
    padding: 20px;
    color: #666;
}

.loading-spinner {
    display: inline-block;
    margin-right: 8px;
    animation: spin 1s linear infinite;
}

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

/* Ajustes no layout da aba fornecedor */
#content-fornecedor .fornecedor-layout {
    flex-direction: column;
    gap: 0;
}

#content-fornecedor .fornecedor-form-area {
    width: 100%;
    max-width: none;
}

/* Reduzir altura da observação */
.observacao-section textarea {
    min-height: 40px;
    max-height: 80px;
}/* 
Área de pesquisa - NOVO DESIGN */
.fornecedor-search-new {
    margin: 15px 0;
}

.search-fields {
    display: flex;
    gap: 20px;
}

.search-group-new {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.search-group-new label {
    font-size: 11px;
    color: #000;
    font-weight: normal;
}

.search-input-new {
    padding: 4px;
    border: none;
    border-bottom: 2px solid #4a90e2;
    font-size: 11px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background: transparent;
}

.search-input-new:focus {
    outline: none;
    border-bottom: 2px solid #357abd;
}

/* Grid de fornecedores - NOVO DESIGN */
.fornecedor-grid-new {
    margin: 15px 0;
    border: 2px solid #000;
    border-radius: 4px;
    height: 200px;
    display: flex;
    flex-direction: column;
}

.grid-header {
    display: flex;
    background: #e1e1e1;
    border-bottom: 1px solid #000;
    font-size: 12px;
    font-weight: bold;
    color: #4a90e2;
}

.grid-col-empresa {
    flex: 2;
    padding: 8px;
    border-right: 1px solid #000;
}

.grid-col-cnpj {
    flex: 1.5;
    padding: 8px;
    border-right: 1px solid #000;
}

.grid-col-nome {
    flex: 1.5;
    padding: 8px;
}

.grid-body {
    flex: 1;
    overflow-y: auto;
    background: #fff;
}

/* Estilo dos campos */
.fornecedor-form-area-new .field-group label {
    font-size: 11px;
    color: #000;
    font-weight: normal;
    margin-bottom: 2px;
    display: block;
}

.fornecedor-form-area-new .field-group input,
.fornecedor-form-area-new .field-group select {
    width: 100%;
    padding: 4px;
    border: 1px solid #7f9db9;
    font-size: 11px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.fornecedor-form-area-new .readonly-field {
    background: #ffffff !important;
}

/* Campo com foco inicial Fornecedor */
.fornecedor-focus {
    border: 2px solid #4a90e2 !important;
    background: #fff !important;
}

.fornecedor-focus:focus {
    border: 2px solid #4a90e2 !important;
    box-shadow: 0 0 5px rgba(74, 144, 226, 0.5) !important;
}/* Ár
ea de pesquisa */
.fornecedor-search-container {
    display: flex;
    gap: 30px;
    margin: 15px 0;
    align-items: end;
}

.search-field {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.search-field label {
    font-size: 11px;
    color: #000;
    font-weight: normal;
}

.search-input {
    padding: 4px 0;
    border: none;
    border-bottom: 2px solid #4a90e2;
    font-size: 11px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background: transparent;
    outline: none;
}

.search-input:focus {
    border-bottom: 2px solid #357abd;
}

/* Grid de fornecedores */
.fornecedor-grid-container {
    border: 2px solid #000;
    border-radius: 4px;
    height: 200px;
    display: flex;
    flex-direction: column;
    margin-top: 10px;
}

.grid-header {
    display: flex;
    background: #e1e1e1;
    border-bottom: 2px solid #000;
    font-size: 12px;
    font-weight: bold;
    color: #4a90e2;
    height: 30px;
}

.grid-col {
    padding: 8px;
    border-right: 1px solid #000;
    display: flex;
    align-items: center;
}

.grid-col:last-child {
    border-right: none;
}

.grid-col-empresa {
    flex: 2;
}

.grid-col-cnpj {
    flex: 1.5;
}

.grid-col-nome {
    flex: 1.5;
}

/* Estilos dos campos do formulário */
.fornecedor-fields-container .field-group {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.fornecedor-fields-container .field-group label {
    font-size: 11px;
    color: #4a90e2;
    font-weight: bold;
    margin-bottom: 2px;
}

.fornecedor-fields-container .field-group input,
.fornecedor-fields-container .field-group select {
    padding: 4px;
    border: 1px solid #7f9db9;
    font-size: 11px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    height: 22px;
}

.fornecedor-fields-container .readonly-field {
    background: #ffffff !important;
}

/* Campo com foco inicial */
.fornecedor-focus {
    border: 2px solid #4a90e2 !important;
    background: #fff !important;
}

.fornecedor-focus:focus {
    border: 2px solid #4a90e2 !important;
    box-shadow: 0 0 5px rgba(74, 144, 226, 0.5) !important;
}


/* Estilos para Radio Buttons de Exportação */
.export-options-main {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-left: 20px;
    padding-left: 20px;
    border-left: 1px solid #adadad;
}

.export-options {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-left: 20px;
    padding-left: 20px;
    border-left: 1px solid #adadad;
}

.export-radio {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    font-size: 11px;
    user-select: none;
}

.export-radio input[type="radio"] {
    width: 13px;
    height: 13px;
    cursor: pointer;
    accent-color: #4a90e2;
}

.export-radio span {
    font-size: 11px;
    color: #000;
    font-weight: normal;
}

.export-radio:hover span {
    color: #4a90e2;
}

.btn-exportar {
    background: #4a90e2;
    color: white;
    border: 1px solid #357abd;
    padding: 4px 14px;
    height: 30px;
    font-size: 12px;
    cursor: pointer;
    border-radius: 6px;
    font-weight: 500;
    transition: all 0.2s ease;
    box-shadow: 0 1px 3px rgba(74,144,226,0.2);
}

.btn-exportar:hover {
    background: #5ba0f2;
    border-color: #4080cc;
    box-shadow: 0 2px 6px rgba(74,144,226,0.3);
}

.btn-exportar:hover {
    background: #357abd;
    border-color: #2a5fa3;
}

.btn-exportar:active {
    background: #2a5fa3;
}


/* Estilos para Filtros de Cursos no Rodapé */
.courses-filter-row {
    display: flex;
    gap: 8px;
    padding: 8px;
    background: #ffffff;
    border-bottom: 1px solid #d4d4d4;
    overflow-x: auto;
    align-items: flex-start;
}

.course-filter-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 100px;
    flex-shrink: 0;
}

.course-header {
    display: flex;
    align-items: center;
    gap: 8px;
}

.course-label {
    font-size: 10px;
    font-weight: bold;
    color: #000;
    text-align: center;
}

.course-select {
    width: 100%;
    height: 24px; /* Aumentado de 20px para 24px */
    border: 1px solid #7f9db9;
    padding: 2px 4px;
    font-size: 12px; /* Aumentado de 9px para 12px */
    background: white;
    cursor: pointer;
}

.course-select:focus {
    outline: none;
    border-color: #4a90e2;
}

.course-indicators {
    display: flex;
    justify-content: center;
    gap: 4px;
    font-size: 8px;
    text-align: center;
}

.indicator-label {
    color: #666;
    font-weight: bold;
}

.indicator-count {
    color: #005dac;
    font-weight: bold;
    min-width: 12px;
}

/* Cores para Qda: Vencido (Vermelho) e Renovar (Cinza) */
.indicator-label.qda-vencido,
.indicator-count.qda-vencido {
    color: #e81123;
    font-weight: bold;
}

.indicator-label.qda-renovar,
.indicator-count.qda-renovar {
    color: #999;
    font-weight: bold;
}

/* Linha inferior com indicadores visuais e contadores */
.footer-bottom-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 12px;
    background: #ffffff;
    border-top: 1px solid #d4d4d4;
    border-bottom: 1px solid #000;
    gap: 20px;
    flex-shrink: 0;
}

.visual-indicators {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-left: auto;
    flex: 1;
    justify-content: flex-end;
}

.indicator-circle {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 1px solid #999;
}

.indicator-circle.ok {
    background: #32cd32;
}

.indicator-circle.renovar {
    background: #ff8c00;
}

.indicator-circle.vencido {
    background: #e81123;
}

.indicator-circle.cancelado {
    background: #666;
}

.indicator-text {
    font-size: 13px; /* Aumentado de 10px para 13px */
    font-weight: bold;
    color: #000;
    margin: 0 8px;
}

.footer-counters {
    display: flex;
    gap: 24px;
    font-size: 13px;
    flex: 0 1 auto;
    justify-content: center;
}

.counter-item {
    color: #000;
    font-weight: bold;
    white-space: nowrap;
    font-size: 13px;
    min-width: 120px;
    text-align: center;
}

.counter-item.canceled-count {
    color: #e81123;
}


/* Cores de status na tabela para todos os cursos */
/* ASO - Coluna 6 */
tr[data-status-aso="OK"] td:nth-child(6) {
    color: #008000;
    font-weight: bold;
}

tr[data-status-aso="Renovar"] td:nth-child(6) {
    color: #ff8c00;
    font-weight: bold;
}

tr[data-status-aso="Vencido"] td:nth-child(6) {
    color: #e81123;
    font-weight: bold;
}

/* NR-10 - Coluna 7 */
tr[data-status-nr10="OK"] td:nth-child(7) {
    color: #008000;
    font-weight: bold;
}

tr[data-status-nr10="Renovar"] td:nth-child(7) {
    color: #ff8c00;
    font-weight: bold;
}

tr[data-status-nr10="Vencido"] td:nth-child(7) {
    color: #e81123;
    font-weight: bold;
}

/* NR-11 - Coluna 8 */
tr[data-status-nr11="OK"] td:nth-child(8) {
    color: #008000;
    font-weight: bold;
}

tr[data-status-nr11="Renovar"] td:nth-child(8) {
    color: #ff8c00;
    font-weight: bold;
}

tr[data-status-nr11="Vencido"] td:nth-child(8) {
    color: #e81123;
    font-weight: bold;
}

/* NR-12 - Coluna 9 */
tr[data-status-nr12="OK"] td:nth-child(9) {
    color: #008000;
    font-weight: bold;
}

tr[data-status-nr12="Renovar"] td:nth-child(9) {
    color: #ff8c00;
    font-weight: bold;
}

tr[data-status-nr12="Vencido"] td:nth-child(9) {
    color: #e81123;
    font-weight: bold;
}

/* NR-17 - Coluna 10 */
tr[data-status-nr17="OK"] td:nth-child(10) {
    color: #008000;
    font-weight: bold;
}

tr[data-status-nr17="Renovar"] td:nth-child(10) {
    color: #ff8c00;
    font-weight: bold;
}

tr[data-status-nr17="Vencido"] td:nth-child(10) {
    color: #e81123;
    font-weight: bold;
}

/* NR-18 - Coluna 11 */
tr[data-status-nr18="OK"] td:nth-child(11) {
    color: #008000;
    font-weight: bold;
}

tr[data-status-nr18="Renovar"] td:nth-child(11) {
    color: #ff8c00;
    font-weight: bold;
}

tr[data-status-nr18="Vencido"] td:nth-child(11) {
    color: #e81123;
    font-weight: bold;
}

/* NR-33 - Coluna 12 */
tr[data-status-nr33="OK"] td:nth-child(12) {
    color: #008000;
    font-weight: bold;
}

tr[data-status-nr33="Renovar"] td:nth-child(12) {
    color: #ff8c00;
    font-weight: bold;
}

tr[data-status-nr33="Vencido"] td:nth-child(12) {
    color: #e81123;
    font-weight: bold;
}

/* NR-35 - Coluna 13 */
tr[data-status-nr35="OK"] td:nth-child(13) {
    color: #008000;
    font-weight: bold;
}

tr[data-status-nr35="Renovar"] td:nth-child(13) {
    color: #ff8c00;
    font-weight: bold;
}

tr[data-status-nr35="Vencido"] td:nth-child(13) {
    color: #e81123;
    font-weight: bold;
}

/* EPI - Coluna 14 */
tr[data-status-epi="OK"] td:nth-child(14) {
    color: #008000;
    font-weight: bold;
}

tr[data-status-epi="Renovar"] td:nth-child(14) {
    color: #ff8c00;
    font-weight: bold;
}

tr[data-status-epi="Vencido"] td:nth-child(14) {
    color: #e81123;
    font-weight: bold;
}


/* ===== ESTILOS FORNECEDOR ===== */

/* Layout Fornecedor */
.fornecedor-layout {
    display: flex;
    gap: 15px;
    height: 100%;
    padding: 15px;
}

/* Logo Box */
.fornecedor-logo-box {
    flex-shrink: 0;
    width: 120px;
    height: 120px;
    border: 2px solid #999;
    border-radius: 4px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ffffff;
}

.fornecedor-logo-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Formulário Fornecedor */
.fornecedor-form {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.form-line {
    display: flex;
    gap: 12px;
}

.form-line.full-width {
    width: 100%;
}

.form-field {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.form-field label {
    font-size: 11px;
    color: #005dac;
    font-weight: bold;
}

.form-field input,
.form-field textarea {
    width: 100%;
    height: 22px;
    border: 1px solid #7f9db9;
    padding: 2px 4px;
    font-size: 11px;
    background: white;
}

.form-field textarea {
    height: 60px;
    resize: none;
    font-family: inherit;
}

.form-field input:focus,
.form-field textarea:focus {
    outline: none;
    border-color: #4a90e2;
}

/* Footer Fornecedor */
.fornecedor-footer {
    display: flex;
    gap: 20px;
    align-items: center;
    padding: 8px;
    background: #ffffff;
    border-top: 1px solid #d4d4d4;
}

.buttons-group {
    display: flex;
    gap: 8px;
    align-items: center;
}

.btn-novo,
.btn-salvar {
    background: #e1e1e1;
    border: 1px solid #adadad;
    padding: 4px 8px;
    height: 22px;
    font-size: 11px;
    cursor: pointer;
    min-width: 60px;
}

.btn-novo:hover,
.btn-salvar:hover {
    background: #e5f1fb;
}

.btn-salvar {
    background: #32cd32;
    color: white;
    border-color: #28a428;
}

.btn-salvar:hover {
    background: #28a428;
}

/* Export Options */
.export-options {
    display: flex;
    gap: 8px;
    align-items: center;
}

.export-radio {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    cursor: pointer;
}

.export-radio input[type="radio"] {
    width: 13px;
    height: 13px;
}

.btn-exportar {
    background: #4a90e2;
    color: white;
    border: 1px solid #357abd;
    padding: 4px 8px;
    height: 22px;
    font-size: 11px;
    cursor: pointer;
}

.btn-exportar:hover {
    background: #357abd;
}

/* Search Section */
.search-section {
    display: flex;
    gap: 12px;
    align-items: center;
    flex: 1;
    max-width: 400px;
}

.search-type-selector {
    display: flex;
    gap: 8px;
}

.radio-label {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    cursor: pointer;
}

.radio-label input[type="radio"] {
    width: 13px;
    height: 13px;
}

.search-inputs {
    display: flex;
    gap: 8px;
    flex: 1;
}

.search-input {
    flex: 1;
    height: 22px;
    border: 1px solid #7f9db9;
    padding: 2px 4px;
    font-size: 11px;
    background: white;
}

.search-input:focus {
    outline: none;
    border-color: #4a90e2;
}

/* Toggle Filtro Situação */
.toggle-filtro-situacao {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    flex-shrink: 0;
    padding-right: 8px;
}

/* Table Header */
.table-header-row {
    display: grid;
    grid-template-columns: 2fr 1.5fr 1.5fr 1.5fr 1.5fr 0.6fr 1fr;
    gap: 8px;
    padding: 8px;
    background: #4a90e2;
    color: white;
    font-weight: bold;
    font-size: 11px;
    border-bottom: 1px solid #357abd;
}

.header-col {
    padding: 4px;
    text-align: left;
}

/* Empresa Column */
.empresa-col {
    flex: 2;
}

/* CNPJ Column */
.cnpj-col {
    flex: 1.5;
}

/* Contato Column */
.contato-col {
    flex: 1.5;
}

/* Data Cadastro Column */
.data-cadastro-col {
    flex: 1.5;
}

/* Data Inativação Column */
.data-inativacao-col {
    flex: 1.5;
}

/* Ação Column */
.acao-col {
    flex: 0.6;
    text-align: center;
}

/* Situação Column */
.situacao-col {
    flex: 1;
    text-align: center;
}



/* Layout Fornecedor */
.fornecedor-layout {
    display: flex;
    flex-direction: column;
    height: 100%;
    gap: 12px;
}

.fornecedor-header {
    display: flex;
    gap: 15px;
    padding: 15px;
    background: white;
    border: 1px solid #d4d4d4;
    border-radius: 4px;
}

.fornecedor-logo-box {
    flex-shrink: 0;
    width: 120px;
    height: 120px;
    border: 2px solid #999;
    border-radius: 4px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ffffff;
}

.fornecedor-logo-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.fornecedor-form {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.form-line {
    display: flex;
    gap: 12px;
}

.form-line.full-width {
    width: 100%;
}

.form-field {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.form-field label {
    font-size: 11px;
    color: #005dac;
    font-weight: bold;
}

.form-field input,
.form-field textarea {
    width: 100%;
    height: 22px;
    border: 1px solid #7f9db9;
    padding: 2px 4px;
    font-size: 11px;
    background: white;
}

.form-field textarea {
    height: 60px;
    resize: none;
    font-family: inherit;
}

.form-field input:focus,
.form-field textarea:focus {
    outline: none;
    border-color: #4a90e2;
}

/* Seção de Cursos/Certificados Fornecedor */
.fornecedor-cursos {
    background: #f9f9f9;
    border: 1px solid #d4d4d4;
    border-radius: 4px;
    padding: 12px;
}

.curso-item {
    display: flex;
    gap: 12px;
    margin-bottom: 12px;
    padding: 8px;
    background: white;
    border: 1px solid #e0e0e0;
    border-radius: 3px;
}

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

.curso-label {
    min-width: 60px;
    font-weight: bold;
    color: #005dac;
    display: flex;
    align-items: center;
    padding: 0 8px;
    border-right: 2px solid #005dac;
}

.curso-fields {
    display: flex;
    gap: 8px;
    flex: 1;
    align-items: flex-end;
}

.campo-pequeno {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 120px;
}

.campo-pequeno label {
    font-size: 10px;
    color: #005dac;
    font-weight: bold;
}

.campo-pequeno input,
.campo-pequeno select {
    height: 22px;
    border: 1px solid #7f9db9;
    padding: 2px 4px;
    font-size: 11px;
    background: white;
}

.campo-pequeno input:focus,
.campo-pequeno select:focus {
    outline: none;
    border-color: #4a90e2;
}

.campo-pequeno input[readonly] {
    background: #ffffff;
    color: #666;
}

/* Footer Fornecedor */
.fornecedor-footer {
    display: flex;
    gap: 20px;
    align-items: center;
    padding: 8px;
    background: #ffffff;
    border: 1px solid #d4d4d4;
    border-radius: 4px;
    overflow: hidden;
    justify-content: space-between;
}

.buttons-group {
    display: flex;
    gap: 8px;
    align-items: center;
}

.btn-novo,
.btn-salvar {
    background: #e1e1e1;
    border: 1px solid #adadad;
    padding: 4px 8px;
    height: 22px;
    font-size: 11px;
    cursor: pointer;
    min-width: 60px;
}

.btn-novo:hover,
.btn-salvar:hover {
    background: #e5f1fb;
}

.btn-salvar {
    background: #32cd32;
    color: white;
    border-color: #28a428;
}

.btn-salvar:hover {
    background: #28a428;
}

.export-options {
    display: flex;
    gap: 8px;
    align-items: center;
}

.export-radio {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    cursor: pointer;
}

.export-radio input[type="radio"] {
    width: 13px;
    height: 13px;
}

.btn-exportar {
    background: #4a90e2;
    color: white;
    border: 1px solid #357abd;
    padding: 4px 8px;
    height: 22px;
    font-size: 11px;
    cursor: pointer;
}

.btn-exportar:hover {
    background: #357abd;
}

.search-section {
    display: flex;
    gap: 12px;
    align-items: center;
    flex: 1;
}

.search-type-selector {
    display: flex;
    gap: 8px;
}

.radio-label {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    cursor: pointer;
}

.radio-label input[type="radio"] {
    width: 13px;
    height: 13px;
}

.search-inputs {
    display: flex;
    gap: 8px;
    flex: 1;
}

.search-input {
    flex: 1;
    height: 22px;
    border: 1px solid #7f9db9;
    padding: 2px 4px;
    font-size: 11px;
    background: white;
}

.search-input:focus {
    outline: none;
    border-color: #4a90e2;
}

.toggle-filtro-situacao {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    flex-shrink: 0;
    padding-right: 8px;
}

/* Table Header */
.table-header-row {
    display: grid;
    grid-template-columns: 2fr 1.5fr 1.5fr 1.5fr 1.5fr 0.6fr 1fr;
    gap: 8px;
    padding: 8px;
    background: #4a90e2;
    color: white;
    font-weight: bold;
    font-size: 11px;
    border-bottom: 1px solid #357abd;
}

.header-col {
    padding: 4px;
    text-align: left;
}


/* ===== FORNECEDOR - LAYOUT OTIMIZADO ===== */

.fornecedor-layout {
    display: flex;
    flex-direction: column;
    height: 100%;
    gap: 4px;
}

.fornecedor-header {
    display: flex;
    gap: 8px;
    padding: 8px;
    background: white;
    border: 1px solid #d4d4d4;
    border-radius: 3px;
    flex-shrink: 0;
}

.fornecedor-logo-box {
    flex-shrink: 0;
    width: 100px;
    height: 100px;
    border: 2px solid #999;
    border-radius: 3px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ffffff;
}

.fornecedor-logo-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.fornecedor-form {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.form-line {
    display: flex;
    gap: 4px;
}

.form-line.full-width {
    width: 100%;
}

.form-field {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.form-field label {
    font-size: 9px;
    color: #005dac;
    font-weight: bold;
}

.form-field input,
.form-field textarea {
    width: 100%;
    height: 18px;
    border: 1px solid #7f9db9;
    padding: 1px 3px;
    font-size: 10px;
    background: white;
}

.form-field textarea {
    height: 35px;
    resize: none;
    font-family: inherit;
}

.form-field input:focus,
.form-field textarea:focus {
    outline: none;
    border-color: #4a90e2;
}

/* Seção de Cursos/Certificados */
.fornecedor-cursos {
    background: #f9f9f9;
    border: 1px solid #d4d4d4;
    border-radius: 3px;
    padding: 6px;
    flex-shrink: 0;
}

.curso-item {
    display: flex;
    gap: 6px;
    margin-bottom: 6px;
    padding: 4px;
    background: white;
    border: 1px solid #e0e0e0;
    border-radius: 2px;
    align-items: center;
}

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

.curso-label {
    min-width: 50px;
    font-weight: bold;
    color: #005dac;
    font-size: 10px;
    padding: 0 4px;
    border-right: 2px solid #005dac;
}

.curso-fields {
    display: flex;
    gap: 4px;
    flex: 1;
    align-items: center;
}

.campo-pequeno {
    display: flex;
    flex-direction: column;
    gap: 1px;
    flex: 1;
    min-width: 80px;
}

.campo-pequeno label {
    font-size: 8px;
    color: #005dac;
    font-weight: bold;
}

.campo-pequeno input,
.campo-pequeno select {
    height: 16px;
    border: 1px solid #7f9db9;
    padding: 1px 2px;
    font-size: 9px;
    background: white;
}

.campo-pequeno input:focus,
.campo-pequeno select:focus {
    outline: none;
    border-color: #4a90e2;
}

.campo-pequeno input[readonly] {
    background: #ffffff;
    color: #666;
}

/* Footer Fornecedor */
.fornecedor-footer {
    display: flex;
    gap: 8px;
    align-items: center;
    padding: 4px;
    background: #ffffff;
    border: 1px solid #d4d4d4;
    border-radius: 3px;
    flex-shrink: 0;
}

.buttons-group {
    display: flex;
    gap: 4px;
    align-items: center;
}

.btn-novo,
.btn-salvar {
    background: #e1e1e1;
    border: 1px solid #adadad;
    padding: 2px 6px;
    height: 20px;
    font-size: 10px;
    cursor: pointer;
    min-width: 50px;
}

.btn-novo:hover,
.btn-salvar:hover {
    background: #e5f1fb;
}

.btn-salvar {
    background: #32cd32;
    color: white;
    border-color: #28a428;
}

.btn-salvar:hover {
    background: #28a428;
}

.export-options {
    display: flex;
    gap: 4px;
    align-items: center;
}

.export-radio {
    display: flex;
    align-items: center;
    gap: 2px;
    font-size: 9px;
    cursor: pointer;
}

.export-radio input[type="radio"] {
    width: 12px;
    height: 12px;
}

.btn-exportar {
    background: #4a90e2;
    color: white;
    border: 1px solid #357abd;
    padding: 2px 6px;
    height: 20px;
    font-size: 10px;
    cursor: pointer;
}

.btn-exportar:hover {
    background: #357abd;
}

.search-section {
    display: flex;
    gap: 6px;
    align-items: center;
    flex: 1;
}

.search-type-selector {
    display: flex;
    gap: 4px;
}

.radio-label {
    display: flex;
    align-items: center;
    gap: 2px;
    font-size: 9px;
    cursor: pointer;
}

.radio-label input[type="radio"] {
    width: 12px;
    height: 12px;
}

.search-inputs {
    display: flex;
    gap: 4px;
    flex: 1;
}

.search-input {
    flex: 1;
    height: 20px;
    border: 1px solid #7f9db9;
    padding: 1px 3px;
    font-size: 10px;
    background: white;
}

.search-input:focus {
    outline: none;
    border-color: #4a90e2;
}

.toggle-filtro-situacao {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 9px;
    flex-shrink: 0;
}

/* Table Header */
.table-header-row {
    display: grid;
    grid-template-columns: 2fr 1.5fr 1.5fr 1fr 1fr 0.5fr 1fr;
    gap: 0;
    padding: 4px 8px;
    background: #4a90e2;
    color: white;
    font-weight: bold;
    font-size: 11px;
    border: none;
    border-bottom: 1px solid #357abd;
    flex-shrink: 0;
    align-items: center;
    min-height: 28px;
}

.header-col {
    padding: 0 4px;
    text-align: left;
    color: white;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

/* Grid de Fornecedores */
.fornecedor-grid {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    border: 1px solid #d4d4d4;
    background: white;
    margin-top: 0;
}

.grid-body {
    display: flex;
    flex-direction: column;
    background: white;
}

.grid-row {
    display: grid;
    grid-template-columns: 2fr 1.5fr 1.5fr 1fr 1fr 0.5fr 1fr;
    gap: 0;
    padding: 3px 8px;
    border-bottom: none !important;
    align-items: center;
    cursor: pointer;
    transition: background 0.2s;
    background: white !important;
    min-height: 24px;
}

.grid-row:hover {
    background: #e8f4fc !important;
}

.grid-row.selected {
    background: #cce5ff !important;
    color: #000 !important;
}

.grid-cell {
    padding: 2px 4px;
    font-size: 11px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #000 !important;
}

.grid-cell.empresa {
    font-weight: 600;
    color: #000 !important;
}

.grid-empty {
    padding: 20px;
    text-align: center;
    color: #999;
    font-style: italic;
    font-size: 11px;
}


/* ===== DOCUMENTAÇÃO ===== */

.documentacao-layout {
    display: flex;
    flex-direction: column;
    gap: 15px;
    padding: 20px;
    height: 100%;
    overflow-y: auto;
}

.doc-item {
    display: flex;
    gap: 15px;
    padding: 12px;
    background: white;
    border: 1px solid #d4d4d4;
    border-radius: 4px;
    align-items: flex-start;
}

.doc-label {
    min-width: 80px;
    font-weight: bold;
    color: #005dac;
    font-size: 12px;
    padding: 4px 8px;
    border-right: 2px solid #005dac;
    display: flex;
    align-items: center;
}

.doc-fields {
    display: flex;
    gap: 12px;
    flex: 1;
    align-items: flex-end;
}

.doc-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
    min-width: 150px;
}

.doc-field label {
    font-size: 11px;
    color: #005dac;
    font-weight: bold;
}

.doc-field input,
.doc-field select {
    height: 22px;
    border: 1px solid #7f9db9;
    padding: 2px 4px;
    font-size: 11px;
    background: white;
}

.doc-field input:focus,
.doc-field select:focus {
    outline: none;
    border-color: #4a90e2;
}

.doc-field input[readonly] {
    background: #ffffff;
    color: #666;
}


/* Aba Documentação - LAYOUT MAIS ORGANIZADO */
.doc-layout {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 0;
    height: 100%;
    overflow-y: auto;
    width: 100%;
    max-width: 100%;
    background: #ffffff;
}

.doc-container-with-logo {
    display: flex;
    gap: 15px;
    padding: 15px;
    background: #ffffff;
}

.doc-logo-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.doc-logo-icon {
    width: 100px;
    height: 100px;
    background: white;
    border: 2px solid #d4d4d4;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 48px;
}

.doc-logo-id {
    font-size: 12px;
    color: #666;
    font-weight: bold;
}

.doc-content-section {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* Seção de busca separada */
.doc-search-section {
    margin-bottom: 10px;
}

/* Grid para tabelas lado a lado */
.doc-tables-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
}



.doc-field-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
}

.doc-field-group label {
    font-size: 11px;
    font-weight: bold;
    color: #000;
}

.doc-field-group input {
    padding: 4px 6px;
    border: 1px solid #d4d4d4;
    border-radius: 2px;
    font-size: 11px;
}

.doc-search-group {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}

.doc-search-group input[type="radio"] {
    width: 14px;
    height: 14px;
    cursor: pointer;
}

.doc-search-group label {
    font-size: 10px;
    margin: 0;
    cursor: pointer;
}

.doc-search-input {
    flex: 1;
    width: 100%;
    padding: 4px 6px;
    border: 1px solid #d4d4d4;
    border-radius: 2px;
    font-size: 11px;
    box-sizing: border-box;
}

.doc-table-item {
    border: 1px solid #d4d4d4;
    border-radius: 8px;
    overflow: hidden;
    margin: 0;
    width: 100%;
    box-sizing: border-box;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    background: white;
}

.doc-table-header {
    background: #ffffff;
    color: #000;
    padding: 6px 15px;
    font-weight: bold;
    font-size: 13px;
    text-align: left;
    border-bottom: 1px solid #d4d4d4;
    box-shadow: none;
}

.doc-table-row {
    display: flex;
    gap: 0;
    padding: 8px 10px;
    background: #fff;
    border-bottom: 1px solid #e9ecef;
    width: 100%;
    box-sizing: border-box;
}

.doc-table-row:last-child {
    border-bottom: none;
}

.doc-table-cell {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    border-right: 1px solid #d4d4d4;
    padding: 8px;
    min-width: 0; /* Permite shrink */
    justify-content: flex-start;
}

.doc-table-row:first-of-type .doc-table-cell {
    gap: 0;
}

.doc-table-row:first-of-type .doc-table-cell {
    flex: 1;
}

.doc-table-row:not(:first-of-type) .doc-table-cell {
    flex: 0 0 120px;
}

.doc-table-cell:last-child {
    border-right: none;
}

.doc-table-cell label {
    font-size: 11px;
    font-weight: 600;
    color: #005dac;
    margin-bottom: 3px;
}

.doc-table-cell input,
.doc-table-cell select {
    padding: 5px 6px;
    border: 1px solid #999;
    border-radius: 2px;
    font-size: 11px;
    height: 24px;
    transition: border-color 0.2s ease;
}

.doc-table-row:first-of-type .doc-table-cell:nth-child(1) {
    flex: 12;
    min-width: 120px;
}

.doc-table-row:first-of-type .doc-table-cell:nth-child(2) {
    flex: 10;
    min-width: 100px;
}

.doc-table-row:first-of-type .doc-table-cell:nth-child(3) {
    flex: 8;
    min-width: 80px;
}

.doc-table-row:first-of-type .doc-table-cell:nth-child(4) {
    flex: 20;
    min-width: 200px;
}

.doc-table-row:first-of-type .doc-search-input {
    height: 24px;
    padding: 5px 6px;
    font-size: 11px;
    flex: 1;
    width: 100%;
}

.doc-table-cell input:focus,
.doc-table-cell select:focus {
    outline: none;
    border-color: #4a90e2;
    box-shadow: 0 0 0 2px rgba(74, 144, 226, 0.2);
}

.doc-footer {
    display: flex;
    justify-content: center;
    gap: 20px;
    padding: 15px;
    background: #ffffff;
    border: 1px solid #d4d4d4;
    border-radius: 0;
    margin-top: 0;
}

.doc-footer-tabs {
    display: flex;
    gap: 15px;
    align-items: center;
}

.doc-footer-tab {
    display: flex;
    gap: 12px;
    align-items: center;
    padding: 8px 15px;
    background: white;
    border: 1px solid #d4d4d4;
    border-radius: 6px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.doc-tab-label {
    font-weight: bold;
    color: #000;
    font-size: 11px;
}

.doc-tab-count {
    color: #e81123;
    font-weight: bold;
    font-size: 10px;
}

.doc-filter-select {
    padding: 2px 4px;
    border: 1px solid #d4d4d4;
    font-size: 10px;
    background: white;
}

.doc-filter-select {
    padding: 4px 6px;
    border: 1px solid #d4d4d4;
    border-radius: 2px;
    font-size: 11px;
}



/* Botão Salvar/Alterar */
.btn-doc-save {
    padding: 8px 16px;
    background: #4a90e2;
    color: white;
    border: 1px solid #357abd;
    border-radius: 4px;
    font-size: 12px;
    font-weight: bold;
    cursor: pointer;
    transition: background 0.2s ease;
    width: 100%;
    margin-top: 8px;
}

.btn-doc-save:hover {
    background: #357abd;
}

/* Grupo de botões da documentação */
.doc-buttons-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 100%;
    margin-top: 8px;
}

/* Botão Cadastrar/Alterar pequeno */
.btn-doc-save-small {
    padding: 6px 12px;
    background: #ffffff;
    color: #333;
    border: 2px solid #4a90e2;
    border-radius: 3px;
    font-size: 11px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.2s ease;
    width: 100%;
}

.btn-doc-save-small:hover {
    background: #f0f0f0;
    border-color: #357abd;
}

/* Botão Limpar pequeno */
.btn-doc-limpar-small {
    padding: 6px 12px;
    background: #ffffff;
    color: #333;
    border: 2px solid #4a90e2;
    border-radius: 3px;
    font-size: 11px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.2s ease;
    width: 100%;
}

.btn-doc-limpar-small:hover {
    background: #f0f0f0;
    border-color: #357abd;
}


/* Status colors para documentação */
#doc_pgr_status,
#doc_pcmso_status {
    font-weight: bold;
}

#doc_pgr_status option[value="OK"],
#doc_pcmso_status option[value="OK"] {
    color: #32cd32;
}

#doc_pgr_status option[value="Renovar"],
#doc_pcmso_status option[value="Renovar"] {
    color: #ff9500;
}

#doc_pgr_status option[value="Vencido"],
#doc_pcmso_status option[value="Vencido"] {
    color: #e81123;
}

/* Colorir o select baseado no valor selecionado */
#doc_pgr_status[value="OK"],
#doc_pcmso_status[value="OK"] {
    color: #32cd32;
}

#doc_pgr_status[value="Renovar"],
#doc_pcmso_status[value="Renovar"] {
    color: #ff9500;
}

#doc_pgr_status[value="Vencido"],
#doc_pcmso_status[value="Vencido"] {
    color: #e81123;
}


/* Grupo de tipo de documentação */
.doc-type-group {
    display: flex;
    gap: 12px;
    align-items: center;
}

.doc-type-group input[type="radio"] {
    margin: 0;
    cursor: pointer;
}

.doc-type-group label {
    margin: 0;
    cursor: pointer;
    font-size: 11px;
    font-weight: 500;
}


/* Célula de busca */
.doc-search-cell {
    flex: 20 !important;
}

/* Grupo de busca inline */
.doc-search-group-inline {
    display: flex;
    gap: 6px;
    align-items: center;
    flex-wrap: wrap;
}

.doc-search-group-inline input[type="radio"] {
    margin: 0;
    cursor: pointer;
}

.doc-search-group-inline label {
    margin: 0;
    font-size: 10px;
    cursor: pointer;
}


/* Célula de botões na tabela */
.doc-buttons-cell {
    display: flex;
    flex-direction: row;
    gap: 3px;
    justify-content: center;
    align-items: flex-end;
    flex: 5 !important;
    min-width: 150px;
    padding: 8px 8px 4px 8px !important;
}

.doc-buttons-cell .btn-doc-save-small,
.doc-buttons-cell .btn-doc-limpar-small {
    padding: 4px 6px;
    font-size: 11px;
    width: 65px;
    height: 24px;
}


/* Grid de empresas cadastradas */
.doc-empresas-grid {
    width: 100%;
    margin-top: 10px;
    border: 1px solid #d4d4d4;
    border-radius: 4px;
    max-height: 200px;
    overflow-y: auto;
    background: #ffffff;
}

.doc-empresa-item {
    padding: 8px 10px;
    border-bottom: 1px solid #e9ecef;
    cursor: pointer;
    font-size: 11px;
    transition: background 0.2s ease;
}

.doc-empresa-item:hover {
    background: #e5f1fb;
}

.doc-empresa-item.selected {
    background: #4a90e2;
    color: white;
}

.doc-empresa-item:last-child {
    border-bottom: none;
}


/* Campos readonly não editáveis */
#doc_empresa,
#doc_cnpj {
    cursor: not-allowed !important;
    pointer-events: none !important;
    user-select: none !important;
    -webkit-user-select: none !important;
    -moz-user-select: none !important;
    -ms-user-select: none !important;
    background-color: #f0f0f0 !important;
    color: #666 !important;
}

#doc_empresa:focus,
#doc_cnpj:focus {
    outline: none !important;
    box-shadow: none !important;
}

#doc_empresa::selection,
#doc_cnpj::selection {
    background: transparent;
}


/* Combo de busca */
.doc-combo-busca {
    flex: 1;
    padding: 5px 6px;
    border: 1px solid #999;
    border-radius: 2px;
    font-size: 11px;
    height: 24px;
    background: white;
    cursor: pointer;
}


/* ===== ESTILOS PARA NR-06 ===== */
#content-nr06 {
    padding: 15px;
    height: 100%;
}

.nr06-layout {
    display: flex;
    gap: 15px;
    height: 100%;
    width: 100%;
}

.nr06-logo-area {
    flex-shrink: 0;
    padding-top: 20px;
}

.nr06-icon {
    width: 80px;
    height: 80px;
    background: #ffd23f;
    border: 3px solid #000;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 14px;
    color: #000;
    text-align: center;
    line-height: 1.2;
}

.nr06-form-area {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 15px;
    width: 100%;
}

.nr06-focus {
    border: 2px solid #ff6600 !important;
    background: #fff !important;
}

.nr06-focus:focus {
    border: 2px solid #ff6600 !important;
    box-shadow: 0 0 5px rgba(255, 102, 0, 0.5) !important;
}

/* ===== ESTILOS PARA NR-20 ===== */
#content-nr20 {
    padding: 15px;
    height: 100%;
}

.nr20-layout {
    display: flex;
    gap: 15px;
    height: 100%;
    width: 100%;
}

.nr20-logo-area {
    flex-shrink: 0;
    padding-top: 20px;
}

.nr20-icon {
    width: 80px;
    height: 80px;
    background: #ffd23f;
    border: 3px solid #000;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 14px;
    color: #000;
    text-align: center;
    line-height: 1.2;
}

.nr20-form-area {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 15px;
    width: 100%;
}

.nr20-focus {
    border: 2px solid #ff6600 !important;
    background: #fff !important;
}

.nr20-focus:focus {
    border: 2px solid #ff6600 !important;
    box-shadow: 0 0 5px rgba(255, 102, 0, 0.5) !important;
}

/* ===== ESTILOS PARA NR-34 ===== */
#content-nr34 {
    padding: 15px;
    height: 100%;
}

.nr34-layout {
    display: flex;
    gap: 15px;
    height: 100%;
    width: 100%;
}

.nr34-logo-area {
    flex-shrink: 0;
    padding-top: 20px;
}

.nr34-icon {
    width: 80px;
    height: 80px;
    background: #ffd23f;
    border: 3px solid #000;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 14px;
    color: #000;
    text-align: center;
    line-height: 1.2;
}

.nr34-form-area {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 15px;
    width: 100%;
}

.nr34-focus {
    border: 2px solid #ff6600 !important;
    background: #fff !important;
}

.nr34-focus:focus {
    border: 2px solid #ff6600 !important;
    box-shadow: 0 0 5px rgba(255, 102, 0, 0.5) !important;
}

/* Modal Habilitar Cursos */
.modal-habilitar-cursos {
    max-width: 600px;
    width: 90%;
}

.cursos-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    padding: 20px;
    background: #f5f5f5;
    border-radius: 4px;
}

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

.curso-checkbox input[type="checkbox"] {
    width: 20px;
    height: 20px;
    cursor: pointer;
    accent-color: #4a90e2;
}

.curso-checkbox label {
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    user-select: none;
    color: #333;
}

.curso-checkbox input[type="checkbox"]:hover {
    transform: scale(1.1);
}

.curso-checkbox input[type="checkbox"]:checked + label {
    color: #4a90e2;
    font-weight: 600;
}

/* Modal Habilitar Cursos */
.modal-habilitar-cursos {
    max-width: 400px;
    width: 90%;
}

.modal-body-cursos {
    padding: 15px;
}

.cursos-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    margin-bottom: 15px;
}

.curso-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 8px;
    border: 1px solid #d4d4d4;
    border-radius: 3px;
    background: #f9f9f9;
}

.curso-item input[type="checkbox"] {
    width: 15px;
    height: 15px;
    cursor: pointer;
}

.curso-item label {
    font-size: 11px;
    font-weight: bold;
    cursor: pointer;
    user-select: none;
}

.modal-footer-cursos {
    display: flex;
    justify-content: center;
    gap: 10px;
    padding-top: 15px;
    border-top: 1px solid #d4d4d4;
}

.btn-salvar-cursos,
.btn-cancelar-cursos {
    min-width: 80px !important;
    height: 28px !important;
    padding: 6px 20px !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    border-radius: 3px !important;
    cursor: pointer !important;
    box-sizing: border-box !important;
}

.btn-salvar-cursos {
    background: #4a90e2 !important;
    color: white !important;
    border: 1px solid #357abd !important;
    border-radius: 6px !important;
    box-shadow: 0 1px 3px rgba(74,144,226,0.2) !important;
    transition: all 0.2s ease !important;
}

.btn-salvar-cursos:hover {
    background: #5ba0f2 !important;
    border-color: #4080cc !important;
    box-shadow: 0 2px 8px rgba(74,144,226,0.3) !important;
}

.btn-cancelar-cursos {
    background: #4a90e2 !important;
    color: white !important;
    border: 1px solid #357abd !important;
    border-radius: 6px !important;
    box-shadow: 0 1px 3px rgba(74,144,226,0.2) !important;
    transition: all 0.2s ease !important;
}

.btn-cancelar-cursos:hover {
    background: #5ba0f2 !important;
    border-color: #4080cc !important;
    box-shadow: 0 2px 8px rgba(74,144,226,0.3) !important;
}

.btn-habilitar {
    background: #6c757d;
    color: white;
    border: 1px solid #5a6268;
}

.btn-habilitar:hover {
    background: #5a6268;
}


/* Modal Configuração do Relatório */
.modal-configuracao {
    max-width: 450px;
    width: 90%;
}

.modal-body-config {
    padding: 20px;
}

.config-field {
    margin-bottom: 20px;
}

.config-field label {
    display: block;
    margin-bottom: 8px;
    font-weight: bold;
    color: #333;
}

.config-field input {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 14px;
    box-sizing: border-box;
}

.config-field input:focus {
    border-color: #4a90e2;
    outline: none;
}

.config-preview {
    background: #f5f5f5;
    padding: 15px;
    border-radius: 4px;
    margin-top: 15px;
}

.config-preview p {
    margin: 0 0 10px 0;
    color: #666;
}

.preview-header {
    text-align: center;
    font-size: 16px;
    font-weight: bold;
    color: #333;
    padding: 10px;
    background: white;
    border: 1px dashed #ccc;
    margin-bottom: 10px;
}

.preview-footer {
    text-align: center;
    font-size: 12px;
    color: #666;
    padding: 5px;
    background: white;
    border: 1px dashed #ccc;
}

.modal-footer-config {
    padding: 15px 20px;
    border-top: 1px solid #e0e0e0;
    display: flex;
    justify-content: center;
    gap: 10px;
}

.btn-salvar-config {
    background: #28a745;
    color: white;
    border: none;
    padding: 10px 30px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
}

.btn-salvar-config:hover {
    background: #218838;
}

.btn-cancelar-config {
    background: #6c757d;
    color: white;
    border: none;
    padding: 10px 30px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
}

.btn-cancelar-config:hover {
    background: #5a6268;
}

/* Botão Config na toolbar */
.btn-config {
    background: #4a90e2;
    color: white;
    border: 1px solid #357abd;
    border-radius: 6px;
    font-weight: 500;
    transition: all 0.2s ease;
}

.btn-config:hover {
    background: #5ba0f2;
    border-color: #4080cc;
}


/* Logo no modal de configuração */
.logo-upload-area {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 10px;
}

.logo-preview-img {
    width: 60px;
    height: 60px;
    object-fit: contain;
    border: 1px solid #ddd;
    border-radius: 4px;
    background: white;
}

.btn-selecionar-logo {
    background: #4a90e2;
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 500;
    transition: all 0.2s ease;
    box-shadow: 0 1px 3px rgba(74,144,226,0.2);
}

.btn-selecionar-logo:hover {
    background: #5ba0f2;
    box-shadow: 0 2px 8px rgba(74,144,226,0.3);
}

/* Prévia do cabeçalho com logo */
.preview-header-container {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 10px;
    background: white;
    border: 1px dashed #ccc;
    margin-bottom: 10px;
}

.preview-logo {
    width: 50px;
    height: 50px;
    object-fit: contain;
}

.preview-header {
    flex: 1;
    text-align: center;
    font-size: 16px;
    font-weight: bold;
    color: #333;
}


/* Contadores de documentação - cores */
.doc-tab-count.qda-vencido {
    color: #e81123 !important;
    font-weight: bold;
}

.doc-tab-count.qda-renovar {
    color: #ff9500 !important;
    font-weight: bold;
}

/* Status select cores */
#doc_pgr_status.status-ok,
#doc_pcmso_status.status-ok {
    color: #32cd32 !important;
    font-weight: bold;
}

#doc_pgr_status.status-renovar,
#doc_pcmso_status.status-renovar {
    color: #ff9500 !important;
    font-weight: bold;
}

#doc_pgr_status.status-vencido,
#doc_pcmso_status.status-vencido {
    color: #e81123 !important;
    font-weight: bold;
}

/* Grid item cores */
.doc-empresa-item.status-vencido {
    color: #e81123 !important;
}

.doc-empresa-item.status-renovar {
    color: #ff9500 !important;
}


/* Remover fundo cinza dos campos de status na documentação */
#doc_pgr_status,
#doc_pcmso_status,
#doc_pgr_vencimento,
#doc_pcmso_vencimento,
#doc_pgr_dias_corridos,
#doc_pcmso_dias_corridos,
#doc_pgr_dias_vencer,
#doc_pcmso_dias_vencer {
    background: #fff !important;
    color: #000 !important;
}

#doc_pgr_status:disabled,
#doc_pcmso_status:disabled,
#doc_pgr_vencimento:disabled,
#doc_pcmso_vencimento:disabled,
#doc_pgr_dias_corridos:disabled,
#doc_pcmso_dias_corridos:disabled,
#doc_pgr_dias_vencer:disabled,
#doc_pcmso_dias_vencer:disabled,
#doc_pgr_vencimento[readonly],
#doc_pcmso_vencimento[readonly],
#doc_pgr_dias_corridos[readonly],
#doc_pcmso_dias_corridos[readonly],
#doc_pgr_dias_vencer[readonly],
#doc_pcmso_dias_vencer[readonly] {
    background: #fff !important;
    color: #000 !important;
    opacity: 1 !important;
}

/* Manter cores do status */
#doc_pgr_status.status-ok,
#doc_pcmso_status.status-ok {
    background: #fff !important;
    color: #32cd32 !important;
}

#doc_pgr_status.status-renovar,
#doc_pcmso_status.status-renovar {
    background: #fff !important;
    color: #ff9500 !important;
}

#doc_pgr_status.status-vencido,
#doc_pcmso_status.status-vencido {
    background: #fff !important;
    color: #e81123 !important;
}


/* Modal Controle de Presença */
.modal-controle-presenca {
    max-width: 98%;
    width: 98%;
    max-height: 95vh;
    margin: 1% auto;
}

.presenca-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px;
    background: #f5f5f5;
    border-bottom: 1px solid #ddd;
    gap: 15px;
    flex-wrap: wrap;
}

/* Filtros de pesquisa na presença */
.presenca-filtros {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}

.presenca-filtro-input {
    height: 28px;
    padding: 4px 8px;
    border: 1px solid #7f9db9;
    border-radius: 4px;
    font-size: 12px;
    width: 140px;
}

.presenca-filtro-input:focus {
    outline: none;
    border-color: #4a90e2;
    box-shadow: 0 0 3px rgba(74, 144, 226, 0.3);
}

.presenca-legenda {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
}

.legenda-item {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
}

.legenda-cor {
    display: inline-block;
    width: 22px;
    height: 18px;
    text-align: center;
    font-weight: bold;
    font-size: 10px;
    line-height: 18px;
    border: 1px solid #999;
    border-radius: 3px;
}

.presenca-table-container {
    overflow: auto;
    max-height: calc(95vh - 180px);
    will-change: scroll-position;
    contain: layout style paint;
}

.tabela-presenca {
    border-collapse: collapse;
    font-size: 11px;
    width: 100%;
    table-layout: fixed;
}

.tabela-presenca th,
.tabela-presenca td {
    border: 1px solid #ccc;
    padding: 4px;
    text-align: center;
    white-space: nowrap;
}

.tabela-presenca th {
    background: #e0e0e0;
    font-weight: bold;
    position: sticky;
    top: 0;
    z-index: 10;
}

.tabela-presenca th.col-empresa {
    width: 90px;
    min-width: 90px;
    max-width: 90px;
    text-align: left;
    position: sticky;
    left: 0;
    top: 0;
    background: #e0e0e0;
    z-index: 15;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    box-sizing: border-box;
    padding: 4px 6px;
}

.tabela-presenca td.col-empresa {
    width: 90px;
    min-width: 90px;
    max-width: 90px;
    text-align: left;
    position: sticky;
    left: 0;
    background: #ffffff;
    z-index: 5;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    box-sizing: border-box;
    padding: 4px 6px;
}

.tabela-presenca th.col-nome {
    width: 210px;
    min-width: 210px;
    max-width: 210px;
    text-align: left;
    position: sticky;
    left: 90px;
    top: 0;
    background: #e0e0e0;
    z-index: 15;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    box-sizing: border-box;
    padding: 4px 6px;
}

.tabela-presenca td.col-nome {
    width: 210px;
    min-width: 210px;
    max-width: 210px;
    text-align: left;
    position: sticky;
    left: 90px;
    background: #ffffff;
    z-index: 5;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    box-sizing: border-box;
    padding: 4px 6px;
}

.tabela-presenca th.col-funcao {
    width: 150px;
    min-width: 150px;
    max-width: 150px;
    text-align: left;
    position: sticky;
    left: 300px;
    top: 0;
    background: #e0e0e0;
    z-index: 15;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    box-sizing: border-box;
    padding: 4px 6px;
}

.tabela-presenca td.col-funcao {
    width: 150px;
    min-width: 150px;
    max-width: 150px;
    text-align: left;
    position: sticky;
    left: 300px;
    background: #ffffff;
    z-index: 5;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    box-sizing: border-box;
    padding: 4px 6px;
    vertical-align: middle;
}

.tabela-presenca tr:hover td.col-empresa,
.tabela-presenca tr:hover td.col-nome,
.tabela-presenca tr:hover td.col-funcao {
    background-color: #f0f0f0;
}

.tabela-presenca tr.presenca-linha-ativa td.col-empresa,
.tabela-presenca tr.presenca-linha-ativa td.col-nome,
.tabela-presenca tr.presenca-linha-ativa td.col-funcao {
    background-color: #fff9c4 !important;
}

.tabela-presenca tr.funcionario-inativado td.col-empresa,
.tabela-presenca tr.funcionario-inativado td.col-nome,
.tabela-presenca tr.funcionario-inativado td.col-funcao {
    background-color: #fff3cd !important;
}

.tabela-presenca th.col-dia {
    min-width: 28px;
    max-width: 28px;
}

.tabela-presenca td.col-dia {
    min-width: 28px;
    max-width: 28px;
    padding: 2px;
}

/* Dias de folga (fim de semana e feriados) - azul claro */
.tabela-presenca th.dia-folga {
    background: #b3e5fc !important;
    color: #01579b;
}

.tabela-presenca td.dia-folga {
    background: #e1f5fe !important;
}

.presenca-input.dia-folga-input {
    background: #b3e5fc !important;
    border-color: #4fc3f7;
}

/* Coluna de folga nas linhas de totais e funções */
.coluna-folga {
    background: #b3e5fc !important;
    color: #01579b !important;
}

.tabela-presenca th.fim-semana {
    background: #b3e5fc !important;
    color: #01579b;
}

.tabela-presenca td.fim-semana {
    background: #e1f5fe !important;
}

.tabela-presenca th.col-total {
    min-width: 35px;
    background: #0070C0;
    color: #000000;
    font-weight: bold;
    font-size: 12px;
}

.tabela-presenca td.col-total {
    font-weight: bold;
    background: #0070C0;
    color: #000000;
    text-align: center;
    font-size: 13px;
    min-width: 40px;
}

.tabela-presenca td.col-total-f {
    font-weight: bold;
    background: #C00000;
    color: #000000;
    text-align: center;
    font-size: 13px;
    min-width: 40px;
}

.presenca-input {
    width: 24px;
    height: 20px;
    text-align: center;
    border: 1px solid #ccc;
    border-radius: 3px;
    font-size: 10px;
    font-weight: bold;
    text-transform: uppercase;
    padding: 0;
}

.presenca-input:focus {
    outline: 2px solid #005dac;
    border-color: #005dac;
}

.presenca-input.status-p { background: #90EE90; }
.presenca-input.status-f { background: #FFB6C1; }
.presenca-input.status-a { background: #005dac; }
.presenca-input.status-fe { background: #DDA0DD; }
.presenca-input.status-fo { background: #FFD700; }
.presenca-input.status-n { background: #FFE4B5; } /* N = Novo (laranja bem claro - moccasin) */

/* Funcionário inativado - linha com fundo cinza claro mas TEXTO VISÍVEL */
.tabela-presenca tr.funcionario-inativado {
    background: #fff3cd !important;
}

.tabela-presenca tr.funcionario-inativado td {
    background: #fff3cd !important;
    color: #856404 !important;
    font-weight: normal;
}

.tabela-presenca tr.funcionario-inativado .col-nome {
    font-style: italic;
}

.tabela-presenca tr.funcionario-inativado .presenca-input {
    background: #ffeaa7 !important;
    cursor: not-allowed;
    color: #666 !important;
    border-color: #ffc107;
}

.tabela-presenca tr.funcionario-inativado .presenca-input:disabled {
    color: #666 !important;
    opacity: 1;
}

/* Manter as cores dos status mesmo quando inativado */
.tabela-presenca tr.funcionario-inativado .presenca-input.status-p { 
    background: #90EE90 !important; 
    opacity: 0.7;
}
.tabela-presenca tr.funcionario-inativado .presenca-input.status-f { 
    background: #FFB6C1 !important; 
    opacity: 0.7;
}
.tabela-presenca tr.funcionario-inativado .presenca-input.status-a { 
    background: #005dac !important; 
    opacity: 0.7;
}
.tabela-presenca tr.funcionario-inativado .presenca-input.status-fe { 
    background: #DDA0DD !important; 
    opacity: 0.7;
}
.tabela-presenca tr.funcionario-inativado .presenca-input.status-fo { 
    background: #FFD700 !important; 
    opacity: 0.7;
}

/* Célula com comentário - borda laranja */
.presenca-input.tem-comentario {
    border: 2px solid #FF8C00 !important;
    box-shadow: 0 0 3px #FF8C00;
}

/* Célula selecionada */
.presenca-input.presenca-selecionado {
    outline: 2px solid #005dac !important;
    outline-offset: -1px;
    box-shadow: 0 0 5px rgba(25, 118, 210, 0.5);
}

/* Funcionário com mudança de função - linha destacada */
.tabela-presenca tr.funcionario-mudanca {
    background: #fff3e0 !important;
    border-left: 4px solid #ff9800;
}

.tabela-presenca tr.funcionario-mudanca:hover {
    background: #ffe0b2 !important;
}

.tabela-presenca tr.funcionario-mudanca .col-nome {
    color: #ff9800 !important;
    font-weight: bold;
}

.tabela-presenca tr.funcionario-mudanca .col-funcao {
    color: #ff9800 !important;
    font-weight: bold;
}

/* Células fora do período (dias desabilitados para mudança de função) */
.presenca-input.dia-fora-periodo {
    background: #b3e5fc !important; /* Azul claro igual aos fins de semana */
    cursor: not-allowed;
    opacity: 1;
    border-color: #81d4fa;
}

.presenca-input.dia-fora-periodo:disabled {
    color: transparent !important;
    background: #b3e5fc !important;
}

/* Linha de Total do Dia */
.linha-total-dia {
    background: #0070C0 !important;
    font-weight: bold;
    height: 30px !important;
}

.linha-total-dia td {
    border-top: 2px solid #0070C0 !important;
    background: #0070C0 !important;
    color: #FFFFFF !important;
    font-size: 14px !important;
    font-weight: bold !important;
    text-align: center !important;
    vertical-align: middle !important;
}

.total-dia-label {
    text-align: center !important;
    padding-right: 10px !important;
    background: #0070C0 !important;
    color: #FFFFFF !important;
    font-size: 14px !important;
}

.total-dia {
    background: #0070C0 !important;
    color: #FFFFFF !important;
    font-size: 14px !important;
    font-weight: bold !important;
    text-align: center !important;
    padding: 8px 4px !important;
    height: 30px !important;
    line-height: 14px !important;
    display: table-cell !important;
    vertical-align: middle !important;
}

.total-geral {
    background: #0070C0 !important;
    color: white !important;
    font-size: 14px !important;
    font-weight: bold !important;
    text-align: center !important;
    min-width: 40px !important;
    padding: 8px !important;
}

/* Linha de Faltas do Dia */
.linha-faltas-dia {
    background: #C00000 !important;
    font-weight: bold;
    height: 30px !important;
}

.linha-faltas-dia td {
    background: #C00000 !important;
    color: #FFFFFF !important;
    font-size: 14px !important;
    font-weight: bold !important;
    text-align: center !important;
    vertical-align: middle !important;
}

.faltas-dia-label {
    text-align: center !important;
    padding-right: 10px !important;
    background: #C00000 !important;
    color: #FFFFFF !important;
    font-size: 14px !important;
}

.faltas-dia {
    background: #C00000 !important;
    color: #FFFFFF !important;
    font-size: 14px !important;
    font-weight: bold !important;
    text-align: center !important;
}

.total-geral-f {
    background: #C00000 !important;
    color: white !important;
    font-size: 14px !important;
    font-weight: bold !important;
    text-align: center !important;
    min-width: 40px !important;
    padding: 8px !important;
}

/* Separador */
.separador-funcao td {
    height: 20px;
    background: #f5f5f5 !important;
    border: none !important;
}

/* Linha TOTAL FINAL (fundo preto, fonte branca) */
.linha-total-final {
    background: #000000 !important;
    font-weight: bold;
    border-top: 3px solid #000 !important;
}

.linha-total-final td {
    background: #000000 !important;
    color: #ffffff !important;
    font-weight: bold;
    text-align: center;
    padding: 8px !important;
}

.total-final-label {
    text-align: center !important;
    font-size: 14px !important;
}

.total-final-dia {
    font-size: 13px !important;
}

/* ============ LINHAS POR EMPRESA (ABAIXO DO TOTAL) ============ */
.linha-empresa {
    background: #005dac !important;
    font-weight: bold;
    border-top: 2px solid #0d47a1 !important;
}

.linha-empresa td {
    background: #005dac !important;
    color: #ffffff !important;
    font-weight: bold;
    text-align: center;
    padding: 8px !important;
    font-size: 13px !important;
}

/* Empresa INATIVA - fundo amarelo igual funcionários inativos */
.linha-empresa-inativa {
    background: #fff3cd !important;
}

.linha-empresa-inativa td {
    background: #fff3cd !important;
    color: #856404 !important;
}

.empresa-label {
    text-align: center !important;
    font-size: 14px !important;
    letter-spacing: 0.5px;
}

.empresa-dia {
    font-size: 13px !important;
}

/* Totais por empresa */
.empresa-total-p {
    background: #c8e6c9 !important;
    font-weight: bold;
}

.empresa-total-f {
    background: #ffcdd2 !important;
    font-weight: bold;
}

/* Totais por empresa INATIVA */
.linha-empresa-inativa .empresa-total-p {
    background: #d4edda !important;
    color: #155724 !important;
}

.linha-empresa-inativa .empresa-total-f {
    background: #f8d7da !important;
    color: #721c24 !important;
}

/* Coluna de folga nas linhas de empresa */
.empresa-dia.coluna-folga {
    background: #0d47a1 !important;
}

/* Coluna de folga nas linhas de empresa INATIVA */
.linha-empresa-inativa .empresa-dia.coluna-folga {
    background: #ffeaa7 !important;
}

/* Cabeçalho da seção por função */
.header-funcao {
    background: #e0e0e0 !important;
    font-weight: bold;
}

.header-funcao td {
    border-top: 2px solid #9e9e9e !important;
    background: #e0e0e0 !important;
}

.funcao-header {
    text-align: center !important;
}

/* Linhas por função */
.linha-funcao {
    background: #fafafa;
}

.linha-funcao:nth-child(even) {
    background: #f5f5f5;
}

/* Coluna de folga nas linhas de função */
.funcao-dia.coluna-folga {
    background: #b3e5fc !important;
}

.funcao-nome {
    text-align: left !important;
    padding-left: 10px !important;
    font-weight: bold;
}

.funcao-dia {
    color: #005dac;
}

.funcao-total-p {
    background: #c8e6c9 !important;
    font-weight: bold;
}

.funcao-total-f {
    background: #ffcdd2 !important;
    font-weight: bold;
}

/* Linha GERAL */
.linha-geral {
    background: #424242 !important;
    color: white !important;
    font-weight: bold;
}

.linha-geral td {
    border-top: 2px solid #212121 !important;
}

.geral-label {
    text-align: right !important;
    padding-right: 10px !important;
}

.geral-total {
    background: #2e7d32 !important;
    color: white !important;
    font-size: 12px;
}

.geral-total-f {
    background: #c62828 !important;
    color: white !important;
    font-size: 12px;
}

.presenca-info-bottom {
    padding: 8px;
    background: #fff3cd;
    border-top: 1px solid #ffc107;
    font-size: 11px;
    text-align: center;
}

.presenca-info-bottom p {
    margin: 0;
}

/* Modal de Comentário na Célula */
.modal-comentario-celula {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10000;
}

.modal-comentario-content {
    background: white;
    border-radius: 8px;
    width: 400px;
    max-width: 90%;
    box-shadow: 0 4px 20px rgba(0,0,0,0.3);
}

.modal-comentario-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 15px;
    background: #ff9800;
    color: white;
    border-radius: 8px 8px 0 0;
}

.modal-comentario-header h4 {
    margin: 0;
    font-size: 14px;
}

.modal-comentario-close {
    font-size: 20px;
    cursor: pointer;
    line-height: 1;
}

.modal-comentario-close:hover {
    color: #333;
}

.modal-comentario-body {
    padding: 15px;
}

.modal-comentario-body textarea {
    width: 100%;
    min-height: 100px;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
    font-size: 13px;
    resize: vertical;
    font-family: inherit;
}

.modal-comentario-body textarea:focus {
    border-color: #ff9800;
    outline: none;
    box-shadow: 0 0 0 2px rgba(255,152,0,0.2);
}

.modal-comentario-footer {
    display: flex;
    justify-content: space-between;
    padding: 10px 15px;
    background: #f5f5f5;
    border-radius: 0 0 8px 8px;
}

/* Célula com comentário - borda laranja */
.presenca-input.tem-comentario {
    border: 2px solid #ff9800 !important;
    box-shadow: 0 0 3px rgba(255,152,0,0.5);
    position: relative;
}

.presenca-input.tem-comentario:hover {
    border-color: #f57c00 !important;
    cursor: help;
}

/* Tooltip customizado para comentários - JavaScript */
.tooltip-comentario-custom {
    position: fixed;
    background: #ff9800;
    color: #000;
    padding: 16px 20px;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    white-space: pre-wrap;
    max-width: 500px;
    min-width: 200px;
    z-index: 999999;
    opacity: 0;
    transition: opacity 0.2s ease;
    box-shadow: 0 6px 20px rgba(0,0,0,0.4);
    border: 3px solid #f57c00;
    text-align: center;
    line-height: 1.5;
    pointer-events: none;
}

.tooltip-comentario-custom.show {
    opacity: 1;
}

/* Tooltip customizado para comentários - CSS (fallback) */
.presenca-input.tem-comentario::after {
    content: attr(data-comentario);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: #1a1a1a;
    color: #ffffff;
    padding: 16px 20px;
    border-radius: 10px;
    font-size: 18px;
    font-weight: 600;
    white-space: pre-wrap;
    max-width: 500px;
    min-width: 200px;
    width: max-content;
    z-index: 99999;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    box-shadow: 0 6px 20px rgba(0,0,0,0.6);
    margin-bottom: 10px;
    text-align: center;
    line-height: 1.5;
    border: 2px solid #ff9800;
}

.presenca-input.tem-comentario::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 10px solid transparent;
    border-top-color: #1a1a1a;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    margin-bottom: 2px;
    z-index: 99999;
}

.presenca-input.tem-comentario:hover::after,
.presenca-input.tem-comentario:hover::before {
    opacity: 1;
}


/* Linha ativa/selecionada na presença */
.presenca-linha-ativa {
    background: linear-gradient(90deg, rgba(33, 150, 243, 0.15) 0%, rgba(33, 150, 243, 0.08) 100%) !important;
}

.presenca-linha-ativa td {
    background: inherit !important;
}

.presenca-linha-ativa td.col-empresa,
.presenca-linha-ativa td.col-nome,
.presenca-linha-ativa td.col-funcao {
    background: rgba(33, 150, 243, 0.2) !important;
    font-weight: bold;
}

.presenca-linha-ativa td.col-total {
    background: rgba(33, 150, 243, 0.25) !important;
}

/* Linha de função ativa/selecionada */
.funcao-linha-ativa {
    background: linear-gradient(90deg, rgba(76, 175, 80, 0.2) 0%, rgba(76, 175, 80, 0.1) 100%) !important;
}

.funcao-linha-ativa td {
    background: inherit !important;
    font-weight: bold !important;
}

.funcao-linha-ativa td.funcao-nome {
    background: rgba(76, 175, 80, 0.3) !important;
    border-left: 4px solid #4CAF50 !important;
}

.funcao-linha-ativa td.col-total {
    background: rgba(76, 175, 80, 0.25) !important;
}

/* Tooltip para comentário */
.presenca-input[data-comentario]:hover::after {
    content: attr(data-comentario);
    position: absolute;
    background: #333;
    color: white;
    padding: 5px 10px;
    border-radius: 4px;
    font-size: 11px;
    white-space: pre-wrap;
    max-width: 200px;
    z-index: 1000;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 5px;
}

.btn-sm {
    padding: 5px 12px;
    font-size: 12px;
    border-radius: 6px;
    background: #f0f5ff;
    border: 1px solid #cce8f4;
    color: #005dac;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-sm:hover {
    background: #dce8ff;
    border-color: #4a90e2;
}

#presencaQtdFunc {
    font-weight: bold;
    color: #005dac;
}



/* ===== RESTRIÇÕES PARA USUÁRIO COMUM ===== */
body.user-comum .toggle-situacao,
body.user-comum .situacao-toggle,
body.user-comum .switch,
body.user-comum .col-checkbox,
body.user-comum .row-checkbox,
body.user-comum .col-acoes,
body.user-comum .edit-icon,
body.user-comum .delete-icon,
body.user-comum .action-icon,
body.user-comum tr .acoes,
body.user-comum tr .actions,
body.user-comum tr input[type="checkbox"],
body.user-comum .data-row .situacao input,
body.user-comum .data-row .situacao .switch,
body.user-comum .data-row .acoes span,
body.user-comum .data-row .acoes button {
    display: none !important;
}

body.user-comum tr[data-id] {
    cursor: default !important;
}


/* Esconder Excel/PDF e toggle Ativo para usuário comum */
body.user-comum input[type="radio"][value="excel"],
body.user-comum input[type="radio"][value="pdf"],
body.user-comum input[type="radio"] + label:has(+ input[value="excel"]),
body.user-comum .export-option,
body.user-comum .radio-export {
    display: none !important;
}

/* Usuário COMUM: bloquear IMPORTAR, EXPORTAR, EXCLUIR, CONSULTA CPF/CNPJ, SOLICITAÇÕES
   (regras com !important sobrescrevem os estilos inline aplicados aos botões .modulo2-only) */
body.user-comum button[onclick*="exportar"],
body.user-comum .btn-exportar,
body.user-comum button[onclick*="abrirImportar"],
body.user-comum button[onclick*="Importar"],
body.user-intermediario button[onclick*="Importar"],
body.user-comum button[onclick*="abrirSolicitacoes"],
body.user-intermediario button[onclick*="abrirSolicitacoes"],
body.user-comum #btnConsultaCPF,
body.user-intermediario #btnConsultaCPF,
body.user-comum #btnConsultaGlobalFornecedor,
body.user-intermediario #btnConsultaGlobalFornecedor,
body.user-comum #btnExcluir,
body.user-intermediario #btnExcluir,
body.user-comum #btnExcluirModal,
body.user-intermediario #btnExcluirModal,
body.user-comum #btnExcluirMultiplos,
body.user-intermediario #btnExcluirMultiplos,
body.user-comum #btnSolicitarExclusao,
body.user-intermediario #btnSolicitarExclusao,
body.user-comum #btnExcluirMassaFornecedores,
body.user-intermediario #btnExcluirMassaFornecedores,
body.user-comum #btnExcluirMassa,
body.user-intermediario #btnExcluirMassa,
body.user-comum .btn-trash-forn,
body.user-intermediario .btn-trash-forn,
body.user-comum button[onclick*="excluirFornecedor"],
body.user-intermediario button[onclick*="excluirFornecedor"],
body.user-comum button[onclick*="excluir"],
body.user-intermediario button[onclick*="excluir"],
body.user-comum .modulo2-only {
    display: none !important;
}

/* Usuário COMUM e INTERMEDIÁRIO: na documentação do fornecedor e na grid de fornecedores,
   Upload (anexar), Adicionar, Alterar e Excluir ficam 100% OCULTOS por CSS !important.
   Também oculta 100% as caixinhas de seleção ([ ]) ao lado do botão Ação na tabela de fornecedores. */
body.user-comum #btnUploadPGR,
body.user-intermediario #btnUploadPGR,
body.user-comum #btnSalvarPGR,
body.user-intermediario #btnSalvarPGR,
body.user-comum #btnUploadPCMSO,
body.user-intermediario #btnUploadPCMSO,
body.user-comum #btnSalvarPCMSO,
body.user-intermediario #btnSalvarPCMSO,
body.user-comum #btnDocUpload,
body.user-intermediario #btnDocUpload,
body.user-comum #docPgrFileInput,
body.user-intermediario #docPgrFileInput,
body.user-comum #docPcmsoFileInput,
body.user-intermediario #docPcmsoFileInput,
body.user-comum button[onclick*="excluirPGR"],
body.user-intermediario button[onclick*="excluirPGR"],
body.user-comum button[onclick*="excluirPCMSO"],
body.user-intermediario button[onclick*="excluirPCMSO"],
body.user-comum #btnAdicionarDocFornecedor,
body.user-intermediario #btnAdicionarDocFornecedor,
body.user-comum .btn-anexo-upload,
body.user-intermediario .btn-anexo-upload,
body.user-comum .btn-anexo-excluir,
body.user-intermediario .btn-anexo-excluir,
body.user-comum .chk-fornecedor-item,
body.user-intermediario .chk-fornecedor-item,
body.user-comum input[type="checkbox"].chk-fornecedor-item,
body.user-intermediario input[type="checkbox"].chk-fornecedor-item,
body.user-comum .btn-trash-forn,
body.user-intermediario .btn-trash-forn,
body.user-comum button[onclick*="excluirFornecedor"],
body.user-intermediario button[onclick*="excluirFornecedor"] {
    display: none !important;
}

/* COMUM SOMENTE: esconde também o botão Baixar (Intermediário pode baixar) */
body.user-comum button[onclick*="baixarPGR"],
body.user-comum button[onclick*="baixarPCMSO"],
body.user-comum button[onclick*="baixar"],
body.user-comum button[onclick*="download"] {
    display: none !important;
}

/* ===== RESTRIÇÕES DEFINITIVAS (SEM FLASH) PARA COMUM E INTERMEDIÁRIO =====
   Botões exclusivos do MASTER — Certificado, Lista de Presença, Configuração,
   Assinatura, Imprimir, Imagem e Anexar/Excluir documento — ficam ocultos por
   CSS com !important. Aplicam-se INSTANTANEAMENTE a qualquer elemento renderizado,
   inclusive em re-renderizações (Atualizar, recarregar, abrir modal): NUNCA piscam.
   INTERMEDIÁRIO: só VER e BAIXAR o anexo (mantém #btnDocDownload e #btnDocForceDownload). */
body.user-comum button[onclick*="abrirCert"],
body.user-intermediario button[onclick*="abrirCert"],
body.user-comum button[onclick*="abrirLPT"],
body.user-intermediario button[onclick*="abrirLPT"],
body.user-comum button[onclick*="abrirCfg"],
body.user-intermediario button[onclick*="abrirCfg"],
body.user-comum button[onclick*="abrirConfig"],
body.user-intermediario button[onclick*="abrirConfig"],
body.user-comum .btn-config-anexo,
body.user-intermediario .btn-config-anexo,
body.user-comum .btn-cfg-mobile-hide,
body.user-intermediario .btn-cfg-mobile-hide,
body.user-comum button[onclick*="abrirAssinatura"],
body.user-intermediario button[onclick*="abrirAssinatura"],
body.user-comum button[onclick*="imprimir"],
body.user-intermediario button[onclick*="imprimir"],
body.user-comum button[onclick*="print"],
body.user-intermediario button[onclick*="print"],
body.user-comum #btnImagem,
body.user-intermediario #btnImagem,
body.user-comum button[onclick*="selecionarFoto"],
body.user-intermediario button[onclick*="selecionarFoto"],
body.user-comum button[onclick*="removerFoto"],
body.user-intermediario button[onclick*="removerFoto"],
body.user-comum #btnDocUpload,
body.user-intermediario #btnDocUpload,
body.user-comum #btnDocRemove,
body.user-intermediario #btnDocRemove,
body.user-comum button[onclick*="removerDocumentoAtual"],
body.user-intermediario button[onclick*="removerDocumentoAtual"] {
    display: none !important;
}

/* COMUM: na área de anexo do documento só pode VISUALIZAR — Baixar fica oculto.
   (INTERMEDIÁRIO pode VER e BAIXAR o anexo, conforme regra de permissão.) */
body.user-comum #btnDocForceDownload,
body.user-comum button[onclick*="forcarDownload"],
body.user-comum button[onclick*="baixarDocumentoAtual"] {
    display: none !important;
}

/* ===== ANTI-FLASH ABSOLUTO (fail-closed): botões exclusivos do MASTER =====
   Ficam ocultos SEMPRE que o body NÃO tiver a classe user-master.
   Como a classe é aplicada antes do body ser revelado, eles NUNCA chegam a
   aparecer para COMUM/INTERMEDIÁRIO — nem por milissegundo, nem em re-render.
   (O Baixar do anexo NÃO entra aqui: INTERMEDIÁRIO pode baixar.) */
body:not(.user-master) button[onclick*="abrirCert"],
body:not(.user-master) button[onclick*="abrirLPT"],
body:not(.user-master) button[onclick*="abrirCfg"],
body:not(.user-master) button[onclick*="abrirConfig"],
body:not(.user-master) .btn-config-anexo,
body:not(.user-master) .btn-cfg-mobile-hide,
body:not(.user-master) button[onclick*="abrirAssinatura"],
body:not(.user-master) button[onclick*="imprimir"],
body:not(.user-master) button[onclick*="print"],
body:not(.user-master) #btnImagem,
body:not(.user-master) button[onclick*="selecionarFoto"],
body:not(.user-master) button[onclick*="removerFoto"],
body:not(.user-master) #btnDocUpload,
body:not(.user-master) #btnDocRemove,
body:not(.user-master) button[onclick*="removerDocumentoAtual"],
body:not(.user-master) .btn-novo,
body:not(.user-master) .btn-alterar,
body:not(.user-master) .btn-cadastrar,
body:not(.user-master) .btn-salvar,
body:not(.user-master) .btn-delete-row,
body:not(.user-master) .btn-edit-row,
body:not(.user-master) .chk-fornecedor-item,
body:not(.user-master) input[type="checkbox"].chk-fornecedor-item,
body:not(.user-master) .btn-trash-forn,
body:not(.user-master) button[onclick*="excluirFornecedor"],
body:not(.user-master) #btnExcluirMassaFornecedores,
body:not(.user-master) #btnExcluirMassa,
body:not(.user-master) #btnAdicionarDocFornecedor,
body:not(.user-master) .btn-anexo-upload,
body:not(.user-master) .btn-anexo-excluir,
body:not(.user-master) #btnUploadPGR,
body:not(.user-master) #btnSalvarPGR,
body:not(.user-master) #btnUploadPCMSO,
body:not(.user-master) #btnSalvarPCMSO,
body:not(.user-master) button[onclick*="excluirPGR"],
body:not(.user-master) button[onclick*="excluirPCMSO"] {
    display: none !important;
}


/* Campos de data com texto */
.date-input-text {
    width: 100px;
    padding: 6px 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 13px;
    text-align: center;
}

.date-input-text:focus {
    border-color: #005dac;
    outline: none;
}

/* Campos de data com calendário */
.date-input-calendar {
    width: 130px;
    padding: 6px 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 13px;
    cursor: pointer;
}

.date-input-calendar:focus {
    border-color: #005dac;
    outline: none;
    box-shadow: 0 0 3px rgba(74, 144, 217, 0.3);
}

.date-input-calendar::-webkit-calendar-picker-indicator {
    cursor: pointer;
    padding: 2px;
}


/* ============================================
   RESPONSIVIDADE MOBILE - CELULAR
   ============================================ */


/* ============================================
   CARDS MOBILE - Desabilitado por enquanto
   ============================================ */

.mobile-cards-container {
    display: none !important;
}
    
/* Estilos de cards mobile removidos - usando tabela com scroll */


/* ============ BADGE SITUAÇÃO FORNECEDOR NA DOCUMENTAÇÃO ============ */
.fornecedor-situacao-badge {
    display: inline-block;
    padding: 8px 15px;
    border-radius: 4px;
    font-weight: 500;
    text-align: center;
    font-size: 12px;
    cursor: default;
}

.fornecedor-situacao-badge.ativo {
    background-color: #4CAF50;
    color: white;
}

.fornecedor-situacao-badge.inativo {
    background-color: #f44336;
    color: white;
}

.fornecedor-situacao-badge.indefinido {
    background-color: #9e9e9e;
    color: white;
}


/* ============ BOTÃO EXCLUIR DOCUMENTAÇÃO ============ */
.btn-doc-excluir-small {
    background-color: transparent;
    color: #888;
    border: none;
    padding: 6px 8px;
    cursor: pointer;
    font-size: 16px;
    transition: color 0.2s;
}

.btn-doc-excluir-small:hover {
    color: #f44336;
}

/* Modal Histórico de Presença */
.modal-historico-presenca {
    width: 98%;
    max-width: none;
    height: 90vh;
}

.historico-abas {
    display: flex;
    gap: 5px;
    padding: 10px;
    background: #f5f5f5;
    border-bottom: 2px solid #ddd;
    overflow-x: auto;
}

.historico-aba {
    padding: 10px 20px;
    background: #f0f5ff;
    border: 1px solid #cce8f4;
    border-radius: 8px 8px 0 0;
    cursor: pointer;
    font-weight: 500;
    color: #005dac;
    transition: all 0.2s;
}

.historico-aba:hover {
    background: #dce8ff;
    border-color: #4a90e2;
}

.historico-aba.active {
    background: #4a90e2;
    color: white;
    border-color: #357abd;
}

.historico-conteudo {
    padding: 0;
    overflow: auto;
    max-height: calc(90vh - 150px);
    position: relative;
}

.historico-conteudo .tabela-presenca {
    width: 100%;
    margin: 0;
}

.historico-conteudo .tabela-presenca thead {
    position: sticky;
    top: 0;
    z-index: 10;
    background: white;
}

.historico-conteudo .tabela-presenca thead th {
    background: #2196f3 !important;
    color: white !important;
    border-bottom: 2px solid #005dac;
}

.historico-conteudo .total-geral {
    background: #c8e6c9 !important;
    color: #1b5e20 !important;
    font-weight: bold !important;
    font-size: 14px !important;
}

.historico-conteudo .total-geral-f {
    background: #ffcdd2 !important;
    color: #b71c1c !important;
    font-weight: bold !important;
    font-size: 14px !important;
}

.historico-conteudo .observacoes-historico {
    margin-top: 20px;
    padding: 15px;
    background: #fff3cd;
    border-left: 4px solid #ffc107;
    font-size: 16px !important;
    line-height: 1.8;
}

.historico-conteudo .observacoes-historico div {
    margin: 8px 0;
    font-size: 16px !important;
}


/* Área de Histórico - Fundo Branco */
.historico-conteudo {
    background: #ffffff !important;
    min-height: 400px;
}

.historico-abas {
    background: #ffffff !important;
}

/* Borda para células com comentário - Fina */
.tem-comentario {
    border: 1px solid #000000 !important;
    box-shadow: none !important;
}

.presenca-input.tem-comentario {
    border: 1px solid #000000 !important;
    box-shadow: none !important;
}

/* Modal de Backup - Fontes Maiores e Uniformes */
#modalBackup .modal-content,
.modal-backup .modal-content {
    font-size: 16px !important;
}

#modalBackup h3,
.modal-backup h3 {
    font-size: 18px !important;
    font-weight: bold !important;
    margin-bottom: 10px !important;
}

#modalBackup h4,
.modal-backup h4 {
    font-size: 16px !important;
    font-weight: bold !important;
}

#modalBackup p,
.modal-backup p {
    font-size: 15px !important;
    line-height: 1.5 !important;
}

#modalBackup button,
.modal-backup button {
    font-size: 16px !important;
    padding: 8px 16px !important;
    min-height: 36px !important;
}

#modalBackup label,
.modal-backup label {
    font-size: 15px !important;
}

#modalBackup input[type="file"],
.modal-backup input[type="file"] {
    font-size: 15px !important;
    padding: 8px !important;
}

#modalBackup select,
.modal-backup select {
    font-size: 15px !important;
    padding: 8px !important;
    min-height: 36px !important;
}

#modalBackup .backup-section,
.modal-backup .backup-section {
    margin-bottom: 20px !important;
    padding: 15px !important;
}

#modalBackup .warning-text,
.modal-backup .warning-text {
    font-size: 14px !important;
}

#modalBackup .info-text,
.modal-backup .info-text {
    font-size: 14px !important;
}

#modalBackup ul li,
.modal-backup ul li {
    font-size: 15px !important;
    line-height: 1.6 !important;
    margin-bottom: 5px !important;
}

/* Aumentar fonte dos itens de zerar cadastros no modal de backup */
#modalBackup .backup-section label,
.modal-backup .backup-section label {
    font-size: 17px !important;
    font-weight: 500 !important;
}

#modalBackup .backup-section input[type="checkbox"],
.modal-backup .backup-section input[type="checkbox"] {
    width: 18px !important;
    height: 18px !important;
    margin-right: 8px !important;
}

/* Contador de registros ao lado dos checkboxes */
#modalBackup .backup-section label span,
.modal-backup .backup-section label span {
    font-size: 16px !important;
}

/* Texto "registros" */
#modalBackup .backup-section .registro-count,
.modal-backup .backup-section .registro-count {
    font-size: 16px !important;
    color: #666 !important;
}

/* Título do Modal de Backup - MAIOR */
#modalBackup .modal-header h2,
#modalBackup .modal-header h3,
.modal-backup .modal-header h2,
.modal-backup .modal-header h3 {
    font-size: 20px !important;
    font-weight: bold !important;
}

/* Título "Backup e Manutenção" especificamente */
#modalBackup .modal-header,
.modal-backup .modal-header {
    font-size: 20px !important;
}

/* Aumentar fonte dos nomes das tabelas e contadores no modal de backup */
#modalBackup .backup-item,
#modalBackup .zerar-item,
.modal-backup .backup-item,
.modal-backup .zerar-item {
    font-size: 18px !important;
    font-weight: 600 !important;
}

/* Texto dos itens: Funcionários (SSMA), Fornecedores, etc */
#modalBackup .backup-section > div,
.modal-backup .backup-section > div {
    font-size: 18px !important;
}

/* Contador de registros: "117 registros", "11 registros", etc */
#modalBackup .backup-section span,
.modal-backup .backup-section span {
    font-size: 17px !important;
}

/* Texto "ZERAR TUDO" */
#modalBackup .zerar-tudo-text,
.modal-backup .zerar-tudo-text {
    font-size: 18px !important;
    font-weight: bold !important;
}

/* AUMENTAR FONTE DOS TEXTOS À ESQUERDA NO MODAL DE BACKUP */
#modalBackup .backup-section div:not(.btn):not(button),
.modal-backup .backup-section div:not(.btn):not(button) {
    font-size: 20px !important;
    font-weight: 600 !important;
}

/* Textos específicos: Funcionários (SSMA), Fornecedores, etc */
#modalBackup .backup-section > div > span:first-child,
.modal-backup .backup-section > div > span:first-child {
    font-size: 20px !important;
    font-weight: 600 !important;
}

/* Texto "Funcionários (SSMA)" completo */
#modalBackup .backup-section strong,
.modal-backup .backup-section strong {
    font-size: 20px !important;
}

/* Todos os textos dentro da seção de backup exceto botões */
#modalBackup .backup-section *:not(button):not(.btn),
.modal-backup .backup-section *:not(button):not(.btn) {
    font-size: 19px !important;
}

/* Forçar fonte maior em todos os elementos de texto */
#modalBackup div[style*="display: flex"] > *:first-child,
.modal-backup div[style*="display: flex"] > *:first-child {
    font-size: 20px !important;
    font-weight: 600 !important;
}

/* AUMENTAR FONTE DOS CONTADORES DE REGISTROS */
#modalBackup .backup-section small,
.modal-backup .backup-section small {
    font-size: 18px !important;
    font-weight: 500 !important;
}

/* Texto "117 registros", "11 registros", etc */
#modalBackup .backup-section > div > span:last-child,
.modal-backup .backup-section > div > span:last-child {
    font-size: 18px !important;
    font-weight: 500 !important;
}

/* Forçar todos os spans dentro da seção */
#modalBackup .backup-section span,
.modal-backup .backup-section span {
    font-size: 18px !important;
}

/* FORÇAR AUMENTO DOS CONTADORES DE REGISTROS - MAIS AGRESSIVO */
#modalBackup * {
    font-size: 18px !important;
}

#modalBackup button {
    font-size: 16px !important;
}

#modalBackup h2, #modalBackup h3 {
    font-size: 20px !important;
}

/* Garantir que TODOS os textos de contadores fiquem grandes */
.modal-backup * {
    font-size: 18px !important;
}

.modal-backup button {
    font-size: 16px !important;
}

.modal-backup h2, .modal-backup h3 {
    font-size: 20px !important;
}

/* AUMENTAR TAMANHO DO MODAL DE BACKUP */
#modalBackup .modal-content,
.modal-backup .modal-content {
    max-height: 85vh !important;
    height: auto !important;
    min-height: 600px !important;
}

#modalBackup .modal-body,
.modal-backup .modal-body {
    max-height: none !important;
    overflow-y: visible !important;
}

/* Remover scroll interno */
#modalBackup,
.modal-backup {
    overflow-y: auto !important;
}


/* Animação para indicador online */
@keyframes pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(1.2); }
}


/* ============================================
   AUTOCOMPLETE - Histórico de Pesquisa
   ============================================ */

.autocomplete-list {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: white;
    border: 1px solid #ccc;
    border-top: none;
    max-height: 150px;
    overflow-y: auto;
    z-index: 9999;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.autocomplete-item {
    padding: 6px 8px;
    cursor: pointer;
    font-size: 14px;
    font-weight: normal;
    color: #666;
    border-bottom: 1px solid #f0f0f0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.autocomplete-text {
    flex: 1;
    cursor: pointer;
}

.autocomplete-remove {
    background: transparent;
    color: #999;
    border: none;
    width: 16px;
    height: 16px;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 8px;
    flex-shrink: 0;
    font-weight: normal;
}

.autocomplete-remove:hover {
    color: #666;
}

.autocomplete-item:hover,
.autocomplete-item.selected {
    background: #f5f5f5;
}

.autocomplete-item:last-child {
    border-bottom: none;
}

/* Cabeçalho dinâmico (fora da tabela) */
.dynamic-table-header {
    display: flex;
    background: #f0f0f0;
    border: 1px solid #ffffff;
    border-bottom: 2px solid #d4d4d4;
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.dynamic-header-cell {
    padding: 6px 8px;
    text-align: left;
    font-weight: bold;
    font-size: 16px;
    height: 32px;
    border-right: 1px solid #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: #f0f0f0;
}

.dynamic-header-cell.col-expand {
    width: 20px;
    min-width: 20px;
    max-width: 20px;
}

.dynamic-header-cell.col-foto {
    width: 90px;
    min-width: 90px;
    max-width: 90px;
}

.dynamic-header-cell.col-nome {
    width: 230px;
    min-width: 230px;
    max-width: 230px;
}

.dynamic-header-cell.col-empresa {
    width: 90px;
    min-width: 90px;
    max-width: 90px;
    justify-content: center;
    text-align: center;
}

.dynamic-header-cell.col-funcao {
    width: 100px;
    min-width: 100px;
    max-width: 100px;
    justify-content: center;
    text-align: center;
}

.dynamic-header-cell.col-venc {
    width: 95px;
    min-width: 95px;
    max-width: 95px;
    text-align: center;
}

/* Tabela sem thead - células alinhadas com cabeçalho */
.desktop-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
    background: white;
}

.desktop-table tbody tr {
    display: flex;
}

.desktop-table td {
    border: 1px solid #ffffff;
    padding: 4px 6px;
    font-size: 12px;
    height: 80px;
    vertical-align: top;
    flex-shrink: 0;
}

.desktop-table td.col-expand {
    width: 20px;
    min-width: 20px;
    max-width: 20px;
}

.desktop-table td.col-foto {
    width: 90px;
    min-width: 90px;
    max-width: 90px;
}

.desktop-table td.col-nome {
    width: 230px;
    min-width: 230px;
    max-width: 230px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.desktop-table td.col-empresa {
    width: 90px;
    min-width: 90px;
    max-width: 90px;
    text-align: center;
}

.desktop-table td.col-funcao {
    width: 100px;
    min-width: 100px;
    max-width: 100px;
    text-align: center;
}

.desktop-table td.col-venc {
    width: 95px;
    min-width: 95px;
    max-width: 95px;
}

/* Alinhar colunas da tabela com o cabeçalho dinâmico */
.desktop-table {
    table-layout: fixed;
    width: 100%;
}

.desktop-table td:nth-child(1) {
    width: 20px;
    min-width: 20px;
    max-width: 20px;
}

.desktop-table td:nth-child(2) {
    width: 90px;
    min-width: 90px;
    max-width: 90px;
}

.desktop-table td:nth-child(3) {
    width: 230px;
    min-width: 230px;
    max-width: 230px;
}

.desktop-table td:nth-child(4) {
    width: 90px;
    min-width: 90px;
    max-width: 90px;
}

.desktop-table td:nth-child(5) {
    width: 100px;
    min-width: 100px;
    max-width: 100px;
}

/* Colunas de vencimento (dinâmicas) */
.desktop-table td:nth-child(n+6) {
    width: 95px;
    min-width: 95px;
    max-width: 95px;
}


/* ============ ESTILOS TABELA MÊS - MONITORAMENTO DE 30 DIAS ============ */

/* ============ ESTILOS TABELA MÊS - MONITORAMENTO DE 30 DIAS ============ */

.modal-tabela-mes {
    max-width: 1600px;
    max-height: 90vh;
}

.mes-toolbar {
    display: flex;
    gap: 10px;
    margin-bottom: 10px;
    align-items: center;
    flex-wrap: wrap;
}

.mes-filtros {
    display: flex;
    gap: 8px;
    flex: 1;
    min-width: 300px;
}

.mes-filtro-input {
    padding: 6px 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 12px;
    flex: 1;
    min-width: 100px;
}

.mes-table-container {
    overflow: auto;
    max-height: calc(95vh - 60px);
    border: 1px solid #ccc;
    border-radius: 4px;
}

.tabela-mes {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px; /* Changed from clamp(...) */
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background: white;
    color: #333;
    table-layout: auto; /* Changed from fixed */
}

.tabela-mes th,
.tabela-mes td {
    border: 1px solid #999;
    padding: 1px; /* Padding mínimo absoluto */
    text-align: center;
    height: 18px; /* Altura mínima para caber mais linhas */
}

/* Cabeçalho de Meses (Janeiro/Fevereiro) */
.tabela-mes .header-mes {
    background-color: #f1f3f5;
    color: #1a1a1a;
    font-weight: 700;
    text-align: center;
    border: 1px solid #999;
    text-transform: uppercase;
    font-size: 11px;
    height: 20px;
    line-height: 20px;
    padding: 0;
    position: sticky;
    top: 24px; /* Offset pela altura da primeira linha */
    z-index: 11;
}

/* Linhas de Títulos (FUNÇÃO/EMPRESA) */
.tabela-mes .header-titulos {
    background-color: #449d44;
    color: white;
    text-align: center;
    font-weight: bold;
}

.tabela-mes .header-titulos th {
    background-color: #449d44;
    color: white;
    border: 1px solid #000;
    position: sticky;
    top: 0;
    z-index: 12;
    height: 24px;
}

/* Linha de Totais (Rodapé Preto) */
.tabela-mes .linha-total-geral {
    background-color: #000000 !important;
    color: #ffffff !important;
    font-weight: bold;
}

.tabela-mes .linha-total-geral td {
    background-color: #000000 !important;
    color: #ffffff !important;
    font-weight: bold;
    border: 1px solid #000;
}

/* Cores das Células de Dados */
.tabela-mes td {
    border: 1px solid #000;
    text-align: center;
    padding: 2px;
    font-size: 11px;
}

/* Finais de Semana (Opcional - para facilitar leitura) */
.tabela-mes .fds {
    background-color: #f2f2f2;
}

/* Linhas de Função */
.tabela-mes .linha-funcao {
    background-color: #ffffff;
}

.tabela-mes .linha-funcao td {
    background-color: #ffffff;
    border: 1px solid #000;
}

/* Linhas de Empresa */
.tabela-mes .linha-empresa {
    background-color: #ffffff;
}

.tabela-mes .linha-empresa td {
    background-color: #ffffff;
    border: 1px solid #000;
}

/* Linhas de Empresa Inativa (Amarelo) */
.tabela-mes .linha-empresa-inativa {
    background-color: #fff3cd !important;
}

.tabela-mes .linha-empresa-inativa td {
    background-color: #fff3cd !important;
    color: #856404 !important;
    border: 1px solid #000;
}


/* Configuração de Colunas Auto-Ajustáveis */
.tabela-mes .col-funcao-empresa {
    text-align: center !important;
    vertical-align: middle !important;
    font-weight: 600;
    width: auto;
    min-width: 100px;
    max-width: 180px; 
    padding: 4px 6px; 
    white-space: normal;
    word-break: break-word;
}

.header-mes {
    text-align: center !important;
    vertical-align: middle !important;
}

.tabela-mes .col-dia-mes,
.tabela-mes .col-total-mes,
.tabela-mes th,
.tabela-mes td {
    text-align: center !important;
    vertical-align: middle !important;
}

.tabela-mes .col-dia-mes {
    padding: 1px;
    color: #000 !important;
    font-weight: bold;
    width: 30px;
    min-width: 30px;
}

.tabela-mes .col-total-mes {
    width: 3.5%; /* Totais ocupam pouco espaço */
    background: #0070C0;
    color: white;
    font-weight: bold;
    text-align: center !important;
    vertical-align: middle !important;
}

.tabela-mes td {
    text-align: center !important;
    vertical-align: middle !important;
}

/* Célula com Presença (P) */
.tabela-mes .status-p {
    background-color: #90EE90;
    color: #000;
    font-weight: bold;
}

/* Célula com Falta (F) */
.tabela-mes .status-f {
    background-color: #FFB6C1;
    color: #000;
    font-weight: bold;
}

/* Célula com Atestado (A) */
.tabela-mes .status-a {
    background-color: #005dac;
    color: #000;
    font-weight: bold;
}

/* Célula com Férias (FE) */
.tabela-mes .status-fe {
    background-color: #DDA0DD;
    color: #000;
    font-weight: bold;
}

/* Célula com Folga (FO) */
.tabela-mes .status-fo {
    background-color: #FFD700;
    color: #000;
    font-weight: bold;
}

/* Estilo para colunas do mês passado (Janela de 30 dias) - TRAVADA */
.tabela-mes .col-mes-passado-travada {
    background-color: #f8f9fa !important;
    color: #adb5bd !important;
    cursor: not-allowed;
    pointer-events: none;
    opacity: 0.7;
}

.mes-info-bottom {
    padding: 10px;
    background: #f5f5f5;
    border-top: 1px solid #ccc;
    font-size: 11px;
    color: #666;
    margin-top: 10px;
}

.mes-info-bottom p {
    margin: 0;
}

/* Estilos para captura de tela da tabela */
.capturando-tabela #modalTabelaMes {
    position: absolute !important;
    overflow: visible !important;
    height: auto !important;
}

.capturando-tabela .modal-content.modal-tabela-mes {
    margin: 0 !important;
    width: fit-content !important;
    max-width: none !important;
    max-height: none !important; /* NOVO: Garante que o modal expanda o quanto for necessário */
    height: auto !important;
    overflow: visible !important;
}

.capturando-tabela .mes-table-container {
    overflow: visible !important;
    max-height: none !important;
    height: auto !important;
}

.capturando-tabela .tabela-mes th {
    position: static !important; /* Desabilita sticky durante a captura para evitar bugs */
}

/* Estilo para indicador de certificado inv�lido na tabela */
.dot-invalido {
    display: inline-block;
    width: 12px;
    height: 12px;
    background-color: #ff9800;
    border-radius: 50%;
    margin-right: 8px;
    vertical-align: middle;
    box-shadow: 0 0 5px rgba(255, 152, 0, 0.8);
    cursor: help;
    flex-shrink: 0;
    border: 1px solid rgba(0,0,0,0.1);
}


/* CORRECAO MOBILE PARA A TABELA MES */
.tabela-mes th, .tabela-mes td { white-space: nowrap !important; padding: 2px 4px !important; }
.tabela-mes { min-width: max-content !important; }

/* 🛡️ REGRAS DE PERMISSÃO E OCULTAÇÃO POR PERFIL DE USUÁRIO */
.user-intermediario #btnConsultaCPF,
.user-intermediario #btnConsultaGlobalFornecedor,
.user-intermediario button[onclick*="abrirImportar"],
.user-intermediario button[onclick*="abrirSolicitacoes"],
.user-intermediario [onclick*="abrirBackup"],
.user-intermediario #btnBackup,
.user-intermediario .btn-excluir-fornecedor,
.user-intermediario button[onclick*="excluirFornecedor"],
.user-intermediario button[onclick*="abrirModalUploadFornecedor"],
.user-intermediario .fornecedor-action-upload,
.user-intermediario .fornecedor-action-excluir,
.user-intermediario #modalForm #btnFichaEpi,
.user-intermediario #modalForm #btnOS,
.user-intermediario #modalForm #btnOrientacao,
.user-intermediario #modalForm #btnExcluirModal,
.user-intermediario #modalForm #btnExcluirMultiplos,
.user-intermediario #modalForm .btn-anexar,
.user-intermediario #modalForm .btn-excluir-anexo,
.user-intermediario #modalForm .btn-upload-foto,
.user-intermediario #modalForm .btn-remover-foto {
    display: none !important;
}

body:not(.is-dono) [onclick*="abrirRastreamento"],
body:not(.is-dono) [onclick*="abrirGerenciarUsuarios"],
body:not(.is-dono) [onclick*="abrirBackup"],
body:not(.is-dono) #btnRastreamento,
body:not(.is-dono) #btnUsuarios,
body:not(.is-dono) #btnBackup {
    display: none !important;
}