/* =========================================
   AGÊNCIA OS - STYLE ENGINE (Corrigido)
   ========================================= */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&family=Space+Grotesk:wght@500;700&display=swap');

:root {
    /* TEMA LIGHT */
    --bg-body: #ffffff;
    --bg-panel: #ffffff;
    --bg-sidebar: #0a0a0a;
    --bg-hover: #f4f4f5;
    --bg-input: #ffffff;
    
    --text-main: #09090b;
    --text-muted: #71717a;
    --text-sidebar: #a1a1aa;
    
    --border: #e4e4e7;
    --primary: #18181b; /* Preto Elegante */
    --primary-fg: #ffffff;
    
    --radius: 6px;
    --font-head: 'Space Grotesk', sans-serif;
    --font-body: 'Inter', sans-serif;
}

[data-theme="dark"] {
    /* TEMA DARK */
    --bg-body: #09090b;
    --bg-panel: #18181b;
    --bg-sidebar: #000000;
    --bg-hover: #27272a;
    --bg-input: #27272a;
    
    --text-main: #f4f4f5;
    --text-muted: #a1a1aa;
    --text-sidebar: #d4d4d8;
    
    --border: #27272a;
    --primary: #ffffff;
    --primary-fg: #000000;
}

/* --- RESET --- */
* { margin: 0; padding: 0; box-sizing: border-box; }
body { background: var(--bg-body); color: var(--text-main); font-family: var(--font-body); font-size: 14px; line-height: 1.5; transition: 0.3s; }
a { text-decoration: none; color: inherit; }
h1, h2, h3 { font-family: var(--font-head); font-weight: 700; letter-spacing: -0.02em; }

/* --- LAYOUT --- */
.app-container { display: flex; height: 100vh; overflow: hidden; }
.main-content { flex: 1; padding: 2rem; overflow-y: auto; background: var(--bg-body); }

/* --- SIDEBAR --- */
.sidebar { width: 250px; background: var(--bg-sidebar); color: var(--text-sidebar); display: flex; flex-direction: column; padding: 1.5rem; border-right: 1px solid var(--border); }
.sidebar-header { margin-bottom: 2rem; color: #fff; font-family: var(--font-head); font-size: 1.2rem; }
.nav-link { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: var(--radius); margin-bottom: 5px; transition: 0.2s; }
.nav-link:hover { background: rgba(255,255,255,0.1); color: #fff; }

/* --- COMPONENTES --- */
.btn-primary { 
    background: var(--primary); color: var(--primary-fg); padding: 8px 16px; 
    border-radius: var(--radius); font-weight: 600; border: 1px solid var(--primary); 
    cursor: pointer; display: inline-flex; align-items: center; justify-content: center; 
}
.btn-primary:hover { opacity: 0.9; transform: translateY(-1px); }

/* --- VIEW SWITCHER (AS ABAS) --- */
.view-switcher { 
    display: inline-flex; background: var(--bg-hover); padding: 4px; 
    border-radius: 8px; margin-bottom: 20px; border: 1px solid var(--border);
}
.view-btn { 
    padding: 6px 14px; border: none; background: transparent; color: var(--text-muted); 
    font-weight: 500; cursor: pointer; border-radius: 6px; display: flex; align-items: center; gap: 6px; font-family: var(--font-body);
}
.view-btn.active { background: var(--bg-panel); color: var(--text-main); box-shadow: 0 1px 3px rgba(0,0,0,0.1); }

/* --- VISUALIZAÇÕES (MÁGICA DO DISPLAY) --- */
.view-section { display: none; animation: fadeEffect 0.4s; } /* ESCONDIDO POR PADRÃO */
.view-section.active-view { display: block; } /* MOSTRADO QUANDO ATIVO */

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

/* =========================================
   TELA DE LOGIN (SPLIT SCREEN - LUXURY)
   ========================================= */

/* O Container Principal que divide a tela */
.login-screen {
    display: flex;
    min-height: 100vh;
    width: 100%;
    overflow: hidden;
}

/* Lado Esquerdo (Visual/Imagem) */
.login-visual {
    flex: 1; /* Ocupa metade */
    background-image: url('https://images.unsplash.com/photo-1497366216548-37526070297c?auto=format&fit=crop&w=1600&q=80');
    background-size: cover;
    background-position: center;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 3rem;
    color: white;
}

/* Máscara escura sobre a imagem */
.login-visual::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(to bottom, rgba(0,0,0,0.3), rgba(0,0,0,0.8));
    z-index: 1;
}

/* Texto sobre a imagem */
.visual-content {
    position: relative;
    z-index: 2;
    max-width: 500px;
}
.visual-quote {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 1rem;
}

/* Lado Direito (Formulário) */
.login-form-wrapper {
    flex: 1; /* Ocupa a outra metade */
    background: var(--bg-body);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    position: relative;
}

/* A caixa do formulário */
.login-box {
    width: 100%;
    max-width: 420px;
    animation: fadeInUp 0.8s cubic-bezier(0.19, 1, 0.22, 1);
}

.login-title {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--text-main);
    margin-bottom: 0.5rem;
    letter-spacing: -1px;
}

.login-subtitle {
    color: var(--text-muted);
    margin-bottom: 2.5rem;
    font-size: 1rem;
}

/* Ajustes no Input para Login */
.login-input-group { margin-bottom: 1.5rem; }

.login-btn {
    width: 100%;
    height: 56px; /* Botão alto */
    background: var(--text-main); /* Preto no light, Branco no dark */
    color: var(--bg-body); /* Inverso */
    border: none;
    border-radius: 12px;
    font-weight: 600;
    font-size: 1rem;
    cursor: pointer;
    transition: transform 0.2s, opacity 0.2s;
    margin-top: 1rem;
}
.login-btn:hover {
    transform: translateY(-2px);
    opacity: 0.9;
}

/* Link de "Esqueci a senha" */
.forgot-link {
    display: block;
    text-align: center;
    margin-top: 1.5rem;
    color: var(--text-muted);
    font-size: 0.9rem;
    text-decoration: none;
}
.forgot-link:hover { color: var(--text-main); text-decoration: underline; }

/* Responsivo: No celular, esconde a imagem */
@media (max-width: 900px) {
    .login-visual { display: none; }
    .login-form-wrapper { flex: auto; width: 100%; }
}



/* 1. KANBAN */
.kanban-board { display: flex; gap: 1rem; overflow-x: auto; align-items: flex-start; padding-bottom: 20px; }
.kanban-column { min-width: 280px; flex: 1; background: var(--bg-hover); padding: 1rem; border-radius: var(--radius); border: 1px solid var(--border); }
.kanban-card { background: var(--bg-panel); padding: 1rem; margin-bottom: 10px; border-radius: var(--radius); border: 1px solid var(--border); cursor: pointer; transition: 0.2s; }
.kanban-card:hover { border-color: var(--text-muted); box-shadow: 0 4px 12px rgba(0,0,0,0.05); }

/* 2. LISTA */
.list-container { border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; background: var(--bg-panel); }
.list-row { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr 0.5fr; padding: 12px; border-bottom: 1px solid var(--border); align-items: center; transition: 0.2s; font-size: 0.9rem; }
.list-row:hover { background: var(--bg-hover); }
.list-header { background: var(--bg-hover); font-weight: 600; color: var(--text-muted); font-size: 0.8rem; text-transform: uppercase; }

