:root {
    /* --- PALETA DE CORES --- */
    --color-socios: #2563EB;      
    --color-gerencia: #F97316;    
    --color-operacao: #0EA5E9;
    
    /* Cores Departamentos */
    --color-suporte: #10B981; 
    --color-dept: #8b5cf6;    
    --color-cyan: #06b6d4;    
    --color-purple: #8b5cf6;  
    --color-red: #ef4444;     
    
    /* Backgrounds e Linhas */
    --bg-color: #FAFAFA;      /* Branco Fosco */
    --card-bg: #FFFFFF;
    --line-color: #9CA3AF;        
    
    /* Efeitos de Sombra */
    --shadow-card: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-hover: 0 20px 25px -5px rgba(0, 0, 0, 0.15), 0 10px 10px -5px rgba(0, 0, 0, 0.05);
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    -webkit-font-smoothing: antialiased;
    user-select: none; 
    -webkit-tap-highlight-color: transparent;
}

body {
    font-family: 'Inter', sans-serif;
    background-color: var(--bg-color);
    /* Habilita rolagem em ambos os eixos para facilitar navegação com zoom */
    overflow-y: auto;
    overflow-x: auto; 
    width: 100vw;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    touch-action: pan-y;
}

/* --- BOTÃO VOLTAR --- */
.btn-back {
    position: fixed;
    top: 40px;
    left: 40px;
    text-decoration: none;
    color: #64748b;
    font-weight: 700;
    font-size: 0.9rem;
    padding: 12px 24px;
    background: white;
    border-radius: 50px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
    transition: all 0.2s ease;
    z-index: 1000;
    display: flex;
    align-items: center;
    gap: 8px;
    border: 1px solid rgba(0,0,0,0.05);
    pointer-events: auto; /* Garante que o botão seja clicável */
}
.btn-back:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    color: var(--color-socios);
    border-color: var(--color-socios);
}

/* --- ÁREA DE VISUALIZAÇÃO --- */
#pan-container {
    width: 100%; 
    min-height: 100vh;
    cursor: default;
    display: flex; 
    justify-content: center; 
    align-items: flex-start; 
    position: relative; 
    overflow: visible; 
    padding: 40px 0; 
}

/* --- BLINDAGEM DE EVENTOS (CRÍTICO) --- */
/* Desativa eventos de mouse em tudo dentro do container para evitar bloqueios por linhas invisíveis */
.view-container * {
    pointer-events: none;
}

.view-container {
    transform-origin: top center; 
    /* Recuo ajustado para equilíbrio visual na tela */
    padding: 50px 50px 50px 200px; 
    transition: transform 0.3s ease-out;
    will-change: transform; 
    width: max-content; 
    height: max-content;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* --- CABEÇALHO DENTRO DO FLUXO --- */
.header-wrapper {
    width: 100%;
    position: relative;
    display: flex;
    justify-content: center; 
    align-items: center;
    margin-bottom: 60px; 
    padding-right: 20px; 
    pointer-events: none; /* O header em si não bloqueia mouse */
}

.main-title {
    text-align: center;
    font-size: 2.5rem;
    font-weight: 800;
    color: #1e293b; 
    text-transform: uppercase;
    letter-spacing: 0.2em; 
    opacity: 0.9;
    margin: 0; 
}

.company-logo {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%); 
    max-height: 100px; /* Tamanho da logo ajustado */
    width: auto;
    object-fit: contain;
}

/* GRID PRINCIPAL */
.org-grid {
    display: grid;
    grid-template-columns: repeat(6, 300px);
    grid-template-rows: 
        [row1-start] auto [row1-end] 50px 
        [row3-start] auto [row3-end] 40px 
        [row5-start] auto [row5-end] 40px 
        [row7-start] auto [row7-end] 40px
        [row9-start] auto [row9-end];
    gap: 0; 
    position: relative;
    justify-content: center;
}

