/* Design System - LuxArch Manager (Stable Boutique) */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap');

:root {
    --primary-burgundy: #641414;
    /* Os mesmos canais da cor primaria, em numeros soltos, para as
       transparencias: rgba() nao aceita um hex dentro dele, entao sem esta
       variavel toda faixa e todo fundo suave teria de repetir a cor a mao — foi
       exatamente assim que 246 lugares ficaram presos a um bordo antigo
       (var(--primary-burgundy)) que nao acompanhava a configuracao. Reescrita pelo
       applyBranding sempre que a cor primaria muda. (10/08/2026) */
    --primary-rgb: 100, 20, 20;
    --secondary-champagne: #D9C5B2;
    --text-dark: #1A1A1A;
    --text-light: #718096;
    --bg-offwhite: #FFFFFF;
    --border-light: #E2E8F0;
    --white: #FFFFFF;
    --shadow-soft: 0 10px 30px rgba(0, 0, 0, 0.05);
    --transition: all 0.3s ease;
}


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

body {
    font-family: 'Poppins', sans-serif;
    background-color: var(--bg-offwhite);
    color: var(--text-dark);
    font-weight: 300;
    line-height: 1.6;
    overflow-x: hidden;
    padding-top: 40px;
}

/* Botao e campo NAO herdam a fonte do body: e regra do proprio navegador,
   nao defeito do ARTHOS — por isso saiam em Arial enquanto o resto da tela
   estava em Poppins. Achado tres vezes antes de ser consertado (secoes 39,
   48 e 52) porque cada vez foi tratado como caso isolado de uma tela.
   Poppins explicito, e nao "inherit": dentro de .print-area (Playfair) o
   inherit poria os botoes em fonte de documento. (12/08/2026, secao 54)
   Estilo escrito no proprio elemento continua vencendo esta regra — e o
   que mantem o monospace da caixa do modal de pastas. */
button,
input,
select,
textarea {
    font-family: 'Poppins', sans-serif;
}

body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 40px;
    background-color: var(--primary-burgundy);
    z-index: 9999;
    -webkit-app-region: drag;
}

/* A logo do ARTHOS dentro da faixa bordo (15/08/2026).
   Fica ACIMA do body::before (9999) porque a faixa e' um pseudo-elemento e
   nao pode conter imagem posicionada. Repete o -webkit-app-region: drag: sem
   isso, o pedaco da faixa coberto por esta barra deixaria de arrastar a
   janela do Electron.
   Fica a' DIREITA (pedido dela em 15/08, depois de ver a versao a' esquerda):
   termina em cima do sininho / dica / engrenagem / TR da linha de baixo. O
   padding de 2rem e' o MESMO da .navbar, entao o fim da logo cai exatamente
   no fim do TR.
   pointer-events: none para nao roubar o clique de nada. */
.arthos-barra-marca {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 40px;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 0 2rem;
    pointer-events: none;
    -webkit-app-region: drag;
}

.arthos-barra-marca-logo {
    height: 20px;
    width: auto;
    display: block;
    opacity: 0.95;
}

@media (max-width: 768px) {
    .arthos-barra-marca { padding: 0 1rem; }
    .arthos-barra-marca-logo { height: 17px; }
}

/* A mesma logo no pe' do cartao de login, abaixo dos termos (15/08/2026).
   Aqui o fundo e' branco, entao usa a versao bordo do arquivo — a creme da
   faixa desapareceria. Mesma altura de 20px da faixa, centralizada. */
.arthos-login-marca {
    display: flex;
    justify-content: center;
    margin-top: 1.75rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border-light);
}

/* Precisa dos DOIS nomes juntos: o <style> do proprio login.html tem
   ".login-card img { height: 60px; margin-bottom: 2rem }" — mesma forca que
   ".arthos-login-marca img" e escrito depois, entao venceria e a logo sairia
   com 60px de altura (medido: 225x60 em vez de 75x20). */
.login-card .arthos-login-marca img {
    height: 20px;
    width: auto;
    display: block;
    margin-bottom: 0;
    opacity: 0.9;
}

a {
    color: var(--primary-burgundy);
    transition: var(--transition);
}

a:hover {
    opacity: 0.8;
}

.container {
    max-width: 100% !important;
    width: 100% !important;
    padding: 0 4rem !important;
    margin: 110px auto 40px;
}

.container .container {
    padding: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
}

@media (max-width: 768px) {
    .container {
        padding: 0 1.5rem !important;
        margin-top: 85px;
    }
}

.greeting-section {
    text-align: center;
    margin-bottom: 2rem;
}

.greeting-section h1 {
    font-size: 1.6rem;
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 0.3rem;
}

.greeting-section p {
    font-size: 0.8rem;
    color: var(--text-light);
}

.navbar {
    background-color: var(--white);
    height: 70px;
    display: flex;
    align-items: center;
    padding: 0 2rem;
    border-bottom: 1px solid var(--border-light);
    position: fixed;
    top: 40px;
    left: 0;
    right: 0;
    width: auto;
    z-index: 1000;
    box-shadow: none;
}

.nav-left {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 200px;
}

.nav-logo img { height: 32px; }

.nav-center {
    flex: 1;
    display: flex;
    justify-content: center;
}

.nav-menu {
    display: flex; list-style: none; gap: 1.5rem;
}

.nav-link {
    text-decoration: none;
    color: var(--text-light);
    font-size: 0.8rem;
    font-weight: 400;
    transition: var(--transition);
}

.nav-link:hover, .nav-item.active .nav-link {
    color: var(--primary-burgundy);
}

.nav-item { position: relative; padding: 1rem 0; }

.nav-item.active::after {
    content: ''; position: absolute; bottom: 10px; left: 50%;
    transform: translateX(-50%); width: 4px; height: 4px;
    background-color: var(--secondary-champagne); border-radius: 50%;
}

.nav-right {
    display: flex;
    align-items: center;
    gap: 1rem;
    width: 200px;
    justify-content: flex-end;
}

.nav-icon {
    color: var(--text-light);
    font-size: 0.9rem;
    cursor: pointer;
}

/* Dashboard Base */
.dashboard-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.card {
    background: var(--white);
    padding: 1.2rem;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
    border: 1px solid #F0F0F0;
}

.card-title {
    font-size: 0.65rem;
    font-weight: 700;
    color: var(--primary-burgundy);
    margin-bottom: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 1.5px;
}

.card-highlight {
    /* Era um degrade que clareava ate 72% da cor — na tela isso le como
       "bordo lavando para branco". Ele pediu a cor SOLIDA das configuracoes.
       (12/08/2026, secao 55) */
    background: var(--primary-burgundy);
    color: white;
    border: none;
    text-align: center;
}

.card-highlight .card-title { color: rgba(255,255,255,0.7); }

.highlight-value {
    font-size: 1.6rem;
    font-weight: 600;
    margin-bottom: 0.2rem;
}

/* Timer Circular */
.circular-timer {
    width: 140px;
    height: 140px;
    border-radius: 50%;
    border: 6px solid rgba(255,255,255,0.1);
    border-top: 6px solid var(--secondary-champagne);
    margin: 1rem auto;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: rotate 10s linear infinite;
}

.timer-value {
    font-size: 1.4rem;
    font-weight: 600;
    animation: none;
    transform: rotate(0);
}

@keyframes rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

/* Metrics */
.metric-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.7rem 0;
    border-bottom: 1px solid var(--bg-offwhite);
    font-size: 0.8rem;
}

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

.metric-icon {
    width: 24px; height: 24px;
    background-color: var(--primary-burgundy);
    color: var(--white);
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%; font-size: 0.75rem; margin-right: 0.8rem;
}

/* Agenda */
.agenda-item {
    padding: 1.2rem 0;
    border-bottom: 1px solid var(--secondary-champagne);
    display: flex; gap: 1.5rem;
}

.agenda-time { font-weight: 600; font-size: 0.85rem; min-width: 50px; }
.agenda-content { font-size: 0.85rem; }

/* Projects Mural (Pinterest) */
.projects-mural {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1.5rem;
    margin-top: 2rem;
}

.project-card {
    background: var(--white); border-radius: 12px; overflow: hidden;
    border: 1px solid #F0F0F0; transition: var(--transition);
    cursor: pointer; box-shadow: 0 4px 15px rgba(0,0,0,0.03);
}

.project-card:hover { transform: translateY(-5px); box-shadow: 0 10px 30px rgba(0,0,0,0.08); border-color: var(--secondary-champagne); }
.project-image { 
    height: 140px; 
    background-size: cover; 
    background-position: center; 
    position: relative;
}
.project-stage-badge {
    position: absolute;
    top: 15px;
    right: 15px;
    background: rgba(var(--primary-rgb), 0.85); /* Burgundy semi-transparent */
    color: white;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.65rem;
    font-weight: 500;
    backdrop-filter: blur(4px);
    letter-spacing: 0.5px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}
.project-details { padding: 1rem; }
/* List View - Horizontal Cards */
.projects-list-view {
    margin-top: 2rem;
}
.project-card-horizontal {
    display: flex;
    background: white;
    border-radius: 15px;
    overflow: hidden;
    border: 1px solid #F0F0F0;
    transition: all 0.3s;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(0,0,0,0.02);
}
.project-card-horizontal:hover {
    transform: translateX(10px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.06);
    border-color: var(--secondary-champagne);
}
.project-image-horizontal {
    width: 180px;
    min-width: 180px;
    height: 140px;
    background-size: cover;
    background-position: center;
}
.project-details-horizontal {
    flex: 1;
    padding: 1.5rem 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.info-main h3 {
    font-size: 1rem;
    color: var(--primary-burgundy);
    font-weight: 600;
    margin-bottom: 5px;
}
.info-main p {
    font-size: 0.85rem;
    color: var(--text-light);
}
.info-meta {
    text-align: right;
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: flex-end;
}
.stage-tag {
    font-size: 0.65rem;
    background: #FFF9F2;
    color: var(--primary-burgundy);
    padding: 4px 12px;
    border-radius: 20px;
    font-weight: 500;
    border: 1px solid var(--secondary-champagne);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.type-tag {
    font-size: 0.7rem;
    color: var(--text-light);
    font-style: italic;
}

/* Kanban / Flow View */
.kanban-board {
    min-height: 600px;
    padding-top: 1rem;
}
.kanban-column {
    min-width: 0;
    max-width: none;
    flex: 1;
    background: transparent;
    border-radius: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    max-height: 80vh;
    overflow-y: auto;
    border: none;
}
.kanban-column-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 0 0.75rem 0;
    border-bottom: 1px solid #1A1A1A;
    margin-bottom: 0.25rem;
}
.kanban-column-header h4 {
    font-size: 0.6rem;
    text-transform: uppercase;
    letter-spacing: 2.5px;
    color: #1A1A1A;
    margin: 0;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.kanban-items {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}
.kanban-card {
    background: #FFFFFF;
    padding: 1rem 1rem 0.85rem;
    border-radius: 0;
    box-shadow: none;
    border: 1px solid #E8E8E8;
    border-left: 2px solid var(--primary-burgundy);
    cursor: pointer;
    transition: all 0.2s ease;
}
.kanban-card:hover {
    transform: translateX(3px);
    border-left-color: var(--primary-burgundy);
    box-shadow: -3px 0 0 0 var(--primary-burgundy);
    border-color: var(--secondary-champagne);
}
.kanban-card-title {
    font-size: 0.8rem;
    font-weight: 600;
    color: #1A1A1A;
    margin-bottom: 3px;
    letter-spacing: 0.3px;
}
.kanban-card-client {
    font-size: 0.7rem;
    color: #718096;
    font-weight: 300;
}
.kanban-card-meta {
    font-size: 0.6rem;
    color: var(--primary-burgundy);
    margin-top: 10px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 1px;
}
.kanban-empty {
    font-size: 0.65rem;
    color: #BBB;
    text-align: center;
    padding: 2.5rem 0;
    font-style: italic;
    border: 1px dashed #EEE;
    border-radius: 8px;
}

/* --- KANBAN COMPACTO (VISÃO COMPLETA SEM ROLAGEM) --- */
.container.is-kanban-view {
    max-width: 98% !important;
    transition: max-width 0.4s ease;
}

.is-kanban-view .kanban-board {
    gap: 0.5rem !important;
}

.is-kanban-view .kanban-column {
    min-width: 0 !important;
    max-width: none !important;
    flex: 1 !important;
    gap: 0.5rem !important;
}

.is-kanban-view .kanban-column-header {
    padding-bottom: 0.4rem !important;
}

.is-kanban-view .kanban-column-header h4 {
    font-size: 0.45rem !important;
    letter-spacing: 1px !important;
}

.is-kanban-view .kanban-card {
    padding: 0.6rem !important;
}

.is-kanban-view .kanban-card-title {
    font-size: 0.75rem !important;
    margin-bottom: 2px !important;
}

.is-kanban-view .kanban-card-client, 
.is-kanban-view .kanban-card-meta {
    font-size: 0.6rem !important;
}

.is-kanban-view .kanban-card-meta {
    margin-top: 5px !important;
}

/* Workflow Timeline / Stepper */
.workflow-scroll-container {
    overflow-x: auto;
    padding: 1rem 0;
}
.workflow-timeline {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 800px;
    margin: 0 auto;
    position: relative;
}
.workflow-timeline::before {
    content: '';
    position: absolute;
    top: 20px;
    left: 0;
    width: 100%;
    height: 2px;
    background: #E2E8F0;
    z-index: 1;
}
.workflow-step {
    position: relative;
    z-index: 2;
    background: white;
    padding: 0 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}
.step-num {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: white;
    border: 2px solid #E2E8F0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--text-light);
    transition: all 0.3s;
}
.workflow-step.active .step-num {
    border-color: var(--primary-burgundy);
    background: var(--primary-burgundy);
    color: white;
    box-shadow: 0 4px 10px rgba(var(--primary-rgb), 0.2);
}
.workflow-step.completed .step-num {
    border-color: #48BB78;
    background: #48BB78;
    color: white;
}
.step-label {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 600;
    color: var(--text-light);
}
.workflow-step.active .step-label {
    color: var(--primary-burgundy);
}

/* Internal Project Tabs (Minimalist Menu) */
.internal-tabs {
    display: flex; 
    gap: 2rem; 
    border-bottom: 1px solid var(--border-light);
    margin-bottom: 2rem;
    padding-bottom: 0;
}

.tab-item {
    padding: 0.8rem 0; 
    font-size: 0.85rem; 
    color: var(--text-light); 
    cursor: pointer; 
    font-weight: 500;
    transition: var(--transition);
    position: relative;
}

.tab-item:hover {
    color: var(--primary-burgundy);
}

.tab-item.active { 
    color: var(--primary-burgundy); 
}

.tab-item.active::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 100%;
    height: 2px;
    background: var(--primary-burgundy);
}

.tab-pane { display: none; }
.tab-pane.active { display: block; animation: fadeIn 0.4s ease; }

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

/* Info Grid & Soft Cards */
.info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.info-block {
    background: var(--white);
    padding: 1.5rem;
    border-radius: 12px;
    border: 1px solid #F0F0F0;
    box-shadow: 0 2px 15px rgba(0, 0, 0, 0.02);
    transition: var(--transition);
}

.info-block:hover {
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
    border-color: var(--secondary-champagne);
}

.info-block h4 {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--primary-burgundy);
    margin-bottom: 1rem;
    border-bottom: 1px solid var(--bg-offwhite);
    padding-bottom: 0.5rem;
}

.info-block p {
    font-size: 0.85rem;
    margin-bottom: 0.5rem;
}

/* Checklist Groups as Soft Cards */
.checklist-group {
    background: var(--white);
    padding: 1.5rem;
    border-radius: 12px;
    border: 1px solid #F0F0F0;
    box-shadow: 0 2px 15px rgba(0, 0, 0, 0.02);
    margin-bottom: 1.5rem;
}

.checklist-title {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--primary-burgundy);
    margin-bottom: 1rem;
}

.checklist-item {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    padding: 0.5rem 0;
    font-size: 0.85rem;
    border-bottom: 1px solid #FAFAFA;
}

.checklist-item input[type="checkbox"] {
    accent-color: var(--primary-burgundy);
    width: 16px;
    height: 16px;
    cursor: pointer;
}

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

/* Timeline as Soft Card */
.timeline {
    background: var(--white);
    padding: 2rem;
    border-radius: 12px;
    border: 1px solid #F0F0F0;
    box-shadow: 0 2px 15px rgba(0, 0, 0, 0.02);
}

.timeline-item {
    padding-left: 1.5rem;
    border-left: 2px solid var(--secondary-champagne);
    position: relative;
    padding-bottom: 2rem;
}

.timeline-item::before {
    content: '';
    position: absolute;
    left: -7px;
    top: 5px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--secondary-champagne);
    border: 2px solid var(--white);
}

/* Palette Grid & Tags Selection */
.palette-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem;
    margin-top: 0.5rem;
}

.palette-tag {
    background: #F7FAFC;
    color: var(--text-dark);
    padding: 0.5rem 1rem;
    border-radius: 20px;
    font-size: 0.75rem;
    cursor: pointer;
    border: 1px solid var(--border-light);
    transition: var(--transition);
    user-select: none;
}

.palette-tag:hover {
    border-color: var(--secondary-champagne);
    background: #FFF;
}

.palette-tag.active {
    background: var(--primary-burgundy);
    color: var(--white);
    border-color: var(--primary-burgundy);
    box-shadow: 0 4px 10px rgba(var(--primary-rgb), 0.2);
}

.palette-tag.active::before {
    content: '\f00c';
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    margin-right: 5px;
}

.timeline-date {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--text-light);
    margin-bottom: 0.3rem;
}

/* Forms & Tables */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 1rem; }
.form-group { display: flex; flex-direction: column; gap: 0.3rem; }
.form-group label { font-size: 0.65rem; text-transform: uppercase; font-weight: 600; color: var(--text-light); }
.form-group input, .form-group select, .form-group textarea { padding: 0.6rem; border: 1px solid var(--border-light); border-radius: 6px; font-size: 0.85rem; }

.form-section-title {
    font-size: 0.65rem; font-weight: 700; color: var(--primary-burgundy);
    text-transform: uppercase; letter-spacing: 1.5px;
    margin: 1.5rem 0 0.8rem 0; padding-bottom: 0.4rem;
    border-bottom: 1px solid var(--secondary-champagne);
}

.data-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 1rem;
    font-size: 0.8rem;
}

.data-table th {
    text-align: left;
    padding: 1rem;
    color: var(--text-light);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 0.65rem;
    border-bottom: 2px solid var(--bg-offwhite);
}

.data-table td {
    padding: 1.2rem 1rem;
    border-bottom: 1px solid #F5F5F5;
    color: var(--text-dark);
    vertical-align: middle;
}

.data-table tr:hover {
    background-color: #FAFAFA;
}

.budget-item-input { width: 100%; border: 1px solid transparent; padding: 0.4rem; font-size: 0.8rem; background: transparent; }

/* Backoffice Accordion */
.accordion { border: 1px solid var(--border-light); border-radius: 8px; overflow: hidden; margin-top: 1.5rem; }
.accordion-item { border-bottom: 1px solid var(--border-light); }
.accordion-header {
    padding: 1.2rem 1.5rem; background: white; display: flex; justify-content: space-between;
    align-items: center; cursor: pointer; transition: background 0.3s ease; font-size: 0.85rem; font-weight: 600;
}
.accordion-content { max-height: 0; overflow: hidden; transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); background: #FAFAFA; }
.accordion-item.active .accordion-content { max-height: 1000px; padding: 1.5rem; }
.accordion-header i { transition: transform 0.3s ease; font-size: 0.7rem; color: var(--text-light); }
.accordion-item.active .accordion-header i { transform: rotate(180deg); }

/* Buttons & Tags Boutique */
.btn-pill {
    display: inline-block;
    padding: 0.6rem 1.5rem;
    background: var(--bg-offwhite);
    border: 1px solid var(--border-light);
    border-radius: 20px;
    text-decoration: none;
    color: var(--text-dark);
    font-size: 0.8rem;
    font-weight: 500;
    margin-top: 1rem;
    transition: var(--transition);
    cursor: pointer;
}

.btn-pill:hover {
    background: var(--primary-burgundy);
    color: var(--white);
    border-color: var(--primary-burgundy);
}

.btn-toggle {
    background: none;
    border: 1px solid var(--border-light);
    padding: 0.5rem 1rem;
    border-radius: 20px;
    cursor: pointer;
    font-size: 0.8rem;
    transition: var(--transition);
}

.btn-toggle.active {
    background: var(--primary-burgundy);
    color: var(--white);
    border-color: var(--primary-burgundy);
}

.palette-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 0.5rem;
}

.palette-tag {
    display: inline-block;
    padding: 0.35rem 0.8rem;
    background: var(--bg-offwhite);
    border: 1px solid var(--border-light);
    border-radius: 15px;
    font-size: 0.72rem;
    font-weight: 300;
    cursor: pointer;
    transition: all 0.2s;
}

.palette-tag:hover, .palette-tag.active {
    background-color: var(--primary-burgundy);
    color: var(--white);
    border-color: var(--primary-burgundy);
}

/* Modals */
.modal-overlay {
    display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.5); z-index: 2000;
    align-items: center; justify-content: center;
}
.modal-content { background: var(--white); width: 90%; max-width: 800px; max-height: 90vh; border-radius: 20px; padding: 2.5rem; overflow-y: auto; }

/* Search */
.search-container { position: relative; width: 100%; margin-bottom: 1.5rem; }
.search-input { 
    width: 100%; 
    padding: 1rem 0; 
    border: none;
    border-bottom: 1px solid #EEE;
    border-radius: 0;
    font-size: 0.9rem;
    background: transparent;
    transition: var(--transition);
    color: var(--text-dark);
}

.search-input:focus {
    outline: none;
    border-bottom-color: var(--primary-burgundy);
}

.search-icon-inside {
    display: none; /* Removendo ícone para máximo minimalismo se preferido, ou reposicionando */
}

/* Pricing Project List */
.pricing-project-list {
    max-height: 400px;
    overflow-y: auto;
    padding-right: 5px;
}

.alphabet-separator {
    font-size: 0.6rem;
    font-weight: 600;
    color: var(--secondary-champagne);
    margin: 1.5rem 0 0.8rem 0;
    text-transform: uppercase;
    letter-spacing: 2px;
    display: flex;
    align-items: center;
    gap: 1rem;
}

.alphabet-separator::after {
    content: '';
    flex: 1;
    height: 1px;
    background: #F0F0F0;
}

.pricing-project-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    background: white;
    border: 1px solid #F0F0F0;
    border-radius: 10px;
    margin-bottom: 0.5rem;
    cursor: pointer;
    transition: var(--transition);
}

.pricing-project-item:hover {
    border-color: var(--primary-burgundy);
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
    transform: translateX(5px);
}

.pricing-project-item .project-title {
    display: block;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-dark);
}

.pricing-project-item .client-name {
    font-size: 0.75rem;
    color: var(--text-light);
}

.pricing-project-item .project-meta {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.pricing-project-item .project-tag {
    font-size: 0.65rem;
    background: var(--bg-offwhite);
    padding: 0.2rem 0.6rem;
    border-radius: 4px;
    color: var(--text-light);
    border: 1px solid var(--border-light);
}

.pricing-project-item i {
    font-size: 0.8rem;
    color: var(--secondary-champagne);
}


/* Alerts & Special Blocks */
.alert-gargalo {
    background: #FFF5F5;
    border: 1px solid #FEB2B2;
    padding: 1rem;
    border-radius: 10px;
    color: #C53030;
    font-size: 0.8rem;
    display: flex;
    gap: 1rem;
    align-items: center;
}

.progress-container {
    margin-top: 1rem;
}

.progress-label {
    display: flex;
    justify-content: space-between;
    font-size: 0.75rem;
    margin-bottom: 0.5rem;
    color: var(--text-light);
}

.progress-bar {
    height: 8px;
    background: #EDF2F7;
    border-radius: 4px;
    overflow: hidden;
}

.progress-fill {
    height: 100%;
    background: var(--primary-burgundy);
    border-radius: 4px;
}

@media (max-width: 768px) {
    .dashboard-grid { grid-template-columns: 1fr; }
    .nav-center { display: none; }
}

/* Novos Estilos LuxArch */

/* Modal Moderno */
.modal-overlay {
    display: none;
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0,0,0,0.5);
    z-index: 2000;
    align-items: center;
    justify-content: center;
}

.modal-card {
    background: white;
    width: 90%;
    max-width: 800px;
    border-radius: 20px;
    padding: 2.5rem;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    position: relative;
    animation: modalSlideUp 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

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

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
}

.modal-title {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--primary-burgundy);
}

.modal-close {
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: var(--text-light);
}

/* Jornada do Cliente (Workflow) */
.workflow-scroll-container {
    overflow-x: hidden;
    padding: 1rem 0;
    margin: 0;
}

.workflow-timeline {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    padding: 0 1rem;
}

.workflow-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 140px;
    text-align: center;
    position: relative;
}

.workflow-step::after {
    content: '\f054';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    position: absolute;
    right: -1rem;
    top: 20px;
    color: var(--border-light);
    font-size: 0.8rem;
}

.workflow-step:last-child::after { display: none; }

.step-num {
    width: 40px;
    height: 40px;
    background: var(--bg-offwhite);
    border: 1px solid var(--border-light);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-light);
    margin-bottom: 0.8rem;
    transition: var(--transition);
}

.workflow-step.active .step-num {
    background: var(--primary-burgundy);
    color: white;
    border-color: var(--primary-burgundy);
    box-shadow: 0 4px 10px rgba(var(--primary-rgb), 0.3);
}

.step-label {
    font-size: 0.7rem;
    font-weight: 500;
    color: var(--text-dark);
    line-height: 1.3;
}

/* Estilo para seletores no card dark */
.card-highlight select option {
    background-color: white;
    color: var(--text-dark);
}

.card-highlight select {
    color: white;
}

.btn-toggle.done {
    background: var(--primary-burgundy) !important;
    color: white !important;
    border-color: var(--primary-burgundy) !important;
}
.annual-history-grid {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    height: 120px;
    margin-top: 1rem;
    gap: 0.5rem;
}

.history-month {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

.history-month span {
    font-size: 0.6rem;
    color: var(--text-light);
    text-transform: uppercase;
    font-weight: 600;
}

/* Movement Feed Styles */
.movement-feed {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.movement-card {
    background: white;
    padding: 1.2rem;
    border-radius: 12px;
    border: 1px solid #F0F0F0;
    display: flex;
    gap: 1.2rem;
    transition: var(--transition);
    position: relative;
    overflow: hidden;
}

.movement-card:hover {
    border-color: var(--secondary-champagne);
    box-shadow: var(--shadow-soft);
    transform: translateX(5px);
}

.movement-icon {
    width: 45px;
    height: 45px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    flex-shrink: 0;
}

.movement-icon.projeto { background: #E6FFFA; color: #319795; }
.movement-icon.tempo { background: #EBF8FF; color: #3182CE; }
.movement-icon.financeiro { background: #FFF5F5; color: #E53E3E; }
.movement-icon.agenda { background: #FAF5FF; color: #805AD5; }
.movement-icon.checklist { background: #F0FFF4; color: #38A169; }
.movement-icon.geral { background: #F7FAFC; color: #4A5568; }

.movement-content { flex: 1; }

.movement-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.3rem;
}

.movement-user {
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--primary-burgundy);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.movement-time {
    font-size: 0.65rem;
    color: var(--text-light);
}

.movement-action {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 0.2rem;
}

.movement-project {
    font-size: 0.75rem;
    color: var(--text-light);
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.movement-details {
    font-size: 0.8rem;
    color: var(--text-dark);
    opacity: 0.8;
    background: #FAFAFA;
    padding: 0.5rem 0.8rem;
    border-radius: 6px;
    border-left: 3px solid var(--secondary-champagne);
}

/* Summary Cards */
.card-summary {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    padding: 1.5rem;
}

.icon-summary {
    font-size: 1.8rem;
    color: var(--secondary-champagne);
    opacity: 0.6;
}

.summary-label {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-light);
    font-weight: 600;
}
/* --- ÁREA 7: DOCUMENTOS --- */
.doc-card {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    cursor: pointer;
    transition: all 0.3s ease;
    border: 1px solid transparent;
}

.doc-card:hover {
    transform: translateY(-5px);
    border-color: var(--secondary-champagne);
    box-shadow: var(--shadow-soft);
}

.doc-icon {
    width: 60px;
    height: 60px;
    background: var(--bg-offwhite);
    color: var(--primary-burgundy);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    font-size: 1.5rem;
}

.doc-info h3 {
    font-size: 0.95rem;
    margin-bottom: 0.3rem;
    color: var(--text-dark);
}

.doc-info p {
    font-size: 0.75rem;
    color: var(--text-light);
    line-height: 1.4;
}

.print-area {
    font-family: 'Inter', serif;
    line-height: 1.6;
    color: #333;
}

.print-area h1, .print-area h2 {
    text-align: center;
    color: #000;
}

.print-area .header-logo {
    text-align: center;
    margin-bottom: 2rem;
}

.print-area .content {
    margin-top: 2rem;
    text-align: justify;
}

.print-area .signature-area {
    margin-top: 5rem;
    display: flex;
    justify-content: space-around;
    text-align: center;
}

.signature-line {
    border-top: 1px solid #000;
    width: 200px;
    padding-top: 0.5rem;
    font-size: 0.8rem;
}

@media print {
    body * { visibility: hidden; }
    #doc-print-area, #doc-print-area * { visibility: visible; }
    #doc-print-area {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        padding: 0;
        margin: 0;
    }
    .no-print { display: none !important; }
}

.summary-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--primary-burgundy);
}

/* Done state for buttons */
.btn-toggle.done {
    background: #48BB78 !important;
    color: white !important;
    border-color: #48BB78 !important;
}

.btn-toggle.done i {
    color: white;
}

.bar-container {
    width: 100%;
    height: 100px;
    display: flex;
    gap: 2px;
    align-items: flex-end;
}

.bar-in { width: 50%; background: #48BB78; border-radius: 2px 2px 0 0; opacity: 0.8; transition: height 0.5s ease; }
.bar-out { width: 50%; background: #F56565; border-radius: 2px 2px 0 0; opacity: 0.8; transition: height 0.5s ease; }

.bar-container-empty {
    width: 100%;
    height: 4px;
    background: var(--bg-offwhite);
    border-radius: 2px;
}

.history-month.active span {
    color: var(--primary-burgundy);
    font-weight: 700;
}

/* Pasta e Mensagens */
.folder-structure {
    background: #FAFAFA;
    padding: 1rem;
    border-radius: 8px;
    border-left: 3px solid #edbd76;
}

.message-template {
    background: #FAFAFA;
    padding: 1rem;
    border-radius: 8px;
    border-left: 3px solid var(--secondary-champagne);
}

/* Abas Internas do Projeto */
.internal-tabs {
    display: flex;
    gap: 2rem;
    border-bottom: 1px solid var(--border-light);
    margin-bottom: 2rem;
    padding-bottom: 0.5rem;
    overflow-x: auto;
}

.tab-item {
    font-size: 0.85rem;
    color: var(--text-light);
    cursor: pointer;
    padding-bottom: 0.5rem;
    position: relative;
    white-space: nowrap;
    transition: var(--transition);
}

.tab-item.active {
    color: var(--primary-burgundy);
    font-weight: 600;
}

.tab-item.active::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 100%;
    height: 2px;
    background: var(--primary-burgundy);
}

#project-internal-section {
    padding: 0 1rem;
}

@media (max-width: 768px) {
    .internal-tabs {
        gap: 1rem;
    }
    .tab-item {
        font-size: 0.75rem;
    }
}

/* Visualização em Lista (Projetos) */
.list-view .project-card {
    display: flex;
    flex-direction: row;
    height: 100px;
    align-items: center;
    margin-bottom: 1rem;
}

.list-view .project-image {
    width: 100px;
    height: 100%;
    border-radius: 12px 0 0 12px;
}

.list-view .project-details {
    padding: 0 1.5rem;
}

.list-view .project-details h3 {
    font-size: 1rem;
    margin-bottom: 0.2rem;
}

.list-view .project-details p {
    font-size: 0.75rem;
}

/* Document Cards & Print System */
.doc-card {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    padding: 1.5rem;
    cursor: pointer;
    transition: var(--transition);
}

.doc-card:hover {
    border-color: var(--primary-burgundy);
    background-color: #FFF9F9;
}

.doc-icon {
    width: 50px;
    height: 50px;
    border-radius: 12px;
    background: #F7FAFC;
    color: var(--primary-burgundy);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    transition: var(--transition);
}

.doc-card:hover .doc-icon {
    background: var(--primary-burgundy);
    color: white;
}

.doc-title {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 0.2rem;
}

.doc-desc {
    font-size: 0.75rem;
    color: var(--text-light);
}

.print-area {
    font-family: 'Playfair Display', serif;
    padding: 1rem;
}

@media print {
    .no-print { display: none !important; }
    body { background: white !important; }
    .container { margin: 0 !important; padding: 0 !important; max-width: none !important; }
    .navbar, .sidebar { display: none !important; }
    #doc-preview-container { 
        display: block !important; 
        box-shadow: none !important; 
        margin: 0 !important; 
        padding: 0 !important; 
        width: 100% !important;
        max-width: none !important;
        position: static !important;
    }
}
/* Kanban Board */
#comercial-section {
    max-width: 100% !important;
    width: 100% !important;
    padding: 0 4rem;
}

.kanban-board {
    display: flex;
    gap: 1.5rem;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    width: 100%;
    padding: 0.5rem 0.25rem 1.5rem 0.25rem;
    align-items: flex-start;
    scrollbar-width: thin;
    scrollbar-color: rgba(var(--primary-rgb), 0.3) transparent;
}

.kanban-board::-webkit-scrollbar {
    height: 6px;
}

.kanban-board::-webkit-scrollbar-track {
    background: transparent;
}

.kanban-board::-webkit-scrollbar-thumb {
    /* 10/08/2026: era preto a 6%, praticamente invisivel — ela nao via que dava
       para rolar. Minimalista continua, mas agora se enxerga. */
    background: rgba(var(--primary-rgb), 0.22);
    border-radius: 10px;
}
.kanban-board:hover::-webkit-scrollbar-thumb { background: rgba(var(--primary-rgb), 0.38); }

.kanban-board::-webkit-scrollbar-thumb:hover {
    background: var(--primary-burgundy);
}

.kanban-column {
    background: #F8F9FA;
    border-radius: 12px;
    min-width: 320px;
    max-width: 360px;
    flex: 1;
    flex-shrink: 0;
    padding: 1.25rem 1.1rem;
    min-height: 620px;
    border: 1px solid rgba(0, 0, 0, 0.04);
    border-top: 3px solid var(--primary-burgundy);
    display: flex;
    flex-direction: column;
    transition: all 0.2s ease;
}

.kanban-column:hover {
    border-color: rgba(139, 30, 47, 0.15);
}

.kanban-header {
    /* Poppins explicito (09/08/2026): o cabecalho herdava a fonte de um
       ancestral e destoava dos outros titulos do sistema. */
    font-family: 'Poppins', sans-serif;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--primary-burgundy);
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin-bottom: 1.25rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid rgba(139, 30, 47, 0.08);
}

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

.kanban-count-badge {
    background: rgba(139, 30, 47, 0.06);
    color: var(--primary-burgundy);
    padding: 2px 7px;
    border-radius: 4px;
    font-size: 0.65rem;
    font-weight: 700;
}

/* .kanban-dot removida em 09/08/2026 a pedido dela — as bolinhas antes dos
   nomes das colunas sairam do HTML; a regra ficou sem nenhum elemento. */

.kanban-cards-container {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    min-height: 520px;
    flex: 1;
}

.kanban-card {
    background: white;
    border-radius: 8px;
    padding: 1.1rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
    border: 1px solid rgba(0, 0, 0, 0.06);
    cursor: grab;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
}

.kanban-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
    transform: translateY(-1.5px);
    border-color: rgba(0, 0, 0, 0.12);
}