/* 3. GALERIA */
.gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1.5rem; }
.gallery-card { background: var(--bg-panel); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; transition: 0.3s; }
.gallery-card:hover { transform: translateY(-4px); box-shadow: 0 10px 20px -5px rgba(0,0,0,0.1); }
.gallery-cover { height: 120px; background: var(--bg-hover); display: flex; align-items: center; justify-content: center; font-size: 2rem; }

/* 4. TIMELINE */
.timeline-container { border-left: 2px solid var(--border); margin-left: 10px; padding-left: 20px; }
.timeline-item { position: relative; margin-bottom: 20px; display: block; padding: 10px; background: var(--bg-panel); border: 1px solid var(--border); border-radius: var(--radius); transition: 0.2s; }
.timeline-item::before { content: ''; position: absolute; left: -26px; top: 50%; width: 10px; height: 10px; background: var(--primary); border-radius: 50%; transform: translateY(-50%); }
.timeline-item:hover { transform: translateX(5px); border-color: var(--text-muted); }

/* DARK MODE BUTTON */
.theme-toggle { margin-top: auto; background: transparent; border: 1px solid rgba(255,255,255,0.2); color: #fff; padding: 10px; cursor: pointer; border-radius: var(--radius); display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; }

/* =========================================
   ESTILO "LUXURY LIST" (Área do Cliente)
   ========================================= */

/* A lista em si */
.luxury-list {
    display: flex;
    flex-direction: column;
    margin-top: 2rem;
    border-top: 1px solid rgba(255,255,255,0.1); /* Linha sutil no topo */
}

/* Cada item (Projeto) */
.luxury-item {
    display: grid;
    grid-template-columns: 50px 1fr 50px; /* Espaço pro Numero | Texto | Seta */
    align-items: center;
    padding: 2.5rem 0;
    border-bottom: 1px solid var(--border-color); /* Linha divisória */
    text-decoration: none;
    color: var(--text-main);
    transition: all 0.4s cubic-bezier(0.19, 1, 0.22, 1); /* Animação suave */
    position: relative;
}

/* Dark Mode ajustado para essa lista */
[data-theme="dark"] .luxury-item { border-bottom-color: rgba(255,255,255,0.1); }

/* 01. O Número (Esquerda) */
.luxury-index {
    font-family: 'Inter', monospace;
    font-size: 0.85rem;
    color: var(--text-muted);
    font-weight: 400;
}

/* 02. O Título (Centro) */
.luxury-title {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 2.5rem; /* Fonte bem grande como na imagem */
    font-weight: 500;
    text-align: center;
    transition: transform 0.4s ease;
}

/* 03. A Seta (Direita - Escondida no início) */
.luxury-arrow {
    font-size: 1.5rem;
    color: #f97316; /* Laranja da imagem */
    opacity: 0;
    transform: translateX(-20px);
    transition: all 0.4s ease;
    text-align: right;
}

/* --- EFEITO HOVER (A Mágica) --- */
.luxury-item:hover {
    padding-left: 10px; /* Leve movimento */
}

.luxury-item:hover .luxury-title {
    color: #f97316; /* Muda texto para laranja */
}

.luxury-item:hover .luxury-arrow {
    opacity: 1; /* Aparece a seta */
    transform: translateX(0); /* Seta desliza para o lugar */
}

/* Responsivo (Celular) */
@media (max-width: 768px) {
    .luxury-title { font-size: 1.5rem; text-align: left; }
    .luxury-item { grid-template-columns: 30px 1fr 30px; padding: 1.5rem 0; }
}


/* =========================================
   DASHBOARD MINIMALISTA & CALENDÁRIO
   ========================================= */

/* Grid Principal (Estatísticas) */
.dashboard-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2rem;
}

/* Card de Estatística (Estilo Bliss) */
.stat-card {
    background: var(--bg-panel);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 2rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 180px;
    transition: transform 0.3s var(--ease-expo);
    position: relative;
    overflow: hidden;
}

.stat-card:hover {
    transform: translateY(-5px);
    border-color: var(--text-muted);
}

.stat-label {
    font-size: 0.9rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.stat-number {
    font-family: var(--font-head);
    font-size: 4rem; /* Número Gigante */
    font-weight: 500;
    color: var(--text-main);
    line-height: 1;
    margin-top: auto; /* Empurra para baixo */
}

/* Ícone sutil no fundo */
.stat-icon-bg {
    position: absolute;
    right: -20px;
    top: -20px;
    font-size: 8rem;
    opacity: 0.03;
    pointer-events: none;
}

/* Grid de Conteúdo (Projetos + Calendário) */
.dashboard-content {
    display: grid;
    grid-template-columns: 2fr 1fr; /* 2 partes projetos, 1 parte calendário */
    gap: 2rem;
}

@media (max-width: 900px) {
    .dashboard-content { grid-template-columns: 1fr; }
}

/* Widget de Calendário */
.calendar-widget {
    background: var(--bg-panel);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.5rem;
}

.clock-display {
    font-family: var(--font-head);
    font-size: 2.5rem;
    font-weight: 500;
    text-align: center;
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border);
}

.calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 5px;
    text-align: center;
}

.cal-day-header {
    font-size: 0.8rem;
    color: var(--text-muted);
    padding-bottom: 10px;
}

.cal-day {
    padding: 8px;
    font-size: 0.9rem;
    border-radius: 4px;
    color: var(--text-main);
}

.cal-day.today {
    background: var(--text-main);
    color: var(--bg-body);
    font-weight: bold;
}

.cal-day.empty { background: transparent; }


/* =========================================
   FORMULÁRIOS "MODERN TECH" (Estilo Zapta)
   ========================================= */

/* Wrapper do Campo (Para garantir espaçamento) */
.form-group {
    margin-bottom: 1.5rem;
    position: relative;
}

/* Labels (O Texto em cima) */
.form-label {
    display: block;
    font-family: 'Inter', sans-serif;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-main);
    margin-bottom: 0.6rem;
    letter-spacing: 0.01em;
}

/* O Input em si (A Caixa) */
.form-input {
    width: 100%;
    background-color: var(--bg-panel); /* Fundo do painel */
    color: var(--text-main);
    
    /* Tamanho e Espaço */
    padding: 14px 18px; 
    height: 52px; /* Altura fixa para consistência */
    
    /* Borda e Arredondamento (A chave do visual) */
    border: 1px solid var(--border); 
    border-radius: 12px; /* Arredondamento moderno */
    
    /* Tipografia */
    font-family: var(--font-body);
    font-size: 0.95rem;
    
    /* Transição suave */
    transition: all 0.3s cubic-bezier(0.19, 1, 0.22, 1);
}

/* Textarea (Caixa de Texto Grande) */
textarea.form-input {
    height: auto; /* Altura livre */
    min-height: 140px;
    line-height: 1.6;
    resize: vertical;
}

/* Select (Menu Suspenso) */
select.form-input {
    appearance: none; /* Remove seta padrão feia do navegador */
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 15px center;
    background-size: 16px;
    padding-right: 40px;
}
/* Ajuste de cor da seta no Dark Mode */
[data-theme="dark"] select.form-input {
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
}

/* ESTADO DE FOCO (Quando clica) */
.form-input:focus {
    outline: none;
    border-color: var(--text-main); /* Fica preto (ou branco no dark) */
    box-shadow: 0 0 0 4px rgba(128, 128, 128, 0.1); /* Anel de luz sutil */
    transform: translateY(-1px); /* Leve subida */
}

