/* ═════════════════════════════════════════════════════════════════════

   GESTOR DE TAREFAS v2.0 — VIVIAN COSER ARQUITETOS ASSOCIADOS

   Design system: clean white + green, Inter font

   ═════════════════════════════════════════════════════════════════════ */



/* ─── RESET & BASE ──────────────────────────────────────────────────────── */

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

/* ═══ EVITA OVERFLOW HORIZONTAL CRÔNICO ═══ */
html, body { overflow-x: hidden; width: 100%; max-width: 100%; }
#app-container, .view-content, .container-main { max-width: 100%; overflow-x: hidden; }



/* ═════════════════════════════════════════════════════════════════════

   CONTATOS / FORNECEDORES — Cards, Stats, Filtros

   ═════════════════════════════════════════════════════════════════════ */



/* 👇 ISOLAMENTO: todos os seletores prefixados com #view-fornecedores

   para evitar vazamento de estilos de outras views */



#view-fornecedores .stats-bar {

    display: flex;

    align-items: center;

    gap: 1rem;

    padding: 0.85rem 1.25rem;

    background: var(--surface);

    border: 1px solid var(--border-light);

    border-radius: var(--radius);

    margin-bottom: 1rem;

    flex-wrap: wrap;

    box-shadow: var(--shadow-sm);

}

#view-fornecedores .stat-item {

    font-size: 0.88rem;

    color: var(--text-secondary);

    white-space: nowrap;

}

#view-fornecedores .stat-item strong {

    font-size: 1.05rem;

    color: var(--text);

    font-weight: 700;

}

#view-fornecedores .stat-divider {

    width: 1px;

    height: 28px;

    background: var(--border);

    flex-shrink: 0;

}

#view-fornecedores .stat-icon {

    font-size: 1rem;

    margin-right: 0.25rem;

}



#view-fornecedores .toolbar {

    display: flex;

    align-items: center;

    gap: 0.85rem;

    margin-bottom: 1rem;

    flex-wrap: wrap;

}

#view-fornecedores .search-box {

    position: relative;

    flex: 1;

    min-width: 200px;

    max-width: 400px;

}

#view-fornecedores .search-box .search-icon {

    position: absolute;

    left: 0.75rem;

    top: 50%;

    transform: translateY(-50%);

    font-size: 0.9rem;

    pointer-events: none;

    opacity: 0.5;

}

#view-fornecedores .search-box input {

    width: 100%;

    padding: 0.55rem 0.75rem 0.55rem 2.2rem;

    border: 1px solid var(--border-input);

    border-radius: var(--radius-sm);

    background: var(--surface);

    color: var(--text);

    font-size: 0.88rem;

    font-family: inherit;

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

    outline: none;

}

#view-fornecedores .search-box input:focus {

    border-color: var(--vc-green);

    box-shadow: 0 0 0 3px rgba(58, 92, 85, 0.08);

}

#view-fornecedores .search-box input::placeholder {

    color: var(--text-muted);

}



/* ─── Busca e filtros da lista de projetos ─── */

#visao-lista .search-box input,

#visao-lista select.form-input {

    padding: 0.55rem 0.85rem;

    border: 1px solid var(--border-input);

    border-radius: var(--radius-sm);

    background: var(--surface);

    color: var(--text);

    font-size: 0.88rem;

    font-family: inherit;

    outline: none;

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

}

#visao-lista .search-box input:focus,

#visao-lista select.form-input:focus {

    border-color: var(--accent);

    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);

}

#visao-lista .search-box input::placeholder {

    color: var(--text-muted);

}

#visao-lista select.form-input {

    cursor: pointer;

    appearance: auto;

}



#view-fornecedores .filter-group {

    display: flex;

    gap: 0.35rem;

    flex-wrap: wrap;

    align-items: center;

}

#view-fornecedores .filter-btn {

    padding: 0.4rem 0.75rem;

    border-radius: 20px;

    border: 1px solid var(--border);

    background: var(--surface);

    color: var(--text-secondary);

    font-size: 0.8rem;

    font-weight: 500;

    cursor: pointer;

    font-family: inherit;

    transition: all 0.15s;

    display: inline-flex;

    align-items: center;

    gap: 0.35rem;

    white-space: nowrap;

}

#view-fornecedores .filter-btn:hover {

    border-color: var(--vc-green);

    color: var(--vc-green);

    background: var(--vc-green-ghost);

}

#view-fornecedores .filter-btn.active {

    background: var(--vc-green-soft);

    border-color: var(--vc-green-light);

    color: var(--vc-green-dark);

    font-weight: 600;

}

#view-fornecedores .filter-btn .counter-badge {

    background: rgba(58, 92, 85, 0.1);

    padding: 0.05rem 0.45rem;

    border-radius: 10px;

    font-size: 0.7rem;

    font-weight: 600;

    color: var(--vc-green);

}

#view-fornecedores .filter-btn.active .counter-badge {

    background: rgba(58, 92, 85, 0.2);

}

#view-fornecedores .filter-btn.filter-tipo-btn.active {

    background: var(--vc-green-soft);

    border-color: var(--vc-green-light);

    color: var(--vc-green-dark);

}



#view-fornecedores .fornecedores-grid {

    display: grid;

    grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));

    gap: 0.85rem;

}



#view-fornecedores .fornecedor-card {

    background: var(--surface);

    border: 1px solid var(--border-light);

    border-radius: var(--radius);

    padding: 1.1rem;

    cursor: pointer;

    transition: all 0.2s ease;

    box-shadow: var(--shadow-sm);

    display: flex;

    flex-direction: column;

    gap: 0.6rem;

    position: relative;

    overflow: hidden;

    animation: fornecedorFadeIn 0.3s ease-out;

}

@keyframes fornecedorFadeIn {

    from { opacity: 0; transform: translateY(8px); }

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

}

#view-fornecedores .fornecedor-card::before {

    content: '';

    position: absolute;

    left: 0;

    top: 0;

    bottom: 0;

    width: 4px;

    background: var(--text-muted);

    border-radius: 0 2px 2px 0;

}

#view-fornecedores .fornecedor-card.homologado::before {

    background: var(--success);

}

#view-fornecedores .fornecedor-card.nao-homologado::before {

    background: var(--warning);

}

#view-fornecedores .fornecedor-card:hover {

    box-shadow: var(--shadow);

    transform: translateY(-2px);

    border-color: var(--border);

}



/* Ações rápidas — incorporadas ao card-topo (sem position absolute) */

#view-fornecedores .card-acoes {

    display: flex;

    align-items: center;

    gap: 0.15rem;

    opacity: 0;

    transition: opacity 0.2s ease;

    flex-shrink: 0;

    margin-left: auto;

    padding-left: 0.5rem;

}

#view-fornecedores .fornecedor-card:hover .card-acoes {

    opacity: 1;

}

#view-fornecedores .btn-card-action {

    width: 30px;

    height: 30px;

    border-radius: 8px;

    border: none;

    background: transparent;

    color: var(--text-muted);

    display: flex;

    align-items: center;

    justify-content: center;

    cursor: pointer;

    transition: all 0.15s;

    position: relative;

}

#view-fornecedores .btn-card-action svg {

    width: 16px;

    height: 16px;

    stroke: currentColor;

    fill: none;

    stroke-width: 1.8;

    stroke-linecap: round;

    stroke-linejoin: round;

}

#view-fornecedores .btn-card-action:hover {

    background: rgba(0,0,0,0.05);

    color: var(--text);

}

#view-fornecedores .btn-card-action.danger:hover {

    background: rgba(239,68,68,0.08);

    color: #DC2626;

}

#view-fornecedores .btn-card-action:active {

    transform: scale(0.92);

}



#view-fornecedores .card-topo {

    display: flex;

    align-items: center;

    gap: 0.75rem;

}

#view-fornecedores .card-avatar {

    width: 40px;

    height: 40px;

    border-radius: 10px;

    display: flex;

    align-items: center;

    justify-content: center;

    color: #fff;

    font-weight: 700;

    font-size: 0.85rem;

    flex-shrink: 0;

}

#view-fornecedores .card-nome-area {

    flex: 1;

    min-width: 0;

}

#view-fornecedores .card-nome {

    font-weight: 600;

    font-size: 0.95rem;

    color: var(--text);

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;

}

#view-fornecedores .card-pessoa-contato {

    font-size: 0.75rem;

    color: var(--text-muted);

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;

}

#view-fornecedores .card-updated {

    font-size: 0.68rem;

    color: var(--text-muted);

    margin-top: 0.1rem;

    opacity: 0.7;

}



#view-fornecedores .card-badges {

    display: flex;

    flex-wrap: wrap;

    gap: 0.35rem;

}

#view-fornecedores .badge {

    padding: 0.2rem 0.55rem;

    border-radius: 10px;

    font-size: 0.7rem;

    font-weight: 600;

    display: inline-flex;

    align-items: center;

    gap: 0.2rem;

    white-space: nowrap;

}

#view-fornecedores .badge-pj {

    background: #EEF2FF;

    color: #4338CA;

}

#view-fornecedores .badge-pf {

    background: #F0FDF4;

    color: #166534;

}

#view-fornecedores .badge-homologado {

    background: #ECFDF5;

    color: #059669;

}

#view-fornecedores .badge-nao-homologado {

    background: #FFF7ED;

    color: #D97706;

}

#view-fornecedores .badge-categoria {

    background: #F5F3FF;

    color: #6D28D9;

}

#view-fornecedores .badge-ativo {

    background: #ECFDF5;

    color: #059669;

}

#view-fornecedores .badge-inativo {

    background: #FEF2F2;

    color: #DC2626;

}



#view-fornecedores .card-info {

    display: flex;

    flex-direction: column;

    gap: 0.25rem;

    font-size: 0.82rem;

    color: var(--text-secondary);

}

#view-fornecedores .card-info-row {

    display: flex;

    align-items: center;

    gap: 0.4rem;

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;

}

#view-fornecedores .card-info-row .icon {

    flex-shrink: 0;

    font-size: 0.75rem;

    opacity: 0.7;

}



#view-fornecedores .card-obs {

    font-size: 0.78rem;

    color: var(--text-muted);

    font-style: italic;

    padding-top: 0.4rem;

    border-top: 1px solid var(--border-light);

    line-height: 1.4;

}



#view-fornecedores .empty-state {

    grid-column: 1 / -1;

    text-align: center;

    padding: 3rem 2rem;

    color: var(--text-muted);

}

#view-fornecedores .empty-state .big-icon {

    font-size: 3rem;

    margin-bottom: 0.75rem;

    opacity: 0.5;

}

#view-fornecedores .empty-state p {

    font-size: 0.9rem;

}

#view-fornecedores .empty-state .vazio-busca {

    font-size: 0.85rem;

    color: var(--text-muted);

    margin-top: 0.5rem;

}



/* ─── BOTÃO NOVO FORNECEDOR MODERNO ─── */

#view-fornecedores .btn-novo-fornecedor {

    display: inline-flex;

    align-items: center;

    gap: 0.5rem;

    padding: 0.5rem 1.1rem 0.5rem 0.75rem;

    background: linear-gradient(135deg, #1a365d 0%, #2d4a7c 100%);

    color: #fff;

    border: none;

    border-radius: 10px;

    font-size: 0.85rem;

    font-weight: 600;

    font-family: inherit;

    cursor: pointer;

    transition: all 0.2s ease;

    box-shadow: 0 2px 8px rgba(26,54,93,0.2);

    white-space: nowrap;

}

#view-fornecedores .btn-novo-fornecedor:hover {

    transform: translateY(-1px);

    box-shadow: 0 4px 14px rgba(26,54,93,0.3);

    background: linear-gradient(135deg, #1e3a6a 0%, #3358a0 100%);

}

#view-fornecedores .btn-novo-fornecedor:active {

    transform: translateY(0);

    box-shadow: 0 1px 4px rgba(26,54,93,0.2);

}

#view-fornecedores .btn-novo-fornecedor .btn-icon-circle {

    width: 24px;

    height: 24px;

    border-radius: 6px;

    background: rgba(255,255,255,0.15);

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 1rem;

    line-height: 1;

    transition: background 0.2s;

}

#view-fornecedores .btn-novo-fornecedor:hover .btn-icon-circle {

    background: rgba(255,255,255,0.25);

}



/* ─── MODAL DE FORNECEDORES ─── */

#modal-fornecedor .form-grid {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 0.85rem;

}

#modal-fornecedor .form-grid .full {

    grid-column: 1 / -1;

}

#modal-fornecedor .form-group {

    display: flex;

    flex-direction: column;

    gap: 0.3rem;

}

#modal-fornecedor .form-group label {

    font-size: 0.78rem;

    font-weight: 600;

    color: var(--text-secondary);

    text-transform: uppercase;

    letter-spacing: 0.02em;

}

#modal-fornecedor .form-group input,

#modal-fornecedor .form-group select,

#modal-fornecedor .form-group textarea {

    padding: 0.5rem 0.7rem;

    border: 1px solid var(--border-input);

    border-radius: var(--radius-sm, 6px);

    background: var(--surface);

    color: var(--text);

    font-size: 0.88rem;

    font-family: inherit;

    outline: none;

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

}

#modal-fornecedor .form-group input:focus,

#modal-fornecedor .form-group select:focus,

#modal-fornecedor .form-group textarea:focus {

    border-color: var(--vc-green);

    box-shadow: 0 0 0 3px rgba(58, 92, 85, 0.08);

}

#modal-fornecedor .form-group textarea {

    min-height: 70px;

    resize: vertical;

}

#modal-fornecedor .checkbox-label {

    display: inline-flex;

    align-items: center;

    gap: 0.5rem;

    font-size: 0.85rem;

    font-weight: 500;

    text-transform: none;

    letter-spacing: 0;

    cursor: pointer;

    color: var(--text);

    padding: 0.4rem 0;

}

#modal-fornecedor .checkbox-label input[type="checkbox"] {

    width: 16px;

    height: 16px;

    accent-color: var(--vc-green);

    cursor: pointer;

}



#modal-fornecedor .modal-tabs {

    display: flex;

    gap: 0.35rem;

    border-bottom: 1px solid var(--border-light);

    padding-bottom: 0.65rem;

    margin-bottom: 1rem;

    flex-wrap: wrap;

}

#modal-fornecedor .modal-tab {

    padding: 0.45rem 0.9rem;

    border-radius: var(--radius-sm, 6px);

    border: 1px solid transparent;

    background: transparent;

    color: var(--text-secondary);

    font-size: 0.82rem;

    font-weight: 500;

    cursor: pointer;

    transition: all 0.15s;

    font-family: inherit;

}

#modal-fornecedor .modal-tab:hover {

    background: var(--bg-hover, rgba(0,0,0,0.03));

    color: var(--text);

}

#modal-fornecedor .modal-tab.active {

    background: var(--vc-green-soft);

    border-color: var(--vc-green-light);

    color: var(--vc-green-dark);

    font-weight: 600;

}

#modal-fornecedor .tab-panel {

    display: none;

}

#modal-fornecedor .tab-panel.active {

    display: block;

}

#modal-fornecedor .cep-loading {

    font-size: 0.75rem;

    color: var(--text-muted);

    display: none;

}

#modal-fornecedor .cep-loading.visible {

    display: inline;

}

#modal-fornecedor .cep-error {

    font-size: 0.75rem;

    color: var(--danger);

    display: none;

}

#modal-fornecedor .cep-error.visible {

    display: inline;

}



/* ─── RESPONSIVO ─── */

@media (max-width: 768px) {

    #view-fornecedores .fornecedores-grid {

        grid-template-columns: 1fr;

    }

    #view-fornecedores .toolbar {

        flex-direction: column;

        align-items: stretch;

    }

    #view-fornecedores .search-box {

        max-width: none;

    }

    #modal-fornecedor .form-grid {

        grid-template-columns: 1fr;

    }

}









html { font-size: 15px; }

body {

    font-family: 'Inter', system-ui, -apple-system, sans-serif;

    background: var(--bg);

    color: var(--text);

    min-height: 100vh;

    line-height: 1.5;

}



/* ─── LAYOUT BASE (SIDEBAR) ───────────────────────────────────────────── */

body { display: flex; height: 100vh; overflow: hidden; }



/* ─── SIDEBAR ──────────────────────────────────────────────────────────── */

.sidebar {

    width: 250px;

    min-width: 250px;

    height: 100vh;

    position: sticky;

    top: 0;

    left: 0;

    background: linear-gradient(180deg, var(--vc-green-dark) 0%, var(--vc-green) 100%);

    display: flex;

    flex-direction: column;

    z-index: 100;

    box-shadow: 2px 0 16px rgba(0,0,0,0.15);

    overflow-y: auto;

}



/* Brand */

.sidebar-brand {

    padding: 1.5rem 1.25rem 1rem;

    border-bottom: 1px solid rgba(255,255,255,0.1);

    display: flex;

    align-items: center;

    gap: 0.75rem;

}

.sidebar-logo {

    width: 36px; height: 36px;

    border-radius: 10px;

    background: rgba(255,255,255,0.12);

    display: flex;

    align-items: center;

    justify-content: center;

    color: #fff;

    flex-shrink: 0;

}

.sidebar-brand-text { display: flex; flex-direction: column; }

.sidebar-brand-name {

    font-weight: 700;

    font-size: 0.9rem;

    color: #fff;

    letter-spacing: -0.2px;

    line-height: 1.1;

}

.sidebar-brand-sub {

    font-size: 0.6rem;

    color: rgba(255,255,255,0.5);

    letter-spacing: 1px;

    text-transform: uppercase;

    font-weight: 500;

}



/* Navigation */

.sidebar-nav {

    flex: 1;

    padding: 0.75rem 0.75rem;

    display: flex;

    flex-direction: column;

    gap: 0.15rem;

}

.sidebar-section-label {

    font-size: 0.65rem;

    text-transform: uppercase;

    letter-spacing: 1.2px;

    color: rgba(255,255,255,0.35);

    font-weight: 600;

    padding: 0.85rem 0.6rem 0.35rem;

}

.sidebar-link {

    display: flex;

    align-items: center;

    gap: 0.7rem;

    padding: 0.55rem 0.65rem;

    border-radius: var(--radius-xs);

    text-decoration: none;

    color: rgba(255,255,255,0.7);

    font-size: 0.85rem;

    font-weight: 500;

    transition: all 0.15s;

    border: 1px solid transparent;

}

.sidebar-link svg { 

    flex-shrink: 0; 

    opacity: 0.7;

    transition: opacity 0.15s;

}

.sidebar-link:hover {

    color: #fff;

    background: rgba(255,255,255,0.1);

}

.sidebar-link:hover svg { opacity: 1; }

.sidebar-link.active {

    color: #fff;

    background: rgba(255,255,255,0.18);

    font-weight: 600;

    border-color: rgba(255,255,255,0.12);

}

.sidebar-link.active svg { opacity: 1; }



/* Link especial: Minhas Tarefas */

.sidebar-link-timer {

    font-weight: 600;

}

/* Link especial: Relatorios */

.sidebar-link-relatorio {

    color: rgba(255,223,0,0.9);

}

.sidebar-link-relatorio:hover {

    color: #FFD700;

    background: rgba(255,223,0,0.1);

}

.sidebar-link-relatorio.active {

    color: #FFD700;

    background: rgba(255,223,0,0.15);

}



/* Footer / User switcher */

.sidebar-footer {

    padding: 0.75rem 0.75rem 1rem;

    border-top: 1px solid rgba(255,255,255,0.1);

}

.sidebar-user {

    display: flex;

    align-items: center;

    gap: 0.5rem;

}

.sidebar-user-avatar {

    width: 28px; height: 28px;

    border-radius: 50%;

    background: rgba(255,255,255,0.15);

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 0.8rem;

    flex-shrink: 0;

}

.sidebar-user-select {

    flex: 1;

    padding: 0.4rem 0.5rem;

    border-radius: var(--radius-xs);

    border: 1px solid rgba(255,255,255,0.2);

    background: rgba(255,255,255,0.08);

    color: rgba(255,255,255,0.85);

    font-size: 0.8rem;

    font-family: inherit;

    cursor: pointer;

    min-width: 0;

}

.sidebar-user-select:focus { 

    outline: none; 

    border-color: rgba(255,255,255,0.4); 

}

.sidebar-user-select option { 

    color: var(--text); 

    background: #fff; 

}



/* ─── MAIN CONTENT ─────────────────────────────────────────────────────── */

#app {

    flex: 1;

    min-width: 0;
    min-height: 0;

    padding: 1.5rem 2rem;

    overflow-x: hidden;

    height: 100vh;

    overflow-y: auto;

}

.view { display: none; width: 100%; }

.view.active { display: block; width: 100%; }



/* ─── PROJETO DETALHE: cabeçalho + abas fixos, só as tarefas rolam ─────── */
#view-projeto-detalhe.active {
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
/* topo fixo (nao rola) */
#view-projeto-detalhe > .page-header {
    position: static;
    margin-top: 0;
    flex-shrink: 0;
}
#view-projeto-detalhe > .projeto-tabs {
    flex-shrink: 0;
}
/* cada aba ativa ocupa o resto e rola por dentro */
#view-projeto-detalhe > .tab-content.active {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
}
/* aba Tarefas (a que tem a tabela): meta + filtros fixos, so as linhas rolam */
#view-projeto-detalhe > .tab-content.active:has(> .table-wrapper) {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
#view-projeto-detalhe > .tab-content.active > .projeto-meta,
#view-projeto-detalhe > .tab-content.active > .pd-toolbar {
    flex-shrink: 0;
}
#view-projeto-detalhe > .tab-content.active > .table-wrapper {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
}
/* cabecalho da tabela fixo enquanto as linhas rolam */
#view-projeto-detalhe .tarefas-table thead th {
    position: sticky;
    top: 0;
    z-index: 5;
    background: #f3f7f6;
}



/* ─── PAGE HEADER ───────────────────────────────────────────────────────── */

.page-header {

    display: flex;

    align-items: center;

    justify-content: space-between;

    margin-bottom: 1.5rem;

    gap: 1rem;

    flex-wrap: wrap;

    position: sticky;

    top: 0;

    z-index: 30;

    background: var(--bg);

    margin-top: -1.5rem;

    padding-top: 1.5rem;

}

.page-header h1 { font-size: 1.5rem; font-weight: 700; color: var(--text); }

.page-header h2 { font-size: 1.2rem; font-weight: 600; color: var(--text); }



/* ─── FILTROS BAR (toolbar v4) ────────────────────────────────────────── */

.pd-toolbar {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}

.pd-toolbar .tb-row1 {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    flex-wrap: wrap;
}

.pd-toolbar input,
.pd-toolbar select {

    padding: 0.5rem 0.75rem;

    border-radius: var(--radius-sm);

    border: 1px solid var(--border-input);

    background: var(--surface);

    color: var(--text);

    font-size: 0.9rem;

    font-family: inherit;

    box-shadow: var(--shadow-sm);

    transition: border-color 0.15s;

}

.pd-toolbar input:focus,

.pd-toolbar select:focus {

    outline: none;

    border-color: var(--vc-green);

}



/* ─── BUTTONS ───────────────────────────────────────────────────────────── */

.btn {

    padding: 0.5rem 1rem;

    border-radius: var(--radius-sm);

    border: none;

    font-weight: 600;

    font-size: 0.85rem;

    cursor: pointer;

    font-family: inherit;

    transition: all 0.15s;

    display: inline-flex;

    align-items: center;

    gap: 0.35rem;

}