.kanban-card:active {
    cursor: grabbing;
}

.kanban-card:active {
    cursor: grabbing;
}

/* Modal Tabs */
.modal-tabs {
    display: flex;
    gap: 2rem;
    border-bottom: 1px solid #EEE;
    margin-bottom: 2rem;
}

.modal-tab-item {
    padding-bottom: 0.8rem;
    font-size: 0.85rem;
    color: var(--text-light);
    cursor: pointer;
    position: relative;
    transition: var(--transition);
}

.modal-tab-item.active {
    color: var(--primary-burgundy);
    font-weight: 600;
}

.modal-tab-item.active::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 100%;
    height: 2px;
    background: var(--primary-burgundy);
}

.modal-pane {
    display: none;
}

.modal-pane.active {
    display: block;
}

#section-orcamentos .container { max-width: 1400px !important; }
#orcamentos-kanban { display: flex; gap: 15px; overflow-x: hidden !important; width: 100%; }
#orcamentos-kanban .kanban-column { min-width: 0; max-width: none; flex: 1; }

/* Fullscreen Timer Overlay */
#fullscreen-timer-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: var(--primary-burgundy); /* Deep ARTHOS Burgundy */
    z-index: 9999;
    color: white;
    flex-direction: column;
    justify-content: space-between;
    padding: 3rem;
    font-family: 'Poppins', sans-serif;
}

.fs-timer-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

#fs-timer-project-info h2 {
    font-size: 1.8rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    letter-spacing: -0.5px;
}

#fs-timer-project-info p {
    font-size: 1rem;
    opacity: 0.7;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.fs-close-btn {
    background: rgba(255, 255, 255, 0.1);
    border: none;
    color: white;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    cursor: pointer;
    transition: all 0.3s ease;
}

.fs-close-btn:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: rotate(90deg);
}

.fs-timer-center {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

#fs-timer-display {
    font-size: 18vw; /* Gigante ocupando ~60% da largura dependendo do conteúdo */
    font-weight: 800;
    letter-spacing: -5px;
    line-height: 1;
    text-shadow: 0 10px 50px rgba(0, 0, 0, 0.3);
}

.fs-timer-footer {
    display: flex;
    justify-content: center;
    padding-bottom: 2rem;
}

.fs-controls {
    display: flex;
    gap: 2rem;
    opacity: 0; /* Invisível por padrão */
    transition: opacity 0.4s ease;
}

#fullscreen-timer-overlay:hover .fs-controls {
    opacity: 1;
}

.fs-control-btn {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: white;
    padding: 1rem 3rem;
    border-radius: 50px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    backdrop-filter: blur(10px);
    transition: all 0.3s ease;
}

.fs-control-btn:hover {
    background: white;
    color: var(--primary-burgundy);
    transform: scale(1.05);
}

.fs-control-btn.fs-stop:hover {
    background: #E53E3E;
    color: white;
    border-color: #E53E3E;
}

/* ═══════════════════════════════════════════════════════════════
   AGENDA — Google Calendar Style
   ═══════════════════════════════════════════════════════════════ */

/* Layout Principal */
.agenda-layout {
    display: flex;
    gap: 1.5rem;
    min-height: calc(100vh - 180px);
}

.agenda-sidebar {
    width: 280px;
    min-width: 280px;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.agenda-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

/* ── Mini Calendário Mensal ────────────────────────────────── */
.mini-calendar-container {
    background: white;
    border-radius: 12px;
    padding: 1.25rem;
    border: 1px solid #F0F0F0;
    box-shadow: 0 2px 12px rgba(0,0,0,0.03);
}

.mini-cal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
}

.mini-cal-title {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--primary-burgundy);
    letter-spacing: 0.3px;
}

.mini-cal-nav {
    background: none;
    border: none;
    color: var(--text-light);
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 6px;
    font-size: 0.7rem;
    transition: all 0.2s;
}

.mini-cal-nav:hover {
    background: #F5F5F5;
    color: var(--primary-burgundy);
}

.mini-cal-weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    text-align: center;
    margin-bottom: 0.5rem;
}

.mini-cal-weekdays span {
    font-size: 0.6rem;
    font-weight: 600;
    color: var(--text-light);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 4px 0;
}

.mini-cal-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
}

.mini-cal-day {
    aspect-ratio: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 0.72rem;
    color: var(--text-dark);
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.2s;
    position: relative;
    font-weight: 400;
}

.mini-cal-day:hover {
    background: #F5F0EC;
}

.mini-cal-day.other-month {
    color: #CBD5E0;
}

.mini-cal-day.today {
    background: var(--primary-burgundy);
    color: white;
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(var(--primary-rgb), 0.3);
}

.mini-cal-day.today:hover {
    background: rgba(var(--primary-rgb), 0.72);
}

.mini-cal-day.selected {
    background: var(--secondary-champagne);
    color: var(--primary-burgundy);
    font-weight: 600;
}

.mini-cal-day.has-events::after {
    content: '';
    position: absolute;
    bottom: 2px;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--primary-burgundy);
}

.mini-cal-day.today.has-events::after {
    background: white;
}

/* ── Sidebar: Próximos Eventos ─────────────────────────────── */
.agenda-sidebar-events {
    background: white;
    border-radius: 12px;
    padding: 1.25rem;
    border: 1px solid #F0F0F0;
    box-shadow: 0 2px 12px rgba(0,0,0,0.03);
    flex: 1;
    overflow-y: auto;
}

.agenda-sidebar-title {
    font-size: 0.65rem;
    font-weight: 700;
    color: var(--primary-burgundy);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid #F5F5F5;
}

.sidebar-event-item {
    padding: 0.75rem 0;
    border-bottom: 1px solid #FAFAFA;
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
}

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

.sidebar-event-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--primary-burgundy);
    margin-top: 4px;
    flex-shrink: 0;
}

.sidebar-event-info {
    flex: 1;
    min-width: 0;
}

.sidebar-event-date {
    font-size: 0.6rem;
    color: var(--text-light);
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 0.5px;
    margin-bottom: 2px;
}

.sidebar-event-title {
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--text-dark);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sidebar-event-project {
    font-size: 0.65rem;
    color: var(--primary-burgundy);
    font-weight: 500;
    margin-top: 1px;
}

.sidebar-no-events {
    text-align: center;
    padding: 2rem 1rem;
    color: var(--text-light);
    font-size: 0.8rem;
    font-style: italic;
}

/* ── Navegação da Semana ───────────────────────────────────── */
.week-nav {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
    padding: 0.5rem 0;
}

.week-nav-btn {
    background: none;
    border: 1px solid var(--border-light);
    color: var(--text-light);
    cursor: pointer;
    padding: 6px 10px;
    border-radius: 8px;
    font-size: 0.7rem;
    transition: all 0.2s;
}

.week-nav-btn:hover {
    background: var(--primary-burgundy);
    color: white;
    border-color: var(--primary-burgundy);
}

.week-nav-title {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-dark);
    flex: 1;
    text-align: center;
}

.week-nav-today {
    background: none;
    border: 1px solid var(--primary-burgundy);
    color: var(--primary-burgundy);
    cursor: pointer;
    padding: 5px 16px;
    border-radius: 20px;
    font-size: 0.72rem;
    font-weight: 600;
    transition: all 0.2s;
}

.week-nav-today:hover {
    background: var(--primary-burgundy);
    color: white;
}

/* ── Grade Semanal (Calendar Body) ─────────────────────────── */
.week-calendar-wrapper {
    background: white;
    border-radius: 12px;
    border: 1px solid #F0F0F0;
    box-shadow: 0 2px 12px rgba(0,0,0,0.03);
    overflow: hidden;
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* Header dos dias */
.week-days-header {
    display: flex;
    border-bottom: 1px solid #E8E8E8;
    position: sticky;
    top: 0;
    background: white;
    z-index: 5;
}

.week-time-gutter-header {
    width: 60px;
    min-width: 60px;
    border-right: 1px solid #F0F0F0;
}

.week-days-labels {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    flex: 1;
}

.week-day-label {
    text-align: center;
    padding: 0.75rem 0.25rem;
    border-right: 1px solid #F5F5F5;
}

.week-day-label:last-child {
    border-right: none;
}

.week-day-name {
    display: block;
    font-size: 0.6rem;
    font-weight: 600;
    color: var(--text-light);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 4px;
}

.week-day-num {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    margin: 0 auto;
    border-radius: 50%;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--text-dark);
    transition: all 0.2s;
}

.week-day-label.is-today .week-day-num {
    background: var(--primary-burgundy);
    color: white;
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(var(--primary-rgb), 0.25);
}

.week-day-label.is-today .week-day-name {
    color: var(--primary-burgundy);
}

/* Corpo da grade */
.week-calendar-body {
    flex: 1;
    overflow-y: auto;
    max-height: calc(100vh - 320px);
}

.week-hour-row {
    display: flex;
    min-height: 56px;
    border-bottom: 1px solid #F5F5F5;
}

.week-hour-row:last-child {
    border-bottom: none;
}

.week-time-gutter {
    width: 60px;
    min-width: 60px;
    padding: 0 8px;
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    border-right: 1px solid #F0F0F0;
}

.hour-label {
    font-size: 0.6rem;
    color: var(--text-light);
    font-weight: 500;
    position: relative;
    top: -7px;
    white-space: nowrap;
}

.week-cells-row {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    flex: 1;
}

.week-cell {
    border-right: 1px solid #F5F5F5;
    position: relative;
    cursor: pointer;
    transition: background 0.15s;
    padding: 2px;
    min-height: 56px;
}

.week-cell:last-child {
    border-right: none;
}

.week-cell:hover {
    background: #FDFBF9;
}

.week-cell.is-today {
    background: #FFF9F5;
}

/* ── Blocos de Evento na Grade ─────────────────────────────── */
.week-event-block {
    background: linear-gradient(135deg, var(--primary-burgundy), rgba(var(--primary-rgb), 0.72));
    color: white;
    border-radius: 6px;
    padding: 4px 6px;
    font-size: 0.65rem;
    line-height: 1.3;
    cursor: pointer;
    overflow: hidden;
    margin-bottom: 2px;
    transition: all 0.2s;
    box-shadow: 0 1px 4px rgba(var(--primary-rgb), 0.2);
}

.week-event-block:hover {
    transform: scale(1.02);
    box-shadow: 0 3px 10px rgba(var(--primary-rgb), 0.3);
    z-index: 2;
}

.week-event-block .ev-time {
    font-weight: 600;
    font-size: 0.6rem;
    opacity: 0.9;
}