/* Placeholders */
.form-input::placeholder { color: var(--text-muted); opacity: 0.6; }

/* Wrapper do Formulário (O Cartão Branco/Preto) */
.form-card {
    background: var(--bg-panel);
    border: 1px solid var(--border);
    border-radius: 16px; /* Borda mais arredondada no container */
    padding: 2.5rem;
    box-shadow: var(--shadow);
    max-width: 900px;
    margin: 0 auto; /* Centralizado, mas largo */
}

/* Título da Seção do Form */
.form-section-title {
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--border);
    color: var(--text-main);
}

/* =========================================
   DETALHES DO PROJETO (ZAPTA STYLE)
   ========================================= */

/* Grid Principal de Detalhes */
.details-grid {
    display: grid;
    grid-template-columns: 2fr 1fr; /* 2 partes esquerda, 1 direita */
    gap: 2rem;
    align-items: start;
}

@media (max-width: 900px) { .details-grid { grid-template-columns: 1fr; } }

/* Cards de Itens (Tarefas e Arquivos) */
/* Eles imitam o visual dos Inputs modernos */
.item-card {
    background: var(--bg-panel);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 12px 16px;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: all 0.2s;
}

.item-card:hover {
    border-color: var(--text-muted);
    transform: translateX(4px); /* Leve movimento para direita */
}

/* Checkbox Personalizado (Visual) */
.custom-check {
    width: 20px; 
    height: 20px; 
    border: 2px solid var(--border); 
    border-radius: 6px; 
    display: inline-flex; 
    align-items: center; 
    justify-content: center;
    margin-right: 12px;
    color: transparent;
    transition: 0.2s;
}

.item-card.completed .custom-check {
    background: var(--text-main);
    border-color: var(--text-main);
    color: var(--bg-body);
}

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

/* Badge de Status Grande */
.status-badge-lg {
    display: inline-block;
    padding: 8px 16px;
    border-radius: 50px;
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Status Colors */
.status-pending { background: #f1f5f9; color: #475569; }
.status-in_progress { background: #eff6ff; color: #2563eb; }
.status-approval { background: #fff7ed; color: #ea580c; }
.status-completed { background: #f0fdf4; color: #166534; }

/* =========================================
   DETALHES DO PROJETO COM CAPA (Facebook Style)
   ========================================= */

/* O Card Principal que segura tudo */
.project-card-wrapper {
    background: var(--bg-panel);
    border: 1px solid var(--border);
    border-radius: 16px;
    overflow: hidden; /* Para a imagem não sair das bordas arredondadas */
    box-shadow: var(--shadow);
    margin-bottom: 2rem;
}

/* A Capa do Projeto */
.project-cover {
    height: 250px;
    width: 100%;
    background-color: #cbd5e1; /* Cor padrão se não tiver foto */
    background-size: cover;
    background-position: center;
    position: relative;
    border-bottom: 1px solid var(--border);
}

/* Botão de Trocar Capa (Canto inferior direito da capa) */
.btn-change-cover {
    position: absolute;
    bottom: 20px;
    right: 20px;
    background: rgba(0, 0, 0, 0.6);
    color: white;
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 0.85rem;
    cursor: pointer;
    backdrop-filter: blur(4px);
    border: 1px solid rgba(255,255,255,0.2);
    display: flex;
    align-items: center;
    gap: 8px;
    transition: 0.2s;
}
.btn-change-cover:hover { background: rgba(0, 0, 0, 0.8); }

/* Cabeçalho do Projeto (Logo abaixo da capa) */
.project-header-info {
    padding: 2rem 2.5rem;
    border-bottom: 1px solid var(--border);
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}

@media (max-width: 768px) {
    .project-header-info { flex-direction: column; align-items: flex-start; gap: 1rem; }
}

/* Conteúdo Interno (Grid) */
.project-body {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 0; /* A divisão será feita por bordas */
}

@media (max-width: 900px) { .project-body { grid-template-columns: 1fr; } }

.body-main { padding: 2.5rem; }
.body-sidebar { 
    padding: 2.5rem; 
    border-left: 1px solid var(--border); 
    background: var(--bg-hover); /* Leve contraste na sidebar */
}

/* Ajuste Dark Mode */
[data-theme="dark"] .body-sidebar { background: rgba(255,255,255,0.02); }

/* =========================================
   SOCIAL MEDIA MANAGER (Visual Zapta/Bliss)
   ========================================= */

/* Card do Post (Entregável) */
.deliverable-card {
    background: var(--bg-panel);
    border: 1px solid var(--border);
    border-radius: 12px;
    margin-bottom: 2rem;
    overflow: hidden;
    transition: 0.3s;
}

.deliverable-header {
    padding: 1.5rem;
    border-bottom: 1px solid var(--border);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--bg-hover);
}

.deliverable-body {
    padding: 1.5rem;
    display: grid;
    grid-template-columns: 1.5fr 1fr; /* Mídia na Esquerda, Texto na Direita */
    gap: 2rem;
}

@media (max-width: 800px) { .deliverable-body { grid-template-columns: 1fr; } }

/* Grid de Imagens (Para Carrossel) */
.media-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 10px;
}

.media-item {
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid var(--border);
    aspect-ratio: 1/1; /* Quadrado perfeito */
    cursor: pointer;
}

.media-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: 0.3s;
}

.media-item:hover img { transform: scale(1.05); }

/* Caixa de Legenda */
.caption-box {
    background: var(--bg-body);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 1rem;
    font-size: 0.9rem;
    line-height: 1.6;
    color: var(--text-main);
    white-space: pre-wrap; /* Mantém as quebras de linha da legenda */
    max-height: 300px;
    overflow-y: auto;
}

/* Badges de Tipo */
.type-badge {
    font-size: 0.75rem;
    text-transform: uppercase;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 4px;
    letter-spacing: 1px;
}
.type-carousel { background: #e0e7ff; color: #3730a3; }
.type-video { background: #fce7f3; color: #9d174d; }
.type-static { background: #f3f4f6; color: #374151; }

/* =========================================
   ABAS DO PROJETO (PROJECT TABS)
   ========================================= */

.project-nav {
    display: flex;
    gap: 2rem;
    border-bottom: 1px solid var(--border);
    margin-bottom: 2rem;
    padding-bottom: 0;
}

.tab-btn {
    background: transparent;
    border: none;
    padding: 1rem 0;
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--text-muted);
    cursor: pointer;
    position: relative;
    transition: 0.2s;
    font-family: var(--font-body);
}

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

/* Aba Ativa */
.tab-btn.active {
    color: var(--text-main);
    font-weight: 700;
}

.tab-btn.active::after {
    content: '';
    position: absolute;
    bottom: -1px; /* Para sobrepor a linha da borda */
    left: 0;
    width: 100%;
    height: 3px;
    background: var(--text-main); /* Linha preta (ou branca no dark) */
    border-radius: 3px 3px 0 0;
}

/* Conteúdo da Aba */
.tab-content {
    display: none;
    animation: fadeInUp 0.4s var(--ease-out-expo);
}

.tab-content.active { display: block; }


/* =========================================
   DASHBOARD DO PROJETO & NOVAS ABAS
   ========================================= */

/* Mini Dashboard dentro do Projeto */
.project-dash-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
    margin-bottom: 2rem;
}

@media (max-width: 900px) { .project-dash-grid { grid-template-columns: 1fr 1fr; } }

.p-dash-card {
    background: var(--bg-hover);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.p-dash-label { font-size: 0.8rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; font-weight: 600; }
.p-dash-value { font-size: 2rem; font-weight: 700; color: var(--text-main); margin-top: 5px; }
.p-dash-icon { font-size: 1.5rem; margin-bottom: 10px; }

/* Barra de Progresso */
.progress-container {
    width: 100%;
    background-color: #e2e8f0;
    border-radius: 50px;
    height: 8px;
    margin-top: 10px;
    overflow: hidden;
}

.progress-bar {
    height: 100%;
    background-color: var(--text-main);
    border-radius: 50px;
    transition: width 0.5s ease;
}

/* Modal de Novo Post (Sobreposto) */
.modal-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.5); backdrop-filter: blur(3px);
    z-index: 1000; display: none; align-items: center; justify-content: center;
}
.modal-overlay.open { display: flex; animation: fadeIn 0.2s; }

.modal-content {
    background: var(--bg-panel); width: 90%; max-width: 600px;
    border-radius: 16px; padding: 2rem; box-shadow: var(--shadow);
    border: 1px solid var(--border); position: relative;
    max-height: 90vh; overflow-y: auto;
}

.close-modal {
    position: absolute; top: 15px; right: 20px;
    background: none; border: none; font-size: 1.5rem; cursor: pointer; color: var(--text-muted);
}

/* =========================================
   INSTAGRAM STYLE GRID
   ========================================= */

/* Grid Responsivo */
.insta-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 2rem;
    align-items: start;
}

/* O Cartão (Moldura) */
.insta-card {
    background: var(--bg-panel);
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0,0,0,0.03);
    transition: transform 0.2s;
}