.btn-primary { background: var(--vc-green); color: #fff; }

.btn-primary:hover { background: var(--vc-green-dark); }

.btn-secondary { 

    background: var(--surface); 

    color: var(--text); 

    border: 1px solid var(--border);

    box-shadow: var(--shadow-sm);

}

.btn-secondary:hover { background: var(--surface-hover); }

.btn-ghost { background: transparent; color: var(--text-secondary); }

.btn-ghost:hover { color: var(--text); background: var(--surface-hover); }

.btn-success { background: var(--success); color: #fff; }

.btn-success:hover { opacity: 0.9; }

.btn-danger { background: var(--danger); color: #fff; }

.btn-danger:hover { background: var(--danger-hover); }

.btn-danger-outline {

    background: transparent;

    color: var(--danger);

    border: 1px solid var(--danger);

}

.btn-danger-outline:hover { background: var(--danger-soft); }

.btn-sm { padding: 0.3rem 0.65rem; font-size: 0.78rem; }



/* ─── CARDS ─────────────────────────────────────────────────────────────── */

.card {

    background: var(--surface);

    border: 1px solid var(--border-light);

    border-radius: var(--radius);

    padding: 1.25rem;

    transition: all 0.15s;

    display: flex;

    flex-direction: column;

    justify-content: space-between;

    box-shadow: var(--shadow-sm);

}

.card:hover { box-shadow: var(--shadow); border-color: var(--border); }

.card-projeto { cursor: pointer; }

.card-body { flex: 1; }

.card-body h4 { font-size: 1rem; font-weight: 600; color: var(--text); margin-bottom: 0.35rem; }

.card-info {

    display: flex;

    flex-wrap: wrap;

    gap: 0.75rem;

    font-size: 0.85rem;

    color: var(--text-secondary);

    margin-bottom: 0.5rem;

}

.card-meta {

    display: flex;

    flex-wrap: wrap;

    gap: 0.75rem;

    font-size: 0.8rem;

    color: var(--text-secondary);

    align-items: center;

    margin-top: 0.5rem;

}

.card-obs { font-style: italic; color: var(--text-secondary); max-width: 300px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.card-actions {

    display: flex;

    gap: 0.35rem;

    margin-top: 0.75rem;

    padding-top: 0.75rem;

    border-top: 1px solid var(--border-light);

    justify-content: flex-end;

}

.card-grid {

    display: grid;

    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));

    gap: 1rem;

}



/* ─── DASHBOARD ─────────────────────────────────────────────────────────── */

.stats-grid {

    display: grid;

    grid-template-columns: repeat(4, 1fr);

    gap: 1rem;

    margin-bottom: 1.5rem;

}

.stat-card {

    background: var(--surface);

    border: 1px solid var(--border-light);

    border-radius: var(--radius);

    padding: 1.5rem 1.25rem;

    text-align: center;

    box-shadow: var(--shadow-sm);

}

.stat-value { font-size: 2rem; font-weight: 700; color: var(--vc-green); }

.stat-label { font-size: 0.8rem; color: var(--text-muted); margin-top: 0.25rem; text-transform: uppercase; letter-spacing: 0.5px; font-weight: 600; }



.dash-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }

.dash-card {

    background: var(--surface);

    border: 1px solid var(--border-light);

    border-radius: var(--radius);

    padding: 1.25rem;

    box-shadow: var(--shadow-sm);

}



/* ═══ DASHBOARD REDESIGN ═══ */

.page-subtitle { color: var(--vc-muted); font-size: 0.875rem; margin-top: -0.5rem; margin-bottom: 1.25rem; }



/* Stat Cards Row */

.dash-stats-row {

    display: grid;

    grid-template-columns: repeat(4, 1fr);

    gap: 1rem;

    margin-bottom: 1.25rem;

}

.dash-stat-card {

    background: var(--vc-surface);

    border: 1px solid var(--vc-border);

    border-radius: 12px;

    padding: 1.25rem;

    display: flex;

    align-items: center;

    gap: 1rem;

    transition: all 0.2s;

}

.dash-stat-card.clickable { cursor: pointer; }

.dash-stat-card.clickable:hover {

    transform: translateY(-2px);

    box-shadow: 0 8px 25px rgba(0,0,0,0.1);

    border-color: var(--vc-green);

}

.dash-stat-icon {

    width: 56px; height: 56px;

    border-radius: 14px;

    display: flex;

    align-items: center;

    justify-content: center;

    flex-shrink: 0;

}

.dash-stat-body { display: flex; flex-direction: column; }

.dash-stat-num { font-size: 1.75rem; font-weight: 700; color: var(--vc-text); line-height: 1.1; }

.dash-stat-label { font-size: 0.8rem; color: var(--vc-muted); margin-top: 2px; }



/* Bar List (substitui badge-list) */

.bar-list { display: flex; flex-direction: column; gap: 0.5rem; }

.bar-item { }

.bar-label { display: flex; justify-content: space-between; font-size: 0.8rem; margin-bottom: 3px; color: var(--vc-text); }

.bar-label strong { color: var(--vc-green); }

.bar-track { height: 6px; background: var(--vc-bg); border-radius: 3px; overflow: hidden; }

.bar-fill { height: 100%; background: var(--vc-green); border-radius: 3px; transition: width 0.6s ease; min-width: 4px; }

.bar-value-out { font-size: 0.75rem; color: var(--vc-sub); white-space: nowrap; margin-left: 8px; min-width: 50px; }



/* Horas */

.horas-display { display: flex; gap: 1.5rem; margin-bottom: 0.75rem; }

.horas-item { text-align: center; }

.horas-num { font-size: 2rem; font-weight: 700; display: block; }

.horas-unit { font-size: 0.75rem; color: var(--vc-muted); }

.horas-item.realizadas .horas-num { color: var(--vc-green); }

.horas-item.estimadas .horas-num { color: var(--vc-accent-blue, #3498DB); }

.horas-bar-wrapper { height: 8px; background: var(--vc-bg); border-radius: 4px; overflow: hidden; margin-top: 0.25rem; }

.horas-bar { height: 100%; border-radius: 4px; transition: width 0.8s ease; }



/* ═══ PRAZOS ═══ */

.prazos-display { display: flex; gap: 2rem; margin-bottom: 0.75rem; }

.prazos-item { text-align: center; }

.prazos-num { font-size: 2rem; font-weight: 700; display: block; }

.prazos-label { font-size: 0.75rem; color: var(--vc-muted); }

.prazos-item.no-prazo .prazos-num { color: #27AE60; }

.prazos-item.atrasados .prazos-num { color: #E74C3C; }

.prazos-bar-wrapper { 

    display: flex; height: 10px; border-radius: 5px; overflow: hidden;

    background: var(--vc-bg);

}

.prazos-bar-ok { height: 100%; background: #27AE60; transition: width 0.8s ease; }

.prazos-bar-atraso { height: 100%; background: #E74C3C; transition: width 0.8s ease; }



/* ═══ TENDENCIA ═══ */

.dash-tendencia { font-size: 0.72rem; font-weight: 600; margin-left: 4px; }

.tend-up { color: #27AE60; }

.tend-down { color: #E74C3C; }



/* Urgent Tasks */

.dash-urgent { margin: 1rem 0; background: #FFFBF0; border: 1px solid #F0D060; border-radius: 12px; overflow: hidden; }

.dash-urgent-header { padding: 0.75rem 1rem; background: #FFF3CD; }

.dash-urgent-header h3 { margin:0; font-size:0.9rem; color:#856404; }

.dash-urgent-body { padding: 0.5rem 1rem; }

.urgent-group { margin-bottom: 0.5rem; }

.urgent-label { font-size: 0.8rem; font-weight: 600; margin-bottom: 0.3rem; }

.urgent-label.vencida { color: #C0392B; }

.urgent-label.vencendo { color: #D4AC0D; }

.urgent-item { 

    display: flex; justify-content: space-between; align-items: center;

    padding: 0.5rem 0.75rem; border-radius: 8px; cursor: pointer;

    transition: background 0.15s;

}

.urgent-item:hover { background: #FEF9E7; }

.urgent-titulo { font-size: 0.85rem; font-weight: 500; color: var(--vc-text); max-width: 60%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.urgent-meta { font-size: 0.72rem; color: var(--vc-muted); max-width: 35%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: right; }

.urgent-more { font-size: 0.75rem; color: var(--vc-muted); padding: 0.25rem 0.75rem; }



.dash-card h3 { font-size: 0.8rem; font-weight: 600; color: var(--text-muted); margin-bottom: 0.75rem; text-transform: uppercase; letter-spacing: 0.6px; }

.horas-display { display: flex; gap: 1.5rem; }

.horas-num { font-size: 1.5rem; font-weight: 700; color: var(--text); display: block; }

.horas-unit { font-size: 0.8rem; color: var(--text-secondary); }

.badge-list { display: flex; flex-wrap: wrap; gap: 0.4rem; }

.badge {

    padding: 0.25rem 0.6rem;

    border-radius: 100px;

    font-size: 0.8rem;

    font-weight: 500;

}

.badge-projeto { background: var(--vc-green-soft); color: var(--vc-green); }

.badge-etapa { background: var(--success-soft); color: var(--success); }



/* ─── PROJETO META ──────────────────────────────────────────────────────── */

.projeto-meta {

    display: flex;

    flex-wrap: wrap;

    gap: 1rem;

    margin-bottom: 1rem;

    padding: 0.75rem 1rem;

    background: var(--surface);

    border: 1px solid var(--border-light);

    border-radius: var(--radius-sm);

    font-size: 0.85rem;

    color: var(--text-secondary);

    box-shadow: var(--shadow-sm);

}

.projeto-meta strong { color: var(--text); }



/* ─── STATUS TAGS ───────────────────────────────────────────────────────── */

.status-tag {

    padding: 0.2rem 0.55rem;

    border-radius: 100px;

    font-size: 0.72rem;

    font-weight: 600;

    white-space: nowrap;

}

.status-em-andamento { background: var(--warning-soft); color: #B45309; }

.status-concluido { background: var(--success-soft); color: #047857; }

.status-suspenso { background: #F1F5F9; color: #64748B; }

.status-cancelado { background: var(--danger-soft); color: #B91C1C; }

.status-planejada { background: #F1F5F9; color: #64748B; }

.status-concluida { background: var(--success-soft); color: #047857; }



/* ─── PRIORIDADE ────────────────────────────────────────────────────────── */

.prioridade {

    padding: 0.15rem 0.5rem;

    border-radius: 100px;

    font-size: 0.72rem;

    font-weight: 600;

}

.prioridade-baixa { background: #F1F5F9; color: #64748B; }

.prioridade-media { background: var(--warning-soft); color: #B45309; }

.prioridade-alta { background: var(--danger-soft); color: #B91C1C; }



.prioridade-tag {

    padding: 0.15rem 0.5rem;

    border-radius: 100px;

    font-size: 0.7rem;

    font-weight: 600;

}

.prioridade-alta { background: var(--danger-soft); color: #B91C1C; }

.prioridade-media { background: var(--warning-soft); color: #B45309; }

.prioridade-baixa { background: #F1F5F9; color: #64748B; }



/* ─── PROGRESSO ─────────────────────────────────────────────────────────── */

.progresso-bar {

    height: 6px;

    background: #F1F5F9;

    border-radius: 3px;

    overflow: hidden;

}

.progresso-fill {

    height: 100%;

    background: var(--vc-green);

    border-radius: 3px;

    transition: width 0.3s;

}



/* ─── TABLE ─────────────────────────────────────────────────────────────── */

.table-wrapper { overflow-x: auto; }

.tarefas-table {

    width: 100%;

    border-collapse: collapse;

    font-size: 0.85rem;

}

.tarefas-table th {

    text-align: left;

    padding: 0.6rem 0.75rem;

    border-bottom: 2px solid var(--border);

    color: var(--text-muted);

    font-weight: 600;

    font-size: 0.75rem;

    text-transform: uppercase;

    letter-spacing: 0.5px;

    white-space: nowrap;

    background: var(--vc-green-ghost);

}

.tarefas-table td {

    padding: 0.55rem 0.75rem;

    border-bottom: 1px solid var(--border-light);

    vertical-align: middle;

    color: var(--text-secondary);

}

.tarefas-table tr:hover { background: var(--vc-green-ghost); }

.row-concluida { opacity: 0.5; }



.row-atrasada {

    background: rgba(255, 68, 68, 0.06) !important;

    border-left: 3px solid #ff4444;

}



.row-atrasada:hover {

    background: rgba(255, 68, 68, 0.12) !important;

}



.row-atrasada .gt-horas-display {

    color: #ff4444;

    font-weight: 700;

}



.row-atrasada .data-fim-cell {

    color: #ff4444;

    font-weight: 600;

}

.titulo-cell { max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.acao-cell { white-space: nowrap; text-align: right; }

.link-cell { color: var(--vc-green); text-decoration: none; cursor: pointer; font-weight: 500; }

.link-cell:hover { text-decoration: underline; color: var(--vc-green-dark); }



/* ─── EMPTY STATE ───────────────────────────────────────────────────────── */



/* ═══════════════════════════════════

   RESUMO DE HORAS

   ═══════════════════════════════════ */

.resumo-horas {

    display: inline-flex;

    gap: 8px;

    margin-left: auto;

    align-items: center;

}

.horas-badge {

    display: inline-flex;

    align-items: center;

    gap: 4px;

    padding: 3px 10px;

    border-radius: 20px;

    font-size: 0.8rem;

    font-weight: 600;

    white-space: nowrap;

}

.horas-badge.horas-est {

    background: #e8f4fd;

    color: #1a73e8;

    border: 1px solid #c5e0f7;

}

.horas-badge.horas-real {

    background: #e6f7e6;

    color: #1e8e3e;

    border: 1px solid #b7e1b7;

}



/* Resumo de horas na GT */

.gt-resumo-horas {

    display: flex;

    gap: 8px;

    padding: 8px 4px;

    align-items: center;

    flex-wrap: wrap;

}



/* Lancamento de horas no modal */

.lancamento-horas {

    margin-top: 8px;

    padding-top: 12px;

    border-top: 1px dashed var(--vc-border);

}

.lancamento-input-group {

    display: flex;

    gap: 8px;

    align-items: center;

}

.lancamento-input-group input {

    padding: 8px 12px;

    border: 2px solid var(--vc-border);

    border-radius: 8px;

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

    color: var(--vc-text);

    font-size: 14px;

}

.lancamento-input-group input:focus {

    border-color: var(--vc-blue);

    outline: none;

}

.btn-lancar-horas {

    padding: 8px 16px;

    background: var(--vc-green);

    color: white;

    border: none;

    border-radius: 8px;

    cursor: pointer;

    font-weight: 600;

    font-size: 13px;

    white-space: nowrap;

    transition: all 0.2s;

}

.btn-lancar-horas:hover {

    filter: brightness(1.1);

    transform: translateY(-1px);

}

.btn-lancar-horas:active {

    transform: translateY(0);

}



/* Horas inline no titulo da tarefa */

.horas-inline {

    display: inline-block;

    margin-left: 8px;

    padding: 1px 8px;

    border-radius: 10px;

    font-size: 0.7rem;

    font-weight: 600;

    background: #f0f4f8;

    color: #475569;

    border: 1px solid #e2e8f0;

    white-space: nowrap;

    vertical-align: middle;

}



/* Garantir que a tabela tenha scroll horizontal se necessário */

.table-wrapper {

    overflow-x: auto;

    -webkit-overflow-scrolling: touch;

}



/* Colunas de horas com largura fixa minima */

.col-horas {

    white-space: nowrap;

    font-variant-numeric: tabular-nums;

}

.empty-state {

    text-align: center;

    padding: 3rem 1rem;

    color: var(--text-muted);

}

.empty-state p { margin-bottom: 1rem; }



/* ─── MODAIS ────────────────────────────────────────────────────────────── */

.modal-overlay {

    display: none;

    position: fixed;

    inset: 0;

    background: rgba(15,23,42,0.5);

    backdrop-filter: blur(4px);

    z-index: 200;

    align-items: center;

    justify-content: center;

}

.modal-overlay.active,

.modal-overlay.open { display: flex; }

.modal {

    background: var(--surface);

    border: 1px solid var(--border-light);

    border-radius: var(--radius);

    width: 90%;

    max-width: 540px;

    max-height: 90vh;

    overflow-y: auto;

    box-shadow: var(--shadow-lg);

}

.modal-sm { max-width: 400px; }

.modal-header {

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding: 1rem 1.25rem;

    border-bottom: 1px solid var(--border-light);

}

.modal-header h3 { font-size: 1.05rem; font-weight: 600; color: var(--text); }

.modal-close {

    background: none;

    border: none;

    color: var(--text-muted);

    font-size: 1.5rem;

    cursor: pointer;

    padding: 0;

    line-height: 1;

}

.modal-close:hover { color: var(--text); }

.modal-body { padding: 1.25rem; overflow: visible; }

.modal-box {

    background: #ffffff;

    color: var(--text, #1E293B);

    border: 1px solid var(--border, rgba(0,0,0,0.1));

    border-radius: 12px;

    box-shadow: 0 8px 32px rgba(0,0,0,0.15);

}

.modal-box select { appearance: auto; position: relative; z-index: 1; }

.modal-box select:focus { z-index: 9999; }

.modal-footer {

    display: flex;

    justify-content: flex-end;

    gap: 0.5rem;

    padding: 1rem 1.25rem;

    border-top: 1px solid var(--border-light);

}



/* ─── FORM ──────────────────────────────────────────────────────────────── */

.form-group { margin-bottom: 1rem; }

.form-group label {

    display: block;

    font-size: 0.78rem;

    font-weight: 600;

    color: var(--text-muted);

    margin-bottom: 0.3rem;

    text-transform: uppercase;

    letter-spacing: 0.5px;

}

.form-group input,

.form-group select,

.form-group textarea {

    width: 100%;

    padding: 0.5rem 0.75rem;

    border-radius: var(--radius-sm);

    border: 1px solid var(--border-input);

    background: var(--surface);

    color: var(--text);

    font-size: 0.9rem;

    font-family: inherit;

    transition: border-color 0.15s;

}

.form-group input:focus,

.form-group select:focus,

.form-group textarea:focus {

    outline: none;

    border-color: var(--vc-green);

}

.form-group textarea { resize: vertical; }

.form-row {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 1rem;

}

@media (max-width: 600px) {

    .form-row { grid-template-columns: 1fr; }

}



/* ─── TOAST ─────────────────────────────────────────────────────────────── */

.toast {

    position: fixed;

    bottom: 1.5rem;

    right: 1.5rem;

    padding: 0.75rem 1.25rem;

    border-radius: var(--radius-sm);

    background: var(--text);

    color: #fff;

    font-size: 0.85rem;

    font-weight: 500;

    z-index: 300;

    opacity: 0;

    transform: translateY(10px);

    transition: all 0.25s;

    pointer-events: none;

    box-shadow: var(--shadow-lg);

}

.toast.show { opacity: 1; transform: translateY(0); }

.toast-error { background: var(--danger); }

.toast-success { background: var(--success); }



/* ─── TIMER BAR ─────────────────────────────────────────────────────────── */

.timer-bar {

    background: var(--vc-green-dark);

    color: #fff;

    padding: 0.3rem 1.5rem;

    position: fixed;

    top: 0;

    left: 250px;

    right: 0;

    z-index: 99;

    box-shadow: 0 2px 8px rgba(0,0,0,0.15);

    height: 34px;

    display: flex;

    align-items: center;

}

.timer-bar-content {

    display: flex;

    align-items: center;

    justify-content: space-between;

    max-width: 100%;

    height: 100%;

}

.timer-bar-left { display: flex; align-items: center; gap: 0.6rem; }

.timer-dot {

    width: 8px; height: 8px;

    background: #fff;

    border-radius: 50%;

    animation: pulse-dot 1.5s infinite;

}

@keyframes pulse-dot {

    0%, 100% { opacity: 1; }

    50% { opacity: 0.4; }

}

.timer-label { font-weight: 600; font-size: 0.85rem; }

.timer-project { font-size: 0.78rem; opacity: 0.8; }

.timer-bar-center { }

.timer-clock { font-size: 1.1rem; font-weight: 700; font-variant-numeric: tabular-nums; }

.timer-bar-right { }



/* ─── MINHAS TAREFAS (timer.js) ─────────────────────────────────────────── */

#view-minhas-tarefas .page-header h1 { font-size: 1.4rem; }



.mt-capacity-wrapper {

    background: var(--surface);

    border: 1px solid var(--border-light);

    border-radius: var(--radius-sm);

    padding: 0.75rem 1rem;

    margin-bottom: 1rem;

    box-shadow: var(--shadow-sm);

}



.mt-capacity {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 0.75rem;

    margin-bottom: 0.5rem;

}

.mt-capacity-label { font-weight: 600; font-size: 0.78rem; color: var(--text-secondary); white-space: nowrap; }

.mt-capacity-bar {

    flex: 1;

    height: 8px;

    background: #F1F5F9;

    border-radius: 100px;

    overflow: hidden;

}

.mt-capacity-fill {

    height: 100%;

    background: var(--vc-green);

    border-radius: 100px;

    transition: width 0.4s ease;

}

.mt-capacity-fill.overload { background: var(--danger); }

.mt-capacity-pct { font-weight: 700; font-size: 0.85rem; color: var(--vc-green); white-space: nowrap; }

.mt-capacity-text { font-size: 0.72rem; color: var(--text-muted); white-space: nowrap; display: block; margin-top: 0.25rem; }



.mt-lista {

    display: flex;

    flex-direction: column;

    gap: 0.5rem;

}



.mt-card {

    display: flex;

    align-items: center;

    gap: 0.75rem;

    padding: 0.75rem 1rem;

    background: var(--surface);

    border: 1px solid var(--border-light);

    border-left: 3px solid transparent;

    border-radius: var(--radius-sm);

    transition: all 0.15s;

    box-shadow: var(--shadow-sm);

    margin-bottom: 0.5rem;

}

.mt-card:hover {

    border-left-color: var(--vc-green);

    box-shadow: var(--shadow);

    border-color: var(--border);

}

.mt-card.timer-active {

    border-left-color: var(--vc-green);

    background: var(--vc-green-ghost);

}

.mt-card.prioridade-alta { border-left-color: var(--danger); }

.mt-card.prioridade-media { border-left-color: var(--vc-gold); }

.mt-card.prioridade-baixa { /* default */ }



.mt-play-btn {

    width: 34px; height: 34px;

    border-radius: 50%;

    border: 1.5px solid var(--border);

    background: transparent;

    font-size: 0.85rem;

    cursor: pointer;

    display: flex;

    align-items: center;

    justify-content: center;

    transition: all 0.15s;

    flex-shrink: 0;

    color: var(--vc-green);

    font-family: inherit;

    padding: 0;

    line-height: 1;

}

.mt-play-btn:hover { background: var(--vc-green-soft); border-color: var(--vc-green); }

.mt-play-btn.running { background: var(--vc-green); color: #fff; border-color: var(--vc-green); animation: pulse-play 2s infinite; }



@keyframes pulse-play {

    0%, 100% { box-shadow: 0 0 0 0 rgba(58,92,85,0.3); }

    50% { box-shadow: 0 0 0 8px rgba(58,92,85,0); }

}



.mt-card-body { flex: 1; min-width: 0; }

.mt-card-titulo {

    font-weight: 600; font-size: 0.85rem; color: var(--text);

    white-space: normal; word-break: break-word; line-height: 1.3;

    margin-bottom: 3px;

}

.mt-card-meta {

    display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap;

    font-size: 0.72rem; color: var(--text-muted);

}

.projeto-link { color: var(--vc-green); font-weight: 500; }



.mt-card-tempo { text-align: right; flex-shrink: 0; }

.mt-tempo-total { font-weight: 600; font-size: 0.85rem; color: var(--text); }

.mt-tempo-label { font-size: 0.65rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; }



/* ─── TIMESHEET ────────────────────────────────────────────────────────── */

.timesheet-table {

    width: 100%;

    border-collapse: collapse;

    font-size: 0.85rem;

}

.timesheet-table th {

    text-align: left;

    padding: 0.6rem 0.75rem;

    border-bottom: 2px solid var(--border);

    color: var(--text-muted);

    font-weight: 600;

    font-size: 0.75rem;

    text-transform: uppercase;

    letter-spacing: 0.5px;

    background: var(--vc-green-ghost);

}

.timesheet-table td {

    padding: 0.55rem 0.75rem;

    border-bottom: 1px solid var(--border-light);

}

.timesheet-table tr:hover { background: var(--vc-green-ghost); }

.tempo-cell { font-weight: 600; }



/* ─── RESPONSIVE ────────────────────────────────────────────────────────── */

@media (max-width: 1024px) {

    .stats-grid { grid-template-columns: repeat(2, 1fr); }

    .dash-row { grid-template-columns: 1fr 1fr; }

    .card-grid { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }

}



@media (max-width: 768px) {

    .sidebar { width: 190px; min-width: 190px; }

    .sidebar-brand-name { font-size: 0.75rem; }

    .sidebar-brand-sub { display: none; }

    .sidebar-link { font-size: 0.75rem; padding: 0.45rem 0.45rem; gap: 0.45rem; }

    .sidebar-link svg { width: 15px; height: 15px; }

    .stats-grid { grid-template-columns: 1fr 1fr; }

    .dash-row { grid-template-columns: 1fr; }

    .dash-stats-row { grid-template-columns: repeat(2, 1fr); }

    #app { padding: 1rem; }

}



@media (max-width: 500px) {

    .sidebar { width: 140px; min-width: 140px; }

    .sidebar-brand { padding: 1rem 0.75rem 0.75rem; }

    .sidebar-brand-text { display: none; }

    .sidebar-logo { width: 30px; height: 30px; }

    .sidebar-link { font-size: 0.68rem; padding: 0.4rem 0.35rem; gap: 0.3rem; }

    .sidebar-link svg { width: 14px; height: 14px; }

    .sidebar-section-label { font-size: 0.55rem; padding-left: 0.35rem; }

    .sidebar-footer { padding: 0.5rem; }

    .sidebar-user-avatar { display: none; }

    #app { padding: 0.75rem; }

}



@media (max-width: 500px) {

    .stats-grid { grid-template-columns: 1fr; }

    .card-grid { grid-template-columns: 1fr; }

}



/* ─── CHECKLIST (Subtarefas) ───────────────────────────────────────────── */

.sub-lista { list-style: none; margin-top: 0.5rem; }

.sub-item {

    display: flex; align-items: center; gap: 0.5rem;

    padding: 0.45rem 0.6rem;

    border-bottom: 1px solid var(--border-light);

    font-size: 0.85rem;

    transition: background 0.2s;

    border-radius: 4px;

}
.sub-item:hover { background: rgba(255,255,255,0.04); }
.sub-item.done { opacity: 0.65; }
.sub-icone { font-size: 0.95rem; flex-shrink: 0; }
.sub-texto { flex: 1; }
.sub-status { font-size: 0.72rem; padding: 0.15rem 0.5rem; border-radius: 10px; font-weight: 500; flex-shrink: 0; }
.st-concluida { background: rgba(34,197,94,0.15); color: #22c55e; }
.st-pendente { background: rgba(234,179,8,0.15); color: #eab308; }
.sub-resp { font-size: 0.78rem; color: var(--text-muted); flex-shrink: 0; }
.sub-toggle-btn { font-size: 0.72rem; padding: 0.2rem 0.6rem; border: none; border-radius: 4px; cursor: pointer; font-weight: 500; flex-shrink: 0; transition: all 0.2s; }
.btn-concluir { background: rgba(34,197,94,0.2); color: #22c55e; }
.btn-concluir:hover { background: rgba(34,197,94,0.35); }
.btn-reabrir { background: rgba(99,102,241,0.2); color: #818cf8; }
.btn-reabrir:hover { background: rgba(99,102,241,0.35); }

.sub-item:last-child { border-bottom: none; }

.sub-check {

    width: 18px; height: 18px;

    border: 2px solid var(--border);

    border-radius: 4px;

    cursor: pointer;

    flex-shrink: 0;

    display: flex; align-items: center; justify-content: center;

    font-size: 0.65rem;

    transition: all 0.15s;

    color: transparent;

    background: transparent;

    padding: 0;

}

.sub-check.concluida { background: var(--vc-green); border-color: var(--vc-green); color: #fff; }

.sub-check:hover { border-color: var(--vc-green); }

.sub-titulo { flex: 1; }

.sub-titulo.concluida { text-decoration: line-through; color: var(--text-muted); }

.sub-remover {

    background: none; border: none; color: var(--text-muted);

    cursor: pointer; font-size: 1rem; padding: 0 0.2rem; line-height: 1;

}

.sub-remover:hover { color: var(--danger); }

.sub-add-form { display: flex; gap: 0.4rem; margin-top: 0.5rem; }

.sub-add-form input {

    flex: 1;

    padding: 0.35rem 0.6rem;

    border-radius: var(--radius-xs);

    border: 1px solid var(--border-input);

    font-size: 0.82rem;

    font-family: inherit;

}

.sub-add-form input:focus { outline: none; border-color: var(--vc-green); }

.sub-add-form button {

    padding: 0.35rem 0.65rem;

    border-radius: var(--radius-xs);

    background: var(--vc-green);

    color: #fff;

    border: none;

    font-size: 0.82rem;

    cursor: pointer;

    font-weight: 600;

}





/* Badge de progresso no header das subtarefas */

.sub-header-progress { display: inline-flex; align-items: center; gap: 6px; font-size: 0.75rem; font-weight: 600; color: #64748b; background: #f1f5f9; padding: 2px 10px; border-radius: 12px; margin-left: 8px; }

.sub-header-progress.done { background: #dcfce7; color: #16a34a; }

.sub-header-progress.partial { background: #fef9c3; color: #ca8a04; }



/* Badge de subtarefa na tabela de tarefas do projeto */

.sub-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 28px; height: 22px; padding: 0 6px; border-radius: 10px; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.3px; }

.sub-badge-done { background: #dcfce7; color: #16a34a; }

.sub-badge-pending { background: #fef9c3; color: #ca8a04; }

.sub-badge-empty { background: #f1f5f9; color: #94a3b8; font-weight: 400; }



/* Coluna de subtarefas na tabela */

.col-subtarefas { width: 50px; text-align: center; }



/* ─── CONFIRM MODAL ─────────────────────────────────────────────────────── */

#confirm-msg { font-size: 0.95rem; color: var(--text); }



/* ═════════════════════════════════════════════════════════════════════

   GESTÃO DE TAREFAS (VIEW UNIFICADA)

   ═════════════════════════════════════════════════════════════════════ */



/* ─── HEADER COUNTER ───────────────────────────────────────────────────── */

.header-counter {

    background: var(--vc-green-soft);

    color: var(--vc-green);

    padding: 0.3rem 0.75rem;

    border-radius: 100px;

    font-size: 0.85rem;

    font-weight: 600;

}



/* ─── BADGE TIPO HORA (timer/manual) ─────────────────────────────────── */

.badge-tipo-hora {

    display: inline-block;

    font-size: 0.7rem;

    font-weight: 600;

    padding: 1px 8px;

    border-radius: 10px;

    text-transform: uppercase;

    letter-spacing: 0.3px;

}

.badge-timer {

    background: rgba(59, 130, 246, 0.15);

    color: #3b82f6;

}

.badge-manual {

    background: rgba(16, 185, 129, 0.15);

    color: #10b981;

}



/* ─── FILTROS ──────────────────────────────────────────────────────────── */

.gt-filters {

    display: flex;

    flex-direction: column;

    gap: 0.75rem;

    margin-bottom: 1.25rem;

}



.gt-filters-top {

    display: flex;

    gap: 0.5rem;

    align-items: center;

    flex-wrap: wrap;

}



.gt-search {

    flex: 1;

    min-width: 220px;

    padding: 0.55rem 0.85rem;

    border-radius: var(--radius-sm);

    border: 1px solid var(--border-input);

    background: var(--surface);

    color: var(--text);

    font-size: 0.875rem;

    font-family: inherit;

    box-shadow: var(--shadow-sm);

    transition: border-color 0.15s;

}

.gt-search:focus { outline: none; border-color: var(--vc-green); }



.gt-date-range {

    display: flex;

    align-items: center;

    gap: 0.35rem;

    font-size: 0.8rem;

    color: var(--text-muted);

    white-space: nowrap;

}

.gt-date-range input {

    width: 120px;

    padding: 0.55rem 0.7rem;

    border-radius: var(--radius-sm);

    border: 1px solid var(--border-input);

    background: var(--surface);

    color: var(--text);

    font-size: 0.85rem;

    font-family: inherit;

    box-shadow: var(--shadow-sm);

}

.gt-date-range input:focus { outline: none; border-color: var(--vc-green); }



.btn-dots {

    background: var(--surface);

    border: 1px solid var(--border-input);

    border-radius: var(--radius-sm);

    padding: 0.5rem 0.7rem;

    cursor: pointer;

    font-size: 1rem;

    color: var(--text-secondary);

    box-shadow: var(--shadow-sm);

    transition: all 0.15s;

    line-height: 1;

}

.btn-dots:hover { background: var(--surface-hover); border-color: var(--border); }

.btn-dots.open { background: var(--vc-green-soft); border-color: var(--vc-green); color: var(--vc-green); }



/* ─── FILTROS AVANÇADOS ───────────────────────────────────────────────── */

.gt-filters-advanced {

    display: none;

    flex-wrap: wrap;

    gap: 0.5rem;

    padding: 0.75rem 0;

}

.gt-filters-advanced.open { display: flex; }



.gt-filter-chips {

    display: flex;

    flex-wrap: wrap;

    gap: 0.35rem;

}



.chip {

    display: inline-flex;

    align-items: center;

    gap: 4px;

    padding: 5px 14px;

    border-radius: 20px;

    border: 1px solid var(--border);

    background: var(--surface);

    color: var(--text-secondary);

    font-size: 12px;

    font-weight: 500;

    cursor: pointer;

    transition: all 0.15s;

    white-space: nowrap;

    user-select: none;

}



.chip:hover {

    border-color: var(--vc-green);

    color: var(--text);

    background: var(--surface-hover);

}



.chip.chip-active {

    background: var(--vc-green);

    color: #fff;

    border-color: var(--vc-green);

}



.chip.chip-active:hover {

    background: var(--vc-green-hover);

    border-color: var(--vc-green-hover);

}



.gt-filters-row {

    display: flex;

    flex-wrap: wrap;

    gap: 0.75rem;

    align-items: flex-start;

}



/* ─── MULTI-SELECT DROPDOWN ────────────────────────────────────────────── */

.gt-multi-select {

    position: relative;

    min-width: 160px;

}



.gt-ms-trigger {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 0.4rem;

    padding: 0.5rem 0.75rem;

    border-radius: var(--radius-sm);

    border: 1px solid var(--border-input);

    background: var(--surface);

    color: var(--text);

    font-size: 0.8rem;

    cursor: pointer;

    font-family: inherit;

    box-shadow: var(--shadow-sm);

    transition: border-color 0.15s;

    white-space: nowrap;

    min-width: 140px;

}

.gt-ms-trigger:hover { border-color: var(--vc-green); }

.gt-ms-trigger.open { border-color: var(--vc-green); background: var(--vc-green-ghost); }



.gt-ms-text {

    flex: 1;

    text-align: left;

}



.gt-ms-arrow {

    font-size: 0.7rem;

    color: var(--text-muted);

    transition: transform 0.2s;

}

.gt-ms-trigger.open .gt-ms-arrow { transform: rotate(180deg); }



/* ─── FILTER TAGS (CHIPS) ─────────────────────────────────────────────── */

.filter-tag {

    display: inline-flex;

    align-items: center;

    gap: 0.3rem;

    padding: 0.25rem 0.5rem;

    border-radius: 100px;

    background: var(--vc-green-soft);

    color: var(--vc-green);

    font-size: 0.72rem;

    font-weight: 500;

}

.filter-tag-remove {

    background: none;

    border: none;

    color: var(--vc-green);

    cursor: pointer;

    font-size: 0.85rem;

    padding: 0;

    line-height: 1;

    opacity: 0.6;

    transition: opacity 0.15s;

}

.filter-tag-remove:hover { opacity: 1; }



/* ─── GT TABLE (GESTÃO DE TAREFAS) ────────────────────────────────────── */

.gt-sortable {

    cursor: pointer;

    user-select: none;

    white-space: nowrap;

    transition: background 0.15s;

}

.gt-sortable:hover { background: var(--vc-green-ghost); }

.gt-sort-icon {

    font-size: 0.6rem;

    color: var(--vc-green);

    margin-left: 2px;

}



.gt-table {

    width: 100%;

    table-layout: fixed;

    border-collapse: collapse;

    font-size: 0.85rem;

    background: var(--surface);

    border: 1px solid var(--border-light);

    border-radius: var(--radius);

    box-shadow: var(--shadow-sm);

}



.gt-table thead th {

    text-align: left;

    padding: 0.55rem 0.6rem;

    border-bottom: 2px solid var(--border);

    color: var(--text-muted);

    font-weight: 600;

    font-size: 0.72rem;

    text-transform: uppercase;

    letter-spacing: 0.5px;

    white-space: nowrap;

    background: var(--vc-green-ghost);

    position: relative;

}

.gt-table thead th:last-child {

    position: static;

}



/* Handle de redimensionamento de colunas */

.gt-check {

    width: 28px;

    text-align: center;

    cursor: pointer;

    font-size: 0.9rem;

    color: var(--text-muted);

    transition: color 0.15s;

}

.gt-check:hover { color: var(--vc-green); }

.gt-check.selected { color: var(--vc-green); font-weight: 700; }



.gt-row {

    transition: background 0.1s;

}

.gt-row td {

    padding: 0.5rem 0.6rem;

    border-bottom: 1px solid var(--border-light);

    color: var(--text-secondary);

    vertical-align: middle;

}

.gt-row:hover td { background: var(--vc-green-ghost); }

.gt-row.selected td { background: var(--vc-green-soft); }

.gt-row.row-concluida td { opacity: 0.45; }



.gt-titulo {

    white-space: normal;

    word-break: break-word;

    overflow-wrap: break-word;

    font-weight: 600;

    color: var(--text);

    cursor: pointer;

}

.gt-titulo:hover { color: var(--vc-green); }



.gt-projeto {

    white-space: normal;

    word-break: break-word;

    overflow-wrap: break-word;

    color: var(--vc-green);

    font-weight: 500;

}



.gt-etapa {

    white-space: normal;

    word-break: break-word;

    overflow-wrap: break-word;

}



.gt-dias {

    font-weight: 600;

    text-align: center;

    white-space: normal;

    word-break: break-word;

}

.gt-dias.vencido { color: var(--danger); }

.gt-dias.hoje { color: var(--warning); }

.gt-dias.futuro { color: var(--text-muted); }



.gt-data {

    white-space: normal;

    word-break: break-word;

    font-size: 0.8rem;

}



.gt-horas {

    white-space: normal;

    word-break: break-word;

    font-variant-numeric: tabular-nums;

    text-align: right;

}



.gt-avatar {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    width: 26px;

    height: 26px;

    border-radius: 50%;

    background: var(--vc-green-soft);

    color: var(--vc-green);

    font-size: 0.65rem;

    font-weight: 700;

    text-transform: uppercase;

}



/* ─── GT EDITABLE ─────────────────────────────────────────────────────── */

.gt-editable {

    cursor: text;

    border-radius: 4px;

    padding: 2px 4px;

    margin: -2px -4px;

    transition: background 0.15s;

}

.gt-editable:hover { background: var(--vc-green-ghost); }

.gt-editable.editing { background: var(--vc-green-soft); outline: 1px solid var(--vc-green); }



/* Campos NÃO editáveis inline — apenas visualização */

.gt-static {

    cursor: default;

    opacity: 0.85;

}



/* ─── RESIZE HANDLES — GT Columns ─── */

.gt-resize-handle {

    position: absolute;

    top: 0;

    right: -3px;

    bottom: 0;

    width: 6px;

    cursor: col-resize;

    z-index: 10;

    background: transparent;

}

.gt-resize-handle:hover,

.gt-resize-handle.active {

    background: rgba(34,197,94,0.3);

}

#view-gestao-tarefas .table-wrapper.gt-scroll-top table th {

    position: relative;

}

/* Linha-guia durante o resize */

.gt-resize-guide {

    position: fixed;

    top: 0;

    bottom: 0;

    width: 1px;

    background: #22c55e;

    z-index: 9999;

    pointer-events: none;

    display: none;

}



/* ─── GT CONTEXT MENU ─────────────────────────────────────────────────── */

.gt-context-menu {

    display: none;

    position: absolute;

    background: var(--surface);

    border: 1px solid var(--border);

    border-radius: 10px;

    box-shadow: 0 8px 24px rgba(0,0,0,0.18);

    z-index: 9999;

    padding: 6px;

    min-width: 200px;

    animation: menuFadeIn 0.15s ease;

}

@keyframes menuFadeIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }

.gt-context-menu.open { display: block; }



.gt-context-menu button {

    display: flex;

    align-items: center;

    gap: 10px;

    width: 100%;

    padding: 10px 14px;

    border: none;

    background: transparent;

    color: var(--text);

    font-size: 0.875rem;

    cursor: pointer;

    border-radius: 7px;

    transition: background 0.12s;

    text-align: left;

}

.gt-context-menu button:hover { background: var(--hover); }

.gt-context-menu button svg { flex-shrink: 0; opacity: 0.55; }

.gt-context-menu .menu-item:hover { background: var(--vc-green-ghost); }

.gt-context-menu .menu-item.danger { color: var(--danger); }

.gt-context-menu .gt-menu-divider {

    height: 1px;

    background: var(--border);

    margin: 4px 0;

}

.gt-context-menu .gt-menu-danger {

    color: #ef4444 !important;

}

.gt-context-menu .gt-menu-danger:hover {

    background: #fef2f2 !important;

    color: #dc2626 !important;

}



/* ─── GT DATA VENCIDA ─────────────────────────────────────────────────── */

.gt-vencida, .gt-vencida .gt-editable { color: var(--danger) !important; font-weight: 600; }



/* ─── GT ACTIONS (BUTTON ROW ABOVE TABLE) ─────────────────────────────── */

.gt-actions {

    display: flex;

    align-items: center;

    gap: 0.5rem;

    margin-bottom: 0.75rem;

    flex-wrap: wrap;

}



/* ─── GT SELECTION BAR ────────────────────────────────────────────────── */

.gt-selection-bar {

    display: none;

    align-items: center;

    gap: 0.5rem;

    padding: 0.5rem 0.75rem;

    background: var(--vc-green-soft);

    border: 1px solid var(--vc-green);

    border-radius: var(--radius-sm);

    margin-bottom: 0.75rem;

    font-size: 0.82rem;

    color: var(--vc-green);

    font-weight: 500;

}

.gt-selection-bar.has-selection { display: flex; }



/* ─── PRIORIDADES NA GT ───────────────────────────────────────────────── */

.prio-alta { color: var(--danger); font-weight: 600; }

.prio-media { color: var(--warning); font-weight: 600; }

.prio-baixa { color: var(--text-muted); font-weight: 500; }



/* ─── RESPONSIVO GT ───────────────────────────────────────────────────── */

@media (max-width: 900px) {

    .gt-table { font-size: 0.78rem; }

    .gt-table thead th { padding: 0.4rem 0.4rem; font-size: 0.65rem; }

    .gt-row td { padding: 0.4rem 0.4rem; }

    .gt-titulo { max-width: 120px; }

    .gt-projeto { max-width: 100px; }

}



/* ─── GT MULTI-SELECT DROPDOWN ──────────────────────────────────────── */

.gt-ms-dropdown {

    display: none;

    position: absolute;

    top: 100%;

    left: 0;

    margin-top: 2px;

    background: var(--surface);

    border: 1px solid var(--border);

    border-radius: var(--radius-sm);

    box-shadow: var(--shadow-lg);

    z-index: 260;

    min-width: 200px;

    max-height: 240px;

    overflow-y: auto;

    padding: 0.35rem 0;

}

.gt-multi-select.open .gt-ms-dropdown { display: block; }

.gt-ms-dropdown label {

    display: flex;

    align-items: center;

    gap: 0.4rem;

    padding: 0.35rem 0.75rem;

    font-size: 0.8rem;

    color: var(--text);

    cursor: pointer;

    transition: background 0.1s;

}

.gt-ms-dropdown label:hover { background: var(--vc-green-ghost); }

.gt-ms-dropdown input[type="checkbox"] {

    accent-color: var(--vc-green);

    width: 14px;

    height: 14px;

}



/* ─── GT ACTIVE TAGS ────────────────────────────────────────────────── */

.gt-active-tags {

    display: flex;

    flex-wrap: wrap;

    gap: 0.35rem;

    padding-top: 0.25rem;

}



/* ─── GT TABLE WRAPPER ──────────────────────────────────────────────── */

.table-wrapper {

    overflow-x: auto;

    border-radius: var(--radius);

    border: 1px solid var(--border-light);

    box-shadow: var(--shadow-sm);

}



/* ─── STATUS TAGS ───────────────────────────────────────────────────── */

.status-tag {

    display: inline-flex;

    align-items: center;

    padding: 0.2rem 0.55rem;

    border-radius: 100px;

    font-size: 0.72rem;

    font-weight: 600;

    white-space: nowrap;

    letter-spacing: 0.2px;

}

.status-planejada     { background: #E8EDF2; color: #4A6275; }

.status-em-andamento  { background: #FEF3C7; color: #B45309; }

.status-concluida     { background: #D1FAE5; color: #065F46; }

.status-revisao       { background: #EDE9FE; color: #5B21B6; }

.status-suspenso      { background: #FEE2E2; color: #991B1B; }

.status-cancelado     { background: #F3F4F6; color: #6B7280; text-decoration: line-through; }



/* ─── PRIORIDADE TAGS ───────────────────────────────────────────────── */

.prioridade-tag {

    display: inline-flex;

    align-items: center;

    font-size: 0.8rem;

    font-weight: 600;

    white-space: nowrap;

}

.prioridade-tag.prio-alta  { color: var(--danger); }

.prioridade-tag.prio-media { color: var(--warning); }

.prioridade-tag.prio-baixa { color: var(--text-muted); }



/* ─── GT INLINE EDIT ────────────────────────────────────────────────── */

.gt-inline-input, .gt-inline-select {

    width: 100%;

    padding: 0.35rem 0.45rem;

    border: 2px solid var(--vc-green);

    border-radius: 4px;

    font-size: 0.82rem;

    font-family: inherit;

    color: var(--text);

    background: var(--surface);

    outline: none;

}



/* Botao calendario no inline-edit de data */

.gt-cal-btn {

    background: rgba(255,255,255,0.1);

    border: 1px solid rgba(255,255,255,0.2);

    border-radius: 6px;

    color: #A0B0C0;

    cursor: pointer;

    padding: 4px 6px;

    display: flex;

    align-items: center;

    justify-content: center;

    transition: all 0.2s;

    flex-shrink: 0;

}

.gt-cal-btn:hover {

    background: rgba(255,255,255,0.2);

    color: #fff;

}

.gt-cal-icon {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    width: 24px; height: 24px;

    cursor: pointer;

    color: var(--text-secondary);

    flex-shrink: 0;

    border-radius: 4px;

    transition: all 0.15s;

}

.gt-cal-icon:hover { color: var(--vc-green); background: var(--vc-green-soft); }

.gt-date-picker {

    width: 28px; height: 28px;

    padding: 0; margin: 0;

    border: none; outline: none;

    background: transparent;

    cursor: pointer;

    flex-shrink: 0;

}

.gt-date-picker::-webkit-datetime-edit { display: none; }

.gt-date-picker::-webkit-calendar-picker-indicator { opacity: 1; margin: 0; padding: 0; }

.gt-date-overlay {

    position: absolute;

    top: 0; left: 0;

    width: 100%; height: 100%;

    opacity: 0.01;

    cursor: pointer;

    border: none;

}

.gt-date-only {

    width: 34px; height: 32px;

    padding: 0; margin: 0;

    border: none; outline: none;

    background: transparent;

    cursor: pointer;

    font-size: 0;

    color: transparent;

}

.gt-date-only::-webkit-datetime-edit { display: none; }

.gt-date-only::-webkit-calendar-picker-indicator { 

    opacity: 1; margin: 0; padding: 2px; 

    width: 24px; height: 24px; cursor: pointer; 

}

    width: 34px; height: 32px;

    padding: 0; margin: 0;

    border: none; outline: none;

    background: transparent;

    cursor: pointer;

    font-size: 0;

    color: transparent;

}

.gt-date-only::-webkit-datetime-edit { display: none; }

.gt-date-only::-webkit-calendar-picker-indicator { 

    opacity: 1; margin: 0; padding: 2px; 

    width: 24px; height: 24px; cursor: pointer; 

}



.gt-inline-select {

    cursor: pointer;

    appearance: auto;

}



/* ─── GT ROW STATUS ─────────────────────────────────────────────────── */

.gt-row.row-concluida td { opacity: 0.45; }



/* ═════════════════════════════════════════════════════════════════════

   DASHBOARD SEMANAL

   ═════════════════════════════════════════════════════════════════════ */



/* ─── KPI GRID (5 COLUNAS) ──────────────────────────────────────────── */

.stats-grid-5 {

    display: grid;

    grid-template-columns: repeat(5, 1fr);

    gap: 0.75rem;

    margin-bottom: 1.5rem;

}

@media (max-width: 900px) {

    .stats-grid-5 { grid-template-columns: repeat(3, 1fr); }

}

@media (max-width: 600px) {

    .stats-grid-5 { grid-template-columns: repeat(2, 1fr); }

}



/* ─── SEMANA NAV ────────────────────────────────────────────────────── */

.ds-semana-nav {

    display: flex;

    align-items: center;

    gap: 0.5rem;

}



.ds-semana-label {

    font-weight: 600;

    font-size: 0.9rem;

    color: var(--text);

    padding: 0.25rem 0.75rem;

    background: var(--vc-green-ghost);

    border-radius: var(--radius-xs);

    white-space: nowrap;

}



/* ─── CHARTS ROW ────────────────────────────────────────────────────── */

.ds-charts-row {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 1rem;

    margin-bottom: 1.5rem;

}

@media (max-width: 800px) {

    .ds-charts-row { grid-template-columns: 1fr; }

}



.ds-chart-card {

    min-height: 180px;

}

.ds-chart-card h3 {

    text-transform: uppercase;

    letter-spacing: 0.5px;

    font-size: 0.75rem;

}



/* ─── BARRAS (HORIZONTAIS) ──────────────────────────────────────────── */

.ds-barras {

    display: flex;

    flex-direction: column;

    gap: 0.6rem;

    margin-top: 0.5rem;

}



.ds-bar-row {

    display: flex;

    align-items: center;

    gap: 0.5rem;

}



.ds-bar-label {

    font-size: 0.78rem;

    color: var(--text-secondary);

    min-width: 110px;

    max-width: 130px;

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;

    text-align: right;

    font-weight: 500;

}



.ds-bar-track {

    flex: 1;

    height: 22px;

    background: #F1F5F9;

    border-radius: 4px;

    overflow: hidden;

    position: relative;

}



.ds-bar-fill {

    height: 100%;

    background: var(--vc-green);

    border-radius: 4px;

    font-size: 0.7rem;

    color: #fff;

    font-weight: 600;

    display: flex;

    align-items: center;

    justify-content: flex-end;

    padding-right: 6px;

    min-width: fit-content;

    transition: width 0.4s ease;

    white-space: nowrap;

}



/* ─── SECTIONS ──────────────────────────────────────────────────────── */

.ds-section {

    margin-bottom: 1.25rem;

}



.ds-section-title {

    font-size: 0.9rem;

    font-weight: 700;

    color: var(--text);

    margin-bottom: 0.6rem;

    padding-bottom: 0.4rem;

    border-bottom: 2px solid var(--border-light);

}



/* ─── GRUPOS (ACCORDION) ────────────────────────────────────────────── */

.ds-empty {

    color: var(--text-muted);

    font-size: 0.85rem;

    font-style: italic;

    padding: 1rem;

    text-align: center;

    background: var(--surface);

    border: 1px solid var(--border-light);

    border-radius: var(--radius-sm);

}



.ds-grupo {

    background: var(--surface);

    border: 1px solid var(--border-light);

    border-radius: var(--radius-sm);

    margin-bottom: 0.4rem;

    overflow: hidden;

    box-shadow: var(--shadow-sm);

}



.ds-grupo-header {

    display: flex;

    align-items: center;

    gap: 0.5rem;

    padding: 0.55rem 0.75rem;

    cursor: pointer;

    user-select: none;

    transition: background 0.1s;

    font-size: 0.85rem;

}

.ds-grupo-header:hover { background: var(--vc-green-ghost); }

.ds-grupo-header strong { color: var(--text); }



.ds-grupo-toggle {

    font-size: 0.65rem;

    color: var(--text-muted);

    transition: transform 0.15s;

    width: 14px;

    text-align: center;

}



.ds-grupo-count {

    font-size: 0.72rem;

    color: var(--text-muted);

    background: #F8FAFC;

    padding: 0.15rem 0.5rem;

    border-radius: 100px;

    font-weight: 500;

}



.ds-grupo-body { }

.ds-grupo-body.ds-collapsed { display: none; }



/* ─── TABELA INTERNA DO GRUPO ───────────────────────────────────────── */

.ds-tabela {

    width: 100%;

    border-collapse: collapse;

    font-size: 0.82rem;

}



.ds-tabela thead th {

    text-align: left;

    padding: 0.5rem 0.75rem;

    background: var(--vc-green-ghost);

    color: var(--text-muted);

    font-weight: 600;

    font-size: 0.7rem;

    text-transform: uppercase;

    letter-spacing: 0.4px;

    border-bottom: 1px solid var(--border-light);

}



.ds-tabela td {

    padding: 0.45rem 0.75rem;

    border-bottom: 1px solid var(--border-light);

    color: var(--text-secondary);

    vertical-align: middle;

}



.ds-tabela tr:last-child td { border-bottom: none; }

.ds-tabela tbody tr:hover { background: var(--vc-green-ghost); }

.ds-tabela small {

    color: var(--text-muted);

    font-size: 0.75rem;

    margin-left: 0.35rem;

}



/* BOTAO REGISTRO MANUAL DE HORAS */

.gt-btn-reg-horas {

    display: inline-flex; align-items: center; justify-content: center;

    width: 20px; height: 20px; border-radius: 50%;

    background: var(--vc-green); color: #fff; border: none;

    font-size: 14px; font-weight: 700; cursor: pointer;

    line-height: 1; padding: 0; margin-left: 4px;

    transition: transform .15s, background .15s;

}

.gt-btn-reg-horas:hover { transform: scale(1.15); background: var(--vc-dark); }



.gt-btn-timer-play {

    display: inline-flex; align-items: center; justify-content: center;

    width: 20px; height: 20px; border-radius: 50%;

    background: var(--vc-gold); color: #fff; border: none;

    font-size: 11px; cursor: pointer;

    line-height: 1; padding: 0; margin-left: 2px;

    transition: transform .15s, background .15s;

}

.gt-btn-timer-play:hover { transform: scale(1.15); background: #b89530; }



/* Botao de pausa verde quando o timer esta rodando */

.gt-btn-timer-pause {

    display: inline-flex; align-items: center; justify-content: center;

    width: 20px; height: 20px; border-radius: 50%;

    background: #10b981; color: #fff; border: none;

    font-size: 11px; cursor: pointer;

    line-height: 1; padding: 0; margin-left: 2px;

    transition: transform .15s, background .15s;

}

.gt-btn-timer-pause:hover { transform: scale(1.15); background: #059669; }



/* MODAL REGISTRO HORAS */

#modal-horas { align-items: flex-start; justify-content: flex-start; }

#modal-horas .modal-box { max-width: 420px; }

#modal-horas .form-group { margin-bottom: 0.6rem; }

#modal-horas .form-group label { display: block; font-size: 0.78rem; color: var(--vc-mid); margin-bottom: 0.25rem; }



/* ═══════════════════════════════════════════════════════════════

   DROPDOWN CUSTOMIZADO (substitui <select> nativo nas celulas)

   ═══════════════════════════════════════════════════════════════ */

.gt-custom-dropdown {

    position: relative;

    display: block;

    width: 100%;

    cursor: pointer;

    font-size: 0.82rem;

    z-index: 1;

}

.gt-custom-dropdown.open {

    z-index: 999;

}

.gt-custom-dropdown-trigger {

    padding: 4px 28px 4px 8px;

    border: 1px dashed var(--vc-green);

    border-radius: 6px;

    background: var(--surface);

    color: var(--text);

    font-family: inherit;

    font-size: 0.82rem;

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;

    min-height: 30px;

    display: flex;

    align-items: center;

    position: relative;

    transition: border-color 0.15s;

    width: 100%;

    box-sizing: border-box;

}

.gt-custom-dropdown.open .gt-custom-dropdown-trigger {

    border-style: solid;

    border-color: var(--vc-green);

    border-radius: 6px 6px 0 0;

    background: var(--vc-green-ghost);

}

.gt-custom-dropdown-trigger::after {

    content: '';

    position: absolute;

    right: 8px;

    top: 50%;

    transform: translateY(-50%);

    width: 0; height: 0;

    border-left: 5px solid transparent;

    border-right: 5px solid transparent;

    border-top: 6px solid var(--text-muted);

}

.gt-custom-dropdown.open .gt-custom-dropdown-trigger::after {

    border-top: none;

    border-bottom: 6px solid var(--text-muted);

}

.gt-custom-dropdown-options {

    display: none;

    position: absolute;

    top: 100%;

    left: 0;

    right: 0;

    background: var(--surface);

    border: 1px solid var(--vc-green);

    border-top: none;

    border-radius: 0 0 8px 8px;

    box-shadow: 0 8px 20px rgba(0,0,0,0.12);

    max-height: 220px;

    overflow-y: auto;

    overflow-x: hidden;

    z-index: 999;

    width: 100%;

    box-sizing: border-box;

}

.gt-custom-dropdown.open .gt-custom-dropdown-options {

    display: block;

}

.gt-custom-dropdown-option {

    padding: 7px 10px;

    font-size: 0.82rem;

    color: var(--text);

    cursor: pointer;

    transition: background 0.1s;

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;

    width: 100%;

    box-sizing: border-box;

}

.gt-custom-dropdown-option:hover {

    background: var(--vc-green-soft);

}

.gt-custom-dropdown-option.selected {

    background: var(--vc-green-ghost);

    color: var(--vc-green);

    font-weight: 600;

}

.gt-custom-dropdown-option.empty-option {

    color: var(--text-muted);

    font-style: italic;

}



/* ═══ SIDEBAR SUBMENU ═══ */

.sidebar-group {

    margin-bottom: 0.25rem;

}

.sidebar-parent {

    position: relative;

    cursor: pointer;

}

.sidebar-arrow {

    margin-left: auto;

    font-size: 0.7rem;

    transition: transform 0.2s;

    opacity: 0.6;

}

.sidebar-group.open .sidebar-arrow {

    transform: rotate(180deg);

}

.sidebar-sub {

    display: none;

    padding-left: 1.5rem;

}

.sidebar-group.open .sidebar-sub {

    display: block;

}

.sidebar-sub-link {

    font-size: 0.78rem;

    padding: 0.4rem 0.75rem;

    opacity: 0.85;

}

.sidebar-sub-link:hover {

    opacity: 1;

}

.sidebar-link.sidebar-sub-link.active {

    color: var(--vc-green-light);

    font-weight: 600;

    opacity: 1;

    background: var(--vc-green-ghost);

    border-radius: 4px;

}



/* ═══ GESTAO DE HORAS ═══ */

.gh-control-bar {

    display: flex;

    align-items: center;

    gap: 1rem;

    margin-bottom: 1.25rem;

    flex-wrap: wrap;

}

.gh-agrupar {

    display: flex;

    align-items: center;

    gap: 0.5rem;

    background: var(--card);

    border: 1px solid var(--border);

    border-radius: 8px;

    padding: 0.35rem 0.75rem;

}

.gh-label {

    font-size: 0.8rem;

    font-weight: 600;

    color: var(--text-muted);

    white-space: nowrap;

}

.gh-agrupar-select {

    background: transparent;

    border: none;

    color: var(--text);

    font-size: 0.85rem;

    font-weight: 500;

    cursor: pointer;

    padding: 0.15rem 0.25rem;

    outline: none;

}

.gh-agrupar-select option {

    background: var(--card);

    color: var(--text);

}

.gh-filtros {

    display: flex;

    align-items: center;

    gap: 0.5rem;

    flex-wrap: wrap;

}

.gh-select {

    background: var(--card);

    border: 1px solid var(--border);

    color: var(--text);

    padding: 0.4rem 0.75rem;

    border-radius: 6px;

    font-size: 0.82rem;

    min-width: 200px;

}

.gh-date {

    background: var(--card);

    border: 1px solid var(--border);

    color: var(--text);

    padding: 0.4rem 0.6rem;

    border-radius: 6px;

    font-size: 0.82rem;

    width: 145px;

}

.gh-filtros .btn {

    height: 32px;

    padding: 0 1rem;

    font-size: 0.8rem;

}



/* Cards de resumo */

.gh-cards {

    display: grid;

    grid-template-columns: repeat(4, 1fr);

    gap: 0.75rem;

    margin-bottom: 1.5rem;

}

.gh-card {

    background: var(--card);

    border: 1px solid var(--border);

    border-radius: 10px;

    padding: 1rem;

    text-align: center;

}

.gh-card-label {

    display: block;

    font-size: 0.7rem;

    color: var(--text-muted);

    text-transform: uppercase;

    letter-spacing: 0.3px;

    margin-bottom: 0.4rem;

}

.gh-card-val {

    display: block;

    font-size: 1.5rem;

    font-weight: 700;

}

.gh-card-blue { color: #3b82f6; }

.gh-card-green { color: #10b981; }

.gh-card-orange { color: #f59e0b; }



/* Grafico */

.gh-chart-wrapper {

    background: var(--card);

    border: 1px solid var(--border);

    border-radius: 10px;

    padding: 1.25rem;

}

.gh-chart-title {

    font-size: 0.85rem;

    font-weight: 600;

    color: var(--text);

    margin: 0 0 1rem 0;

}

.gh-chart {

    display: flex;

    align-items: flex-end;

    gap: 0.75rem;

    height: 260px;

    padding: 0 0.5rem;

    overflow-x: auto;

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

}

.gh-chart-empty {

    color: var(--text-muted);

    font-size: 0.82rem;

    align-self: center;

    width: 100%;

    text-align: center;

}

.gh-bar-group {

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 0.3rem;

    min-width: 80px;

    flex-shrink: 0;

}

.gh-bar-val {

    font-size: 0.65rem;

    font-weight: 600;

    color: var(--text);

    white-space: nowrap;

}

.gh-bar {

    width: 42px;

    background: linear-gradient(180deg, var(--vc-green-light), var(--vc-green));

    border-radius: 4px 4px 0 0;

    min-height: 2px;

    transition: height 0.4s ease;

}

.gh-bar-label {

    font-size: 0.6rem;

    color: var(--text-muted);

    text-align: center;

    max-width: 80px;

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;

    line-height: 1.2;

}

.gh-legend {

    display: flex;

    align-items: center;

    gap: 0.4rem;

    margin-top: 0.75rem;

    font-size: 0.7rem;

    color: var(--text-muted);

}

.gh-legend-dot {

    width: 10px;

    height: 10px;

    border-radius: 2px;

}

.gh-legend-green { background: var(--vc-green); }



/* Responsivo */

@media (max-width: 768px) {

    .gh-cards {

        grid-template-columns: repeat(2, 1fr);

    }

    .gh-filtros {

        flex-direction: column;

        align-items: stretch;

    }

    .gh-select, .gh-date {

        width: 100%;

    }

}



.gh-card-red { color: #ef4444 !important; }

.horas-inline { display: none !important; } 



/* VIEW: RELATORIOS */

/* ================================================================

   RELATÓRIO DE OBRAS — VIEW NATIVA (incorporado ao gestor)

   ================================================================ */

#view-relatorios {

    display: none;

    flex-direction: column;

    padding: 0;

    min-height: 70vh;

}

#view-relatorios.active {

    display: flex !important;

}



/* ─── Topo da view ─── */

.relob-topo {

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding: 1rem 1.5rem;

    background: var(--surface);

    border-bottom: 1px solid var(--border-light);

    flex-shrink: 0;

}

.relob-topo h2 {

    margin: 0;

    font-size: 1.3rem;

    color: var(--text);

}

.relob-topo-acoes {

    display: flex;

    gap: 0.5rem;

}



/* ─── Layout principal: lista + editor ─── */

.relob-container {

    display: flex;

    flex: 1;

    min-height: 0;

    height: calc(100vh - 130px);

}

.relob-lista {

    width: 280px;

    min-width: 280px;

    background: var(--surface-alt);

    border-right: 1px solid var(--border-light);

    overflow-y: auto;

    padding: 1rem;

    flex-shrink: 0;

}

.relob-editor {

    flex: 1;

    overflow-y: auto;

    padding: 1.5rem;

    background: var(--bg);

}



/* ─── Lista de relatórios ─── */

.relob-lista h3 {

    font-size: 0.8rem;

    text-transform: uppercase;

    letter-spacing: 0.05em;

    color: var(--text-muted);

    margin: 0 0 0.75rem 0;

}

.relob-card-lista {

    padding: 0.6rem 0.75rem;

    border-radius: var(--radius-sm);

    background: var(--surface);

    border: 1px solid var(--border-light);

    margin-bottom: 0.5rem;

    cursor: pointer;

    transition: all 0.15s;

}

.relob-card-lista:hover {

    border-color: var(--vc-green);

}

.relob-card-lista.active {

    border-color: var(--vc-green);

    background: var(--vc-green-soft);

}

.relob-card-lista-titulo {

    font-size: 0.85rem;

    font-weight: 600;

    color: var(--text);

    margin-bottom: 0.2rem;

}

.relob-card-lista-data {

    font-size: 0.75rem;

    color: var(--text-muted);

}



/* --- Relob: Lista lateral aprimorada --- */

.relob-card-lista {

    display: flex;

    align-items: center;

    gap: 0.6rem;

    padding: 0.65rem 0.75rem;

    margin-bottom: 0.35rem;

    border-radius: 8px;

    cursor: pointer;

    transition: all 0.15s ease;

    border: 1px solid transparent;

    background: transparent;

}

.relob-card-lista:hover {

    background: rgba(58, 92, 85, 0.04);

    border-color: var(--border-light);

}

.relob-card-lista.active {

    background: var(--vc-green-soft, rgba(58, 92, 85, 0.08));

    border-color: var(--vc-green-light, rgba(58, 92, 85, 0.2));

}



.relob-card-lista-icone {

    font-size: 1.15rem;

    flex-shrink: 0;

    opacity: 0.8;

}



.relob-card-lista-conteudo {

    flex: 1;

    min-width: 0;

    line-height: 1.3;

}

.relob-card-lista-titulo {

    font-weight: 600;

    font-size: 0.85rem;

    color: var(--text);

}

.relob-card-lista-projeto {

    font-size: 0.72rem;

    color: var(--text-muted);

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;

}

.relob-card-lista-data {

    font-size: 0.7rem;

    color: var(--text-muted);

    opacity: 0.8;

}

.relob-card-lista-seta {

    font-size: 1.2rem;

    color: var(--text-muted);

    opacity: 0;

    transition: opacity 0.15s;

}

.relob-card-lista:hover .relob-card-lista-seta,

.relob-card-lista.active .relob-card-lista-seta {

    opacity: 0.6;

}



/* --- Relob: Cards na aba do projeto --- */

.relob-grid-projeto {

    display: grid;

    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));

    gap: 0.85rem;

}

.relob-card-projeto {

    background: var(--surface);

    border: 1px solid var(--border-light);

    border-radius: 10px;

    padding: 1.1rem;

    display: flex;

    flex-direction: column;

    gap: 0.6rem;

    transition: all 0.2s ease;

    box-shadow: var(--shadow-sm);

}

.relob-card-projeto:hover {

    box-shadow: var(--shadow);

    transform: translateY(-2px);

    border-color: var(--border);

}

.relob-card-projeto-header {

    display: flex;

    align-items: center;

    gap: 0.5rem;

}

.relob-card-projeto-icone {

    font-size: 1.3rem;

}

.relob-card-projeto-numero {

    font-weight: 600;

    font-size: 0.9rem;

    color: var(--text);

}

.relob-card-projeto-data {

    font-size: 0.8rem;

    color: var(--text-muted);

}

.relob-card-projeto-status {

    margin: 0.2rem 0;

}

.relob-card-projeto-status .badge {

    padding: 0.2rem 0.55rem;

    border-radius: 10px;

    font-size: 0.72rem;

    font-weight: 600;

}

.relob-card-projeto-status .badge-success {

    background: #ECFDF5;

    color: #059669;

}

.relob-card-projeto-status .badge-warning {

    background: #FFF7ED;

    color: #D97706;

}

.relob-card-projeto-acoes {

    display: flex;

    gap: 0.5rem;

    margin-top: auto;

    padding-top: 0.5rem;

}

.relob-card-projeto-acoes .btn-sm {

    padding: 0.35rem 0.75rem;

    font-size: 0.78rem;

    border-radius: 6px;

    font-family: inherit;

    cursor: pointer;

    transition: all 0.15s;

    border: 1px solid var(--border);

}

.relob-card-projeto-acoes .btn-outline {

    background: transparent;

    color: var(--text-secondary);

}

.relob-card-projeto-acoes .btn-outline:hover {

    border-color: var(--vc-green);

    color: var(--vc-green);

}

.relob-card-projeto-acoes .btn-primary {

    background: var(--vc-green, #3a5c55);

    color: #fff;

    border-color: var(--vc-green, #3a5c55);

}

.relob-card-projeto-acoes .btn-primary:hover {

    opacity: 0.9;

}

.relob-card-projeto-acoes .btn-primary:disabled {

    opacity: 0.4;

    cursor: not-allowed;

}





/* ─── Seções do editor ─── */

.relob-section {

    background: var(--surface);

    border: 1px solid var(--border-light);

    border-radius: var(--radius);

    padding: 1.25rem;

    margin-bottom: 1rem;

}

.relob-section-title {

    font-size: 1rem;

    font-weight: 700;

    color: var(--vc-green);

    margin: 0 0 1rem 0;

    display: flex;

    align-items: center;

    gap: 0.5rem;

}



/* ─── Campos de formulário ─── */

.relob-grid {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 0.75rem;

}

.relob-grid-3 {

    display: grid;

    grid-template-columns: 1fr 1fr 1fr;

    gap: 0.75rem;

}

.relob-field {

    display: flex;

    flex-direction: column;

    gap: 0.25rem;

}

.relob-field label {

    font-size: 0.8rem;

    font-weight: 600;

    color: var(--text-muted);

}

.relob-field input,

.relob-field textarea,

.relob-field select {

    padding: 0.5rem 0.75rem;

    border: 1px solid var(--border-light);

    border-radius: var(--radius-sm);

    background: var(--bg);

    color: var(--text);

    font-size: 0.9rem;

    font-family: inherit;

    transition: border-color 0.15s;

}

.relob-field input:focus,

.relob-field textarea:focus,

.relob-field select:focus {

    outline: none;

    border-color: var(--vc-green);

    box-shadow: 0 0 0 2px var(--vc-green-soft);

}

.relob-field textarea {

    resize: vertical;

    min-height: 60px;

}

.relob-field-full {

    grid-column: 1 / -1;

}



/* ─── Lista dinâmica (pauta, alinhamentos, pendências) ─── */

.relob-lista-dinamica {

    display: flex;

    flex-direction: column;

    gap: 0.4rem;

}

.relob-item-lista {

    display: flex;

    align-items: center;

    gap: 0.5rem;

    padding: 0.4rem 0.6rem;

    background: var(--bg);

    border-radius: var(--radius-sm);

    border: 1px solid var(--border-light);

}

.relob-item-lista-texto {

    flex: 1;

    border: none;

    background: transparent;

    color: var(--text);

    font-size: 0.9rem;

    font-family: inherit;

    padding: 0.2rem 0;

}

.relob-item-lista-texto:focus {

    outline: none;

}

.relob-item-lista-btn {

    width: 24px;

    height: 24px;

    border: none;

    background: transparent;

    color: var(--text-muted);

    cursor: pointer;

    border-radius: 4px;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 0.85rem;

    transition: all 0.15s;

    flex-shrink: 0;

}

.relob-item-lista-btn:hover {

    background: var(--danger-soft);

    color: var(--danger);

}

.relob-add-btn {

    display: inline-flex;

    align-items: center;

    gap: 0.35rem;

    padding: 0.4rem 0.75rem;

    border: 1px dashed var(--border-light);

    border-radius: var(--radius-sm);

    background: transparent;

    color: var(--vc-green);

    font-size: 0.85rem;

    font-family: inherit;

    cursor: pointer;

    transition: all 0.15s;

    margin-top: 0.25rem;

}

.relob-add-btn:hover {

    border-color: var(--vc-green);

    background: var(--vc-green-soft);

}



/* ─── Ambientes e fotos ─── */

.relob-ambientes {

    display: flex;

    flex-direction: column;

    gap: 0.75rem;

}

.relob-ambiente-card {

    background: var(--bg);

    border: 1px solid var(--border-light);

    border-radius: var(--radius-sm);

    padding: 0.75rem;

}

.relob-ambiente-header {

    display: flex;

    align-items: center;

    justify-content: space-between;

    margin-bottom: 0.5rem;

}

.relob-ambiente-titulo-input {

    border: none;

    background: transparent;

    color: var(--text);

    font-size: 0.95rem;

    font-weight: 600;

    font-family: inherit;

    flex: 1;

}

.relob-ambiente-titulo-input:focus {

    outline: none;

}

.relob-ambiente-fotos {

    display: flex;

    flex-wrap: wrap;

    gap: 0.5rem;

}

.relob-foto-item {

    position: relative;

    width: 100px;

    height: 80px;

    border-radius: 6px;

    overflow: hidden;

    border: 1px solid var(--border-light);

    cursor: pointer;

}

.relob-foto-item img {

    width: 100%;

    height: 100%;

    object-fit: cover;

}

.relob-foto-remove {

    position: absolute;

    top: 2px;

    right: 2px;

    width: 20px;

    height: 20px;

    background: rgba(0,0,0,0.6);

    color: #fff;

    border: none;

    border-radius: 50%;

    font-size: 0.7rem;

    cursor: pointer;

    display: flex;

    align-items: center;

    justify-content: center;

    line-height: 1;

}

.relob-foto-upload {

    width: 100px;

    height: 80px;

    border: 1px dashed var(--border-light);

    border-radius: 6px;

    display: flex;

    align-items: center;

    justify-content: center;

    color: var(--text-muted);

    font-size: 1.5rem;

    cursor: pointer;

    transition: all 0.15s;

    background: transparent;

}

.relob-foto-upload:hover {

    border-color: var(--vc-green);

    color: var(--vc-green);

}

.relob-foto-descricao {

    width: 100%;

    margin-top: 0.35rem;

    padding: 0.3rem 0.5rem;

    border: 1px solid var(--border-light);

    border-radius: 4px;

    background: var(--surface);

    color: var(--text);

    font-size: 0.8rem;

    font-family: inherit;

    resize: none;

    min-height: 30px;

}

.relob-foto-descricao:focus {

    outline: none;

    border-color: var(--vc-green);

}



/* ─── Botão de ação ─── */

.relob-btn-primary {

    padding: 0.6rem 1.2rem;

    border: none;

    border-radius: var(--radius-sm);

    background: var(--vc-green);

    color: #fff;

    font-weight: 600;

    font-size: 0.9rem;

    font-family: inherit;

    cursor: pointer;

    transition: all 0.15s;

    display: inline-flex;

    align-items: center;

    gap: 0.4rem;

}

.relob-btn-primary:hover {

    background: var(--vc-green-dark);

    transform: translateY(-1px);

}

.relob-btn-secondary {

    padding: 0.6rem 1.2rem;

    border: 1px solid var(--border-light);

    border-radius: var(--radius-sm);

    background: var(--surface);

    color: var(--text);

    font-weight: 500;

    font-size: 0.9rem;

    font-family: inherit;

    cursor: pointer;

    transition: all 0.15s;

    display: inline-flex;

    align-items: center;

    gap: 0.4rem;

}

.relob-btn-secondary:hover {

    border-color: var(--vc-green);

    color: var(--vc-green);

}

.relob-btn-danger {

    padding: 0.6rem 1.2rem;

    border: none;

    border-radius: var(--radius-sm);

    background: var(--danger);

    color: #fff;

    font-weight: 600;

    font-size: 0.9rem;

    font-family: inherit;

    cursor: pointer;

    transition: all 0.15s;

}

.relob-btn-danger:hover {

    opacity: 0.9;

}



/* ─── Estado vazio ─── */

.relob-empty {

    text-align: center;

    padding: 3rem;

    color: var(--text-muted);

}

.relob-empty p {

    font-size: 0.9rem;

    margin: 0.5rem 0;

}

.relob-empty-icon {

    font-size: 3rem;

    margin-bottom: 0.5rem;

}



/* ─── Modal de confirmação ─── */

.relob-modal-overlay {

    position: fixed;

    inset: 0;

    background: rgba(0,0,0,0.4);

    display: none;

    align-items: center;

    justify-content: center;

    z-index: 9999;

}

.relob-modal-overlay.active {

    display: flex;

}

.relob-modal {

    background: var(--surface);

    border: 1px solid var(--border-light);

    border-radius: var(--radius);

    padding: 1.5rem;

    max-width: 400px;

    width: 90%;

    box-shadow: 0 20px 60px rgba(0,0,0,0.3);

}

.relob-modal h3 {

    margin: 0 0 0.5rem 0;

}

.relob-modal p {

    color: var(--text-muted);

    font-size: 0.9rem;

    margin: 0 0 1rem 0;

}

.relob-modal-acoes {

    display: flex;

    gap: 0.5rem;

    justify-content: flex-end;

}



/* === RELATORIO DE OBRA — NOVAS CLASSES (glassmorphism dark) === */

.relob-header-projeto{display:flex;justify-content:space-between;align-items:center;padding:24px 24px 16px 24px;border-bottom:1px solid rgba(255,255,255,0.08);margin-bottom:20px}

.relob-header-projeto h3{margin:0;font-size:1.1rem;font-weight:600;color:var(--text,#e0e0e0)}

.relob-card-projeto-icon{font-size:2rem;margin-bottom:8px}

.relob-card-projeto-body{flex:1}

.relob-card-projeto-titulo{font-weight:600;font-size:0.95rem;color:var(--text,#e0e0e0);margin-bottom:4px}

.relob-card-projeto-status{margin:8px 0}

.relob-badge-pdf{display:inline-block;background:rgba(37,99,235,0.2);color:#60a5fa;font-size:0.75rem;padding:2px 8px;border-radius:10px;font-weight:500}

.relob-badge-rascunho{display:inline-block;background:rgba(251,191,36,0.2);color:#fbbf24;font-size:0.75rem;padding:2px 8px;border-radius:10px;font-weight:500}

.relob-card-projeto-acoes{display:flex;gap:6px;margin-top:10px;padding-top:10px;border-top:1px solid rgba(255,255,255,0.08)}

.relob-btn-sm{padding:5px 12px;border-radius:6px;font-size:0.78rem;cursor:pointer;border:none;font-weight:500;transition:all 0.15s;background:rgba(255,255,255,0.08);color:var(--text,#e0e0e0)}

.relob-btn-sm:hover{background:rgba(255,255,255,0.15)}

.relob-btn-outline{background:transparent;border:1px solid rgba(255,255,255,0.15);color:var(--text,#e0e0e0)}

.relob-btn-outline:hover{background:rgba(255,255,255,0.1)}

.relob-btn-pdf{background:rgba(37,99,235,0.3);color:#60a5fa}

.relob-btn-pdf:hover{background:rgba(37,99,235,0.5)}

.relob-btn-pdf:disabled{opacity:0.4;cursor:not-allowed}

.relob-empty-projeto{text-align:center;padding:80px 20px}

.relob-editor-full{width:100%;max-width:100%;border-left:none;margin:0}

.relob-editor-full .relob-empty{padding:80px 20px}

.relob-breadcrumb{display:none;vertical-align:middle;margin-right:12px;padding:4px 0;font-size:0.85rem}

.relob-breadcrumb a{color:var(--accent,#6c63ff)}

.relob-breadcrumb a:hover{text-decoration:underline!important;opacity:0.85}

.relob-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.55);z-index:9999;display:flex;align-items:center;justify-content:center;backdrop-filter:blur(6px)}

.relob-modal-select{background:rgba(30,30,46,0.95);border-radius:16px;padding:0;width:480px;max-width:92vw;max-height:80vh;display:flex;flex-direction:column;box-shadow:0 25px 80px rgba(0,0,0,0.5);border:1px solid rgba(255,255,255,0.1);overflow:hidden;backdrop-filter:blur(20px)}

.relob-modal-select-header{padding:20px 24px;border-bottom:1px solid rgba(255,255,255,0.08);display:flex;align-items:center;justify-content:space-between}

.relob-modal-select-header h3{margin:0;font-size:1.1rem;color:var(--text,#e0e0e0)}

.relob-modal-close{background:none;border:none;color:var(--text-muted,#999);font-size:1.5rem;cursor:pointer;padding:0 4px;line-height:1}

.relob-modal-close:hover{color:var(--text,#e0e0e0)}

.relob-modal-select-body{padding:16px 24px;flex:1;overflow-y:auto}

.relob-modal-select-footer{padding:16px 24px;border-top:1px solid rgba(255,255,255,0.08);display:flex;gap:8px;justify-content:flex-end}

.relob-input-busca{width:100%;padding:10px 14px;border-radius:10px;border:1px solid rgba(255,255,255,0.12);background:rgba(255,255,255,0.05);color:var(--text,#e0e0e0);font-size:0.9rem;outline:none;box-sizing:border-box;margin-bottom:12px;transition:border-color .2s}

.relob-input-busca:focus{border-color:var(--accent,#6c63ff)}

.relob-lista-projetos{max-height:320px;overflow-y:auto;display:flex;flex-direction:column;gap:4px}

.relob-item-projeto{padding:10px 14px;border-radius:10px;cursor:pointer;display:flex;align-items:center;justify-content:space-between;transition:all .15s;background:rgba(255,255,255,0.04)}

.relob-item-projeto:hover{background:rgba(108,99,255,0.15)}

.relob-item-ativo{background:var(--accent,#6c63ff)!important;color:#fff}

.relob-item-nome{font-size:0.9rem;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--text,#e0e0e0)}

.relob-item-id{font-size:0.75rem;opacity:0.5;margin-left:12px;flex-shrink:0;color:var(--text-muted,#999)}

.relob-lista-empty{padding:32px 16px;text-align:center;color:var(--text-muted,#999);font-size:0.85rem}



/* === RELOB EDITOR INLINE (dentro do projeto) === */

.relob-editor-inline{padding:16px 0}

.relob-inline-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;padding-bottom:12px;border-bottom:1px solid rgba(255,255,255,0.08)}

.relob-inline-header h3{margin:0;font-size:1.2rem;font-weight:600;color:var(--text,#e0e0e0)}

.relob-inline-data{font-size:0.85rem;color:var(--text-muted,#999)}

.relob-form-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:16px}

.relob-grid-2{grid-template-columns:repeat(2,1fr)}

.relob-form-group{display:flex;flex-direction:column;gap:4px}

.relob-form-group label{font-size:0.8rem;font-weight:600;color:var(--text-muted,#aaa);text-transform:uppercase;letter-spacing:0.5px}

.relob-input{background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.1);border-radius:8px;padding:10px 14px;color:var(--text,#e0e0e0);font-size:0.9rem;outline:none;transition:all 0.2s;width:100%;box-sizing:border-box}

.relob-input:focus{border-color:var(--accent,#6c63ff);box-shadow:0 0 0 3px rgba(108,99,255,0.15)}

.relob-input::placeholder{color:rgba(255,255,255,0.25)}

.relob-divider{border:none;border-top:1px solid rgba(255,255,255,0.08);margin:20px 0}

.relob-section{margin-bottom:20px}

.relob-section-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}

.relob-section-header h4{margin:0;font-size:0.95rem;font-weight:600;color:var(--text,#e0e0e0)}

.relob-lista-container{display:flex;flex-direction:column;gap:4px}

.relob-actions{display:flex;gap:8px;justify-content:flex-end;padding-top:16px;border-top:1px solid rgba(255,255,255,0.08);margin-top:20px}

.relob-actions .relob-btn,.relob-actions .relob-btn-primary,.relob-actions .relob-btn-secondary{padding:10px 20px;border-radius:8px;font-size:0.85rem;font-weight:500;border:none;cursor:pointer;transition:all 0.2s}

.relob-actions .relob-btn{background:rgba(255,255,255,0.08);color:var(--text,#e0e0e0)}

.relob-actions .relob-btn:hover{background:rgba(255,255,255,0.15)}

.relob-actions .relob-btn-primary{background:#10b981;color:#fff}

.relob-actions .relob-btn-primary:hover{background:#059669}

.relob-actions .relob-btn-secondary{background:rgba(37,99,235,0.3);color:#60a5fa}

.relob-actions .relob-btn-secondary:hover{background:rgba(37,99,235,0.5)}



#subtarefa-input::placeholder { color: #6b7280; opacity: 1; } 

#tarefa-add-horas::placeholder { color: #6b7280; opacity: 1; } 

#tarefa-add-descricao::placeholder { color: #6b7280; opacity: 1; } 

#subtarefa-input::-webkit-input-placeholder { color: #6b7280; opacity: 1; } 



/* ═══ CURADORIA — FILTROS, ORÇAMENTO, RELATÓRIO ═══ */

.curadoria-filtros {

    display: flex;

    gap: 0.5rem;

    flex-wrap: wrap;

    margin-top: 0.75rem;

    align-items: center;

}

.curadoria-filtro {

    background: var(--bg);

    border: 1px solid var(--border-light);

    border-radius: 6px;

    padding: 0.35rem 0.6rem;

    font-size: 0.8rem;

    color: var(--text);

    font-family: inherit;

    cursor: pointer;

    max-width: 180px;

}

.curadoria-filtro:hover { border-color: var(--border); }



.orcamento-resumo-geral {

    display: flex;

    gap: 1rem;

    flex-wrap: wrap;

    align-items: center;

    background: var(--surface);

    border: 1px solid var(--border-light);

    border-radius: var(--radius);

    padding: 1rem;

    margin-bottom: 1.5rem;

}

.orcamento-resumo-geral h3 { margin: 0; font-size: 1rem; }

.orcamento-card {

    background: var(--bg);

    border-radius: var(--radius-sm);

    padding: 0.5rem 1rem;

    font-size: 0.85rem;

    color: var(--text-secondary);

}

.orcamento-card strong { color: var(--text); }

.valor-destaque {

    color: var(--success);

    font-weight: 700;

    font-size: 1.1rem;

}

.orcamento-tabelas {

    overflow-x: auto;

    margin-bottom: 1.5rem;

}

.orcamento-tabelas table {

    width: 100%;

    font-size: 0.85rem;

}

.orcamento-tabelas th {

    background: var(--surface);

    font-weight: 600;

    color: var(--text-secondary);

    font-size: 0.8rem;

}

.orcamento-tabelas td, .orcamento-tabelas th {

    padding: 0.5rem 0.75rem;

    border: 1px solid var(--border-light);

    text-align: left;

}

.orcamento-tabelas td:last-child, .orcamento-tabelas th:last-child {

    text-align: right;

    font-weight: 600;

}



.relatorio-curadoria {

    background: var(--surface);

    border: 1px solid var(--border-light);

    border-radius: var(--radius);

    padding: 1.5rem;

}

.relatorio-curadoria h3 { margin-top: 0; font-size: 1.1rem; }

.relatorio-curadoria h4 { font-size: 0.9rem; margin-top: 1.5rem; }



/* ═══════════════════════════════════════════════════════════

   VIEW PROJETOS — KANBAN + LISTA (Vobi-Style)

   ═══════════════════════════════════════════════════════════ */



/* ─── Page Header ─── */

.page-header-left { display: flex; flex-direction: column; gap: 0.5rem; }

.page-header-right { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }



/* ─── View Toggle ─── */

.view-toggle { display: flex; gap: 0.25rem; background: var(--bg); border-radius: var(--radius-sm); padding: 2px; }

.view-btn { 

    padding: 0.4rem 0.9rem; border: none; border-radius: 6px; 

    background: transparent; color: var(--text-secondary); 

    font-size: 0.8rem; font-weight: 500; cursor: pointer; 

    font-family: inherit; transition: all 0.15s;

    display: flex; align-items: center; gap: 0.35rem;

}

.view-btn:hover { color: var(--text); }

.view-btn.active { background: var(--surface); color: var(--text); box-shadow: var(--shadow-sm); font-weight: 600; }

.view-icon { font-size: 0.9rem; }



/* ─── Header Clock ─── */

.header-clock { display: flex; align-items: center; gap: 0.35rem; background: var(--surface); border-radius: var(--radius-sm); padding: 0.25rem 0.6rem; border: 1px solid var(--border-light); font-size: 0.85rem; }

.clock-icon { font-size: 0.9rem; }

#timer-display { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--text); }



/* ─── Header Progress ─── */

.header-progress { display: flex; align-items: center; gap: 0.5rem; }

.progress-circle { position: relative; width: 36px; height: 36px; }

.progress-text { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 0.6rem; font-weight: 700; color: var(--vc-green); }

.progress-label { font-size: 0.7rem; color: var(--text-muted); max-width: 120px; line-height: 1.2; }



/* ─── Header Actions ─── */

.header-actions { display: flex; align-items: center; gap: 0.35rem; }

.btn-icon { 

    background: transparent; border: none; cursor: pointer; 

    padding: 0.35rem; border-radius: 50%; position: relative;

    font-size: 1rem; line-height: 1;

    transition: background 0.15s;

}

.btn-icon:hover { background: var(--surface-hover); }

.badge { 

    position: absolute; top: -2px; right: -2px; 

    background: var(--danger); color: #fff; font-size: 0.55rem;

    padding: 1px 4px; border-radius: 8px; font-weight: 700;

    min-width: 14px; text-align: center;

}

.user-avatar { 

    width: 32px; height: 32px; border-radius: 50%; 

    background: var(--vc-green); color: #fff; 

    display: flex; align-items: center; justify-content: center;

    font-weight: 700; font-size: 0.75rem; cursor: pointer;

}



/* ─── Filtros Bar ─── */

.visao-projetos .pd-toolbar { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1.25rem; flex-wrap: wrap; }

.filtros-left { display: flex; gap: 0.5rem; align-items: center; }

.filtros-right { display: flex; gap: 0.5rem; align-items: center; }

.visao-projetos .pd-toolbar input[type="text"] { width: 240px; }



.visao-projetos { display: none; }

.visao-projetos.active { display: block; }



/* ─── KANBAN ─── */



.kanban-col-header { 

    display: flex; align-items: center; gap: 0.5rem; 

    margin-bottom: 0.75rem; padding-bottom: 0.5rem; 

    border-bottom: 1px solid var(--border-light);

}

.kanban-col-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }

.kanban-col-title { font-size: 0.85rem; font-weight: 700; color: var(--text); flex: 1; white-space: normal; word-break: break-word; line-height: 1.3; }

.kanban-col-count { 

    font-size: 0.7rem; color: var(--text-muted); 

    background: var(--surface); padding: 1px 7px; 

    border-radius: 10px; font-weight: 600;

}

.kanban-col-actions { cursor: pointer; opacity: 0.4; font-size: 0.85rem; }

.kanban-col-actions:hover { opacity: 0.8; }



.kanban-cards { display: flex; flex-direction: row; gap: 0.5rem; min-height: 40px; flex-wrap: wrap; }



.kanban-card { 

    background: var(--surface); border: 1px solid var(--border-light);

    border-radius: var(--radius-sm); padding: 0.65rem 0.75rem;

    cursor: pointer; transition: all 0.15s; box-shadow: var(--shadow-sm);

    display: flex; flex-direction: column; gap: 0.3rem;

    width: 100%;

}

.kanban-card:hover { box-shadow: var(--shadow); border-color: var(--border); transform: translateY(-1px); }

.kanban-card-id { font-size: 0.7rem; color: var(--text-muted); font-weight: 500; }

.kanban-card-title { font-size: 0.85rem; font-weight: 600; color: var(--text); line-height: 1.3; }

.kanban-card-cliente { font-size: 0.75rem; color: var(--text-secondary); display: flex; align-items: center; gap: 0.3rem; }

.kanban-card-meta { display: flex; align-items: center; justify-content: space-between; margin-top: 0.2rem; }

.kanban-card-date { font-size: 0.7rem; color: var(--text-muted); display: flex; align-items: center; gap: 0.25rem; }

.kanban-card-avatars { display: flex; align-items: center; }

.kanban-avatar { 

    width: 22px; height: 22px; border-radius: 50%; 

    font-size: 0.55rem; font-weight: 700;

    display: flex; align-items: center; justify-content: center;

    border: 2px solid var(--surface); margin-left: -5px;

}

.kanban-avatar:first-child { margin-left: 0; }

.kanban-avatar-more { 

    width: 22px; height: 22px; border-radius: 50%;

    background: var(--bg); color: var(--text-muted);

    font-size: 0.6rem; font-weight: 600;

    display: flex; align-items: center; justify-content: center;

    border: 2px solid var(--surface); margin-left: -5px;

}



.kanban-empty { 

    padding: 1rem; text-align: center; color: var(--text-muted); 

    font-size: 0.8rem; background: var(--surface); 

    border-radius: var(--radius-sm); border: 1px dashed var(--border);

}

.kanban-loading, .table-loading { 

    padding: 2rem; text-align: center; color: var(--text-muted); 

    font-size: 0.9rem; 

}



/* ─── LISTA ─── */

.table-container { overflow-x: auto; }

.data-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }

.data-table th {

    padding: 0.65rem 0.75rem; text-align: left; font-weight: 600;

    color: var(--text-secondary); font-size: 0.78rem;

    text-transform: uppercase; letter-spacing: 0.5px;

    border-bottom: 2px solid var(--border); white-space: nowrap;

    background: var(--bg);

}

.data-table th.sortable { cursor: pointer; user-select: none; }

.data-table th.sortable:hover { color: var(--accent); background: var(--surface-hover); }

.data-table td { 

    padding: 0.65rem 0.75rem; border-bottom: 1px solid var(--border-light);

    color: var(--text); vertical-align: middle;

}

.data-table tr:hover td { background: var(--surface-hover); }

.data-table tr { cursor: pointer; transition: background 0.1s; }



.progress-bar-mini { 

    width: 60px; height: 5px; background: var(--border-light); 

    border-radius: 3px; overflow: hidden; display: inline-block; vertical-align: middle;

}

.progress-bar-mini-fill { height: 100%; border-radius: 3px; background: var(--vc-green); }

.status-badge { 

    display: inline-flex; align-items: center; gap: 0.3rem;

    padding: 0.2rem 0.55rem; border-radius: 12px; 

    font-size: 0.75rem; font-weight: 600;

}

.status-badge.ativo { background: var(--success-soft); color: var(--success); }

.status-badge.andamento { background: #EFF6FF; color: #3B82F6; }

.status-badge.suspenso { background: var(--warning-soft); color: var(--warning); }

.status-badge.concluido { background: #F0FDF4; color: #16A34A; }

.status-badge.cancelado { background: var(--danger-soft); color: var(--danger); }



.empty-state { text-align: center; padding: 2rem; color: var(--text-muted); }



/* ═══ DRAG AND DROP ═══ */

.kanban-card {

    cursor: grab;

    transition: transform 0.1s ease, box-shadow 0.1s ease, opacity 0.15s ease;

    user-select: none;

}

.kanban-card:active { cursor: grabbing; }

.kanban-card.dragging {

    opacity: 0.4;

    transform: scale(0.95);

    box-shadow: 0 0 0 2px rgba(34,197,94,0.25);

}

.kanban-col.drag-over {

    background: rgba(34,197,94,0.06);

    border: 2px dashed #22c55e;

    border-radius: 12px;

    transition: all 0.15s ease;

}

.kanban-col.drag-over .kanban-col-header {

    background: rgba(34,197,94,0.1);

    border-radius: 8px;

}



/* ═══ CONTAGEM DE TAREFAS NO CARD ═══ */

.kanban-card-task-count {

    font-size: 11px;

    color: #64748b;

    background: #f1f5f9;

    padding: 2px 8px;

    border-radius: 10px;

    white-space: nowrap;

}

.kanban-card-task-count .done {

    color: #22c55e;

    font-weight: 600;

}



/* ═══ BADGE DE STATUS DE PRAZO ═══ */

.kanban-card-date-badge {

    font-size: 10px;

    font-weight: 600;

    padding: 2px 7px;

    border-radius: 10px;

    white-space: nowrap;

}

.kanban-card-date-badge.on-time {

    background: #dcfce7;

    color: #166534;

}

.kanban-card-date-badge.at-risk {

    background: #fef9c3;

    color: #854d0e;

}

.kanban-card-date-badge.overdue {

    background: #fee2e2;

    color: #991b1b;

}



/* KANBAN - scroll horizontal com barra no TOPO */

/* KANBAN - scroll no TOPO */

.kanban-scroll-wrapper {

    overflow-x: auto;

    overflow-y: hidden;

    min-height: 55vh;

    scroll-behavior: smooth;

    -webkit-overflow-scrolling: touch;

}

.kanban-scroll-wrapper::-webkit-scrollbar {

    height: 6px;

}

.kanban-scroll-wrapper::-webkit-scrollbar-track {

    background: var(--border-light);

    border-radius: 3px;

}

.kanban-scroll-wrapper::-webkit-scrollbar-thumb {

    background: var(--text-muted);

    border-radius: 3px;

}

.kanban-scroll-wrapper .kanban-container {

    display: flex;

    gap: 0.6rem;

    padding: 0.5rem 0;

    min-height: 50vh;

    flex-wrap: nowrap;

}

.kanban-col {

    display: flex;

    flex-direction: column;

    min-width: 0;

    min-height: 150px;

}



/* GT - card wrapper */

#view-gestao-tarefas .gt-card {

    background: var(--surface);

    border: 1px solid var(--border-light);

    border-radius: var(--radius);

    padding: 0.5rem;

    box-shadow: var(--shadow-sm);

    width: 100%;

    overflow: hidden;

}

/* GT - sem scroll horizontal (como o Kanban) */

#view-gestao-tarefas .table-wrapper.gt-scroll-top {

    overflow: hidden;

    width: 100%;

}

#view-gestao-tarefas .table-wrapper.gt-scroll-top .gt-scroll-inner {

    overflow: hidden;

    width: 100%;

}

#view-gestao-tarefas .table-wrapper.gt-scroll-top table {

    table-layout: fixed;

    width: 100%;

}

#view-gestao-tarefas .table-wrapper.gt-scroll-top table th,

#view-gestao-tarefas .table-wrapper.gt-scroll-top table td {

    word-break: break-word;

    overflow-wrap: break-word;

    white-space: normal !important;

    line-height: 1.2;

    padding: 4px 3px !important;

    font-size: 11px !important;

}

#view-gestao-tarefas .table-wrapper.gt-scroll-top table th { font-size: 10px !important; }

#view-gestao-tarefas .table-wrapper.gt-scroll-top table th:nth-child(1) { width: 2%; }

#view-gestao-tarefas .table-wrapper.gt-scroll-top table th:nth-child(2) { width: 29%; }

#view-gestao-tarefas .table-wrapper.gt-scroll-top table th:nth-child(3) { width: 24%; }

#view-gestao-tarefas .table-wrapper.gt-scroll-top table th:nth-child(4) { width: 7%; }

#view-gestao-tarefas .table-wrapper.gt-scroll-top table th:nth-child(5) { width: 5%; }

#view-gestao-tarefas .table-wrapper.gt-scroll-top table th:nth-child(6) { width: 1%; }

#view-gestao-tarefas .table-wrapper.gt-scroll-top table th:nth-child(7) { width: 3%; }

#view-gestao-tarefas .table-wrapper.gt-scroll-top table th:nth-child(8) { width: 3%; }

#view-gestao-tarefas .table-wrapper.gt-scroll-top table th:nth-child(9) { width: 2%; }

#view-gestao-tarefas .table-wrapper.gt-scroll-top table th:nth-child(10) { width: 2%; }

#view-gestao-tarefas .table-wrapper.gt-scroll-top table th:nth-child(11) { width: 14%; }

#view-gestao-tarefas .table-wrapper.gt-scroll-top table th:nth-child(12) { width: 4%; }

#view-gestao-tarefas .table-wrapper.gt-scroll-top table th:nth-child(13) { width: 4%; }



/* ═══ CURADORIA — AMBIENTES EDITÁVEIS ═══ */

.curadoria-ambientes-container {

    display: flex;

    flex-direction: column;

    gap: 1.25rem;

}



.curadoria-ambiente-card {

    background: var(--surface);

    border: 1px solid var(--border-light);

    border-radius: var(--radius);

    overflow: hidden;

    box-shadow: var(--shadow-sm);

}



.curadoria-ambiente-header {

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding: 0.65rem 1rem;

    background: linear-gradient(135deg, var(--vc-green-light), #e8f5e9);

    border-bottom: 1px solid var(--border-light);

    gap: 0.5rem;

}



.curadoria-ambiente-nome-wrapper {

    display: flex;

    align-items: center;

    gap: 0.35rem;

    flex: 1;

}



.curadoria-ambiente-nome-texto {

    font-size: 0.95rem;

    font-weight: 700;

    color: var(--text);

    line-height: 1.3;

    min-width: 80px;

}



.curadoria-ambiente-nome-input {

    font-size: 0.95rem;

    font-weight: 700;

    color: var(--text);

    background: #fff;

    border: 1px solid var(--vc-green);

    border-radius: 4px;

    padding: 0.2rem 0.4rem;

    outline: none;

    font-family: inherit;

    min-width: 160px;

}



.curadoria-edit-amb-btn {

    opacity: 0.5;

    transition: opacity 0.15s;

    font-size: 0.8rem !important;

}



.curadoria-edit-amb-btn:hover {

    opacity: 1;

    background: rgba(0,0,0,0.05);

}



.curadoria-ambiente-actions {

    display: flex;

    align-items: center;

    gap: 0.5rem;

}



.curadoria-ambiente-qtd {

    font-size: 0.75rem;

    color: var(--text-muted);

    background: rgba(0,0,0,0.04);

    padding: 0.15rem 0.5rem;

    border-radius: 10px;

    font-weight: 500;

}



.curadoria-del-amb-btn {

    opacity: 0.4;

    transition: opacity 0.15s;

    font-size: 0.75rem !important;

    color: var(--danger) !important;

}



.curadoria-del-amb-btn:hover {

    opacity: 1;

    background: rgba(220, 53, 69, 0.08);

}



.curadoria-add-item-bar {

    display: flex;

    justify-content: center;

    padding: 0.5rem 1rem 0.75rem;

    border-top: 1px dashed var(--border-light);

}



.curadoria-add-item-bar .btn {

    font-size: 0.8rem;

    padding: 0.35rem 1rem;

}



.curadoria-novo-ambiente-bar {

    display: flex;

    justify-content: center;

    padding: 0.5rem 0;

}



.curadoria-novo-ambiente-bar .btn {

    min-width: 200px;

    font-size: 0.85rem;

}



/* Ajuste na tabela dentro dos cards */

.curadoria-tabela-wrapper {

    overflow-x: auto;

}



.curadoria-tabela td.empty-table-msg {

    text-align: center;

    color: var(--text-muted);

    font-style: italic;

    padding: 1.5rem !important;

    font-size: 0.85rem;

}



.btn-danger-outline {

    background: transparent;

    border: none;

    cursor: pointer;

}



/* ===== DIRETRIZES TECNICAS VCS ===== */

/* ===========================

   DIRETRIZES — ESTILO CHECKLIST (VCS)

   =========================== */

.diretriz-hero {

    background: linear-gradient(135deg, #1a3a32 0%, #2D574A 50%, #1e4a3e 100%);

    border-radius: 16px;

    padding: 1.75rem 2rem;

    margin-bottom: 1.5rem;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 1rem;

    position: relative;

    overflow: hidden;

}

.diretriz-hero::before {

    content: '';

    position: absolute;

    top: -50%;

    right: -20%;

    width: 300px;

    height: 300px;

    background: radial-gradient(circle, rgba(255,255,255,0.04) 0%, transparent 70%);

    border-radius: 50%;

    pointer-events: none;

}

.diretriz-hero-content { position: relative; z-index: 1; }

.diretriz-hero-pre {

    font-size: 0.7rem;

    font-weight: 700;

    letter-spacing: 3px;

    color: rgba(255,255,255,0.5);

    text-transform: uppercase;

    display: block;

    margin-bottom: 0.25rem;

}

.diretriz-hero-title {

    font-size: 1.5rem;

    font-weight: 700;

    color: #ffffff;

    margin: 0;

    line-height: 1.2;

}

.diretriz-hero-sub {

    font-size: 0.85rem;

    color: rgba(255,255,255,0.6);

    margin: 0.15rem 0 0 0;

    font-weight: 400;

}

.diretriz-hero-btn {

    display: inline-flex;

    align-items: center;

    gap: 0.5rem;

    padding: 0.6rem 1.25rem;

    background: rgba(255,255,255,0.12);

    backdrop-filter: blur(8px);

    border: 1px solid rgba(255,255,255,0.18);

    border-radius: 10px;

    color: #fff;

    font-size: 0.85rem;

    font-weight: 600;

    cursor: pointer;

    transition: all 0.25s ease;

    white-space: nowrap;

    position: relative;

    z-index: 1;

}

.diretriz-hero-btn:hover {

    background: rgba(255,255,255,0.22);

    border-color: rgba(255,255,255,0.3);

    transform: translateY(-1px);

}



/* Filtros */

.diretriz-filtros { margin-bottom: 1.5rem; }

.diretriz-filtros-inner {

    display: flex;

    gap: 0.75rem;

    align-items: center;

    flex-wrap: wrap;

}

.diretriz-filtros-inner select {

    background: var(--surface);

    border: 1px solid var(--border-light);

    border-radius: 10px;

    padding: 0.55rem 1rem;

    color: var(--text);

    font-size: 0.85rem;

    cursor: pointer;

    min-width: 200px;

    outline: none;

    transition: border-color 0.2s;

}

.diretriz-filtros-inner select:focus {

    border-color: var(--primary);

}

.diretriz-search-wrap {

    position: relative;

    flex: 1;

    min-width: 200px;

}

.diretriz-search-icon {

    position: absolute;

    left: 12px;

    top: 50%;

    transform: translateY(-50%);

    color: var(--text-muted);

    pointer-events: none;

}

.diretriz-search-wrap input {

    width: 100%;

    background: var(--surface);

    border: 1px solid var(--border-light);

    border-radius: 10px;

    padding: 0.55rem 1rem 0.55rem 2.25rem;

    color: var(--text);

    font-size: 0.85rem;

    outline: none;

    transition: border-color 0.2s;

    box-sizing: border-box;

}

.diretriz-search-wrap input:focus {

    border-color: var(--primary);

}

.diretriz-search-wrap input::placeholder {

    color: var(--text-muted);

}



/* Grid de checklist */

.diretriz-checklist {

    display: grid;

    grid-template-columns: repeat(2, 1fr);

    gap: 0.75rem;

}



/* Item de checklist */

.ck-item {

    display: flex;

    align-items: flex-start;

    gap: 0.85rem;

    background: var(--surface);

    border: 1px solid var(--border-light);

    border-radius: 12px;

    padding: 0.85rem 1rem;

    transition: all 0.25s ease;

    position: relative;

}

.ck-item:hover {

    border-color: var(--primary);

    background: var(--surface-hover);

    transform: translateY(-1px);

    box-shadow: 0 4px 20px rgba(0,0,0,0.12);

}



/* Checkbox visual */

.ck-check {

    width: 22px;

    height: 22px;

    min-width: 22px;

    border: 2px solid var(--text-muted);

    border-radius: 6px;

    display: flex;

    align-items: center;

    justify-content: center;

    cursor: pointer;

    transition: all 0.2s;

    margin-top: 1px;

    flex-shrink: 0;

    position: relative;

}

.ck-check:hover {

    border-color: var(--primary);

}

.ck-check.done {

    background: var(--primary);

    border-color: var(--primary);

}

.ck-check.done::after {

    content: '';

    width: 8px;

    height: 4px;

    border-left: 2.5px solid #fff;

    border-bottom: 2.5px solid #fff;

    transform: rotate(-45deg);

    position: absolute;

    top: 5px;

}



/* Ícone da categoria */

.ck-icon {

    width: 36px;

    height: 36px;

    min-width: 36px;

    display: flex;

    align-items: center;

    justify-content: center;

    color: var(--text-secondary);

    flex-shrink: 0;

}

.ck-icon svg {

    width: 18px;

    height: 18px;

    display: block;

}



/* Conteúdo do item */

.ck-body {

    flex: 1;

    min-width: 0;

}

.ck-title {

    font-size: 0.9rem;

    font-weight: 500;

    color: var(--text);

    line-height: 1.4;

    display: block;

}

.ck-meta {

    display: flex;

    align-items: center;

    gap: 0.5rem;

    margin-top: 0.3rem;

    flex-wrap: wrap;

}

.ck-badge {

    font-size: 0.65rem;

    font-weight: 600;

    padding: 0.15rem 0.5rem;

    border-radius: 6px;

    letter-spacing: 0.3px;

    text-transform: uppercase;

}

.ck-badge.obrigatorio {

    background: rgba(239, 68, 68, 0.12);

    color: #ef4444;

    border: 1px solid rgba(239, 68, 68, 0.2);

}

.ck-badge.recomendado {

    background: rgba(59, 130, 246, 0.1);

    color: #60a5fa;

    border: 1px solid rgba(59, 130, 246, 0.15);

}

.ck-cat-name {

    font-size: 0.7rem;

    color: var(--text-muted);

}

.ck-actions {

    display: flex;

    gap: 0.25rem;

    opacity: 0;

    transition: opacity 0.2s;

    flex-shrink: 0;

    align-self: center;

}

.ck-item:hover .ck-actions {

    opacity: 1;

}

.ck-action-btn {

    width: 28px;

    height: 28px;

    display: flex;

    align-items: center;

    justify-content: center;

    border: none;

    background: transparent;

    color: var(--text-muted);

    border-radius: 6px;

    cursor: pointer;

    transition: all 0.2s;

    font-size: 0.8rem;

}

.ck-action-btn:hover {

    background: var(--surface-hover);

    color: var(--text);

}

.ck-action-btn.edit:hover { color: var(--primary); }

.ck-action-btn.del:hover { color: var(--danger); }



/* Estado vazio */

.diretriz-empty {

    grid-column: 1 / -1;

    text-align: center;

    padding: 3rem 2rem;

    color: var(--text-muted);

    font-size: 0.9rem;

}

.diretriz-empty-icon {

    font-size: 3rem;

    margin-bottom: 0.75rem;

    display: block;

    opacity: 0.5;

}



/* Categoria grouping */

.ck-category {

    margin-bottom: 1.5rem;

}

.ck-category-header {

    display: flex;

    align-items: center;

    gap: 0.75rem;

    padding: 0.75rem 1rem;

    background: var(--surface);

    border: 1px solid var(--border-light);

    border-radius: 12px 12px 0 0;

    border-bottom: 2px solid var(--primary);

}

.ck-category-icon {

    color: var(--primary);

    display: flex;

    align-items: center;

}

.ck-category-icon svg {

    width: 20px;

    height: 20px;

}

.ck-category-title {

    font-size: 1rem;

    font-weight: 600;

    color: var(--text);

    margin: 0;

}

.ck-category-count {

    margin-left: auto;

    font-size: 0.75rem;

    color: var(--text-muted);

}

.ck-category-body {

    background: var(--surface);

    border: 1px solid var(--border-light);

    border-top: none;

    border-radius: 0 0 12px 12px;

    padding: 0.5rem;

}



/* Ambiente sub-grouping */

.ck-amb {

    margin-bottom: 0.5rem;

}

.ck-amb:last-child {

    margin-bottom: 0;

}

.ck-amb-header {

    display: flex;

    align-items: center;

    gap: 0.5rem;

    padding: 0.4rem 0.75rem;

    margin-bottom: 0.25rem;

}

.ck-amb-title {

    font-size: 0.78rem;

    font-weight: 600;

    color: var(--text-secondary);

    text-transform: uppercase;

    letter-spacing: 0.5px;

}

.ck-amb-count {

    font-size: 0.65rem;

    color: var(--text-muted);

    margin-left: auto;

}

.ck-amb-body {

    display: grid;

    grid-template-columns: repeat(2, 1fr);

    gap: 0.5rem;

    padding: 0 0.25rem;

}



/* Ajuste no item para dentro do grouping */

.ck-amb-body .ck-item {

    margin: 0;

    padding: 0.7rem 0.85rem;

}

.ck-amb-body .ck-icon {

    width: 30px;

    height: 30px;

    min-width: 30px;

}

.ck-amb-body .ck-icon svg {

    width: 15px;

    height: 15px;

}

.ck-amb-body .ck-title {

    font-size: 0.82rem;

}



/* =============================================

   TEMPLATE — VISUALIZACAO POR ETAPAS (v2)

   ============================================= */

.template-etapas-container {

    display: flex;

    flex-direction: column;

    gap: 1rem;

}

.template-etapa {

    background: var(--surface);

    border: 1px solid var(--border-light);

    border-radius: 12px;

    overflow: hidden;

    transition: box-shadow 0.2s;

}

.template-etapa:hover {

    box-shadow: 0 2px 12px rgba(0,0,0,0.06);

}

.template-etapa-header {

    display: flex;

    align-items: center;

    gap: 0.7rem;

    padding: 0.65rem 1.1rem;

    background: var(--surface-alt);

    border-bottom: 1px solid var(--border-light);

}

.template-etapa-icon {

    width: 30px;

    height: 30px;

    min-width: 30px;

    display: flex;

    align-items: center;

    justify-content: center;

    color: var(--primary);

}

.template-etapa-icon svg {

    width: 17px;

    height: 17px;

}

.template-etapa-nome {

    font-size: 0.82rem;

    font-weight: 600;

    color: var(--text);

    letter-spacing: 0.3px;

}

.template-etapa-count {

    margin-left: auto;

    font-size: 0.68rem;

    color: var(--text-muted);

    background: var(--bg);

    padding: 0.15rem 0.55rem;

    border-radius: 20px;

    font-weight: 500;

}

.template-etapa-body {

    padding: 0.7rem;

    display: grid;

    grid-template-columns: repeat(2, 1fr);

    gap: 0.5rem;

}

.template-tarefa-card {

    display: flex;

    align-items: center;

    gap: 0.6rem;

    padding: 0.6rem 0.8rem;

    background: var(--bg);

    border: 1px solid var(--border-light);

    border-radius: 8px;

    transition: border-color 0.2s, box-shadow 0.2s;

}

.template-tarefa-card:hover {

    border-color: var(--primary);

    box-shadow: 0 1px 6px rgba(16,185,129,0.08);

}

.template-tarefa-check {

    width: 16px;

    height: 16px;

    min-width: 16px;

    border: 2px solid var(--border);

    border-radius: 50%;

    transition: border-color 0.2s;

}

.template-tarefa-card:hover .template-tarefa-check {

    border-color: var(--primary);

}

.template-tarefa-info {

    flex: 1;

    min-width: 0;

}

.template-tarefa-titulo {

    font-size: 0.8rem;

    font-weight: 500;

    color: var(--text);

    display: block;

    line-height: 1.3;

}

.template-tarefa-meta {

    display: flex;

    gap: 0.5rem;

    margin-top: 0.2rem;

    flex-wrap: wrap;

    align-items: center;

}

.template-tarefa-duracao,

.template-tarefa-horas {

    font-size: 0.68rem;

    color: var(--text-muted);

    display: inline-flex;

    align-items: center;

    gap: 0.15rem;

}

.template-tarefa-prio {

    font-size: 0.65rem;

    font-weight: 500;

    padding: 0.05rem 0.4rem;

    border-radius: 4px;

}



.template-tarefa-actions {

    display: flex;

    gap: 0.25rem;

    opacity: 0;

    transition: opacity 0.2s;

}

.template-tarefa-card:hover .template-tarefa-actions {

    opacity: 1;

}

.tt-btn {

    width: 28px;

    height: 28px;

    padding: 0;

    border: none;

    border-radius: 6px;

    cursor: pointer;

    display: flex;

    align-items: center;

    justify-content: center;

    background: transparent;

    color: var(--text-muted);

    transition: all 0.2s;

}

.tt-btn-edit:hover {

    background: rgba(16,185,129,0.1);

    color: var(--primary);

}

.tt-btn-del:hover {

    background: rgba(239,68,68,0.1);

    color: #ef4444;

}



/* Placeholder para categoria vazia */

.ck-empty-placeholder {

    grid-column: 1 / -1;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 1rem;

    padding: 1.5rem 1rem;

    background: var(--surface-alt);

    border: 1px dashed var(--border-light);

    border-radius: 8px;

}

.ck-empty-text {

    font-size: 0.8rem;

    color: var(--text-muted);

    font-style: italic;

}

.ck-empty-btn {

    background: var(--primary);

    color: #fff;

    border: none;

    padding: 0.35rem 1rem;

    border-radius: 6px;

    font-size: 0.75rem;

    cursor: pointer;

    font-weight: 500;

    transition: background 0.2s;

}

.ck-empty-btn:hover {

    background: var(--primary-hover);

}



.btn-xs { padding: 0.2rem 0.5rem; font-size: 0.8rem; line-height: 1.2; }

.checkbox-label-simples { display: flex; align-items: center; gap: 0.5rem; cursor: pointer; font-size: 0.9rem; color: var(--text-secondary); }



/* ===== CHECKLIST TECNICO ===== */

.checklist-tecnico-tabs { display: flex; gap: 0.5rem; margin-bottom: 1.25rem; border-bottom: 1px solid var(--border); padding-bottom: 0.75rem; }

.checklist-tecnico-tab { padding: 0.5rem 1.25rem; border: none; background: transparent; color: var(--text-secondary); cursor: pointer; font-size: 0.9rem; border-radius: 6px; transition: all 0.2s; }

.checklist-tecnico-tab.active { background: var(--primary); color: #fff; }

.checklist-tecnico-tab:hover:not(.active) { background: var(--surface-hover); }

.ct-grupo { background: var(--surface); border: 1px solid var(--border-light); border-radius: var(--radius); margin-bottom: 1rem; overflow: hidden; }

.ct-grupo-header { display: flex; align-items: center; gap: 0.75rem; padding: 0.9rem 1.2rem; cursor: pointer; user-select: none; border-bottom: 1px solid var(--border-light); }

.ct-grupo-header:hover { background: var(--surface-hover); }

.ct-grupo-nome { font-weight: 600; font-size: 0.95rem; color: var(--text); }

.ct-grupo-concluido-badge { font-size: 0.75rem; padding: 0.15rem 0.6rem; border-radius: 10px; background: var(--success-soft); color: var(--success); border: 1px solid rgba(5,150,105,0.3); margin-left: auto; }

.ct-grupo-pendente-badge { font-size: 0.75rem; padding: 0.15rem 0.6rem; border-radius: 10px; background: var(--warning-soft); color: var(--warning); border: 1px solid rgba(217,119,6,0.3); margin-left: auto; }

.ct-grupo-body { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; }

.ct-grupo-body.expanded { max-height: 2000px; }

.ct-item { display: flex; align-items: center; gap: 0.75rem; padding: 0.65rem 1.2rem; border-bottom: 1px solid var(--border-light); transition: background 0.2s; }

.ct-item:last-child { border-bottom: none; }

.ct-item:hover { background: var(--surface-hover); }

.ct-item-checkbox { width: 18px; height: 18px; cursor: pointer; accent-color: var(--primary); flex-shrink: 0; }

.ct-item-titulo { flex: 1; font-size: 0.9rem; color: var(--text); }

.ct-item.concluido .ct-item-titulo { text-decoration: line-through; color: var(--text-muted); }

.ct-item-actions { display: flex; gap: 0.3rem; }

.ct-actions-bar { display: flex; gap: 0.5rem; margin-bottom: 1rem; flex-wrap: wrap; }





/* ===== /* ===== GESTAO DE USUARIOS ===== */

.usuarios-list {

    display: flex;

    flex-direction: column;

    gap: 2px;

    padding: 16px 0;

}



.usuario-row {

    display: flex;

    align-items: center;

    gap: 12px;

    background: var(--surface);

    border: 1px solid var(--border);

    border-radius: 8px;

    padding: 8px 14px;

    transition: all 0.15s;

}



.usuario-row:hover {

    border-color: var(--vc-green);

    background: var(--surface-hover);

}



.usuario-row.inativo {

    opacity: 0.55;

}



.usuario-row-avatar {

    width: 32px;

    height: 32px;

    border-radius: 50%;

    background: var(--vc-green);

    display: flex;

    align-items: center;

    justify-content: center;

    font-weight: 700;

    font-size: 12px;

    color: #fff;

    flex-shrink: 0;

}



.usuario-row-info {

    flex: 1;

    min-width: 0;

    display: flex;

    align-items: center;

    gap: 12px;

}



.usuario-row-nome {

    font-weight: 600;

    font-size: 14px;

    color: var(--text);

    min-width: 180px;

}



.usuario-row-email {

    font-size: 13px;

    color: var(--text-secondary);

}



.usuario-row-status {

    flex-shrink: 0;

}



.status-badge {

    display: inline-block;

    padding: 2px 10px;

    border-radius: 20px;

    font-size: 12px;

    font-weight: 500;

}



.status-badge.ativo {

    background: var(--success-soft);

    color: var(--success);

}



.status-badge.inativo {

    background: var(--danger-soft);

    color: var(--danger);

}



.usuario-row-actions {

    display: flex;

    gap: 4px;

    flex-shrink: 0;

}



.usuario-row-actions .btn-sm {

    width: 30px;

    height: 30px;

    padding: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 6px;

    background: transparent;

    border: 1px solid var(--border);

    color: var(--text-secondary);

    cursor: pointer;

    transition: all 0.15s;

    font-size: 13px;

}



.usuario-row-actions .btn-sm:hover {

    background: var(--surface-hover);

    color: var(--text);

    border-color: var(--vc-green);

}



/* Filtros */

.usuarios-filtros {

    display: flex;

    gap: 12px;

    align-items: flex-end;

    padding: 12px 0;

    flex-wrap: wrap;

}



.usuarios-filtros .filtro-group {

    display: flex;

    flex-direction: column;

    gap: 4px;

}



.usuarios-filtros .filtro-group label {

    font-size: 12px;

    color: var(--text-secondary);

    font-weight: 500;

    text-transform: uppercase;

    letter-spacing: 0.5px;

}



.usuarios-filtros .filtro-group select,

.usuarios-filtros .filtro-group input {

    padding: 7px 10px;

    border-radius: 6px;

    border: 1px solid var(--border-input);

    background: var(--surface);

    color: var(--text);

    font-size: 13px;

    min-width: 160px;

}



.usuarios-filtros .filtro-group select:focus,

.usuarios-filtros .filtro-group input:focus {

    outline: none;

    border-color: var(--vc-green);

}

/* Filtros */

.usuarios-filtros {

    display: flex;

    gap: 16px;

    align-items: flex-end;

    padding: 16px 0;

    flex-wrap: wrap;

}



.usuarios-filtros .filtro-group {

    display: flex;

    flex-direction: column;

    gap: 4px;

}



.usuarios-filtros .filtro-group label {

    font-size: 12px;

    color: var(--text-secondary);

    font-weight: 500;

    text-transform: uppercase;

    letter-spacing: 0.5px;

}



.usuarios-filtros .filtro-group select,

.usuarios-filtros .filtro-group input {

    padding: 8px 12px;

    border-radius: 8px;

    border: 1px solid var(--border-color);

    background: var(--input-bg);

    color: var(--text-primary);

    font-size: 13px;

    min-width: 180px;

}



.usuarios-filtros .filtro-group select:focus,

.usuarios-filtros .filtro-group input:focus {

    outline: none;

    border-color: var(--primary-color);

}



/* ===== CHECKLIST TECNICO V2 (com subtarefas e grupos) ===== */

.ct-grupos {

    display: flex;

    flex-direction: column;

    gap: 1rem;

}

.ct-grupo {

    background: var(--surface);

    border: 1px solid var(--border-light);

    border-radius: var(--radius);

    overflow: hidden;

}

.ct-grupo-header {

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 0.9rem 1.2rem;

    cursor: pointer;

    user-select: none;

    border-bottom: 1px solid var(--border-light);

    transition: background 0.2s;

}

.ct-grupo-header:hover {

    background: var(--surface-hover);

}

.ct-grupo-header-left {

    display: flex;

    align-items: center;

    gap: 0.6rem;

}

.ct-grupo-tipo-badge {

    font-size: 0.65rem;

    text-transform: uppercase;

    letter-spacing: 0.5px;

    padding: 0.15rem 0.5rem;

    border-radius: 4px;

    background: var(--primary-soft, rgba(99,102,241,0.12));

    color: var(--primary);

    font-weight: 600;

}

.ct-grupo-nome {

    font-weight: 600;

    font-size: 0.95rem;

    color: var(--text);

}

.ct-grupo-progresso {

    display: flex;

    align-items: center;

    gap: 0.5rem;

    font-size: 0.8rem;

    color: var(--text-muted);

}

.ct-grupo-progresso-bar {

    width: 80px;

    height: 6px;

    background: var(--border-light);

    border-radius: 3px;

    overflow: hidden;

}

.ct-grupo-progresso-fill {

    height: 100%;

    background: var(--success, #10b981);

    border-radius: 3px;

    transition: width 0.4s ease;

}

.ct-grupo-body {

    padding: 0 1.2rem 0.8rem;

}

.ct-item-list {

    list-style: none;

    margin: 0;

    padding: 0.5rem 0;

}

.ct-item-list li {

    display: flex;

    align-items: center;

    gap: 0.6rem;

    padding: 0.4rem 0;

    border-bottom: 1px solid var(--border-light);

    font-size: 0.88rem;

    color: var(--text);

}

.ct-item-list li:last-child {

    border-bottom: none;

}

.ct-item-list li.concluido span {

    text-decoration: line-through;

    color: var(--text-muted);

}

.ct-item-list li input[type="checkbox"] {

    width: 17px;

    height: 17px;

    cursor: pointer;

    accent-color: var(--primary);

    flex-shrink: 0;

}

.ct-grupo-actions {

    display: flex;

    gap: 0.4rem;

    padding: 0.4rem 0;

}

.ct-grupo-actions button {

    background: none;

    border: 1px solid var(--border-light);

    border-radius: 6px;

    padding: 0.25rem 0.6rem;

    cursor: pointer;

    font-size: 0.8rem;

    color: var(--text-muted);

    transition: all 0.15s;

}

.ct-grupo-actions button:hover {

    background: var(--surface-hover);

    color: var(--text);

    border-color: var(--border);

}



/* Modal subtarefas */

#ct-subtarefas-container {

    display: flex;

    flex-direction: column;

    gap: 0.5rem;

    margin-top: 0.5rem;

}

.ct-sub-item {

    display: flex;

    align-items: center;

    gap: 0.4rem;

}

.ct-sub-input {

    flex: 1;

    padding: 0.5rem 0.75rem;

    border: 1px solid var(--border);

    border-radius: 6px;

    background: var(--input-bg, var(--surface));

    color: var(--text);

    font-size: 0.85rem;

}

.ct-sub-input:focus {

    outline: none;

    border-color: var(--primary);

}

.ct-remove-btn {

    background: none;

    border: none;

    color: var(--danger, #ef4444);

    cursor: pointer;

    font-size: 1.2rem;

    padding: 0.2rem 0.4rem;

    line-height: 1;

}

.ct-remove-btn:hover {

    opacity: 0.7;

}

.btn-icon {

    background: none;

    border: 1px solid var(--border-light);

    border-radius: 6px;

    padding: 0.3rem 0.5rem;

    cursor: pointer;

    font-size: 0.9rem;

    color: var(--text-muted);

    transition: all 0.15s;

}

.btn-icon:hover {

    background: var(--surface-hover);

    color: var(--text);

    border-color: var(--primary);

}



/* Empty state */

.empty-state {

    text-align: center;

    padding: 3rem 1rem;

    color: var(--text-muted);

}

.empty-icon {

    font-size: 3rem;

    display: block;

    margin-bottom: 1rem;

}

.empty-hint {

    font-size: 0.85rem;

    color: var(--text-muted);

    margin-top: 0.5rem;

}





/* ─── DROPDOWN RESPONSAVEL ─────────────────────────────────────── */

.resp-dropdown {

    position: relative;

    display: inline-block;

}

.resp-dropbtn {

    padding: 0.5rem 1rem;

    border-radius: 8px;

    border: 1px solid var(--border-input);

    background: var(--surface);

    color: var(--text);

    font-size: 0.9rem;

    font-family: inherit;

    cursor: pointer;

    box-shadow: var(--shadow-sm);

    transition: border-color 0.15s;

    white-space: nowrap;

}

.resp-dropbtn:hover {

    border-color: var(--vc-green);

}

.resp-dropdown-content {

    display: none;

    position: absolute;

    top: 100%;

    left: 0;

    z-index: 1000;

    min-width: 220px;

    max-height: 300px;

    overflow-y: auto;

    background: var(--surface);

    border: 1px solid var(--border);

    border-radius: 8px;

    box-shadow: var(--shadow-lg);

    margin-top: 4px;

}

.resp-dropdown-content a {

    display: block;

    padding: 0.6rem 1rem;

    color: var(--text);

    text-decoration: none;

    font-size: 0.85rem;

    transition: background 0.1s;

}

.resp-dropdown-content a:hover {

    background: var(--surface-hover);

}

.resp-dropdown-content a:first-child {

    border-radius: 8px 8px 0 0;

}

.resp-dropdown-content a:last-child {

    border-radius: 0 0 8px 8px;

}





/* === KANBAN CARDS PROFUNDOS === */

.kanban-card {

    position: relative;

    border-radius: 14px;

    padding: 0.85rem 0.9rem 0.7rem;

    cursor: pointer;

    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);

    background: #ffffff;

    border: 1px solid rgba(226,232,240,0.8);

    box-shadow: 0 1px 2px rgba(0,0,0,0.04), 0 2px 8px rgba(0,0,0,0.03);

    overflow: hidden;

    animation: cardFadeIn 0.35s ease both;

    display: flex;

    flex-direction: column;

    gap: 0.3rem;

}

.kanban-card:hover {

    transform: translateY(-2px);

    box-shadow: 0 4px 12px rgba(0,0,0,0.06), 0 8px 24px rgba(0,0,0,0.05);

    border-color: rgba(148,163,184,0.4);

}



/* === HEADER: #ID + Nome === */

.kanban-card-header {

    display: flex;

    align-items: baseline;

    gap: 0.4rem;

}

.kanban-card-header .kanban-card-id {

    font-size: 0.6rem;

    font-weight: 600;

    color: #94a3b8;

    letter-spacing: 0.3px;

    white-space: nowrap;

    flex-shrink: 0;

}

.kanban-card-header .kanban-card-title {

    font-size: 0.8rem;

    font-weight: 600;

    color: #1e293b;

    line-height: 1.25;

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;

}



/* === BODY: Avatar + Data + Badge === */

.kanban-card-body {

    display: flex;

    align-items: center;

    gap: 0.5rem;

    padding: 0.15rem 0;

}

.kanban-avatar-mini {

    width: 28px;

    height: 28px;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 0.6rem;

    font-weight: 700;

    color: #fff;

    flex-shrink: 0;

    box-shadow: 0 1px 3px rgba(0,0,0,0.12);

}

.kanban-card-data-row {

    display: flex;

    align-items: center;

    gap: 0.3rem;

    flex: 1;

    min-width: 0;

}

.kanban-date-icon {

    display: flex;

    align-items: center;

    color: #94a3b8;

    flex-shrink: 0;

    opacity: 0.6;

}

.kanban-date-text {

    font-size: 0.7rem;

    font-weight: 500;

    color: #64748b;

    white-space: nowrap;

}

.kanban-date-text.kd-on-time { color: #22c55e; }

.kanban-date-text.kd-at-risk { color: #eab308; }

.kanban-date-text.kd-overdue { color: #ef4444; }



/* Badge de prazo (ao lado da data) */

.kanban-date-badge {

    font-size: 0.6rem;

    font-weight: 600;

    padding: 0.1rem 0.45rem;

    border-radius: 6px;

    white-space: nowrap;

}

.kb-on-time { background: #dcfce7; color: #166534; }

.kb-at-risk { background: #fef9c3; color: #854d0e; }

.kb-overdue { background: #fee2e2; color: #991b1b; }



/* === FOOTER: Barra de progresso + contagem === */

.kanban-card-footer {

    display: flex;

    align-items: center;

    gap: 0.4rem;

    padding-top: 0.15rem;

}

.kanban-progress-bar {

    flex: 1;

    height: 4px;

    background: #f1f5f9;

    border-radius: 2px;

    overflow: hidden;

}

.kanban-progress-fill {

    height: 100%;

    background: linear-gradient(90deg, #22c55e, #16a34a);

    border-radius: 2px;

    transition: width 0.5s ease;

}

.kanban-task-count {

    font-size: 0.65rem;

    font-weight: 600;

    color: #94a3b8;

    white-space: nowrap;

    flex-shrink: 0;

}



/* Scroll horizontal do kanban */

.kanban-scroll {

    display: flex !important;

    gap: 1.25rem !important;

    overflow-x: auto !important;

    overflow-y: visible !important;

    padding-bottom: 1rem !important;

    scroll-behavior: smooth !important;

    -webkit-overflow-scrolling: touch !important;

}

.kanban-col {

    flex: 1 1 220px !important;

    min-width: 200px !important;

    max-width: 300px !important;

    flex-shrink: 0 !important;

    background: rgba(248,250,249,0.7) !important;

    backdrop-filter: blur(10px) !important;

    -webkit-backdrop-filter: blur(10px) !important;

    border-radius: 16px !important;

    padding: 0.75rem !important;

    border: 1px solid rgba(226,232,240,0.6) !important;

    box-shadow: 0 1px 4px rgba(0,0,0,0.02) !important;

    display: flex !important;

    flex-direction: column !important;

    gap: 0.5rem !important;

}

.kanban-col-header {

    display: flex !important;

    align-items: center !important;

    gap: 0.5rem !important;

    padding-bottom: 0.75rem !important;

    margin-bottom: 0.75rem !important;

    border-bottom: 1px solid #e2e8f0 !important;

}

.kanban-col-dot {

    width: 10px !important;

    height: 10px !important;

    border-radius: 50% !important;

    flex-shrink: 0 !important;

}

.kanban-col-title {

    font-weight: 700 !important;

    font-size: 0.85rem !important;

    text-transform: uppercase !important;

    letter-spacing: 0.5px !important;

    color: #334155 !important;

    flex: 1 !important;

}

.kanban-col-count {

    font-size: 0.7rem !important;

    font-weight: 600 !important;

    padding: 0.15rem 0.5rem !important;

    border-radius: 99px !important;

    background: #e2e8f0 !important;

    color: #64748b !important;

}

.kanban-col-actions {

    font-size: 1.2rem !important;

    cursor: pointer !important;

    opacity: 0.3 !important;

    transition: opacity 0.15s !important;

    color: #475569 !important;

}

.kanban-col-actions:hover { opacity: 0.7 !important; }



/* ───── Coluna Finalizados ───── */

.kanban-col-finalizados {

    border: 2px dashed #10b981 !important;

    background: linear-gradient(135deg, #f0fdf4 0%, #ecfdf5 100%) !important;

}

.kanban-col-finalizados .kanban-col-header {

    border-bottom-color: #10b981 !important;

}

.kanban-col-finalizados .kanban-col-count {

    color: #059669 !important;

    font-weight: 700 !important;

}

.kanban-card-finalizado {

    opacity: 0.85;

    border-left: 4px solid #10b981 !important;

    background: #f0fdf4 !important;

}

.kanban-card-finalizado:hover {

    opacity: 1;

    transform: translateY(-2px);

}

.kanban-card-finalizado .kanban-task-count {

    color: #059669 !important;

    font-weight: 700;

}



@keyframes cardFadeIn {

    from { opacity: 0; transform: translateY(12px) scale(0.95); }

    to { opacity: 1; transform: translateY(0) scale(1); }

}





/* === SCROLL HORIZONTAL DO KANBAN === */

.kanban-cards {

    display: flex !important;

    flex-wrap: wrap !important;

    gap: 0.75rem !important;

    padding-bottom: 1rem !important;

}









/* ===== FILTROS DE TAREFAS ===== */

.pd-filtros-bar {

    display: flex;

    flex-wrap: wrap;

    align-items: center;

    gap: 0.75rem;

    margin: 1rem 0;

    padding: 0.75rem 1rem;

    background: var(--surface);

    border: 1px solid var(--border-light);

    border-radius: var(--radius-sm);

}

.pd-filtros-status {

    display: flex;

    gap: 0.35rem;

    flex-wrap: wrap;

}

.pd-filtro-btn {

    padding: 0.35rem 0.75rem;

    border: 1px solid var(--border-light);

    border-radius: 99px;

    background: transparent;

    cursor: pointer;

    font-size: 0.8rem;

    color: var(--text-muted);

    transition: all 0.15s;

}

.pd-filtro-btn:hover {

    background: var(--bg-hover);

    color: var(--text);

}

.pd-filtro-btn.active {

    background: var(--accent);

    color: #fff;

    border-color: var(--accent);

}

.pd-filtros-select select {

    padding: 0.35rem 0.65rem;

    border: 1px solid var(--border-light);

    border-radius: var(--radius-sm);

    background: var(--surface);

    color: var(--text);

    font-size: 0.8rem;

    cursor: pointer;

}

.pd-tarefas-lista {

    display: flex;

    flex-direction: column;

    gap: 0.4rem;

}

.pd-tarefa-item {

    display: flex;

    align-items: center;

    gap: 0.65rem;

    padding: 0.5rem 0.75rem;

    background: var(--surface);

    border: 1px solid var(--border-light);

    border-radius: var(--radius-sm);

    transition: all 0.15s;

}

.pd-tarefa-item:hover {

    border-color: var(--accent-light);

    box-shadow: var(--shadow-sm);

}

.pd-tarefa-info {

    flex: 1;

    min-width: 0;

}

.pd-tarefa-nome {

    font-size: 0.85rem;

    font-weight: 600;

    color: var(--text);

    margin-bottom: 0.15rem;

}

.pd-tarefa-meta {

    display: flex;

    gap: 0.5rem;

    flex-wrap: wrap;

    font-size: 0.7rem;

    color: var(--text-muted);

}

.pd-tarefa-meta span {

    display: inline-flex;

    align-items: center;

    gap: 0.2rem;

}

.pd-tarefa-status {

    font-size: 0.65rem;

    font-weight: 700;

    padding: 0.15rem 0.45rem;

    border-radius: 99px;

    text-transform: uppercase;

    letter-spacing: 0.3px;

    white-space: nowrap;

}

.tag-pendente { background: #fef3c7; color: #92400e; }

.tag-concluida { background: #d1fae5; color: #065f46; }

.tag-atrasada { background: #fee2e2; color: #991b1b; }

.pd-tarefa-item input[type=checkbox] {

    width: 16px; height: 16px;

    accent-color: var(--accent);

    cursor: pointer;

}



/* ════════════════════════════════════════════════════════════════════════

   DIRETRIZES TÉCNICAS VCS — NOVA VIEW (ABAS + CHECKLIST)

   ════════════════════════════════════════════════════════════════════════ */



/* --- Header da View --- */

.view-header {

    display: flex;

    align-items: flex-start;

    justify-content: space-between;

    margin-bottom: 0.75rem;

    gap: 1rem;

    flex-wrap: wrap;

}

.view-header-titulo h2 {

    font-size: 1.3rem;

    font-weight: 700;

    color: var(--text);

    margin-bottom: 0.15rem;

}

.view-header-titulo .view-subtitulo {

    font-size: 0.85rem;

    color: var(--text-muted);

    font-weight: 400;

    margin: 0;

}

.view-header-acoes {

    display: flex;

    gap: 0.5rem;

    flex-shrink: 0;

}

.btn-outline {

    background: transparent;

    color: var(--vc-green);

    border: 1.5px solid var(--vc-green);

    padding: 0.5rem 1rem;

    border-radius: var(--radius-sm);

    font-weight: 600;

    font-size: 0.85rem;

    cursor: pointer;

    font-family: inherit;

    transition: all 0.15s;

    display: inline-flex;

    align-items: center;

    gap: 0.35rem;

}

.btn-outline:hover {

    background: var(--vc-green-soft);

}



/* --- Toolbar (dropdown + busca) --- */

.diretrizes-toolbar {

    margin-bottom: 1rem;

}

.diretrizes-toolbar .filtro-grupo {

    display: flex;

    gap: 0.75rem;

    flex-wrap: wrap;

}

.diretrizes-toolbar select {

    padding: 0.5rem 0.75rem;

    border-radius: var(--radius-sm);

    border: 1px solid var(--border-input);

    background: var(--surface);

    color: var(--text);

    font-size: 0.85rem;

    font-family: inherit;

    box-shadow: var(--shadow-sm);

    min-width: 200px;

    cursor: pointer;

}

.diretrizes-toolbar select:focus {

    outline: none;

    border-color: var(--vc-green);

}

.busca-wrapper {

    position: relative;

    flex: 1;

    min-width: 200px;

}

.busca-icone {

    position: absolute;

    left: 0.65rem;

    top: 50%;

    transform: translateY(-50%);

    color: var(--text-muted);

    pointer-events: none;

}

.busca-wrapper input {

    width: 100%;

    padding: 0.5rem 0.75rem 0.5rem 2.1rem;

    border-radius: var(--radius-sm);

    border: 1px solid var(--border-input);

    background: var(--surface);

    color: var(--text);

    font-size: 0.85rem;

    font-family: inherit;

    box-shadow: var(--shadow-sm);

    transition: border-color 0.15s;

}

.busca-wrapper input:focus {

    outline: none;

    border-color: var(--vc-green);

}

.busca-wrapper input::placeholder {

    color: var(--text-muted);

}



/* --- Abas de Categorias --- */

.diretrizes-abas {

    display: flex;

    gap: 0.35rem;

    margin-bottom: 1.25rem;

    overflow-x: auto;

    padding-bottom: 0.25rem;

    flex-wrap: nowrap;

}

.diretrizes-aba {

    display: flex;

    align-items: center;

    gap: 0.5rem;

    padding: 0.6rem 1rem;

    border-radius: var(--radius-sm);

    border: 1.5px solid var(--border);

    background: var(--surface);

    cursor: pointer;

    transition: all 0.15s;

    white-space: nowrap;

    font-size: 0.85rem;

    font-weight: 500;

    color: var(--text-secondary);

    font-family: inherit;

}

.diretrizes-aba:hover {

    border-color: var(--vc-green);

    color: var(--vc-green);

    background: var(--vc-green-soft);

}

.diretrizes-aba.active {

    border-color: var(--vc-green);

    background: var(--vc-green);

    color: #fff;

}

.diretrizes-aba .aba-icone {

    width: 20px; height: 20px;

    display: flex;

    align-items: center;

    justify-content: center;

    flex-shrink: 0;

}

.diretrizes-aba .aba-icone svg {

    width: 18px; height: 18px;

}

.diretrizes-aba .aba-nome {

    font-weight: 600;

}

.diretrizes-aba .aba-badge {

    background: rgba(0,0,0,0.08);

    padding: 0.15rem 0.5rem;

    border-radius: 99px;

    font-size: 0.7rem;

    font-weight: 600;

}

.diretrizes-aba.active .aba-badge {

    background: rgba(255,255,255,0.25);

}



/* --- Grid de Diretrizes --- */

.diretrizes-grid {

    display: flex;

    flex-direction: column;

    gap: 1rem;

}



/* --- Ambiente (subcategoria) --- */

.diretriz-ambiente {

    background: var(--surface);

    border: 1px solid var(--border-light);

    border-radius: var(--radius);

    overflow: hidden;

    box-shadow: var(--shadow-sm);

}

.diretriz-ambiente-header {

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 0.85rem 1rem;

    background: var(--vc-green-soft);

    border-bottom: 1px solid var(--border-light);

}

.diretriz-ambiente-header h3 {

    font-size: 0.85rem;

    font-weight: 700;

    color: var(--vc-green-dark);

    text-transform: uppercase;

    letter-spacing: 0.5px;

    margin: 0;

}

.diretriz-ambiente-header .ambiente-count {

    font-size: 0.75rem;

    color: var(--text-muted);

    font-weight: 500;

}

.diretriz-ambiente-body {

    padding: 0.25rem 0;

}



/* --- Item de Diretriz (checklist) --- */

.diretriz-item {

    display: flex;

    align-items: flex-start;

    gap: 0.65rem;

    padding: 0.65rem 1rem;

    border-bottom: 1px solid var(--border-light);

    transition: background 0.1s;

    cursor: default;

}

.diretriz-item:last-child {

    border-bottom: none;

}

.diretriz-item:hover {

    background: var(--vc-green-ghost);

}

.diretriz-item-check {

    flex-shrink: 0;

    margin-top: 2px;

}

.diretriz-item-check input[type=checkbox] {

    width: 18px; height: 18px;

    accent-color: var(--vc-green);

    cursor: pointer;

    border-radius: 4px;

}

.diretriz-item-icone {

    flex-shrink: 0;

    margin-top: 2px;

    color: var(--text-muted);

    opacity: 0.6;

}

.diretriz-item-icone svg {

    width: 16px; height: 16px;

}

.diretriz-item-conteudo {

    flex: 1;

    min-width: 0;

}

.diretriz-item-titulo {

    font-size: 0.875rem;

    font-weight: 500;

    color: var(--text);

    line-height: 1.4;

}

.diretriz-item-titulo.checked {

    text-decoration: line-through;

    color: var(--text-muted);

}

.diretriz-item-extra {

    display: flex;

    align-items: center;

    gap: 0.5rem;

    margin-top: 0.25rem;

}

.diretriz-item-obrigatorio {

    font-size: 0.7rem;

    color: var(--danger);

    font-weight: 600;

    background: var(--danger-soft);

    padding: 0.1rem 0.4rem;

    border-radius: 4px;

}

.diretriz-item-acoes {

    display: flex;

    gap: 0.25rem;

    flex-shrink: 0;

    opacity: 0;

    transition: opacity 0.15s;

}

.diretriz-item:hover .diretriz-item-acoes {

    opacity: 1;

}

.btn-icone {

    width: 28px; height: 28px;

    border-radius: var(--radius-xs);

    border: none;

    background: transparent;

    color: var(--text-muted);

    cursor: pointer;

    display: flex;

    align-items: center;

    justify-content: center;

    transition: all 0.12s;

    padding: 0;

}

.btn-icone:hover {

    background: var(--surface-hover);

    color: var(--text);

}

.btn-icone.editar:hover {

    color: var(--vc-green);

    background: var(--vc-green-soft);

}

.btn-icone.excluir:hover {

    color: var(--danger);

    background: var(--danger-soft);

}

.btn-icone svg {

    width: 15px; height: 15px;

}



/* --- Estado Vazio --- */

.diretriz-empty {

    text-align: center;

    padding: 2.5rem 1rem;

    color: var(--text-muted);

}

.diretriz-empty svg {

    width: 48px; height: 48px;

    opacity: 0.3;

    margin-bottom: 0.75rem;

}

.diretriz-empty p {

    font-size: 0.9rem;

    margin-bottom: 0.75rem;

}

.diretriz-empty .btn {

    display: inline-flex;

}



/* --- Loading Spinner --- */

.diretrizes-loading {

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 3rem;

    color: var(--text-muted);

}

.spinner {

    width: 32px; height: 32px;

    border: 3px solid var(--border);

    border-top-color: var(--vc-green);

    border-radius: 50%;

    animation: spin 0.8s linear infinite;

}

@keyframes spin {

    to { transform: rotate(360deg); }

}



/* --- Scrollbar customizada para abas --- */

.diretrizes-abas::-webkit-scrollbar {

    height: 4px;

}

.diretrizes-abas::-webkit-scrollbar-track {

    background: transparent;

}

.diretrizes-abas::-webkit-scrollbar-thumb {

    background: var(--border);

    border-radius: 4px;

}



/* ===== CONTAS DE ACESSO ===== */

/* Avatares coloridos dinâmicos */

#contas-acesso-tbody .user-avatar {

    width: 36px;

    height: 36px;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 13px;

    font-weight: 700;

    color: #fff;

    flex-shrink: 0;

    transition: transform 0.2s ease;

}

#contas-acesso-tbody tr:hover .user-avatar {

    transform: scale(1.1);

}



/* Badges de tipo */

.badge-admin {

    background: linear-gradient(135deg, #7c3aed, #a855f7);

    color: #fff;

    padding: 3px 10px;

    border-radius: 20px;

    font-size: 11px;

    font-weight: 600;

    letter-spacing: 0.3px;

}

.badge-user {

    background: linear-gradient(135deg, #2563eb, #3b82f6);

    color: #fff;

    padding: 3px 10px;

    border-radius: 20px;

    font-size: 11px;

    font-weight: 600;

    letter-spacing: 0.3px;

}



/* Status badge */

.status-badge {

    display: inline-flex;

    align-items: center;

    gap: 6px;

    padding: 4px 12px;

    border-radius: 20px;

    font-size: 12px;

    font-weight: 600;

    transition: all 0.2s ease;

}

.status-badge.status-ativo {

    background: rgba(34, 197, 94, 0.12);

    color: #22c55e;

}

.status-badge.status-inativo {

    background: rgba(239, 68, 68, 0.12);

    color: #ef4444;

}

.status-badge:hover {

    filter: brightness(1.1);

    transform: scale(1.02);

}



/* Botões de ação */

#contas-acesso-tbody .btn-sm {

    padding: 6px 10px;

    border-radius: 6px;

    font-size: 12px;

    cursor: pointer;

    transition: all 0.2s ease;

}

#contas-acesso-tbody .btn-sm:hover {

    filter: brightness(1.1);

    transform: translateY(-1px);

}



/* Célula de email */

#contas-acesso-tbody td:nth-child(2) {

    color: var(--text-muted);

    font-size: 13px;

}



/* Responsável */

#contas-acesso-tbody td:nth-child(5) {

    color: var(--text-muted);

    font-size: 13px;

}



/* Filtros */

.filters-row select,

.filters-row input {

    transition: border-color 0.2s ease, box-shadow 0.2s ease;

}

.filters-row select:focus,

.filters-row input:focus {

    border-color: var(--primary) !important;

    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);

    outline: none;

}





/* ===== MODAL CONTA ACESSO ===== */

#modal-conta-acesso .modal {

    background: #FFFFFF;

    border-radius: 16px;

    box-shadow: 0 25px 60px rgba(0,0,0,0.3);

    border: 1px solid #D0D5DD;

}



#modal-conta-acesso .modal-overlay {

    background: rgba(15,23,42,0.65);

    backdrop-filter: blur(4px);

}



#modal-conta-acesso .modal-header {

    border-bottom: 1px solid #E4E7EC;

    padding: 20px 24px;

}



#modal-conta-acesso .modal-header h3 {

    color: #101828;

    font-size: 1.1rem;

    font-weight: 700;

}



#modal-conta-acesso .section-title {

    color: #344054;

    font-size: 11px;

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: 0.8px;

    margin-bottom: 12px;

    padding-bottom: 6px;

    border-bottom: 1.5px solid #D0D5DD;

}



#modal-conta-acesso .form-group label:not([for]) {

    color: #344054;

    font-size: 13px;

    font-weight: 600;

    margin-bottom: 4px;

    display: block;

}



#modal-conta-acesso .form-control {

    background: #FFFFFF;

    border: 1.5px solid #D0D5DD;

    color: #101828;

    padding: 10px 14px;

    border-radius: 10px;

    font-size: 14px;

    transition: all 0.2s ease;

    width: 100%;

    box-sizing: border-box;

}



#modal-conta-acesso .form-control:hover {

    border-color: #98A2B3;

}



#modal-conta-acesso .form-control:focus {

    border-color: #3A5C55;

    box-shadow: 0 0 0 3px rgba(58,92,85,0.12);

    outline: none;

}



#modal-conta-acesso .form-control::placeholder {

    color: #98A2B3;

}



#modal-conta-acesso small {

    color: #667085;

    font-size: 12px;

}



#modal-conta-acesso .btn-primary {

    background: #3A5C55;

    color: #fff;

    border: none;

    padding: 10px 24px;

    border-radius: 10px;

    font-size: 14px;

    font-weight: 600;

    cursor: pointer;

    transition: all 0.2s ease;

}



#modal-conta-acesso .btn-primary:hover {

    background: #2E4A44;

    transform: translateY(-1px);

    box-shadow: 0 4px 12px rgba(58,92,85,0.3);

}



#modal-conta-acesso .btn-secondary {

    background: #FFFFFF;

    color: #344054;

    border: 1.5px solid #D0D5DD;

    padding: 10px 24px;

    border-radius: 10px;

    font-size: 14px;

    font-weight: 600;

    cursor: pointer;

    transition: all 0.2s ease;

}



#modal-conta-acesso .btn-secondary:hover {

    background: #F9FAFB;

    border-color: #98A2B3;

}



#modal-conta-acesso input[type="checkbox"] {

    width: 18px;

    height: 18px;

    accent-color: #3A5C55;

    cursor: pointer;

}



#modal-conta-acesso select.form-control {

    appearance: auto;

    cursor: pointer;

}



#modal-conta-acesso .modal-header {

    padding: 20px 24px;

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

    display: flex;

    align-items: center;

    justify-content: space-between;

}



#modal-conta-acesso .modal-body {

    padding: 20px 24px;

}



#modal-conta-acesso .modal-footer {

    padding: 16px 24px;

    border-top: 1px solid var(--border);

}



#modal-conta-acesso .form-group {

    margin-bottom: 14px;

}



#modal-conta-acesso .form-group label {

    display: block;

    font-size: 13px;

    font-weight: 600;

    margin-bottom: 4px;

    color: var(--text);

}



#modal-conta-acesso .form-control {

    width: 100%;

    padding: 9px 12px;

    border-radius: 8px;

    border: 1px solid var(--border);

    background: var(--bg);

    color: var(--text);

    font-size: 14px;

    transition: border-color 0.2s;

    box-sizing: border-box;

}



#modal-conta-acesso .form-control:focus {

    border-color: var(--primary);

    outline: none;

    box-shadow: 0 0 0 3px rgba(37,99,235,0.15);

}



/* Botão excluir no modal */

#modal-conta-acesso .btn-danger {

    display: inline-flex;

    align-items: center;

    gap: 4px;

    background: linear-gradient(135deg, #dc2626, #ef4444);

    color: #fff;

    border: none;

    padding: 8px 16px;

    border-radius: 8px;

    cursor: pointer;

    font-weight: 500;

    font-size: 13px;

    transition: all 0.2s ease;

}

#modal-conta-acesso .btn-danger:hover {

    filter: brightness(1.15);

    transform: translateY(-1px);

    box-shadow: 0 4px 12px rgba(220,38,38,0.3);

}



/* Badge admin no select */

#conta-acesso-tipo option[value="admin"] {

    color: #7c3aed;

    font-weight: 600;

}



/* Sidebar icon para usuarios */

.sidebar-link[data-view="contas-acesso"] .sidebar-icon {

    font-size: 16px;

}

/* ============================================= */

/* DASHBOARD SEMANAL v2 — Clean Design           */

/* ============================================= */



/* Header */

.ds-header-v2 {

    display: flex;

    justify-content: space-between;

    align-items: center;

    margin-bottom: 28px;

    flex-wrap: wrap;

    gap: 14px;

}

.ds-header-left {

    display: flex;

    align-items: center;

    gap: 14px;

}

.logo-icon {

    width: 40px;

    height: 40px;

    background: linear-gradient(135deg, #0b8a5e 0%, #57b88a 100%);

    border-radius: 12px;

    display: flex;

    align-items: center;

    justify-content: center;

    color: #fff;

    flex-shrink: 0;

    position: relative;

    overflow: hidden;

}

.logo-icon::after {

    content: '';

    position: absolute;

    bottom: -4px;

    right: -4px;

    width: 18px;

    height: 18px;

    background: rgba(255,255,255,0.15);

    border-radius: 50%;

}

.ds-title-v2 {

    font-size: 22px;

    font-weight: 700;

    color: #172b4d;

    letter-spacing: -0.3px;

}

.ds-title-v2 small {

    font-weight: 400;

    font-size: 14px;

    color: #6b778c;

    margin-left: 10px;

}

.ds-nav-v2 {

    display: flex;

    align-items: center;

    gap: 6px;

    background: #fff;

    padding: 4px;

    border-radius: 10px;

    box-shadow: 0 1px 2px rgba(0,0,0,0.04);

    border: 1px solid #e3e5e9;

}

.ds-nav-v2 button {

    background: none;

    border: none;

    padding: 7px 14px;

    border-radius: 7px;

    font-size: 13px;

    font-weight: 500;

    color: #42526e;

    cursor: pointer;

    transition: all 0.15s;

}

.ds-nav-v2 button:hover {

    background: #f4f5f7;

    color: #172b4d;

}

.ds-nav-v2 .ds-semana-label {

    font-size: 13px;

    font-weight: 600;

    color: #172b4d;

    padding: 0 10px;

    min-width: 170px;

    text-align: center;

}

.ds-nav-v2 .sep { width: 1px; height: 22px; background: #e3e5e9; }

.ds-nav-v2 .btn-download {

    background: #f4f5f7;

    border-radius: 7px;

    padding: 7px 12px;

    font-size: 13px;

    display: flex;

    align-items: center;

    gap: 6px;

    color: #42526e;

}

.ds-nav-v2 .btn-download:hover { background: #e3e5e9; }



/* KPIs */

.kpi-grid {

    display: grid;

    grid-template-columns: repeat(4, 1fr);

    gap: 10px;

    margin-bottom: 28px;

}

.kpi-card {

    background: #fff;

    border-radius: 12px;

    padding: 18px 20px;

    border: 1px solid #e3e5e9;

    transition: all 0.2s;

    position: relative;

    overflow: hidden;

}

.kpi-card::before {

    content: '';

    position: absolute;

    top: 0;

    left: 0;

    right: 0;

    height: 3px;

}

.kpi-card:hover {

    box-shadow: 0 3px 10px rgba(0,0,0,0.06);

}

.kpi-card .kpi-header {

    display: flex;

    align-items: center;

    gap: 8px;

    margin-bottom: 10px;

}

.kpi-card .kpi-icon {

    width: 32px;

    height: 32px;

    border-radius: 8px;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 14px;

    font-weight: 600;

    border: 1.5px solid;

}

.kpi-card .kpi-label {

    font-size: 12px;

    font-weight: 600;

    color: #6b778c;

    text-transform: uppercase;

    letter-spacing: 0.4px;

}

.kpi-card .kpi-value {

    font-size: 30px;

    font-weight: 700;

    letter-spacing: -1px;

    line-height: 1.1;

    margin-bottom: 2px;

}

.kpi-card .kpi-sub {

    font-size: 11px;

    color: #6b778c;

    font-weight: 400;

}

.kpi-card.kpi-open::before { background: #0065ff; }

.kpi-card.kpi-open .kpi-icon { color: #0065ff; border-color: rgba(0,101,255,0.2); background: rgba(0,101,255,0.05); }

.kpi-card.kpi-open .kpi-value { color: #0065ff; }

.kpi-card.kpi-done::before { background: #0b8a5e; }

.kpi-card.kpi-done .kpi-icon { color: #0b8a5e; border-color: rgba(11,138,94,0.2); background: rgba(11,138,94,0.05); }

.kpi-card.kpi-done .kpi-value { color: #0b8a5e; }

.kpi-card.kpi-dep::before { background: #e56910; }

.kpi-card.kpi-dep .kpi-icon { color: #e56910; border-color: rgba(229,105,16,0.2); background: rgba(229,105,16,0.05); }

.kpi-card.kpi-dep .kpi-value { color: #e56910; }

.kpi-card.kpi-late::before { background: #de350b; }

.kpi-card.kpi-late .kpi-icon { color: #de350b; border-color: rgba(222,53,11,0.2); background: rgba(222,53,11,0.05); }

.kpi-card.kpi-late .kpi-value { color: #de350b; }

.kpi-card.kpi-due::before { background: #5243aa; }

.kpi-card.kpi-due .kpi-icon { color: #5243aa; border-color: rgba(82,67,170,0.2); background: rgba(82,67,170,0.05); }

.kpi-card.kpi-due .kpi-value { color: #5243aa; }



/* Seções */

.section-title-v2 {

    display: flex;

    align-items: center;

    gap: 10px;

    margin-bottom: 14px;

    margin-top: 32px;

}

.section-title-v2 h2 {

    font-size: 16px;

    font-weight: 600;

    color: #172b4d;

}

.section-title-v2 .section-count {

    font-size: 11px;

    font-weight: 500;

    color: #6b778c;

    background: #e3e5e9;

    padding: 2px 10px;

    border-radius: 20px;

}



/* Gráficos */

.charts-grid {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 14px;

    margin-bottom: 14px;

}

.chart-card {

    background: #fff;

    border-radius: 12px;

    padding: 22px 24px;

    border: 1px solid #e3e5e9;

}

.chart-card .chart-card-title {

    font-size: 12px;

    font-weight: 600;

    color: #6b778c;

    text-transform: uppercase;

    letter-spacing: 0.4px;

    margin-bottom: 18px;

}



/* Barras */

.bar-row {

    display: flex;

    align-items: center;

    gap: 12px;

    margin-bottom: 10px;

}

.bar-row:last-child { margin-bottom: 0; }

.bar-label {

    width: 160px;

    font-size: 13px;

    font-weight: 500;

    color: #42526e;

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;

    flex-shrink: 0;

}

.bar-track {

    flex: 1;

    height: 24px;

    background: #f4f5f7;

    border-radius: 6px;

    overflow: hidden;

}

.bar-fill {

    height: 100%;

    border-radius: 6px;

    display: flex;

    align-items: center;

    padding: 0 10px;

    font-size: 11px;

    font-weight: 600;

    color: #fff;

    transition: width 0.5s ease;

    min-width: 36px;

}

.bar-fill.c1 { background: #57b88a; }

.bar-fill.c2 { background: #5aafc4; }

.bar-fill.c3 { background: #958bcb; }

.bar-fill.c4 { background: #eba15b; }

.bar-fill.c5 { background: #e07358; }



/* Tabelas */

.tables-grid {

    display: grid;

    grid-template-columns: 1fr 1fr 1fr;

    gap: 14px;

    min-height: 0;

    overflow: auto;

}

.table-card {

    background: #fff;

    border-radius: 12px;

    border: 1px solid #e3e5e9;

    display: flex;

    flex-direction: column;

    max-height: min(480px, 55vh);

}

.table-card-header {

    padding: 14px 18px;

    border-bottom: 1px solid #f0f0f5;

    display: flex;

    align-items: center;

    gap: 10px;

    flex-shrink: 0;

}

.table-card-header .tc-icon {

    width: 28px;

    height: 28px;

    border-radius: 7px;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 13px;

    font-weight: 600;

    border: 1.5px solid;

}

.table-card-header .tc-label {

    font-size: 13px;

    font-weight: 600;

    color: #172b4d;

}

.table-card-header .tc-count {

    font-size: 11px;

    font-weight: 500;

    color: #6b778c;

    background: #f4f5f7;

    padding: 2px 10px;

    border-radius: 20px;

    margin-left: auto;

}

.table-card-scroll {

    flex: 1;

    overflow-y: auto;

}

@media (max-width: 1100px) {
    .tables-grid {
        grid-template-columns: 1fr 1fr;
        max-height: 70vh;
        overflow-y: auto;
    }
    .table-card {
        max-height: min(350px, 40vh);
    }
}

@media (max-width: 700px) {
    .tables-grid {
        grid-template-columns: 1fr;
        max-height: 60vh;
        overflow-y: auto;
    }
}

.table-card-scroll::-webkit-scrollbar { width: 4px; }

.table-card-scroll::-webkit-scrollbar-track { background: transparent; }

.table-card-scroll::-webkit-scrollbar-thumb { background: #e3e5e9; border-radius: 4px; }



/* Grupos */

.ds-group { border-bottom: 1px solid #f0f0f5; }

.ds-group:last-child { border-bottom: none; }

.ds-group-header {

    display: flex;

    align-items: center;

    gap: 8px;

    padding: 10px 18px;

    cursor: pointer;

    transition: background 0.12s;

    user-select: none;

}

.ds-group-header:hover { background: #f4f5f7; }

.gg-toggle {

    font-size: 10px;

    color: #6b778c;

    transition: transform 0.2s;

    width: 14px;

    text-align: center;

    flex-shrink: 0;

}

.gg-toggle.open { transform: rotate(90deg); }

.gg-avatar {

    width: 22px;

    height: 22px;

    border-radius: 50%;

    background: rgba(11,138,94,0.12);

    color: #0b8a5e;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 10px;

    font-weight: 700;

    flex-shrink: 0;

}

.gg-name { font-size: 13px; font-weight: 600; color: #172b4d; }

.gg-count {

    font-size: 11px;

    color: #6b778c;

    background: #f4f5f7;

    padding: 1px 8px;

    border-radius: 20px;

    margin-left: auto;

    flex-shrink: 0;

}

.ds-group-body {

    overflow: hidden;

    max-height: 0;

    transition: max-height 0.3s ease;

}

.ds-group-body.open { max-height: 2000px; }

.ds-group-body table {

    width: 100%;

    border-collapse: collapse;

    font-size: 12px;

}

.ds-group-body th {

    text-align: left;

    padding: 6px 18px;

    font-weight: 500;

    color: #6b778c;

    font-size: 10.5px;

    text-transform: uppercase;

    letter-spacing: 0.3px;

    background: #fafbfc;

    border-top: 1px solid #f0f0f5;

    position: sticky;

    top: 0;

    z-index: 1;

}

.ds-group-body td {

    padding: 8px 18px;

    border-top: 1px solid #f0f0f5;

    color: #172b4d;

}

.ds-group-body td small { color: #6b778c; font-weight: 400; }

.ds-group-body tr:hover td { background: #fafbfc; }

.tag-late { color: #de350b; font-weight: 600; font-size: 11px; }

.tag-day { font-weight: 500; color: #0085a1; }



/* Download */

.ds-download-hidden { display: none !important; }



/* Responsivo */

@media (max-width: 1000px) {

    .kpi-grid { grid-template-columns: repeat(3, 1fr); }

    .charts-grid { grid-template-columns: 1fr; }

    .tables-grid { grid-template-columns: 1fr; }

}

@media (max-width: 640px) {

    .kpi-grid { grid-template-columns: 1fr 1fr; }

    .ds-header-v2 { flex-direction: column; align-items: flex-start; }

}



/* ===== CLIENTES v2 ===== */

.cliente-card {

    background:#fff;

    border-radius:12px;

    padding:18px;

    display:flex;

    flex-direction:column;

    gap:12px;

    box-shadow:0 1px 3px rgba(0,0,0,0.06),0 1px 2px rgba(0,0,0,0.04);

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

    border:1px solid #e8eaed;

}

.cliente-card:hover {

    box-shadow:0 4px 12px rgba(0,0,0,0.08);

    transform:translateY(-1px);

}

.cliente-card-top {

    display:flex;

    align-items:center;

    gap:14px;

}

.cliente-avatar {

    width:44px;

    height:44px;

    border-radius:12px;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:15px;

    font-weight:700;

    color:#fff;

    flex-shrink:0;

    letter-spacing:0.5px;

}

.cliente-info {

    flex:1;

    min-width:0;

}

.cliente-nome {

    font-size:15px;

    font-weight:600;

    color:#172b4d;

    margin:0 0 3px;

    white-space:nowrap;

    overflow:hidden;

    text-overflow:ellipsis;

}

.cliente-email {

    font-size:12px;

    color:#6b778c;

    margin:0;

    white-space:nowrap;

    overflow:hidden;

    text-overflow:ellipsis;

}

.cliente-badges {

    display:flex;

    gap:6px;

    flex-wrap:wrap;

}

.badge-status {

    font-size:11px;

    font-weight:600;

    padding:2px 10px;

    border-radius:20px;

    display:inline-flex;

    align-items:center;

    gap:4px;

}

.badge-status.ativo {

    background:#e6f9f0;

    color:#0b8a5e;

}

.badge-status.inativo {

    background:#ffe8e5;

    color:#de350b;

}

.badge-status.andamento {

    background:#e3fcef;

    color:#0b8a5e;

}

.badge-status.concluido {

    background:#d4edda;

    color:#155724;

}

.badge-status.pendente {

    background:#fff3cd;

    color:#856404;

}

.badge-status.paralisado {

    background:#f8d7da;

    color:#721c24;

}

.badge-tipo {

    font-size:11px;

    font-weight:600;

    padding:2px 10px;

    border-radius:20px;

    background:#eef2ff;

    color:#0065ff;

}

.cliente-detalhes {

    display:flex;

    gap:16px;

    flex-wrap:wrap;

    padding:10px 0 0;

    border-top:1px solid #f0f1f3;

    font-size:12px;

    color:#6b778c;

}

.cliente-detalhes span {

    display:flex;

    align-items:center;

    gap:5px;

}

.cliente-detalhes .destaque {

    color:#172b4d;

    font-weight:600;

}

.cliente-actions {

    display:flex;

    gap:8px;

    justify-content:flex-end;

    padding-top:4px;

}

.cliente-actions button {

    background:transparent;

    border:1px solid #e3e5e9;

    border-radius:6px;

    padding:5px 12px;

    font-size:12px;

    font-weight:500;

    cursor:pointer;

    color:#505f79;

    transition:all 0.12s;

    font-family:inherit;

}

.cliente-actions button:hover {

    background:#f4f5f7;

    border-color:#c1c7cd;

}

.cliente-actions .btn-edit {

    color:#0065ff;

}

.cliente-actions .btn-edit:hover {

    background:#eef2ff;

    border-color:#0065ff;

}

.cliente-actions .btn-del {

    color:#de350b;

}

.cliente-actions .btn-del:hover {

    background:#ffe8e5;

    border-color:#de350b;

}

.cliente-busca-highlight {

    background:#fff3cd;

    padding:0 2px;

    border-radius:2px;

}



/* === Cores dos Avatares === */

.avatar-c0 { background:linear-gradient(135deg,#0065ff,#5a9cff); }

.avatar-c1 { background:linear-gradient(135deg,#0b8a5e,#36b37e); }

.avatar-c2 { background:linear-gradient(135deg,#de350b,#ff7452); }

.avatar-c3 { background:linear-gradient(135deg,#722ed1,#b37feb); }

.avatar-c4 { background:linear-gradient(135deg,#e87800,#ffa940); }

.avatar-c5 { background:linear-gradient(135deg,#0085a1,#5fc8dd); }

.avatar-c6 { background:linear-gradient(135deg,#bf2600,#ff8f73); }

.avatar-c7 { background:linear-gradient(135deg,#42526e,#6b778c); }



/* ═══ INFORMAÇÕES GERAIS DO PROJETO (INFO GRID) ═══ */

.info-grid {

    display: grid;

    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));

    gap: 1rem;

    margin-top: 1rem;

}



.info-card {

    background: var(--surface);

    border: 1px solid var(--border-light);

    border-radius: var(--radius);

    padding: 1.25rem;

    transition: box-shadow 0.2s;

}



.info-card:hover {

    box-shadow: var(--shadow);

}



.info-card-header {

    display: flex;

    align-items: center;

    gap: 0.5rem;

    margin-bottom: 1rem;

    padding-bottom: 0.75rem;

    border-bottom: 1px solid var(--border-light);

}



.info-card-header .icone {

    font-size: 1.3rem;

}



.info-card-header h3 {

    font-size: 0.85rem;

    font-weight: 600;

    color: var(--text-secondary);

    text-transform: uppercase;

    letter-spacing: 0.5px;

    margin: 0;

}



.info-card-body {

    display: flex;

    flex-direction: column;

    gap: 0.6rem;

}



.info-field {

    display: flex;

    flex-direction: column;

    gap: 0.15rem;

}



.info-field .label {

    font-size: 0.7rem;

    font-weight: 600;

    color: var(--text-muted);

    text-transform: uppercase;

    letter-spacing: 0.3px;

}



.info-field .value {

    font-size: 0.95rem;

    color: var(--text);

    font-weight: 500;

}



.info-field .value.status-badge {

    display: inline-flex;

    align-items: center;

    gap: 0.35rem;

    padding: 0.2rem 0.65rem;

    border-radius: 20px;

    font-size: 0.8rem;

    font-weight: 600;

    width: fit-content;

}



.status-badge.ativo { background: #E8F5E9; color: #2E7D32; }

.status-badge.pausado { background: #FFF3E0; color: #E65100; }

.status-badge.concluido { background: #E3F2FD; color: #1565C0; }



.info-field .value.cliente-link {

    color: var(--vc-green);

    cursor: pointer;

    text-decoration: underline;

    text-underline-offset: 2px;

}



.info-field .value.cliente-link:hover {

    color: var(--vc-green-dark);

}



.info-progresso-bar {

    height: 8px;

    background: var(--border);

    border-radius: 4px;

    overflow: hidden;

    margin-top: 0.25rem;

}



.info-progresso-fill {

    height: 100%;

    background: var(--vc-green);

    border-radius: 4px;

    transition: width 0.5s ease;

}



.info-metrica {

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 0.5rem 0;

    border-bottom: 1px solid var(--border-light);

}



.info-metrica:last-child {

    border-bottom: none;

}



.info-metrica .metrica-label {

    font-size: 0.8rem;

    color: var(--text-secondary);

}



.info-metrica .metrica-value {

    font-size: 1rem;

    font-weight: 700;

    color: var(--text);

}



.info-obs-textarea {

    width: 100%;

    min-height: 80px;

    padding: 0.6rem;

    border: 1px solid var(--border);

    border-radius: var(--radius-sm);

    background: var(--bg);

    color: var(--text);

    font-size: 0.85rem;

    font-family: inherit;

    resize: vertical;

    transition: border-color 0.15s;

}



.info-obs-textarea:focus {

    outline: none;

    border-color: var(--vc-green);

    box-shadow: 0 0 0 2px var(--vc-green-ghost);

}



.info-salvar-obs {

    align-self: flex-end;

    margin-top: 0.5rem;

}







/* ═════════════════════════════════════════════════════════════════════

   VIEW: TEMPLATES — Tarefas agrupadas por etapa

   ═════════════════════════════════════════════════════════════════════ */



#view-templates .checklist-grupo {

    background: var(--surface, #ffffff);

    border: 1px solid var(--border-light, #e5e7eb);

    border-radius: var(--radius, 10px);

    margin-bottom: 0.75rem;

    overflow: hidden;

    box-shadow: var(--shadow-sm, 0 1px 3px rgba(0,0,0,0.04));

    transition: box-shadow 0.2s ease;

}

#view-templates .checklist-grupo:hover {

    box-shadow: var(--shadow, 0 4px 12px rgba(0,0,0,0.06));

}



#view-templates .checklist-grupo-header {

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 0.85rem 1.1rem;

    cursor: pointer;

    user-select: none;

    transition: background 0.15s;

    border-bottom: 1px solid var(--border-light, #e5e7eb);

}

#view-templates .checklist-grupo-header:hover {

    background: rgba(0,0,0,0.02);

}

#view-templates .grupo-header-left {

    display: flex;

    align-items: center;

    gap: 0.65rem;

}

#view-templates .grupo-header-left h4 {

    font-size: 0.95rem;

    font-weight: 600;

    color: var(--text, #111827);

    margin: 0;

}

#view-templates .grupo-toggle {

    font-size: 0.7rem;

    color: var(--text-muted, #9ca3af);

    transition: transform 0.2s;

    width: 16px;

    text-align: center;

}

#view-templates .checklist-grupo.collapsed .grupo-toggle {

    transform: rotate(0deg);

}

#view-templates .grupo-header-right {

    display: flex;

    align-items: center;

    gap: 0.75rem;

}

#view-templates .grupo-header-right .tarefa-meta {

    font-size: 0.78rem;

    color: var(--text-muted, #9ca3af);

    white-space: nowrap;

}

#view-templates .badge {

    display: inline-flex;

    align-items: center;

    padding: 0.15rem 0.55rem;

    border-radius: 12px;

    font-size: 0.7rem;

    font-weight: 600;

    background: rgba(58, 92, 85, 0.08);

    color: var(--vc-green-dark, #2d5a4e);

}



#view-templates .checklist-itens {

    padding: 0.5rem 0;

    transition: max-height 0.3s ease, opacity 0.2s ease;

    overflow: hidden;

}

#view-templates .checklist-grupo.collapsed .checklist-itens {

    max-height: 0 !important;

    padding: 0;

    opacity: 0;

}



#view-templates .checklist-item {

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 0.6rem 1.1rem;

    transition: background 0.15s;

    border-bottom: 1px solid rgba(0,0,0,0.03);

}

#view-templates .checklist-item:last-child {

    border-bottom: none;

}

#view-templates .checklist-item:hover {

    background: rgba(0,0,0,0.015);

}



#view-templates .checklist-item-content {

    display: flex;

    align-items: center;

    gap: 1rem;

    flex: 1;

    min-width: 0;

}

#view-templates .tarefa-titulo {

    font-size: 0.88rem;

    font-weight: 500;

    color: var(--text, #111827);

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;

}

#view-templates .tarefa-meta {

    display: flex;

    align-items: center;

    gap: 0.6rem;

    flex-shrink: 0;

    font-size: 0.78rem;

    color: var(--text-secondary, #6b7280);

}



#view-templates .checklist-item-actions {

    display: flex;

    align-items: center;

    gap: 0.2rem;

    opacity: 0;

    transition: opacity 0.2s;

    flex-shrink: 0;

    margin-left: 0.5rem;

}

#view-templates .checklist-item:hover .checklist-item-actions {

    opacity: 1;

}



#view-templates .add-tarefa-btn {

    display: block;

    width: calc(100% - 2.2rem);

    margin: 0.4rem 1.1rem 0.6rem;

    padding: 0.45rem;

    border: 1px dashed var(--border, #d1d5db);

    border-radius: 8px;

    background: transparent;

    color: var(--text-muted, #9ca3af);

    font-size: 0.8rem;

    font-weight: 500;

    cursor: pointer;

    transition: all 0.2s;

    text-align: center;

    font-family: inherit;

}

#view-templates .add-tarefa-btn:hover {

    border-color: var(--vc-green-light, #6a9c8e);

    color: var(--vc-green, #3a5c55);

    background: rgba(58, 92, 85, 0.04);

}



#view-templates .empty-state {

    text-align: center;

    padding: 3rem 2rem;

    color: var(--text-muted, #9ca3af);

}

#view-templates .empty-state p {

    font-size: 0.9rem;

    margin-bottom: 1rem;

}



/* ═════════════════════════════════════════════════════════════════════

   RELATÓRIO DE OBRAS — PAINEL (aba Projetos)

   ═════════════════════════════════════════════════════════════════════ */



/* ─── Listagem de Relatórios ─── */

.relob-list-header {

    display: flex; align-items: center; justify-content: space-between;

    margin-bottom: 1.25rem; gap: 1rem;

}

.relob-list-header h3 {

    font-size: 1.05rem; font-weight: 600; color: var(--text);

    margin: 0;

}

.relob-list-empty {

    text-align: center; padding: 3rem 2rem; color: var(--text-muted, #999);

}

.relob-list-empty p { font-size: 0.9rem; margin-bottom: 0.5rem; }

.relob-list-item {

    display: flex; align-items: center; gap: 1rem;

    padding: 0.85rem 1rem; background: var(--surface, #fff);

    border: 1px solid var(--border-light, #eee); border-radius: var(--radius, 8px);

    margin-bottom: 0.5rem; transition: all 0.15s;

}

.relob-list-item:hover {

    border-color: var(--vc-green-light, #6a9c8e);

    box-shadow: var(--shadow-sm, 0 1px 3px rgba(0,0,0,0.04));

}

.relob-list-item .relob-data {

    font-weight: 600; font-size: 0.9rem; color: var(--text);

    min-width: 100px;

}

.relob-list-item .relob-status {

    font-size: 0.78rem; padding: 0.15rem 0.6rem; border-radius: 10px;

    font-weight: 500;

}

.relob-list-item .relob-status.rascunho {

    background: #FFF7ED; color: #D97706;

}

.relob-list-item .relob-status.gerado {

    background: #ECFDF5; color: #059669;

}

.relob-list-item .relob-acoes {

    margin-left: auto; display: flex; gap: 0.35rem;

}

.relob-list-item .relob-acoes button {

    padding: 0.35rem 0.7rem; border-radius: 6px; border: 1px solid var(--border, #ddd);

    background: var(--surface, #fff); cursor: pointer; font-size: 0.78rem;

    font-family: inherit; color: var(--text-secondary); transition: all 0.12s;

}

.relob-list-item .relob-acoes button:hover {

    border-color: var(--vc-green-light); color: var(--vc-green);

}



/* ─── Editor do Relatório (Painel) ─── */

#aba-projeto-relatorios .relob-painel {

    padding: 0;

}

#aba-projeto-relatorios .relob-painel .card {

    background: var(--surface, #fff);

    border-radius: 12px; padding: 1.5rem 1.75rem;

    margin-bottom: 1.25rem;

    box-shadow: 0 1px 3px rgba(0,0,0,0.04);

    border: 1px solid var(--border-light, #eee);

}

#aba-projeto-relatorios .relob-painel .card-title {

    font-size: 0.85rem; font-weight: 700; text-transform: uppercase;

    letter-spacing: 0.5px; color: var(--vc-green, #3a5c55);

    margin-bottom: 1.1rem;

    display: flex; align-items: center; gap: 8px;

}

#aba-projeto-relatorios .relob-painel .card-count {

    background: var(--vc-green-soft, #e8f0ed);

    color: var(--vc-green, #3a5c55);

    border-radius: 20px; padding: 0 10px; font-size: 0.75rem;

    line-height: 22px; font-weight: 600; margin-left: auto;

}

#aba-projeto-relatorios .relob-painel .grid-2 {

    display: grid; grid-template-columns: 1fr 1fr; gap: 0.85rem;

}

@media (max-width:640px) {

    #aba-projeto-relatorios .relob-painel .grid-2 { grid-template-columns: 1fr; }

}

#aba-projeto-relatorios .relob-painel .field label {

    display: block; font-size: 0.75rem; font-weight: 500;

    color: var(--text-muted, #999); margin-bottom: 0.25rem;

}

#aba-projeto-relatorios .relob-painel .field input,

#aba-projeto-relatorios .relob-painel .field textarea {

    width: 100%; padding: 0.6rem 0.85rem;

    border: 1.5px solid var(--border-input, #d0d0d0);

    border-radius: 8px; font-size: 0.88rem; font-family: inherit;

    transition: border 0.2s, box-shadow 0.2s; background: var(--surface, #fff);

    color: var(--text);

}

#aba-projeto-relatorios .relob-painel .field input:focus,

#aba-projeto-relatorios .relob-painel .field textarea:focus {

    outline: none;

    border-color: var(--vc-green, #3a5c55);

    box-shadow: 0 0 0 3px rgba(58,92,85,0.1);

}

#aba-projeto-relatorios .relob-painel .field textarea {

    resize: vertical; min-height: 60px;

}



/* ─── Listas iteráveis ─── */

#aba-projeto-relatorios .relob-painel .list-items { margin-top: 0.5rem; }

#aba-projeto-relatorios .relob-painel .list-placeholder {

    font-size: 0.82rem; color: #aaa; padding: 0.75rem 0; text-align: center;

}

#aba-projeto-relatorios .relob-painel .list-item {

    display: flex; align-items: center; gap: 0.6rem;

    padding: 0.5rem 0.75rem; background: var(--bg, #f5f5f5);

    border-radius: 8px; margin-bottom: 0.35rem;

    border: 1px solid var(--border-light, #eee);

    transition: all 0.12s;

}

#aba-projeto-relatorios .relob-painel .list-item:hover { background: #f0f2f5; }

#aba-projeto-relatorios .relob-painel .item-numero {

    width: 26px; height: 26px; background: var(--vc-green, #3a5c55);

    color: #fff; border-radius: 50%; font-size: 0.75rem; font-weight: 600;

    display: flex; align-items: center; justify-content: center;

    flex-shrink: 0;

}

#aba-projeto-relatorios .relob-painel .item-texto { flex: 1; min-width: 0; }

#aba-projeto-relatorios .relob-painel .item-texto input {

    width: 100%; border: 1px solid transparent; background: transparent;

    font-size: 0.88rem; font-family: inherit; padding: 0.25rem 0.4rem;

    border-radius: 4px; transition: all 0.15s;

}

#aba-projeto-relatorios .relob-painel .item-texto input:hover { border-color: #ddd; }

#aba-projeto-relatorios .relob-painel .item-texto input:focus {

    border-color: var(--vc-green, #3a5c55); outline: none;

    background: var(--surface, #fff);

    box-shadow: 0 0 0 2px rgba(58,92,85,0.08);

}

#aba-projeto-relatorios .relob-painel .btn-item-remove {

    width: 28px; height: 28px; border: none; border-radius: 6px;

    cursor: pointer; font-size: 0.88rem; background: transparent;

    display: flex; align-items: center; justify-content: center;

    flex-shrink: 0; transition: all 0.15s; color: #aaa;

}

#aba-projeto-relatorios .relob-painel .btn-item-remove:hover { background: #fce8e6; color: #d93025; }

#aba-projeto-relatorios .relob-painel .btn-add {

    display: flex; align-items: center; gap: 0.35rem;

    padding: 0.6rem 1.1rem; background: #f8f9fa;

    border: 1.5px dashed var(--border-input, #d0d0d0); border-radius: 8px;

    font-size: 0.82rem; color: #555; cursor: pointer;

    margin-top: 0.5rem; transition: all 0.2s; font-family: inherit;

}

#aba-projeto-relatorios .relob-painel .btn-add:hover {

    background: var(--vc-green-soft, #e8f0ed);

    border-color: var(--vc-green, #3a5c55); color: var(--vc-green, #3a5c55);

}



/* ─── Ambientes ─── */

#aba-projeto-relatorios .relob-painel .ambiente-card {

    border: 1px solid var(--border-light, #eee);

    border-radius: 10px; padding: 1rem; margin-bottom: 0.85rem;

    background: #fafbfc;

}

#aba-projeto-relatorios .relob-painel .ambiente-header {

    display: flex; justify-content: space-between; align-items: center;

    margin-bottom: 0.75rem; gap: 0.5rem;

}

#aba-projeto-relatorios .relob-painel .ambiente-nome-wrapper {

    display: flex; align-items: center; gap: 0.5rem; flex: 1;

}

#aba-projeto-relatorios .relob-painel .ambiente-nome-input {

    font-size: 0.93rem; font-weight: 600;

    border: 1.5px solid var(--border-input, #d0d0d0);

    border-radius: 6px; padding: 0.35rem 0.6rem; font-family: inherit;

    flex: 1; max-width: 280px; transition: border 0.2s;

    background: var(--surface, #fff);

}

#aba-projeto-relatorios .relob-painel .ambiente-nome-input:focus {

    outline: none; border-color: var(--vc-green, #3a5c55);

}

#aba-projeto-relatorios .relob-painel .ambiente-actions {

    display: flex; gap: 0.25rem; align-items: center;

}

#aba-projeto-relatorios .relob-painel .btn-add-foto-label {

    padding: 0.35rem 0.75rem; border-radius: 6px; cursor: pointer;

    font-size: 0.88rem; transition: all 0.15s; display: inline-flex;

    align-items: center; gap: 0.25rem; user-select: none;

}

#aba-projeto-relatorios .relob-painel .btn-add-foto-label:hover { background: var(--vc-green-soft, #e8f0ed); }

#aba-projeto-relatorios .relob-painel .btn-add-foto-label input { display: none; }

#aba-projeto-relatorios .relob-painel .foto-empty {

    padding: 1.25rem; text-align: center; color: #aaa; font-size: 0.82rem;

}

#aba-projeto-relatorios .relob-painel .foto-card {

    display: flex; gap: 0.75rem; align-items: flex-start;

    padding: 0.6rem; margin-bottom: 0.5rem; background: var(--surface, #fff);

    border-radius: 8px; border: 1px solid var(--border-light, #eee);

    transition: all 0.12s;

}

#aba-projeto-relatorios .relob-painel .foto-card:hover { border-color: #ccc; }

#aba-projeto-relatorios .relob-painel .foto-thumb {

    width: 100px; height: 75px; border-radius: 6px; overflow: hidden;

    flex-shrink: 0; background: #e8eaed;

}

#aba-projeto-relatorios .relob-painel .foto-thumb img {

    width: 100%; height: 100%; object-fit: cover;

}

#aba-projeto-relatorios .relob-painel .foto-info { flex: 1; min-width: 0; }

#aba-projeto-relatorios .relob-painel .foto-numero { font-size: 0.7rem; color: #aaa; margin-bottom: 0.25rem; font-weight: 500; }

#aba-projeto-relatorios .relob-painel .foto-descricao {

    width: 100%; padding: 0.5rem 0.6rem;

    border: 1.5px solid var(--border-input, #d0d0d0); border-radius: 6px;

    font-size: 0.82rem; font-family: inherit; resize: vertical;

    min-height: 40px; transition: border 0.2s; background: #fafbfc;

}

#aba-projeto-relatorios .relob-painel .foto-descricao:focus {

    outline: none; border-color: var(--vc-green, #3a5c55);

    background: var(--surface, #fff);

    box-shadow: 0 0 0 2px rgba(58,92,85,0.08);

}

#aba-projeto-relatorios .relob-painel .btn-icon {

    width: 30px; height: 30px; border: none; border-radius: 6px;

    cursor: pointer; font-size: 0.88rem; background: transparent;

    display: flex; align-items: center; justify-content: center;

    transition: all 0.15s; color: #aaa; flex-shrink: 0;

}

#aba-projeto-relatorios .relob-painel .btn-icon.danger:hover { background: #fce8e6; color: #d93025; }

#aba-projeto-relatorios .relob-painel .btn-add-ambiente {

    display: flex; align-items: center; gap: 0.35rem;

    padding: 0.6rem 1.1rem; background: var(--surface, #fff);

    border: 1.5px dashed var(--vc-green, #3a5c55); border-radius: 8px;

    font-size: 0.82rem; color: var(--vc-green, #3a5c55); cursor: pointer;

    margin-top: 0.35rem; transition: all 0.2s; font-family: inherit;

}

#aba-projeto-relatorios .relob-painel .btn-add-ambiente:hover { background: var(--vc-green-soft, #e8f0ed); }



/* ─── Ações finais ─── */

#aba-projeto-relatorios .relob-painel .actions-footer {

    display: flex; gap: 0.75rem; justify-content: flex-end;

    margin-top: 1.75rem; padding-top: 1.25rem;

    border-top: 1px solid var(--border-light, #eee);

}

#aba-projeto-relatorios .relob-painel .btn-primary {

    background: var(--vc-green, #3a5c55); color: #fff; border: none;

    padding: 0.75rem 2rem; border-radius: 8px; font-size: 0.9rem;

    font-weight: 600; cursor: pointer; display: flex;

    align-items: center; gap: 0.5rem; transition: all 0.2s; font-family: inherit;

}

#aba-projeto-relatorios .relob-painel .btn-primary:hover { background: #4d6b62; }

#aba-projeto-relatorios .relob-painel .btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }

#aba-projeto-relatorios .relob-painel .btn-secondary {

    background: var(--surface, #fff); color: var(--vc-green, #3a5c55);

    border: 1.5px solid var(--border-input, #d0d0d0);

    padding: 0.75rem 1.5rem; border-radius: 8px; font-size: 0.85rem;

    font-weight: 500; cursor: pointer; display: flex;

    align-items: center; gap: 0.5rem; transition: all 0.2s; font-family: inherit;

}

#aba-projeto-relatorios .relob-painel .btn-secondary:hover {

    background: #f8f9fa; border-color: var(--vc-green, #3a5c55);

}



/* ─── Loading ─── */

#aba-projeto-relatorios .relob-loading {

    display: flex; flex-direction: column; align-items: center;

    justify-content: center; padding: 80px 20px; gap: 16px;

    color: var(--text-muted, #999);

}

#aba-projeto-relatorios .relob-spinner {

    width: 40px; height: 40px;

    border: 3px solid rgba(0,0,0,0.06);

    border-top-color: var(--vc-green, #3a5c55);

    border-radius: 50%; animation: relob-spin .8s linear infinite;

}

@keyframes relob-spin { to { transform: rotate(360deg); } }



/* ─── Botão Voltar na listagem ─── */

#aba-projeto-relatorios .relob-back-btn {

    display: inline-flex; align-items: center; gap: 0.35rem;

    padding: 0.4rem 1rem; background: var(--surface, #fff);

    border: 1px solid var(--border, #ddd); border-radius: 6px;

    cursor: pointer; font-size: 0.82rem; font-family: inherit;

    color: var(--text-secondary); margin-bottom: 1rem;

    transition: all 0.12s;

}

#aba-projeto-relatorios .relob-back-btn:hover {

    border-color: var(--vc-green-light); color: var(--vc-green);

}



/* ═══════════════════════════════════════════════════════════════════

   DASHBOARD REFINADO v2.1 — Estilo Pastel/Profissional

   ═══════════════════════════════════════════════════════════════════ */



/* ── Header do Dashboard ── */

.dash-header-bar {

    display: flex; align-items: center; justify-content: space-between;

    margin-bottom: 1.5rem;

}

.dash-header-left h1 {

    font-size: 1.5rem; font-weight: 700; color: var(--text, #1a1a2e);

    margin: 0;

}

.dash-header-left .page-subtitle {

    font-size: 0.85rem; color: var(--text-muted, #8e8ea0);

    margin: 0.15rem 0 0 0;

}

.dash-refresh-btn {

    width: 38px; height: 38px; border-radius: 10px; border: 1px solid var(--border, #e2e8f0);

    background: var(--surface, #fff);

    color: var(--text-muted, #8e8ea0);

    display: flex; align-items: center; justify-content: center;

    cursor: pointer; transition: all 0.2s;

}

.dash-refresh-btn:hover {

    border-color: var(--accent, #0065FF);

    color: var(--accent, #0065FF);

    box-shadow: 0 2px 8px rgba(0,101,255,0.1);

}



/* ── Stats Grid (4 cards) ── */

.dash-stats-grid {

    display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem;

    margin-bottom: 1.5rem;

}

.dash-stat-card {

    position: relative;

    background: var(--surface, #fff);

    border: 1px solid var(--border, #edf2f7);

    border-radius: 14px;

    overflow: hidden;

    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);

    box-shadow: 0 1px 3px rgba(0,0,0,0.04);

}

.dash-stat-card:hover {

    box-shadow: 0 4px 16px rgba(0,0,0,0.07);

    border-color: var(--card-accent, #cbd5e1);

}

.dash-stat-card.clickable { cursor: pointer; }

.dash-stat-card.clickable:hover { transform: translateY(-2px); }

.dash-stat-accent {

    height: 3px;

    background: var(--card-accent, #0065FF);

    width: 100%;

}

.dash-stat-inner {

    display: flex; align-items: center; gap: 0.85rem;

    padding: 1rem 1.1rem;

}

.dash-stat-icon {

    width: 44px; height: 44px; border-radius: 12px;

    display: flex; align-items: center; justify-content: center;

    flex-shrink: 0;

    transition: transform 0.2s;

}

.dash-stat-card:hover .dash-stat-icon {

    transform: scale(1.05);

}

.dash-stat-body {

    display: flex; flex-direction: column; gap: 0.15rem;

    min-width: 0;

}

.dash-stat-num {

    font-size: 1.5rem; font-weight: 700; line-height: 1.2;

    color: var(--text, #1a1a2e);

    font-variant-numeric: tabular-nums;

}

.dash-stat-label {

    font-size: 0.72rem; font-weight: 500;

    color: var(--text-muted, #8e8ea0);

    text-transform: uppercase; letter-spacing: 0.5px;

    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;

}



/* ── Grid 3 cards do meio ── */

.dash-grid-3 {

    display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem;

    margin-bottom: 1.5rem;

}

.dash-grid-2 {

    display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem;

    margin-bottom: 1.5rem;

}



/* ── KPI Card (estilo do semanal adaptado) ── */

.kpi-card-dash {

    position: relative;

    background: var(--surface, #fff);

    border: 1px solid var(--border, #edf2f7);

    border-radius: 14px;

    overflow: hidden;

    transition: box-shadow 0.25s;

    box-shadow: 0 1px 3px rgba(0,0,0,0.04);

}

.kpi-card-dash:hover {

    box-shadow: 0 4px 16px rgba(0,0,0,0.07);

}

.kpi-card-accent {

    height: 3px;

    background: var(--kpi-color, #0065FF);

    width: 100%;

}

.kpi-card-body {

    padding: 1rem 1.1rem 1.1rem;

}

.kpi-card-title {

    font-size: 0.75rem; font-weight: 600;

    color: var(--text-muted, #8e8ea0);

    text-transform: uppercase; letter-spacing: 0.6px;

    margin-bottom: 0.85rem;

}



/* ── Prazos Display (dentro do KPI Card) ── */

.dp-prazos {

    display: flex; gap: 1.5rem; margin-bottom: 0.75rem;

}

.dp-prazo-item {

    display: flex; flex-direction: column; gap: 0.15rem;

}

.dp-num {

    font-size: 1.6rem; font-weight: 700; line-height: 1.2;

}

.dp-no-prazo .dp-num { color: #0B8A5E; }

.dp-atrasados .dp-num { color: #DC3545; }

.dp-label {

    font-size: 0.7rem; font-weight: 500;

    color: var(--text-muted, #8e8ea0);

    text-transform: uppercase; letter-spacing: 0.4px;

}

.dp-bar-track {

    height: 6px; border-radius: 99px;

    background: #F1F5F9;

    display: flex; overflow: hidden; gap: 2px;

}

.dp-bar-fill {

    height: 100%; border-radius: 99px;

    transition: width 0.6s cubic-bezier(0.4,0,0.2,1);

}

.dp-bar-ok { background: #0B8A5E; }

.dp-bar-atraso { background: #DC3545; }



/* ── Progresso dos Projetos ── */

.proj-progress-list {

    display: flex; flex-direction: column; gap: 0.6rem;

}

.proj-progress-item {

    display: flex; flex-direction: column; gap: 0.25rem;

}

.proj-progress-item .proj-pp-header {

    display: flex; justify-content: space-between; align-items: center;

}

.proj-pp-nome {

    font-size: 0.78rem; font-weight: 600; color: var(--text, #1a1a2e);

    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;

}

.proj-pp-pct {

    font-size: 0.72rem; font-weight: 600;

    color: var(--text-muted, #8e8ea0);

    font-variant-numeric: tabular-nums;

}

.proj-pp-track {

    height: 5px; border-radius: 99px;

    background: #F1F5F9; overflow: hidden;

}

.proj-pp-fill {

    height: 100%; border-radius: 99px;

    background: #0065FF;

    transition: width 0.6s cubic-bezier(0.4,0,0.2,1);

}

.proj-progress-empty, .carga-empty {

    font-size: 0.8rem; color: var(--text-muted, #b0b0c0);

    text-align: center; padding: 1rem 0;

}



/* ── Carga da Equipe ── */

.carga-list {

    display: flex; flex-direction: column; gap: 0.55rem;

}

.carga-item {

    display: flex; flex-direction: column; gap: 0.2rem;

}

.carga-item .carga-header {

    display: flex; justify-content: space-between; align-items: center;

}

.carga-nome {

    font-size: 0.78rem; font-weight: 500; color: var(--text, #1a1a2e);

}

.carga-horas {

    font-size: 0.7rem; font-weight: 600;

    color: var(--text-muted, #8e8ea0);

    font-variant-numeric: tabular-nums;

    background: #F1F5F9;

    padding: 0.1rem 0.45rem;

    border-radius: 6px;

}

.carga-track {

    height: 5px; border-radius: 99px;

    background: #F1F5F9; overflow: hidden;

}

.carga-fill {

    height: 100%; border-radius: 99px;

    background: #5243AA;

    transition: width 0.6s cubic-bezier(0.4,0,0.2,1);

}



/* ── Tarefas Vencendo ── */

.dash-vencendo {

    margin-bottom: 1.5rem;

    background: #FFFAF0;

    border: 1px solid #F0D060;

    border-radius: 14px;

    overflow: hidden;

}

.dash-vencendo-header {

    display: flex; align-items: center; justify-content: space-between;

    padding: 0.7rem 1rem;

    background: rgba(240, 208, 96, 0.15);

}

.dash-vencendo-header h3 {

    font-size: 0.8rem; font-weight: 600;

    color: #92400E; margin: 0;

}

.dash-vencendo-badge {

    font-size: 0.7rem; font-weight: 700;

    background: #F0D060; color: #78350F;

    padding: 0.15rem 0.6rem; border-radius: 99px;

    line-height: 1.4;

}

.dash-vencendo-body {

    padding: 0.5rem 0;

}

.dash-vencendo-item {

    display: flex; align-items: center; gap: 0.75rem;

    padding: 0.5rem 1rem;

    border-bottom: 1px solid rgba(240, 208, 96, 0.2);

    transition: background 0.15s;

}

.dash-vencendo-item:last-child { border-bottom: none; }

.dash-vencendo-item:hover { background: rgba(240, 208, 96, 0.05); }

.dash-vc-prazo {

    font-size: 0.7rem; font-weight: 600;

    color: #B45309;

    background: rgba(240, 208, 96, 0.2);

    padding: 0.15rem 0.5rem; border-radius: 6px;

    white-space: nowrap;

}

.dash-vc-titulo {

    flex: 1; font-size: 0.78rem; font-weight: 500;

    color: var(--text, #1a1a2e);

    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;

}

.dash-vc-projeto {

    font-size: 0.7rem; color: var(--text-muted, #8e8ea0);

    max-width: 140px;

    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;

}

.dash-vc-resp {

    font-size: 0.7rem; font-weight: 500;

    color: #92400E;

    background: rgba(240, 208, 96, 0.15);

    padding: 0.1rem 0.45rem; border-radius: 6px;

    white-space: nowrap;

}



/* ── Tabela Refinada do Dashboard ── */

.dash-table {

    width: 100%; border-collapse: collapse;

    font-size: 0.82rem;

}

.dash-table thead th {

    padding: 0.6rem 0.75rem;

    text-align: left;

    font-size: 0.7rem; font-weight: 600;

    color: var(--text-muted, #8e8ea0);

    text-transform: uppercase; letter-spacing: 0.5px;

    border-bottom: 2px solid var(--border, #edf2f7);

    background: transparent;

}

.dash-table tbody td {

    padding: 0.65rem 0.75rem;

    border-bottom: 1px solid var(--border, #f1f5f9);

    color: var(--text, #1a1a2e);

    vertical-align: middle;

}

.dash-table tbody tr:last-child td { border-bottom: none; }

.dash-table tbody tr:hover td { background: rgba(0,101,255,0.02); }



.dash-table .status-badge {

    display: inline-block;

    font-size: 0.65rem; font-weight: 600;

    padding: 0.2rem 0.6rem; border-radius: 99px;

    text-transform: uppercase; letter-spacing: 0.3px;

}

.dash-table .status-badge.ativo { background: rgba(11,138,94,0.1); color: #0B8A5E; }

.dash-table .status-badge.concluido { background: rgba(0,101,255,0.1); color: #0065FF; }



.dash-table .proj-progress-mini {

    display: flex; align-items: center; gap: 0.6rem;

}

.dash-table .proj-progress-mini .pp-track {

    flex: 1; height: 4px; border-radius: 99px;

    background: #F1F5F9; overflow: hidden;

}

.dash-table .proj-progress-mini .pp-fill {

    height: 100%; border-radius: 99px;

    background: #0065FF; transition: width 0.4s;

}

.dash-table .proj-progress-mini .pp-pct {

    font-size: 0.7rem; font-weight: 600;

    color: var(--text-muted, #8e8ea0);

    min-width: 32px; text-align: right;

}



/* ── Responsivo ── */

@media (max-width: 1100px) {

    .dash-stats-grid { grid-template-columns: repeat(2, 1fr); }

    .dash-grid-3 { grid-template-columns: 1fr; }

}

@media (max-width: 640px) {

    .dash-stats-grid { grid-template-columns: 1fr; }

}



/* === RELOB LOADING (global) === */

.relob-loading{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:80px 20px;gap:16px;color:var(--text-muted,#999)}

.relob-spinner{width:40px;height:40px;border:3px solid rgba(255,255,255,0.1);border-top-color:var(--accent,#6c63ff);border-radius:50%;animation:relob-spin .8s linear infinite}

@keyframes relob-spin{to{transform:rotate(360deg)}}



/* ═════════════════════════════════════════════════════════════════════

   VISÃO GERENCIAL — Cards mensais de portfólio

   ═════════════════════════════════════════════════════════════════════ */



/* 👇 ISOLAMENTO: todos os seletores prefixados com #view-visao-gerencial */



#view-visao-gerencial {

    padding: 24px 32px;

    height: 100vh;

    overflow-y: auto;

}

#view-visao-gerencial .page-header {

    margin-bottom: 24px;

}

#view-visao-gerencial .page-header h1 {

    font-size: 22px;

    font-weight: 600;

    color: #26251e;

}

#view-visao-gerencial .page-header .header-sub {

    font-size: 14px;

    color: #807d72;

    font-weight: 400;

    margin-top: 2px;

}



/* ─── Navegação mensal ─── */

#view-visao-gerencial .month-nav {

    display: flex;

    align-items: center;

    gap: 8px;

    background: #ffffff;

    border-radius: 12px;

    padding: 4px;

    box-shadow: 0 1px 3px rgba(0,0,0,0.04);

    margin-bottom: 24px;

    flex-wrap: wrap;

}

#view-visao-gerencial .month-nav button {

    background: none;

    border: none;

    font-family: inherit;

    font-size: 13px;

    font-weight: 500;

    padding: 7px 14px;

    border-radius: 8px;

    cursor: pointer;

    color: #807d72;

    transition: all 0.2s;

}

#view-visao-gerencial .month-nav button:hover {

    color: #26251e;

    background: #f0efea;

}

#view-visao-gerencial .month-nav button.active {

    background: #26251e;

    color: #ffffff;

}

#view-visao-gerencial .month-nav .arrow {

    padding: 6px 10px;

    font-size: 18px;

    line-height: 1;

    color: #807d72;

}

#view-visao-gerencial .month-nav .arrow:hover {

    color: #26251e;

    background: #f0efea;

}

#view-visao-gerencial .month-counter {

    font-size: 13px;

    color: #807d72;

    margin-left: auto;

    white-space: nowrap;

}



/* ─── Stats bar ─── */

#view-visao-gerencial .stats-bar {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));

    gap: 12px;

    margin-bottom: 24px;

}

#view-visao-gerencial .stat-card {

    background: #ffffff;

    border-radius: 10px;

    padding: 14px 16px;

    border: 1px solid #e6e5e0;

}

#view-visao-gerencial .stat-card .label {

    font-size: 12px;

    font-weight: 500;

    color: #807d72;

    text-transform: uppercase;

    letter-spacing: 0.5px;

}

#view-visao-gerencial .stat-card .value {

    font-size: 22px;

    font-weight: 600;

    color: #26251e;

    margin-top: 2px;

}



/* ─── Grid de cards — GRADE VERTICAL ─── */

#view-visao-gerencial .cards-grid {

    display: grid;

    grid-template-columns: repeat(auto-fill, minmax(290px, 330px));

    gap: 16px;

    padding: 4px 0 12px 0;

    justify-content: start;

}

/* scrollbar horizontal removida — agora o grid quebra em linhas */



/* ─── Card base ─── */

#view-visao-gerencial .project-card {

    flex: 0 0 310px;

    min-width: 290px;

    max-width: 330px;

    background: #ffffff;

    border-radius: 12px;

    border: 1px solid #e6e5e0;

    border-top: 4px solid #b6b7af;

    padding: 14px 16px 12px;

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

    cursor: pointer;

    display: flex;

    flex-direction: column;

}

#view-visao-gerencial .project-card.risco-alto {

    border-top-color: #cf2d56;

}

#view-visao-gerencial .project-card.risco-medio {

    border-top-color: #d4a017;

}

#view-visao-gerencial .project-card.risco-baixo {

    border-top-color: #1f8a65;

}

#view-visao-gerencial .project-card.concluido {

    border-top-color: #1f8a65;

}

#view-visao-gerencial .project-card:hover {

    border-color: #26251e;

    box-shadow: 0 8px 24px rgba(0,0,0,0.10);

    transform: translateY(-3px);

}



/* ─── Card topo: cliente + responsável + status ─── */

#view-visao-gerencial .card-top {

    display: flex;

    justify-content: space-between;

    align-items: flex-start;

    gap: 8px;

    margin-bottom: 10px;

}

#view-visao-gerencial .card-cliente {

    font-size: 13px;

    font-weight: 600;

    color: #26251e;

    line-height: 1.3;

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;

    flex: 1;

    min-width: 0;

}

#view-visao-gerencial .card-cliente small {

    display: block;

    font-size: 11px;

    font-weight: 400;

    color: #807d72;

    margin-top: 1px;

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;

}

#view-visao-gerencial .card-status {

    font-size: 10px;

    font-weight: 600;

    text-transform: uppercase;

    letter-spacing: 0.5px;

    padding: 3px 8px;

    border-radius: 999px;

    white-space: nowrap;

    flex-shrink: 0;

}

#view-visao-gerencial .status-em_andamento { background: #dfa88f22; color: #b07a5a; }

#view-visao-gerencial .status-anteprojeto { background: #9fbbe022; color: #4f7a9e; }

#view-visao-gerencial .status-projeto_executivo { background: #c0a8dd22; color: #7a5a9e; }

#view-visao-gerencial .status-concluido { background: #1f8a6518; color: #1f8a65; }

#view-visao-gerencial .status-parado { background: #cf2d5612; color: #cf2d56; }



/* ─── Responsável + badges de alerta ─── */

#view-visao-gerencial .card-meta {

    display: flex;

    align-items: center;

    gap: 10px;

    margin-bottom: 10px;

    font-size: 12px;

}

#view-visao-gerencial .card-responsavel {

    display: flex;

    align-items: center;

    gap: 4px;

    color: #555;

    font-weight: 500;

}

#view-visao-gerencial .card-responsavel .resp-icon { font-size: 13px; }

#view-visao-gerencial .card-badges {

    display: flex;

    gap: 4px;

    margin-left: auto;

}

#view-visao-gerencial .card-badge {

    font-size: 10px;

    font-weight: 600;

    padding: 2px 7px;

    border-radius: 999px;

    white-space: nowrap;

}

#view-visao-gerencial .badge-pendente { background: #dfa88f22; color: #b07a5a; }

#view-visao-gerencial .badge-atrasada { background: #cf2d5612; color: #cf2d56; }

#view-visao-gerencial .badge-ok { background: #1f8a6518; color: #1f8a65; }



/* ─── Card body: prazo + pendências lado a lado ─── */

#view-visao-gerencial .card-body {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 6px;

    margin-bottom: 10px;

}

#view-visao-gerencial .card-metric {

    background: #f6f6f4;

    border-radius: 8px;

    padding: 8px 10px;

}

#view-visao-gerencial .card-metric .label {

    color: #807d72;

    font-size: 9px;

    font-weight: 500;

    text-transform: uppercase;

    letter-spacing: 0.4px;

}

#view-visao-gerencial .card-metric .value {

    color: #26251e;

    font-weight: 700;

    font-size: 16px;

    margin-top: 1px;

}



/* ─── Progresso ─── */

#view-visao-gerencial .progress-section {

    margin-bottom: 10px;

}

#view-visao-gerencial .progress-header {

    display: flex;

    justify-content: space-between;

    font-size: 10px;

    font-weight: 500;

    color: #807d72;

    text-transform: uppercase;

    letter-spacing: 0.4px;

    margin-bottom: 4px;

}

#view-visao-gerencial .progress-bar {

    height: 6px;

    background: #e6e5e0;

    border-radius: 999px;

    overflow: hidden;

}

#view-visao-gerencial .progress-bar .fill {

    height: 100%;

    border-radius: 999px;

    transition: width 0.4s ease;

}

#view-visao-gerencial .fill-verde   { background: #1f8a65; }

#view-visao-gerencial .fill-amarelo { background: #d4a017; }

#view-visao-gerencial .fill-vermelho{ background: #cf2d56; }

#view-visao-gerencial .fill-azul    { background: #4f7a9e; }



/* ─── Footer: risco + ação ─── */

#view-visao-gerencial .card-footer {

    display: flex;

    justify-content: flex-end;

    align-items: center;

    margin-top: auto;

    padding-top: 8px;

    border-top: 1px solid #e6e5e0;

    gap: 8px;

}

#view-visao-gerencial .risco-tag {

    font-size: 10px;

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: 0.5px;

    padding: 3px 10px;

    border-radius: 999px;

}

#view-visao-gerencial .risco-tag.alto   { background: #cf2d5612; color: #cf2d56; }

#view-visao-gerencial .risco-tag.medio  { background: #d4a01718; color: #b8860b; }

#view-visao-gerencial .risco-tag.baixo  { background: #1f8a6518; color: #1f8a65; }



/* ─── Empty State ─── */

#view-visao-gerencial .empty-state {

    flex: 1;

    text-align: center;

    padding: 60px 20px;

    color: #807d72;

}

#view-visao-gerencial .empty-state .icon {

    font-size: 48px;

    margin-bottom: 12px;

    opacity: 0.4;

}

#view-visao-gerencial .empty-state h3 {

    font-size: 18px;

    font-weight: 500;

    color: #5a5852;

    margin-bottom: 4px;

}

#view-visao-gerencial .empty-state p {

    font-size: 14px;

}



/* ═══════════════════════════════════════════

   NOVA VISÃO GERENCIAL — Cards em Linha

   ═══════════════════════════════════════════ */



/* Wrapper geral */

.vg-cards-wrapper {

    display: flex;

    flex-direction: column;

    gap: 20px;

    margin-top: 16px;

}



/* Card em linha */

.vg-card-row {

    background: #fff;

    border-radius: 12px;

    box-shadow: 0 1px 4px rgba(0,0,0,0.08);

    padding: 20px 24px;

    cursor: pointer;

    transition: box-shadow 0.2s, transform 0.2s;

    border-left: 5px solid #ccc;

    display: flex;

    flex-direction: column;

    gap: 12px;

}

.vg-card-row:hover {

    box-shadow: 0 4px 12px rgba(0,0,0,0.12);

    transform: translateY(-1px);

}

.vg-card-row.risco-alto { border-left-color: #dc3545; }

.vg-card-row.risco-medio { border-left-color: #ffc107; }

.vg-card-row.risco-baixo { border-left-color: #28a745; }

.vg-card-row.concluido { border-left-color: #6c757d; opacity: 0.85; }



/* Header */

.vg-r-header {

    display: flex;

    justify-content: space-between;

    align-items: flex-start;

    gap: 16px;

}

.vg-r-titulo {

    display: flex;

    flex-direction: column;

    gap: 2px;

}

.vg-r-titulo strong {

    font-size: 16px;

    font-weight: 600;

    color: #1a1a2e;

}

.vg-r-cliente {

    font-size: 13px;

    color: #6b7280;

}

.vg-r-tags {

    display: flex;

    gap: 8px;

    align-items: center;

    flex-shrink: 0;

}



/* Badge status (reusa classes existentes) */

.vg-r-tags .badge-status {

    padding: 3px 10px;

    border-radius: 20px;

    font-size: 11px;

    font-weight: 600;

    text-transform: uppercase;

    letter-spacing: 0.3px;

}



/* Tag de risco */

.vg-risco-tag {

    padding: 3px 10px;

    border-radius: 20px;

    font-size: 11px;

    font-weight: 600;

}

.vg-risco-tag.alto { background: #fde8e8; color: #c0392b; }

.vg-risco-tag.medio { background: #fef9e7; color: #b7950b; }

.vg-risco-tag.baixo { background: #e8f5e9; color: #27ae60; }



/* Corpo do card */

.vg-r-corpo {

    display: flex;

    align-items: center;

    gap: 24px;

    flex-wrap: wrap;

}

.vg-r-progresso {

    display: flex;

    align-items: center;

    gap: 8px;

    flex: 1;

    min-width: 120px;

}

.vg-bar {

    flex: 1;

    height: 8px;

    background: #e9ecef;

    border-radius: 4px;

    overflow: hidden;

    max-width: 200px;

}

.vg-bar div {

    height: 100%;

    border-radius: 4px;

    background: #007bff;

    transition: width 0.4s ease;

}

.vg-pct {

    font-size: 13px;

    font-weight: 600;

    color: #495057;

    min-width: 40px;

}

.vg-r-prazo {

    display: flex;

    align-items: center;

    gap: 4px;

    font-size: 13px;

    color: #495057;

}

.vg-r-prazo .atrasado {

    color: #dc3545;

    font-weight: 600;

}

.vg-label {

    color: #6b7280;

}

.vg-r-resumo {

    font-size: 12px;

    color: #6b7280;

    flex: 1;

    min-width: 150px;

    line-height: 1.4;

}



/* ─── Tarefas ─── */

.vg-r-tarefas {

    border-top: 1px solid #e5e7eb;

    padding-top: 12px;

    margin-top: 4px;

}

.vg-t-titulo {

    font-size: 13px;

    font-weight: 600;

    color: #374151;

    margin-bottom: 8px;

}

.vg-t-sem-tarefas {

    font-size: 12px;

    color: #6b7280;

    padding: 4px 0;

}

.vg-t-etapa {

    font-size: 12px;

    font-weight: 600;

    color: #1a1a2e;

    margin: 6px 0 4px;

    padding: 2px 0;

}

.vg-t-linha {

    display: flex;

    align-items: center;

    gap: 12px;

    padding: 3px 0 3px 16px;

    font-size: 12px;

    border-left: 2px solid #e5e7eb;

    margin-left: 4px;

}

.vg-t-nome {

    flex: 1;

    color: #374151;

    font-weight: 500;

}

.vg-t-resp {

    color: #6b7280;

    min-width: 120px;

    text-align: right;

}

.vg-t-prazo {

    color: #6b7280;

    min-width: 90px;

    text-align: right;

    font-weight: 500;

}

.vg-t-prazo.atrasado {

    color: #dc3545;

}



/* ─── Responsivo ─── */

@media (max-width: 768px) {

    .vg-r-corpo {

        flex-direction: column;

        gap: 8px;

        align-items: flex-start;

    }

    .vg-r-header {

        flex-direction: column;

        gap: 8px;

    }

    .vg-t-linha {

        flex-wrap: wrap;

        gap: 4px;

    }

    .vg-t-resp, .vg-t-prazo {

        min-width: auto;

        text-align: left;

    }

}



@media (max-width: 640px) {

    #view-visao-gerencial { padding: 16px; }

    #view-visao-gerencial .month-nav { width: 100%; overflow-x: auto; }

}





/* =============================================

   NOVO LAYOUT - Gestao de Tarefas

   Ref: gestao-tarefas-geral (paper theme)

   ============================================= */



#view-gestao-tarefas .gt-wrap {

  max-width:1500px; margin:0 auto; padding:0 0 40px;

  font-family:"Inter",sans-serif; color:var(--ink);

}

#view-gestao-tarefas .gt-mono{font-family:'IBM Plex Mono',monospace;}

#view-gestao-tarefas .gt-h1{

  font-family:'Space Grotesk',sans-serif; font-size:24px; font-weight:700;

  margin:0 0 2px; letter-spacing:-0.01em; color:var(--ink);

}



/* ---- HEADER ---- */

#view-gestao-tarefas .gt-topline{

  display:flex; align-items:flex-start; justify-content:space-between;

  gap:20px; flex-wrap:wrap; margin-bottom:20px;

}

#view-gestao-tarefas .gt-title-block{display:flex;gap:14px;align-items:flex-start;}

#view-gestao-tarefas .gt-title-mark{

  width:42px;height:42px;border-radius:9px;background:var(--brand);

  display:flex;align-items:center;justify-content:center;flex-shrink:0;

  box-shadow:var(--shadow-card);

}

#view-gestao-tarefas .gt-title-mark svg{width:21px;height:21px;stroke:#fff;}

#view-gestao-tarefas .gt-subtitle{color:var(--ink-soft);font-size:13.5px;margin:0;}

#view-gestao-tarefas .gt-top-actions{display:flex;align-items:center;gap:10px;}

#view-gestao-tarefas .gt-count-pill{

  font-family:'IBM Plex Mono',monospace; font-size:12px; font-weight:600;

  color:var(--ink-soft);background:#fff;border:1px solid var(--line);

  border-radius:20px;padding:7px 14px;

}

#view-gestao-tarefas .gt-btn-primary{

  display:inline-flex;align-items:center;gap:8px;

  background:var(--brand); color:#fff; border:none;

  padding:11px 18px; border-radius:8px;

  font-family:'Inter',sans-serif; font-weight:600; font-size:13.5px;

  cursor:pointer; white-space:nowrap; transition:background .15s ease;

  box-shadow:var(--shadow-card);

}

#view-gestao-tarefas .gt-btn-primary:hover{background:var(--brand-hover);}

#view-gestao-tarefas .gt-btn-primary svg{width:15px;height:15px;stroke:#fff;}



/* ---- STATS ROW ---- */

#view-gestao-tarefas .gt-stats-row{

  display:grid;grid-template-columns:1fr 1fr 1.6fr;

  gap:1px;background:var(--line);border:1px solid var(--line);

  border-radius:var(--radius);overflow:hidden;margin-bottom:18px;

}

#view-gestao-tarefas .gt-stat{

  background:#fff;padding:16px 20px;display:flex;flex-direction:column;gap:4px;

}

#view-gestao-tarefas .gt-stat-num{

  font-family:'Space Grotesk',sans-serif;font-size:26px;font-weight:700;

  letter-spacing:-0.02em;line-height:1;color:var(--ink);

}

#view-gestao-tarefas .gt-stat-label{

  font-size:11.5px;color:var(--ink-soft);text-transform:uppercase;

  letter-spacing:.05em;display:flex;align-items:center;gap:6px;

}

#view-gestao-tarefas .gt-dot{width:7px;height:7px;border-radius:50%;display:inline-block;}

#view-gestao-tarefas .gt-dot-teal{background:var(--teal);}

#view-gestao-tarefas .gt-dot-ink{background:var(--ink-faint);}

#view-gestao-tarefas .gt-dot-amber{background:var(--amber);}

#view-gestao-tarefas .gt-stat-progress{display:flex;flex-direction:column;justify-content:center;gap:8px;}

#view-gestao-tarefas .gt-sp-row1{display:flex;justify-content:space-between;align-items:baseline;}

#view-gestao-tarefas .gt-hrs{font-family:'IBM Plex Mono',monospace;font-size:13px;color:var(--ink);}

#view-gestao-tarefas .gt-hrs .gt-of{color:var(--ink-faint);}

#view-gestao-tarefas .gt-ptrack{

  height:7px;background:var(--paper);border:1px solid var(--line);

  border-radius:4px;overflow:hidden;

}

#view-gestao-tarefas .gt-pfill{height:100%;background:var(--teal);border-radius:3px;transition:width .3s ease;}



/* ---- TOOLBAR ---- */

#view-gestao-tarefas .gt-toolbar{

  display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:10px;

}

#view-gestao-tarefas .gt-search{position:relative;flex:1 1 260px;min-width:220px;}

#view-gestao-tarefas .gt-search svg{

  position:absolute;left:13px;top:50%;transform:translateY(-50%);

  width:15px;height:15px;stroke:var(--ink-faint);

  pointer-events:none;

}

#view-gestao-tarefas .gt-search input{

  width:100%;padding:10px 14px 10px 36px;border:1px solid var(--line);

  border-radius:8px;background:#fff;font-family:'Inter',sans-serif;

  font-size:13px;color:var(--ink);outline:none;transition:border-color .12s ease;

}

#view-gestao-tarefas .gt-search input:focus{border-color:var(--teal);}

#view-gestao-tarefas .gt-search input::placeholder{color:var(--ink-faint);}

#view-gestao-tarefas .gt-date-field{display:flex;align-items:center;gap:8px;}

#view-gestao-tarefas .gt-date-input{

  border:1px solid var(--line);border-radius:8px;background:#fff;

  padding:9px 12px;font-family:'IBM Plex Mono',monospace;font-size:12px;

  color:var(--ink-soft);outline:none;width:128px;

}

#view-gestao-tarefas .gt-date-input:focus{border-color:var(--teal);}

#view-gestao-tarefas .gt-date-sep{font-size:12px;color:var(--ink-faint);}

#view-gestao-tarefas .gt-btn-filter{

  display:inline-flex;align-items:center;gap:6px;

  border:1px solid var(--line);background:#fff;

  padding:10px 14px;border-radius:8px;font-size:13px;font-weight:500;

  color:var(--ink-soft);cursor:pointer;white-space:nowrap;

}

#view-gestao-tarefas .gt-btn-filter svg{width:13px;height:13px;stroke:var(--ink-faint);}

#view-gestao-tarefas .gt-btn-filter:hover{color:var(--brand);border-color:var(--teal-soft);}



/* ---- FILTROS AVANÇADOS ---- */

#view-gestao-tarefas .gt-filters-advanced{margin-bottom:8px;}

#view-gestao-tarefas .gt-filters-row{

  display:flex;flex-wrap:wrap;gap:8px;margin-bottom:10px;

}

#view-gestao-tarefas .gt-multi-select{

  position:relative;min-width:160px;

}

#view-gestao-tarefas .gt-ms-trigger{

  display:flex;align-items:center;justify-content:space-between;gap:6px;

  border:1px solid var(--line);border-radius:var(--radius-sm);background:#fff;

  padding:9px 12px;font-family:'Inter',sans-serif;font-size:12.5px;

  color:var(--ink-soft);cursor:pointer;outline:none;min-width:150px;

}

#view-gestao-tarefas .gt-ms-trigger:hover{border-color:var(--line-strong);}

#view-gestao-tarefas .gt-ms-arrow{font-size:10px;color:var(--ink-faint);}

#view-gestao-tarefas .gt-ms-dropdown{

  display:none;position:absolute;top:calc(100%+4px);left:0;z-index:100;

  background:#fff;border:1px solid var(--line);border-radius:var(--radius-sm);

  box-shadow:0 4px 12px rgba(0,0,0,0.08);min-width:220px;max-height:260px;overflow-y:auto;padding:6px;

}

#view-gestao-tarefas .gt-ms-dropdown.open{display:block;}
#view-gestao-tarefas .gt-multi-select.open .gt-ms-dropdown{display:block;}

#view-gestao-tarefas .gt-ms-option{

  display:flex;align-items:center;gap:8px;padding:6px 10px;

  border-radius:5px;cursor:pointer;font-size:13px;color:var(--ink);

  transition:background .1s ease;

}

#view-gestao-tarefas .gt-ms-option:hover{background:var(--paper);}

#view-gestao-tarefas .gt-ms-option input[type=checkbox]{margin:0;}



/* ---- TAGS ATIVAS ---- */

#view-gestao-tarefas .gt-active-tags{

  display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px;

}

#view-gestao-tarefas .gt-tag{

  border:1px solid var(--teal-soft);background:var(--teal-soft);color:var(--teal);

  border-radius:14px;padding:4px 10px;font-size:11px;font-weight:500;

  display:inline-flex;align-items:center;gap:6px;

}

#view-gestao-tarefas .gt-tag-remove{cursor:pointer;font-size:13px;line-height:1;opacity:.6;}

#view-gestao-tarefas .gt-tag-remove:hover{opacity:1;}



/* ---- META ROW ---- */

#view-gestao-tarefas .gt-meta-row{

  display:flex;justify-content:space-between;align-items:baseline;

  margin-bottom:10px;font-size:12.5px;color:var(--ink-soft);

}

#view-gestao-tarefas .gt-meta-row .gt-mono{color:var(--ink-faint);font-family:'IBM Plex Mono',monospace;}



/* ---- TABLE ---- */

#view-gestao-tarefas .gt-table-card{

  background:#fff;border:1px solid var(--line);

  border-radius:var(--radius);overflow:hidden;margin-bottom:20px;

}

#view-gestao-tarefas .gt-tbl-scroll{overflow-x:auto;}

#view-gestao-tarefas .gt-table{width:100%;border-collapse:collapse;min-width:1120px;table-layout:fixed;}

#view-gestao-tarefas .gt-table thead th{

  text-align:left;font-size:10.5px;font-weight:700;letter-spacing:.06em;

  text-transform:uppercase;color:var(--ink-soft);padding:11px 12px;

  border-bottom:1px solid var(--line);background:#FCFBF8;white-space:nowrap;

}

#view-gestao-tarefas .gt-table .gt-sortable{cursor:pointer;user-select:none;}

#view-gestao-tarefas .gt-table .gt-sort-icon{

  display:inline-block;width:9px;height:9px;margin-left:3px;vertical-align:middle;

}

#view-gestao-tarefas .gt-table .gt-action-col{width:70px;text-align:center;}

#view-gestao-tarefas .gt-table tbody tr{

  border-bottom:1px solid var(--line);transition:background .1s ease;

}

#view-gestao-tarefas .gt-table tbody tr:last-child{border-bottom:none;}

#view-gestao-tarefas .gt-table tbody tr:hover{background:#FCFBF8;}

#view-gestao-tarefas .gt-table tbody tr.gt-selected{background:var(--teal-soft);}

#view-gestao-tarefas .gt-table td{

  padding:11px 12px;font-size:12.5px;vertical-align:middle;color:var(--ink);

}

#view-gestao-tarefas .gt-table .gt-th-check{width:36px;text-align:center;}

#view-gestao-tarefas .gt-table .gt-th-check input[type=checkbox]{margin:0;}



/* ---- task name ---- */

#view-gestao-tarefas .gt-task-name{

  font-weight:600;color:var(--ink);cursor:pointer;line-height:1.35;

  max-width:260px;display:block;

}

#view-gestao-tarefas .gt-task-name:hover{color:var(--brand);text-decoration:underline;}

#view-gestao-tarefas .gt-proj-cell{color:var(--ink-soft);max-width:200px;}

#view-gestao-tarefas .gt-etapa-cell{color:var(--ink-soft);}

#view-gestao-tarefas .gt-dash{color:var(--ink-faint);}

#view-gestao-tarefas .gt-mono-cell{font-family:'IBM Plex Mono',monospace;font-size:11.5px;color:var(--ink-soft);}



/* ---- BADGES (status) ---- */

#view-gestao-tarefas .gt-badge,
#view-projeto-detalhe .gt-badge{

  display:inline-flex;align-items:center;gap:5px;font-size:11px;

  font-weight:600;padding:4px 9px;border-radius:20px;white-space:nowrap;

}

#view-gestao-tarefas .gt-badge-concluida,
#view-projeto-detalhe .gt-badge-concluida{background:var(--teal-soft);color:var(--teal);}

#view-gestao-tarefas .gt-badge-andamento,
#view-projeto-detalhe .gt-badge-andamento{background:var(--amber-soft);color:var(--amber);}

#view-gestao-tarefas .gt-badge-planejada,
#view-projeto-detalhe .gt-badge-planejada{background:var(--slate-soft);color:var(--slate);}

/* ---- BADGE ALIASES (status normalizados) ---- */
#view-gestao-tarefas .gt-badge-em-andamento,
#view-projeto-detalhe .gt-badge-em-andamento{background:var(--amber-soft);color:var(--amber);}

#view-gestao-tarefas .gt-badge-atrasada,
#view-projeto-detalhe .gt-badge-atrasada{background:var(--red-soft);color:var(--red);}
#view-gestao-tarefas .gt-badge-revisao,
#view-projeto-detalhe .gt-badge-revisao{background:#7c3aed12;color:#7c3aed;}
#view-gestao-tarefas .gt-badge-cancelada,
#view-projeto-detalhe .gt-badge-cancelada{background:var(--slate-soft);color:var(--slate);}
#view-gestao-tarefas .gt-badge-pendente,
#view-projeto-detalhe .gt-badge-pendente{background:#f59e0b12;color:#f59e0b;}



/* ---- DATAS ---- */

#view-gestao-tarefas .gt-fim-atraso,
#view-projeto-detalhe .gt-fim-atraso{color:var(--red);font-weight:600;}



/* ---- H.REAL CELL ---- */

#view-gestao-tarefas .gt-hreal-cell{display:flex;align-items:center;gap:7px;}

#view-gestao-tarefas .gt-play-btn{

  width:20px;height:20px;border-radius:50%;border:none;

  background:var(--amber-soft);color:var(--amber);

  display:flex;align-items:center;justify-content:center;

  cursor:pointer;flex-shrink:0;transition:all .12s ease;

}

#view-gestao-tarefas .gt-play-btn:hover{background:var(--amber);color:#fff;}

#view-gestao-tarefas .gt-play-btn svg{width:9px;height:9px;fill:var(--amber);stroke:none;}

#view-gestao-tarefas .gt-play-btn:hover svg{fill:#fff;}

#view-gestao-tarefas .gt-play-btn.running{background:var(--red-soft);color:var(--red);}

#view-gestao-tarefas .gt-play-btn.running svg{fill:var(--red);}

#view-gestao-tarefas .gt-play-btn.running:hover{background:var(--red);color:#fff;}

#view-gestao-tarefas .gt-play-btn.running:hover svg{fill:#fff;}



/* ---- AVATAR ---- */

#view-gestao-tarefas .gt-avatar{

  width:26px;height:26px;border-radius:50%;color:#fff;

  display:flex;align-items:center;justify-content:center;

  font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:9.5px;

  flex-shrink:0;

}

#view-gestao-tarefas .gt-avatar.unknown,
#view-projeto-detalhe .gt-avatar.unknown{background:var(--slate-soft) !important;color:var(--ink-faint);}



/* ---- PRIORIDADE ---- */

#view-gestao-tarefas .gt-priority,
#view-projeto-detalhe .gt-priority{

  display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:600;

}

#view-gestao-tarefas .gt-priority svg,
#view-projeto-detalhe .gt-priority svg{width:10px;height:10px;}

#view-gestao-tarefas .gt-priority-baixa,
#view-projeto-detalhe .gt-priority-baixa{color:var(--ink-faint);}

#view-gestao-tarefas .gt-priority-baixa svg,
#view-projeto-detalhe .gt-priority-baixa svg{fill:var(--ink-faint);stroke:none;}

#view-gestao-tarefas .gt-priority-media,
#view-projeto-detalhe .gt-priority-media{color:var(--amber);}

#view-gestao-tarefas .gt-priority-media svg,
#view-projeto-detalhe .gt-priority-media svg{fill:var(--amber);stroke:none;}

#view-gestao-tarefas .gt-priority-alta,
#view-projeto-detalhe .gt-priority-alta{color:var(--red);}

#view-gestao-tarefas .gt-priority-alta svg,
#view-projeto-detalhe .gt-priority-alta svg{fill:var(--red);stroke:none;}



/* ---- ROW ACTIONS ---- */

#view-gestao-tarefas .gt-row-actions{

  display:flex;align-items:center;gap:6px;justify-content:center;

}

#view-gestao-tarefas .gt-complete-btn{

  width:26px;height:26px;border-radius:6px;border:1px solid var(--line);

  background:#fff;display:flex;align-items:center;justify-content:center;

  cursor:pointer;color:var(--ink-faint);transition:all .12s ease;

}

#view-gestao-tarefas .gt-complete-btn:hover{

  border-color:var(--teal);color:var(--teal);background:var(--teal-soft);

}

#view-gestao-tarefas .gt-complete-btn.done{

  background:var(--teal);border-color:var(--teal);color:#fff;

}

#view-gestao-tarefas .gt-complete-btn svg{width:12px;height:12px;stroke:currentColor;stroke-width:3;}

#view-gestao-tarefas .gt-kebab-btn{

  width:26px;height:26px;border:none;background:transparent;border-radius:6px;

  cursor:pointer;color:var(--ink-faint);display:flex;

  align-items:center;justify-content:center;

}

#view-gestao-tarefas .gt-kebab-btn:hover{background:var(--paper);color:var(--ink);}

#view-gestao-tarefas .gt-kebab-btn svg{width:15px;height:15px;stroke:currentColor;}



/* ---- PAGINATION ---- */

#view-gestao-tarefas .gt-pagination{

  display:flex;align-items:center;justify-content:center;gap:6px;

}

#view-gestao-tarefas .gt-page-btn{

  min-width:34px;height:34px;padding:0 10px;border:1px solid var(--line);

  background:#fff;border-radius:7px;font-family:'IBM Plex Mono',monospace;

  font-size:12.5px;color:var(--ink-soft);cursor:pointer;

  display:flex;align-items:center;justify-content:center;transition:all .12s ease;

}

#view-gestao-tarefas .gt-page-btn:hover:not(:disabled){

  border-color:var(--ink-faint);color:var(--ink);

}

#view-gestao-tarefas .gt-page-btn.active{

  background:var(--ink);border-color:var(--ink);color:#fff;

}

#view-gestao-tarefas .gt-page-btn:disabled{opacity:.35;cursor:not-allowed;}

#view-gestao-tarefas .gt-page-btn svg{width:14px;height:14px;stroke:currentColor;}



/* ---- EMPTY STATE ---- */

#view-gestao-tarefas .gt-empty{

  text-align:center;padding:50px 20px;color:var(--ink-faint);

  background:#fff;border:1px solid var(--line);border-radius:var(--radius);

  margin-bottom:20px;

}

#view-gestao-tarefas .gt-empty svg{display:block;margin:0 auto 14px;opacity:.4;}

#view-gestao-tarefas .gt-empty p{font-size:14px;margin:0;}



/* ---- EDITAVEL INLINE ---- */

#view-gestao-tarefas .gt-editable{

  cursor:text;border-bottom:1px dashed transparent;transition:border-color .12s;

}

#view-gestao-tarefas .gt-editable:hover{border-bottom-color:var(--ink-faint);}

#view-gestao-tarefas .gt-editable:focus{

  outline:none;border-bottom-color:var(--teal);

  background:var(--teal-soft);border-radius:2px;

}



/* ---- RESIZE HANDLES ---- */

#view-gestao-tarefas .gt-resize-handle{

  position:absolute;right:0;top:0;bottom:0;width:5px;

  cursor:col-resize;z-index:2;

}



/* ---- MENU DE CONTEXTO ---- */

#view-gestao-tarefas .gt-context-menu{

  position:fixed;z-index:9999;background:#fff;border:1px solid var(--line);

  border-radius:var(--radius-sm);box-shadow:0 4px 16px rgba(0,0,0,0.1);

  padding:4px;min-width:180px;

}

#view-gestao-tarefas .gt-context-menu .gt-cm-item{

  display:flex;align-items:center;gap:10px;padding:8px 12px;

  border-radius:5px;cursor:pointer;font-size:13px;color:var(--ink);

  transition:background .1s ease;

}

#view-gestao-tarefas .gt-context-menu .gt-cm-item:hover{background:var(--paper);}

#view-gestao-tarefas .gt-context-menu .gt-cm-item svg{width:14px;height:14px;stroke:var(--ink-soft);}



@media (max-width:820px){

  #view-gestao-tarefas .gt-stats-row{grid-template-columns:1fr;}

  #view-gestao-tarefas .gt-wrap{padding:0 0 30px;}

}

/* ─── Gestão de Tarefas: rolagem única (só a lista rola) ─── */
#view-gestao-tarefas.active { height: 100%; overflow: hidden; }
#view-gestao-tarefas .gt-wrap {
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
#view-gestao-tarefas .gt-wrap > * { flex-shrink: 0; }   /* topo fixo */
#view-gestao-tarefas .gt-table-card {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  margin-bottom: 0;
}
#view-gestao-tarefas .gt-tbl-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;                 /* rola vertical e horizontal */
}
#view-gestao-tarefas .gt-table thead th {
  position: sticky;               /* cabeçalho da tabela fixo */
  top: 0;
  z-index: 5;
}

/* ════════════════════════════════════════════════════════════
   LISTA DE TAREFAS POR ETAPA (accordion 3 níveis)
   Usado dentro da aba Projeto (processo.html)
   ════════════════════════════════════════════════════════════ */

/* ── Etapa (nível 1) ── */
.etapa-item {
  border-bottom: 1px solid rgba(148,163,184,0.08);
}
.etapa-item:last-child { border-bottom: none; }

.etapa-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 0;
  cursor: pointer;
  user-select: none;
  transition: background 0.15s;
  border-radius: 8px;
}
.etapa-header:hover {
  background: rgba(148,163,184,0.04);
  padding: 12px;
  margin: 0 -12px;
}
.etapa-header .caret {
  font-size: 12px;
  color: #64748b;
  transition: transform 0.2s;
  width: 16px;
  text-align: center;
  flex-shrink: 0;
}
.etapa-header.open .caret { transform: rotate(90deg); }

.etapa-sigla {
  font-size: 11px;
  font-weight: 700;
  color: #3A5C55;
  background: rgba(58,92,85,0.2);
  padding: 2px 8px;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  flex-shrink: 0;
}

.etapa-nome {
  flex: 1;
  font-size: 14px;
  font-weight: 600;
  color: #e2e8f0;
}

.etapa-count {
  font-size: 12px;
  color: #64748b;
  background: rgba(148,163,184,0.08);
  padding: 2px 10px;
  border-radius: 9999px;
  flex-shrink: 0;
}

.etapa-body {
  display: none;
  padding: 0 0 8px 28px;
}
.etapa-body.open { display: block; }

/* ── Vazio ── */
.etapa-vazia {
  font-size: 12px;
  color: #475569;
  padding: 8px 0 8px 12px;
  font-style: italic;
}

/* ── Tarefa (nível 2) ── */
.tarefa-item {
  border: 1px solid rgba(148,163,184,0.08);
  border-radius: 8px;
  margin-bottom: 6px;
  background: rgba(15,23,42,0.3);
  transition: border-color 0.15s;
}
.tarefa-item:hover {
  border-color: rgba(148,163,184,0.2);
}

.tarefa-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  cursor: pointer;
  user-select: none;
}
.tarefa-header .caret {
  font-size: 10px;
  color: #64748b;
  transition: transform 0.2s;
  width: 14px;
  text-align: center;
  flex-shrink: 0;
}
.tarefa-header.open .caret { transform: rotate(90deg); }

.tarefa-titulo {
  flex: 1;
  font-size: 13px;
  font-weight: 500;
  color: #e2e8f0;
  min-width: 0;
}
.tarefa-titulo.concluido {
  text-decoration: line-through;
  color: #64748b;
}

.tarefa-horas {
  font-size: 11px;
  color: #94a3b8;
  flex-shrink: 0;
  background: rgba(148,163,184,0.08);
  padding: 1px 6px;
  border-radius: 4px;
}

.tarefa-prazo {
  font-size: 11px;
  color: #64748b;
  flex-shrink: 0;
  white-space: nowrap;
}

.tarefa-responsavel {
  font-size: 11px;
  color: #64748b;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}

.tarefa-body {
  display: none;
  padding: 0 12px 10px 32px;
  border-top: 1px solid rgba(148,163,184,0.06);
}
.tarefa-body.open { display: block; }

/* ── Subtarefa (nível 3) ── */
.sub-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  font-size: 13px;
}
.sub-item input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 16px; height: 16px;
  border: 2px solid #475569;
  border-radius: 4px;
  cursor: pointer;
  flex-shrink: 0;
  position: relative;
  transition: all 0.15s;
}
.sub-item input[type="checkbox"]:checked {
  background: #3A5C55;
  border-color: #3A5C55;
}
.sub-item input[type="checkbox"]:checked::after {
  content: '✓';
  position: absolute;
  top: -2px; left: 2px;
  font-size: 12px;
  color: #e2e8f0;
  font-weight: 700;
}
.sub-titulo {
  flex: 1;
  color: #cbd5e1;
}
.sub-titulo.concluido {
  text-decoration: line-through;
  color: #64748b;
}
.sub-responsavel {
  font-size: 11px;
  color: #64748b;
  background: rgba(148,163,184,0.08);
  padding: 1px 6px;
  border-radius: 4px;
  flex-shrink: 0;
}

/* ── Input nova subtarefa ── */
.add-subtask-row {
  display: flex;
  gap: 6px;
  padding: 8px 0 4px 0;
  align-items: center;
}
.add-subtask-row input {
  flex: 1;
  background: rgba(15,23,42,0.5);
  border: 1px solid rgba(148,163,184,0.15);
  border-radius: 6px;
  padding: 6px 10px;
  color: #e2e8f0;
  font-size: 12px;
  outline: none;
}
.add-subtask-row input:focus {
  border-color: #3A5C55;
}
.add-subtask-row input::placeholder { color: #475569; }

/* ── Botão "Adicionar tarefa nesta etapa" ── */
.add-tarefa-footer {
  padding: 8px 0 4px 0;
  margin-top: 2px;
}



/* ─── Accordion de tarefas por etapa (projeto-detalhe) ─── */

.tarefas-accordion {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.etapa-wrapper {
    border: 1px solid var(--border-light);
    border-radius: 8px;
    overflow: hidden;
    background: var(--bg);
}

.etapa-header {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.6rem 1rem;
    background: var(--surface-alt);
    cursor: pointer;
    user-select: none;
    transition: background 0.2s;
}

.etapa-header:hover {
    background: var(--hover-bg);
}

.etapa-header.on {
    border-bottom: 1px solid var(--border-light);
}

.etapa-caret {
    font-size: 0.7rem;
    color: var(--text-muted);
    transition: transform 0.2s;
    width: 14px;
    text-align: center;
}

.etapa-nome {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text);
    letter-spacing: 0.3px;
}

.etapa-count {
    margin-left: auto;
    font-size: 0.68rem;
    color: var(--text-muted);
    background: var(--bg);
    padding: 0.15rem 0.55rem;
    border-radius: 20px;
    font-weight: 500;
}

.etapa-tarefas {
    padding: 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

/* Tarefa item (estilo Gestão de Tarefas) */
.tarefa-item {
    border: 1px solid var(--border-light);
    border-radius: 6px;
    overflow: hidden;
    transition: border-color 0.2s;
    background: var(--surface);
}

.tarefa-item:hover {
    border-color: var(--primary);
}

.tarefa-item.tarefa-done {
    opacity: 0.6;
}

.tarefa-item.tarefa-atrasada {
    border-left: 3px solid #ef4444;
}

.tarefa-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.7rem;
    cursor: pointer;
    flex-wrap: wrap;
}

.tarefa-status-dot {
    font-size: 0.9rem;
    width: 16px;
    text-align: center;
}

.dot-pendente { color: #6b7280; }
.dot-atrasada { color: #ef4444; }
.dot-done { color: var(--primary); }

.tarefa-titulo {
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--text);
    flex: 1;
    min-width: 120px;
}

.tarefa-etapa-tag {
    font-size: 0.65rem;
    color: var(--text-muted);
    background: var(--surface-alt);
    padding: 0.1rem 0.4rem;
    border-radius: 4px;
    display: none; /* esconder pois ja esta agrupado */
}

.tarefa-responsavel {
    font-size: 0.72rem;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 0.2rem;
    white-space: nowrap;
}

.tarefa-horas {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text);
    white-space: nowrap;
}

.tarefa-prazo {
    font-size: 0.7rem;
    color: var(--text-muted);
    white-space: nowrap;
}

.tarefa-acoes {
    display: flex;
    gap: 0.2rem;
    opacity: 0;
    transition: opacity 0.2s;
}

.tarefa-item:hover .tarefa-acoes {
    opacity: 1;
}

.tarefa-acoes .btn {
    width: 24px;
    height: 24px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Subtarefas */
.tarefa-subtarefas {
    padding: 0.3rem 0.7rem 0.5rem 1.8rem;
    border-top: 1px solid var(--border-light);
    background: var(--surface-alt);
}

.sub-item {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.25rem 0;
    font-size: 0.75rem;
    color: var(--text);
}

.sub-item.done {
    color: var(--text-muted);
}

.sub-item.done .sub-texto {
    text-decoration: line-through;
}

.sub-item input[type="checkbox"] {
    width: 14px;
    height: 14px;
    cursor: pointer;
    accent-color: var(--primary);
}

.sub-texto {
    flex: 1;
}

.sub-resp {
    font-size: 0.65rem;
    color: var(--text-muted);
    background: var(--bg);
    padding: 0.05rem 0.35rem;
    border-radius: 4px;
}

.add-subtask-row {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.3rem;
    padding: 0.25rem 0;
}

.subtask-input {
    flex: 1;
    border: none;
    border-bottom: 1px solid var(--border-light);
    background: transparent;
    color: var(--text);
    font-size: 0.75rem;
    padding: 0.2rem 0;
    outline: none;
}

.subtask-input:focus {
    border-bottom-color: var(--primary);
}

.btn-subtask-add {
    width: 22px;
    height: 22px;
    border: none;
    border-radius: 50%;
    background: var(--primary);
    color: white;
    font-size: 0.8rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
}

.btn-subtask-add:hover {
    background: var(--primary-hover);
}

/* Botao adicionar tarefa na etapa */
.add-tarefa-etapa {
    padding: 0.5rem 0;
    text-align: center;
}

.add-tarefa-etapa .btn-ghost {
    font-size: 0.72rem;
    color: var(--text-muted);
}

.add-tarefa-etapa .btn-ghost:hover {
    color: var(--primary);
}

/* Loading */
.loading-tarefas {
    text-align: center;
    padding: 2rem;
    color: var(--text-muted);
    font-size: 0.85rem;
}


/* ═════════════════════════════════════════════════════════════════════
   ABA TAREFAS POR ETAPA v2 — Projeto Detalhe
   Todas as classes com prefixo pd- e escopadas em #view-projeto-detalhe.
   ═════════════════════════════════════════════════════════════════════ */

/* ── Cards de resumo ── */
#view-projeto-detalhe .pd-resumo{
  display:flex; gap:10px; flex-wrap:wrap; margin:16px 0 14px;
}
#view-projeto-detalhe .pd-stat{
  flex:1; min-width:130px; background:var(--surface);
  border:1px solid var(--border-light); border-radius:var(--radius);
  padding:12px 14px; box-shadow:var(--shadow-card);
  display:flex; flex-direction:column; gap:2px;
  position:relative; overflow:hidden;
}
#view-projeto-detalhe .pd-stat::before{
  content:''; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--slate);
}
#view-projeto-detalhe .pd-stat.is-total::before{ background:var(--brand); }
#view-projeto-detalhe .pd-stat.is-and::before  { background:var(--amber); }
#view-projeto-detalhe .pd-stat.is-done::before { background:var(--teal); }
#view-projeto-detalhe .pd-stat.is-late::before { background:var(--red); }
#view-projeto-detalhe .pd-stat-num{
  font-family:var(--font-display); font-size:22px; font-weight:600; line-height:1;
}
#view-projeto-detalhe .pd-stat-lbl{
  font-size:11px; color:var(--text-muted); text-transform:uppercase;
  letter-spacing:.04em; font-weight:600;
}
#view-projeto-detalhe .pd-stat-sub{ font-size:11px; color:var(--text-secondary); margin-top:2px; }

/* ── Etapa (nível 1) ── */
#view-projeto-detalhe .pd-etapa{
  background:var(--surface); border:1px solid var(--border-light);
  border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-card);
  margin-bottom:10px;
}
#view-projeto-detalhe .pd-etapa-head{
  display:flex; align-items:center; gap:12px; padding:14px 16px;
  cursor:pointer; user-select:none; transition:background .15s;
}
#view-projeto-detalhe .pd-etapa-head:hover{ background:var(--surface-hover); }
#view-projeto-detalhe .pd-etapa-caret{
  color:var(--text-muted); transition:transform .2s; flex-shrink:0;
  display:flex; width:16px;
}
#view-projeto-detalhe .pd-etapa.is-open .pd-etapa-caret{ transform:rotate(90deg); }
#view-projeto-detalhe .pd-etapa-sigla{
  font-family:var(--font-mono); font-size:11px; font-weight:600;
  color:var(--brand); background:var(--brand-soft);
  padding:3px 8px; border-radius:5px; letter-spacing:.03em; flex-shrink:0;
}
#view-projeto-detalhe .pd-etapa-nome{
  font-family:var(--font-display); font-size:15px; font-weight:600; color:var(--text);
}
#view-projeto-detalhe .pd-etapa-prog{
  margin-left:auto; display:flex; align-items:center; gap:10px; flex-shrink:0;
}
#view-projeto-detalhe .pd-prog-bar{
  width:90px; height:6px; background:var(--surface-hover);
  border:1px solid var(--border-light); border-radius:9999px; overflow:hidden;
}
#view-projeto-detalhe .pd-prog-fill{ height:100%; background:var(--teal); border-radius:9999px; }
#view-projeto-detalhe .pd-prog-txt{
  font-size:12px; color:var(--text-secondary); font-weight:600;
  font-family:var(--font-mono); min-width:34px; text-align:right;
}
#view-projeto-detalhe .pd-etapa-count{
  font-size:11px; color:var(--text-muted); background:var(--paper);
  border:1px solid var(--border-light); padding:3px 10px;
  border-radius:9999px; font-weight:500; flex-shrink:0;
}
#view-projeto-detalhe .pd-etapa-body{ display:none; padding:4px 12px 12px; }
#view-projeto-detalhe .pd-etapa.is-open .pd-etapa-body{ display:block; }

/* ── Tarefa (nível 2) ── */
#view-projeto-detalhe .pd-tarefa{
  border:1px solid var(--border-light); border-radius:var(--radius-sm);
  background:var(--surface); position:relative; overflow:hidden;
  margin-bottom:8px; transition:border-color .15s, box-shadow .15s;
}
#view-projeto-detalhe .pd-tarefa::before{
  content:''; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--slate);
}
#view-projeto-detalhe .pd-tarefa.is-and::before  { background:var(--amber); }
#view-projeto-detalhe .pd-tarefa.is-done::before { background:var(--teal); }
#view-projeto-detalhe .pd-tarefa.is-late::before { background:var(--red); }
#view-projeto-detalhe .pd-tarefa:hover{ border-color:var(--brand-light); box-shadow:var(--shadow-sm); }
#view-projeto-detalhe .pd-tarefa-main{ padding:10px 12px 10px 16px; cursor:pointer; }
#view-projeto-detalhe .pd-t-row1{ display:flex; align-items:center; gap:10px; }
#view-projeto-detalhe .pd-t-caret{
  color:var(--text-muted); flex-shrink:0; transition:transform .2s; display:flex; width:13px;
}
#view-projeto-detalhe .pd-tarefa.is-open .pd-t-caret{ transform:rotate(90deg); }
#view-projeto-detalhe .pd-t-titulo{
  font-size:14px; font-weight:600; color:var(--text); flex:1; min-width:100px;
}
#view-projeto-detalhe .pd-tarefa.is-done .pd-t-titulo{
  text-decoration:line-through; color:var(--text-muted);
}
#view-projeto-detalhe .pd-sub-badge{
  font-size:11px; font-weight:600; font-family:var(--font-mono);
  color:var(--text-secondary); background:var(--paper);
  border:1px solid var(--border-light); padding:2px 8px; border-radius:9999px;
  display:inline-flex; align-items:center; gap:4px; flex-shrink:0;
}

/* ── Linha de meta (2ª linha) ── */
#view-projeto-detalhe .pd-t-row2{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  margin-top:8px; padding-left:23px;
}
#view-projeto-detalhe .pd-meta{
  display:inline-flex; align-items:center; gap:5px;
  font-size:12px; color:var(--text-secondary); white-space:nowrap;
}
#view-projeto-detalhe .pd-meta svg{ width:13px; height:13px; color:var(--text-muted); }
#view-projeto-detalhe .pd-meta.is-late,
#view-projeto-detalhe .pd-meta.is-late svg{ color:var(--red); font-weight:600; }
#view-projeto-detalhe .gt-avatar{width:26px;height:26px;border-radius:50%;color:#fff;display:flex;align-items:center;justify-content:center;font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:9.5px;flex-shrink:0;}
#view-projeto-detalhe .pd-sep{
  width:1px; height:14px; background:var(--border-light); flex-shrink:0;
}
#view-projeto-detalhe .pd-horas{ display:inline-flex; align-items:center; gap:6px; }
#view-projeto-detalhe .pd-horas-txt{
  font-size:12px; font-weight:600; font-family:var(--font-mono); color:var(--text-secondary);
}
#view-projeto-detalhe .pd-horas-txt b{ color:var(--brand); }
#view-projeto-detalhe .pd-horas-bar{
  width:46px; height:5px; background:var(--surface-hover);
  border:1px solid var(--border-light); border-radius:9999px; overflow:hidden;
}
#view-projeto-detalhe .pd-horas-fill{ height:100%; background:var(--brand-light); border-radius:9999px; }
#view-projeto-detalhe .pd-horas-fill.is-over{ background:var(--red); }
#view-projeto-detalhe .pd-ml-auto{ margin-left:auto; }

/* ── Botões de ação ── */
#view-projeto-detalhe .pd-acoes{ display:flex; gap:3px; flex-shrink:0; }
#view-projeto-detalhe .pd-icon-btn{
  width:28px; height:28px; padding:0; display:inline-flex;
  align-items:center; justify-content:center; border-radius:var(--radius-sm);
  border:1px solid var(--border-light); background:var(--surface);
  cursor:pointer; color:var(--text-muted); transition:all .15s;
}
#view-projeto-detalhe .pd-icon-btn svg{ width:14px; height:14px; }
#view-projeto-detalhe .pd-icon-btn:hover{
  background:var(--surface-hover); color:var(--text); border-color:var(--border);
}
#view-projeto-detalhe .pd-icon-btn.is-edit:hover{
  background:var(--brand-ghost); color:var(--brand); border-color:var(--brand-light);
}
#view-projeto-detalhe .pd-icon-btn.is-ok:hover{
  background:var(--teal-soft); color:var(--teal); border-color:var(--teal);
}
#view-projeto-detalhe .pd-icon-btn.is-del:hover{
  background:var(--red-soft); color:var(--red); border-color:var(--red);
}
#view-projeto-detalhe .pd-timer{
  width:19px; height:19px; border-radius:50%; border:none; cursor:pointer;
  background:var(--brand); color:#fff; font-size:9px;
  display:inline-flex; align-items:center; justify-content:center; flex-shrink:0;
}
#view-projeto-detalhe .pd-timer:hover{ background:var(--brand-hover); }

/* ── Nível 3: tarefas-filhas + checklist ── */
#view-projeto-detalhe .pd-subs{
  display:none; padding:6px 12px 12px 40px;
  border-top:1px solid var(--border-light); background:var(--surface-hover);
}
#view-projeto-detalhe .pd-tarefa.is-open .pd-subs{ display:block; }
#view-projeto-detalhe .pd-subs-title{
  font-size:11px; font-weight:700; text-transform:uppercase;
  letter-spacing:.04em; color:var(--text-muted); margin:6px 0;
}
#view-projeto-detalhe .pd-filha{
  display:flex; align-items:center; gap:9px; padding:8px 10px;
  background:var(--surface); border:1px solid var(--border-light);
  border-radius:var(--radius-sm); margin-bottom:5px;
  position:relative; overflow:hidden;
}
#view-projeto-detalhe .pd-filha::before{
  content:''; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--slate);
}
#view-projeto-detalhe .pd-filha.is-and::before  { background:var(--amber); }
#view-projeto-detalhe .pd-filha.is-done::before { background:var(--teal); }
#view-projeto-detalhe .pd-filha.is-late::before { background:var(--red); }
#view-projeto-detalhe .pd-filha-txt{
  font-size:13px; font-weight:500; color:var(--text); flex:1; min-width:80px;
}
#view-projeto-detalhe .pd-filha.is-done .pd-filha-txt{
  text-decoration:line-through; color:var(--text-muted);
}
#view-projeto-detalhe .pd-filha-meta{
  display:inline-flex; align-items:center; gap:8px; flex-shrink:0;
}

/* checklist simples (SubTarefa) */
#view-projeto-detalhe .pd-check-item{
  display:flex; align-items:center; gap:9px; padding:6px 2px; font-size:13px;
}
#view-projeto-detalhe .pd-check{
  appearance:none; -webkit-appearance:none; width:17px; height:17px; flex-shrink:0;
  border:2px solid var(--border); border-radius:5px; cursor:pointer;
  position:relative; background:var(--surface); transition:all .15s;
}
#view-projeto-detalhe .pd-check:checked{ background:var(--teal); border-color:var(--teal); }
#view-projeto-detalhe .pd-check:checked::after{
  content:'✓'; position:absolute; top:-3px; left:2px;
  color:#fff; font-size:13px; font-weight:700;
}
#view-projeto-detalhe .pd-check-txt{ flex:1; color:var(--text-secondary); }
#view-projeto-detalhe .pd-check-item.is-done .pd-check-txt{
  text-decoration:line-through; color:var(--text-muted);
}

/* linha "nova subtarefa" */
#view-projeto-detalhe .pd-add-row{ display:flex; gap:8px; margin-top:8px; align-items:center; }
#view-projeto-detalhe .pd-add-row input{
  flex:1; border:1px solid var(--border); border-radius:var(--radius-sm);
  padding:7px 12px; font-size:12px; color:var(--text);
  background:var(--surface); font-family:var(--font-body); outline:none;
}
#view-projeto-detalhe .pd-add-row input:focus{ border-color:var(--brand-light); }
#view-projeto-detalhe .pd-add-row input::placeholder{ color:var(--text-muted); }

#view-projeto-detalhe .pd-vazio{
  font-size:13px; color:var(--text-muted); font-style:italic; padding:12px 4px;
}

@media (max-width:820px){
  #view-projeto-detalhe .pd-meta.hide-sm{ display:none; }
  #view-projeto-detalhe .pd-etapa-prog .pd-prog-bar{ display:none; }
}


/* ███████████████████████████████████████████████████
   ██  SUBTAREFAS REAIS (tarefas-filhas) — Fase 3  ██
   ███████████████████████████████████████████████████ */
#view-projeto-detalhe .pd-filha{
  display:flex; flex-direction:column; gap:4px;
  align-items:stretch;              /* zera o align-items:center da regra antiga (17805) */
  padding:8px 10px; margin:2px 0; border-radius:6px;
  background:var(--surface);        /* --bg-card nao existe no design-system */
  border:1px solid var(--border-light);
  transition:box-shadow 0.15s;
}
#view-projeto-detalhe .pd-filha:hover{box-shadow:0 1px 6px rgba(0,0,0,0.08);}
#view-projeto-detalhe .pd-filha.is-done{opacity:0.6;}
#view-projeto-detalhe .pd-filha.is-done .pd-filha-txt{text-decoration:line-through;}

#view-projeto-detalhe .pd-filha-row1{
  display:flex; align-items:center; gap:8px; width:100%;
}
#view-projeto-detalhe .pd-filha-row1 .pd-filha-txt{
  flex:1; font-size:0.9em; font-weight:500; color:var(--ink);
}
#view-projeto-detalhe .pd-filha-row1 .pd-acoes{
  display:none; gap:2px;
}
#view-projeto-detalhe .pd-filha:hover .pd-filha-row1 .pd-acoes{display:flex;}

#view-projeto-detalhe .pd-filha-row2{
  display:flex; align-items:center; gap:6px; flex-wrap:wrap;
  font-size:0.78em; color:var(--slate);
}
#view-projeto-detalhe .pd-filha-row2 .pd-sep{
  width:1px; height:14px; background:var(--border-light);
}
#view-projeto-detalhe .pd-filha-row2 .pd-horas{
  display:flex; align-items:center; gap:4px;
}
#view-projeto-detalhe .pd-filha-row2 .pd-horas .pd-horas-txt{
  white-space:nowrap;
}
#view-projeto-detalhe .pd-filha-row2 .pd-horas-bar{
  width:40px; height:4px; background:var(--bg-input); border-radius:2px; overflow:hidden;
}
#view-projeto-detalhe .pd-filha-row2 .pd-horas-fill{
  height:100%; background:var(--teal); border-radius:2px; transition:width 0.3s;
}
#view-projeto-detalhe .pd-filha-row2 .pd-horas-fill.is-over{background:var(--red);}
/* mesmo botao de play da tarefa-mae, so um pouco menor */
#view-projeto-detalhe .pd-filha-row2 .pd-timer{
  width:17px; height:17px; border-radius:50%; border:none; cursor:pointer;
  background:var(--brand); color:#fff; font-size:8px; padding:0;
  display:inline-flex; align-items:center; justify-content:center; flex-shrink:0;
}
#view-projeto-detalhe .pd-filha-row2 .pd-timer:hover{ background:var(--brand-hover); }
#view-projeto-detalhe .pd-filha-row2 .pd-ml-auto{margin-left:auto;}
#view-projeto-detalhe .pd-filha-row2 .hide-sm{display:inline;}
@media(max-width:640px){
  #view-projeto-detalhe .pd-filha-row2 .hide-sm{display:none;}
}