.week-event-block .ev-title {
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.week-event-block .ev-project {
    font-size: 0.55rem;
    opacity: 0.8;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Variações de cor para eventos */
.week-event-block.ev-type-reuniao {
    background: linear-gradient(135deg, var(--primary-burgundy), rgba(var(--primary-rgb), 0.72));
}

.week-event-block.ev-type-visita {
    background: linear-gradient(135deg, #8B4513, #A0522D);
}

.week-event-block.ev-type-entrega {
    background: linear-gradient(135deg, #6B3A2A, #D9C5B2);
    color: #1A1A1A;
}

.week-event-block.ev-type-pessoal {
    background: linear-gradient(135deg, rgba(var(--primary-rgb), 0.85), var(--primary-burgundy));
}

/* Seletor de cores da agenda - Paleta 04 */
.sch-color-swatch {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    cursor: pointer;
    border: 2.5px solid transparent;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.sch-color-swatch:hover {
    transform: scale(1.18);
}

.sch-color-swatch.active {
    border-color: #1A1A1A;
    transform: scale(1.12);
    box-shadow: 0 4px 8px rgba(0,0,0,0.18);
}

.sch-color-swatch.active::after {
    content: '\f00c';
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    font-size: 0.65rem;
    color: inherit;
}

/* ── Indicador de hora atual ────────────────────────────────── */
.week-now-line {
    position: absolute;
    left: 0;
    right: 0;
    height: 2px;
    background: #E53E3E;
    z-index: 3;
    pointer-events: none;
}

.week-now-line::before {
    content: '';
    position: absolute;
    left: -5px;
    top: -4px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #E53E3E;
}

/* ── Responsivo ────────────────────────────────────────────── */
@media (max-width: 900px) {
    .agenda-layout {
        flex-direction: column;
    }
    
    .agenda-sidebar {
        width: 100%;
        min-width: unset;
        flex-direction: row;
        gap: 1rem;
    }
    
    .mini-calendar-container {
        flex: 1;
    }
    
    .agenda-sidebar-events {
        flex: 1;
        max-height: 250px;
    }
    
    .week-calendar-body {
        max-height: 60vh;
    }
}
/* Dropdown Menus (Notificações e Perfil) */
.dropdown-container {
    position: relative;
}

.dropdown-menu {
    position: absolute;
    top: calc(100% + 15px);
    right: 0;
    width: 280px;
    background: white;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    border: 1px solid var(--border-light);
    display: none;
    z-index: 5000;
    overflow: hidden;
    animation: slideDown 0.3s ease;
}

.dropdown-menu.active {
    display: block;
}

.dropdown-header {
    padding: 1rem 1.5rem;
    background: #FAFAFA;
    border-bottom: 1px solid var(--border-light);
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--primary-burgundy);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.dropdown-item {
    padding: 1rem 1.5rem;
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    transition: background 0.2s;
    font-size: 0.85rem;
    color: var(--text-dark);
    text-decoration: none;
}

.dropdown-item:hover {
    background: #F7FAFC;
}

.dropdown-item i {
    width: 16px;
    text-align: center;
    color: var(--text-light);
}

.dropdown-item.logout {
    color: #C53030;
    border-top: 1px solid var(--border-light);
}

.dropdown-item.logout i {
    color: #C53030;
}

.user-info-dropdown {
    padding: 1.2rem 1.5rem;
    border-bottom: 1px solid var(--border-light);
}

.user-info-dropdown .user-name {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--text-dark);
}

.user-info-dropdown .user-email {
    font-size: 0.75rem;
    color: var(--text-light);
}

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

/* Documentação Modal & Typography */
.documentation-content {
    line-height: 1.8;
    color: var(--text-dark);
}

.documentation-content h2 {
    color: var(--primary-burgundy);
    font-size: 1.5rem;
    margin: 2rem 0 1rem;
    border-bottom: 2px solid var(--secondary-champagne);
    padding-bottom: 0.5rem;
}

.documentation-content h3 {
    font-size: 1.1rem;
    margin: 1.5rem 0 0.5rem;
    color: var(--text-dark);
    font-weight: 600;
}

.documentation-content p {
    margin-bottom: 1rem;
    font-size: 0.9rem;
}

.documentation-content ul {
    margin-bottom: 1.5rem;
    padding-left: 1.5rem;
}

.documentation-content li {
    margin-bottom: 0.5rem;
    font-size: 0.9rem;
}

.doc-step {
    background: #FAFAFA;
    padding: 1.5rem;
    border-radius: 10px;
    border-left: 4px solid var(--primary-burgundy);
    margin: 1.5rem 0;
}

.doc-tip {
    background: #FFF9F2;
    padding: 1rem;
    border-radius: 8px;
    border: 1px solid var(--secondary-champagne);
    font-size: 0.85rem;
    margin: 1rem 0;
    display: flex;
    gap: 10px;
}

/* --- SISTEMA DE ETAPAS (CARDS) --- */
.stages-grid {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-top: 1rem;
}

.stage-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: white;
    padding: 1.2rem 2rem;
    border-radius: 12px;
    border: 1px solid var(--border-light);
    transition: all 0.3s ease;
    cursor: pointer;
    box-shadow: 0 2px 10px rgba(0,0,0,0.02);
}

.stage-card:hover {
    transform: translateX(8px);
    border-color: var(--secondary-champagne);
    box-shadow: 0 4px 20px rgba(0,0,0,0.05);
}

.stage-card-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.stage-card-name {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-dark);
}

.stage-card-meta {
    font-size: 0.75rem;
    color: var(--text-light);
}

.stage-card-status {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.status-badge {
    padding: 4px 14px;
    border-radius: 20px;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.status-badge.andamento { background: #EBF8FF; color: #3182CE; }
.status-badge.concluido { background: #F0FFF4; color: #38A169; }
.status-badge.bloqueado { background: #FFF5F5; color: #E53E3E; }
.status-badge.pendente { background: #F7FAFC; color: #718096; }

.stage-card-nav {
    color: var(--secondary-champagne);
    font-size: 0.9rem;
    transition: transform 0.3s;
}

.stage-card:hover .stage-card-nav {
    transform: translateX(5px);
    color: var(--primary-burgundy);
}

/* --- DETALHAMENTO DE ETAPA --- */
.checklist-category-card {
    background: #FDFDFD;
    border: 1px solid #F0F0F0;
    border-radius: 10px;
    padding: 1.2rem;
    margin-bottom: 1rem;
    transition: all 0.2s;
}

.checklist-category-card:hover {
    border-color: var(--secondary-champagne);
}

.checklist-category-title {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--primary-burgundy);
    margin-bottom: 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Rich Text Editor Placeholder */
[contenteditable="true"]:empty:before {
    content: attr(data-placeholder);
    color: #AAA;
    font-style: italic;
}

.rich-text-editor {
    box-shadow: 0 4px 15px rgba(0,0,0,0.02);
}

.editor-toolbar button {
    border: none;
    background: transparent;
    color: #555;
}

.editor-toolbar button:hover {
    background: #E9ECEF;
    color: var(--primary-burgundy);
}

/* Estilos adicionais para as sub-tarefas no detalhamento */
.subtask-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid #F8F9FA;
}

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

.subtask-item input[type="checkbox"] {
    accent-color: var(--primary-burgundy);
    width: 16px;
    height: 16px;
}

.subtask-item span {
    font-size: 0.85rem;
    color: var(--text-dark);
}

.subtask-item.completed span {
    text-decoration: line-through;
    color: var(--text-light);
}

/* Trello Style Comments */
.comment-item { background: var(--primary-burgundy); border-radius: 8px; padding: 1rem; margin-bottom: 1rem; color: #F7FAFC; font-size: 0.9rem; position: relative; border-left: 3px solid #D9C5B2; }
.comment-header { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.comment-avatar { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; background: #D9C5B2; color: var(--primary-burgundy); display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 0.7rem; }
.comment-author { font-weight: 600; color: #FFF; }
.comment-date { font-size: 0.75rem; color: rgba(255,255,255,0.6); }
.comment-text { line-height: 1.5; white-space: pre-wrap; font-family: inherit; }
.comment-actions { margin-top: 8px; display: flex; gap: 12px; font-size: 0.75rem; color: rgba(255,255,255,0.5); }
.comment-actions span { cursor: pointer; }
.comment-actions span:hover { color: #FFF; text-decoration: underline; }
.comment-input-area { background: var(--primary-burgundy); padding: 1.5rem; border-radius: 12px; margin-bottom: 1.5rem; box-shadow: 0 4px 15px rgba(0,0,0,0.1); }
.comment-input-area textarea { width: 100%; background: rgba(0,0,0,0.2); border: 1px solid rgba(255,255,255,0.2); border-radius: 8px; color: white; padding: 12px; font-family: inherit; resize: vertical; min-height: 80px; outline: none; transition: all 0.3s; }
.comment-input-area textarea:focus { background: rgba(0,0,0,0.3); border-color: #D9C5B2; }
.comment-input-area textarea::placeholder { color: rgba(255,255,255,0.4); }

/* --- NOVO MÓDULO: DOCUMENTAÇÃO E ATA --- */
.stage-card.special-bordo {
    background: var(--primary-burgundy) !important;
    border-color: rgba(var(--primary-rgb), 0.85) !important;
    transition: all 0.3s ease;
}
.stage-card.special-bordo:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(var(--primary-rgb), 0.3);
    filter: brightness(1.1);
}
.doc-ata-editor {
    width: 100%;
    height: 400px;
    padding: 1.5rem;
    border: 1px solid var(--border-light);
    border-radius: 12px;
    font-family: var(--font-main);
    font-size: 0.95rem;
    line-height: 1.6;
    resize: none;
    background: #fdfdfd;
    color: var(--text-dark);
    margin-bottom: 1.5rem;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.02);
}

/* Novo Módulo de Precificação por Fases */
.phase-input-group {
    display: flex;
    align-items: center;
    gap: 1rem;
    background: #f8f9fa;
    padding: 0.75rem 1.25rem;
    border-radius: 10px;
    border: 1px solid #edf2f7;
    transition: all 0.2s ease;
    margin-bottom: 0.5rem;
}
.phase-input-group:hover {
    border-color: var(--primary-burgundy);
    background: white;
}
.phase-label {
    flex: 1;
    font-weight: 600;
    color: var(--text-dark);
    font-size: 0.85rem;
}
.phase-controls {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.btn-qty {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1px solid var(--border-light);
    background: white;
    color: var(--text-dark);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    transition: all 0.2s;
}
.btn-qty:hover {
    background: var(--primary-burgundy);
    color: white;
    border-color: var(--primary-burgundy);
}
.input-qty {
    width: 50px;
    text-align: center;
    border: none;
    background: transparent;
    font-weight: 700;
    color: var(--primary-burgundy);
    font-size: 1rem;
}

/* --- MINI TIMER PLAYER (FLOATING) --- */
.mini-timer-player {
    position: fixed;
    bottom: 30px;
    right: 30px;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(217, 197, 178, 0.5);
    border-radius: 20px;
    padding: 12px 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    z-index: 5000;
    display: flex;
    align-items: center;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    animation: slideUp 0.5s ease-out;
}

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

.mini-timer-content {
    display: flex;
    align-items: center;
    gap: 20px;
}

.mini-timer-info {
    display: flex;
    flex-direction: column;
}

.mini-timer-project {
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--primary-burgundy);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.mini-timer-phase {
    font-size: 0.8rem;
    color: var(--text-dark);
    font-weight: 500;
}

.mini-timer-clock {
    font-family: 'Poppins', sans-serif;
 font-size: 1.4rem;
 font-weight: 600;
 color: var(--text-dark);
 min-width: 100px;
}

.mini-timer-actions {
 display: flex;
 gap: 10px;
}

.mini-timer-actions button {
 width: 34px;
 height: 34px;
 border-radius: 50%;
 border: none;
 background: #f8f9fa;
 color: var(--text-dark);
 cursor: pointer;
 display: flex;
 align-items: center;
 justify-content: center;
 transition: all 0.2s;
}

.mini-timer-actions button:hover {
 background: var(--primary-burgundy);
 color: white;
}

.mini-timer-actions button.stop:hover {
 background: #E53E3E;
}

.mini-timer-player.minimized {
 padding: 8px;
 border-radius: 50%;
}
.mini-timer-player.minimized .mini-timer-info,
.mini-timer-player.minimized .mini-timer-clock,
.mini-timer-player.minimized .mini-timer-actions .expand,
.mini-timer-player.minimized .mini-timer-actions .stop {
 display: none;
}


/* Próximas Entregas - Dashboard */
.upcoming-list {
    margin-top: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    text-align: left;
}

.delivery-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}

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

.delivery-info {
    display: flex;
    flex-direction: column;
}

.delivery-name {
    font-size: 0.85rem;
    font-weight: 600;
    color: white;
}

.delivery-stage {
    font-size: 0.65rem;
    color: rgba(255,255,255,0.7);
}

.delivery-tag {
    font-size: 0.65rem;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 4px;
    cursor: pointer;
    transition: var(--transition);
    white-space: nowrap;
}

.delivery-tag.today {
    background: #E53E3E;
    color: white;
}

.delivery-tag.soon {
    background: rgba(255,255,255,0.2);
    color: white;
}

.delivery-tag.soon:hover {
    background: rgba(255,255,255,0.3);
}

/* "Atrasado" e ALERTA, nao cor de marca. Aqui estava #2D0509, que e o
   --secondary-burgundy: um dia alguem ia ver esse bordo cravado e "corrigir"
   para var(--primary-burgundy) achando que era resto da varredura de cor — e
   entao a etiqueta passaria a mudar de cor junto com a marca, perdendo a
   leitura de perigo. Agora e o mesmo vermelho de alerta da etiqueta "Hoje"
   (#E53E3E), no tom mais escuro da escala. NAO trocar por variavel de marca.
   Contraste com o texto #F56565: 5,3:1. (11/08/2026) */
.delivery-tag.overdue {
    background: #450A0A;
    color: #F56565;
    border: 1px solid #F56565;
}

/* Ajuste para tags em fundo claro (dentro do projeto) */
.stage-card .delivery-tag.soon,
.stage-detail-header .delivery-tag.soon {
    background: #EDF2F7;
    color: #4A5568;
}

.stage-card .delivery-tag.today,
.stage-detail-header .delivery-tag.today {
    background: #E53E3E;
    color: white;
}

/* Garantir visibilidade em qualquer fundo */
.delivery-tag {
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* Tags em fundo escuro (Dashboard) */
.card-highlight .delivery-tag.soon {
    background: rgba(255,255,255,0.25);
    color: white;
}

/* Tags em fundo claro (Interno) */
.stage-card .delivery-tag.soon,
.stage-detail-header .delivery-tag.soon {
    background: #F7FAFC;
    color: #2D3748;
    border: 1px solid #E2E8F0;
}
.dashboard-grid.layout-simetrico {
    grid-template-columns: repeat(4, 1fr);
    grid-auto-flow: row;
    align-items: stretch;
}
.card-monitoramento {
    grid-row: span 2;
}

/* ═══ VOLTAR AO INÍCIO — 12/08/2026 ═══════════════════════════════════════
   Ate hoje o unico caminho de volta era clicar em "Olá, Thárman Rochelly" no
   alto — ele reclamou. Fica ABAIXO da navbar (fixa, top 40 + altura 70 = 110)
   e ABAIXO da barra fixa do projeto no z-index (900), para nunca cobri-la.
   Escondido por padrao: quem o mostra e o envelope de showSection. */
#btn-voltar-inicio {
    display: none;
    position: fixed;
    top: 122px;
    /* Direita desde 14/08/2026, a pedido dele. Vale so para o modo FLUTUANTE
       (secao sem cabecalho padrao); dentro do cabecalho a posicao e static. */
    right: 18px;
    z-index: 880;
    align-items: center;
    gap: 7px;
    background: var(--white);
    color: var(--primary-burgundy);
    border: 1px solid var(--border-light);
    font-family: 'Poppins', sans-serif;
    font-size: 0.72rem;
    padding: 0.45rem 1.1rem;
    border-radius: 999px;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
    transition: background 0.18s ease, color 0.18s ease;
}
#btn-voltar-inicio.visivel { display: inline-flex; }

/* Dentro do cabecalho da secao: deixa de ser fixo e vira parte da linha, entao
   EMPURRA o titulo em vez de cobri-lo (12/08/2026). */
#btn-voltar-inicio.no-cabecalho {
    position: static;
    margin-left: 1rem;
    flex-shrink: 0;
    align-self: center;
    box-shadow: none;
}
/* 🔴 Os cabecalhos usam justify-content: space-between, e desde 14/08/2026 o
   botao e o ULTIMO filho ("prefiro que fique ao lado direito no canto").
   Com TRES filhos — titulo, acao e voltar — o space-between jogaria a acao
   ("Novo Evento", "NOVA META", "Novo Lancamento"...) para o MEIO da linha.
   Esta regra faz o vizinho ANTERIOR ao voltar absorver o espaco livre, entao
   acao e voltar ficam colados no canto direito e o titulo segue na esquerda.
   O `:nth-child(2)` e' o que protege o caso de DOIS filhos (Comercial,
   Execucao, Administrativo): la o segundo filho E o proprio voltar, a regra
   nao casa, e o space-between sozinho ja resolve. */
/* 🔴 O BOTÃO DE AÇÃO DESCIA 7px EM DUAS TELAS — 14/08/2026.
   Ele: "botao desalinhado, somente nesses 2 cards" (Backstage e Precificacao).
   Causa: `.btn-pill` tem `margin-top: 1rem` para quando ele aparece SOZINHO
   embaixo de um formulario. Dentro do cabecalho isso nao serve para nada — e
   atrapalha: numa linha com `align-items: center` quem e centralizado e a
   CAIXA COM AS MARGENS, entao 14px so em cima empurram o botao 7px para baixo.
   Em 8 das 10 secoes alguem ja tinha anulado no proprio elemento
   (`margin-top: 0` escrito no botao, como na Agenda); nessas duas ninguem
   anulou, e o desalinho ficou.
   Aqui a margem morre para TODO btn-pill dentro de cabecalho, inclusive os que
   ainda nasçam — nao adianta consertar dois botoes e deixar a armadilha de pe. */
.section-header .btn-pill {
    margin-top: 0;
}

.section-header > :nth-child(2):has(+ #btn-voltar-inicio.no-cabecalho) {
    /* 🔴 `!important` AQUI TEM MOTIVO, e e' o unico caso em que ele resolve:
       o botao "NOVA META" tem `margin: 0` ESCRITO NO PROPRIO ELEMENTO, e
       estilo escrito no elemento vence qualquer folha de estilo — sem o
       important, a regra casava (conferido com `matches`) e mesmo assim o
       botao ficava no meio da linha, com 527px de vao ate o "Voltar".
       Isto NAO contradiz a regra "!important nao e a ultima palavra": ali o
       assunto era important CONTRA important, onde quem decide e o peso do
       seletor. */
    margin-left: auto !important;
}
#btn-voltar-inicio:hover { background: var(--primary-burgundy); color: var(--white); }
#btn-voltar-inicio i { font-size: 0.68rem; }

/* Em tela estreita o conteudo encosta nas bordas e o botao cobriria texto:
   vira um circulo so com a seta, colado no canto. */
@media (max-width: 900px) {
    /* 14/08/2026: era `left: 10px`. O botao passou para a direita, entao o
       canto dele no modo flutuante tambem. `left: auto` e obrigatorio — sem
       ele as duas ancoras valeriam e o botao esticaria de lado a lado. */
    #btn-voltar-inicio { left: auto; right: 10px; padding: 0.5rem; width: 34px; height: 34px; justify-content: center; }
    #btn-voltar-inicio span, #btn-voltar-inicio { font-size: 0; }
    #btn-voltar-inicio i { font-size: 0.8rem; }
}

/* ═══ DESENHO NOVO DO DASHBOARD — 12/08/2026 ═══════════════════════════════
   Ele aprovou o arranjo depois de recusar cinco. As cinco regras que levaram
   seis tentativas para achar, e que este CSS existe para sustentar:
     1. NENHUM quadro do tamanho de outro — tres pilhas alinhadas leem como
        tabela, mesmo com larguras diferentes.
     2. Um DONO da tela; os outros sao satelites.
     3. Duas formas contrarias em bordo: uma alta e estreita, uma larga e baixa.
        O contraste e de PROPORCAO, nao de cor.
     4. UM anel so na tela — tres aneis viram padrao, e padrao e simetria
        disfarcada.
     5. Um VAZIO de proposito. Preencher o canto derruba a composicao.
   Tudo escopado em .dash-novo: a classe .card e usada em 41 lugares do sistema
   (modais, Financeiro, Documentos), e so 9 sao os quadros do Dashboard —
   mexer na classe direto mudaria dez telas sem querer. */

/* A FAIXA do topo: numeros sem moldura, nas MESMAS colunas da grade de baixo
   (pedido dele em 12/08/2026). O respiro em volta e que os separa. */
.dash-faixa {
    display: grid;
    grid-template-columns: 0.72fr 1.85fr 0.95fr;
    gap: 1rem;
    padding: 0 0 1.4rem;
}
/* Sobre a capsula o conteudo e centrado, porque a capsula tambem e. */
.dash-faixa-sobre-capsula { text-align: center; }
/* Os dois do meio dividem a coluna do quadro que domina, com o mesmo
   recuo interno dele (1.7rem) para os numeros nascerem na mesma vertical
   que o rotulo "proximas entregas". */
.dash-faixa-meio {
    display: flex;
    gap: 2.6rem;
    padding-left: 1.7rem;
}
.dash-faixa-col:last-child { padding-left: 1.7rem; }
.dash-faixa-destaque { color: var(--primary-burgundy); font-weight: 600; }
.dash-faixa-n {
    font-size: 1.95rem;
    font-weight: 300;
    line-height: 1;
    color: var(--text-dark);
    margin: 0;
    font-family: 'Poppins', sans-serif;
}
.dash-faixa-un { font-size: 0.75rem; color: var(--text-light); margin-left: 5px; font-weight: 400; }
.dash-faixa-rot { font-size: 0.66rem; color: var(--text-light); margin: 5px 0 0; }
.dash-faixa-alerta { color: #C53030; }

/* A grade assimetrica. O canto de baixo a direita fica sem ninguem. */
.dash-novo {
    display: grid;
    gap: 1rem;
    grid-template-columns: 0.72fr 1.85fr 0.95fr;
    grid-template-areas:
        'cro pra met'
        'cro pra age'
        'din din rec';
}
.dash-novo > * { min-width: 0; }

/* Os quadros: canto muito arredondado, SEM contorno. A separacao vem do
   respiro, nao de uma linha. */
.dash-bloco {
    background: var(--white);
    border-radius: 26px;
    padding: 1.5rem 1.7rem;
    box-shadow: var(--shadow-soft);
}
.dash-bloco-rot {
    font-size: 0.66rem;
    color: var(--text-light);
    margin: 0 0 1rem;
    letter-spacing: 0.02em;
}

/* A CAPSULA do cronometro: topo em cupula. E a forma que ele pediu, e faz par
   contrario com a faixa larga e baixa do dinheiro. */
.dash-capsula {
    grid-area: cro;
    background: var(--primary-burgundy);
    border-radius: 999px 999px 40px 40px;
    padding: 1.4rem 1rem 1.2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    text-align: center;
    color: var(--white);
    min-height: 320px;
    /* ESTICA ate o pe do quadro de entregas — escolha dele em 12/08/2026, depois
       de eu medir e mostrar que os topos batiam (218px nos dois) mas as alturas
       nao (414 contra 463). Chegou a ter `align-self: start` por um pedido
       anterior dele ("a capsula esta muito alta", quando ia a 528px); com a
       altura ja reduzida pelos outros ajustes, esticar voltou a fazer sentido. */
    align-self: stretch;
}
.dash-capsula-anel { width: 100%; max-width: 152px; display: block; }
.dash-capsula-rot { font-size: 0.62rem; color: rgba(255, 255, 255, 0.55); margin: 0 0 2px; }

/* O tempo DENTRO do circulo: o anel e o SVG, e o relogio e HTML sobreposto no
   centro (12/08/2026, pedido dele — "a contagem precisa ser dentro do circulo e
   numero maior"). Sobreposto em HTML de proposito: `timer-display` e escrito
   com innerText, que nao funciona em <text> de SVG. */
.dash-capsula-relogio { position: relative; width: 100%; display: flex; justify-content: center; }
.dash-capsula-centro {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
}
.dash-capsula-tempo {
    font-size: 1.5rem;
    font-weight: 500;
    color: var(--white);
    margin: 0 0 1px;
    letter-spacing: -0.01em;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
/* Em tela apertada o circulo encolhe e "00:00:00" nao caberia dentro dele. */
@media (max-width: 1150px) {
    .dash-capsula-tempo { font-size: 1.15rem; }
}

/* Expandir para janela propria. Fica no canto, sem competir com o relogio. */
.dash-capsula-expandir {
    align-self: flex-end;
    background: rgba(255, 255, 255, 0.14);
    border: none;
    color: var(--white);
    width: 26px;
    height: 26px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 0.62rem;
    padding: 0;
    flex-shrink: 0;
}
.dash-capsula-expandir:hover { background: rgba(255, 255, 255, 0.28); }
.dash-capsula .dash-btn-crono {
    width: 100%;
    font-family: 'Poppins', sans-serif;
    font-size: 0.7rem;
    padding: 0.55rem 0;
    border-radius: 999px;
    border: none;
    cursor: pointer;
    background: var(--white);
    color: var(--primary-burgundy);
}
.dash-capsula .dash-btn-crono-fraco { background: rgba(255, 255, 255, 0.16); color: var(--white); }
.dash-capsula select {
    width: 100%;
    font-size: 0.62rem;
    background: rgba(255, 255, 255, 0.1);
    color: var(--white);
    border: 1px solid rgba(255, 255, 255, 0.2);
    padding: 0.3rem;
    border-radius: 999px;
    text-align: center;
}
/* 🔴 A LISTA do select abre em fundo BRANCO do sistema, e as opcoes herdavam o
   branco do <select> — nomes de projeto invisiveis (12/08/2026, a foto dele
   pegou). O <option> precisa das cores dele, nao das do fechado. */
.dash-capsula select option {
    color: var(--text-dark);
    background: var(--white);
    text-align: left;
    font-size: 0.78rem;
}

/* O DONO da tela: prazos dos autorais + Backstage no mesmo quadro. */
.dash-prazos { grid-area: pra; }

/* 🔴 O quadro de Proximas Entregas era BORDO ate 12/08/2026, e por isso
   .delivery-name e .delivery-stage sao BRANCOS (style.css:2944). No quadro
   branco do desenho novo isso deixou os nomes dos projetos invisiveis — a
   foto dele mostrou tres caixinhas vazias. Escopado aqui em vez de mexer nas
   classes originais, que ainda podem servir a outro quadro bordo. */
.dash-prazos .delivery-name { color: var(--text-dark); font-weight: 500; }
.dash-prazos .delivery-stage { color: var(--text-light); }
/* 🔴 As ETIQUETAS tambem eram brancas ("Em 2 dias" saia como caixinha vazia —
   a foto dele pegou): .delivery-tag.soon era rgba(255,255,255,0.2) com texto
   branco, feito para o quadro bordo de antes. Terceira vez que texto claro
   herdado num fundo claro morde nesta sessao. */
.dash-prazos .delivery-tag.soon {
    background: rgba(var(--primary-rgb), 0.09);
    color: var(--primary-burgundy);
}
.dash-prazos .delivery-tag.soon:hover { background: rgba(var(--primary-rgb), 0.16); }
.dash-prazos .delivery-item { border-bottom: 1px solid var(--border-light); }
.dash-prazos .delivery-item:last-child { border-bottom: none; }
.dash-prazos .upcoming-list { margin-top: 0; gap: 0.55rem; }
.dash-linha-prazo {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.32rem 0;
}
.dash-prazo-nome { font-size: 0.85rem; color: var(--text-dark); display: block; }
.dash-prazo-sub { font-size: 0.64rem; color: var(--text-light); display: block; margin-top: 1px; }
.dash-prazo-data { font-size: 0.72rem; color: var(--primary-burgundy); white-space: nowrap; }
.dash-prazos-divisor { margin: 1.5rem 0 1rem; }

/* A CUPULA da meta. */
.dash-meta-cupula { grid-area: met; text-align: center; }
.dash-meta-cupula svg { width: 100%; max-width: 132px; }

/* A AGENDA no quadrado que era dos clientes quentes (12/08/2026). O dia grande
   em BORDO e NEGRITO, pedido dele: "com o numero da data maior negrito e bordo". */
.dash-agenda { grid-area: age; display: flex; flex-direction: column; }
.dash-agenda-topo {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.9rem;
}
.dash-agenda-dia {
    font-size: 2.4rem;
    font-weight: 600;
    color: var(--primary-burgundy);
    line-height: 0.95;
    margin: 0;
    font-family: 'Poppins', sans-serif;
}
.dash-agenda-bloco { margin-bottom: 0.7rem; }
.dash-agenda-bloco .dash-bloco-rot { margin-bottom: 0.35rem; }
.dash-agenda-bloco .agenda-list { margin: 0; padding: 0; list-style: none; }
/* O conteudo da agenda vem do mesmo render de antes, que usa fontes maiores do
   que este quadrado aceita — aqui ele e comprimido, sem tocar no render. */
.dash-agenda-bloco .agenda-item,
.dash-agenda-bloco .metric-row {
    font-size: 0.72rem;
    padding: 0.2rem 0;
    border: none;
}
.dash-agenda-bloco .agenda-item p { font-size: 0.72rem; margin: 0; }
.dash-agenda-link {
    font-size: 0.66rem;
    color: var(--primary-burgundy);
    text-decoration: none;
    margin-top: auto;
    padding-top: 0.5rem;
}
.dash-agenda-link:hover { text-decoration: underline; }

/* A faixa LARGA E BAIXA do dinheiro — a forma contraria da capsula. */
.dash-dinheiro {
    grid-area: din;
    background: var(--primary-burgundy);
    border-radius: 26px;
    padding: 1.3rem 1.7rem;
    color: var(--white);
    display: flex;
    align-items: center;
    gap: 1.8rem;
}
.dash-dinheiro-lado { flex-shrink: 0; }
.dash-dinheiro-n { font-size: 1.75rem; font-weight: 300; line-height: 1; margin: 3px 0 0; }
.dash-dinheiro-sub { font-size: 0.7rem; color: var(--secondary-champagne); margin: 5px 0 0; }
.dash-curva-caixa { flex: 1; min-width: 0; }
.dash-curva-svg { width: 100%; height: 52px; display: block; }
.dash-dinheiro .dash-curva-svg path[fill^="rgba"] { fill: rgba(217, 197, 178, 0.2); }
.dash-dinheiro .dash-curva-svg path[stroke] { stroke: var(--secondary-champagne); }
.dash-curva-meses { display: flex; justify-content: space-between; margin-top: 3px; }
.dash-curva-meses span { font-size: 0.58rem; color: rgba(255, 255, 255, 0.55); }

.dash-lembretes { grid-area: rec; }

/* Em tela estreita a assimetria nao cabe: vira uma coluna, e ai o respiro e
   que organiza. */
@media (max-width: 900px) {
    .dash-novo {
        grid-template-columns: 1fr;
        grid-template-areas: 'cro' 'pra' 'age' 'met' 'din' 'rec';
    }
    .dash-capsula { min-height: 0; border-radius: 999px 999px 26px 26px; }
    .dash-dinheiro { flex-direction: column; align-items: stretch; gap: 1rem; }
    .dash-faixa { gap: 1.4rem; }
}

/* ═══ PERSONALIZAR O DASHBOARD — 12/08/2026 ════════════════════════════════
   Pedido dele: escolher o que aparece na tela inicial, e a mesma opcao para
   quem comprar o sistema. O botao e discreto de proposito: quem esta olhando
   o dashboard esta trabalhando, nao arrumando a tela. */
.dash-personalizar-barra {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 0.7rem;
}
.dash-btn-personalizar {
    background: transparent;
    border: 1px solid var(--border-light);
    color: var(--text-light);
    font-family: 'Poppins', sans-serif;
    font-size: 0.72rem;
    padding: 0.35rem 0.9rem;
    border-radius: 20px;
    cursor: pointer;
    transition: color 0.18s ease, border-color 0.18s ease;
}
.dash-btn-personalizar:hover {
    color: var(--primary-burgundy);
    border-color: var(--primary-burgundy);
}
.dash-btn-personalizar i { margin-right: 5px; font-size: 0.7rem; }

.dash-linha {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    padding: 0.6rem 0;
    border-bottom: 1px solid var(--border-light);
}
.dash-linha:last-child { border-bottom: none; }
/* Quadro desligado fica APAGADO, nao escondido: e o que mostra que ele existe
   e pode voltar. Lista que some ensina que a escolha e irreversivel. */
.dash-linha-off .dash-linha-nome { opacity: 0.45; }
.dash-linha-mover { display: flex; flex-direction: column; gap: 2px; }
.dash-linha-mover button {
    background: transparent;
    border: none;
    color: var(--text-light);
    cursor: pointer;
    padding: 0 4px;
    font-size: 0.6rem;
    line-height: 1;
    font-family: 'Poppins', sans-serif;
}
.dash-linha-mover button:hover:not(:disabled) { color: var(--primary-burgundy); }
.dash-linha-mover button:disabled { opacity: 0.2; cursor: default; }
.dash-linha-nome {
    flex: 1;
    font-size: 0.82rem;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.dash-linha-nota { font-size: 0.66rem; color: var(--text-light); }
.dash-linha-fixo {
    font-size: 0.62rem;
    color: var(--text-light);
    border: 1px solid var(--border-light);
    border-radius: 12px;
    padding: 2px 9px;
    white-space: nowrap;
}
.dash-chave { cursor: pointer; display: inline-flex; align-items: center; }
.dash-chave input { display: none; }
.dash-chave span {
    width: 36px;
    height: 20px;
    border-radius: 12px;
    background: var(--border-light);
    position: relative;
    transition: background 0.18s ease;
    display: inline-block;
}
.dash-chave span::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: white;
    transition: transform 0.18s ease;
}
.dash-chave input:checked + span { background: var(--primary-burgundy); }
.dash-chave input:checked + span::after { transform: translateX(16px); }

/* Faixa de alarme do "Vencido" na Saude Financeira (12/08/2026). Sai do
   alinhamento das outras linhas de proposito: e a unica da tela que exige
   acao, e estava com o mesmo peso de "A Receber". */
.metric-row.alarme-vencido {
    background: rgba(197, 48, 48, 0.07);
    border: 1px solid rgba(197, 48, 48, 0.22);
    border-radius: 8px;
    padding: 8px 10px;
    margin: 4px 0;
    color: #C53030;
    font-weight: 600;
}
.metric-row.alarme-vencido .semibold { color: #C53030; font-size: 0.95rem; }
.metric-row.alarme-vencido i { margin-right: 6px; font-size: 0.75rem; }

/* Card que leva a algum lugar (opcao F, 12/08/2026). Ate hoje NENHUM card do
   dashboard respondia a clique — o cursor de seta era a unica pista, e nao
   havia pista nenhuma de que dava para ir dali a outra tela. */
.card-clicavel { cursor: pointer; transition: transform 0.18s ease, box-shadow 0.18s ease; }
.card-clicavel:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08); }

/* ═══ CARD "HOJE" — 12/08/2026, opcao A ═══════════════════════════════
   Ocupa 2 colunas e 2 fileiras porque substitui 4 cards. Ver secao 56. */
.card-hoje {
    grid-column: span 2;
    grid-row: span 2;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    text-align: left;
}

.hoje-topo {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding-bottom: 0.9rem;
    border-bottom: 1px dashed var(--border-light);
}

.hoje-data { display: flex; flex-direction: column; }
.hoje-data #agenda-dia-numero {
    font-size: 2.6rem;
    font-weight: 700;
    color: var(--primary-burgundy);
    line-height: 1;
}
.hoje-data #agenda-dia-mes-ano {
    font-size: 0.72rem;
    color: var(--text-light);
    margin-top: 0.15rem;
}

.hoje-acoes { display: flex; gap: 8px; align-items: center; }

/* O selo some sozinho quando nao ha atraso: quadro que grita "0 atrasados"
   ensina a ignorar o aviso. Quem esconde e atualizarSeloAtrasadas(). */
.hoje-selo-atraso {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(197, 48, 48, 0.08);
    color: #C53030;
    border: 1px solid rgba(197, 48, 48, 0.25);
    border-radius: 999px;
    padding: 5px 12px;
    font-size: 0.7rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}
.hoje-selo-atraso:hover { background: #C53030; color: #fff; border-color: #C53030; }

.hoje-btn-lembrete {
    background: rgba(var(--primary-rgb), 0.08);
    color: var(--primary-burgundy);
    border: 1px solid rgba(var(--primary-rgb), 0.2);
    border-radius: 999px;
    width: 28px;
    height: 28px;
    cursor: pointer;
    font-size: 0.7rem;
    transition: all 0.2s ease;
}
.hoje-btn-lembrete:hover { background: var(--primary-burgundy); color: #fff; }

.hoje-form-lembrete {
    display: none;
    flex-direction: column;
    gap: 0.5rem;
    background: var(--bg-offwhite);
    padding: 0.8rem;
    border-radius: 8px;
}
.hoje-form-lembrete input {
    width: 100%;
    border: 1px solid var(--border-light);
    padding: 0.45rem 0.6rem;
    border-radius: 6px;
    font-size: 0.78rem;
    outline: none;
}
.hoje-form-lembrete .btn-pill { padding: 0.45rem; font-size: 0.75rem; }

.hoje-bloco h4 {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--text-light);
    margin: 0 0 0.6rem 0;
}
.hoje-contagem {
    background: rgba(var(--primary-rgb), 0.1);
    color: var(--primary-burgundy);
    border-radius: 999px;
    min-width: 20px;
    padding: 1px 7px;
    text-align: center;
    font-size: 0.68rem;
    letter-spacing: 0;
}
.hoje-bloco #notifications-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    max-height: 160px;
    overflow-y: auto;
}
.hoje-ver-agenda { margin-top: auto; align-self: flex-start; }

@media (max-width: 1200px) {
    .dashboard-grid.layout-simetrico {
        grid-template-columns: repeat(2, 1fr);
    }
    .card-monitoramento {
        grid-row: auto;
    }
    .card-hoje { grid-row: auto; }
}
@media (max-width: 768px) {
    .dashboard-grid.layout-simetrico {
        grid-template-columns: 1fr;
    }
}

/* ============================================
   LAYOUT GLOBAL - CENTRALIZAÇÃO E RESPONSIVIDADE
   ============================================ */

/* Container principal - responsivo */
.container {
    max-width: 100% !important;
    margin: 100px auto 40px;
    padding: 0 4rem !important;
    width: 100%;
}

/* Todas as seções internas centralizadas */
.tab-content,
section.tab-content {
    max-width: 100%;
    width: 100%;
}

/* Tab panes internos do Administrativo e Projetos */
.tab-pane {
    max-width: 100% !important;
    margin: 0;
    width: 100%;
}

/* Section headers centralizados */
.section-header {
    max-width: 100% !important;
    margin-left: 0;
    margin-right: 0;
    width: 100%;
}

/* Internal tabs centralizadas */
.internal-tabs {
    max-width: 100% !important;
    margin-left: 0;
    margin-right: 0;
    width: 100%;
}

/* Info grid responsiva melhorada */
.info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2rem;
    width: 100%;
}

/* Custom grid para aba dados do projeto */
.info-grid-dados {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
    margin-bottom: 2rem;
    width: 100%;
}
@media (max-width: 1024px) {
    .info-grid-dados {
        grid-template-columns: 1fr;
    }
}

/* Custom grid para aba servicos do projeto */
.info-grid-servicos {
    display: grid;
    grid-template-columns: 4.5fr 5.5fr;
    gap: 1.5rem;
    margin-bottom: 2rem;
    width: 100%;
}
@media (max-width: 1024px) {
    .info-grid-servicos {
        grid-template-columns: 1fr;
    }
}

/* Estilização premium para as pílulas/tags de serviços contratados */
.service-tag {
    display: inline-block;
    background: rgba(217, 197, 178, 0.15); /* Tom champagne suave */
    color: var(--primary-burgundy); /* Paleta vinho/bordeaux */
    border: 1px solid rgba(217, 197, 178, 0.4);
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    margin-right: 6px;
    margin-bottom: 8px;
    font-family: 'Poppins', sans-serif;
    box-shadow: 0 2px 4px rgba(0,0,0,0.02);
    transition: all 0.2s ease;
}
.service-tag:hover {
    background: rgba(217, 197, 178, 0.3);
    transform: translateY(-1px);
}


/* Fornecedores grid responsiva */
#tab-fornecedores > div:last-child {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1.5rem;
    max-width: 100%;
}

/* Dashboard grid responsiva */
.dashboard-grid {
    max-width: 100%;
    width: 100%;
}

/* Cards com tamanho mínimo adequado */
.info-block {
    min-width: 0;
    overflow: hidden;
}

/* Backoffice financeiro - ajuste */
#tab-backoffice-financeiro .info-grid {
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}

#tab-backoffice-financeiro .dashboard-grid {
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    align-items: stretch;
}

/* Financeiro tab */
#tab-financeiro .info-grid {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

/* Gestão interna */
#tab-gestao-interna .info-grid {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

/* Documentos section grid */
#documentos-section .dashboard-grid {
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}

/* Precificação centralizada */
#precificacao-section {
    max-width: 100% !important;
    width: 100% !important;
}

/* Project internal section */
#project-internal-section {
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 !important;
}

/* ============================================
   RESPONSIVIDADE - TABLETS (max 1024px)
   ============================================ */
@media (max-width: 1024px) {
    .container {
        padding: 0 2rem;
    }

    .tab-pane {
        max-width: 100%;
    }

    .info-grid {
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    }

    #tab-fornecedores > div:last-child {
        grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    }

    #tab-backoffice-financeiro .info-grid {
        grid-template-columns: 1fr;
    }

    .section-header {
        flex-wrap: wrap;
        gap: 1rem;
    }
}

/* ============================================
   RESPONSIVIDADE - MOBILE (max 768px)
   ============================================ */
@media (max-width: 768px) {
    .container {
        padding: 0 1rem !important;
        margin-top: 80px;
    }

    .tab-pane {
        max-width: 100%;
        padding: 0;
    }

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

    #tab-fornecedores > div:last-child {
        grid-template-columns: 1fr;
    }

    .internal-tabs {
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .section-header {
        flex-direction: column;
        align-items: flex-start !important;
        gap: 1rem;
    }

    #tab-backoffice-financeiro .dashboard-grid {
        grid-template-columns: 1fr;
    }
}


/* =============================================
   MODULO DE PROPOSTAS — Dashboard Comercial
   ============================================= */
.proposal-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    margin-bottom: 1.5rem;
}
.proposal-stat-card {
    background: white;
    border-radius: 12px;
    padding: 1.2rem 1.5rem;
    border: 1px solid var(--border-light);
    border-left: 4px solid #CBD5E0;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
.proposal-stat-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.08);
}
.proposal-stat-card.stat-total { border-left-color: var(--primary-burgundy); }
.proposal-stat-card.stat-approved { border-left-color: #48BB78; }
.proposal-stat-card.stat-negotiation { border-left-color: #ED8936; }
.proposal-stat-card.stat-refused { border-left-color: #F56565; }
.proposal-stat-card .stat-label {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-light);
    margin-bottom: 0.5rem;
}
.proposal-stat-card .stat-value {
    font-size: 2rem;
    font-weight: 700;
    color: var(--text-dark);
    line-height: 1;
}
.ticket-medio-card {
    background: white;
    border-radius: 12px;
    padding: 1.2rem 1.5rem;
    border: 1px solid var(--border-light);
    border-left: 4px solid var(--secondary-champagne);
    margin-bottom: 1.5rem;
}
.ticket-medio-card .ticket-label {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-light);
    margin-bottom: 0.3rem;
}
.ticket-medio-card .ticket-value {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--primary-burgundy);
}
.meta-receita-card {
    background: white;
    border-radius: 12px;
    padding: 1.5rem;
    border: 1px solid var(--border-light);
    margin-bottom: 2rem;
}
.meta-receita-card .meta-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.8rem;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-dark);
}
.meta-receita-card .meta-header i { color: var(--secondary-champagne); }
.meta-progress-bar {
    width: 100%;
    height: 10px;
    background: #EDF2F7;
    border-radius: 20px;
    overflow: hidden;
    margin-bottom: 0.5rem;
}
.meta-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #ED8936, #F56565);
    border-radius: 20px;
    transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1);
    min-width: 0;
}
.meta-receita-card .meta-text { font-size: 0.8rem; color: var(--text-light); }
.meta-receita-card .meta-text strong { color: var(--text-dark); }
.meta-input-inline {
    background: transparent;
    border: none;
    border-bottom: 1px dashed var(--secondary-champagne);
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--primary-burgundy);
    width: 120px;
    text-align: center;
    padding: 2px 4px;
}
.meta-input-inline:focus { outline: none; border-bottom-color: var(--primary-burgundy); }
.proposals-table-container {
    background: white;
    border-radius: 12px;
    border: 1px solid var(--border-light);
    overflow: hidden;
}
.proposals-table-container .table-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.2rem 1.5rem;
    border-bottom: 1px solid var(--border-light);
}
.proposals-table-container .table-header h4 {
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-dark);
    margin: 0;
}
.tag-tipo, .tag-origem {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 0.65rem;
    font-weight: 600;
    white-space: nowrap;
}
.tag-tipo.interiores { background: #FFF5F5; color: #C53030; border: 1px solid #FED7D7; }
.tag-tipo.residencial { background: #FFFFF0; color: #B7791F; border: 1px solid #FEFCBF; }
.tag-tipo.comercial { background: #EBF8FF; color: #2B6CB0; border: 1px solid #BEE3F8; }
.tag-tipo.consultoria { background: #F0FFF4; color: #276749; border: 1px solid #C6F6D5; }
.tag-tipo.arquitetonico { background: #FAF5FF; color: #6B46C1; border: 1px solid #E9D8FD; }
.tag-origem.automatica { background: #EBF8FF; color: #2B6CB0; border: 1px solid #BEE3F8; }
.tag-origem.detalhada { background: #FFF5F5; color: #C53030; border: 1px solid #FED7D7; }
#precificacao-section .internal-tabs { margin-bottom: 2rem; }
@media (max-width: 768px) {
    .proposal-stats-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Ajustes de Escala - Antigravity */
html { font-size: 14px !important; }
.container { max-width: 100% !important; }

/* ── ESTILOS NOTION-LIKE (DESIGN MINIMALISTA) ── */

/* Hambúrguer Menu Sidebar */
.hamburger-sidebar {
    position: fixed;
    top: 40px; /* Alinhado abaixo do custom titlebar de 40px */
    left: -280px;
    width: 280px;
    height: calc(100vh - 40px);
    background: white;
    z-index: 4000;
    box-shadow: 2px 0 10px rgba(0, 0, 0, 0.08);
    transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
    border-right: 1px solid var(--border-light);
}

.hamburger-sidebar.active {
    left: 0;
}

.sidebar-overlay {
    position: fixed;
    top: 40px;
    left: 0;
    width: 100vw;
    height: calc(100vh - 40px);
    background: rgba(0, 0, 0, 0.15);
    z-index: 3999;
    display: none;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.sidebar-overlay.active {
    display: block;
    opacity: 1;
}

.sidebar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--border-light);
}

.sidebar-logo {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    font-weight: 600;
    color: var(--primary-burgundy);
    font-size: 1rem;
    letter-spacing: 1px;
}

.sidebar-logo img {
    height: 22px;
    width: auto;
}

.sidebar-close {
    font-size: 1.5rem;
    cursor: pointer;
    color: var(--text-light);
    transition: color 0.2s;
    line-height: 1;
}

.sidebar-close:hover {
    color: var(--primary-burgundy);
}

.sidebar-content {
    flex: 1;
    padding: 1.5rem 1rem;
    overflow-y: auto;
}

.sidebar-section-title {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-light);
    margin-bottom: 0.8rem;
    padding-left: 0.5rem;
    font-weight: 600;
}

.sidebar-links {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.sidebar-links li {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    padding: 0.7rem 1rem;
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.85rem;
    color: var(--text-dark);
    font-weight: 500;
    transition: all 0.2s ease;
}

.sidebar-links li i {
    width: 16px;
    text-align: center;
    color: var(--text-light);
    font-size: 0.9rem;
    transition: color 0.2s;
}

.sidebar-links li:hover {
    background: #F4EFEB;
    color: var(--primary-burgundy);
}

.sidebar-links li:hover i {
    color: var(--primary-burgundy);
}

/* Layout Tela Inicial (Home Section) */
#home-section {
    margin-left: -4rem !important;
    margin-right: -4rem !important;
    margin-top: -20px !important; /* Desfaz o padding-top de 20px injetado pelo preload */
}

/* Capa/Banner Notion */
.notion-cover-banner {
    width: 100%;
    height: 180px;
    background-color: #EFEAE2; /* Tom de areia original da imagem */
    position: relative;
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    padding: 1.5rem 4rem;
    box-sizing: border-box;
}

.banner-contact-info {
    text-align: right;
    font-family: var(--font-primary);
    font-size: 0.75rem;
    color: var(--primary-burgundy); /* Burgundy das fontes */
    font-weight: 500;
    line-height: 1.5;
}

/* Container do Conteúdo Notion */
.notion-header-container {
    max-width: 1050px;
    margin: 0 auto;
    padding: 0 4rem 2rem 4rem;
    position: relative;
    box-sizing: border-box;
}

/* Ícone de Logo Sobreposto */
.notion-page-icon-wrapper {
    position: absolute;
    top: -65px; /* Mais acima, dentro do banner */
    left: 4rem;
    z-index: 10;
}

.notion-page-icon {
    width: 45px; /* Menor */
    height: 45px;
    background: transparent;
    border-radius: 0;
    padding: 0;
    box-shadow: none;
    object-fit: contain;
    border: none;
}

/* Título de Boas-vindas */
.notion-page-title-section {
    margin-top: 35px;
    margin-bottom: 2rem;
}

.notion-page-title {
    font-family: var(--font-primary);
    font-size: 2.1rem;
    font-weight: 700;
    color: var(--text-dark);
    margin: 0;
    letter-spacing: -0.5px;
}

.notion-page-date {
    font-size: 0.85rem;
    color: #9ca3af;
    margin-top: -0.15rem;
    font-weight: 400;
    letter-spacing: normal;
}

/* Menu Wrapper (Grid de Cards + Foto) */
.notion-menu-wrapper {
    display: flex;
    gap: 2.5rem;
    align-items: center;
    margin-bottom: 3.5rem;
}

/* Grid de 12 Cards */
.notion-cards-grid {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.8rem;
}

.notion-menu-card {
    background-color: #F4EFEB;
    border-radius: 12px;
    height: 85px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    box-sizing: border-box;
    padding: 0.5rem;
    border: 1px solid transparent;
}

.notion-menu-card span {
    font-family: 'Poppins', sans-serif;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--primary-burgundy);
    text-align: center;
    letter-spacing: -0.2px;
}

.notion-menu-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(var(--primary-rgb), 0.06);
    background-color: #EDE6DF;
}

/* Bloco da Foto de Perfil */
.notion-profile-wrapper {
    flex-shrink: 0;
    width: 240px;
    height: 240px;
    min-width: 240px;
    max-width: 240px;
    min-height: 240px;
    max-height: 240px;
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    overflow: hidden;
    position: relative;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.05);
    border: 3px solid #FFFFFF;
}

.notion-profile-img {
    width: 135%;
    height: 135%;
    border-radius: 50%;
    object-fit: cover;
    object-position: 50% 12%;
    display: block;
}

/* Envelopamento para manter o padding do dashboard original */
.notion-dashboard-wrapper {
    padding: 0 4rem;
    max-width: 1050px;
    margin: 0 auto;
    box-sizing: border-box;
}

/* Ajustes responsivos */
@media (max-width: 992px) {
    .notion-menu-wrapper {
        flex-direction: column;
        gap: 2rem;
    }
    .notion-profile-wrapper {
        order: -1;
    }
    .notion-cards-grid {
        grid-template-columns: repeat(3, 1fr);
        width: 100%;
    }
}

@media (max-width: 768px) {
    #home-section {
        margin-left: -1.5rem !important;
        margin-right: -1.5rem !important;
    }
    .notion-cover-banner {
        padding: 1rem 1.5rem;
        height: 140px;
    }
    .banner-contact-info {
        font-size: 0.7rem;
    }
    .notion-header-container {
        padding: 0 1.5rem 1.5rem 1.5rem;
    }
    .notion-page-icon-wrapper {
        left: 1.5rem;
        top: -55px; /* Mais acima no mobile */
    }
    .notion-page-icon {
        width: 40px; /* Menor no mobile */
        height: 40px;
        padding: 4px;
    }
    .notion-page-title-section {
        margin-top: 35px;
    }
    .notion-page-title {
        font-size: 1.7rem;
    }
    .notion-page-date {
        font-size: 0.78rem;
    }
    .notion-cards-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .notion-dashboard-wrapper {
        padding: 0 1.5rem;
    }
    .cronograma-container {
        padding: 0 1.5rem 2rem;
    }
}

/* ==========================================================================
   MÓDULO DE MARKETING - ESTILOS PREMIUM MINIMALISTA
   ========================================================================== */

/* Barra de Navegação de Sub-abas */
.marketing-nav-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgba(var(--primary-rgb), 0.08);
    padding-bottom: 0.5rem;
    margin-bottom: 2rem;
    flex-wrap: wrap;
    gap: 1rem;
}
.marketing-tabs-list {
    display: flex;
    gap: 0.4rem;
}
.marketing-tab {
    background: transparent;
    border: none;
    padding: 8px 18px;
    font-family: 'Poppins', sans-serif;
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--text-light);
    cursor: pointer;
    border-radius: 8px;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: center;
    gap: 8px;
    letter-spacing: 0.2px;
}
.marketing-tab:hover {
    background: #F4EFEB;
    color: var(--primary-burgundy);
}
.marketing-tab.active {
    background: #F4EFEB;
    color: var(--primary-burgundy);
    font-weight: 600;
}
.marketing-badge-info {
    font-family: 'Poppins', sans-serif;
    font-size: 0.68rem;
    font-weight: 600;
    color: var(--primary-burgundy);
    background: #F4EFEB;
    padding: 5px 14px;
    border-radius: 20px;
    letter-spacing: 0.8px;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Cabeçalho do Calendário */
.marketing-header-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-top: 1rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
    gap: 1.5rem;
}
.marketing-main-title {
    font-family: 'Poppins', sans-serif;
    font-size: 2rem;
    font-weight: 600;
    color: var(--primary-burgundy);
    margin: 0;
    letter-spacing: -0.5px;
}
.marketing-subtitle {
    font-family: 'Poppins', sans-serif;
    font-size: 0.72rem;
    color: var(--text-light);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-top: 2px;
    margin-bottom: 0;
    font-weight: 500;
}