/* Header do Card (Título e Data) */
.insta-header {
    padding: 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgba(0,0,0,0.05);
}

/* Container da Mídia (Onde a mágica da proporção acontece) */
.insta-media-container {
    width: 100%;
    background: #000; /* Fundo preto estilo player */
    position: relative;
    overflow: hidden;
}

/* Proporções do Instagram */
.ratio-reels { aspect-ratio: 9 / 16; }   /* Vertical 1080x1920 */
.ratio-feed  { aspect-ratio: 1 / 1; }    /* Quadrado 1080x1080 */
.ratio-video { aspect-ratio: 16 / 9; }   /* Youtube 1920x1080 */

/* A Imagem/Vídeo em si */
.insta-obj {
    width: 100%;
    height: 100%;
    object-fit: contain; /* Garante que nada seja cortado */
    display: block;
}

/* CARROSSEL (Slider Horizontal) */
.insta-carousel {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    height: 100%;
    scrollbar-width: none; /* Esconde barra no Firefox */
}
.insta-carousel::-webkit-scrollbar { display: none; /* Esconde barra no Chrome */ }

.carousel-slide {
    flex: 0 0 100%; /* Ocupa 100% da largura */
    width: 100%;
    height: 100%;
    scroll-snap-align: start;
    position: relative;
}

/* Indicador de Carrossel (Ex: 1/5) */
.carousel-counter {
    position: absolute;
    top: 10px;
    right: 10px;
    background: rgba(0,0,0,0.6);
    color: white;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    pointer-events: none;
    z-index: 2;
}

/* Rodapé do Card (Legenda e Ações) */
.insta-footer { padding: 12px; }
.insta-caption {
    font-size: 0.9rem;
    color: var(--text-main);
    line-height: 1.4;
    max-height: 80px;
    overflow-y: auto;
    margin-bottom: 10px;
}
.insta-actions {
    border-top: 1px solid var(--border);
    padding-top: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* =========================================
   INSTAGRAM GRID & CARROSSEL FUNCIONAL
   ========================================= */

.insta-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 2rem; align-items: start; }
.insta-card { background: var(--bg-panel); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; box-shadow: 0 2px 10px rgba(0,0,0,0.03); }
.insta-header { padding: 12px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid rgba(0,0,0,0.05); }
.insta-footer { padding: 12px; }
.insta-caption { font-size: 0.9rem; color: var(--text-main); line-height: 1.4; max-height: 80px; overflow-y: auto; margin-bottom: 10px; }

/* Container de Mídia & Proporções */
.insta-media-container { width: 100%; background: #000; position: relative; overflow: hidden; }
.ratio-reels { aspect-ratio: 9 / 16; }
.ratio-feed  { aspect-ratio: 1 / 1; }
.ratio-video { aspect-ratio: 16 / 9; }
.insta-obj { width: 100%; height: 100%; object-fit: contain; display: block; }

/* --- CARROSSEL FUNCIONAL (NOVO) --- */
.carousel-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
}

/* As imagens do carrossel (escondidas por padrão) */
.carousel-img {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    object-fit: contain;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none; /* Não clica na invisível */
}

/* A imagem ativa (visível) */
.carousel-img.active {
    opacity: 1;
    pointer-events: auto;
    z-index: 1;
}

/* Contador (1/5) */
.carousel-counter {
    position: absolute; top: 10px; right: 10px;
    background: rgba(0,0,0,0.6); color: white; padding: 4px 10px;
    border-radius: 20px; font-size: 0.75rem; font-weight: 600;
    pointer-events: none; z-index: 2;
}

/* Botões de Navegação (Setas) */
.carousel-nav {
    position: absolute; top: 50%; transform: translateY(-50%);
    background: rgba(0,0,0,0.3); color: white; border: none;
    width: 30px; height: 30px; border-radius: 50%;
    cursor: pointer; z-index: 3;
    display: flex; align-items: center; justify-content: center;
    opacity: 0; transition: opacity 0.2s, background 0.2s;
}
.carousel-nav:hover { background: rgba(0,0,0,0.7); }
.insta-media-container:hover .carousel-nav { opacity: 1; } /* Mostra ao passar o mouse */
.nav-prev { left: 10px; }
.nav-next { right: 10px; }

/* BOTÃO DE TROCAR CAPA (ESTILO FACEBOOK) */
.project-cover {
    position: relative; /* Necessário para posicionar o botão dentro */
    background-size: cover;
    background-position: center;
    background-color: #cbd5e1;
}

.btn-change-cover {
    position: absolute;
    bottom: 15px;
    right: 15px;
    background: rgba(0, 0, 0, 0.6);
    color: white;
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    backdrop-filter: blur(4px);
    border: 1px solid rgba(255,255,255,0.3);
    display: flex;
    align-items: center;
    gap: 8px;
    transition: 0.2s;
    z-index: 10; /* Garante que fique acima da imagem */
}

.btn-change-cover:hover {
    background: rgba(0, 0, 0, 0.8);
    transform: translateY(-2px);
}

/* =========================================
   CHECKLIST COM EFEITO VERDE (SATISFATÓRIO)
   ========================================= */

.checklist-group {
    background: var(--bg-panel);
    border: 1px solid var(--border);
    border-radius: 12px;
    margin-bottom: 1.5rem;
    overflow: hidden;
    box-shadow: 0 2px 5px rgba(0,0,0,0.02);
}

.checklist-header {
    background: var(--bg-hover);
    padding: 15px 20px;
    font-weight: 700;
    font-size: 0.95rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--border);
    color: var(--text-main);
}

.checklist-item {
    display: flex;
    align-items: flex-start; /* Alinha no topo caso o texto seja longo */
    padding: 12px 20px;
    border-bottom: 1px solid var(--border);
    transition: background 0.2s;
    gap: 15px;
}