/* Anotações (ex-checklist) */
#view-projeto-detalhe .pd-anotacoes-divider{
  margin:12px 0 8px; padding-top:9px; border-top:1px solid var(--border-light);
}
#view-projeto-detalhe .pd-anotacoes-title{
  font-size:0.78em; font-weight:600; text-transform:uppercase;
  letter-spacing:0.5px; color:var(--slate); margin-bottom:6px;
}

/* ════════════════════════════════════════════════════════════
   GESTÃO DE TAREFAS v2 — visualização (larguras, título,
   badge de subtarefas, faixa aninhada e agrupamento)
   ════════════════════════════════════════════════════════════ */

/* ── Fase A: larguras proporcionais ── */
#view-gestao-tarefas .gt-table th:nth-child(1){ width:26%; }   /* Tarefa      */
#view-gestao-tarefas .gt-table th:nth-child(2){ width:13%; }   /* Projeto     */
#view-gestao-tarefas .gt-table th:nth-child(3){ width:11%; }   /* Etapa       */
#view-gestao-tarefas .gt-table th:nth-child(4){ width:8.5%; }  /* Status      */
#view-gestao-tarefas .gt-table th:nth-child(5){ width:5.5%; }  /* Duração     */
#view-gestao-tarefas .gt-table th:nth-child(6){ width:6.5%; }  /* Início      */
#view-gestao-tarefas .gt-table th:nth-child(7){ width:6.5%; }  /* Fim         */
#view-gestao-tarefas .gt-table th:nth-child(8){ width:6%; }    /* H.Est       */
#view-gestao-tarefas .gt-table th:nth-child(9){ width:7%; }    /* H.Real      */
#view-gestao-tarefas .gt-table th:nth-child(10){ width:5%; }   /* Responsável */
#view-gestao-tarefas .gt-table th:nth-child(11){ width:8%; }   /* Prioridade  */
#view-gestao-tarefas .gt-table th:nth-child(12){ width:4%; }   /* Ação        */