/* --- ESTILO DOS CARDS (CLIQUE E HOVER) --- */
.card {
    /* REATIVA O MOUSE APENAS NOS CARDS */
    pointer-events: auto !important; 
    
    background-color: #FFFFFF; 
    background-image: linear-gradient(180deg, #FFFFFF 0%, #F9FAFB 100%);
    border-radius: 50px; 
    padding: 12px 25px 12px 45px; 
    position: relative;
    box-shadow: var(--shadow-card);
    border: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    min-height: 60px; 
    z-index: 10; /* Camada padrão acima das linhas */
    cursor: default;
    transition: transform 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow 0.2s ease;
    width: 260px; 
    overflow: visible;
    margin: 0 auto;
    opacity: 1;
    transform: translateY(0);
}

/* HOVER ROBUSTO E PRIORITÁRIO */
.card:hover {
    transform: translateY(-8px) scale(1.02) !important;
    box-shadow: var(--shadow-hover) !important;
    z-index: 9999 !important; /* Garante que nada cubra o card no hover */
    background: #FFFFFF !important; /* Mantém fundo sólido */
}

.card.clickable { cursor: pointer; }

/* --- ÍCONE DE EXPANSÃO (+) --- */
.expand-icon {
    position: absolute;
    bottom: -14px;
    left: 50%;
    transform: translateX(-50%);
    width: 28px;
    height: 28px;
    background-color: #FFFFFF;
    border: 2px solid var(--color-operacao);
    color: var(--color-operacao);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 18px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
    z-index: 20;
    pointer-events: none; /* O clique é no card pai */
}

/* Temas dos Ícones */
.theme-operacao .expand-icon { border-color: var(--color-operacao); color: var(--color-operacao); }

/* Estado Expandido */
.card.expanded .expand-icon {
    transform: translateX(-50%) rotate(45deg);
    background-color: #ef4444;
    border-color: #ef4444;
    color: white;
    box-shadow: 0 4px 8px rgba(239, 68, 68, 0.3);
}

/* Efeito no Hover do Card */
.card:hover .expand-icon {
    transform: translateX(-50%) scale(1.1);
}
.card.expanded:hover .expand-icon {
    transform: translateX(-50%) rotate(45deg) scale(1.1);
}

/* Cards filhos (Animação de Entrada) */
.child-anim-card {
    opacity: 0;
    transform: translateY(-10px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}
.child-anim-card.visible {
    opacity: 1;
    transform: translateY(0);
}

.card-small { width: 200px; padding: 10px 15px 10px 30px; min-height: 50px; }

/* Bordas SVG */
.card-svg-container {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: visible; border-radius: 50px; z-index: 11; pointer-events: none;
}
.border-svg { width: 100%; height: 100%; overflow: visible; }
.border-bg { fill: none; stroke: #9CA3AF; stroke-width: 2; stroke-dasharray: 6, 6; opacity: 0.6; }
.border-fg { fill: none; stroke: var(--theme-color); stroke-width: 6; stroke-linecap: round; }

/* Tipografia */
.card h3 { font-size: 1.1rem; color: #111827; font-weight: 700; line-height: 1.2; margin-bottom: 2px; position: relative; z-index: 12; }
.card p { font-size: 0.95rem; color: #6B7280; font-weight: 500; margin: 0; position: relative; z-index: 12; }
.card-small h3 { font-size: 1.0rem; }
.card-small p { font-size: 0.85rem; }
.card:hover h3 { color: var(--theme-color); }

/* Cores Temáticas */
.theme-socios { --theme-color: var(--color-socios); }
.theme-gerencia { --theme-color: var(--color-gerencia); }
.theme-operacao { --theme-color: var(--color-operacao); }
.theme-suporte { --theme-color: var(--color-suporte); }
.theme-dept { --theme-color: var(--color-dept); }
.theme-cyan { --theme-color: var(--color-cyan); }
.theme-purple { --theme-color: var(--color-purple); }
.theme-red { --theme-color: var(--color-red); }

/* --- LINHAS E ESTRUTURA (Z-INDEX 0) --- */
/* Garante que todas as linhas fiquem no fundo */
.anim-line-v, .anim-line-h, .fin-vertical-line, .connector-h, .connector-vertical, .log-stem-container, .log-conn, .suporte-arm, .com-stem-1, .com-stem-2, .com-juridico-arm, .line-vertical-spine-through, .line-cross-conselho, .line-cross-gerencia, .line-cross-operacao {
    z-index: 0 !important; 
}

.child-col::before, .child-col::after, .log-bottom-row::before, .log-bottom-row::after, .log-leaf::before {
    z-index: 0 !important;
}

/* Posicionamento do Grid */
.pos-socios { grid-column: 3 / 5; grid-row: 1; }
.pos-conselho { grid-column: 2 / 4; grid-row: 3; margin-right: 20px; align-self: center; justify-self: end; }
.pos-ger-projetos { grid-column: 2 / 4; grid-row: 5; margin-right: 20px; align-self: center; justify-self: end; }
.pos-qualidade { grid-column: 4 / 6; grid-row: 5; margin-left: 20px; align-self: center; justify-self: start; }
.pos-financeiro { grid-column: 1 / 3; grid-row: 7; }
.pos-operacao { grid-column: 3 / 5; grid-row: 7; }
.pos-comercial { grid-column: 5 / 7; grid-row: 7; }

/* Linhas Estáticas */
.line-vertical-spine-through { grid-column: 3 / 5; width: 2px; background: linear-gradient(to bottom, transparent 20px, var(--line-color) 50px, var(--line-color) calc(100% - 50px), transparent); justify-self: center; position: relative; grid-row: 1 / 8; height: 100%; }
.line-cross-conselho { grid-column: 3 / 4; grid-row: 3; height: 2px; background-color: var(--line-color); width: 40px; margin-right: 0; justify-self: end; align-self: center; }
.line-cross-gerencia { grid-column: 3 / 5; grid-row: 5; height: 2px; background-color: var(--line-color); width: 80px; justify-self: center; align-self: center; }
.line-cross-operacao { grid-column: 1 / 7; grid-row: 7; height: 2px; background-color: var(--line-color); width: 1200px; align-self: center; justify-self: center; }

.collapsed { display: none !important; }

/* Animações de Linhas */
.anim-line-v { height: 0 !important; transition: height 0.2s ease-out; }
.anim-line-v.draw { height: 100% !important; }
.anim-line-h { width: 0 !important; transition: width 0.2s ease-out; }
.anim-line-h.draw { width: 40px !important; } 

.op-stem-main.anim-line-v.draw { height: 60px !important; }
.op-stem-mid.anim-line-v.draw { height: 60px !important; }
.op-stem-bottom-segment.anim-line-v.draw { height: 100px !important; }
.op-stem-final.anim-line-v.draw { height: 60px !important; }
.com-stem-1.anim-line-v.draw { height: 40px !important; }
.com-stem-2.anim-line-v.draw { height: 100px !important; }

.child-col::before { transition: height 0.15s ease; height: 0; }
.child-col.trace-v::before { height: 20px; }
.child-col::after { transition: width 0.2s ease; width: 0; }
.child-col::after { 
    content: ''; position: absolute; top: -20px; height: 2px; background-color: var(--line-color); 
    transform: scaleX(0); transition: transform 0.2s ease-out;
}
.child-col.trace-right::after { transform-origin: left center; transform: scaleX(1); }
.child-col.trace-left::after { transform-origin: right center; transform: scaleX(1); }
.child-col.trace-center::after { transform-origin: center center; transform: scaleX(1); }

.fin-children-row .child-col:first-child::after { width: calc(50% + 15px); left: 50%; }
.fin-children-row .child-col:last-child::after { width: calc(50% + 15px); right: 50%; }
.fin-children-row .child-col:not(:first-child):not(:last-child)::after { width: calc(100% + 30px); left: -15px; }

.op-children-row .child-col:first-child::after { width: calc(50% + 10px); left: 50%; }
.op-children-row .child-col:last-child::after { width: calc(50% + 10px); right: 50%; }
.op-children-row .child-col:not(:first-child):not(:last-child)::after { width: calc(100% + 20px); left: -10px; }

.com-children-row .child-col:first-child::after { width: calc(50% + 15px); left: 50%; }
.com-children-row .child-col:last-child::after { width: calc(50% + 15px); right: 50%; }
.com-children-row .child-col:nth-child(2)::after { width: calc(100% + 30px); left: -15px; }

/* Estruturas Específicas */
.children-area-financeiro { grid-column: 1 / 3; grid-row: 8 / 10; display: flex; justify-content: center; position: relative; padding-top: 0; width: 100%; min-width: 800px; margin-left: -200px; z-index: 5; }
.fin-structure { display: flex; flex-direction: column; align-items: center; width: 100%; position: relative; }
.fin-stem-container { width: 100%; height: 120px; position: relative; display: flex; justify-content: center; }
.fin-vertical-line { width: 2px; height: 100%; background-color: var(--line-color); z-index: 1; } 
.suporte-wrapper { position: absolute; top: 50%; left: 50%; transform: translateY(-50%); display: flex; align-items: center; z-index: 2; }
.suporte-arm { width: 40px; height: 2px; background-color: var(--line-color); z-index: 1; } 
.fin-children-row { display: flex; justify-content: center; gap: 30px; padding-top: 20px; position: relative; }
.child-col { display: flex; flex-direction: column; align-items: center; position: relative; }
.child-col::before { content: ''; position: absolute; top: -20px; left: 50%; width: 2px; height: 20px; background-color: var(--line-color); transform: translateX(-50%); }
.child-col::after { content: ''; position: absolute; top: -20px; height: 2px; background-color: var(--line-color); }

.children-area-operacao { grid-column: 1 / -1; grid-row: 8 / 10; display: flex; justify-content: center; position: relative; padding-top: 0; width: 100%; z-index: 5; }
.op-structure { display: flex; flex-direction: column; align-items: center; width: 100%; position: relative; }
.op-stem-main { width: 2px; height: 60px; background-color: var(--line-color); position: relative; z-index: 1; }
.op-level-tic-gestao { display: flex; align-items: center; justify-content: center; position: absolute; top: 60px; width: 100%; z-index: 2; }
.op-tic-wrapper { position: absolute; right: 50%; display: flex; align-items: center; padding-right: 2px; }
.op-gestao-wrapper { position: absolute; left: 50%; display: flex; align-items: center; padding-left: 2px; }
.connector-h { width: 40px; height: 2px; background-color: var(--line-color); z-index: 1; }
.op-stem-mid { width: 2px; height: 60px; background-color: var(--line-color); z-index: 1; }
.op-regulatorio-container { position: absolute; top: 120px; left: 50%; display: flex; align-items: center; padding-left: 2px; z-index: 2; }
.op-stem-bottom-segment { width: 2px; height: 100px; background-color: var(--line-color); z-index: 1; }
.op-stem-final { width: 2px; height: 60px; background-color: var(--line-color); z-index: 1; }
.op-children-row { display: flex; justify-content: center; gap: 20px; padding-top: 20px; position: relative; transform: translateX(220px); }

.log-tree { display: flex; flex-direction: column; align-items: center; position: relative; }
.log-stem-container { position: relative; width: 2px; height: 140px; background: var(--line-color); margin-bottom: 20px; opacity: 0; transition: opacity 0.3s ease; z-index: 1; }
.log-branch { position: absolute; right: 2px; display: flex; align-items: center; justify-content: flex-end; padding-right: 0; opacity: 0; transition: opacity 0.3s ease; z-index: 2; }
.log-branch .card { margin-right: 0; }
.log-branch .log-conn { width: 30px; height: 2px; background: var(--line-color); z-index: 1; }
.log-branch.b1 { top: 10px; }
.log-branch.b2 { top: 70px; }
.log-bottom-row { display: flex; justify-content: center; gap: 10px; position: relative; opacity: 0; transition: opacity 0.3s ease; z-index: 2; }
.log-bottom-row::after { content: ''; position: absolute; top: -20px; height: 2px; background: var(--line-color); left: 100px; right: 100px; z-index: 1; }
.log-bottom-row::before { content: ''; position: absolute; top: -20px; left: 50%; width: 2px; height: 20px; background: var(--line-color); z-index: 1; }
.log-leaf { position: relative; display: flex; flex-direction: column; align-items: center; }
.log-leaf::before { content: ''; position: absolute; top: -20px; height: 20px; width: 2px; background: var(--line-color); z-index: 1; }
.child-col.trace-v .log-stem-container, .child-col.trace-v .log-branch, .child-col.trace-v .log-bottom-row { opacity: 1; }

.children-area-comercial { grid-column: 5 / 7; grid-row: 8 / 10; display: flex; justify-content: center; position: relative; padding-top: 0; width: 100%; min-width: 800px; margin-left: -100px; z-index: 5; }
.com-structure { display: flex; flex-direction: column; align-items: center; width: 100%; position: relative; }
.com-stem-1 { width: 2px; height: 40px; background-color: var(--line-color); z-index: 1; }
.com-stem-2 { width: 2px; height: 100px; background-color: var(--line-color); position: relative; z-index: 1; }
.com-juridico-wrapper { position: absolute; top: 50%; left: 50%; transform: translateY(-50%); display: flex; align-items: center; z-index: 2; }
.com-juridico-arm { width: 40px; height: 2px; background-color: var(--line-color); z-index: 1; }
.com-children-row { display: flex; justify-content: center; gap: 30px; padding-top: 20px; position: relative; }

.connector-vertical { width: 2px; height: 30px; background-color: var(--line-color); margin: 0 auto; transition: height 0.2s ease; height: 0; z-index: 1; }
.trace-v .connector-vertical { height: 30px; }