:root { --primary-color: #3498db; --secondary-color: #2c3e50; --bg-color: #f4f7f6; }
        body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background-color: var(--bg-color); margin: 0; padding-top: 70px; color: var(--secondary-color); }
        .container { max-width: 1100px; margin: auto; background: #fff; padding: 30px; border-radius: 10px; box-shadow: 0 4px 15px rgba(0,0,0,0.05); }
        h1, h2 { text-align: center; color: var(--primary-color); }

        .fixed-header {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            background-color: #2c3e50;
            color: #fff;
            padding: 17px 20px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            z-index: 1000;
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 40px;
        }

        .fixed-header h1 {
            margin: 0;
            font-size: 24px;
            color: #fff;
        }

        .fixed-header a {
            color: #fff;
            text-decoration: none;
            font-weight: bold;
            padding: 8px 16px;
            border-radius: 5px;
            transition: background-color 0.3s, transform 0.2s;
        }

        .fixed-header a:not(.logout-link) {
            background-color: #3498db;
        }

        .fixed-header a.active {
            background-color: #2980b9;
        }

        .fixed-header a:hover {
            transform: translateY(-2px);
        }

        .fixed-header a:not(.logout-link):hover {
            background-color: #2980b9;
        }

        .fixed-header .logout-link {
            background-color: #e74c3c;
        }

        .fixed-header .logout-link:hover {
            background-color: #c0392b;
        }

        .historico-list { margin-top: 30px; }
        .historico-item {
            background: #fafafa;
            padding: 20px;
            border: 1px solid var(--border-color);
            border-radius: 8px;
            margin-bottom: 15px;
            transition: box-shadow 0.3s;
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
        }
        .historico-item:hover { box-shadow: 0 2px 10px rgba(0,0,0,0.05); }
        .historico-item h4 { margin: 0; color: var(--secondary-color); display: flex; justify-content: space-between; align-items: center; }
        .historico-actions {
            display: flex;
            gap: 10px;
            margin-top: 10px;
        }
        .historico-item p { margin: 5px 0; font-size: 14px; }
        .historico-item .data { font-size: 12px; color: #7f8c8d; }
        .pagination { text-align: center; margin-top: 20px; }
        .pagination a, .pagination span { display: inline-block; padding: 8px 16px; margin: 0 5px; border: 1px solid var(--border-color); border-radius: 6px; text-decoration: none; color: var(--primary-color); transition: background-color 0.3s; }
        .pagination a:hover { background-color: var(--primary-color); color: #fff; }
        .pagination span.active { background-color: var(--primary-color); color: #fff; border-color: var(--primary-color); }
        .pagination span.disabled { color: #ccc; cursor: not-allowed; }
        .download-btn { background: #c0392b; color: #fff; padding: 8px 12px; border-radius: 5px; text-decoration: none; font-weight: bold; font-size: 0.9em; transition: background-color 0.3s; }
        .download-btn:hover { background: #a93226; }
        .observacao-form-container { background: #e9f5fd; padding: 20px; border-radius: 8px; margin-top: 30px; }
        .form-group { margin-bottom: 15px; }
        .form-group label { display: block; margin-bottom: 5px; font-weight: bold; }
        .form-group input[type="text"], .form-group input[type="file"] { width: 100%; padding: 8px; border-radius: 5px; border: 1px solid #ccc; box-sizing: border-box; }
        #candidatura-editor { background: #fff; min-height: 100px; }
        .observacao-text { margin-top: 10px; padding: 10px; background: #fff; border: 1px dashed #ccc; border-radius: 5px; word-wrap: break-word; }
        .avaliacao-completa { border-left: 5px solid #3498db; }
        .observacao-manual { border-left: 5px solid #e74c3c; }
        .avaliacao-pendente { border-left: 5px solid #f39c12; }
        .search-form { display: flex; flex-direction: column; gap: 10px; margin-bottom: 20px; padding: 15px; background: #f0f0f0; border-radius: 8px; }
        .search-form .search-input-group { display: flex; gap: 10px; }
        .search-form input[type="text"] { flex: 1; padding: 10px; border: 1px solid #ccc; border-radius: 5px; }
        .search-form button { padding: 10px 15px; background: var(--primary-color); color: #fff; border: none; border-radius: 5px; cursor: pointer; }
        .search-form button.clear { background: #95a5a6; }
        .search-form .status-filter-group { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
        .search-form .status-filter-group label { font-weight: normal; font-size: 0.9em; }
        .search-results-info { text-align: center; font-size: 1.1em; color: #555; margin-bottom: 20px; }
        .alert { padding: 15px; border-radius: 8px; margin-bottom: 20px; text-align: center; }
        .alert.success { background-color: #d4edda; color: #155724; border-color: #c3e6cb; }
        .alert.error { background-color: #f8d7da; color: #721c24; border-color: #f5c6cb; }
        .status-form { flex: 0 0 300px; margin-left: 20px; background: #e9f5fd; padding: 10px; border-radius: 8px; height: fit-content; }
        .status-form fieldset { border: none; padding: 0; margin: 0; }
        .status-form legend { font-weight: bold; color: var(--secondary-color); margin-bottom: 10px; }
        .status-form label { display: block; margin-bottom: 5px; font-size: 0.9em; }
        .status-form input[type="checkbox"] { margin-right: 5px; accent-color: var(--primary-color); }
        .save-btn { display: block; width: 100%; padding: 8px; background: var(--primary-color); color: #fff; border: none; border-radius: 6px; font-size: 0.9em; font-weight: bold; cursor: pointer; transition: background-color 0.3s; margin-top: 10px; }
        .save-btn:hover { background: #2980b9; }
        .sort-controls { display: flex; align-items: center; gap: 10px; margin-bottom: 20px; }
        .sort-controls select { padding: 8px; border-radius: 5px; border: 1px solid var(--border-color);  background: #f39c12; }
        .sort-controls a { text-decoration: none; color: var(--secondary-color); padding: 5px 10px; border-radius: 5px; transition: background-color 0.3s; }
        .sort-controls a:hover, .sort-controls a.active { background-color: var(--primary-color); color: #fff; }
        .registration-form-container { background: #e9f5fd; padding: 20px; border-radius: 8px; }
        .registration-form-container h2 { color: #3498db; margin-bottom: 20px; text-align: center; }
        .registration-form-container .form-group label { font-weight: bold; color: #2c3e50; margin-bottom: 5px; }
        .registration-form-container .form-group input[type="text"], .registration-form-container .form-group input[type="tel"], .registration-form-container .form-group input[type="email"], .registration-form-container .form-group input[type="file"], .registration-form-container .form-group select { width: 100%; padding: 12px; border: 1px solid #ccc; border-radius: 6px; box-sizing: border-box; font-size: 16px; }
        .registration-form-container .btn { width: 100%; padding: 15px; background: #2ecc71; color: #fff; border: none; border-radius: 6px; font-size: 18px; font-weight: bold; cursor: pointer; transition: background-color 0.3s; }
        .registration-form-container .btn:hover { background: #27ae60; }
        #candidatura-editor { background: #fff; min-height: 150px; border: 1px solid #ccc; border-radius: 6px; font-size: 16px; }
        #candidatura-editor .ql-editor { font-size: 16px; }
        .fixed-header .menu-links { display: flex; align-items: center; gap: 15px; }
        .spacer { border: 0; height: 1px; background-color: #ddd; margin: 20px 0; }
        .spaced-text { margin-top: 20px; }
        .spaced-text i { margin-right: 8px; color: #555; }
        .btn { display: inline-block; padding: 8px 12px; border-radius: 5px; text-decoration: none; font-weight: bold; font-size: 0.9em; cursor: pointer; transition: background-color 0.3s; }
        .btn.clear { background: #95a5a6; color: #fff; border: none; }
        .btn.clear:hover { background: #7f8c8d; }
        .search-form button { padding: 10px 15px; background: var(--primary-color); color: #fff; border: none; border-radius: 5px; cursor: pointer; }
        .actions-container { position: relative; display: inline-block; margin: 15px 0; }
        .main-action-btn { padding: 10px 15px; background-color: #3498db; color: #fff; border: none; border-radius: 6px; font-weight: bold; cursor: pointer; transition: background-color 0.3s; }
        .main-action-btn:hover { background-color: #2980b9; }
        .actions-menu { display: none; position: absolute; top: 100%; left: 0; z-index: 1; background-color: #fff; border: 1px solid #ccc; border-radius: 6px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); min-width: 200px; padding: 5px 0; margin-top: 5px; }
        .actions-menu.show { display: flex; flex-direction: column; }
        .action-btn { text-decoration: none; padding: 10px 15px; color: #333; font-weight: bold; transition: background-color 0.2s; }
        .action-btn:hover { background-color: #f0f0f0; }
        .action-btn.whatsapp-btn { color: #25d366; }
        .action-btn.evaluation-link-btn { color: #f39c12; }
        .status-message.success { color: #2ecc71; font-weight: bold; }
        .status-message.error { color: #e74c3c; font-weight: bold; }
        .save-btn.saving { background-color: #f1c40f !important; cursor: not-allowed; }
        .save-btn.saved { background-color: #2ecc71 !important; }
        .btn.whatsapp-btn { background-color: #25d366; font-weight: bold; color: #fff; padding: 8px 12px; border-radius: 5px; text-decoration: none; transition: background-color 0.3s; }
        .btn.whatsapp-btn:hover { background-color: #128c7e; }
        .btn.evaluation-link-btn { background-color: #f39c12; font-weight: bold; color: #fff; padding: 8px 12px; border-radius: 5px; text-decoration: none; transition: background-color 0.3s; }
        .btn.evaluation-link-btn:hover { background-color: #e67e22; }

        /* Estilos da nova aba de Gerenciamento */
        .tab-content { display: none; }
        .tab-content.active { display: block; }
        .nav-link.active { background-color: #2980b9; }

        /* Estilos da tabela de gerenciamento */
        table { width: 100%; border-collapse: collapse; margin-top: 20px; }
        th, td { padding: 12px; border: 1px solid #ddd; text-align: left; }
        th { background-color: #f2f2f2; }
        .btn-edit, .btn-delete { padding: 8px 12px; border: none; border-radius: 4px; cursor: pointer; color: #fff; text-decoration: none; display: inline-block; }
        .btn-edit { background-color: #2980b9; }
        .btn-delete { background-color: #c0392b; }
        .btn-group { display: flex; gap: 5px; }
        .edit-form-container { margin-top: 30px; padding: 20px; background-color: #eaf2f8; border-radius: 8px; }
        .form-group input, .form-group textarea { width: 100%; padding: 8px; border: 1px solid #ccc; border-radius: 4px; }
        .btn-save { background-color: #2ecc71; }
        .btn-cancel { background-color: #7f8c8d; }
        /* Estilos para a nova seção de estatísticas */
        .stats-container {
            display: flex;
            justify-content: center;
            gap: 20px;
            margin-bottom: 20px;
            padding: 10px; /* Reduz o padding do container */
            background-color: #eaf2f8;
            border-radius: 8px;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
        }
        .stats-container a {
            flex-grow: 1;
        }

        .stat-box {
            text-align: center;
            font-size: 0.9em; /* Reduz o tamanho da fonte */
            padding: 10px 15px; /* Reduz o padding interno do botão */
            border-radius: 6px;
            flex: 1;
            cursor: pointer;
            transition: background-color 0.3s, transform 0.2s;
        }

        .stat-box:hover {
            background-color: #dbe9f5;
            transform: translateY(-2px);
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        }

        .stat-box strong {
            display: block;
            font-size: 1.1em; /* Ajusta o tamanho da fonte do título */
            color: #34495e;
        }

        .stat-box span {
            font-size: 1.8em; /* Reduz o tamanho da fonte do número */
            font-weight: bold;
            color: var(--primary-color);
            display: block;
            margin-top: 5px; /* Adiciona um pequeno espaçamento entre o título e o número */
        }
        /* Novo estilo para o formulário de status */
        .status-form {
            flex: 0 0 300px;
            margin-left: 20px;
            background: #e9f5fd;
            padding: 10px; /* Reduz o padding geral do formulário */
            border-radius: 8px;
            height: fit-content;
        }

        .status-form h4 {
            font-size: 1em; /* Títulos menores */
            margin-top: 5px;
            margin-bottom: 5px; /* Reduz a margem dos títulos */
            border-bottom: 1px solid #c0d3e0; /* Adiciona uma linha para separar */
            padding-bottom: 3px;
        }

        .status-form fieldset {
            border: none;
            padding: 0;
            margin: 0;
        }

        .status-form label {
            display: block;
            margin-right: 15px; /* Espaço entre os itens */
            margin-bottom: 5px; /* Espaço entre as linhas */
            font-size: 0.85em; /* Fonte menor para os labels */
            white-space: nowrap; /* Impede quebras de linha indesejadas */
        }

        .status-form input[type="radio"],
        .status-form input[type="checkbox"] {
            margin-right: 3px; /* Reduz o espaço entre o input e o texto */
        }

        .status-form hr {
            margin: 5px 0; /* Reduz a linha de separação */
        }

        .save-btn {
            display: block;
            width: 100%;
            padding: 8px; /* Padding menor */
            background: var(--primary-color);
            color: #fff;
            border: none;
            border-radius: 6px;
            font-size: 0.9em;
            font-weight: bold;
            cursor: pointer;
            transition: background-color 0.3s;
            margin-top: 10px; /* Espaçamento menor acima do botão */
        }

        /* Estilo para a vaga abaixo do nome do candidato */
        .candidato-info {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
        }
        .candidato-info h4 {
            margin: 0;
        }
        .candidato-info .vaga-label {
            font-size: 0.8em;
            color: #777;
            margin-top: 5px;
        }
        /* Paleta de Cores para as Estatísticas - Versão Atualizada */
        .stat-box.total-candidatos {
            /* Cor de fundo azul mais presente, alinhada à sua identidade visual. */
            background-color: #3498db;
        }

        .stat-box.total-candidatos span {
            /* Cor do texto branca ou um tom mais claro para bom contraste com o fundo azul. */
            color: #ffffff; /* Ou talvez um tom de azul mais claro como #eaf6ff */
        }


        .stat-box.aprovados {
            background-color: #d4edda;
        }

        .stat-box.aprovados span {
            color: #2ecc71;
        }

        .stat-box.experientes {
            background-color: #dbe9f5;
        }

        .stat-box.experientes span {
            color: #3498db;
        }

        .stat-box.inexperientes {
            background-color: #fcf8e3;
        }

        .stat-box.inexperientes span {
            color: #f39c12;
        }

        .stat-box.nao-entrevistados {
            background-color: #f8d7da;
        }

        .stat-box.nao-entrevistados span {
            color: #e74c3c;
        }
        .colaborador-card {
            background: #fdfdfd;
            padding: 20px;
            border: 1px solid #ddd;
            border-radius: 8px;
            margin-bottom: 20px;
            box-shadow: 0 2px 5px rgba(0,0,0,0.05);
        }
        /* --- ESTILOS ADICIONAIS PARA O CARTÃO DO COLABORADOR --- */
        .colaborador-card h4 {
            margin-bottom: 3px;
            font-size: 1.3em;
            color: #2c3e50;
        }
        .colaborador-card .vaga-label {
            font-size: 1.1em;
            color: #7f8c8d;
            margin-top: 0;
            margin-bottom: 8px;
        }
        .colaborador-card .details-list p {
            margin: 3px 0;
            font-size: 0.95em;
        }
        .colaborador-card .observacoes-label,
        .colaborador-card .curriculo-label {
            margin-top: 10px;
            padding: 10px;
            border: 1px solid #e0e0e0;
            border-radius: 5px;
            background-color: #fefefe;
        }
        .colaborador-card .observacoes-label strong,
        .colaborador-card .curriculo-label strong {
            display: block;
            margin-bottom: 3px;
            font-size: 1em;
            font-weight: bold;
            color: #333;
        }
        .colaborador-card .curriculo-label a {
            color: #3498db;
            text-decoration: none;
            font-weight: normal;
            transition: color 0.3s;
            font-size: 0.9em;
        }
        .colaborador-card .curriculo-label a:hover {
            color: #2980b9;
            text-decoration: underline;
        }

        /* --- ESTILO PARA HABILIDADES E PROJETOS --- */
        .habilidades-list,
        .projetos-list {
            margin-top: 15px;
            padding-top: 15px;
            border-top: 1px solid #eee;
        }
        .habilidades-list strong {
            font-size: 1.1em;
            color: #333;
            display: flex;
            align-items: center;
            gap: 8px;
            margin-bottom: 8px;

        }

        .habilidades-list strong::before {
            font-family: 'Font Awesome 5 Free';
            font-weight: 900;

            color: #3498db;
        }


        .main-habilidades-title strong {
            font-size: 1.1em;
            color: #333;
            display: flex;
            align-items: center;
            gap: 8px;
            margin-bottom: 8px;

        }

        .main-habilidades-title strong::before {
            font-family: 'Font Awesome 5 Free';
            font-weight: 900;
            content: "\f085"; /* Ícone de engrenagens */
            color: #3498db;
        }


        .habilidade-area strong {
            font-size: 1.0em; /* Altera o tamanho da fonte apenas para os sub-títulos */
            color: #555;
        }

        .projetos-list strong {
            font-size: 1.1em;
            color: #333;
            display: flex;
            align-items: center;
            gap: 8px;
            margin-bottom: 8px;
        }

        .projetos-list strong::before {
            font-family: 'Font Awesome 5 Free';
            font-weight: 900;
            content: "\f0ae"; /* Ícone de lista/tarefas */
            color: #2ecc71;
        }

        .skills-checkboxes {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
        }

        .skills-checkboxes label {
            background-color: #e8f5e9;
            padding: 5px 10px;
            border-radius: 20px;
            font-size: 0.7em;
            color: #c74435;
            border: 1px solid #c8e6c9;

            transition: background-color 0.3s;
        }

        .skills-checkboxes label input[type="checkbox"] {
            display: none; /* Esconde o checkbox padrão */
        }

        .skills-checkboxes label input[type="checkbox"]:checked + span {
            font-weight: bold;
            color: #1b5e20;
            text-transform: uppercase;
        }

        .skills-checkboxes label:hover {
            background-color: #d4edda;
        }

        .projetos-list ul {
            list-style-type: none;
            padding: 0;
            margin: 0;
        }

        .projetos-list ul li {
            background-color: #f9f9f9;
            border: 1px solid #eee;
            border-left: 5px solid #3498db;
            padding: 10px;
            margin-bottom: 8px;
            border-radius: 4px;
            font-size: 0.9em;
            position: relative;
        }
        .projetos-list ul li i.fa-check-circle { color: #2ecc71; margin-right: 5px; }
        .projetos-list ul li i.fa-sync-alt { color: #f39c12; margin-right: 5px; }

        .projetos-list ul li small {
            display: block;
            margin-top: 5px;
            color: #777;
        }

        .edit-form-container {
            margin-top: 30px;
            padding: 20px;
            background-color: #eaf2f8;
            border-radius: 8px;
        }
        .form-group {
            margin-bottom: 15px;
        }
        .form-group label {
            display: block;
            margin-bottom: 5px;
            font-weight: bold;
        }
        .form-group input, .form-group textarea, .form-group select {
            width: 100%;
            padding: 8px;
            border-radius: 5px;
            border: 1px solid #ccc;
            box-sizing: border-box;
        }
        .btn-save {
            background-color: #2ecc71;
            color: #fff;
            border: none;
            font-weight: bold;
            padding: 10px 15px;
            border-radius: 5px;
            cursor: pointer;
            transition: background-color 0.3s;
        }
        .btn-cancel {
            background-color: #95a5a6;
            color: #fff;
            text-decoration: none;
            padding: 10px 15px;
            border-radius: 5px;
        }

        /* --- ESTILO ATUALIZADO PARA EXIBIÇÃO DA ESCALA --- */
        .escala-trabalho-container {
            margin-top: 20px;
            padding-top: 10px;
            border-top: 1px solid #eee;
        }

        .escala-dias-exibicao {
            display: flex;
            justify-content: space-between;
            gap: 10px;
            margin-top: 10px;
            font-size: 0.9em;
        }

        .escala-dia-item {
            background-color: #f4f7f6;
            border: 1px solid #ddd;
            border-radius: 8px;
            padding: 8px;
            text-align: center;
            flex-grow: 1;
        }

        .escala-dia-item .dia-label {
            font-weight: bold;
            display: block;
            font-size: 0.9em;
        }

        .escala-dia-item .dia-status {
            display: block;
            margin-top: 5px;
            padding: 3px;
            border-radius: 4px;
            font-size: 0.8em;
            font-weight: bold;
        }

        .escala-dia-item .dia-status.escritorio {
            background-color: #dbe9f5;
            color: #3498db;
        }

        .escala-dia-item .dia-status.homeoffice {
            background-color: #d4edda;
            color: #2ecc71;
        }
        .escala-dia-item .dia-status.visitando {
            background-color: #f9e2d1;
            color: #f39c12;
        }
        .escala-dia-item .dia-status.folga {
            background-color: #e0e0e0;
            color: #777;
        }
        .escala-dia-item .dia-status.ferias {
            background-color: #f8d7da;
            color: #e74c3c;
        }

        /* --- NOVO ESTILO PARA O FORMULÁRIO DE ESCALA --- */
        .escala-form-group {
            display: flex;
            justify-content: space-between;
            gap: 15px;
            flex-wrap: wrap;
        }

        .escala-dia {
            background-color: #f4f7f6;
            border: 1px solid #ddd;
            border-radius: 8px;
            padding: 10px;
            text-align: left;
            flex-grow: 1;
        }

        .escala-dia strong {
            display: block;
            text-align: center;
            margin-bottom: 8px;
            font-size: 1em;
        }

        .escala-dia label {
            display: flex;
            align-items: center;
            justify-content: flex-start;
            font-size: 0.9em;
            cursor: pointer;
            margin-bottom: 5px;
            gap: 5px;
        }
        .escala-dia input[type="radio"] {
            -webkit-appearance: none;
            -moz-appearance: none;
            appearance: none;
            width: 16px;
            height: 16px;
            border: 2px solid #ccc;
            border-radius: 4px;
            margin: 0;
            position: relative;
            cursor: pointer;
        }
        .escala-dia input[type="radio"]:checked {
            background-color: #3498db;
            border-color: #3498db;
        }
        .escala-dia input[type="radio"]:checked::before {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 8px;
            height: 8px;
            background-color: #fff;
            border-radius: 50%;
        }
        .visita-details {
            margin-top: 10px;
            padding-top: 10px;
            border-top: 1px dashed #ccc;
        }
        .visita-details input {
            margin-bottom: 5px;
        }

        /* --- ESTILOS PARA A NOVA ABA DE ESCALA DIÁRIA --- */
        .escala-filtros {
            display: flex;
            justify-content: center;
            gap: 10px;
            margin-bottom: 25px;
        }
        .escala-filtros .btn {
            background-color: #f0f0f0;
            color: #555;
            padding: 8px 15px;
            border: 1px solid #ddd;
            border-radius: 20px;
            text-decoration: none;
            transition: background-color 0.3s, color 0.3s;
            font-size: 0.9em;
        }
        .escala-filtros .btn:hover {
            background-color: #e0e0e0;
        }
        .escala-filtros .btn.active-filter {
            background-color: var(--primary-color);
            color: #fff;
            border-color: var(--primary-color);
        }
        .escala-cards-container {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
            gap: 20px;
        }
        .escala-card {
            background-color: #f9f9f9;
            padding: 20px;
            border-radius: 8px;
            border-left: 5px solid;
            box-shadow: 0 2px 8px rgba(0,0,0,0.05);
            text-align: center;
            transition: transform 0.2s;
        }
        .escala-card:hover {
            transform: translateY(-5px);
        }
        .escala-card.escritorio { border-color: #3498db; }
        .escala-card.homeoffice { border-color: #2ecc71; }
        .escala-card.visitando { border-color: #f39c12; }
        .escala-card.ferias { border-color: #e74c3c; }
        .escala-card.folga { border-color: #bdc3c7; }
        .escala-nome {
            font-size: 1.2em;
            font-weight: bold;
            color: #2c3e50;
            margin-bottom: 5px;
        }
        .escala-cargo {
            font-size: 0.9em;
            color: #7f8c8d;
            margin-bottom: 10px;
        }
        .escala-status {
            font-weight: bold;
            color: #fff;
            padding: 5px 10px;
            border-radius: 20px;
            display: inline-block;
            font-size: 0.8em;
        }
        .escala-card.escritorio .escala-status { background-color: #3498db; }
        .escala-card.homeoffice .escala-status { background-color: #2ecc71; }
        .escala-card.visitando .escala-status { background-color: #f39c12; }
        .escala-card.ferias .escala-status { background-color: #e74c3c; }
        .escala-card.folga .escala-status { background-color: #bdc3c7; }
        .escala-empty-state {
            text-align: center;
            color: #7f8c8d;
            font-style: italic;
            margin-top: 50px;
        }

        /* --- ESTILOS PARA A ABA DE ESCALA SEMANAL --- */
        .escala-semanal-container {
            overflow-x: auto;
        }
        .escala-semanal-table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 20px;
            font-size: 0.9em;
        }
        .escala-semanal-table th,
        .escala-semanal-table td {
            padding: 12px 8px;
            border: 1px solid #ddd;
            text-align: center;
            white-space: nowrap;
        }
        .escala-semanal-table th {
            background-color: #f2f2f2;
            font-weight: bold;
        }
        .escala-semanal-table tbody tr:nth-child(even) {
            background-color: #f9f9f9;
        }
        .escala-semanal-table td:first-child {
            text-align: left;
            font-weight: bold;
        }
        .status-cell {
            color: #fff;
            font-weight: bold;
            text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
        }
        .status-cell.escritorio { background-color: #3498db; }
        .status-cell.homeoffice { background-color: #2ecc71; }
        .status-cell.visitando { background-color: #f39c12; }
        .status-cell.ferias { background-color: #e74c3c; }
        .status-cell.folga {
            background-color: #bdc3c7;
            color: #444;
        }
        .status-details {
            font-size: 0.8em;
            font-weight: normal;
            display: block;
            margin-top: 5px;
            opacity: 0.8;
        }
        .fa-solid, .fas {
            font-weight: 900;
            color: #095a27;
        }
        /* Remove o sublinhado dos links dentro das caixas de estatísticas */
        .stats-container a {
            text-decoration: none;
        } 
        
/* --- ESTILOS PARA O NOVO MENU SUSPENSO (COM TRANSIÇÃO SUAVE) --- */
.fixed-header {
justify-content: center; /* Altere esta linha */
    gap: 20;
}
.menu-item-group {
    position: relative;
    padding: 0 15px;
}
.menu-title {
    color: #fff;
    text-decoration: none;
    font-weight: bold;
    padding: 8px 16px;
    display: block;
    cursor: pointer;
    transition: background-color 0.3s;
}
.menu-title:hover {
    background-color: #2980b9;
}
.submenu {
    position: absolute;
    top: 100%;
    left: 0;
    /*background-color: #34495e; */
    border-radius: 0 0 5px 5px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    min-width: 220px;
    z-index: 999;
    padding: 10px 0;

    /* Propriedades para a transição suave */
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s;
}

.menu-item-group:hover .submenu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.submenu .nav-link {
    display: block;
    color: #fff;
    padding: 10px 20px;
    background-color: transparent;
    text-align: left;
    transition: background-color 0.2s;
}
.submenu .nav-link:hover,
.submenu .nav-link.active {
    background-color: #2980b9;
}
.logout-link {
/* margin-left: auto; */
}
/* --- ESTILOS PARA CORRIGIR A ÁREA DE GERENCIAR HABILIDADES --- */
.form-container {
    background-color: #f9f9f9;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 20px;
}

.form-container h3 {
    margin-top: 0;
    color: #333;
}

.form-container .form-group {
    display: flex;
    gap: 10px;
    align-items: center;
}

.form-container input[type="text"],
.form-container select {
    flex: 1;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 1em;
}

.form-container .btn {
    padding: 10px 15px;
    border-radius: 4px;
    font-weight: bold;
    cursor: pointer;
    border: none;
    transition: background-color 0.3s ease;
    white-space: nowrap;
}

.habilidades-list-manager {
    background-color: #f9f9f9;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 20px;
}

.habilidade-area-manager {
    border-bottom: 1px solid #eee;
    padding-bottom: 10px;
    margin-bottom: 15px;
}

.habilidade-area-manager h4 {
    color: #555;
    margin-bottom: 10px;
}

.skills-list {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

.skills-list li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid #eee;
    font-size: 0.9em;
    color: #666;
}

.skills-list li:last-child {
    border-bottom: none;
}

.btn-remove {
    background-color: #e74c3c;
    color: white;
    padding: 5px 10px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.8em;
    transition: background-color 0.3s ease;
}

.btn-remove:hover {
    background-color: #c0392b;
}

.fa-file-alt:before, .fa-file-lines:before, .fa-file-text:before {
    content: "\f15c";
    color: #de8e2f;
    /* font-size: 1em; */
}


/* Estilos para a seção de Habilidades */
.habilidades-container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.habilidade-area-card {
    background-color: #f9f9f9;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 15px;
    flex: 1 1 200px; /* Flex-box para layout responsivo em colunas */
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

.habilidade-area-card h4 {
    margin-top: 0;
    margin-bottom: 10px;
    color: #3498db;
    border-bottom: 2px solid #3498db;
    padding-bottom: 5px;
}

.habilidades-list-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.habilidade-item {
    background-color: #f0f0f0;
    border: 1px solid #ccc;
    border-radius: 20px;
    padding: 8px 15px;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    user-select: none; /* Impede a seleção de texto ao clicar */
    position: relative;
    padding-left: 25px; /* Espaço para o ícone/check */
}

.habilidade-item:hover {
    background-color: #e0e0e0;
}

.habilidade-item input[type="checkbox"] {
    position: absolute;
    left: 8px;
    top: 50%;
    transform: translateY(-50%);
    opacity: 0; /* Esconde o checkbox padrão */
    width: 15px;
    height: 15px;
    margin: 0;
}

.habilidade-item input[type="checkbox"] + span {
    font-size: 0.9em;
    color: #555;
    transition: color 0.2s;
}

.habilidade-item input[type="checkbox"]:checked + span {
    font-weight: bold;
    color: #2ecc71; /* Cor verde para habilidades marcadas */
}

/* Estilo para o ícone de check */
.habilidade-item:before {
    content: "\2713"; /* Código de um 'check' */
    font-family: Arial, sans-serif;
    position: absolute;
    left: 8px;
    top: 50%;
    transform: translateY(-50%) scale(0);
    color: #fff;
    font-weight: bold;
    font-size: 10px;
    width: 15px;
    height: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #ccc; /* Fundo cinza quando não marcado */
    border-radius: 50%;
    transition: transform 0.2s, background-color 0.2s;
}

.habilidade-item input[type="checkbox"]:checked:before {
    transform: translateY(-50%) scale(1);
    background-color: #2ecc71; /* Fundo verde quando marcado */
}

/* Estilos para a nova área de exibição das Habilidades */
.habilidades-display-container {
    display: contents;
    flex-direction: column;
    gap: 15px; /* Espaço entre as áreas de habilidade */
    padding: 10px;
    background-color: #fcfcfc;
    border-radius: 8px;
    border: 1px solid #eee;
}

.habilidade-area-display {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.area-title {
    font-weight: bold;
    color: #34495e;
    font-size: 0.9em;
    margin-right: 5px;
}

.skills-tag-group {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.skill-tag {
    background-color: #9ce73c;
    color: #3498db;
    border: 1px solid #dbe9f5;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 0.8em;
    font-weight: 500;
}

/* Estilos para agrupar campos em uma linha */
.form-group-inline {
    display: flex;
    justify-content: space-between;
    gap: 20px; /* Espaço entre os campos */
    flex-wrap: wrap; /* Permite quebrar a linha em telas pequenas */
}

.form-group-item {
    flex: 1; /* Faz com que cada campo ocupe a mesma largura */
    min-width: 200px; /* Garante que os campos não fiquem muito pequenos em telas grandes */
}
.skills-list-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.skill-tag-removable {
    display: inline-flex;
    align-items: center;
    background-color: #eaf2f8;
    color: #34495e;
    border: 1px solid #dbe9f5;
    border-radius: 20px;
    padding: 5px 10px;
    font-size: 0.9em;
}

.btn-remove-tag {
    background: transparent;
    border: none;
    color: #e74c3c;
    font-weight: bold;
    margin-left: 8px;
    padding: 0;
    cursor: pointer;
    line-height: 1;
    font-size: 1.2em;
}

.btn-remove-tag:hover {
    color: #c0392b;
}

/* Container principal para o layout de grid */
.escala-semanal-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 20px;
    padding: 20px;
    background-color: #f4f7f6;
    border-radius: 8px;
}

/* Estilo do card de cada dia */
.dia-card {
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.dia-card-header {
    background-color: #3498db;
    color: #fff;
    text-align: center;
    padding: 15px 10px;
}

.dia-card-header h3 {
    margin: 0;
    font-size: 1.2em;
}

.dia-card-body {
    flex-grow: 1;
    padding: 10px;
    overflow-y: auto; /* Adiciona scroll se a lista for muito longa */
}

/* Lista de colaboradores dentro do card do dia */
.colaborador-list {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

.colaborador-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    border-radius: 6px;
    margin-bottom: 8px;
    transition: background-color 0.2s;
}

.colaborador-item:hover {
    background-color: #eaf2f8;
}

.colaborador-status {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: #fff;
    font-size: 0.9em;
}

.colaborador-info-text {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.colaborador-info-text .nome {
    font-weight: bold;
    font-size: 0.9em;
    color: #2c3e50;
}

.visitas-list {
    list-style-type: none;
    padding-left: 15px;
    margin: 5px 0 0 0;
    font-size: 0.8em;
    color: #555;
    border-left: 2px solid #f39c12;
}

/* Cores dos status (mesmas que você já tem) */
.colaborador-item.escritorio { border-left: 4px solid #3498db; }
.colaborador-item.escritorio .colaborador-status { background-color: #3498db; }
.colaborador-item.homeoffice { border-left: 4px solid #2ecc71; }
.colaborador-item.homeoffice .colaborador-status { background-color: #2ecc71; }
.colaborador-item.visitando { border-left: 4px solid #f39c12; }
.colaborador-item.visitando .colaborador-status { background-color: #f39c12; }
.colaborador-item.ferias { border-left: 4px solid #e74c3c; }
.colaborador-item.ferias .colaborador-status { background-color: #e74c3c; }
.colaborador-item.folga { border-left: 4px solid #bdc3c7; }
.colaborador-item.folga .colaborador-status { background-color: #bdc3c7; }

/* Ícones para os status */
.colaborador-status .fa-building { color: #fff; }
.colaborador-status .fa-home { color: #fff; }
.colaborador-status .fa-car { color: #fff; }
.colaborador-status .fa-plane { color: #fff; }
.colaborador-status .fa-sun { color: #fff; }

.empty-state {
    text-align: center;
    color: #7f8c8d;
    font-style: italic;
    padding: 20px 0;
}