/* título em 2 linhas (o texto completo fica no title=) */
#view-gestao-tarefas .gt-task-name{
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden; line-height:1.35; word-break:break-word;
}
#view-gestao-tarefas .gt-proj-cell{
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden; line-height:1.3; font-size:11.5px; color:var(--text-secondary);
}
/* agrupado por projeto: a coluna Projeto some, mas segue no DOM
   (indices de atualizarLinhaGT nao podem mudar — ver PLANO §2.1) */
#view-gestao-tarefas.gt-agrupado .gt-table th:nth-child(2),
#view-gestao-tarefas.gt-agrupado .gt-table td:nth-child(2){ display:none; }

/* ── Fase B: badge de subtarefas ── */
#view-gestao-tarefas .gt-sub-badge{
  display:inline-flex; align-items:center; gap:4px;
  font-size:10px; font-weight:700; font-family:var(--font-mono);
  color:var(--brand); background:var(--brand-soft);
  padding:2px 7px; border-radius:9999px; margin-left:7px; white-space:nowrap;
}

/* ── Fase C: subtarefa como faixa aninhada ── */
#view-gestao-tarefas .gt-sub-band > td,
#view-gestao-tarefas .gt-subadd-row > td{ padding:0; background:var(--surface-hover); }
#view-gestao-tarefas .gt-sub-inner{
  padding:7px 12px 9px 42px; display:flex; flex-direction:column; gap:5px;
}
#view-gestao-tarefas .gt-sub-item{
  display:flex; align-items:center; gap:10px;
  background:var(--surface); border:1px solid var(--border-light);
  border-radius:6px; padding:7px 10px; cursor:pointer;
  position:relative; overflow:hidden; transition:border-color .15s;
}
#view-gestao-tarefas .gt-sub-item:hover{ border-color:var(--brand-light); }
#view-gestao-tarefas .gt-sub-item::before{
  content:''; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--slate);
}
#view-gestao-tarefas .gt-sub-item.s-and::before { background:var(--amber); }
#view-gestao-tarefas .gt-sub-item.s-done::before{ background:var(--teal); }
#view-gestao-tarefas .gt-sub-item.s-late::before{ background:var(--red); }
#view-gestao-tarefas .gt-sub-tit{
  flex:1; font-size:12.5px; font-weight:500; color:var(--text); min-width:70px;
}
#view-gestao-tarefas .gt-sub-item.s-done .gt-sub-tit{
  text-decoration:line-through; color:var(--text-muted);
}
#view-gestao-tarefas .gt-sub-meta{
  display:inline-flex; align-items:center; gap:9px; flex-shrink:0;
}