/* Legenda dos Formatos */
.calendar-legend {
    display: flex;
    gap: 18px;
    font-family: 'Poppins', sans-serif;
    font-size: 0.72rem;
    font-weight: 500;
    align-items: center;
    flex-wrap: wrap;
}
.legend-item {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--text-dark);
}
.dot-legend {
    border-radius: 50%;
    width: 8px;
    height: 8px;
    display: inline-block;
}
.bg-reels { background: var(--primary-burgundy); }
.bg-carrossel { background: #2D2D2D; }
.bg-feed { background: #A09080; }
.border-stories {
    border: 1.5px solid var(--primary-burgundy);
    background: transparent;
}

/* Badges de Formato */
.badge-format {
    font-family: 'Poppins', sans-serif;
    font-size: 0.6rem;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 4px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    display: inline-block;
}
.badge-format.reels {
    background: #F4EFEB;
    color: var(--primary-burgundy);
}
.badge-format.carrossel {
    background: #2D2D2D;
    color: #ffffff;
}
.badge-format.feed {
    background: #F4EFEB;
    color: #6B5B4F;
}
.badge-format.stories {
    background: transparent;
    border: 1.5px solid var(--primary-burgundy);
    color: var(--primary-burgundy);
    padding: 1.5px 7px;
}

/* Sanfona explicativa da Estratégia de Frequência */
.strategy-accordion {
    margin-bottom: 2.2rem;
    border: 1px solid rgba(var(--primary-rgb), 0.08);
    border-radius: 10px;
    background: #F4EFEB;
    overflow: hidden;
    box-shadow: none;
}
.strategy-accordion .accordion-header {
    padding: 14px 22px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    user-select: none;
    transition: background 0.2s ease;
    background: #F4EFEB;
}
.strategy-accordion .accordion-header:hover {
    background: #EDE6DF;
}
.strategy-accordion .accordion-header span {
    font-family: 'Poppins', sans-serif;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--primary-burgundy);
    display: flex;
    align-items: center;
    gap: 8px;
}
.accordion-header #accordion-arrow {
    font-size: 0.8rem;
    color: var(--primary-burgundy);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.accordion-header.active #accordion-arrow {
    transform: rotate(180deg);
}
.strategy-accordion .accordion-content {
    display: none;
    border-top: 1px solid rgba(var(--primary-rgb), 0.06);
    padding: 22px;
    background: #ffffff;
    animation: slideDown 0.3s ease-out;
}
.strategy-table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
    font-family: 'Poppins', sans-serif;
    font-size: 0.82rem;
}
.strategy-table th {
    background: var(--primary-burgundy);
    color: #ffffff;
    text-transform: uppercase;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 1px;
    padding: 10px 18px;
}
.strategy-table th:first-child { border-radius: 5px 0 0 5px; }
.strategy-table th:last-child { border-radius: 0 5px 5px 0; }
.strategy-table td {
    padding: 14px 18px;
    border-bottom: 1px solid rgba(var(--primary-rgb), 0.04);
    font-weight: 400;
}
.strategy-table tr:last-child td {
    border-bottom: none;
}
.strategy-table td.freq-value {
    text-align: right;
    font-weight: 600;
    color: var(--primary-burgundy);
    font-size: 0.85rem;
}

/* Grade do Calendário */
.calendar-grid-container {
    background: #ffffff;
    border: 1px solid rgba(var(--primary-rgb), 0.06);
    border-radius: 12px;
    padding: 20px;
    box-shadow: none;
    margin-bottom: 1rem;
}
.calendar-week-header {
    display: grid;
    grid-template-columns: 80px repeat(5, 1fr);
    text-align: center;
    font-family: 'Poppins', sans-serif;
    font-size: 0.68rem;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--text-light);
    letter-spacing: 1.5px;
    margin-bottom: 10px;
}
.calendar-week-header div {
    padding: 8px;
}
.calendar-week-header div:not(:first-child) {
    border-bottom: 1px solid rgba(var(--primary-rgb), 0.06);
}
.calendar-body-grid {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.calendar-row {
    display: grid;
    grid-template-columns: 80px repeat(5, 1fr);
    gap: 8px;
}
.week-label {
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Poppins', sans-serif;
    font-size: 0.68rem;
    font-weight: 600;
    color: var(--primary-burgundy);
    text-transform: uppercase;
    background: #F4EFEB;
    border: none;
    border-radius: 8px;
    padding: 10px;
    text-align: center;
    letter-spacing: 0.5px;
}
.calendar-day-cell {
    border-radius: 8px;
    padding: 12px;
    min-height: 115px;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}
.calendar-day-cell.empty-day {
    background: #FAFAF9;
    border: 1px dashed rgba(var(--primary-rgb), 0.04);
}
.calendar-day-cell.empty-day.outside-month {
    background: #F9F9F8;
    opacity: 0.35;
}
.calendar-day-cell.has-post {
    background: #ffffff;
    border: 1px solid rgba(var(--primary-rgb), 0.06);
    cursor: pointer;
}
.calendar-day-cell.has-post:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(var(--primary-rgb), 0.06);
    border-color: rgba(var(--primary-rgb), 0.15);
}
.day-cell-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 8px;
}
.day-number {
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--text-dark);
}
.calendar-day-cell.has-post .day-number {
    color: var(--primary-burgundy);
}
.post-title-preview {
    font-family: 'Poppins', sans-serif;
    font-size: 0.74rem;
    line-height: 1.35;
    font-weight: 500;
    color: #3a3a3a;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-top: 2px;
}

/* Gerador de Conteúdo por IA */
.ai-generator-container {
    display: grid;
    grid-template-columns: 350px 1fr;
    gap: 25px;
    background: #ffffff;
    border: 1px solid rgba(var(--primary-rgb), 0.06);
    border-radius: 12px;
    padding: 25px;
    box-shadow: none;
}
.ai-generator-sidebar {
    background: #F4EFEB;
    border: none;
    border-radius: 10px;
    padding: 22px;
}
.generator-section-title {
    font-family: 'Poppins', sans-serif;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--primary-burgundy);
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    gap: 8px;
    border-bottom: 1px solid rgba(var(--primary-rgb), 0.08);
    padding-bottom: 10px;
}
.form-group-ai {
    margin-bottom: 1.2rem;
}
.form-group-ai label {
    display: block;
    font-family: 'Poppins', sans-serif;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--text-dark);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 6px;
}
.form-group-ai select,
.form-group-ai textarea {
    width: 100%;
    padding: 10px 12px;
    font-family: 'Poppins', sans-serif;
    font-size: 0.82rem;
    border: 1px solid rgba(var(--primary-rgb), 0.1);
    border-radius: 8px;
    background: #ffffff;
    color: var(--text-dark);
    transition: all 0.2s ease;
}
.form-group-ai select:focus,
.form-group-ai textarea:focus {
    border-color: var(--primary-burgundy);
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.06);
    outline: none;
}
.btn-generate-ai {
    width: 100%;
    background: var(--primary-burgundy);
    color: #ffffff;
    border: none;
    padding: 12px 20px;
    font-family: 'Poppins', sans-serif;
    font-size: 0.82rem;
    font-weight: 600;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 1.5rem;
    letter-spacing: 0.3px;
}
.btn-generate-ai:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(var(--primary-rgb), 0.15);
    background: #5c1118;
}
.btn-generate-ai:active {
    transform: translateY(1px);
}

.ai-generator-output {
    display: flex;
    flex-direction: column;
    justify-content: center;
    border: 1px dashed rgba(var(--primary-rgb), 0.08);
    border-radius: 10px;
    padding: 30px;
    background: #FAFAF9;
    min-height: 480px;
    position: relative;
}

/* Empty State */
.ai-output-empty {
    text-align: center;
    max-width: 450px;
    margin: 0 auto;
}
.ai-output-empty i {
    font-size: 2.5rem;
    color: rgba(var(--primary-rgb), 0.12);
    margin-bottom: 1.2rem;
}
.ai-output-empty h4 {
    font-family: 'Poppins', sans-serif;
    font-size: 1.05rem;
    color: var(--text-dark);
    margin-bottom: 0.5rem;
    font-weight: 600;
}
.ai-output-empty p {
    font-family: 'Poppins', sans-serif;
    font-size: 0.82rem;
    color: var(--text-light);
    line-height: 1.5;
}

/* Loader */
.ai-output-loader {
    text-align: center;
    max-width: 400px;
    margin: 0 auto;
}
.loader-pulse {
    width: 50px;
    height: 50px;
    background-color: #F4EFEB;
    border-radius: 50%;
    margin: 0 auto 1.5rem auto;
    position: relative;
    animation: pulseLoader 1.5s infinite ease-in-out;
}
.loader-pulse::after {
    content: '';
    width: 24px;
    height: 24px;
    background-color: var(--primary-burgundy);
    border-radius: 50%;
    position: absolute;
    top: 13px;
    left: 13px;
}
.ai-output-loader h4 {
    font-family: 'Poppins', sans-serif;
    font-size: 1rem;
    color: var(--primary-burgundy);
    margin-bottom: 0.5rem;
    font-weight: 600;
}
.ai-output-loader p {
    font-family: 'Poppins', sans-serif;
    font-size: 0.8rem;
    color: var(--text-light);
    line-height: 1.5;
    margin-bottom: 1.5rem;
}
.progress-bar-ai {
    width: 100%;
    height: 4px;
    background: #F4EFEB;
    border-radius: 10px;
    overflow: hidden;
}
.progress-fill-ai {
    height: 100%;
    width: 0%;
    background: var(--primary-burgundy);
    border-radius: 10px;
    transition: width 0.1s linear;
}

/* Result State */
.ai-output-result {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    width: 100%;
    height: 100%;
    animation: fadeIn 0.4s ease-out;
}
.output-result-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgba(var(--primary-rgb), 0.06);
    padding-bottom: 12px;
}
.ai-badge {
    font-family: 'Poppins', sans-serif;
    font-size: 0.68rem;
    font-weight: 600;
    color: var(--primary-burgundy);
    background: #F4EFEB;
    padding: 5px 14px;
    border-radius: 20px;
    letter-spacing: 0.5px;
}
.btn-copy-output {
    background: #ffffff;
    border: 1px solid rgba(var(--primary-rgb), 0.1);
    padding: 6px 14px;
    font-family: 'Poppins', sans-serif;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-dark);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 6px;
}
.btn-copy-output:hover {
    background: #F4EFEB;
    border-color: rgba(var(--primary-rgb), 0.15);
}
.output-result-content {
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
    overflow-y: auto;
    max-height: 480px;
    padding-right: 5px;
}
.result-block h5 {
    font-family: 'Poppins', sans-serif;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-dark);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.result-text-block {
    background: #ffffff;
    border: 1px solid rgba(var(--primary-rgb), 0.05);
    border-radius: 8px;
    padding: 14px 18px;
    font-family: 'Poppins', sans-serif;
    font-size: 0.82rem;
    line-height: 1.55;
    color: #3a3a3a;
    white-space: pre-line;
}

/* Modal de Detalhe do Post (Premium Minimalista) */
.marketing-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
}
.marketing-modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(18, 12, 12, 0.55);
    transition: opacity 0.3s;
}
.marketing-modal-content {
    background: #ffffff;
    border-radius: 14px;
    width: 700px;
    max-width: 90%;
    max-height: 85vh;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12);
    position: relative;
    z-index: 10002;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: zoomInModal 0.28s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.marketing-modal-close {
    position: absolute;
    top: 15px;
    right: 18px;
    background: transparent;
    border: none;
    font-size: 1.6rem;
    color: var(--text-light);
    cursor: pointer;
    transition: color 0.2s;
    line-height: 1;
}
.marketing-modal-close:hover {
    color: var(--primary-burgundy);
}
.marketing-modal-header {
    padding: 25px 30px;
    background: #F4EFEB;
    border-bottom: 1px solid rgba(var(--primary-rgb), 0.06);
}
.marketing-modal-title {
    font-family: 'Poppins', sans-serif;
    font-size: 1.35rem;
    font-weight: 600;
    color: var(--text-dark);
    margin: 8px 0 0 0;
    line-height: 1.3;
}
.marketing-modal-body {
    padding: 25px 30px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}
.modal-section h4 {
    font-family: 'Poppins', sans-serif;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--primary-burgundy);
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.modal-section-content {
    background: #FAFAF9;
    border: 1px solid rgba(var(--primary-rgb), 0.04);
    border-radius: 8px;
    padding: 12px 16px;
    font-family: 'Poppins', sans-serif;
    font-size: 0.82rem;
    line-height: 1.55;
    color: #3a3a3a;
    white-space: pre-line;
}
.modal-section-content.font-italic {
    font-style: italic;
    background: #F4EFEB;
    border-left: 3px solid var(--primary-burgundy);
}
.modal-section-content.font-code {
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.78rem;
    color: #555555;
}
.modal-section-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
}
.marketing-modal-footer {
    padding: 15px 30px;
    border-top: 1px solid rgba(var(--primary-rgb), 0.06);
    display: flex;
    justify-content: flex-end;
    background: #F4EFEB;
}
.btn-copy-modal {
    background: var(--primary-burgundy);
    color: #ffffff;
    border: none;
    padding: 10px 22px;
    font-family: 'Poppins', sans-serif;
    font-size: 0.8rem;
    font-weight: 600;
    border-radius: 8px;
    cursor: pointer;
    box-shadow: none;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 8px;
}
.btn-copy-modal:hover {
    background: #5c1118;
    box-shadow: 0 4px 12px rgba(var(--primary-rgb), 0.15);
}

/* Animações */
@keyframes pulseLoader {
    0% { transform: scale(0.95); opacity: 0.5; }
    50% { transform: scale(1.05); opacity: 0.8; }
    100% { transform: scale(0.95); opacity: 0.5; }
}
@keyframes slideDown {
    from { opacity: 0; transform: translateY(-8px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes zoomInModal {
    from { opacity: 0; transform: scale(0.92); }
    to { opacity: 1; transform: scale(1); }
}
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@media (max-width: 992px) {
    .ai-generator-container {
        grid-template-columns: 1fr;
    }
}

/* ═══════════════════════════════════════════════════════════════
   FLUXOGRAMA DE PROCESSOS — JORNADA DO CLIENTE (MINIMALISTA)
   ═══════════════════════════════════════════════════════════════ */

/* Cabeçalho do Fluxograma */
.flowchart-header-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 1.8rem;
    flex-wrap: wrap;
    gap: 1.5rem;
}
.flowchart-main-title {
    font-family: 'Poppins', sans-serif;
    font-size: 2rem;
    font-weight: 600;
    color: var(--primary-burgundy);
    margin: 0;
    line-height: 1.1;
    letter-spacing: -0.5px;
}
.flowchart-subtitle {
    font-family: 'Poppins', sans-serif;
    font-size: 0.72rem;
    color: var(--text-light);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-top: 4px;
    margin-bottom: 0;
    font-weight: 500;
}

/* Toggle Tabs: Arquitetônico / Interiores */
.flowchart-toggle-tabs {
    display: flex;
    gap: 4px;
    background: #F4EFEB;
    padding: 4px;
    border-radius: 10px;
}
.flowchart-toggle {
    background: transparent;
    border: none;
    padding: 9px 20px;
    font-family: 'Poppins', sans-serif;
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--text-light);
    cursor: pointer;
    border-radius: 8px;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: center;
    gap: 8px;
}
.flowchart-toggle:hover {
    color: var(--primary-burgundy);
    background: rgba(var(--primary-rgb), 0.04);
}
.flowchart-toggle.active {
    background: #ffffff;
    color: var(--primary-burgundy);
    font-weight: 600;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}

/* Painel do fluxograma */
.flowchart-panel {
    animation: fadeIn 0.35s ease-out;
}

/* Barra de título do fluxograma — mesmo tom do card do menu */
.flowchart-title-bar {
    background: #F4EFEB;
    color: var(--primary-burgundy);
    font-family: 'Poppins', sans-serif;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    padding: 16px 28px;
    border-radius: 12px 12px 0 0;
    display: flex;
    align-items: center;
    gap: 10px;
    border: 1px solid rgba(var(--primary-rgb), 0.06);
    border-bottom: none;
}
.flowchart-title-bar i {
    font-size: 0.9rem;
    opacity: 0.7;
}

/* Canvas branco do fluxograma */
.flowchart-canvas {
    background: #ffffff;
    border: 1px solid rgba(var(--primary-rgb), 0.06);
    border-top: none;
    border-radius: 0 0 12px 12px;
    padding: 30px 15px;
    overflow-x: auto;
    overflow-y: visible;
    width: 100%;
    box-sizing: border-box;
}

/* Linha de nós do fluxograma */
.flow-row {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    flex-wrap: nowrap;
    gap: 8px;
    width: 100%;
    margin: 10px 0;
}

/* Nó individual */
.flow-node {
    background: #F4EFEB;
    border: 1px solid rgba(var(--primary-rgb), 0.1);
    border-radius: 8px;
    padding: 12px 8px;
    min-width: 80px;
    flex: 1 1 0%;
    text-align: center;
    font-family: 'Poppins', sans-serif;
    font-size: 0.65rem;
    font-weight: 600;
    color: var(--primary-burgundy);
    line-height: 1.3;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: default;
    position: relative;
    word-break: break-word;
    letter-spacing: 0.1px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.flow-node:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(var(--primary-rgb), 0.08);
    border-color: rgba(var(--primary-rgb), 0.2);
    background: #EDE6DF;
}

/* Bolinha de notificação em destaque */
.flow-badge {
    position: absolute;
    top: -10px;
    right: -10px;
    background: var(--primary-burgundy); /* Bordô — identidade ARTHOS */
    color: #ffffff;
    font-size: 0.58rem;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 20px;
    box-shadow: 0 3px 8px rgba(var(--primary-rgb), 0.35);
    white-space: nowrap;
    border: 1px solid #ffffff;
    z-index: 10;
    line-height: 1;
}

/* Estado de edição para nós do fluxograma */
.flow-node[contenteditable="true"]:focus,
.flow-badge[contenteditable="true"]:focus {
    outline: 2px dashed var(--primary-burgundy);
    outline-offset: 2px;
    background: #FFF8F0;
    color: var(--primary-burgundy);
}
.flow-badge[contenteditable="true"]:focus {
    background: #5c1118;
}

/* Botão Restaurar Padrão do Fluxograma */
.btn-reset-flow {
    background: rgba(var(--primary-rgb), 0.08);
    color: var(--primary-burgundy);
    border: 1px solid rgba(var(--primary-rgb), 0.2);
    padding: 6px 14px;
    border-radius: 8px;
    font-size: 0.72rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.25s ease;
    font-family: 'Inter', sans-serif;
}
.btn-reset-flow:hover {
    background: var(--primary-burgundy);
    color: #ffffff;
}


/* Nó de destaque (marcos importantes) */
.flow-node.accent {
    background: var(--primary-burgundy);
    border-color: var(--primary-burgundy);
    color: #ffffff;
    font-weight: 600;
}
.flow-node.accent:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 16px rgba(var(--primary-rgb), 0.2);
    background: #5c1118;
}

/* Nó final (destino do fluxo) */
.flow-node.final {
    background: var(--primary-burgundy);
    border-color: var(--primary-burgundy);
    color: #ffffff;
    font-weight: 600;
    border-radius: 20px;
    padding: 12px 22px;
}
.flow-node.final:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 6px 18px rgba(var(--primary-rgb), 0.22);
    background: #5c1118;
}

/* Seta horizontal entre nós */
.flow-arrow {
    font-size: 1.1rem;
    color: var(--primary-burgundy);
    font-weight: 400;
    padding: 0 5px;
    user-select: none;
    flex-shrink: 0;
    opacity: 0.35;
}

/* Conector vertical entre linhas (seta ↓) */
.flow-row-connector {
    font-size: 1.2rem;
    color: var(--primary-burgundy);
    font-weight: 400;
    padding: 10px 0;
    user-select: none;
    opacity: 0.45;
    line-height: 1;
    display: block;
    width: 100%;
}
.flow-row-connector.right {
    text-align: right;
    padding-right: 80px;
}
.flow-row-connector.left {
    text-align: left;
    padding-left: 80px;
}

/* Responsividade do fluxograma */
@media (max-width: 1100px) {
    .flowchart-canvas {
        padding: 20px 15px;
    }
    .flow-node {
        min-width: 90px;
        max-width: 140px;
        font-size: 0.6rem;
        padding: 8px 10px;
    }
    .flow-arrow {
        font-size: 0.95rem;
        padding: 0 3px;
    }
    .flowchart-header-row {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* ═══════════════════════════════════════════════════════ */
/* ABAS: FORNECEDORES E LISTA DE COMPRAS                  */
/* ═══════════════════════════════════════════════════════ */

.supplier-table-wrap,
.shopping-table-wrap {
    overflow-x: auto;
    margin-top: 1rem;
}

.supplier-table,
.shopping-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    /* Era 'Inter', e a tabela inteira herdava dela: os 7 unicos textos do
       sistema que ainda saiam fora do padrao (secao 54). */
    font-family: 'Poppins', sans-serif;
    font-size: 0.82rem;
}
.supplier-table th,
.shopping-table th {
    background: var(--primary-burgundy);
    color: #ffffff;
    text-transform: uppercase;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 1.2px;
    padding: 12px 14px;
    text-align: left;
    white-space: nowrap;
}
.supplier-table th:first-child { border-radius: 10px 0 0 0; }
.supplier-table th:last-child  { border-radius: 0 10px 0 0; }
.shopping-table th:first-child { border-radius: 10px 0 0 0; }
.shopping-table th:last-child  { border-radius: 0 10px 0 0; }

.supplier-table td,
.shopping-table td {
    padding: 10px 14px;
    border-bottom: 1px solid rgba(var(--primary-rgb), 0.06);
    vertical-align: middle;
    color: var(--text-dark);
}
.supplier-table tr:hover td,
.shopping-table tr:hover td {
    background: rgba(var(--primary-rgb), 0.03);
}

.shopping-thumb {
    width: 52px;
    height: 52px;
    object-fit: cover;
    border-radius: 8px;
    border: 1px solid rgba(var(--primary-rgb), 0.1);
}

.btn-add-row {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 1rem;
    background: rgba(var(--primary-rgb), 0.07);
    color: var(--primary-burgundy);
    border: 1px dashed rgba(var(--primary-rgb), 0.25);
    padding: 10px 20px;
    border-radius: 10px;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.25s ease;
    /* Era 'Inter': sobra de outro desenho, e a unica fonte declarada fora do
       padrao que restou depois da varredura de 12/08 (secao 54). */
    font-family: 'Poppins', sans-serif;
}
.btn-add-row:hover {
    background: var(--primary-burgundy);
    color: #ffffff;
    border-color: var(--primary-burgundy);
}

.btn-generate-pdf {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 1.5rem;
    /* 14/08/2026: era um degrade que clareava ate 78% numa das pontas —
       "estão gradientes". Virou cor cheia, a mesma decisao do Dashboard
       (secao 55) e dos cartoes de Propostas (secao 69). Sao os dois botoes
       de PDF do card do projeto: Fornecedores e Especificacoes. */
    background: var(--primary-burgundy);
    color: #ffffff;
    border: none;
    padding: 12px 28px;
    border-radius: 12px;
    font-size: 0.82rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: 'Poppins', sans-serif;
    letter-spacing: 0.5px;
    box-shadow: 0 4px 14px rgba(var(--primary-rgb), 0.25);
}
.btn-generate-pdf:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(var(--primary-rgb), 0.35);
}

.btn-remove-row {
    background: none;
    border: none;
    color: #c0392b;
    cursor: pointer;
    font-size: 0.85rem;
    padding: 4px 8px;
    border-radius: 6px;
    transition: all 0.2s ease;
}
.btn-remove-row:hover {
    background: rgba(192, 57, 43, 0.1);
}

.shopping-link {
    color: var(--primary-burgundy);
    font-size: 0.75rem;
    font-weight: 600;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    background: rgba(var(--primary-rgb), 0.06);
    border-radius: 6px;
    transition: all 0.2s ease;
}
.shopping-link:hover {
    background: rgba(var(--primary-rgb), 0.12);
}

/* ═══════════════════════════════════════════════════════ */
/* TEMPLATE DE IMPRESSÃO PDF EDITORIAL                    */
/*                                                         */
/* Reescrito em 10/08/2026. Antes a folha era 'Inter',     */
/* 'Georgia', serif — saía com cara de documento serifado, */
/* fora da identidade do resto do sistema. Agora é Poppins */
/* inteira, e o rodapé traz os dados da empresa vindos da  */
/* engrenagem (identidade visual), em vez de um nome fixo  */
/* escrito no código.                                      */
/*                                                         */
/* A cor vem de --pdf-cor, aplicada no elemento pela       */
/* _pdfMoldura a partir do branding: mudar a cor primária  */
/* nas configurações muda o documento junto.               */
/* ═══════════════════════════════════════════════════════ */

.pdf-editorial {
    --pdf-cor: var(--primary-burgundy);
    --pdf-linha: #e6ddd4;
    --pdf-fraco: #7a736d;
    font-family: 'Poppins', 'Segoe UI', sans-serif;
    color: #23201e;
    background: #ffffff;
    padding: 46px 54px 34px;
    max-width: 900px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    min-height: 100%;
    font-size: 0.8rem;
    line-height: 1.5;
}

/* ─── cabeçalho ─────────────────────────────────────────── */
.pdf-editorial .pdf-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 2rem;
    border-bottom: 2px solid var(--pdf-cor);
    padding-bottom: 16px;
    margin-bottom: 34px;
}
.pdf-editorial .pdf-logo {
    height: 46px;
    width: auto;
    object-fit: contain;
}
.pdf-editorial .pdf-header-info {
    text-align: right;
    line-height: 1.35;
    min-width: 0;
}
.pdf-editorial .pdf-header-info strong {
    display: block;
    font-size: 0.95rem;
    font-weight: 600;
    color: #23201e;
    letter-spacing: 0.01em;
}
.pdf-editorial .pdf-header-info span {
    display: block;
    font-size: 0.72rem;
    font-weight: 400;
    color: var(--pdf-fraco);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-top: 2px;
}

/* ─── título ────────────────────────────────────────────── */
.pdf-editorial .pdf-titulo-bloco {
    text-align: center;
    margin-bottom: 2.4rem;
}
.pdf-editorial .pdf-titulo-bloco h2 {
    font-family: 'Poppins', sans-serif;
    font-size: 1.02rem;
    font-weight: 600;
    color: var(--pdf-cor);
    text-transform: uppercase;
    letter-spacing: 0.18em;
    margin: 0;
    padding: 0;
    border: none;
}
/* Filete curto sob o título: separa sem a régua de ponta a ponta,
   que competia com a linha do cabeçalho logo acima. */
.pdf-editorial .pdf-titulo-bloco h2::after {
    content: '';
    display: block;
    width: 46px;
    height: 2px;
    background: var(--pdf-cor);
    opacity: 0.35;
    margin: 10px auto 0;
}
.pdf-editorial .pdf-subtitulo {
    font-size: 0.72rem;
    color: var(--pdf-fraco);
    margin: 9px 0 0;
    font-weight: 400;
}

.pdf-editorial .pdf-content {
    flex: 1;
}

/* ─── grupos e tabelas ──────────────────────────────────── */
.pdf-editorial .pdf-grupo {
    margin-bottom: 2.1rem;
}
.pdf-editorial .pdf-grupo-titulo {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-family: 'Poppins', sans-serif;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--pdf-cor);
    text-transform: uppercase;
    letter-spacing: 0.13em;
    margin: 0 0 0.7rem;
    padding-bottom: 5px;
    border-bottom: 1px solid var(--pdf-linha);
}
.pdf-editorial .pdf-grupo-titulo span {
    font-size: 0.64rem;
    font-weight: 400;
    letter-spacing: 0.04em;
    text-transform: none;
    color: var(--pdf-fraco);
}

.pdf-editorial table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.74rem;
}
.pdf-editorial table th {
    background: var(--pdf-cor);
    color: #fff;
    text-transform: uppercase;
    font-size: 0.58rem;
    letter-spacing: 0.11em;
    font-weight: 600;
    padding: 9px 11px;
    text-align: left;
}
.pdf-editorial table td {
    padding: 9px 11px;
    border-bottom: 1px solid #f0eae4;
    vertical-align: middle;
}
.pdf-editorial table tr:nth-child(even) td {
    background: #fbf9f7;
}
/* Números alinhados à direita e com dígitos de largura fixa: é o que
   faz duas colunas de preço poderem ser comparadas de relance. */
.pdf-editorial .pdf-num {
    text-align: right;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.pdf-editorial .pdf-col-escolha { width: 54px; text-align: center; }
.pdf-editorial .pdf-col-prazo { width: 96px; }
.pdf-editorial .pdf-forn-nome { font-weight: 600; display: block; }
.pdf-editorial .pdf-forn-sub {
    display: block;
    font-size: 0.63rem;
    color: var(--pdf-fraco);
    margin-top: 1px;
}
.pdf-editorial .pdf-valor { font-weight: 600; color: var(--pdf-cor); }
.pdf-editorial .pdf-obs { color: var(--pdf-fraco); font-size: 0.68rem; }
.pdf-editorial .pdf-selo-menor {
    display: inline-block;
    font-size: 0.52rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    background: var(--secondary-champagne, #D9C5B2);
    color: #5a4632;
    border-radius: 3px;
    padding: 1px 5px;
    margin-left: 6px;
    vertical-align: middle;
}
.pdf-editorial .pdf-check-circle {
    display: inline-block;
    width: 15px;
    height: 15px;
    border: 1.5px solid var(--pdf-cor);
    border-radius: 50%;
    vertical-align: middle;
}
.pdf-editorial .pdf-instrucao {
    font-size: 0.68rem;
    color: var(--pdf-fraco);
    font-style: italic;
    text-align: center;
    margin: 1.6rem 0 0;
    padding-top: 0.9rem;
    border-top: 1px dashed var(--pdf-linha);
}
.pdf-editorial .pdf-vazio {
    text-align: center;
    padding: 2.5rem 1rem;
    color: var(--pdf-fraco);
    font-style: italic;
    font-size: 0.78rem;
}

/* ─── fichas de especificação ───────────────────────────── */
.pdf-editorial .pdf-item-card {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 12px 0;
    border-bottom: 1px solid #f0eae4;
}
.pdf-editorial .pdf-item-card img {
    width: 62px;
    height: 62px;
    object-fit: cover;
    border-radius: 6px;
    border: 1px solid var(--pdf-linha);
    flex: none;
}
.pdf-editorial .pdf-item-sem-foto {
    width: 62px;
    height: 62px;
    border-radius: 6px;
    border: 1px dashed var(--pdf-linha);
    background: #fbf9f7;
    flex: none;
}
.pdf-editorial .pdf-item-info { flex: 1; min-width: 0; }
.pdf-editorial .pdf-item-name {
    font-weight: 600;
    font-size: 0.8rem;
    color: #23201e;
}
.pdf-editorial .pdf-item-env {
    font-size: 0.63rem;
    color: var(--pdf-fraco);
    text-transform: uppercase;
    letter-spacing: 0.09em;
    margin-top: 1px;
}
/* Os pares "rótulo: valor" da ficha técnica. Em linha, separados por
   ponto médio: ocupam menos folha do que uma lista e continuam legíveis. */
.pdf-editorial .pdf-item-specs {
    display: flex;
    flex-wrap: wrap;
    gap: 2px 14px;
    margin-top: 5px;
}
.pdf-editorial .pdf-spec {
    font-size: 0.67rem;
    color: #4a4440;
}
.pdf-editorial .pdf-spec b {
    font-weight: 600;
    color: var(--pdf-fraco);
    text-transform: uppercase;
    font-size: 0.58rem;
    letter-spacing: 0.07em;
    margin-right: 3px;
}
.pdf-editorial .pdf-item-obs {
    font-size: 0.66rem;
    color: var(--pdf-fraco);
    font-style: italic;
    margin-top: 4px;
}
.pdf-editorial .pdf-item-preco {
    text-align: right;
    white-space: nowrap;
    flex: none;
    min-width: 108px;
    font-variant-numeric: tabular-nums;
}
.pdf-editorial .pdf-item-total {
    font-weight: 600;
    font-size: 0.82rem;
    color: var(--pdf-cor);
}
.pdf-editorial .pdf-item-unit {
    display: block;
    font-size: 0.62rem;
    color: var(--pdf-fraco);
    margin-top: 1px;
}
.pdf-editorial .pdf-grupo-total {
    text-align: right;
    font-size: 0.72rem;
    color: var(--pdf-fraco);
    padding-top: 8px;
    font-variant-numeric: tabular-nums;
}
.pdf-editorial .pdf-grupo-total b {
    color: var(--pdf-cor);
    font-size: 0.82rem;
    font-weight: 600;
    margin-left: 6px;
}
.pdf-editorial .pdf-total-geral {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-top: 1.8rem;
    padding: 13px 16px;
    background: #fbf9f7;
    border: 1px solid var(--pdf-linha);
    border-left: 3px solid var(--pdf-cor);
    border-radius: 4px;
    font-variant-numeric: tabular-nums;
}
.pdf-editorial .pdf-total-geral span {
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--pdf-fraco);
    font-weight: 600;
}
.pdf-editorial .pdf-total-geral strong {
    font-size: 1.05rem;
    color: var(--pdf-cor);
    font-weight: 600;
}

/* ─── rodapé com os dados da empresa ────────────────────── */
.pdf-editorial .pdf-footer {
    margin-top: 2.6rem;
    padding-top: 0.9rem;
    border-top: 1px solid var(--pdf-linha);
    text-align: center;
}
.pdf-editorial .pdf-rod-nome {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--pdf-cor);
    text-transform: uppercase;
    letter-spacing: 0.14em;
}
.pdf-editorial .pdf-rod-contatos {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 3px 10px;
    margin-top: 4px;
    font-size: 0.66rem;
    color: #4a4440;
}
/* Ponto médio como separador, menos o do primeiro item. */
.pdf-editorial .pdf-rod-contatos span + span::before {
    content: '·';
    margin-right: 10px;
    color: var(--pdf-linha);
}
.pdf-editorial .pdf-rod-data {
    margin-top: 6px;
    font-size: 0.6rem;
    color: #a49c95;
    letter-spacing: 0.03em;
}