.checklist-item:last-child { border-bottom: none; }
.checklist-item:hover { background: var(--bg-hover); }

/* --- O BOTÃO DE CHECK (A MÁGICA) --- */
.check-btn {
    width: 24px;
    height: 24px;
    min-width: 24px; /* Garante que não esmague */
    border: 2px solid #cbd5e1; /* Cinza claro */
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    background: white;
    color: transparent; /* Esconde o check quando vazio */
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    font-size: 14px;
    font-weight: bold;
}

.check-btn:hover {
    border-color: #10b981; /* Verde ao passar mouse */
    background: #ecfdf5;
}

/* ESTADO CONCLUÍDO (VERDE) */
.checklist-item.completed .check-btn {
    background-color: #10b981; /* Verde Esmeralda */
    border-color: #10b981;
    color: white; /* Mostra o check */
    transform: scale(1.05); /* Leve pulo */
}

/* TEXTO RISCADO */
.checklist-item.completed .item-text {
    text-decoration: line-through;
    color: #94a3b8; /* Texto cinza */
}

/* Badge de Responsável Ajustado */
.role-badge {
    font-size: 0.65rem;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
    align-self: center;
}


/* =========================================
   STATUS PERSONALIZADO & PREVIEW INSTAGRAM
   ========================================= */

/* --- BADGES DE STATUS (Checklist) --- */
.status-select {
    padding: 4px 10px;
    border-radius: 6px;
    border: none;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    cursor: pointer;
    appearance: none; /* Remove a seta padrão do select */
    text-align: center;
    transition: 0.2s;
}