/* ── Fase D: cabeçalho de grupo por projeto ── */
#view-gestao-tarefas .gt-grupo > td{
  padding:9px 12px; background:var(--paper);
  border-top:1px solid var(--border); border-bottom:1px solid var(--border);
}
#view-gestao-tarefas .gt-grupo:hover > td{ background:var(--paper); }
#view-gestao-tarefas .gt-grupo-inner{ display:flex; align-items:center; gap:10px; }
#view-gestao-tarefas .gt-grupo-nome{
  font-family:'Space Grotesk',sans-serif; font-size:13px; font-weight:600; color:var(--text);
}
#view-gestao-tarefas .gt-grupo-cont{
  font-size:11px; color:var(--text-muted); background:var(--surface);
  border:1px solid var(--border-light); padding:2px 9px; border-radius:9999px;
}
#view-gestao-tarefas .gt-grupo-prog{ margin-left:auto; display:flex; align-items:center; gap:8px; }
#view-gestao-tarefas .gt-grupo-bar{
  width:90px; height:6px; background:var(--surface);
  border:1px solid var(--border-light); border-radius:9999px; overflow:hidden;
}
#view-gestao-tarefas .gt-grupo-fill{ height:100%; background:var(--teal); }
#view-gestao-tarefas .gt-grupo-txt{
  font-family:var(--font-mono); font-size:11px; font-weight:600; color:var(--text-secondary);
}