/* ─── regras de impressão ───────────────────────────────── */
@page {
    size: A4;
    margin: 12mm 10mm;
}
@media print {
    .pdf-editorial {
        padding: 0;
        max-width: none;
        font-size: 9pt;
    }
    /* O cabeçalho da tabela se repete em toda folha nova — sem isto,
       a segunda página de uma lista longa sai sem dizer o que é cada coluna. */
    .pdf-editorial table thead { display: table-header-group; }
    .pdf-editorial table tr,
    .pdf-editorial .pdf-item-card { break-inside: avoid; page-break-inside: avoid; }
    .pdf-editorial .pdf-grupo-titulo { break-after: avoid; page-break-after: avoid; }
    .pdf-editorial .pdf-footer { break-inside: avoid; page-break-inside: avoid; }
    /* Cores de fundo (faixa do cabeçalho, zebra) só saem impressas com isto. */
    .pdf-editorial, .pdf-editorial * {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
}


/* ==========================================================================
   MÓDULO DE GESTÃO DE PROJETOS - PIPELINE KANBAN 4 COLUNAS
   ========================================================================== */

.crm-kanban-board {
    display: flex;
    gap: 1rem;
    width: 100%;
    box-sizing: border-box;
    align-items: flex-start;
    overflow-x: auto;
    padding-bottom: 15px;
}

.crm-kanban-column {
    background: #f8f7f6;
    border-radius: 14px;
    padding: 14px 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    box-sizing: border-box;
    border: 1px solid rgba(0, 0, 0, 0.03);
    border-top: 2px solid var(--primary-burgundy); /* Borda superior padronizada com a marca */
    transition: box-shadow 0.2s ease;
    min-height: 300px;
    min-width: 270px;
    flex: 0 0 270px;
}

.crm-kanban-column:hover {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
}

.crm-kanban-column-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 10px;
    border-bottom: 1.5px solid rgba(0, 0, 0, 0.04);
    margin-bottom: 4px;
}

.crm-kanban-column-header h4 {
    font-size: 0.78rem;
    font-weight: 700;
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--text-dark); /* Texto escuro elegante */
}

.crm-kanban-column-header h4 i {
    color: var(--primary-burgundy); /* Ícone no tom da marca */
}

.crm-kanban-column-count {
    font-size: 0.68rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 10px;
    min-width: 24px;
    text-align: center;
    background: rgba(var(--primary-rgb), 0.05); /* Fundo suave da cor da marca */
    color: var(--primary-burgundy); /* Texto da cor da marca */
}

.crm-kanban-column-body {
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1;
}

/* Cartões dos projetos no Kanban */
.crm-kanban-card {
    background: white;
    border-radius: 10px;
    padding: 12px;
    border: 1px solid rgba(0, 0, 0, 0.04);
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
    gap: 6px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.02);
}

.crm-kanban-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06);
    border-color: rgba(var(--primary-rgb), 0.15); /* Bordas em tom burgundy ao passar o mouse */
}

.crm-kanban-card:active {
    transform: translateY(0);
}

.crm-kanban-card-title {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--text-dark);
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.crm-kanban-card-client {
    font-size: 0.7rem;
    color: var(--text-light);
    font-weight: 400;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}

.crm-kanban-card-type {
    font-size: 0.6rem;
    font-weight: 600;
    text-transform: uppercase;
    background: #faf8f5;
    color: #8B7355;
    border: 1px solid rgba(217, 197, 178, 0.25);
    padding: 2px 6px;
    border-radius: 5px;
    letter-spacing: 0.2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: fit-content;
}

/* Etiqueta de etapa atual do projeto com identidade visual minimalista */
.crm-kanban-card-stage {
    font-size: 0.6rem;
    font-weight: 600;
    text-transform: uppercase;
    background: rgba(var(--primary-rgb), 0.04);
    color: var(--primary-burgundy);
    border: 1px solid rgba(var(--primary-rgb), 0.12);
    padding: 2px 6px;
    border-radius: 5px;
    letter-spacing: 0.2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: fit-content;
}

.crm-kanban-card-progress {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 6px;
    border-top: 1px dashed rgba(0, 0, 0, 0.04);
    padding-top: 8px;
}

.crm-kanban-card-progress-bar {
    width: 68%;
    height: 5px;
    background: #f1f0ee;
    border-radius: 3px;
    overflow: hidden;
}

.crm-kanban-card-progress-fill {
    height: 100%;
    border-radius: 3px;
    transition: width 0.3s ease;
    background: var(--primary-burgundy); /* Progresso no tom da marca */
}

.crm-kanban-card-progress-text {
    font-size: 0.66rem;
    font-weight: 700;
    color: var(--primary-burgundy); /* Progresso no tom da marca */
}

.crm-kanban-empty-msg {
    font-size: 0.7rem;
    color: var(--text-light);
    text-align: center;
    padding: 2.5rem 0.5rem;
    border: 1px dashed rgba(0, 0, 0, 0.06);
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.008);
    opacity: 0.7;
}

/* Métricas clicáveis */
.crm-metric-highlight {
    cursor: pointer;
    transition: all 0.2s ease;
    border: 2px solid transparent;
    border-radius: 12px;
}

.crm-metric-highlight:hover {
    border-color: rgba(var(--primary-rgb), 0.15);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
}

.crm-metric-highlight.active {
    border-color: var(--primary-burgundy);
    background: rgba(var(--primary-rgb), 0.02);
    box-shadow: 0 2px 8px rgba(var(--primary-rgb), 0.08);
}

.crm-metric-highlight .value-main {
    color: var(--primary-burgundy); /* Valores das métricas unificados com a marca */
}

/* Responsivo — telas menores */
@media (max-width: 1100px) {
}

@media (max-width: 600px) {
}


/* ==========================================
   NOVO FLUXO DE CAIXA DINÂMICO E MINIMALISTA
   ========================================== */

/* Split layout de Entradas vs Saídas */
.fin-split-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
    margin-top: 1rem;
}

@media (max-width: 991px) {
    .fin-split-container {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }
}

/* Colunas de Entradas e Saídas */
.fin-column-card {
    background: var(--white);
    border-radius: 8px;
    border: 1px solid var(--border-light);
    padding: 0.8rem 1rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.fin-column-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--border-light);
    padding-bottom: 0.6rem;
}

.fin-column-title {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--primary-burgundy);
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Tabelas e elementos das listas */
.fin-table {
    width: 100%;
    border-collapse: collapse;
}

.fin-table th {
    font-size: 0.7rem;
    text-transform: uppercase;
    color: var(--text-light);
    font-weight: 600;
    text-align: left;
    padding: 0.5rem 0.7rem;
    border-bottom: 1px solid var(--border-light);
    letter-spacing: 0.5px;
}

.fin-table td {
    padding: 0.6rem 0.7rem;
    font-size: 0.8rem;
    vertical-align: middle;
    border-bottom: 1px solid #FAF9F8;
    color: var(--text-dark);
}

/* Subseções como "A Receber" ou "Pagas" */
.fin-section-divider {
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--text-light);
    background: #FAF6F5;
    padding: 0.4rem 0.8rem;
    border-radius: 5px;
    margin: 0.8rem 0 0.4rem 0;
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Inputs de data minimalistas na tabela */
.fin-date-input {
    border: 1px solid var(--border-light);
    background: #FAF9F8;
    font-family: inherit;
    font-size: 0.75rem;
    color: var(--text-dark);
    padding: 0.25rem 0.4rem;
    border-radius: 6px;
    cursor: pointer;
    transition: var(--transition);
    width: 110px;
}

.fin-date-input:hover, .fin-date-input:focus {
    border-color: var(--secondary-champagne);
    background: #FFF;
    outline: none;
    box-shadow: 0 0 0 3px rgba(217, 197, 178, 0.2);
}

/* Estilos de Status e Checkbox */
.fin-checkbox {
    width: 14px;
    height: 14px;
    accent-color: var(--primary-burgundy);
    cursor: pointer;
    border-radius: 4px;
    border: 1px solid var(--border-light);
}

.fin-pago-text {
    text-decoration: line-through;
    opacity: 0.6;
}

/* Cards KPI do Topo atualizados */
.fin-kpi-card {
    background: var(--white);
    border-radius: 8px;
    border: 1px solid var(--border-light);
    padding: 0.7rem 0.9rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    overflow: hidden;
    transition: var(--transition);
}

.fin-kpi-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.05);
}

.fin-kpi-title {
    font-size: 0.62rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-light);
    font-weight: 600;
}

.fin-kpi-value {
    font-size: 1.15rem;
    font-weight: 600;
    margin: 0.2rem 0 0.1rem 0;
    color: var(--text-dark);
}

.fin-kpi-sub {
    font-size: 0.62rem;
    color: var(--text-light);
}

/* Gráfico Donut de Categorias */
.donut-container {
    display: flex;
    align-items: center;
    gap: 3rem;
    justify-content: center;
    margin-top: 1rem;
    flex-wrap: wrap;
}

.donut-chart {
    width: 160px;
    height: 160px;
    border-radius: 50%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    background: conic-gradient(#E2E8F0 0% 100%);
    transition: background 0.5s ease;
}

.donut-hole {
    width: 100px;
    height: 100px;
    background: var(--white);
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--text-dark);
    text-transform: uppercase;
    box-shadow: inset 0 2px 5px rgba(0,0,0,0.03);
}

.donut-legend {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 200px;
}

.donut-legend-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.75rem;
    color: var(--text-dark);
    gap: 12px;
}

.donut-legend-color {
    width: 10px;
    height: 10px;
    border-radius: 3px;
    display: inline-block;
}

/* Barra de proporção e cobertura minimalista */
.fin-bar-container {
    background: var(--white);
    border: 1px solid var(--border-light);
    border-radius: 8px;
    padding: 0.8rem 1rem;
    margin-bottom: 1rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
}

.fin-progress-track {
    height: 8px;
    border-radius: 8px;
    background: #F1F3F5;
    overflow: hidden;
    display: flex;
}

.fin-progress-bar {
    height: 100%;
    transition: width 0.5s ease;
    color: transparent !important;
    text-shadow: none !important;
    overflow: hidden;
}

/* Banner de Saldo Minimalista */
.fin-status-banner {
    padding: 0.6rem 0.8rem;
    border-radius: 8px;
    font-size: 0.75rem;
    font-weight: 500;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 1rem;
    transition: var(--transition);
}

.fin-status-banner.positive {
    background: #F2F7F5;
    color: #3D5A4C;
    border: 1px solid #C5D9CE;
}

.fin-status-banner.negative {
    background: #FEF2F2;
    color: #991B1B;
    border: 1px solid #FEE2E2;
}

/* Forçar fonte Poppins em todos os elementos da aba financeira e modal de acessos */
#financeiro-section, 
#financeiro-section *, 
.fin-kpi-card, 
.fin-kpi-card *,
.fin-bar-container, 
.fin-bar-container *,
.fin-split-container, 
.fin-split-container *,
.fin-date-input,
.fin-checkbox,
#fin-month-filter,
#wid-saldo-atual,
#entradas-previsto-box,
#entradas-previsto-box *,
.btn-toggle,
.btn-toggle *,
#team-access-modal,
#team-access-modal * {
    font-family: 'Poppins', sans-serif !important;
}

/* Proteção para garantir que ícones do Font Awesome nunca percam sua fonte por resets de tipografia */
.fa, .fas, .far, .fab, i.fa, i.fas, i.far, i.fab {
    font-family: 'Font Awesome 5 Free', 'Font Awesome 6 Free', 'Font Awesome 5 Brands', sans-serif !important;
    font-weight: 900 !important;
}

/* A protecao acima NAO alcancava os tres blocos logo acima que usam "#id *":
   seletor com # pesa mais que seletor de classe, e nem !important desempata
   isso. Resultado: 5 icones do Financeiro sairam como LETRA em vez de icone
   ("Novo Lancamento", "+ Extra" x2, "Exportar CSV", "Lancamento Avulso").
   Defeito antigo, achado ao medir a fonte dos botoes. (12/08/2026, secao 54) */
#financeiro-section .fa, #financeiro-section .fas, #financeiro-section .far, #financeiro-section .fab,
#entradas-previsto-box .fa, #entradas-previsto-box .fas, #entradas-previsto-box .far, #entradas-previsto-box .fab,
#team-access-modal .fa, #team-access-modal .fas, #team-access-modal .far, #team-access-modal .fab {
    font-family: 'Font Awesome 5 Free', 'Font Awesome 6 Free', 'Font Awesome 5 Brands', sans-serif !important;
    font-weight: 900 !important;
}

/* Switch deslizante minimalista para permissões */
.fin-switch {
    position: relative;
    display: inline-block;
    width: 34px;
    height: 18px;
}

.fin-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.fin-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #E2E8F0;
    transition: .3s ease;
    border-radius: 20px;
}

.fin-slider:before {
    position: absolute;
    content: "";
    height: 12px;
    width: 12px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: .3s ease;
    border-radius: 50%;
}

.fin-switch input:checked + .fin-slider {
    background-color: var(--primary-burgundy);
}

.fin-switch input:checked + .fin-slider:before {
    transform: translateX(16px);
}

/* Tags de Acesso da Tabela de Equipe */
.tag-access {
    font-size: 0.65rem;
    font-weight: 500;
    padding: 2px 6px;
    border-radius: 4px;
    display: inline-block;
    margin: 2px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.tag-access.full {
    background: #FAF6F5;
    color: var(--primary-burgundy);
    border: 1px solid rgba(var(--primary-rgb), 0.12);
}

.tag-access.none {
    background: #FAF9F8;
    color: var(--text-light);
    border: 1px solid var(--border-light);
}

.tag-access.limited {
    background: #F7F5F0;
    color: #8B7355; /* Tom champagne envelhecido sutil para acesso limitado */
    border: 1px solid rgba(217, 197, 178, 0.3);
}

/* Classes para visualização limpa e minimalista da aba de Dados */
.dados-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-top: 0.5rem;
}

.dados-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 0.6rem;
    border-bottom: 1px solid #F5F5F5;
    font-size: 0.85rem;
}

.dados-row:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.dados-label {
    color: var(--text-light);
    font-weight: 500;
}

.dados-value {
    color: var(--text-dark);
    font-weight: 500;
    text-align: right;
}

/* Prazos do Projeto - Layout minimalista e simétrico */
.prazo-item-row {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 12px;
}

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

.prazo-item-label {
    font-size: 0.65rem;
    font-weight: 600;
    color: var(--text-light);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.prazo-inputs-container {
    display: flex;
    gap: 6px;
    align-items: center;
}

.prazo-input-date {
    flex: 1;
    padding: 6px 10px;
    font-size: 0.75rem;
    border: 1px solid var(--border-light);
    border-radius: 6px;
    background: #FAFAFA;
    color: var(--text-dark);
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
    font-family: inherit;
}

.prazo-input-date:focus {
    border-color: var(--primary-burgundy);
    box-shadow: 0 0 0 2px rgba(var(--primary-rgb), 0.05);
}

.prazo-input-rev {
    width: 80px;
    padding: 6px 8px;
    font-size: 0.75rem;
    border: 1px solid var(--border-light);
    border-radius: 6px;
    background: #FAFAFA;
    color: var(--text-dark);
    text-align: center;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
    font-family: inherit;
}

.prazo-input-rev:focus {
    border-color: var(--primary-burgundy);
    box-shadow: 0 0 0 2px rgba(var(--primary-rgb), 0.05);
}

/* Badges de Situação CRM */
.badge {
    display: inline-block;
    padding: 4px 10px;
    font-size: 0.72rem;
    font-weight: 600;
    border-radius: 20px;
    text-align: center;
}
.badge-gray {
    background-color: #F1F5F9;
    color: #475569;
    border: 1px solid #CBD5E1;
}
.badge-blue {
    background-color: #E0F2FE;
    color: #0369A1;
    border: 1px solid #BAE6FD;
}
.badge-purple {
    background-color: #F3E8FF;
    color: #6B21A8;
    border: 1px solid #E9D5FF;
}
.badge-yellow {
    background-color: #FEF9C3;
    color: #854D0E;
    border: 1px solid #FEF08A;
}
.badge-green {
    background-color: #DCFCE7;
    color: #166534;
    border: 1px solid #BBF7D0;
}
.badge-red {
    background-color: #FEE2E2;
    color: #991B1B;
    border: 1px solid #FECACA;
}

/* Tabelas e Formulários adicionais do CRM */
.clean-table th {
    padding: 12px 10px !important;
    border-bottom: 2px solid var(--border-light) !important;
}
.clean-table td {
    padding: 14px 10px !important;

}

/* --- DRAG & DROP DE ETAPAS --- */
.drag-handle {
    color: var(--text-light);
    margin-right: 12px;
    cursor: grab;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    padding: 4px;
    border-radius: 4px;
    transition: background-color 0.2s;
}
.drag-handle:hover {
    background-color: var(--bg-offwhite);
    color: var(--primary-burgundy);
}
.drag-handle:active {
    cursor: grabbing;
}
.stage-card.dragging {
    opacity: 0.5;
    border: 2px dashed var(--primary-burgundy) !important;
}
.stage-card.drag-over {
    border: 2px dashed var(--secondary-champagne) !important;
    background-color: var(--bg-offwhite);
    transform: scale(0.99);
}

/* ==========================================
   TEMA ESCURO (DARK MODE)
   ========================================== */
body.dark-theme {
    background-color: #121212 !important;
    color: #F5F5F5 !important;
}

body.dark-theme :root {
    --text-dark: #F5F5F5;
    --text-light: #A0AEC0;
    --bg-offwhite: #121212;
    --border-light: #2D3748;
    --white: #1E1E1E;
}

body.dark-theme .navbar {
    background-color: #181818 !important;
    border-bottom: 1px solid #2D3748 !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15) !important;
}

body.dark-theme .sidebar {
    background-color: #181818 !important;
    border-right: 1px solid #2D3748 !important;
}

body.dark-theme .sidebar-menu-item {
    color: #A0AEC0 !important;
}

body.dark-theme .sidebar-menu-item:hover,
body.dark-theme .sidebar-menu-item.active {
    background-color: #2D3748 !important;
    color: #FFFFFF !important;
}

body.dark-theme .card,
body.dark-theme .dashboard-grid .card,
body.dark-theme .board-note-card,
body.dark-theme .metas-list-card,
body.dark-theme .project-card-horizontal,
body.dark-theme .project-stage-card,
body.dark-theme .stage-card,
body.dark-theme .comment-form-container {
    background: #1e1e1e !important;
    border-color: #2D3748 !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15) !important;
    color: #F5F5F5 !important;
}

body.dark-theme .notion-menu-card {
    background-color: #2A2222 !important;
}

body.dark-theme .notion-menu-card span {
    color: #FFCCCC !important;
}

body.dark-theme .notion-menu-card:hover {
    background-color: #3D2F2F !important;
}

body.dark-theme .modal-card,
body.dark-theme .modal-content,
body.dark-theme .custom-prompt-container {
    background: #1E1E1E !important;
    border-color: #2D3748 !important;
    color: #F5F5F5 !important;
}

body.dark-theme input[type="text"],
body.dark-theme input[type="number"],
body.dark-theme input[type="email"],
body.dark-theme input[type="date"],
body.dark-theme input[type="time"],
body.dark-theme input[type="password"],
body.dark-theme select,
body.dark-theme textarea,
body.dark-theme .budget-item-input {
    background: #252525 !important;
    color: #FFFFFF !important;
    border: 1px solid #4A5568 !important;
}

body.dark-theme input::placeholder,
body.dark-theme textarea::placeholder {
    color: #718096 !important;
}

body.dark-theme label,
body.dark-theme .form-group label {
    color: #E2E8F0 !important;
}

body.dark-theme .kanban-column {
    background: #181818 !important;
    border-color: #2D3748 !important;
}

body.dark-theme .kanban-card {
    background: #252525 !important;
    color: #FFFFFF !important;
    border-color: #4A5568 !important;
}

body.dark-theme .kanban-card h4 {
    color: #FFFFFF !important;
}

body.dark-theme table th {
    background: #252525 !important;
    color: #FFFFFF !important;
    border-color: #4A5568 !important;
}

body.dark-theme table td {
    border-color: #2D3748 !important;
    color: #E2E8F0 !important;
}

body.dark-theme .btn-toggle {
    background: #2D3748 !important;
    color: #FFFFFF !important;
    border-color: #4A5568 !important;
}

body.dark-theme .header-title,
body.dark-theme .card-title-main,
body.dark-theme h1,
body.dark-theme h2,
body.dark-theme h3,
body.dark-theme h4,
body.dark-theme h5 {
    color: #FFFFFF !important;
}

body.dark-theme .notion-page-title,
body.dark-theme .notion-page-subtitle {
    color: #FFFFFF !important;
}

body.dark-theme .tab-btn {
    color: #A0AEC0 !important;
}

body.dark-theme .tab-btn.active {
    color: #FFFFFF !important;
    border-bottom-color: #FFFFFF !important;
}

body.dark-theme .comment-author-name {
    color: #FFCCCC !important;
}

body.dark-theme .text-dark {
    color: #F5F5F5 !important;
}

/* ── Módulo Backstage ── */
.backstage-container {
    width: 100%;
    margin-top: 1.5rem;
}

.backstage-metrics {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.backstage-project-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 1.5rem;
    margin-top: 1.5rem;
}

.backstage-project-card {
    background: #FFFFFF;
    padding: 1.5rem;
    border-radius: 16px;
    border: 1px solid var(--border-light);
    border-left: 5px solid var(--primary-burgundy); /* COR VINHO SOLICITADA */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.02);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

body.dark-theme .backstage-project-card {
    background: #1e1e24 !important;
    border-color: #2d2d34 !important;
}

.backstage-project-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 30px rgba(var(--primary-rgb), 0.06);
    border-color: var(--primary-burgundy);
}

.backstage-partner-name {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--primary-burgundy);
    font-weight: 700;
}

body.dark-theme .backstage-partner-name {
    color: #ffcccc !important;
}

.backstage-project-name {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 2px;
}

body.dark-theme .backstage-project-name {
    color: #ffffff !important;
}

.backstage-tags {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 4px;
}

.backstage-tag {
    font-size: 0.62rem;
    font-weight: 600;
    padding: 2px 10px;
    border-radius: 12px;
    text-transform: uppercase;
}

.backstage-tag-render {
    background: rgba(139, 92, 246, 0.1);
    color: #7c3aed;
    border: 1px solid rgba(139, 92, 246, 0.2);
}

.backstage-tag-3d {
    background: rgba(66, 153, 225, 0.1);
    color: #3182ce;
    border: 1px solid rgba(66, 153, 225, 0.2);
}

.backstage-tag-marcenaria {
    background: rgba(221, 107, 32, 0.1);
    color: #dd6b20;
    border: 1px solid rgba(221, 107, 32, 0.2);
}

.backstage-tag-obra {
    background: rgba(72, 187, 120, 0.1);
    color: #38a169;
    border: 1px solid rgba(72, 187, 120, 0.2);
}

.backstage-tag-layout {
    background: rgba(236, 72, 153, 0.1);
    color: #db2777;
    border: 1px solid rgba(236, 72, 153, 0.2);
}

.backstage-progress-wrapper {
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.backstage-progress-info {
    display: flex;
    justify-content: space-between;
    font-size: 0.7rem;
    color: var(--text-light);
    font-weight: 500;
}

body.dark-theme .backstage-progress-info {
    color: #a0aec0 !important;
}

.backstage-progress-bar {
    background: #EDE6DF;
    height: 4px;
    border-radius: 2px;
    overflow: hidden;
}

body.dark-theme .backstage-progress-bar {
    background: #2d2d34 !important;
}

.backstage-progress-fill {
    background: var(--primary-burgundy);
    height: 100%;
    width: 0%;
    transition: width 0.3s ease;
}

.backstage-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 12px;
    border-top: 1px dashed var(--border-light);
    padding-top: 10px;
}

body.dark-theme .backstage-card-footer {
    border-top-color: #2d2d34 !important;
}

.backstage-value {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-dark);
}

body.dark-theme .backstage-value {
    color: #ffffff !important;
}

.backstage-btn-timer {
    background: var(--primary-burgundy);
    color: white;
    border: none;
    padding: 6px 12px;
    border-radius: 8px;
    font-size: 0.7rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 5px;
    transition: var(--transition);
}

.backstage-btn-timer.active {
    background: #e53e3e;
}

.backstage-btn-timer:hover {
    opacity: 0.9;
}

/* ==========================================================================
   ESTILOS ADICIONAIS DO PAINEL DO PARCEIRO E TABS INTERNAS
   ========================================================================== */

.internal-tabs {
    border-bottom: 2px solid var(--border-light, #e2e8f0);
}

body.dark-theme .internal-tabs {
    border-bottom-color: #2d2d34 !important;
}

body.dark-theme .internal-tabs .tab-item {
    color: #a0aec0 !important;
}

body.dark-theme .internal-tabs .tab-item.active {
    color: #ffffff !important;
    border-bottom-color: var(--primary-burgundy) !important;
}

body.dark-theme #partner-data-form {
    background: #1e1e24 !important;
    border-color: #2d2d34 !important;
}

body.dark-theme #partner-data-form label {
    color: #e2e8f0 !important;
}

body.dark-theme #partner-data-form input {
    background: #15151a !important;
    border-color: #2d2d34 !important;
    color: #ffffff !important;
}

body.dark-theme #backstage-partner-modal .modal-content,
body.dark-theme #backstage-project-modal .modal-content {
    background: #1a1a1f !important;
    color: #ffffff !important;
}

body.dark-theme #backstage-partner-modal input,
body.dark-theme #backstage-project-modal input,
body.dark-theme #backstage-project-modal select {
    background: #15151a !important;
    border-color: #2d2d34 !important;
    color: #ffffff !important;
}

body.dark-theme #backstage-checklist-items {
    background: #15151a !important;
    border-color: #2d2d34 !important;
}

body.dark-theme .crm-kanban-column {
    background: #18181c !important;
    border-color: #2d2d34 !important;
}

body.dark-theme .crm-kanban-column-header h4 {
    color: #ffffff !important;
}

body.dark-theme .crm-kanban-card {
    background: #222228 !important;
    border-color: #2d2d34 !important;
}

body.dark-theme .crm-kanban-card-title {
    color: #ffffff !important;
}

body.dark-theme .crm-kanban-column-count {
    background: rgba(255, 255, 255, 0.05) !important;
    color: #ffffff !important;
}



/* === METAS BOARD LAYOUT === */
.metas-board {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
    align-items: start;
    overflow-x: auto;
    padding-bottom: 1rem;
}

.metas-column {
    background: var(--bg-offwhite, #f8f9fa);
    border: 1px solid var(--border-light, #e2e8f0);
    border-radius: 12px;
    padding: 1rem;
    min-height: 400px;
    display: flex;
    flex-direction: column;
}

/* Responsividade básica para o board */
@media (max-width: 1024px) {
    .metas-board {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 768px) {
    .metas-board {
        grid-template-columns: 1fr;
    }
}

body.dark-theme .metas-column {
    background: var(--bg-dark-secondary, #2a2a2a);
    border-color: rgba(255, 255, 255, 0.1);
}

/* ═══════════════════════════════════════════════════════════════
   DUAL VIEW SYSTEM — Toggle + Cronograma Gantt
   ═══════════════════════════════════════════════════════════════ */

/* ─── Toggle Pilula ─── */
.dual-view-toggle-wrapper {
    display: flex;
    justify-content: flex-start;
    margin: 0.5rem 0 0.3rem;
}

.dual-view-toggle {
    position: relative;
    display: inline-flex;
    background: #f1ede8;
    border-radius: 50px;
    padding: 2px;
    gap: 0;
    box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.05);
    border: 1px solid var(--border-light);
}

.dv-btn {
    position: relative;
    z-index: 2;
    border: none;
    background: transparent;
    padding: 4px 12px;
    font-family: 'Poppins', sans-serif;
    font-size: 0.6rem;
    font-weight: 600;
    color: var(--text-light);
    cursor: pointer;
    transition: color 0.35s ease;
    display: flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
    border-radius: 50px;
    letter-spacing: 0.2px;
}

.dv-btn i {
    font-size: 0.52rem;
    transition: color 0.35s ease;
}

.dv-btn.active {
    color: white;
}

.dv-btn:not(.active):hover {
    color: var(--primary-burgundy);
}

.dv-slider {
    position: absolute;
    top: 2px;
    left: 2px;
    height: calc(100% - 4px);
    width: calc(50% - 2px);
    background: var(--primary-burgundy);
    border-radius: 50px;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 1;
    box-shadow: 0 2px 8px rgba(var(--primary-rgb), 0.3);
}

.dv-slider.right {
    transform: translateX(100%);
}

/* ─── Paineis de Visao (Transicao Suave) ─── */
.dual-view-pane {
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    transition: opacity 0.45s ease, max-height 0.01s ease 0.45s;
    pointer-events: none;
}

.dual-view-pane.active {
    opacity: 1;
    max-height: none;
    overflow: visible;
    transition: opacity 0.45s ease 0.05s;
    pointer-events: auto;
}

/* ─── Cronograma Container Principal ───
   Mesmo envelope que .notion-dashboard-wrapper já usa pra desfazer a margem
   negativa do #home-section (que existe pra a capa/banner sangrar até a
   borda) — sem isso, só a Visão Cronograma ficava colada nas laterais. */
.cronograma-container {
    padding: 0 4rem 2rem;
    max-width: 1050px;
    margin: 0 auto;
    box-sizing: border-box;
    animation: fadeInCronograma 0.5s ease;
}

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

/* ─── Cronograma Controles do Topo ─── */
.cronograma-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
    gap: 1rem;
}

.cronograma-nav {
    display: flex;
    align-items: center;
    gap: 10px;
}

.cronograma-nav-btn {
    background: white;
    border: 1px solid var(--border-light);
    width: 34px;
    height: 34px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--text-light);
    font-size: 0.75rem;
    transition: all 0.2s;
}

.cronograma-nav-btn:hover {
    background: var(--primary-burgundy);
    color: white;
    border-color: var(--primary-burgundy);
    transform: scale(1.05);
}

.cronograma-period-label {
    font-weight: 600;
    font-size: 0.88rem;
    color: var(--text-dark);
    min-width: 200px;
    text-align: center;
}

.cronograma-mode-toggle {
    display: flex;
    background: #f1ede8;
    border-radius: 8px;
    padding: 3px;
    border: 1px solid var(--border-light);
}

.cronograma-mode-btn {
    border: none;
    background: transparent;
    padding: 6px 16px;
    font-family: 'Poppins', sans-serif;
    font-size: 0.68rem;
    font-weight: 600;
    color: var(--text-light);
    cursor: pointer;
    border-radius: 6px;
    transition: all 0.25s;
}

.cronograma-mode-btn.active {
    background: white;
    color: var(--primary-burgundy);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

/* ─── Cronograma Tabela Gantt ─── */
.gantt-wrapper {
    background: white;
    border-radius: 16px;
    border: 1px solid var(--border-light);
    box-shadow: var(--shadow-soft);
    overflow: hidden;
    margin-bottom: 1.5rem;
}

.gantt-table {
    display: grid;
    min-width: 100%;
    overflow-x: auto;
}

.gantt-header {
    display: grid;
    border-bottom: 2px solid var(--border-light);
    background: #faf8f5;
}

.gantt-header-label {
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--text-light);
    text-transform: uppercase;
    letter-spacing: 0.8px;
    border-right: 1px solid var(--border-light);
    min-height: 52px;
    padding-left: 1.2rem;
}

.gantt-header-cell {
    padding: 8px 4px;
    text-align: center;
    font-size: 0.62rem;
    font-weight: 600;
    color: var(--text-light);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-right: 1px solid rgba(226, 232, 240, 0.5);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    min-height: 52px;
    transition: background 0.2s;
}

.gantt-header-cell .day-number {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-dark);
    line-height: 1;
}

.gantt-header-cell .day-name {
    font-size: 0.55rem;
    color: var(--text-light);
    font-weight: 500;
}

.gantt-header-cell.today {
    background: rgba(var(--primary-rgb), 0.06);
}