/* Cores baseadas no valor (serão aplicadas via JS ou PHP inline) */
.st-pendente   { background: #f1f5f9; color: #64748b; }
.st-producao   { background: #dbeafe; color: #1e40af; }
.st-aprovacao  { background: #ffedd5; color: #c2410c; }
.st-ajustes    { background: #fee2e2; color: #991b1b; }
.st-concluido  { background: #dcfce7; color: #166534; }


/* --- MOCKUP DE CELULAR (PREVIEW) --- */
.phone-mockup-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 2rem;
    background: #f0f2f5;
}

.phone-frame {
    width: 375px; /* Tamanho padrão iPhone */
    height: 700px;
    background: white;
    border-radius: 30px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.2);
    border: 12px solid #111; /* Borda do celular */
    overflow: hidden; /* Conteúdo não sai do celular */
    position: relative;
    display: flex;
    flex-direction: column;
}

/* Header do Insta */
.ph-header {
    padding: 15px;
    display: flex;
    align-items: center;
    gap: 10px;
    border-bottom: 1px solid #eee;
}
.ph-avatar { width: 32px; height: 32px; border-radius: 50%; background: #ddd; }
.ph-username { font-weight: 600; font-size: 0.9rem; }

/* Corpo (Mídia) */
.ph-screen {
    flex: 1;
    background: black;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.ph-media-obj {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

/* Footer (Ações e Legenda) */
.ph-footer { padding: 15px; background: white; }
.ph-icons { display: flex; gap: 15px; font-size: 1.4rem; margin-bottom: 10px; }
.ph-caption { font-size: 0.9rem; line-height: 1.4; max-height: 100px; overflow-y: auto; color: #262626; }
.ph-caption strong { margin-right: 5px; }

/* Scrollbar fina para a legenda */
.ph-caption::-webkit-scrollbar { width: 4px; }
.ph-caption::-webkit-scrollbar-thumb { background: #ccc; border-radius: 4px; }

/* =========================================
   MODAL DE STATUS (DESIGN MODERNO / PREMIUM)
   ========================================= */

/* Fundo do Modal (Blur) */
.modal-overlay {
    background: rgba(15, 23, 42, 0.4); /* Escuro suave */
    backdrop-filter: blur(8px); /* Efeito vidro fosco */
}

/* A Caixa do Modal */
.status-modal-card {
    background: #ffffff;
    width: 100%;
    max-width: 480px;
    border-radius: 24px; /* Bordas bem arredondadas */
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    overflow: hidden;
    animation: scaleIn 0.2s ease-out;
    border: 1px solid #f1f5f9;
}

@keyframes scaleIn {
    from { transform: scale(0.95); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

/* Cabeçalho do Modal */
.st-modal-header {
    padding: 24px;
    border-bottom: 1px solid #f1f5f9;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.st-modal-title { font-size: 1.1rem; font-weight: 700; color: var(--text-main); margin: 0; }
.st-close-btn { 
    background: #f1f5f9; border: none; width: 32px; height: 32px; 
    border-radius: 50%; color: var(--text-muted); cursor: pointer; 
    display: flex; align-items: center; justify-content: center; font-size: 1.2rem;
    transition: 0.2s;
}
.st-close-btn:hover { background: #e2e8f0; color: var(--text-main); }

/* Corpo (Lista de Status) */
.st-modal-body { padding: 10px 0; max-height: 400px; overflow-y: auto; }

/* Linha de Status Individual */
.st-row {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 12px 24px;
    transition: background 0.2s;
    border-bottom: 1px solid transparent;
}
.st-row:hover { background: #f8fafc; }
.st-row:focus-within { background: #f1f5f9; border-bottom-color: #e2e8f0; }

/* O Color Picker Redondo Personalizado */
.st-color-wrapper {
    position: relative;
    width: 32px; height: 32px;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid #e2e8f0;
    flex-shrink: 0;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    transition: transform 0.2s;
}
.st-color-wrapper:hover { transform: scale(1.1); border-color: var(--text-muted); }

/* O input real (invisível, mas clicável) */
.st-color-input {
    position: absolute;
    top: -50%; left: -50%;
    width: 200%; height: 200%;
    padding: 0; margin: 0;
    border: none; cursor: pointer;
    background: none;
}

/* O Input de Texto (Estilo Invisível) */
.st-text-input {
    flex: 1;
    border: none;
    background: transparent;
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--text-main);
    padding: 5px;
    border-radius: 4px;
    outline: none;
}
.st-text-input:focus { background: white; box-shadow: 0 0 0 2px #e2e8f0; }

/* Botão de Excluir (Discreto) */
.st-del-btn {
    background: none; border: none; color: #cbd5e1; cursor: pointer;
    font-size: 1.1rem; padding: 5px; opacity: 0; transition: 0.2s;
}
.st-row:hover .st-del-btn { opacity: 1; }
.st-del-btn:hover { color: #ef4444; background: #fee2e2; border-radius: 6px; }

/* Rodapé (Adicionar Novo) */
.st-modal-footer {
    padding: 20px 24px;
    background: #f8fafc;
    border-top: 1px solid #f1f5f9;
}

/* Botão de Abrir Modal (Correção do "Rodar") */
.status-config-btn {
    background: var(--bg-hover);
    border: 1px solid var(--border);
    color: var(--text-muted);
    font-size: 0.8rem;
    font-weight: 600;
    padding: 6px 12px;
    border-radius: 20px;
    cursor: pointer;
    display: inline-flex; align-items: center; gap: 6px;
    transition: 0.2s;
}
.status-config-btn:hover {
    background: var(--bg-panel);
    border-color: var(--text-muted);
    color: var(--text-main);
    transform: translateY(-1px); /* Apenas sobe, não roda */
}

/* =========================================
   STATUS MODERNO & DRAG-AND-DROP
   ========================================= */

/* Estilo do Select de Status (Pílula) */
.status-pill-select {
    appearance: none; /* Remove a seta padrão feia */
    -webkit-appearance: none;
    border: 1px solid transparent;
    border-radius: 20px; /* Redondo */
    padding: 6px 16px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    cursor: pointer;
    text-align: center;
    transition: all 0.2s ease;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
    color: inherit; /* Herda a cor definida nas classes st- */
}

.status-pill-select:hover {
    filter: brightness(0.95);
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.status-pill-select:focus { outline: none; box-shadow: 0 0 0 2px rgba(0,0,0,0.1); }

/* Cores dos Status (Fundo suave + Texto forte) */
.st-pendente   { background: #f1f5f9; color: #64748b; }
.st-producao   { background: #dbeafe; color: #1e40af; }
.st-aprovacao  { background: #ffedd5; color: #c2410c; }
.st-ajustes    { background: #fee2e2; color: #991b1b; }
.st-concluido  { background: #dcfce7; color: #166534; border-color: #bbf7d0; }

/* Drag & Drop (Arrastar) */
.drag-handle {
    cursor: grab;
    color: #cbd5e1;
    font-size: 1.2rem;
    padding: 0 8px;
    display: flex; align-items: center;
    transition: color 0.2s;
}
.item-card:hover .drag-handle { color: #94a3b8; }
.drag-handle:active { cursor: grabbing; }

/* Item sendo arrastado (Visual) */
.sortable-ghost { opacity: 0.4; background: #f1f5f9; border: 1px dashed #cbd5e1; }
.sortable-drag { background: white; box-shadow: 0 10px 20px rgba(0,0,0,0.1); transform: scale(1.02); }

/* =========================================
   BOTÕES DE STATUS & CONFIGURAÇÃO (REFINADO)
   ========================================= */

/* 1. Botão "Configurar Status" (Engrenagem) */
.status-config-btn {
    background: #ffffff;
    border: 1px solid var(--border);
    color: var(--text-muted);
    font-size: 0.8rem;
    font-weight: 600;
    padding: 8px 14px;
    border-radius: 8px; /* Cantos suaves */
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s ease;
    box-shadow: 0 1px 2px rgba(0,0,0,0.03); /* Sombra sutil */
}

.status-config-btn:hover {
    color: var(--text-main);
    border-color: #cbd5e1;
    background: #f8fafc;
    transform: translateY(-1px);
    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05);
}
.status-config-btn:active { transform: translateY(0); }

/* 2. O Seletor de Status (A Pílula Colorida) */
.status-pill-select {
    appearance: none;
    -webkit-appearance: none; /* Remove seta nativa do browser */
    border: none;
    border-radius: 20px; /* Formato Pílula */
    padding: 5px 14px;
    font-size: 0.7rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    cursor: pointer;
    text-align: center;
    line-height: 1;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 1px 2px rgba(0,0,0,0.06);
    
    /* Garante que o texto fique centralizado e legível */
    display: inline-block;
    max-width: 140px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.status-pill-select:hover {
    filter: brightness(0.96); /* Escurece levemente */
    transform: scale(1.05);   /* Cresce um pouquinho (efeito tátil) */
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.status-pill-select:focus {
    outline: none;
    box-shadow: 0 0 0 2px #fff, 0 0 0 4px rgba(15, 23, 42, 0.1);
}

/* 3. Drag Handle (Os pontinhos para arrastar) */
.drag-handle {
    cursor: grab;
    color: #cbd5e1; /* Cinza bem claro */
    font-size: 1.2rem;
    padding: 4px 8px;
    border-radius: 4px;
    transition: 0.2s;
    display: flex; align-items: center;
}
.item-card:hover .drag-handle { color: #64748b; /* Fica mais visível ao passar mouse na linha */ }
.drag-handle:hover { background: #f1f5f9; }
.drag-handle:active { cursor: grabbing; }

/* 4. Linha da Tarefa (Ajuste fino de alinhamento) */
.item-card {
    transition: transform 0.2s, box-shadow 0.2s;
}
.item-card:hover {
    background: #ffffff !important; /* Destaca a linha */
    box-shadow: 0 2px 8px rgba(0,0,0,0.03);
    z-index: 1;
    transform: scale(1.005); /* Micro zoom na linha */
    border-color: #cbd5e1;
}

/* =========================================
   BOTÕES DE AÇÃO (EDITAR / APAGAR)
   ========================================= */

.task-actions {
    display: flex;
    gap: 6px;
    margin-left: 12px;
    opacity: 0.6; /* Discreto por defeito */
    transition: opacity 0.2s;
}

/* Mostra totalmente ao passar o rato na linha da tarefa */
.item-card:hover .task-actions { opacity: 1; }

.icon-btn {
    width: 32px;
    height: 32px;
    border-radius: 8px; /* Cantos arredondados modernos */
    border: 1px solid transparent;
    background: transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    color: var(--text-muted);
}

/* Estado Hover (Ao passar o rato) */
.icon-btn:hover {
    background: #ffffff;
    border-color: var(--border);
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    transform: translateY(-2px);
    color: var(--text-main);
}

/* Botão Específico de Apagar (Vermelho no Hover) */
.btn-delete:hover {
    color: #ef4444;
    background: #fef2f2;
    border-color: #fecaca;
}

/* Botão Específico de Editar (Azul/Escuro no Hover) */
.btn-edit:hover {
    color: var(--accent-color);
}

/* Ajuste no Formulário de Edição (Input + Botão Salvar) */
.edit-form-inline {
    display: none; /* Controlado via JS */
    width: 100%;
    gap: 8px;
    align-items: center;
}

.btn-save-mini {
    padding: 0 16px;
    height: 36px;
    border-radius: 8px;
    background: var(--text-main);
    color: white;
    border: none;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: 0.2s;
}
.btn-save-mini:hover { opacity: 0.9; transform: translateY(-1px); }

.btn-cancel-mini {
    width: 36px; height: 36px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: white;
    color: var(--text-muted);
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
}
.btn-cancel-mini:hover { background: #f1f5f9; color: #ef4444; }


/*  */
/* =========================================
   NOVA GALERIA & UPLOAD DEDICADO
   ========================================= */

/* --- ÁREA DE UPLOAD (DROPZONE) --- */
.upload-zone {
    border: 2px dashed #cbd5e1;
    border-radius: 16px;
    background: #f8fafc;
    padding: 4rem 2rem;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.upload-zone:hover {
    border-color: var(--accent-color);
    background: #f1f5f9;
    transform: scale(1.01);
}

.upload-icon { font-size: 3rem; margin-bottom: 1rem; opacity: 0.8; }

/* --- GALERIA VISUAL (FEED STYLE) --- */
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); /* Cards mais largos */
    gap: 24px;
    align-items: start;
}

.gallery-card {
    background: #ffffff;
    border: 1px solid var(--border);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: transform 0.2s, box-shadow 0.2s;
    display: flex;
    flex-direction: column;
}

.gallery-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 24px rgba(0,0,0,0.08);
}

/* Container da Mídia (Responsivo e Alto) */
.media-direct-container {
    width: 100%;
    height: 380px; /* Altura fixa generosa para simular feed */
    background: #000;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

/* A Mídia em si */
.media-direct-obj {
    width: 100%;
    height: 100%;
    object-fit: contain; /* Mostra inteiro (com barras pretas se necessário) */
    display: block;
}

/* Se for imagem, cobre tudo para ficar bonito (cropado) ou contain? 
   Para aprovação, 'contain' é mais seguro, mas 'cover' é mais bonito. 
   Vamos de 'contain' com fundo preto para ver arte inteira. */

/* Footer do Card */
.gallery-footer {
    padding: 16px;
    border-top: 1px solid #f1f5f9;
}

.gallery-title {
    font-weight: 700;
    font-size: 1rem;
    color: var(--text-main);
    margin-bottom: 6px;
}

.gallery-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid #f1f5f9;
}



/* =========================================
   ESTILO RESTAURADO (GRID + CHECKLIST)
   ========================================= */

/* --- LAYOUT GERAL --- */
.project-card-wrapper {
    background: #ffffff;
    border: 1px solid var(--border);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    margin-bottom: 2rem;
}

.project-cover {
    height: 200px;
    width: 100%;
    background-size: cover;
    background-position: center;
    position: relative;
    background-color: #cbd5e1;
}

.btn-change-cover {
    position: absolute; bottom: 15px; right: 15px;
    background: rgba(0,0,0,0.6); color: white;
    padding: 8px 16px; border-radius: 20px;
    cursor: pointer; font-size: 0.8rem; font-weight: 600;
    backdrop-filter: blur(4px); transition: 0.2s;
}
.btn-change-cover:hover { background: rgba(0,0,0,0.8); }

.project-header-info {
    padding: 2rem;
    border-bottom: 1px solid var(--border);
    display: flex; justify-content: space-between; align-items: center;
}

/* --- ABAS --- */
.tab-nav {
    display: flex; gap: 2rem; padding: 0 2rem;
    border-bottom: 1px solid var(--border);
    background: #f8fafc;
}
.tab-btn {
    background: none; border: none; padding: 1rem 0;
    font-size: 0.95rem; font-weight: 500; color: var(--text-muted);
    cursor: pointer; border-bottom: 2px solid transparent;
}
.tab-btn.active {
    color: var(--text-main); border-bottom-color: var(--text-main); font-weight: 700;
}
.tab-content { display: none; padding: 2rem; animation: fadeIn 0.3s; }
.tab-content.active { display: block; }

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

.project-body {
    display: grid; grid-template-columns: 2.5fr 1fr;
    min-height: 500px;
}
.body-main { border-right: 1px solid var(--border); }
.body-sidebar { padding: 2rem; background: #f8fafc; }

@media(max-width:900px){
    .project-body { grid-template-columns: 1fr; }
    .body-main { border-right: none; border-bottom: 1px solid var(--border); }
}

/* --- CHECKLIST & STATUS (PÍLULA) --- */
.status-config-btn {
    background: white; border: 1px solid var(--border);
    color: var(--text-muted); padding: 6px 12px; border-radius: 8px;
    cursor: pointer; font-size: 0.8rem; display: flex; align-items: center; gap: 5px;
}
.status-config-btn:hover { border-color: var(--text-main); color: var(--text-main); }

.item-card {
    background: #ffffff; border-bottom: 1px solid var(--border);
    padding: 12px 16px; display: flex; justify-content: space-between; align-items: center;
    transition: 0.2s;
}
.item-card:hover { background: #fafafa; }

.drag-handle { cursor: grab; color: #cbd5e1; padding-right: 10px; font-size: 1.2rem; }
.drag-handle:hover { color: var(--text-muted); }

.status-pill-select {
    appearance: none; -webkit-appearance: none;
    border: none; border-radius: 20px;
    padding: 6px 16px; font-size: 0.7rem; font-weight: 800;
    text-transform: uppercase; letter-spacing: 0.5px;
    cursor: pointer; text-align: center;
    transition: transform 0.2s;
}
.status-pill-select:hover { transform: scale(1.05); filter: brightness(0.95); }

/* Botões de Ação (Editar/Excluir) */
.task-actions { display: flex; gap: 5px; opacity: 0.4; transition: 0.2s; margin-left: 10px; }
.item-card:hover .task-actions { opacity: 1; }
.icon-btn {
    border: none; background: transparent; cursor: pointer;
    font-size: 1rem; width: 28px; height: 28px;
    border-radius: 4px; display: flex; align-items: center; justify-content: center;
}
.icon-btn:hover { background: #f1f5f9; }
.btn-delete:hover { color: #ef4444; background: #fef2f2; }

/* --- GALERIA (GRID QUADRADO VISUAL) --- */
.file-card {
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
    background: white;
    transition: transform 0.2s;
}
.file-card:hover { transform: translateY(-3px); box-shadow: 0 4px 12px rgba(0,0,0,0.08); }

.media-preview-box {
    width: 100%;
    aspect-ratio: 16 / 9; /* Formato Widescreen */
    background: #000;
    display: flex; align-items: center; justify-content: center;
    overflow: hidden;
    border-bottom: 1px solid var(--border);
}

.media-obj-preview {
    width: 100%; height: 100%; object-fit: contain; /* Mostra tudo */
    cursor: pointer;
}

/* --- MODAIS --- */
.modal-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.5); backdrop-filter: blur(5px);
    z-index: 2000; display: none; align-items: center; justify-content: center;
}
.status-modal-card {
    background: white; width: 90%; max-width: 450px;
    border-radius: 16px; padding: 0; overflow: hidden;
    box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1);
}
.st-modal-header { padding: 15px 20px; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; }
.st-modal-body { padding: 20px; max-height: 400px; overflow-y: auto; }
.st-modal-footer { padding: 15px 20px; background: #f8fafc; border-top: 1px solid var(--border); }

/* Linha de Status no Modal */
.st-row { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.st-color-input { width: 30px; height: 30px; border: none; padding: 0; border-radius: 50%; overflow: hidden; cursor: pointer; flex-shrink: 0; }
.st-text-input { flex: 1; padding: 8px; border: 1px solid var(--border); border-radius: 6px; font-size: 0.9rem; }
.st-del-btn { color: #ef4444; cursor: pointer; font-size: 1.2rem; margin-left: 5px; text-decoration: none; }

/* Preview Celular */
.phone-mockup-wrapper { display: flex; justify-content: center; padding: 20px; }
.phone-frame {
    width: 320px; height: 650px; background: white; border-radius: 35px;
    border: 10px solid #222; overflow: hidden; display: flex; flex-direction: column;
}
.ph-header { padding: 15px; border-bottom: 1px solid #eee; display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 0.9rem; }
.ph-avatar { width: 30px; height: 30px; border-radius: 50%; background: #ccc; }
.ph-screen { flex: 1; background: #000; display: flex; align-items: center; justify-content: center; }
.ph-media-obj { max-width: 100%; max-height: 100%; object-fit: contain; }
.ph-footer { padding: 15px; }
.ph-icons { font-size: 1.4rem; margin-bottom: 10px; }
.ph-caption { font-size: 0.85rem; line-height: 1.4; color: #333; max-height: 100px; overflow-y: auto; }

/* =========================================
   AÇÕES DE PERIGO (EXCLUSÃO)
   ========================================= */

.danger-zone {
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 1px dashed #fee2e2;
}

.btn-danger-outline {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 14px;
    background: #fff5f5; /* Vermelho quase branco */
    color: #dc2626; /* Vermelho escuro */
    border: 1px solid #fecaca;
    border-radius: 12px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-danger-outline:hover {
    background: #dc2626;
    color: #ffffff;
    border-color: #dc2626;
    box-shadow: 0 10px 15px -3px rgba(220, 38, 38, 0.2);
    transform: translateY(-2px);
}

.btn-danger-outline svg {
    transition: transform 0.3s ease;
}

.btn-danger-outline:hover svg {
    transform: rotate(15deg) scale(1.1);
}

.danger-text {
    font-size: 0.8rem;
    color: #991b1b;
    margin-bottom: 12px;
    display: block;
    text-align: center;
    font-weight: 500;
}


/*  */


/* =========================================
   PÁGINA DE EQUIPE (MEMBER CARDS)
   ========================================= */

.team-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 24px;
    margin-top: 20px;
}

.member-card {
    background: #ffffff;
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    transition: transform 0.2s, box-shadow 0.2s;
    position: relative;
}

.member-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 24px rgba(0,0,0,0.06);
    border-color: #cbd5e1;
}

/* Avatar com Iniciais */
.member-avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: linear-gradient(135deg, #e0e7ff 0%, #c7d2fe 100%);
    color: #4338ca;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    font-weight: 700;
    margin-bottom: 16px;
    border: 4px solid #f8fafc; /* Borda externa para separar do fundo */
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.member-name {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-main);
    margin-bottom: 4px;
}

.member-email {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-bottom: 16px;
}

/* Badges de Cargo */
.role-badge {
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.role-admin { background: #fce7f3; color: #be185d; }
.role-head { background: #e0e7ff; color: #4338ca; }
.role-social { background: #fef3c7; color: #b45309; }
.role-design { background: #dbeafe; color: #1e40af; }
.role-video { background: #ffedd5; color: #c2410c; }

/* Ações (Editar/Excluir) */
.member-actions {
    margin-top: 20px;
    display: flex;
    gap: 10px;
    width: 100%;
}

.btn-member-action {
    flex: 1;
    padding: 8px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: white;
    color: var(--text-muted);
    font-size: 0.85rem;
    cursor: pointer;
    transition: 0.2s;
    display: flex; align-items: center; justify-content: center; gap: 6px;
}

.btn-member-action:hover {
    background: #f8fafc;
    color: var(--text-main);
    border-color: #cbd5e1;
}

.btn-member-delete:hover {
    background: #fef2f2;
    color: #ef4444;
    border-color: #fecaca;
}

/* Adicione isso junto com os estilos de .member-avatar */

.member-avatar-img {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover; /* Garante que a foto não distorça */
    border: 4px solid #f8fafc;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    margin-bottom: 16px;
    background: #fff;
}

/* Ajuste no input de arquivo do modal para ficar bonito */
.file-input-wrapper {
    position: relative;
    overflow: hidden;
    display: inline-block;
    width: 100%;
}


/*  */


/* =========================================
   ÁREA DO CLIENTE (CRM)
   ========================================= */

/* Caixa Restrita (Apenas Admin) */
.restricted-zone {
    background-color: #fff8f6; /* Fundo levemente alaranjado/quente */
    border: 1px solid #fed7aa;
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 2rem;
    position: relative;
}

.restricted-badge {
    position: absolute; top: -12px; left: 20px;
    background: #c2410c; color: white;
    padding: 4px 12px; border-radius: 20px;
    font-size: 0.75rem; font-weight: 700; text-transform: uppercase;
}

/* Status do Contrato */
.contract-status {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 12px; border-radius: 8px; font-weight: 600; font-size: 0.9rem;
}
.c-active { background: #dcfce7; color: #166534; border: 1px solid #bbf7d0; }
.c-expired { background: #fee2e2; color: #991b1b; border: 1px solid #fecaca; }

/* Lista de Histórico (Projetos) */
.history-list { display: flex; flex-direction: column; gap: 10px; }
.history-item {
    background: white; border: 1px solid var(--border);
    padding: 15px; border-radius: 8px;
    display: flex; justify-content: space-between; align-items: center;
    transition: 0.2s;
}
.history-item:hover { transform: translateX(5px); border-color: var(--accent-color); }


/*  */


/* =========================================
   PÁGINA DE EQUIPE (MEMBER CARDS & MODAL)
   ========================================= */

/* Header da Página */
.page-header-flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
}

/* Grid de Membros */
.team-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 24px;
}

/* Cartão do Membro */
.member-card {
    background: #ffffff;
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 30px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    transition: all 0.2s ease;
    position: relative;
    box-shadow: 0 2px 5px rgba(0,0,0,0.02);
}

.member-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.08);
    border-color: #cbd5e1;
}

/* Avatar (Iniciais) */
.member-avatar {
    width: 90px; height: 90px;
    border-radius: 50%;
    background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
    color: #2563eb;
    display: flex; align-items: center; justify-content: center;
    font-size: 2rem; font-weight: 700;
    margin-bottom: 15px;
    border: 4px solid #fff;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}

.member-name {
    font-size: 1.1rem; font-weight: 700; color: var(--text-main); margin-bottom: 5px;
}
.member-email {
    font-size: 0.85rem; color: var(--text-muted); margin-bottom: 15px; word-break: break-all;
}

/* Badges de Cargo */
.role-badge {
    padding: 5px 12px; border-radius: 20px;
    font-size: 0.7rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.5px;
    margin-bottom: 20px; display: inline-block;
}
/* Cores Específicas */
.role-admin { background: #fce7f3; color: #be185d; }    /* Rosa */
.role-head { background: #e0e7ff; color: #4338ca; }     /* Roxo */
.role-social { background: #ffedd5; color: #c2410c; }   /* Laranja */
.role-design { background: #dbeafe; color: #1e40af; }   /* Azul */
.role-video { background: #fef9c3; color: #a16207; }    /* Amarelo */

/* Botões de Ação no Card */
.member-actions {
    display: flex; gap: 10px; width: 100%; margin-top: auto;
}

.btn-card-action {
    flex: 1; padding: 10px;
    border-radius: 8px; border: 1px solid var(--border);
    background: #f8fafc; color: var(--text-muted);
    font-size: 0.85rem; font-weight: 600;
    cursor: pointer; transition: 0.2s;
    display: flex; align-items: center; justify-content: center; gap: 6px;
    text-decoration: none;
}
.btn-card-action:hover { background: #fff; color: var(--text-main); border-color: #cbd5e1; }
.btn-card-delete:hover { background: #fef2f2; color: #ef4444; border-color: #fecaca; }

/* --- MODAL (Centralizado e Fixo) --- */
.modal-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(15, 23, 42, 0.6); backdrop-filter: blur(4px);
    z-index: 9999; display: none; align-items: center; justify-content: center;
}

.modal-card-center {
    background: #fff; width: 90%; max-width: 500px;
    border-radius: 16px; padding: 0;
    box-shadow: 0 25px 50px -12px rgba(0,0,0,0.25);
    overflow: hidden; animation: zoomIn 0.2s ease-out;
}

@keyframes zoomIn { from {transform: scale(0.95); opacity:0;} to {transform: scale(1); opacity:1;} }

.modal-header {
    padding: 20px 24px; border-bottom: 1px solid #f1f5f9;
    display: flex; justify-content: space-between; align-items: center;
}
.modal-title { font-size: 1.2rem; font-weight: 700; margin: 0; }
.modal-close { background: none; border: none; font-size: 1.5rem; cursor: pointer; color: #94a3b8; }

.modal-body { padding: 24px; }