/* ═══════════════════════════════════════════════
   TIMELINE — Status Contratual (v2.1)
   Classes adicionadas ao .timeline-step conforme
   o status_contratual vindo do backend.
   ═══════════════════════════════════════════════ */
.timeline-step.status-aprovada {
  border-left: 3px solid #22c55e;
}
.timeline-step.status-aprovada .step-content {
  opacity: 0.85;
}
.timeline-step.status-entregue {
  border-left: 3px solid #06b6d4;
}
.timeline-step.status-no_prazo {
  border-left: 3px solid #3b82f6;
}
.timeline-step.status-atrasada {
  border-left: 3px solid #ef4444;
  background: rgba(239,68,68,0.05);
}
.timeline-step.status-em_risco {
  border-left: 3px solid #f59e0b;
  background: rgba(245,158,11,0.05);
}
.timeline-step.status-a_iniciar {
  border-left: 3px solid #9ca3af;
  opacity: 0.7;
}
.timeline-step.status-sem_prazo {
  border-left: 3px solid #6b7280;
  opacity: 0.6;
}

/* ── Mini-Radar (v2.1) ── */
.mini-radar {
  background: var(--surface);
  border: 1px solid var(--border-light);
  border-radius: var(--radius);
  padding: 0.75rem 1rem;
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  box-shadow: var(--shadow-sm);
}
.mini-radar-title {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
}
.mini-radar-items {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.mini-radar-item {
  font-size: 0.78rem;
  font-weight: 600;
  padding: 0.25rem 0.65rem;
  border-radius: 20px;
  white-space: nowrap;
}
.mini-radar-item.atrasada { background: #fef2f2; color: #dc2626; }
.mini-radar-item.risco { background: #fffbeb; color: #d97706; }
.mini-radar-item.cliente { background: #eff6ff; color: #2563eb; }
.mini-radar-item.sem-entrega { background: #fdf2f8; color: #be185d; }