.gantt-header-cell.today .day-number {
    color: var(--primary-burgundy);
    background: rgba(var(--primary-rgb), 0.1);
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.gantt-header-cell.weekend {
    background: rgba(0, 0, 0, 0.015);
}

.gantt-row {
    display: grid;
    border-bottom: 1px solid rgba(226, 232, 240, 0.6);
    transition: background 0.2s;
    min-height: 54px;
}

.gantt-row:hover {
    background: rgba(var(--primary-rgb), 0.015);
}

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

.gantt-project-label {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 10px 1.2rem;
    border-right: 1px solid var(--border-light);
    gap: 1px;
    min-width: 0;
}

.gantt-project-name {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-dark);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.2;
}

.gantt-project-client {
    font-size: 0.62rem;
    color: var(--text-light);
    font-weight: 400;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.gantt-cell {
    position: relative;
    border-right: 1px solid rgba(226, 232, 240, 0.3);
    min-height: 54px;
}

.gantt-cell.today {
    background: rgba(var(--primary-rgb), 0.03);
}

.gantt-cell.weekend {
    background: rgba(0, 0, 0, 0.01);
}

.gantt-bar {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    height: 28px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    padding: 0 10px;
    font-size: 0.6rem;
    font-weight: 600;
    color: white;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    z-index: 2;
    cursor: default;
    transition: filter 0.2s, transform 0.2s;
    min-width: 28px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

.gantt-bar:hover {
    filter: brightness(1.1);
    transform: translateY(-50%) scale(1.02);
    z-index: 5;
}

.gantt-bar.bar-contratacao { background: linear-gradient(135deg, var(--primary-burgundy), rgba(var(--primary-rgb), 0.68)); }
.gantt-bar.bar-levantamento { background: linear-gradient(135deg, #7c5a3a, #a67c52); }
.gantt-bar.bar-estudo { background: linear-gradient(135deg, #2563EB, #3b82f6); }
.gantt-bar.bar-projeto-legal { background: linear-gradient(135deg, #059669, #10B981); }
.gantt-bar.bar-executivo { background: linear-gradient(135deg, #7C3AED, #8B5CF6); }
.gantt-bar.bar-obra { background: linear-gradient(135deg, #D97706, #F59E0B); }
.gantt-bar.bar-final { background: linear-gradient(135deg, #0891B2, #06B6D4); }
.gantt-bar.bar-default { background: linear-gradient(135deg, var(--primary-burgundy), rgba(var(--primary-rgb), 0.72)); }

.gantt-bar .bar-label {
    overflow: hidden;
    text-overflow: ellipsis;
}

.gantt-bar .bar-alert {
    margin-left: 6px;
    font-size: 0.7rem;
    flex-shrink: 0;
}

.gantt-deadline-marker {
    position: absolute;
    top: 4px;
    right: 4px;
    font-size: 0.6rem;
    z-index: 3;
}

.gantt-bar-tooltip {
    display: none;
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    background: #1a1a1a;
    color: white;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 0.68rem;
    font-weight: 400;
    white-space: nowrap;
    z-index: 100;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
    pointer-events: none;
}

.gantt-bar-tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: #1a1a1a;
}

.gantt-bar:hover .gantt-bar-tooltip {
    display: block;
}

.cronograma-empty {
    text-align: center;
    padding: 4rem 2rem;
    color: var(--text-light);
}

.cronograma-empty i {
    font-size: 2.5rem;
    color: var(--secondary-champagne);
    margin-bottom: 1rem;
    display: block;
}

.cronograma-empty p {
    font-size: 0.85rem;
    font-weight: 500;
    margin-bottom: 0.3rem;
}

.cronograma-empty span {
    font-size: 0.72rem;
    color: var(--text-light);
    opacity: 0.7;
}

/* ─── Mapa de Sobrecarga (Heatmap) ─── */
.heatmap-wrapper {
    background: white;
    border-radius: 16px;
    border: 1px solid var(--border-light);
    box-shadow: var(--shadow-soft);
    padding: 1.5rem;
}

.heatmap-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--text-dark);
    margin-bottom: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.heatmap-title i {
    color: var(--primary-burgundy);
    font-size: 0.85rem;
}

.heatmap-grid {
    display: grid;
    gap: 6px;
}

.heatmap-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.heatmap-bar {
    width: 100%;
    height: 32px;
    border-radius: 6px;
    background: #f3f0ec;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.heatmap-bar-fill {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    border-radius: 6px;
    transition: height 0.5s cubic-bezier(0.4, 0, 0.2, 1), background 0.3s;
}

.heatmap-bar-fill.heat-0 { height: 0; background: transparent; }
.heatmap-bar-fill.heat-1 { height: 30%; background: rgba(var(--primary-rgb), 0.15); }
.heatmap-bar-fill.heat-2 { height: 55%; background: rgba(var(--primary-rgb), 0.3); }
.heatmap-bar-fill.heat-3 { height: 80%; background: rgba(var(--primary-rgb), 0.55); }
.heatmap-bar-fill.heat-4 { height: 100%; background: linear-gradient(to top, var(--primary-burgundy), rgba(var(--primary-rgb), 0.68)); }

.heatmap-label {
    font-size: 0.58rem;
    font-weight: 600;
    color: var(--text-light);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.heatmap-count {
    font-size: 0.62rem;
    font-weight: 700;
    color: var(--text-dark);
}

.heatmap-cell.today .heatmap-label {
    color: var(--primary-burgundy);
    font-weight: 700;
}

.heatmap-legend {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 1rem;
    justify-content: flex-end;
}

.heatmap-legend-label {
    font-size: 0.6rem;
    color: var(--text-light);
    font-weight: 500;
}

.heatmap-legend-blocks {
    display: flex;
    gap: 3px;
}

.heatmap-legend-block {
    width: 14px;
    height: 14px;
    border-radius: 3px;
}

/* ─── Cronograma Stats ─── */
.cronograma-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.cronograma-stat-card {
    background: white;
    border-radius: 12px;
    border: 1px solid var(--border-light);
    padding: 1rem 1.2rem;
    box-shadow: var(--shadow-soft);
    display: flex;
    align-items: center;
    gap: 12px;
}

.cronograma-stat-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    flex-shrink: 0;
}

.cronograma-stat-icon.icon-total { background: rgba(var(--primary-rgb), 0.08); color: var(--primary-burgundy); }
.cronograma-stat-icon.icon-atrasado { background: rgba(var(--primary-rgb), 0.12); color: var(--primary-burgundy); }
.cronograma-stat-icon.icon-semana { background: rgba(113, 128, 150, 0.1); color: var(--text-light); }
.cronograma-stat-icon.icon-pico { background: rgba(217, 197, 178, 0.35); color: #8B7355; }

.cronograma-stat-info {
    display: flex;
    flex-direction: column;
}

.cronograma-stat-value {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--text-dark);
    line-height: 1;
}

.cronograma-stat-label {
    font-size: 0.62rem;
    color: var(--text-light);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    margin-top: 2px;
}

/* ─── Dark Theme Dual View ─── */
body.dark-theme .dual-view-toggle {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.1);
}
body.dark-theme .dv-btn { color: rgba(255, 255, 255, 0.5); }
body.dark-theme .dv-btn.active { color: white; }
body.dark-theme .dv-btn:not(.active):hover { color: rgba(255, 255, 255, 0.8); }

body.dark-theme .gantt-wrapper,
body.dark-theme .heatmap-wrapper,
body.dark-theme .cronograma-stat-card {
    background: var(--bg-dark-secondary, #2a2a2a);
    border-color: rgba(255, 255, 255, 0.08);
}
body.dark-theme .gantt-header { background: rgba(255, 255, 255, 0.03); }
body.dark-theme .gantt-header-cell .day-number { color: rgba(255, 255, 255, 0.9); }
body.dark-theme .gantt-header-cell .day-name { color: rgba(255, 255, 255, 0.4); }
body.dark-theme .gantt-header-cell.today .day-number { color: white; background: rgba(var(--primary-rgb), 0.4); }
body.dark-theme .gantt-row { border-bottom-color: rgba(255, 255, 255, 0.05); }
body.dark-theme .gantt-row:hover { background: rgba(255, 255, 255, 0.03); }
body.dark-theme .gantt-project-name { color: rgba(255, 255, 255, 0.9); }
body.dark-theme .gantt-project-client { color: rgba(255, 255, 255, 0.4); }
body.dark-theme .gantt-cell { border-right-color: rgba(255, 255, 255, 0.03); }
body.dark-theme .cronograma-nav-btn { background: var(--bg-dark-secondary, #2a2a2a); border-color: rgba(255, 255, 255, 0.1); color: rgba(255, 255, 255, 0.6); }
body.dark-theme .cronograma-period-label { color: rgba(255, 255, 255, 0.9); }
body.dark-theme .cronograma-mode-toggle { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.08); }
body.dark-theme .cronograma-mode-btn { color: rgba(255, 255, 255, 0.5); }
body.dark-theme .cronograma-mode-btn.active { background: rgba(255, 255, 255, 0.1); color: white; }
body.dark-theme .heatmap-bar { background: rgba(255, 255, 255, 0.06); }
body.dark-theme .cronograma-stat-value { color: rgba(255, 255, 255, 0.95); }
body.dark-theme .gantt-header-label { color: rgba(255, 255, 255, 0.5); border-right-color: rgba(255, 255, 255, 0.08); }
body.dark-theme .gantt-project-label { border-right-color: rgba(255, 255, 255, 0.08); }
body.dark-theme .gantt-header { border-bottom-color: rgba(255, 255, 255, 0.08); }
body.dark-theme .gantt-header-cell { border-right-color: rgba(255, 255, 255, 0.04); }


/* =================================================================
   GANTT v2 - Grid Reestruturada com Coluna Fixa + Barras Flutuantes
   ================================================================= */

.gantt-v2 {
    overflow: hidden;
    border-radius: 16px;
    border: 1px solid var(--border-light);
    box-shadow: var(--shadow-soft);
    background: white;
    margin-bottom: 1.5rem;
}

.gantt-scroll-area {
    overflow-x: auto;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: rgba(var(--primary-rgb), 0.2) transparent;
}

.gantt-scroll-area::-webkit-scrollbar { height: 6px; }
.gantt-scroll-area::-webkit-scrollbar-track { background: transparent; }
.gantt-scroll-area::-webkit-scrollbar-thumb { background: rgba(var(--primary-rgb), 0.2); border-radius: 3px; }

/* --- Cabecalho v2 --- */
.gantt-v2-header {
    display: flex;
    border-bottom: 2px solid var(--border-light);
    background: #faf8f5;
    position: sticky;
    top: 0;
    z-index: 10;
}

.gantt-v2-corner {
    width: 220px;
    min-width: 220px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    padding: 0 1.2rem;
    font-size: 0.68rem;
    font-weight: 700;
    color: var(--text-light);
    text-transform: uppercase;
    letter-spacing: 0.8px;
    border-right: 1px solid var(--border-light);
    min-height: 58px;
    background: #faf8f5;
    position: sticky;
    left: 0;
    z-index: 12;
}

.gantt-v2-header-days {
    display: grid;
    flex: 1;
    min-width: 0;
}

.gantt-v2-hcell {
    padding: 8px 4px;
    text-align: center;
    font-size: 0.62rem;
    font-weight: 600;
    color: var(--text-light);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-right: 1px solid rgba(226, 232, 240, 0.5);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    min-height: 58px;
    transition: background 0.2s;
    position: relative;
}

.gantt-v2-hcell .day-number {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-dark);
    line-height: 1;
}

.gantt-v2-hcell .day-name {
    font-size: 0.52rem;
    color: var(--text-light);
    font-weight: 500;
}

.gantt-v2-hcell.today {
    background: rgba(var(--primary-rgb), 0.06);
}

.gantt-v2-hcell.today .day-number {
    color: white;
    background: var(--primary-burgundy);
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(var(--primary-rgb), 0.3);
}

.gantt-v2-today-badge {
    font-size: 0.48rem;
    font-weight: 700;
    color: var(--primary-burgundy);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 1px;
    animation: todayPulse 2s ease-in-out infinite;
}

@keyframes todayPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

.gantt-v2-hcell.weekend {
    background: rgba(0, 0, 0, 0.02);
}

.gantt-v2-hcell.weekend .day-number {
    color: #b0b0b0;
}

/* --- Corpo v2 --- */
.gantt-v2-row {
    display: flex;
    border-bottom: 1px solid rgba(226, 232, 240, 0.6);
    min-height: 60px;
    transition: background 0.2s;
}

.gantt-v2-row:hover {
    background: rgba(var(--primary-rgb), 0.012);
}

.gantt-v2-row:last-child {
    border-bottom: none;
}

/* --- Coluna fixa (Nome/Fase do Projeto) --- */
.gantt-v2-label {
    width: 220px;
    min-width: 220px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-right: 1px solid var(--border-light);
    background: white;
    position: sticky;
    left: 0;
    z-index: 5;
    transition: background 0.2s;
}

.gantt-v2-row:hover .gantt-v2-label {
    background: rgba(var(--primary-rgb), 0.012);
}

.gantt-v2-label-status {
    width: 4px;
    min-height: 36px;
    border-radius: 2px;
    flex-shrink: 0;
    align-self: stretch;
}

.gantt-v2-label-status.status-andamento {
    background: linear-gradient(180deg, #718096, #A0AEC0);
}

.gantt-v2-label-status.status-atrasado {
    background: linear-gradient(180deg, var(--primary-burgundy), rgba(var(--primary-rgb), 0.68));
    animation: statusPulse 2s ease infinite;
}

@keyframes statusPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}

.gantt-v2-label-status.status-concluido {
    background: linear-gradient(180deg, #B49A7E, #D9C5B2);
}

.gantt-v2-label-info {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
    flex: 1;
}

.gantt-v2-project-name {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-dark);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
}

.gantt-v2-project-phase {
    font-size: 0.62rem;
    color: var(--primary-burgundy);
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    opacity: 0.8;
}

.gantt-v2-project-client {
    font-size: 0.58rem;
    color: var(--text-light);
    font-weight: 400;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* --- Area de celulas + barra flutuante --- */
.gantt-v2-cells-wrapper {
    flex: 1;
    min-width: 0;
    position: relative;
}

.gantt-v2-cells {
    display: grid;
    height: 100%;
}

.gantt-v2-cell {
    border-right: 1px solid rgba(226, 232, 240, 0.3);
    min-height: 60px;
    transition: background 0.15s;
}

.gantt-v2-cell.today {
    background: rgba(var(--primary-rgb), 0.03);
    border-left: 1px dashed rgba(var(--primary-rgb), 0.15);
    border-right: 1px dashed rgba(var(--primary-rgb), 0.15);
}

.gantt-v2-cell.weekend {
    background: repeating-linear-gradient(
        45deg,
        transparent,
        transparent 3px,
        rgba(0, 0, 0, 0.008) 3px,
        rgba(0, 0, 0, 0.008) 6px
    );
}

/* --- Barra Gantt Flutuante --- */
.gantt-v2-bar-container {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    height: 34px;
    z-index: 4;
    cursor: default;
    padding: 0 3px;
    box-sizing: border-box;
}

.gantt-v2-bar {
    width: 100%;
    height: 100%;
    border-radius: 8px;
    display: flex;
    align-items: center;
    padding: 0 12px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
    transition: filter 0.2s, transform 0.2s, box-shadow 0.2s;
}

.gantt-v2-bar:hover {
    filter: brightness(1.1);
    transform: scale(1.03);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
    z-index: 10;
}

/* Cor única das barras — até 09/08/2026 cada fase tinha uma cor própria
   (azul, verde, roxo, laranja, ciano); _getStageColorClass() em
   arthos_app.js sempre devolve 'bar-default' agora, então as outras classes
   ficariam mortas — removidas daqui junto. */
.gantt-v2-bar.bar-default { background: linear-gradient(135deg, var(--primary-burgundy), rgba(var(--primary-rgb), 0.72)); }

/* Barra atrasada — mesmo bordô do sistema, não vermelho */
.gantt-v2-bar.bar-late {
    box-shadow: 0 2px 10px rgba(var(--primary-rgb), 0.35), inset 0 0 0 2px rgba(var(--primary-rgb), 0.5);
}

/* Etapa que não é a atual (já concluída ou planejada pra depois) — visão
   multi-barra do Cronograma, 09/08/2026. Fica visível mas discreta, pra
   etapa atual continuar sendo o foco natural do olho. */
.gantt-v2-bar.bar-secondary {
    opacity: 0.6;
    box-shadow: none;
}
.gantt-v2-bar.bar-secondary:hover {
    opacity: 0.95;
}

/* Indicadores de truncamento */
.gantt-v2-bar.trunc-start { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.gantt-v2-bar.trunc-end { border-top-right-radius: 0; border-bottom-right-radius: 0; }

/* Barra de progresso interna */
.gantt-v2-bar-progress {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background: rgba(255, 255, 255, 0.18);
    border-radius: 8px 0 0 8px;
    transition: width 0.5s ease;
    pointer-events: none;
}

.gantt-v2-bar-label {
    font-size: 0.62rem;
    font-weight: 600;
    color: white;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    position: relative;
    z-index: 2;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

/* Pill de deadline no final da barra */
.gantt-v2-deadline-pill {
    position: relative;
    z-index: 2;
    margin-left: auto;
    padding: 2px 7px;
    background: rgba(255, 255, 255, 0.25);
    border-radius: 10px;
    font-size: 0.55rem;
    font-weight: 700;
    color: white;
    white-space: nowrap;
    flex-shrink: 0;
    backdrop-filter: blur(4px);
}

.gantt-v2-deadline-pill.late {
    background: rgba(var(--primary-rgb), 0.6);
}

.gantt-v2-bar-alert {
    position: relative;
    z-index: 2;
    margin-left: 6px;
    font-size: 0.7rem;
    flex-shrink: 0;
    color: #fff;
    animation: alertBlink 1.5s ease infinite;
}

@keyframes alertBlink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

/* --- Tooltip Rico v2 --- */
.gantt-v2-tooltip {
    display: none;
    position: absolute;
    bottom: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%);
    background: #1a1a1a;
    color: white;
    border-radius: 12px;
    z-index: 100;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
    pointer-events: none;
    min-width: 260px;
    max-width: 340px;
    overflow: hidden;
    animation: tooltipFadeIn 0.2s ease;
}

@keyframes tooltipFadeIn {
    from { opacity: 0; transform: translateX(-50%) translateY(4px); }
    to { opacity: 1; transform: translateX(-50%) translateY(0); }
}

.gantt-v2-tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: #1a1a1a;
}

.gantt-v2-bar-container:hover .gantt-v2-tooltip {
    display: block;
}

.gantt-v2-tooltip-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    gap: 8px;
}

.gantt-v2-tooltip-header strong {
    font-size: 0.78rem;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.gantt-v2-tooltip-status {
    font-size: 0.55rem;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 10px;
    white-space: nowrap;
    flex-shrink: 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.gantt-v2-tooltip-status.status-andamento {
    background: rgba(113, 128, 150, 0.25);
    color: #CBD5E0;
}

.gantt-v2-tooltip-status.status-atrasado {
    background: rgba(var(--primary-rgb), 0.35);
    color: #E8B4B4;
}

.gantt-v2-tooltip-status.status-concluido {
    background: rgba(217, 197, 178, 0.25);
    color: #D9C5B2;
}

.gantt-v2-tooltip-body {
    padding: 10px 14px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.gantt-v2-tooltip-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.8);
}

.gantt-v2-tooltip-row i {
    width: 14px;
    text-align: center;
    color: rgba(255, 255, 255, 0.4);
    font-size: 0.65rem;
    flex-shrink: 0;
}

.gantt-v2-tooltip-progress {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 4px;
    padding-top: 6px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    font-size: 0.62rem;
    color: rgba(255, 255, 255, 0.5);
}

.gantt-v2-tooltip-pbar {
    flex: 1;
    height: 4px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 2px;
    overflow: hidden;
}

.gantt-v2-tooltip-pfill {
    height: 100%;
    background: linear-gradient(90deg, #A0AEC0, #CBD5E0);
    border-radius: 2px;
    transition: width 0.3s;
}

.gantt-v2-tooltip-pfill.late {
    background: linear-gradient(90deg, var(--primary-burgundy), rgba(var(--primary-rgb), 0.68));
}

/* =================================================================
   HEATMAP v2 - Alinhado ao Grid do Gantt
   ================================================================= */

.heatmap-v2 {
    background: white;
    border-radius: 16px;
    border: 1px solid var(--border-light);
    box-shadow: var(--shadow-soft);
    padding: 1.5rem;
}

.heatmap-v2-grid {
    display: grid;
    gap: 4px;
    align-items: end;
}

.heatmap-v2-label {
    font-size: 0.65rem;
    font-weight: 600;
    color: var(--text-light);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    padding-right: 10px;
}

.heatmap-v2-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
}

.heatmap-v2-block {
    width: 100%;
    height: 36px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    cursor: default;
    position: relative;
}

.heatmap-v2-block.heat-0 { background: #f3f0ec; }
.heatmap-v2-block.heat-1 { background: rgba(var(--primary-rgb), 0.12); }
.heatmap-v2-block.heat-2 { background: rgba(var(--primary-rgb), 0.35); }
.heatmap-v2-block.heat-3 { background: rgba(var(--primary-rgb), 0.55); }
.heatmap-v2-block.heat-4 { background: linear-gradient(135deg, var(--primary-burgundy), rgba(var(--primary-rgb), 0.68)); }

.heatmap-v2-block:hover {
    transform: scale(1.08);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.heatmap-v2-count {
    font-size: 0.7rem;
    font-weight: 700;
    color: white;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.heatmap-v2-block.heat-0 .heatmap-v2-count,
.heatmap-v2-block.heat-1 .heatmap-v2-count {
    color: var(--text-dark);
    text-shadow: none;
}

.heatmap-v2-day {
    font-size: 0.52rem;
    font-weight: 600;
    color: var(--text-light);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.heatmap-v2-cell.today .heatmap-v2-day {
    color: var(--primary-burgundy);
    font-weight: 700;
}

.heatmap-v2-cell.today .heatmap-v2-block {
    box-shadow: 0 0 0 2px rgba(var(--primary-rgb), 0.3);
}

.heatmap-v2-cell.weekend .heatmap-v2-block {
    opacity: 0.7;
}

/* === Dark Theme - Gantt v2 === */
body.dark-theme .gantt-v2 {
    background: var(--bg-dark-secondary, #2a2a2a);
    border-color: rgba(255, 255, 255, 0.08);
}

body.dark-theme .gantt-v2-header { background: rgba(255, 255, 255, 0.03); border-bottom-color: rgba(255, 255, 255, 0.08); }
body.dark-theme .gantt-v2-corner { background: rgba(255, 255, 255, 0.03); color: rgba(255, 255, 255, 0.5); border-right-color: rgba(255, 255, 255, 0.08); }
body.dark-theme .gantt-v2-hcell .day-number { color: rgba(255, 255, 255, 0.9); }
body.dark-theme .gantt-v2-hcell .day-name { color: rgba(255, 255, 255, 0.4); }
body.dark-theme .gantt-v2-hcell.today { background: rgba(var(--primary-rgb), 0.15); }
body.dark-theme .gantt-v2-hcell.today .day-number { color: white; background: var(--primary-burgundy); }
body.dark-theme .gantt-v2-hcell.weekend { background: rgba(255, 255, 255, 0.015); }
body.dark-theme .gantt-v2-hcell { border-right-color: rgba(255, 255, 255, 0.04); }
body.dark-theme .gantt-v2-row { border-bottom-color: rgba(255, 255, 255, 0.05); }
body.dark-theme .gantt-v2-row:hover { background: rgba(255, 255, 255, 0.03); }
body.dark-theme .gantt-v2-label { background: var(--bg-dark-secondary, #2a2a2a); border-right-color: rgba(255, 255, 255, 0.08); }
body.dark-theme .gantt-v2-row:hover .gantt-v2-label { background: rgba(255, 255, 255, 0.03); }
body.dark-theme .gantt-v2-project-name { color: rgba(255, 255, 255, 0.9); }
body.dark-theme .gantt-v2-project-phase { color: rgba(200, 150, 150, 0.8); }
body.dark-theme .gantt-v2-project-client { color: rgba(255, 255, 255, 0.4); }
body.dark-theme .gantt-v2-cell { border-right-color: rgba(255, 255, 255, 0.03); }
body.dark-theme .gantt-v2-cell.today { background: rgba(var(--primary-rgb), 0.06); }

body.dark-theme .heatmap-v2 { background: var(--bg-dark-secondary, #2a2a2a); border-color: rgba(255, 255, 255, 0.08); }
body.dark-theme .heatmap-v2-block.heat-0 { background: rgba(255, 255, 255, 0.06); }
body.dark-theme .heatmap-v2-label { color: rgba(255, 255, 255, 0.5); }
body.dark-theme .heatmap-v2-day { color: rgba(255, 255, 255, 0.3); }
body.dark-theme .heatmap-v2-cell.today .heatmap-v2-day { color: rgba(200, 150, 150, 0.9); }

/* --- Responsividade Cronograma --- */
@media (max-width: 768px) {
    .dual-view-toggle-wrapper { margin: 0.8rem 0 0.3rem; }
    .dv-btn { padding: 7px 14px; font-size: 0.65rem; }
    .cronograma-controls { flex-direction: column; align-items: stretch; }
    .cronograma-nav { justify-content: center; }
    .cronograma-mode-toggle { justify-content: center; }
    .gantt-wrapper { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .gantt-project-label { min-width: 120px; }
    .cronograma-stats { grid-template-columns: 1fr 1fr; }
    .heatmap-wrapper { padding: 1rem; }
    
    /* v2 responsivo */
    .gantt-v2-corner { width: 150px; min-width: 150px; font-size: 0.6rem; padding: 0 10px; }
    .gantt-v2-label { width: 150px; min-width: 150px; padding: 8px 10px; }
    .gantt-v2-project-name { font-size: 0.7rem; }
    .gantt-v2-project-phase { font-size: 0.56rem; }
    .heatmap-v2-label { font-size: 0.58rem; }
}

/* =============================================
   BARRA FIXA DO PROJETO (09/08/2026)
   Antes o nome do projeto e o botao Voltar rolavam para fora da tela: dentro de
   uma etapa nao dava para saber em que projeto se estava, e a unica saida era
   subir ate o topo. Agora cabecalho + abas ficam grudados abaixo da navbar.
   A navbar e fixed em top:40px com 70px de altura -> 110px e onde esta barra
   encosta. z-index 900 fica ABAIXO dos modais (2000) e da navbar (3000).
   ============================================= */
/* A navbar e `fixed` (top 40, altura 70 -> termina em 110) e portanto esta FORA
   do fluxo: sem este respiro o conteudo da secao nasce em y=61, ou seja ACIMA do
   `top:110` da barra. O sticky entao empurra a barra para baixo, mas o espaco
   dela no fluxo fica la em cima e o `.tab-content` sobe para ocupa-lo — ficando
   49px permanentemente escondido atras da barra, em qualquer rolagem.
   Com este padding a posicao natural da barra passa a ser exatamente 110: o
   sticky nao precisa deslocar nada e a sobreposicao deixa de existir. */
#project-internal-section {
    padding: 70px 1.5rem 0;
}

.project-sticky-bar {
    position: sticky;
    top: 110px;
    z-index: 900;
    background: var(--white, #FFFFFF);
    /* sangra ate a borda da secao (que tem padding 0 1.5rem) para o conteudo
       nao aparecer por baixo da barra ao rolar */
    margin: 0 -1.5rem 1.5rem;
    padding: 0.6rem 1.5rem 0;
    border-bottom: 1px solid var(--border-light);
    box-shadow: 0 4px 10px -6px rgba(0, 0, 0, 0.18);
}

.project-sticky-bar .section-header {
    margin-bottom: 0.6rem;
}

/* Qualquer scrollIntoView dentro do card do projeto tem que parar ABAIXO da
   barra, senao o alvo aparece atras dela. */
#project-internal-section .tab-pane,
#project-internal-section [id] {
    scroll-margin-top: 130px;
}

.project-sticky-bar .internal-tabs {
    margin-bottom: 0;
    border-bottom: none;
}

.project-title-block {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

#internal-project-name {
    font-size: 1.35rem;
    margin: 0;
    line-height: 1.15;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#internal-project-client {
    font-size: 0.78rem;
    color: var(--text-light);
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#internal-project-client:empty {
    display: none;
}

body.dark-theme .project-sticky-bar {
    background: #15151a;
    border-bottom-color: #2d2d34;
}

@media (max-width: 768px) {
    .project-sticky-bar {
        top: 110px;
        padding: 0.75rem 1rem 0;
        margin: 0 -1rem 1.5rem;
    }
    #internal-project-name { font-size: 1.1rem; }
    #internal-project-client { font-size: 0.7rem; }
}

/* ==========================================================================
   LINHA DO TEMPO DO PROJETO — aba Cronograma do card de projeto (10/08/2026)
   Regra combinada em 09/08: esta familia de telas e sempre bordo + champagne +
   cinza neutro. Nada de matiz por fase. A diferenca entre etapa concluida, em
   andamento e pendente sai de PREENCHIMENTO e OPACIDADE, nunca de cor nova.
   O unico vermelho e o do alerta de atraso, que ja existe no selo "Atrasado".
   ========================================================================== */

.proj-crono-head { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 1.5rem; gap: 1rem; flex-wrap: wrap; }
.proj-crono-resumo { font-size: 0.78rem; color: var(--text-light); margin-top: 0.35rem; line-height: 1.5; }
.proj-crono-resumo strong { color: var(--primary-burgundy); font-weight: 600; }

.proj-crono-vazio { border: 1px dashed var(--border-light); border-radius: 10px; padding: 2rem 1.5rem; text-align: center; color: var(--text-light); font-size: 0.85rem; line-height: 1.6; }
.proj-crono-vazio i { display: block; font-size: 1.6rem; margin-bottom: 0.6rem; color: var(--border-light); }
.proj-crono-vazio-inline { font-size: 0.8rem; color: var(--text-light); padding: 0.75rem 0.25rem; }

/* O eixo horizontal e proporcional ao periodo inteiro do projeto, entao a
   largura de uma barra ja significa duracao — nao precisa repetir em numero. */
.proj-crono-wrap { border: 1px solid var(--border-light); border-radius: 10px; overflow: hidden; }
.proj-crono-meses { display: flex; background: rgba(var(--primary-rgb), 0.04); border-bottom: 1px solid var(--border-light); }
.proj-crono-mes { font-size: 0.62rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-light); padding: 0.5rem 0.4rem; border-right: 1px solid var(--border-light); text-align: center; overflow: hidden; white-space: nowrap; }
.proj-crono-mes:last-child { border-right: none; }

.proj-crono-linha { display: flex; align-items: stretch; border-bottom: 1px solid var(--border-light); }
.proj-crono-linha:last-child { border-bottom: none; }
.proj-crono-linha:hover { background: rgba(var(--primary-rgb), 0.03); }

.proj-crono-rotulo { width: 210px; flex-shrink: 0; padding: 0.55rem 0.75rem; border-right: 1px solid var(--border-light); font-size: 0.75rem; display: flex; flex-direction: column; justify-content: center; gap: 2px; }
.proj-crono-rotulo .etapa-nome { font-weight: 600; color: var(--text-dark, #2D3748); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.proj-crono-rotulo .etapa-datas { font-size: 0.65rem; color: var(--text-light); }

.proj-crono-faixa { position: relative; flex: 1; min-height: 40px; }

.proj-crono-barra { position: absolute; top: 50%; transform: translateY(-50%); height: 22px; border-radius: 5px; display: flex; align-items: center; padding: 0 8px; font-size: 0.62rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 6px; }
.proj-crono-barra.etapa-atual      { background: var(--primary-burgundy); color: #fff; box-shadow: 0 2px 8px rgba(var(--primary-rgb), 0.28); }
.proj-crono-barra.etapa-concluida  { background: #D9C5B2; color: #5a4632; }
.proj-crono-barra.etapa-pendente   { background: rgba(var(--primary-rgb), 0.22); color: var(--primary-burgundy); }
.proj-crono-barra.etapa-atrasada   { background: var(--primary-burgundy); color: #fff; box-shadow: 0 0 0 2px #E53E3E inset; }

/* "Hoje" precisa ser lido de relance: e a referencia que responde "estou
   atrasada?" sem o usuario ter que comparar datas de cabeca. */
.proj-crono-hoje { position: absolute; top: 0; bottom: 0; width: 2px; background: #E53E3E; z-index: 4; pointer-events: none; }
.proj-crono-hoje::after { content: 'hoje'; position: absolute; top: -1px; left: 3px; font-size: 0.55rem; font-weight: 700; color: #E53E3E; letter-spacing: 0.04em; }

.proj-crono-marcos { display: flex; border-top: 1px solid var(--border-light); background: rgba(var(--primary-rgb), 0.02); }
.proj-crono-marcos .proj-crono-rotulo { font-size: 0.65rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-light); }
.proj-crono-marco { position: absolute; top: 50%; transform: translate(-50%, -50%); width: 20px; height: 20px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.6rem; cursor: default; z-index: 3; }
.proj-crono-marco.marco-pagamento { background: #fff; border: 2px solid var(--primary-burgundy); color: var(--primary-burgundy); }
.proj-crono-marco.marco-pagamento.pago { background: var(--primary-burgundy); color: #fff; }
.proj-crono-marco.marco-pagamento.vencido { border-color: #E53E3E; color: #E53E3E; }
.proj-crono-marco.marco-evento { background: #D9C5B2; border: 2px solid #b9a084; color: #5a4632; }

.proj-crono-legenda { display: flex; flex-wrap: wrap; gap: 1.1rem; margin-top: 0.9rem; font-size: 0.68rem; color: var(--text-light); }
.proj-crono-legenda span { display: inline-flex; align-items: center; gap: 0.35rem; }
.proj-crono-legenda i.amostra { width: 14px; height: 10px; border-radius: 3px; display: inline-block; }

.proj-crono-aviso { margin-top: 0.9rem; font-size: 0.72rem; color: var(--text-light); line-height: 1.6; border-left: 3px solid var(--border-light); padding-left: 0.7rem; }

body.dark-theme .proj-crono-wrap { border-color: rgba(255, 255, 255, 0.1); }
body.dark-theme .proj-crono-meses { background: rgba(255, 255, 255, 0.03); border-bottom-color: rgba(255, 255, 255, 0.1); }
body.dark-theme .proj-crono-mes,
body.dark-theme .proj-crono-rotulo { border-right-color: rgba(255, 255, 255, 0.08); }
body.dark-theme .proj-crono-linha { border-bottom-color: rgba(255, 255, 255, 0.08); }
body.dark-theme .proj-crono-rotulo .etapa-nome { color: rgba(255, 255, 255, 0.88); }
body.dark-theme .proj-crono-marco.marco-pagamento { background: #1f1f1f; }

@media (max-width: 768px) {
    .proj-crono-rotulo { width: 130px; }
    .proj-crono-mes { font-size: 0.55rem; padding: 0.4rem 0.2rem; }
}

/* ==========================================================================
   ABA ANDAMENTO — enxugada em 10/08/2026
   Antes havia DOIS blocos mostrando o mesmo numero (a barra grande "Status
   Atual da Jornada" e o cartao "Status Atual"), mais uma linha verde decorativa
   que dizia sempre a mesma coisa. Virou uma faixa unica: numero, barra e
   contexto (etapa atual + prazo) na mesma linha.
   ========================================================================== */

.andamento-topo { display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; border: 1px solid var(--border-light); border-radius: 10px; padding: 1.1rem 1.35rem; }
.andamento-numero { display: flex; flex-direction: column; min-width: 150px; }
.andamento-numero > span { font-size: 1.6rem; font-weight: 700; color: var(--primary-burgundy); line-height: 1.1; }
.andamento-numero > small { font-size: 0.72rem; color: var(--text-light); margin-top: 3px; }
.andamento-barra-area { flex: 1; min-width: 220px; }
.andamento-contexto { font-size: 0.76rem; color: var(--text-light); margin-top: 0.6rem; }
.andamento-contexto strong { color: var(--primary-burgundy); font-weight: 600; }
.andamento-vencido { color: #E53E3E; font-weight: 600; }
.andamento-sem-prazo { font-style: italic; }

.andamento-proximos { list-style: none; padding: 0; margin: 0.75rem 0 0; font-size: 0.82rem; }
.andamento-proximos li { padding: 0.5rem 0; border-bottom: 1px dashed var(--border-light); line-height: 1.45; }
.andamento-proximos li:last-child { border-bottom: none; }
/* A etapa vem antes da tarefa: sem isso era preciso caçar na aba Etapas de
   onde aquela tarefa tinha saido. */
.passo-etapa { display: inline-block; font-size: 0.62rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--primary-burgundy); background: rgba(var(--primary-rgb), 0.08); border-radius: 4px; padding: 2px 7px; margin-right: 0.55rem; }

.hist-cabecalho { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; flex-wrap: wrap; }
.hist-legenda { font-size: 0.72rem; color: var(--text-light); margin: 2px 0 0; }
.hist-filtros { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.hist-chip { border: 1px solid var(--border-light); background: transparent; color: var(--text-light); border-radius: 999px; padding: 4px 11px; font-size: 0.7rem; font-weight: 600; cursor: pointer; font-family: inherit; transition: all 0.15s ease; }
.hist-chip:hover { border-color: var(--primary-burgundy); color: var(--primary-burgundy); }
.hist-chip.ativo { background: var(--primary-burgundy); border-color: var(--primary-burgundy); color: #fff; }
.hist-chip-n { opacity: 0.65; font-weight: 500; margin-left: 2px; }

/* Sem ::before de bolinha e sem linha vertical: com 163 registros aquilo virava
   uma parede. Agora o agrupamento por dia e' que da o ritmo da leitura. */
.hist-lista { margin-top: 1rem; max-height: 460px; overflow-y: auto; padding-right: 0.4rem; }
.hist-lista::before { display: none; }
.hist-lista .hist-item::before { display: none; }

.hist-dia { position: sticky; top: 0; z-index: 2; background: var(--bg-offwhite); font-size: 0.65rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: var(--text-light); padding: 0.55rem 0 0.35rem; border-bottom: 1px solid var(--border-light); }

.hist-item { display: flex; gap: 0.7rem; padding: 0.6rem 0.2rem; border-bottom: 1px solid rgba(0, 0, 0, 0.04); }
.hist-item:last-child { border-bottom: none; }
.hist-item-icone { flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%; background: rgba(var(--primary-rgb), 0.08); color: var(--primary-burgundy); font-size: 0.62rem; display: flex; align-items: center; justify-content: center; margin-top: 1px; }
.hist-item-corpo { flex: 1; min-width: 0; }
.hist-item-topo { display: flex; justify-content: space-between; gap: 0.75rem; align-items: baseline; }
.hist-item-acao { font-size: 0.79rem; font-weight: 600; }
.hist-item-meta { font-size: 0.66rem; color: var(--text-light); white-space: nowrap; flex-shrink: 0; }
.hist-item-detalhe { font-size: 0.75rem; color: var(--text-light); line-height: 1.45; margin-top: 2px; word-break: break-word; }

.hist-mais-area { margin-top: 0.85rem; text-align: center; }
.hist-mais { border: 1px solid var(--border-light); background: transparent; color: var(--primary-burgundy); border-radius: 8px; padding: 7px 18px; font-size: 0.74rem; font-weight: 600; cursor: pointer; font-family: inherit; }
.hist-mais:hover { border-color: var(--primary-burgundy); background: rgba(var(--primary-rgb), 0.04); }
.hist-fim { font-size: 0.7rem; color: var(--text-light); }
.hist-vazio { text-align: center; color: var(--text-light); padding: 2rem 1rem; font-size: 0.8rem; line-height: 1.6; }

body.dark-theme .andamento-topo { border-color: rgba(255, 255, 255, 0.1); }
body.dark-theme .hist-dia { background: var(--bg-offwhite); border-bottom-color: rgba(255, 255, 255, 0.1); }
body.dark-theme .hist-item { border-bottom-color: rgba(255, 255, 255, 0.06); }
body.dark-theme .hist-chip { border-color: rgba(255, 255, 255, 0.15); }

@media (max-width: 768px) {
    .andamento-topo { gap: 0.9rem; }
    .hist-item-topo { flex-direction: column; gap: 0; }
    .hist-lista { max-height: 380px; }
}

/* ==========================================================================
   ABA FORNECEDORES DO PROJETO — 10/08/2026
   Cotacoes agrupadas por categoria (e assim que se compara: marcenaria com
   marcenaria) e um bloco separado para quem ja foi contratado, onde o que
   importa deixa de ser preco e passa a ser CONTATO para tocar a obra.
   ========================================================================== */

/* O formulario de cotacao era flex com estilo inline repetido em cada campo.
   Com a subcategoria virou 7 elementos disputando a linha: passou a grade de
   12 colunas, mesma gramatica do cadastro de parceiros. */
.cot-form { display: grid; grid-template-columns: repeat(12, 1fr); gap: 0.7rem 0.75rem; align-items: start; margin-bottom: 1.5rem; padding: 1.2rem 1.3rem; background: rgba(var(--primary-rgb), 0.03); border: 1px solid rgba(var(--primary-rgb), 0.08); border-radius: 12px; width: 100%; box-sizing: border-box; }
.cot-form-titulo { grid-column: 1 / -1; font-size: 0.66rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.09em; color: var(--primary-burgundy); }
.cot-campo { display: flex; flex-direction: column; gap: 0.28rem; min-width: 0; }
.cot-campo label { font-size: 0.63rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-light); }
.cot-campo input, .cot-campo select { width: 100%; padding: 0.55rem 0.7rem; border: 1px solid rgba(var(--primary-rgb), 0.12); border-radius: 8px; font-size: 0.8rem; font-family: inherit; background: var(--dark-card); color: var(--text-dark); }
.cot-campo input:focus, .cot-campo select:focus { outline: none; border-color: var(--primary-burgundy); box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.08); }
.cot-campo input::placeholder { color: var(--text-light); opacity: 0.55; }
.cot-c2 { grid-column: span 2; }
.cot-c3 { grid-column: span 3; }
.cot-c4 { grid-column: span 4; }
.cot-c6 { grid-column: span 6; }
/* O botao alinha pela BASE dos campos vizinhos, nao pelo topo da celula.
   Sem o align-self a celula encolhe na altura do botao e o grid (align-items:
   start) a prende no topo, deixando o botao 18px acima da linha dos campos. */
.cot-acao { align-self: stretch; justify-content: flex-end; }
.cot-acao .btn-add-row { width: 100%; margin: 0; }

@media (max-width: 900px) {
    .cot-c2, .cot-c3, .cot-c4 { grid-column: span 6; }
    .cot-c6 { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
    .cot-c2, .cot-c3, .cot-c4, .cot-c6 { grid-column: 1 / -1; }
}

.supplier-table tr.sup-grupo td { background: rgba(var(--primary-rgb), 0.06); font-size: 0.66rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--primary-burgundy); padding: 7px 12px; }
.sup-grupo-n { float: right; font-weight: 500; opacity: 0.7; text-transform: none; letter-spacing: 0; }
.sup-cel-vazia { width: 14px; }
/* A subcategoria mora na primeira coluna, que era so recuo: e detalhe da
   categoria do grupo logo acima, nao um dado de peso igual ao do fornecedor. */
.sup-sub { display: inline-block; font-size: 0.68rem; color: var(--text-light); white-space: nowrap; padding-left: 10px; }
.sup-menor { display: inline-block; font-size: 0.58rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; background: #D9C5B2; color: #5a4632; border-radius: 4px; padding: 1px 6px; margin-left: 5px; vertical-align: middle; }
.sup-tem-cadastro { font-size: 0.68rem; color: var(--primary-burgundy); opacity: 0.55; margin-left: 5px; }
.sup-btn-contratar { border: 1px solid var(--border-light); background: transparent; color: var(--primary-burgundy); border-radius: 6px; padding: 4px 9px; cursor: pointer; font-size: 0.75rem; }
.sup-btn-contratar:hover { border-color: var(--primary-burgundy); background: rgba(var(--primary-rgb), 0.06); }

.contratados-bloco { display: none; margin-top: 2rem; border-top: 1px solid var(--border-light); padding-top: 1.4rem; }
.contratados-cabecalho h4 { margin: 0; }
.contratados-cabecalho p { font-size: 0.74rem; color: var(--text-light); margin: 3px 0 1rem; }
.contratado-item { border: 1px solid var(--border-light); border-left: 3px solid var(--primary-burgundy); border-radius: 8px; padding: 0.85rem 1rem; margin-bottom: 0.7rem; }
.contratado-topo { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; flex-wrap: wrap; }
.contratado-cat { display: inline-block; font-size: 0.6rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--primary-burgundy); background: rgba(var(--primary-rgb), 0.08); border-radius: 4px; padding: 2px 7px; margin-right: 0.5rem; }
.contratado-nome { font-weight: 600; font-size: 0.9rem; }
.contratado-valor { font-weight: 700; color: var(--primary-burgundy); font-size: 0.85rem; white-space: nowrap; }
.contratado-contatos { display: flex; flex-wrap: wrap; gap: 0.4rem 1.1rem; margin-top: 0.55rem; }
.contratado-acao { font-size: 0.76rem; color: var(--text-light); text-decoration: none; display: inline-flex; align-items: center; gap: 0.35rem; }
a.contratado-acao:hover { color: var(--primary-burgundy); text-decoration: underline; }
.contratado-sem-contato { font-size: 0.72rem; color: var(--text-light); font-style: italic; }
.contratado-obs { font-size: 0.75rem; color: var(--text-light); margin-top: 0.45rem; line-height: 1.45; }
.contratado-desfazer { margin-top: 0.6rem; border: none; background: transparent; color: var(--text-light); font-size: 0.68rem; cursor: pointer; padding: 0; text-decoration: underline; font-family: inherit; }
.contratado-desfazer:hover { color: #E53E3E; }
.contratados-total { text-align: right; font-size: 0.8rem; color: var(--text-light); padding-top: 0.4rem; }
.contratados-total strong { color: var(--primary-burgundy); font-size: 0.95rem; }

body.dark-theme .contratado-item { border-color: rgba(255, 255, 255, 0.1); border-left-color: var(--primary-burgundy); }
body.dark-theme .contratados-bloco { border-top-color: rgba(255, 255, 255, 0.1); }

@media (max-width: 768px) {
    .contratado-topo { flex-direction: column; gap: 0.3rem; }
}

/* ==========================================================================
   FORNECEDORES PARCEIROS — Obras > Fornecedores (10/08/2026)
   Era uma tabela de 3 colunas sobre um cadastro que ja guardava 8 campos.
   Virou cartao agrupado por categoria, com o contato clicavel.
   ========================================================================== */

/* O formulario tinha 9 caixas iguais em auto-fit, sem rotulo nenhum: so
   placeholder, que some no primeiro caractere digitado — e num <select> nem
   existe. Virou grade de 12 colunas com rotulo em cima de cada campo, os
   dois de identificacao na primeira linha e os quatro de contato na segunda. */
.forn-form { display: grid; grid-template-columns: repeat(12, 1fr); gap: 0.7rem 0.75rem; margin-bottom: 1.5rem; background: var(--bg-offwhite); padding: 1.4rem; border-radius: 10px; border: 1px solid var(--border-light); align-items: start; }
.forn-form-titulo { grid-column: 1 / -1; font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.09em; color: var(--primary-burgundy); margin-bottom: 0.1rem; }
.forn-campo { display: flex; flex-direction: column; gap: 0.28rem; min-width: 0; }
.forn-campo label { font-size: 0.63rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-light); }
.forn-form input, .forn-form select { width: 100%; padding: 0.62rem 0.7rem; border: 1px solid var(--border-light); border-radius: 8px; font-size: 0.83rem; background: white; font-family: inherit; color: var(--text-dark); }
.forn-form input:focus, .forn-form select:focus { outline: none; border-color: var(--primary-burgundy); box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.08); }
.forn-form input::placeholder { color: var(--text-light); opacity: 0.55; }
.forn-c3 { grid-column: span 3; }
.forn-c4 { grid-column: span 4; }
.forn-c5 { grid-column: span 5; }
.forn-form .forn-largo { grid-column: 1 / -1; }
.forn-form-acoes { grid-column: 1 / -1; display: flex; justify-content: flex-end; gap: 0.6rem; margin-top: 0.3rem; }
.forn-form .forn-salvar { background: var(--primary-burgundy); color: white; border: none; padding: 0.65rem 1.8rem; font-size: 0.83rem; margin: 0; cursor: pointer; }
.forn-cancelar { background: transparent; border: 1px solid var(--border-light); border-radius: 999px; padding: 0.65rem 1.4rem; font-size: 0.8rem; cursor: pointer; color: var(--text-light); font-family: inherit; }
.forn-cancelar:hover { border-color: var(--primary-burgundy); color: var(--primary-burgundy); }
/* Em edicao a faixa muda de cor para nao confundir com um cadastro novo —
   editar e adicionar usam o MESMO formulario. */
.forn-form.forn-editando { border-color: rgba(var(--primary-rgb), 0.35); background: rgba(var(--primary-rgb), 0.035); }

@media (max-width: 900px) {
    .forn-c3, .forn-c4, .forn-c5 { grid-column: span 6; }
}
@media (max-width: 560px) {
    .forn-c3, .forn-c4, .forn-c5 { grid-column: 1 / -1; }
    .forn-form-acoes { flex-direction: column-reverse; }
    .forn-form-acoes button { width: 100%; }
}

.forn-busca-area { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.25rem; }
.forn-busca-area input { flex: 1; padding: 0.65rem 0.9rem; border: 1px solid var(--border-light); border-radius: 8px; font-size: 0.83rem; font-family: inherit; background: white; }
#forn-contagem { font-size: 0.75rem; color: var(--text-light); white-space: nowrap; }

.forn-grupo { margin-bottom: 1.6rem; }
.forn-grupo-titulo { font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--primary-burgundy); border-bottom: 1px solid var(--border-light); padding-bottom: 0.4rem; margin-bottom: 0.8rem; display: flex; justify-content: space-between; }
.forn-grupo-titulo span { color: var(--text-light); font-weight: 500; }
.forn-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 0.8rem; }

.forn-cartao { border: 1px solid var(--border-light); border-radius: 10px; padding: 0.85rem 1rem; background: white; }
.forn-cartao-topo { display: flex; justify-content: space-between; align-items: flex-start; gap: 0.5rem; }
.forn-nome { font-weight: 600; font-size: 0.88rem; }
.forn-acoes button { background: none; border: none; cursor: pointer; color: var(--text-light); padding: 2px 4px; font-size: 0.72rem; }
.forn-acoes button:hover { color: var(--primary-burgundy); }
.forn-acoes .forn-excluir:hover { color: #E53E3E; }
.forn-sub { font-size: 0.7rem; color: var(--text-light); margin-top: 1px; }
.forn-dados { display: flex; flex-direction: column; gap: 0.28rem; margin-top: 0.6rem; }
.forn-dado { font-size: 0.76rem; color: var(--text-light); text-decoration: none; display: inline-flex; align-items: center; gap: 0.4rem; }
.forn-dado i { width: 13px; text-align: center; opacity: 0.75; }
a.forn-dado:hover { color: var(--primary-burgundy); text-decoration: underline; }
.forn-sem { font-size: 0.73rem; font-style: italic; color: var(--text-light); opacity: 0.8; }
.forn-obs { font-size: 0.74rem; color: var(--text-light); margin-top: 0.55rem; padding-top: 0.5rem; border-top: 1px dashed var(--border-light); line-height: 1.45; }
.forn-vazio { text-align: center; color: var(--text-light); font-size: 0.83rem; padding: 2.5rem 1rem; line-height: 1.6; }

body.dark-theme .forn-cartao { background: var(--bg-dark-secondary, #1f1f1f); border-color: rgba(255, 255, 255, 0.1); }
body.dark-theme .forn-form input, body.dark-theme .forn-form select, body.dark-theme .forn-busca-area input { background: var(--bg-dark-secondary, #1f1f1f); border-color: rgba(255, 255, 255, 0.12); color: rgba(255, 255, 255, 0.9); }

/* ==========================================================================
   ABA ESPECIFICAÇÕES DO PROJETO — 10/08/2026
   Era a "Lista de Compras", com cinco campos numa tabela de seis colunas.
   Virou ficha: o que o cliente precisa saber para comprar sozinho (medida,
   acabamento, quantidade, referência e onde comprar), agrupada por categoria
   — com a mesma lista podendo ser lida por ambiente.
   ========================================================================== */

.espec-cabecalho {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 1.5rem; flex-wrap: wrap; gap: 10px; width: 100%;
}

/* ─── ficha do item ─────────────────────────────────────── */
.espec-form {
    display: grid; grid-template-columns: repeat(12, 1fr); gap: 0.7rem 0.75rem;
    align-items: start; margin-bottom: 1.5rem; padding: 1.2rem 1.3rem;
    background: rgba(var(--primary-rgb), 0.03); border: 1px solid rgba(var(--primary-rgb), 0.08);
    border-radius: 12px; width: 100%; box-sizing: border-box;
}
.espec-form-titulo {
    grid-column: 1 / -1; font-size: 0.66rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.09em; color: var(--primary-burgundy);
}
.espec-campo { display: flex; flex-direction: column; gap: 0.28rem; min-width: 0; }
.espec-campo label {
    font-size: 0.62rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.06em; color: var(--text-light);
}
.espec-campo input, .espec-campo select {
    width: 100%; padding: 0.55rem 0.7rem; border: 1px solid rgba(var(--primary-rgb), 0.12);
    border-radius: 8px; font-size: 0.8rem; font-family: inherit;
    background: var(--dark-card); color: var(--text-dark);
}
.espec-campo input[type="file"] { padding: 0.42rem 0.5rem; font-size: 0.7rem; color: var(--text-light); }
.espec-campo input:focus, .espec-campo select:focus {
    outline: none; border-color: var(--primary-burgundy);
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.08);
}
.espec-campo input::placeholder { color: var(--text-light); opacity: 0.55; }
/* O total do item não é campo: é conta, calculada enquanto ela digita. */
.espec-total-previa {
    padding: 0.55rem 0.7rem; border: 1px dashed rgba(var(--primary-rgb), 0.18);
    border-radius: 8px; font-size: 0.85rem; font-weight: 600;
    color: var(--primary-burgundy); background: transparent; text-align: right;
    font-variant-numeric: tabular-nums;
}
.espec-c2 { grid-column: span 2; }
.espec-c3 { grid-column: span 3; }
.espec-c6 { grid-column: span 6; }
.espec-form-acoes {
    grid-column: 1 / -1; display: flex; justify-content: flex-end;
    gap: 0.6rem; margin-top: 0.3rem;
}
.espec-form-acoes .btn-add-row { margin: 0; }
.espec-cancelar {
    background: transparent; border: 1px solid var(--border-light); border-radius: 999px;
    padding: 0.55rem 1.4rem; font-size: 0.8rem; cursor: pointer;
    color: var(--text-light); font-family: inherit;
}
.espec-cancelar:hover { border-color: var(--primary-burgundy); color: var(--primary-burgundy); }
.espec-form.espec-editando {
    border-color: rgba(var(--primary-rgb), 0.35); background: rgba(var(--primary-rgb), 0.045);
}

/* ─── barra de controle ─────────────────────────────────── */
.espec-barra {
    display: flex; align-items: center; gap: 1rem; margin-bottom: 1.25rem; flex-wrap: wrap;
}
.espec-agrupar {
    display: inline-flex; border: 1px solid var(--border-light);
    border-radius: 999px; overflow: hidden; flex: none;
}
.espec-agrupar-btn {
    border: none; background: transparent; color: var(--text-light);
    font-family: inherit; font-size: 0.74rem; padding: 0.45rem 1rem;
    cursor: pointer; white-space: nowrap;
}
.espec-agrupar-btn.active { background: var(--primary-burgundy); color: #fff; font-weight: 600; }
.espec-barra input {
    flex: 1; min-width: 180px; padding: 0.55rem 0.9rem; border: 1px solid var(--border-light);
    border-radius: 8px; font-size: 0.82rem; font-family: inherit; background: white;
}
#espec-resumo { font-size: 0.75rem; color: var(--text-light); white-space: nowrap; }

/* ─── grupos e cartões ──────────────────────────────────── */
.espec-grupo { margin-bottom: 1.7rem; }
.espec-grupo-titulo {
    display: flex; justify-content: space-between; align-items: baseline;
    font-size: 0.68rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.09em; color: var(--primary-burgundy);
    border-bottom: 1px solid var(--border-light);
    padding-bottom: 0.4rem; margin-bottom: 0.8rem;
}
.espec-grupo-titulo span {
    color: var(--text-light); font-weight: 500; text-transform: none; letter-spacing: 0;
    font-variant-numeric: tabular-nums;
}
.espec-grade { display: flex; flex-direction: column; gap: 0.6rem; }

.espec-cartao {
    display: flex; align-items: flex-start; gap: 0.9rem;
    border: 1px solid var(--border-light); border-radius: 10px;
    padding: 0.8rem 0.95rem; background: white;
}
.espec-cartao:hover { border-color: rgba(var(--primary-rgb), 0.25); }
.espec-foto {
    width: 60px; height: 60px; object-fit: cover; border-radius: 8px;
    border: 1px solid var(--border-light); flex: none;
}
.espec-sem-foto {
    display: flex; align-items: center; justify-content: center;
    background: rgba(var(--primary-rgb), 0.04); border-style: dashed;
    color: var(--primary-burgundy); opacity: 0.4; font-size: 1.1rem;
}
.espec-corpo { flex: 1; min-width: 0; }
.espec-linha1 { display: flex; align-items: baseline; gap: 0.5rem; flex-wrap: wrap; }
.espec-nome { font-weight: 600; font-size: 0.88rem; }
/* A etiqueta mostra a OUTRA dimensão do agrupamento: no modo categoria ela
   traz o ambiente, no modo ambiente traz a categoria. Repetir o próprio
   grupo em cada cartão não acrescentaria nada. */
.espec-etiqueta {
    font-size: 0.6rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
    color: var(--primary-burgundy); background: rgba(var(--primary-rgb), 0.08);
    border-radius: 4px; padding: 2px 7px;
}
.espec-sub { font-size: 0.7rem; color: var(--text-light); }
.espec-specs { display: flex; flex-wrap: wrap; gap: 2px 14px; margin-top: 0.4rem; }
.espec-spec { font-size: 0.73rem; color: var(--text-dark); }
.espec-spec b {
    font-weight: 700; color: var(--text-light); text-transform: uppercase;
    font-size: 0.6rem; letter-spacing: 0.06em; margin-right: 4px;
}
.espec-obs {
    font-size: 0.73rem; color: var(--text-light); font-style: italic; margin-top: 0.35rem;
}
.espec-link {
    display: inline-flex; align-items: center; gap: 0.35rem; margin-top: 0.4rem;
    font-size: 0.73rem; color: var(--primary-burgundy); text-decoration: none;
}
.espec-link:hover { text-decoration: underline; }
.espec-preco { text-align: right; white-space: nowrap; flex: none; font-variant-numeric: tabular-nums; }
.espec-total-item { font-weight: 700; font-size: 0.92rem; color: var(--primary-burgundy); }
.espec-unit { font-size: 0.68rem; color: var(--text-light); margin-top: 2px; }
.espec-acoes { display: flex; gap: 2px; flex: none; }
.espec-acoes button {
    background: none; border: none; cursor: pointer; color: var(--text-light);
    padding: 2px 5px; font-size: 0.74rem;
}
.espec-acoes button:hover { color: var(--primary-burgundy); }
.espec-acoes .espec-excluir:hover { color: #E53E3E; }

.espec-vazio {
    text-align: center; color: var(--text-light); font-size: 0.83rem;
    padding: 2.5rem 1rem; line-height: 1.7;
}

.espec-total-geral {
    display: flex; justify-content: space-between; align-items: baseline;
    margin-top: 1.4rem; padding: 0.9rem 1.1rem;
    background: var(--bg-offwhite); border: 1px solid var(--border-light);
    border-left: 3px solid var(--primary-burgundy); border-radius: 8px;
    font-variant-numeric: tabular-nums;
}
.espec-total-geral span {
    font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.1em;
    color: var(--text-light); font-weight: 700;
}
.espec-total-geral strong { font-size: 1.1rem; color: var(--primary-burgundy); }

body.dark-theme .espec-cartao {
    background: var(--bg-dark-secondary, #1f1f1f); border-color: rgba(255, 255, 255, 0.1);
}
body.dark-theme .espec-barra input {
    background: var(--bg-dark-secondary, #1f1f1f); border-color: rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.9);
}

@media (max-width: 900px) {
    .espec-c2, .espec-c3 { grid-column: span 6; }
    .espec-c6 { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
    .espec-c2, .espec-c3, .espec-c6 { grid-column: 1 / -1; }
    .espec-cartao { flex-wrap: wrap; }
    .espec-preco { text-align: left; }
    .espec-form-acoes { flex-direction: column-reverse; }
    .espec-form-acoes button { width: 100%; }
}

/* ==========================================================================
   ÁREA DO CLIENTE — publicar o portal (10/08/2026)
   O link do portal aponta para localhost: só abre na máquina dela. Este bloco
   é o caminho para o cliente abrir de casa — gera um arquivo com os dados de
   um projeto só, para subir na hospedagem.
   ========================================================================== */

.ca-publicar {
    display: flex; align-items: center; gap: 1.4rem; flex-wrap: wrap;
    margin-top: 1.2rem; padding: 1.1rem 1.3rem;
    background: rgba(var(--primary-rgb), 0.035);
    border: 1px solid rgba(var(--primary-rgb), 0.12);
    border-left: 3px solid var(--primary-burgundy);
    border-radius: 10px;
}
.ca-publicar-texto { flex: 1; min-width: 260px; }
.ca-publicar-texto strong {
    display: block; font-size: 0.78rem; font-weight: 700; color: var(--primary-burgundy);
    text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 5px;
}
.ca-publicar-texto p { font-size: 0.76rem; color: var(--text-light); margin: 0 0 4px; line-height: 1.55; }
.ca-publicar-aviso { font-style: italic; opacity: 0.85; }
.ca-btn-portal {
    background: var(--primary-burgundy); color: white; border: none;
    padding: 0.7rem 1.5rem; font-size: 0.82rem; margin: 0; cursor: pointer; white-space: nowrap;
}
.ca-btn-portal:disabled { opacity: 0.6; cursor: default; }
.ca-portal-info { font-size: 0.72rem; color: var(--text-light); margin-top: 8px; line-height: 1.5; }

@media (max-width: 640px) {
    .ca-publicar { flex-direction: column; align-items: stretch; }
    .ca-btn-portal { width: 100%; }
}

/* Link dentro de comentário de etapa (10/08/2026) — pedido dela, referência
   Trello: colar o endereço e poder clicar. O texto é escapado antes de virar
   link, então comentário não pode injetar HTML na tela. */
/* O cartao do comentario da etapa tem FUNDO BORDO (.comment-item), entao o
   link nao pode ser bordo — ficava invisivel, como ela relatou. Aqui ele e
   champagne sobre um veu claro. No Backstage o cartao e claro, e a variante
   .coment-link-claro (mais abaixo) usa o bordo. */
.coment-link {
    display: inline-flex; align-items: center; gap: 4px;
    color: var(--secondary-champagne); text-decoration: none;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 12px; padding: 1px 9px; font-size: 0.78rem;
    max-width: 100%; overflow-wrap: anywhere; font-weight: 500;
}
.coment-link i { font-size: 0.62rem; opacity: 0.8; }
.coment-link:hover { background: rgba(255, 255, 255, 0.22); color: #fff; text-decoration: underline; }

/* Comentario sobre fundo claro (Backstage). */
.coment-claro .coment-link {
    color: var(--primary-burgundy);
    background: rgba(var(--primary-rgb), 0.07);
    border-color: rgba(var(--primary-rgb), 0.18);
}
.coment-claro .coment-link:hover { background: rgba(var(--primary-rgb), 0.14); color: var(--primary-burgundy); }

/* ==========================================================================
   BIBLIOTECA DE LINKS — Obras > Especificação de Projetos (10/08/2026)
   A aba tinha 5 links cravados no código. Virou cadastro dela: nome, endereço
   e categoria, agrupado e com busca — mesma gramática do cadastro de parceiros.
   ========================================================================== */

.bib-form {
    display: grid; grid-template-columns: repeat(12, 1fr); gap: 0.7rem 0.75rem;
    align-items: start; margin-bottom: 1.4rem; padding: 1.2rem 1.3rem;
    background: var(--bg-offwhite); border: 1px solid var(--border-light); border-radius: 10px;
}
.bib-form-titulo {
    grid-column: 1 / -1; font-size: 0.66rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.09em; color: var(--primary-burgundy);
}
.bib-campo { display: flex; flex-direction: column; gap: 0.28rem; min-width: 0; }
.bib-campo label {
    font-size: 0.62rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.06em; color: var(--text-light);
}
/* O <select> tinha ficado de fora deste seletor (10/08/2026): sem width, sem
   padding e sem borda do sistema, ele saia mais estreito e mais baixo que os
   vizinhos — o desalinhamento que ela apontou no print. */
.bib-campo input, .bib-campo select {
    width: 100%; padding: 0.6rem 0.7rem; border: 1px solid var(--border-light);
    border-radius: 8px; font-size: 0.83rem; font-family: inherit;
    background: white; color: var(--text-dark);
    height: 40px; box-sizing: border-box;
}
.bib-campo input:focus, .bib-campo select:focus {
    outline: none; border-color: var(--primary-burgundy);
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.08);
}
.bib-c3 { grid-column: span 3; }
.bib-c4 { grid-column: span 4; }
.bib-c5 { grid-column: span 5; }
.bib-largo { grid-column: 1 / -1; }
.bib-form-acoes { grid-column: 1 / -1; display: flex; justify-content: flex-end; gap: 0.6rem; }
.bib-form .bib-salvar {
    background: var(--primary-burgundy); color: white; border: none;
    padding: 0.6rem 1.6rem; font-size: 0.82rem; margin: 0; cursor: pointer;
}
.bib-cancelar {
    background: transparent; border: 1px solid var(--border-light); border-radius: 999px;
    padding: 0.6rem 1.3rem; font-size: 0.8rem; cursor: pointer; color: var(--text-light); font-family: inherit;
}
.bib-form.bib-editando { border-color: rgba(var(--primary-rgb), 0.35); background: rgba(var(--primary-rgb), 0.04); }

.bib-busca-area { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.2rem; }
.bib-busca-area input {
    flex: 1; padding: 0.6rem 0.9rem; border: 1px solid var(--border-light);
    border-radius: 8px; font-size: 0.83rem; font-family: inherit; background: white;
}
#bib-contagem { font-size: 0.75rem; color: var(--text-light); white-space: nowrap; }

.bib-vazio { text-align: center; color: var(--text-light); font-size: 0.83rem; padding: 2.2rem 1rem; }

body.dark-theme .bib-cartao, body.dark-theme .bib-campo input, body.dark-theme .bib-busca-area input {
    background: var(--bg-dark-secondary, #1f1f1f); border-color: rgba(255, 255, 255, 0.1); color: rgba(255, 255, 255, 0.9);
}

@media (max-width: 900px) {
    .bib-c3, .bib-c4, .bib-c5 { grid-column: span 6; }
}
@media (max-width: 560px) {
    .bib-c3, .bib-c4, .bib-c5 { grid-column: 1 / -1; }
}

/* ==========================================================================
   ÁREA DO CLIENTE — formulários (10/08/2026)
   Mesma gramática já aplicada ao cadastro de parceiros, à cotação e às
   especificações: grade de 12 colunas, rótulo em cima de cada campo. Antes
   eram caixas em fila dependendo só de placeholder.
   ========================================================================== */

.ca-form {
    display: grid; grid-template-columns: repeat(12, 1fr); gap: 0.7rem 0.75rem;
    align-items: start; padding: 1.1rem 1.2rem;
    background: rgba(var(--primary-rgb), 0.03);
    border: 1px solid rgba(var(--primary-rgb), 0.08);
    border-radius: 12px; width: 100%; box-sizing: border-box;
}
.ca-campo { display: flex; flex-direction: column; gap: 0.28rem; min-width: 0; }
.ca-campo label {
    font-size: 0.62rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.06em; color: var(--text-light);
}
.ca-campo input, .ca-campo select {
    width: 100%; padding: 0.55rem 0.7rem; border: 1px solid rgba(var(--primary-rgb), 0.12);
    border-radius: 8px; font-size: 0.8rem; font-family: inherit;
    background: var(--dark-card); color: var(--text-dark);
}
.ca-campo input[type="file"] { padding: 0.42rem 0.5rem; font-size: 0.7rem; color: var(--text-light); }
.ca-campo input:focus, .ca-campo select:focus {
    outline: none; border-color: var(--primary-burgundy);
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.08);
}
.ca-c3 { grid-column: span 3; }
.ca-c4 { grid-column: span 4; }
.ca-c5 { grid-column: span 5; }
.ca-c8 { grid-column: span 8; }
/* O botão alinha pela base dos campos, não pelo topo da célula. */
.ca-acao { align-self: stretch; justify-content: flex-end; }
.ca-btn-add {
    width: 100%; padding: 0.58rem 1rem; background: var(--primary-burgundy); color: white;
    border: none; border-radius: 8px; font-size: 0.8rem; font-weight: 600;
    cursor: pointer; white-space: nowrap; font-family: inherit;
}
.ca-btn-add:hover { filter: brightness(1.12); }

@media (max-width: 900px) {
    .ca-c3, .ca-c4, .ca-c5 { grid-column: span 6; }
    .ca-c8 { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
    .ca-c3, .ca-c4, .ca-c5, .ca-c8 { grid-column: 1 / -1; }
}


/* ==========================================================================
   BIBLIOTECA — quadro por plataforma (10/08/2026, corrigido após retorno dela)
   PLATAFORMA (o quadro) > CATEGORIA > MARCA + link.
   A primeira versão tinha só categoria + link, sem o quadro da plataforma.
   ========================================================================== */

.bib-nova-plat {
    background: transparent; border: 1px dashed var(--border-light); border-radius: 8px;
    padding: 0.5rem 1rem; font-size: 0.76rem; font-weight: 600; cursor: pointer;
    color: var(--primary-burgundy); font-family: inherit; white-space: nowrap;
}
.bib-nova-plat:hover { border-color: var(--primary-burgundy); background: rgba(var(--primary-rgb), 0.04); }

.bib-quadro {
    border: 1px solid var(--border-light); border-radius: 12px;
    background: white; margin-bottom: 1rem; overflow: hidden;
}
.bib-quadro-topo {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    padding: 0.8rem 1.1rem; background: var(--bg-offwhite);
    border-bottom: 1px solid var(--border-light);
}
.bib-quadro-nome { display: flex; align-items: baseline; gap: 0.7rem; min-width: 0; flex-wrap: wrap; }
.bib-quadro-nome, .bib-quadro-nome a {
    font-weight: 600; font-size: 0.92rem; color: var(--primary-burgundy); text-decoration: none;
}
.bib-quadro-nome a:hover { text-decoration: underline; }
.bib-quadro-nome i { font-size: 0.62rem; opacity: 0.6; }
.bib-quadro-n { font-size: 0.68rem; font-weight: 500; color: var(--text-light); }
.bib-quadro-acoes { display: flex; align-items: center; gap: 4px; flex: none; }
.bib-quadro-acoes button {
    background: none; border: none; cursor: pointer; color: var(--text-light);
    padding: 3px 6px; font-size: 0.74rem; font-family: inherit; border-radius: 6px;
}
.bib-quadro-acoes button:hover { color: var(--primary-burgundy); background: rgba(var(--primary-rgb), 0.06); }
.bib-quadro-acoes .bib-excluir:hover { color: #E53E3E; background: rgba(229, 62, 62, 0.08); }
.bib-add-marca {
    border: 1px solid var(--border-light) !important; border-radius: 14px !important;
    font-size: 0.68rem !important; font-weight: 600; color: var(--primary-burgundy) !important;
}
.bib-quadro-corpo { padding: 0.9rem 1.1rem 1rem; }
.bib-quadro-vazio { font-size: 0.78rem; color: var(--text-light); font-style: italic; margin: 0.3rem 0; }

.bib-cat { margin-bottom: 0.9rem; }
.bib-cat-titulo {
    display: flex; justify-content: space-between; align-items: baseline;
    font-size: 0.64rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.09em;
    color: var(--text-light); border-bottom: 1px solid var(--border-light);
    padding-bottom: 3px; margin-bottom: 0.45rem;
}
.bib-cat-titulo span { font-weight: 500; opacity: 0.8; }

.bib-marca { display: flex; align-items: center; gap: 0.6rem; padding: 3px 0; }
.bib-marca-link {
    display: inline-flex; align-items: center; gap: 6px; text-decoration: none;
    color: var(--text-dark); font-size: 0.82rem; min-width: 0;
}
.bib-marca-link i { font-size: 0.62rem; color: var(--primary-burgundy); opacity: 0.7; flex: none; }
.bib-marca-link span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bib-marca-link:hover { color: var(--primary-burgundy); text-decoration: underline; }
.bib-marca-obs { font-size: 0.7rem; color: var(--text-light); font-style: italic; flex: 1; min-width: 0; }
.bib-marca-acoes { display: flex; gap: 2px; margin-left: auto; flex: none; opacity: 0; transition: opacity 0.15s; }
.bib-marca:hover .bib-marca-acoes { opacity: 1; }
.bib-marca-acoes button {
    background: none; border: none; cursor: pointer; color: var(--text-light);
    padding: 2px 4px; font-size: 0.7rem;
}
.bib-marca-acoes button:hover { color: var(--primary-burgundy); }
.bib-marca-acoes .bib-excluir:hover { color: #E53E3E; }

body.dark-theme .bib-quadro { background: var(--bg-dark-secondary, #1f1f1f); border-color: rgba(255,255,255,0.1); }

@media (max-width: 640px) {
    .bib-quadro-topo { flex-direction: column; align-items: flex-start; gap: 0.5rem; }
    .bib-marca-acoes { opacity: 1; }
}

/* ==========================================================================
   BRIEFING DO PROJETO — 10/08/2026
   O modelo dela (PDF do Canva, "Suíte Master": 44 perguntas em 4 seções) virou
   tela. As respostas salvam sozinhas ao sair do campo.
   ========================================================================== */

.brief-cabecalho {
    display: flex; justify-content: space-between; align-items: flex-end;
    flex-wrap: wrap; gap: 1rem; margin-bottom: 1.5rem;
}
.brief-cabecalho-acoes { display: flex; gap: 0.6rem; align-items: center; flex-wrap: wrap; }
.brief-cabecalho-acoes select {
    padding: 0.6rem 0.8rem; border: 1px solid var(--border-light); border-radius: 8px;
    font-size: 0.82rem; font-family: inherit; background: white; color: var(--text-dark);
    height: 40px; box-sizing: border-box; min-width: 190px;
}
.brief-btn-novo {
    background: var(--primary-burgundy); color: white; border: none;
    padding: 0 1.4rem; height: 40px; font-size: 0.82rem; margin: 0; cursor: pointer; white-space: nowrap;
}

.brief-vazio { text-align: center; color: var(--text-light); font-size: 0.85rem; padding: 3rem 1rem; line-height: 1.8; }

.brief-cartao {
    display: flex; align-items: center; gap: 1rem; justify-content: space-between;
    border: 1px solid var(--border-light); border-radius: 10px;
    padding: 1rem 1.2rem; background: white; margin-bottom: 0.7rem;
}
.brief-cartao-info { flex: 1; min-width: 0; }
.brief-cartao-nome { display: block; font-weight: 600; font-size: 0.92rem; color: var(--text-dark); }
.brief-cartao-meta { display: block; font-size: 0.7rem; color: var(--text-light); margin-top: 2px; }
.brief-barra { height: 5px; background: var(--border-light); border-radius: 99px; overflow: hidden; margin: 8px 0 4px; max-width: 320px; }
.brief-barra-fill { height: 100%; background: var(--primary-burgundy); border-radius: 99px; transition: width 0.3s; }
.brief-cartao-acoes { display: flex; gap: 4px; align-items: center; flex: none; }
.brief-cartao-acoes button {
    background: none; border: none; cursor: pointer; color: var(--text-light);
    padding: 5px 8px; font-size: 0.78rem; border-radius: 6px; font-family: inherit;
}
.brief-cartao-acoes button:hover { color: var(--primary-burgundy); background: rgba(var(--primary-rgb), 0.06); }
.brief-cartao-acoes .brief-excluir:hover { color: #E53E3E; background: rgba(229, 62, 62, 0.08); }
.brief-abrir {
    border: 1px solid var(--primary-burgundy) !important; color: var(--primary-burgundy) !important;
    border-radius: 999px !important; padding: 6px 18px !important; font-weight: 600; font-size: 0.78rem !important;
}
.brief-abrir:hover { background: var(--primary-burgundy) !important; color: white !important; }

/* ─── responder ─────────────────────────────────────────────────────────── */
.brief-topo {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    padding-bottom: 0.9rem; border-bottom: 1px solid var(--border-light); margin-bottom: 0.4rem; flex-wrap: wrap;
}
.brief-topo-info { text-align: center; flex: 1; }
.brief-topo-info strong { display: block; font-size: 0.95rem; color: var(--primary-burgundy); }
.brief-topo-info span { font-size: 0.72rem; color: var(--text-light); }
.brief-voltar, .brief-pdf {
    background: transparent; border: 1px solid var(--border-light); border-radius: 999px;
    padding: 0.5rem 1.1rem; font-size: 0.78rem; cursor: pointer; color: var(--text-light);
    font-family: inherit; white-space: nowrap;
}
.brief-voltar:hover, .brief-pdf:hover { border-color: var(--primary-burgundy); color: var(--primary-burgundy); }
.brief-aviso { font-size: 0.7rem; color: var(--text-light); font-style: italic; margin: 0 0 1.4rem; }

.brief-secao { margin-bottom: 2rem; }
.brief-secao-titulo {
    font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em;
    color: var(--primary-burgundy); border-bottom: 2px solid rgba(var(--primary-rgb), 0.15);
    padding-bottom: 6px; margin: 0 0 1.1rem;
}
.brief-pergunta {
    padding: 0.85rem 1rem; border-radius: 10px; margin-bottom: 0.7rem;
    border: 1px solid var(--border-light); border-left: 3px solid var(--border-light);
    background: white; transition: border-color 0.2s;
}
/* A marca de respondida e discreta de proposito: serve para ela achar o que
   falta ao correr o olho, sem transformar a tela num campo de bandeiras. */
.brief-pergunta.respondida { border-left-color: var(--primary-burgundy); background: rgba(var(--primary-rgb), 0.02); }
.brief-label { display: block; font-size: 0.85rem; color: var(--text-dark); margin-bottom: 0.5rem; line-height: 1.45; }
.brief-input {
    width: 100%; padding: 0.55rem 0.7rem; border: 1px solid var(--border-light);
    border-radius: 8px; font-size: 0.83rem; font-family: inherit; resize: vertical;
    background: white; color: var(--text-dark);
}
.brief-input:focus { outline: none; border-color: var(--primary-burgundy); box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.08); }
.brief-complemento { margin-top: 0.5rem; }

.brief-opcoes { display: flex; flex-wrap: wrap; gap: 0.45rem; align-items: center; }
.brief-op {
    display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
    border: 1px solid var(--border-light); border-radius: 999px;
    padding: 5px 13px; font-size: 0.78rem; color: var(--text-dark); background: white;
}
.brief-op:hover { border-color: var(--primary-burgundy); }
.brief-op input { accent-color: var(--primary-burgundy); margin: 0; }
.brief-op.escolhida {
    background: rgba(var(--primary-rgb), 0.08); border-color: var(--primary-burgundy);
    color: var(--primary-burgundy); font-weight: 600;
}
.brief-outro {
    padding: 5px 11px; border: 1px solid var(--border-light); border-radius: 999px;
    font-size: 0.78rem; font-family: inherit; min-width: 150px; background: white; color: var(--text-dark);
}
.brief-nota {
    background: var(--bg-offwhite); border: 1px dashed var(--border-light);
    border-radius: 8px; padding: 0.8rem 1rem; margin-bottom: 0.7rem;
}
.brief-nota b { display: block; font-size: 0.84rem; color: var(--text-dark); }
.brief-nota span { display: block; font-size: 0.75rem; color: var(--text-light); margin-top: 3px; }

/* Briefing impresso */
.pdf-editorial .pdf-brief-item { padding: 7px 0; border-bottom: 1px solid #f2ece7; break-inside: avoid; }
.pdf-editorial .pdf-brief-pergunta { font-size: 0.7rem; color: var(--pdf-fraco); }
.pdf-editorial .pdf-brief-resposta { font-size: 0.78rem; color: #23201e; font-weight: 500; margin-top: 2px; }
.pdf-editorial .pdf-brief-resposta.vazia { color: #c9c2bb; font-weight: 400; }

body.dark-theme .brief-cartao, body.dark-theme .brief-pergunta, body.dark-theme .brief-input {
    background: var(--bg-dark-secondary, #1f1f1f); border-color: rgba(255, 255, 255, 0.1); color: rgba(255, 255, 255, 0.9);
}

@media (max-width: 640px) {
    .brief-cabecalho-acoes { width: 100%; }
    .brief-cabecalho-acoes select, .brief-btn-novo { flex: 1; }
    .brief-cartao { flex-direction: column; align-items: stretch; }
    .brief-topo { flex-direction: column; align-items: stretch; }
    .brief-topo-info { text-align: left; }
}



/* ─────────────────────────────────────────────────────────────────────────
   ONBOARDING DO CLIENTE — folha A3 na horizontal (11/08/2026)

   Ele pediu este formato: "formato A3 horizontal, e esse é o padrão que eu
   quero". O modelo veio do PDF do Canva dele, de 20/07/2026.

   Na tela a folha fica com 420mm de largura (A3 deitado) em vez dos 210mm
   do A4; na impressao, quem manda e' a regra @page injetada por
   _docTamanhoDaPagina(), porque @page nao aceita seletor — nao daria para
   dizer "A3 so quando for este documento" apenas com CSS.
   ───────────────────────────────────────────────────────────────────────── */
/* O seletor precisa do id: a largura A4 vem de #doc-print-area (arthos_ui.css),
   e id vence classe por especificidade. Medido em 11/08/2026: com
   `.print-area.folha-a3` a folha continuava com 793px, ou seja, A4. */
#doc-print-area.folha-a3,
.print-area.folha-a3 {
    width: 420mm;
    min-height: 297mm;
}

#doc-print-area.folha-a3 .letterhead,
.print-area.folha-a3 .letterhead {
    min-height: 297mm;
    padding: 18mm 20mm !important;
}

/* Cada bloco do onboarding e' uma folha inteira. */
.onb-folha {
    min-height: 261mm;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
}
.onb-folha + .onb-folha {
    page-break-before: always;
    break-before: page;
    border-top: 1px dashed rgba(var(--primary-rgb), 0.25);
    margin-top: 14mm;
    padding-top: 14mm;
}
.onb-titulo {
    font-family: 'Poppins', sans-serif;
    font-size: 1.5rem;
    font-weight: 300;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: var(--primary-burgundy);
    margin: 0 0 0.4rem 0;
}
.onb-linha {
    width: 64px;
    height: 2px;
    background: var(--primary-burgundy);
    margin-bottom: 1.6rem;
}
.onb-colunas {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 1.6rem 2.4rem;
}
.onb-colunas-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 2.6rem; }
.onb-etapa-num {
    font-family: 'Poppins', sans-serif;
    font-size: 2rem;
    font-weight: 200;
    line-height: 1;
    color: rgba(var(--primary-rgb), 0.35);
}
.onb-etapa-nome {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--primary-burgundy);
    margin: 0.5rem 0 0.4rem 0;
}
.onb-texto { font-size: 0.72rem; line-height: 1.65; color: #333; margin: 0; }
.onb-ficha {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.9rem 2.4rem;
    margin-top: 1.4rem;
}
.onb-ficha-item { border-bottom: 1px solid rgba(var(--primary-rgb), 0.18); padding-bottom: 0.35rem; }
.onb-ficha-rot {
    display: block;
    font-size: 0.58rem;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--text-light);
    margin-bottom: 2px;
}
.onb-ficha-val { font-size: 0.8rem; color: #1e293b; font-weight: 500; }
.onb-lista { list-style: none; padding: 0; margin: 0; }
.onb-lista li {
    font-size: 0.72rem;
    line-height: 1.55;
    color: #333;
    padding: 0.32rem 0 0.32rem 1.5rem;
    position: relative;
    border-bottom: 1px solid rgba(var(--primary-rgb), 0.08);
}
.onb-lista li::before {
    content: '';
    position: absolute;
    left: 0; top: 0.72rem;
    width: 9px; height: 9px;
    border: 1px solid rgba(var(--primary-rgb), 0.5);
    border-radius: 2px;
}
.onb-caixa {
    border: 1px solid rgba(var(--primary-rgb), 0.2);
    border-radius: 6px;
    padding: 1rem 1.1rem;
    background: rgba(var(--primary-rgb), 0.025);
}
.onb-caixa-tit {
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--primary-burgundy);
    margin: 0 0 0.5rem 0;
}
.onb-rodape {
    margin-top: auto;
    padding-top: 1.2rem;
    border-top: 1px solid rgba(var(--primary-rgb), 0.15);
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.6rem;
    letter-spacing: 1px;
    color: var(--text-light);
    text-transform: uppercase;
}

@media print {
    .onb-folha + .onb-folha { border-top: none; margin-top: 0; padding-top: 0; }
    .onb-folha { min-height: auto; }
}

/* ============================================================
   TELA DE ETAPA / OBRA — arrumacao pedida em 11/08/2026
   Tres defeitos foram MEDIDOS nesta tela e sao corrigidos aqui:

   1. FONTE — 122 elementos saiam em Arial e 33 em monospace (as datas).
      Controle de formulario (input/select/textarea/button) NAO herda a
      fonte do body: o navegador usa a dele se ninguem disser o contrario.
   2. RESPIRO — o botao "Adicionar Nova Categoria" era o ULTIMO pixel da
      pagina (fim do botao 2819px = fim da secao 2819px), entao encostava
      na borda e parecia engolido.
   3. ALINHAMENTO — na mesma linha havia campo de texto com 14px, campo de
      data com 17px e botao com 31px de altura, e a tela usava SEIS
      tamanhos de letra. Aqui campo e botao passam a ter altura unica.

   Escopo de proposito preso ao #stage-detail-section: o mesmo defeito de
   fonte existe no sistema inteiro, mas so esta tela foi pedida.
   ============================================================ */

#stage-detail-section,
#stage-detail-section input,
#stage-detail-section select,
#stage-detail-section textarea,
#stage-detail-section button {
    font-family: 'Poppins', sans-serif;
}

#stage-detail-section {
    padding-bottom: 140px;
}

/* ---- painel de obra ---- */
#stage-detail-section .obra-painel {
    margin-top: 1.5rem;
}

#stage-detail-section .obra-explica {
    font-size: 0.8rem;
    color: var(--text-light);
    line-height: 1.55;
    margin-bottom: 1.2rem;
}

#stage-detail-section .obra-form {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 1rem;
    align-items: end;
}

#stage-detail-section .obra-rotulo {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 0.7rem;
    font-weight: 500;
    color: var(--text-light);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

#stage-detail-section .obra-campo {
    height: 40px;
    box-sizing: border-box;
    width: 100%;
    background: white;
    border: 1px solid #E2E8F0;
    border-radius: 8px;
    padding: 0 12px;
    font-size: 0.82rem;
    color: var(--text-dark);
    outline: none;
    transition: border-color 0.2s ease;
}

#stage-detail-section .obra-campo:focus {
    border-color: var(--primary-burgundy);
}

#stage-detail-section .obra-botao-iniciar {
    height: 40px;
    margin: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

#stage-detail-section .obra-dica {
    margin-top: 1.1rem;
    padding-top: 0.9rem;
    border-top: 1px solid #F1F5F9;
    font-size: 0.72rem;
    color: var(--text-light);
}

/* ---- linha de pendencia: so aparece na etapa de obra ---- */
#stage-detail-section .subtask-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin: 2px 0 10px 28px;
    padding-bottom: 10px;
    border-bottom: 1px solid #F7FAFC;
}

#stage-detail-section .subtask-meta-rotulo {
    font-size: 0.68rem;
    color: var(--text-light);
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

#stage-detail-section .subtask-meta-campo {
    height: 30px;
    box-sizing: border-box;
    background: #FBFCFD;
    border: 1px solid #EDF2F7;
    border-radius: 6px;
    padding: 0 9px;
    font-size: 0.75rem;
    color: var(--text-dark);
    outline: none;
    transition: border-color 0.2s ease;
}

#stage-detail-section input[type="text"].subtask-meta-campo {
    width: 160px;
}

#stage-detail-section .subtask-meta-campo:focus {
    border-color: var(--primary-burgundy);
    background: white;
}

#stage-detail-section .subtask-meta-campo.vencida {
    color: #C53030;
    border-color: #FEB2B2;
    background: #FFFAFA;
}

#stage-detail-section .subtask-meta-vencida {
    font-size: 0.7rem;
    font-weight: 700;
    color: #C53030;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

#stage-detail-section .subtask-meta-nc {
    height: 30px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: none;
    border: 1px solid transparent;
    border-radius: 15px;
    padding: 0 12px;
    font-size: 0.7rem;
    color: var(--text-light);
    cursor: pointer;
    transition: all 0.2s ease;
}

#stage-detail-section .subtask-meta-nc:hover {
    border-color: #FEB2B2;
    color: #C53030;
}

#stage-detail-section .subtask-meta-nc.ativa {
    background: #FFF5F5;
    border-color: #FEB2B2;
    color: #C53030;
    font-weight: 600;
}

/* ---- lixeira da categoria (achado dele em 11/08/2026) ----
   Dava para criar categoria e apagar tarefa uma a uma, mas nao para apagar a
   categoria: quem criasse uma sem querer ficava com ela para sempre. Discreta
   como a lixeira da tarefa — so ganha cor quando o mouse passa, para nao
   competir com o "+" nem convidar ao clique errado. */
.checklist-category-acoes {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.btn-excluir-categoria {
    background: none;
    border: none;
    color: var(--text-light);
    cursor: pointer;
    padding: 2px 6px;
    font-size: 0.7rem;
    line-height: 1;
    opacity: 0.45;
    border-radius: 6px;
    transition: opacity 0.2s ease, color 0.2s ease, background 0.2s ease;
}

.btn-excluir-categoria:hover {
    opacity: 1;
    color: #C53030;
    background: #FFF5F5;
}

/* =========================================================================
   MARKETING — CENTRO DE CONTEUDO (11/08/2026)

   Reescrito a pedido dele: "melhore a visualizacao dessa pagina... deixe a
   pagina elegante, mais bonita", e a pergunta "letras estao em poppins?".

   MEDIDO, e a resposta era NAO: o botao "Novo conteudo" usa .btn-pill, que
   nao declara font-family — e controle de formulario NAO herda a fonte do
   body, o navegador usa a dele. Mesmo defeito da tela de etapa (secao 39).
   Aqui a fonte e imposta na secao inteira.

   Tudo preso a #marketing-section de proposito: o defeito de fonte existe no
   sistema todo, mas so esta tela foi pedida. E nenhuma cor bordo cravada —
   var(--primary-burgundy) e rgba(var(--primary-rgb), x), senao a engrenagem
   nao alcanca (secao 20).
   ========================================================================= */

#marketing-section input,
#marketing-section select,
#marketing-section textarea,
#marketing-section button {
    font-family: 'Poppins', sans-serif;
}

#marketing-section .section-header h2 { letter-spacing: 1px; }

/* A linha de instrucao sob o cabecalho MARKETING. O bloco .mkt-topo que
   existia aqui saiu em 11/08/2026: ele tirou o titulo "Centro de Conteudo" e o
   botao subiu para o cabecalho da secao, no padrao da Agenda. */
.mkt-sub {
    margin: 0 0 1.6rem;
    padding-bottom: 1.1rem;
    border-bottom: 1px solid var(--border-light);
    font-size: 0.78rem;
    color: var(--text-light);
    font-weight: 300;
}

.mkt-novo {
    background: var(--primary-burgundy);
    color: var(--white);
    border: none;
    border-radius: 20px;
    padding: 0.6rem 1.4rem;
    font-size: 0.78rem;
    font-weight: 500;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    transition: var(--transition);
}

.mkt-novo:hover {
    opacity: 0.88;
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(var(--primary-rgb), 0.22);
}

/* O quadro. auto-fit para nao espremer as 4 colunas em tela estreita. */
.mkt-quadro {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.1rem;
    align-items: start;
}

@media (max-width: 1100px) {
    .mkt-quadro { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
    .mkt-quadro { grid-template-columns: 1fr; }
}

/* Cada coluna ganha um fio de cor no topo — e o que deixa a leitura rapida
   sem precisar ler o titulo. A cor vem da variavel --mkt-cor, posta no HTML
   por coluna, para nao repetir quatro blocos quase iguais aqui. */
.mkt-coluna {
    background: #FCFCFD;
    border: 1px solid var(--border-light);
    border-radius: 14px;
    padding: 0;
    overflow: hidden;
    min-height: 180px;
    transition: background 0.18s ease, border-color 0.18s ease;
}

.mkt-coluna::before {
    content: '';
    display: block;
    height: 3px;
    background: var(--mkt-cor, var(--border-light));
}

.mkt-coluna-topo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.9rem 1rem 0.75rem;
}

.mkt-coluna-nome {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-dark);
}

.mkt-coluna-conta {
    font-size: 0.68rem;
    font-weight: 600;
    min-width: 22px;
    text-align: center;
    padding: 1px 7px;
    border-radius: 20px;
    color: var(--mkt-cor, var(--text-light));
    background: var(--mkt-cor-fraca, #EDF2F7);
}

.mkt-coluna-corpo {
    padding: 0 0.7rem 0.8rem;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    min-height: 96px;
}

/* Cartao */
.mkt-cartao {
    background: var(--white);
    border: 1px solid var(--border-light);
    border-radius: 10px;
    padding: 0.8rem 0.85rem;
    cursor: grab;
    transition: box-shadow 0.18s ease, transform 0.18s ease, border-color 0.18s ease;
}

.mkt-cartao:hover {
    border-color: rgba(var(--primary-rgb), 0.35);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.07);
    transform: translateY(-2px);
}

.mkt-cartao:active { cursor: grabbing; }

.mkt-cartao-tipo {
    display: inline-block;
    font-size: 0.6rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--primary-burgundy);
    background: rgba(var(--primary-rgb), 0.08);
    border-radius: 4px;
    padding: 2px 7px;
}

.mkt-cartao-titulo {
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--text-dark);
    line-height: 1.35;
    margin-top: 0.5rem;
    /* titulo longo nao pode esticar o cartao sem fim */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.mkt-cartao-pe {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.55rem;
    font-size: 0.68rem;
    color: var(--text-light);
    font-weight: 300;
}

/* Arrastando: o cartao apaga um pouco e a coluna de destino se acende.
   Sem esse retorno visual, arrastar vira adivinhacao. */
.mkt-cartao.arrastando {
    opacity: 0.4;
    transform: rotate(-1deg);
}

.mkt-coluna.alvo {
    background: rgba(var(--primary-rgb), 0.04);
    border-color: rgba(var(--primary-rgb), 0.45);
}

.mkt-coluna.alvo .mkt-coluna-corpo::after {
    content: 'soltar aqui';
    display: block;
    text-align: center;
    font-size: 0.68rem;
    color: var(--primary-burgundy);
    border: 1px dashed rgba(var(--primary-rgb), 0.45);
    border-radius: 8px;
    padding: 0.7rem 0;
}

/* Coluna vazia: dizer o que ela e, em vez do traco solto de antes */
.mkt-vazio {
    font-size: 0.7rem;
    color: #B8BEC7;
    font-weight: 300;
    text-align: center;
    padding: 1.1rem 0.4rem;
    border: 1px dashed #E8EBEF;
    border-radius: 8px;
}

/* Tela inteira sem nenhum conteudo */
.mkt-nada {
    grid-column: 1 / -1;
    text-align: center;
    padding: 3rem 1rem;
    color: var(--text-light);
}

.mkt-nada strong {
    display: block;
    color: var(--text-dark);
    font-weight: 500;
    font-size: 0.92rem;
    margin-bottom: 0.35rem;
}

.mkt-nada span { font-size: 0.8rem; font-weight: 300; }

/* =========================================================================
   MARKETING — captura rapida, constancia e filtro (12/08/2026, secao 47)

   Os tres saem das dores que ELE marcou: perder a ideia, nao saber o que
   postar, perder a constancia. Nenhuma cor bordo cravada — var(--primary-rgb)
   e var(--primary-burgundy), para a engrenagem alcancar (secao 20).
   ========================================================================= */

/* Captura rapida: uma linha so, sem modal. E a primeira coisa depois da
   instrucao porque e a dor numero 1 dele. */
.mkt-captura {
    display: flex;
    gap: 0.6rem;
    align-items: center;
    margin: 0 0 1rem;
    flex-wrap: wrap;
}

.mkt-captura input[type="text"] {
    flex: 1 1 320px;
    min-width: 0;
    border: 1px solid var(--border-light);
    border-radius: 22px;
    padding: 0.65rem 1.1rem;
    font-size: 0.8rem;
    font-weight: 300;
    color: var(--text-dark);
    background: var(--white);
    transition: var(--transition);
}

.mkt-captura input[type="text"]::placeholder {
    color: #B8BEC7;
}

.mkt-captura input[type="text"]:focus {
    outline: none;
    border-color: rgba(var(--primary-rgb), 0.5);
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.08);
}

.mkt-captura select {
    flex: 0 1 190px;
    border: 1px solid var(--border-light);
    border-radius: 22px;
    padding: 0.65rem 0.9rem;
    font-size: 0.75rem;
    font-weight: 300;
    color: var(--text-light);
    background: var(--white);
    cursor: pointer;
}

.mkt-captura-btn {
    border: 1px solid rgba(var(--primary-rgb), 0.35);
    background: rgba(var(--primary-rgb), 0.06);
    color: var(--primary-burgundy);
    border-radius: 22px;
    padding: 0.65rem 1.3rem;
    font-size: 0.78rem;
    font-weight: 500;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    white-space: nowrap;
    transition: var(--transition);
}

.mkt-captura-btn:hover {
    background: var(--primary-burgundy);
    color: var(--white);
    border-color: var(--primary-burgundy);
}

/* A faixa de constancia e o filtro dividem a mesma linha */
.mkt-barra {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin: 0 0 1.1rem;
}

.mkt-constancia {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
}

.mkt-sinal {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 0.72rem;
    font-weight: 400;
    padding: 0.32rem 0.8rem;
    border-radius: 20px;
    border: 1px solid transparent;
}

.mkt-sinal i { font-size: 0.7rem; }

.mkt-sinal.ok {
    color: #2F855A;
    background: #F0FFF4;
    border-color: #C6F6D5;
}

/* Vermelho de ALERTA, da mesma familia do "Hoje"/"Atrasado" — NAO trocar por
   variavel de marca: aviso que muda de cor com a marca deixa de avisar
   (secao 43). */
.mkt-sinal.alerta {
    color: #C53030;
    background: #FFF5F5;
    border-color: #FED7D7;
}

.mkt-sinal.neutro {
    color: var(--text-light);
    background: #F7FAFC;
    border-color: var(--border-light);
}

.mkt-filtro {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.72rem;
    color: var(--text-light);
    font-weight: 300;
}

.mkt-filtro select {
    border: 1px solid var(--border-light);
    border-radius: 20px;
    padding: 0.35rem 0.8rem;
    font-size: 0.72rem;
    color: var(--text-dark);
    background: var(--white);
    cursor: pointer;
    max-width: 230px;
}

.mkt-filtro select:focus {
    outline: none;
    border-color: rgba(var(--primary-rgb), 0.5);
}

/* A etiqueta de projeto no cartao. Discreta de proposito: o titulo e que tem
   de ser lido primeiro — o projeto e contexto, nao manchete. */
.mkt-cartao-projeto {
    display: block;
    margin-top: 0.45rem;
    font-size: 0.65rem;
    font-weight: 400;
    color: var(--text-light);
    padding-left: 0.6rem;
    border-left: 2px solid rgba(var(--primary-rgb), 0.35);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (max-width: 640px) {
    .mkt-captura input[type="text"],
    .mkt-captura select,
    .mkt-captura-btn { flex: 1 1 100%; }

    .mkt-barra { align-items: flex-start; flex-direction: column; }
}