/* ============================
   Loja Hinode — UI 2025 (apenas CSS)
   - Tema Claro (Padrão) e Escuro (Opcional via JS: html[data-theme="dark"])
   - Design moderno, responsivo e com persistência de tema.
   - CORREÇÃO: Touch Action e Scroll Snap para Mobile UX (Padrão Amazon/ML).
   ============================ */
/* Base + Tema + Layout */
:root{ --bg:#fff; --bg-2:#f7f9fc; --panel:#fff; --line:#e6ebf2; --text:#0f172a; --muted:#5f6b85; --brand:#2563eb; --brand-strong:#1e40af; --accent:#16a34a; --price:#d97706; --space-1:.5rem; --space-2:.75rem; --space-3:1rem; --space-4:1.25rem; --space-5:1.75rem; --space-6:2.25rem; --rad-lg:18px; --rad:14px; --rad-sm:10px; --shadow:0 14px 30px rgba(15,23,42,.08), 0 3px 8px rgba(15,23,42,.06); --shadow-soft:0 10px 24px rgba(15,23,42,.06); --ring:0 0 0 3px color-mix(in srgb,var(--brand) 28%,transparent); 
    /* Variáveis para BADGE (Melhor Contraste) */
    --badge-bg: color-mix(in srgb, var(--brand) 12%, #fff);
    --badge-fg: #0f172a;
}
html[data-theme="dark"]{ --bg:#0b0f15; --bg-2:#101725; --panel:#0f1522; --line:#1c2738; --text:#e7edf6; --muted:#a6b4c6; --brand:#4aa3ff; --brand-strong:#2d6ebf; --accent:#22c55e; --price:#f59e0b; --shadow:0 16px 34px rgba(0,0,0,.35), 0 3px 8px rgba(0,0,0,.25); --shadow-soft:0 12px 28px rgba(0,0,0,.28); 
    /* Variáveis para BADGE (Melhor Contraste) */
    --badge-bg: color-mix(in srgb, var(--brand) 28%, #0b0f15);
    --badge-fg: #fff;
}
*{ box-sizing:border-box; } html{ scroll-behavior:smooth; } body{ margin:0; color:var(--text); background:var(--bg); font:400 16px/1.65 ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
a{ color:var(--brand); text-decoration:none; } a:hover{ color:var(--brand-strong); } img{ display:block; max-width:100%; height:auto; }

/* ===== Comportamento de rolagem igual Amazon / Mercado Livre (INÍCIO) ===== */
/* 1. Garante que a página role verticalmente (padrão Amazon) */
html, body {
    overflow-x: hidden;
    overscroll-behavior-y: contain;
    touch-action: pan-y; 
    -webkit-overflow-scrolling: touch;
}
/* 2. Carrosséis horizontais: rolam X, mas deixam Y livre */
.scroller, .scroller.auto, .hero-cards, .thumbs { 
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    gap: 10px;
    padding-bottom: 6px;
    touch-action: pan-x pan-y; /* PERMITE: Arrasto em X e Y no contêiner */
    overscroll-behavior-x: contain; 
}
/* Rolagem moderna e leve (para desktop/mouse) */
::-webkit-scrollbar { height: 6px; width: 6px; }
::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--brand) 45%, transparent); border-radius: 20px; }
::-webkit-scrollbar-thumb:hover { background: color-mix(in srgb, var(--brand) 65%, transparent); }
/* 3. Remove bloqueio de rolagem vertical sobre imagens/cards */
img, .card, .thumbs img {
    user-select: none;
    -webkit-user-drag: none;
}
.gallery-main img, .card img {
    touch-action: manipulation; /* Garante que o toque passe para o container pai (body/thumbs) */
}
/* 4. Snap alinhado e responsivo */
/* CORREÇÃO: Aplica flexbox size SÓ para elementos de rolagem */
.scroller .card, .scroller.auto .card {
    scroll-snap-align: start;
    flex: 0 0 clamp(220px, 48vw, 280px); 
}
.thumbs .th { /* Ajuste de largura SÓ para as miniaturas (thumbs) */
    scroll-snap-align: start;
    flex: 0 0 clamp(80px, 20vw, 120px); 
}
/* ===== Comportamento de rolagem igual Amazon / Mercado Livre (FIM) ===== */

.wrap{ width:100%; max-width:1200px; margin-inline:auto; padding-inline:clamp(16px,4vw,24px); } 
/* NOVIDADE: Classe para tela cheia no desktop */
.wrap.wide { 
  max-width: 1600px; /* Largura estendida para telas grandes */
}

.section{ padding-block:var(--space-5); }
/* Header */
.hdr{ position:sticky; top:0; z-index:40; background:color-mix(in srgb,var(--bg) 92%,transparent); backdrop-filter:blur(10px) saturate(140%); border-bottom:1px solid var(--line); }
.top{ display:flex; align-items:center; gap:var(--space-3); padding:var(--space-3) clamp(16px,4vw,24px); } .brand{ font-weight:800; letter-spacing:.2px; color:var(--brand); font-size:clamp(1.2rem,2.6vw,1.6rem); }
.nav{ display:flex; gap:var(--space-3); flex:1; flex-wrap:wrap; margin-left: var(--space-2); } .nav a{ color:var(--text); opacity:.9; font-weight:600; } .nav a:hover{ opacity:1; color:var(--brand-strong); } .menu-btn{ display:none; }
.search{ margin-left:auto; display:flex; gap:var(--space-2); } .search input{ width:min(48vw,420px); height:46px; padding:0 var(--space-3); background:var(--bg-2); border:1px solid var(--line); border-radius:var(--rad); color:var(--text); outline:none; transition:border-color .2s,box-shadow .2s; } .search input::placeholder{ color:var(--muted); } .search input:focus{ border-color:color-mix(in srgb,var(--brand) 40%,var(--line)); box-shadow:var(--ring); }
/* Botões */
.btn{ appearance:none; border:0; cursor:pointer; background:var(--brand); color:#fff; font-weight:800; height:46px; padding:0 var(--space-4); border-radius:var(--rad); box-shadow:var(--shadow-soft); transition:transform .08s ease,box-shadow .2s ease,background .2s ease; display:inline-flex; align-items:center; justify-content:center; }
.btn:hover{ transform:translateY(-1px); } .btn:active{ transform:translateY(0); } .btn.alt{ background:var(--accent); } .btn.ghost{ background:transparent; color:var(--text); border:1px solid var(--line); box-shadow: none; } .btn.warn{ background:#ef4444; } .btn.sm{ height:34px; padding:0 12px; font-weight:800; border-radius:10px; }
/* Hero */
.hero{ margin-top:var(--space-3); background:linear-gradient(135deg,color-mix(in srgb,var(--brand) 6%,#fff) 0%,var(--bg) 64%); border:1px solid var(--line); border-radius:clamp(16px,2vw,22px); padding:clamp(18px,3.5vw,36px); display:grid; gap:var(--space-4); grid-template-columns:1.25fr 1fr; align-items:center; overflow:hidden; } html[data-theme="dark"] .hero{ background:linear-gradient(135deg,color-mix(in srgb,var(--brand) 12%,var(--bg)) 0%,var(--bg) 64%); }
.hero-title{ font-weight:900; letter-spacing:-.015em; line-height:1.15; font-size:clamp(1.9rem,4vw,2.7rem); margin:.2rem 0 .6rem; } .hero-title .grad{ background:linear-gradient(90deg,var(--brand),var(--accent)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; }
.badges{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom: var(--space-2); } 
/* CORREÇÃO BADGE: Aplicando variáveis de contraste */
.badge{ display:inline-flex; align-items:center; height:28px; padding:0 12px; border: 1px solid color-mix(in srgb, var(--badge-bg) 60%, var(--line)); background: var(--badge-bg); color: var(--badge-fg); font-weight:800; border-radius:999px; font-size:.82rem; box-shadow:var(--shadow-soft); } 
html[data-theme="dark"] .badge{ box-shadow: 0 6px 16px rgba(0,0,0,.35); }

.hero-cta{ display:flex; gap:var(--space-2); margin-top:var(--space-2); } .hero-cards{ width:100%; }

.scroller.auto .inner{ display:flex; gap:var(--space-2); }

/* CORREÇÃO: Grid de Produtos (Home/Categoria) - Volta ao formato responsivo de quadrado */
.grid{ display:grid; gap:var(--space-3); grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); margin-top:var(--space-3); }
.card{ background:var(--panel); border:1px solid var(--line); border-radius:var(--rad-lg); overflow:hidden; display:flex; flex-direction:column; box-shadow:var(--shadow-soft); transition:transform .15s ease,box-shadow .22s ease,border-color .22s ease; } .card:hover{ transform:translateY(-2px); box-shadow:var(--shadow); border-color:color-mix(in srgb,var(--brand) 22%,var(--line)); } .card .p{ padding:var(--space-3); }
.card img{ width:100%; height:clamp(200px,28vw,240px); object-fit:contain; background:var(--bg-2); border:1px solid var(--line); border-radius:var(--rad); transform:translateZ(0); } .card-title{ font-weight:800; line-height:1.35; min-height:2.6em; } .price{ color:var(--price); font-weight:900; margin-top:.35rem; font-size:1.12rem; } .muted.brand{ color:var(--muted); font-size:.86rem; margin-top: .2rem; }
.card.mini img{ height: 120px; } .card.mini .p{ padding: var(--space-2); } .card.mini .card-title{ font-size: .9rem; min-height: 2.4em; } .card.mini .price{ font-size: 1rem; }
/* Setas do Carrossel (Desktop Only) */
.scroller-wrap{ position:relative; } .scroller-arrow{ display:none; }
/* Estilos para Setas de Miniaturas (.thumbs-wrap) */
.thumbs-wrap { position:relative; }

@media(hover:hover) and (pointer:fine){ 
    /* Setas nos Carrosséis de Conteúdo */
    .scroller-wrap .scroller-arrow{ display:flex; align-items:center; justify-content:center; position:absolute; top:50%; transform:translateY(-50%); z-index:5; width:44px; height:44px; border-radius:50%; background:color-mix(in srgb,var(--panel) 80%,transparent); backdrop-filter:blur(4px); border:1px solid var(--line); color:var(--text); font-size:28px; font-weight:700; line-height:1; cursor:pointer; box-shadow:var(--shadow-soft); transition:transform .1s,background .2s,opacity .2s; opacity:0; } 
    .scroller-wrap:hover .scroller-arrow{ opacity:1; } 
    .scroller-wrap .scroller-arrow:hover{ background:var(--panel); border-color:var(--brand); } 
    .scroller-wrap .scroller-arrow:active{ transform:translateY(-50%) scale(0.95); } 
    .scroller-wrap .scroller-arrow.prev{ left:12px; } 
    .scroller-wrap .scroller-arrow.next{ right:12px; } 
    .scroller-wrap .scroller-arrow[disabled]{ opacity:0.1 !important; cursor:not-allowed; } 
    
    /* Ajustes Finos para Setas nas Miniaturas */
    .thumbs-wrap .scroller-arrow{
        width:36px; height:36px; font-size:22px; 
        box-shadow: 0 4px 12px rgba(15,23,42,.1);
    }
    .thumbs-wrap .scroller-arrow.prev{ left:6px; }
    .thumbs-wrap .scroller-arrow.next{ right:6px; }
}
/* Breadcrumbs & Chips */
.breadcrumbs{ color:var(--muted); font-size:.92rem; margin:var(--space-3) 0; } .breadcrumbs a{ color:var(--brand); }
.chips{ display:flex; gap:8px; flex-wrap:wrap; margin:var(--space-2) 0 var(--space-3); } .chip{ display:inline-flex; align-items:center; height:34px; padding:0 12px; background:var(--bg-2); color:var(--text); border:1px solid var(--line); border-radius:999px; font-weight:700; font-size:.9rem; } .chip.on{ background:color-mix(in srgb,var(--brand) 8%,var(--bg)); border-color:color-mix(in srgb,var(--brand) 40%,var(--line)); color:var(--brand-strong); } .chip.link{ background: transparent; border: none; font-weight: 600; color: var(--brand); }
/* Página de Produto */
.prod{ display:grid; gap:var(--space-4); grid-template-columns:1.08fr 1fr; } @media(max-width:900px){ .prod{ grid-template-columns:1fr; } }
.gallery{ display:grid; gap:var(--space-2); } 
/* CORREÇÃO: Imagem principal (removendo centralização manual que conflitava com responsividade) */
.gallery-main{
    /* Garante que a imagem principal se adapte ao container */
    display: flex;
    justify-content: center;
    align-items: center;
}
.gallery-main img{ width:100%; height:min(60vh,520px); object-fit:contain; background:var(--bg-2); border:1px solid var(--line); border-radius:var(--rad-lg); transform:translateZ(0); }
/* Miniaturas (Thumbs) - Otimizadas com regras do bloco principal */
.thumbs{
    /* As regras de flex/scroll-snap/touch-action estão em .scroller, .scroller.auto, .thumbs */
    gap:10px;
    padding:10px 2px 12px;
    border-radius:12px;
}
.th{
    /* As regras de snap/flex-grow/touch-action estão em .thumbs .th, acima */
    flex-shrink:0;
    height:86px;
    width:auto;
    aspect-ratio:1/1;
    object-fit:contain;
    background:var(--bg-2);
    border:1px solid var(--line);
    border-radius:var(--rad);
    cursor:pointer;
    transition: transform .12s ease, border-color .18s ease, box-shadow .18s ease;
}
.th:hover{ border-color:color-mix(in srgb,var(--brand) 30%,var(--line)); transform:translateY(-1px); }
.th.is-active{ outline: 2px solid var(--brand); outline-offset: 2px; } 

.title{ margin:0 0 .35rem; font-weight:900; letter-spacing:-.01em; font-size: clamp(1.4rem, 3vw, 1.9rem); line-height: 1.25; } 
.price-lg{ color:var(--price); font-weight:900; font-size:clamp(1.6rem,3.4vw,2.2rem); margin:.6rem 0 .9rem; } 
.desc{ color:var(--text); opacity:.94; } 

/* ========================================================= */
/* Estilos para Páginas Institucionais e CTA */
/* ========================================================= */
.product-actions-top {
    display: flex;
    gap: var(--space-2);
    flex-wrap: wrap;
    margin: 0.8rem 0 1.5rem 0; /* Espaçamento após o preço e antes da descrição */
}

.product-actions-top .btn {
    flex: 1 1 45%; 
    min-width: 150px;
    height: 52px; 
    font-size: 1.05rem;
    font-weight: 900; 
}

@media (min-width: 600px) {
    .product-actions-top .btn {
        flex: 0 0 auto;
        min-width: 180px;
    }
}
/* Estilização para as Páginas Institucionais (Sobre, Privacidade, etc.) */
.page-card-content {
    max-width: 800px;
    margin: 2rem auto;
    text-align: left;
    line-height: 1.6;
}
.page-card-content .h2.sub {
    margin-top: 20px;
}
.page-title {
    text-align: center;
    max-width: 800px;
    margin: 2rem auto 0.5rem auto !important;
}
.page-desc {
    text-align: center;
    max-width: 800px;
    margin: 0 auto 3rem auto !important;
}
.clean-list, .standard-list {
    list-style: none;
    padding-left: 0;
}
.clean-list li, .standard-list li {
    margin-bottom: 15px;
    line-height: 1.5;
    font-size: 1.05rem;
    display: flex;
    align-items: flex-start;
}
.clean-list li span {
    margin-right: 10px;
    font-size: 1.2em;
    line-height: 1;
    flex-shrink: 0;
}
.standard-list li {
    list-style: disc; /* Reabilita bullets para lista padrão */
    margin-left: 20px;
    display: list-item;
}
.large-text {
    font-size: 1.15em !important;
    line-height: 1.7 !important;
    font-weight: 500;
}
/* LIGHTBOX (Zoom) */
.lightbox { 
    position: fixed; inset: 0; 
    display: none; 
    align-items: center; 
    justify-content: center; 
    background: rgba(0,0,0,.85); /* Fundo mais escuro */
    z-index: 10000; /* Z-index alto para garantir que fique por cima de tudo */
    padding: 24px; 
} 
.lightbox.open { 
    display: flex; 
} 
.lightbox img { 
    max-width: 95vw; 
    max-height: 90vh; /* Aumenta a altura máxima */
    object-fit: contain; 
    border-radius: 14px; 
    background: #fff; 
    box-shadow: 0 10px 40px rgba(0,0,0,.5); 
} 
html[data-theme="dark"] .lightbox img { 
    background: var(--bg-2); 
} 
.lightbox .close { 
    position: absolute; 
    top: 10px; 
    right: 10px; 
    border: 0; 
    border-radius: 50%; /* Faz o botão de fechar ser redondo */
    padding: 8px 12px;
    height: 40px; width: 40px;
    font-weight: 800; 
    background: #f04444; 
    color: #fff; 
    cursor: pointer; 
    font-size: 1.2rem; 
    line-height: 1; 
    text-align: center;
}
/* ========================================================= */

.actions{ display:flex; gap:var(--space-2); flex-wrap:wrap; margin-top:var(--space-3); }

/* Modal Lead */
.modal{ display:none; position:fixed; inset:0; z-index:70; background:color-mix(in srgb,#000 70%,transparent); align-items:center; justify-content:center; padding:var(--space-3); }
.modal-card{ width:100%; max-width:560px; background:var(--panel); border:1px solid var(--line); border-radius:var(--rad-lg); padding:var(--space-4); box-shadow:var(--shadow); }
.modal-card input:not([type="checkbox"]){ width:100%; height:46px; padding:0 var(--space-3); margin-bottom:var(--space-2); background:var(--bg-2); border:1px solid var(--line); border-radius:var(--rad); color:var(--text); }
.modal-actions{ display: flex; gap: var(--space-2); align-items: center; margin-top: var(--space-3); }
/* FAB WhatsApp */
.fab{ position:fixed; right:16px; bottom:16px; z-index:60; background:#25D366; color:#fff; font-weight:900; padding:12px 18px; border-radius:999px; box-shadow:0 10px 26px rgba(37,211,102,.35); }
/* Footer */
footer{ border-top:1px solid var(--line); color:var(--muted); text-align:center; padding:var(--space-5) 0; margin-top:var(--space-6); background:color-mix(in srgb,var(--bg) 96%,transparent); } html[data-theme="dark"] footer{ background:color-mix(in srgb,var(--bg) 96%,transparent); }
/* Admin Styles */
.section.card.p{ background:var(--panel); border:1px solid var(--line); border-radius:var(--rad-lg); padding:var(--space-3); box-shadow:var(--shadow-soft); margin-bottom: var(--space-4); }
.card.p label { display: block; font-weight: 700; margin-bottom: 4px; font-size: .9em; }
.card.p input:not([type=checkbox]):not([type=submit]), .card.p textarea { width:100%; height:46px; padding:0 var(--space-3); border-radius:var(--rad); background:var(--bg-2); border:1px solid var(--line); color:var(--text); margin-bottom:var(--space-2); }
.note{ padding:var(--space-2) var(--space-3); margin-bottom:var(--space-3); border-radius:var(--rad); border:1px solid transparent; font-size: 0.95em; }
.note.ok{ background:color-mix(in srgb,var(--accent) 10%,transparent); border-color:color-mix(in srgb,var(--accent) 40%,transparent); color:color-mix(in srgb,var(--accent) 80%,var(--text)); }
.note.error{ background:color-mix(in srgb,#ef4444 10%,transparent); border-color:color-mix(in srgb,#ef4444 40%,transparent); color:color-mix(in srgb,#ef4444 80%,var(--text)); }
html[data-theme="dark"] .note.ok{ color:color-mix(in srgb,var(--accent) 85%,var(--text)); }
html[data-theme="dark"] .note.error{ color:color-mix(in srgb,#f87171 85%,var(--text)); }
.step{ border:1px dashed var(--line); border-radius:var(--rad); padding:var(--space-3); margin-top:var(--space-2); } .step h3{ margin:0 0 6px; } .step p{ margin: 0 0 10px; font-size: 0.9em; color: var(--muted); }
.pill{ display:inline-block; margin:.35rem .5rem 0 0; padding:.4rem .7rem; border-radius:999px; background:var(--bg-2); border:1px solid var(--line); color:var(--muted); font-size: .85em; }
.progress{ height:10px; background:var(--bg-2); border:1px solid var(--line); border-radius:999px; overflow:hidden; margin:.6rem 0; } .progress i{ display:block; height:100%; width:0%; background:linear-gradient(90deg,var(--brand),var(--accent)); transition:width .3s; } .progress.indeterminate i{ animation:slide 1.2s infinite linear; width: 30%; } @keyframes slide{ from{ transform:translateX(-100%);} to{ transform:translateX(330%);} }
.stats{ margin-top: 10px; } .muted.msg{ margin-top: 6px; font-size: .9em; }
.log{ height:200px; overflow:auto; background:var(--bg-2); border:1px solid var(--line); padding:12px; border-radius:10px; font-family: monospace; font-size: .85em; white-space: pre-wrap; word-break: break-all; } html[data-theme="dark"] .log { background: #0f151e; border-color: var(--line); }
.table-wrap{ overflow:auto; } 
/* Correção de espaçamento na Tabela Admin */
.table-wrap table.t thead th{ text-align:left; font-size:.9rem; color:var(--muted); font-weight:800; border-bottom:1px solid var(--line); padding:8px 10px; white-space: nowrap; } 
.table-wrap table.t tbody td{ background:var(--panel); padding:10px; border-top:1px solid var(--line); border-bottom:1px solid var(--line); vertical-align: middle; white-space: nowrap; } /* Garantir que não quebre linha */
.table-wrap table.t tbody tr td:first-child{ border-left:1px solid var(--line); border-radius:10px 0 0 10px; } 
.table-wrap table.t tbody tr td:last-child{ border-right:1px solid var(--line); border-radius:0 10px 10px 0; }
.badge{ display:inline-flex; align-items:center; height:26px; padding:0 10px; background:var(--bg-2); border:1px solid var(--line); border-radius:999px; font-size:.82rem; font-weight:800; }
.status-novo{ color:#1d4ed8; border-color:#93c5fd; background:#eff6ff; } .status-contatado{ color:#0f766e; border-color:#99f6e4; background:#ecfeff; } .status-negociacao{ color:#a16207; border-color:#fde68a; background:#fffbeb; } .status-convertido{ color:#065f46; border-color:#86efac; background:#ecfdf5; } .status-perdido{ color:#991b1b; border-color:#fecaca; background:#fef2f2; }
.btn.sm[href*="wa.me"]{ background:#25D366; color:#fff; box-shadow:0 4px 12px rgba(37,211,102,.3); } .btn.sm[href*="wa.me"]:hover{ background:#1ebe5d; }
.pill.sm{ background:transparent; border:1px solid var(--line); color:var(--text); height:32px; padding:0 10px; border-radius:999px; font-weight:800; cursor:pointer; font-size: .8rem; } .pill.sm:hover{ border-color:color-mix(in srgb,var(--brand) 40%,var(--line)); color:var(--brand-strong); }
.h2.sub{ margin-top:20px; border-top:1px solid var(--line); padding-top:16px; font-size: 1.25rem; } .muted.sub { font-size: 0.9em; margin-bottom: 10px; color: var(--muted); }
/* Admin Plus Styles */
.kpi-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:12px;margin-top:8px} .kpi-card{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:12px} .kpi-top{color:var(--muted);font-weight:700;font-size:.85rem} .kpi-num{font-weight:900;font-size:1.6rem;margin-top:4px} /* Heatmap */ .heatmap{display:grid;grid-template-columns:repeat(24,1fr);gap:3px;margin-top:10px} .heatmap .cell{height:16px;border-radius:4px;background:var(--bg-2);border:1px solid var(--line)} .heatmap .cell.l1{background:#d1fae5}.heatmap .cell.l2{background:#a7f3d0} .heatmap .cell.l3{background:#6ee7b7}.heatmap .cell.l4{background:#34d399} /* Kanban */ .kanban-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:10px} .kan-col{border:1px dashed var(--line);border-radius:12px;padding:10px;min-height:200px;background:var(--bg-2)} .kan-title{font-weight:900;margin-bottom:6px;color:var(--muted)} .kan-list{min-height:10px} .kan-card{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:8px;margin-bottom:8px;cursor:grab;display:grid;gap:4px} .kan-card .top{display:flex;justify-content:space-between;align-items:center} .kan-card .name{font-weight:800} .kan-card .muted{font-size:.85rem;color:var(--muted)} .kan-card.sel{outline:2px solid var(--brand)} /* Drawer */ .drawer{position:fixed;inset:auto 0 0 auto;top:0;width:min(420px,92vw);background:var(--panel);border-left:1px solid var(--line);box-shadow:var(--shadow);height:100vh;transform:translateX(110%);transition:.2s;z-index:80;padding:14px; overflow-y: auto;} .drawer.open{transform:translateX(0)} .drawer-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px} .drawer-title{font-weight:900;font-size:1.2rem} .drawer-sub{color:var(--muted);font-size:.9rem} .drawer-block{margin:10px 0} .drawer .list{display:grid;gap:6px;margin-top:6px} .drawer-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px} /* Responsivo */ @media(max-width:1100px){.kanban-grid{grid-template-columns:repeat(2,1fr)}} @media(max-width:640px){.kanban-grid{grid-template-columns:1fr}}
/* Acessibilidade */
:where(a,button,.btn,.chip,.th,.card,input){ outline:none; } :where(a,button,.btn,.chip,.th,.card,input:not([type=checkbox])):focus-visible{ box-shadow:var(--ring); }
@media(prefers-reduced-motion:reduce){ *{ animation:none !important; transition:none !important; } }
/* Mobile Nav */
@media(max-width:860px){ .menu-btn{ display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; border-radius:12px; background:var(--bg-2); border:1px solid var(--line); color:var(--text); cursor: pointer; } .nav{ position:fixed; inset:66px 0 auto 0; background:var(--panel); border-bottom:1px solid var(--line); padding:var(--space-3); gap:var(--space-2); display:none; flex-direction: column; z-index: 35; } html.menu-open .nav{ display:flex; } .search{ margin-left:0; flex-grow: 1; } .top { flex-wrap: wrap; padding-bottom: var(--space-2); } }
/* Theme Toggle */
.theme-switch{ position:relative; display:inline-flex; align-items:center; gap:8px; height:40px; padding:0 10px; border-radius:999px; background:var(--bg-2); border:1px solid var(--line); cursor:pointer; user-select:none; } .theme-switch input{ position:absolute; inset:0; opacity:0; cursor:pointer; } .theme-switch .icon{ font-size:16px; line-height:1; } .theme-switch .sun{ opacity:1; transition:.2s; } .theme-switch .moon{ opacity:.45; transition:.2s; }
html[data-theme="dark"] .theme-switch{ background:color-mix(in srgb,var(--brand) 6%,var(--bg-2)); border-color:color-mix(in srgb,var(--brand) 28%,var(--line)); } html[data-theme="dark"] .theme-switch .sun{ opacity:.45; } html[data-theme="dark"] .theme-switch .moon{ opacity:1; }
/* Lightbox/Zoom */
.lightbox{ 
    position:fixed; inset:0; 
    display:none; 
    align-items:center; 
    justify-content:center; 
    background:rgba(0,0,0,.85); /* Fundo mais escuro */
    z-index:10000; /* Z-index alto para garantir que fique por cima de tudo */
    padding: 24px; 
} 
.lightbox.open{ 
    display:flex; 
} 
.lightbox img{ 
    max-width: 95vw; 
    max-height: 90vh; /* Aumenta a altura máxima */
    object-fit: contain; 
    border-radius: 14px; 
    background: #fff; 
    box-shadow: 0 10px 40px rgba(0,0,0,.5); 
} 
html[data-theme="dark"] .lightbox img{ 
    background: var(--bg-2); 
} 
.lightbox .close{ 
    position: absolute; 
    top: 10px; 
    right: 10px; 
    border: 0; 
    border-radius: 50%; /* Faz o botão de fechar ser redondo */
    padding: 8px 12px;
    height: 40px; width: 40px;
    font-weight: 800; 
    background: #f04444; 
    color: #fff; 
    cursor: pointer; 
    font-size: 1.2rem; 
    line-height: 1; 
    text-align: center;
}
/* ========================================================= */

.actions{ display:flex; gap:var(--space-2); flex-wrap:wrap; margin-top:var(--space-3); }

/* Modal Lead */
.modal{ display:none; position:fixed; inset:0; z-index:70; background:color-mix(in srgb,#000 70%,transparent); align-items:center; justify-content:center; padding:var(--space-3); }
.modal-card{ width:100%; max-width:560px; background:var(--panel); border:1px solid var(--line); border-radius:var(--rad-lg); padding:var(--space-4); box-shadow:var(--shadow); }
.modal-card input:not([type="checkbox"]){ width:100%; height:46px; padding:0 var(--space-3); margin-bottom:var(--space-2); background:var(--bg-2); border:1px solid var(--line); border-radius:var(--rad); color:var(--text); }
.modal-actions{ display: flex; gap: var(--space-2); align-items: center; margin-top: var(--space-3); }
/* FAB WhatsApp */
.fab{ position:fixed; right:16px; bottom:16px; z-index:60; background:#25D366; color:#fff; font-weight:900; padding:12px 18px; border-radius:999px; box-shadow:0 10px 26px rgba(37,211,102,.35); }
/* Footer */
footer{ border-top:1px solid var(--line); color:var(--muted); text-align:center; padding:var(--space-5) 0; margin-top:var(--space-6); background:color-mix(in srgb,var(--bg) 96%,transparent); } html[data-theme="dark"] footer{ background:color-mix(in srgb,var(--bg) 96%,transparent); }
/* Admin Styles */
.section.card.p{ background:var(--panel); border:1px solid var(--line); border-radius:var(--rad-lg); padding:var(--space-3); box-shadow:var(--shadow-soft); margin-bottom: var(--space-4); }
.card.p label { display: block; font-weight: 700; margin-bottom: 4px; font-size: .9em; }
.card.p input:not([type=checkbox]):not([type=submit]), .card.p textarea { width:100%; height:46px; padding:0 var(--space-3); border-radius:var(--rad); background:var(--bg-2); border:1px solid var(--line); color:var(--text); margin-bottom:var(--space-2); }
.note{ padding:var(--space-2) var(--space-3); margin-bottom:var(--space-3); border-radius:var(--rad); border:1px solid transparent; font-size: 0.95em; }
.note.ok{ background:color-mix(in srgb,var(--accent) 10%,transparent); border-color:color-mix(in srgb,var(--accent) 40%,transparent); color:color-mix(in srgb,var(--accent) 80%,var(--text)); }
.note.error{ background:color-mix(in srgb,#ef4444 10%,transparent); border-color:color-mix(in srgb,#ef4444 40%,transparent); color:color-mix(in srgb,#ef4444 80%,var(--text)); }
html[data-theme="dark"] .note.ok{ color:color-mix(in srgb,var(--accent) 85%,var(--text)); }
html[data-theme="dark"] .note.error{ color:color-mix(in srgb,#f87171 85%,var(--text)); }
.step{ border:1px dashed var(--line); border-radius:var(--rad); padding:var(--space-3); margin-top:var(--space-2); } .step h3{ margin:0 0 6px; } .step p{ margin: 0 0 10px; font-size: 0.9em; color: var(--muted); }
.pill{ display:inline-block; margin:.35rem .5rem 0 0; padding:.4rem .7rem; border-radius:999px; background:var(--bg-2); border:1px solid var(--line); color:var(--muted); font-size: .85em; }
.progress{ height:10px; background:var(--bg-2); border:1px solid var(--line); border-radius:999px; overflow:hidden; margin:.6rem 0; } .progress i{ display:block; height:100%; width:0%; background:linear-gradient(90deg,var(--brand),var(--accent)); transition:width .3s; } .progress.indeterminate i{ animation:slide 1.2s infinite linear; width: 30%; } @keyframes slide{ from{ transform:translateX(-100%);} to{ transform:translateX(330%);} }
.stats{ margin-top: 10px; } .muted.msg{ margin-top: 6px; font-size: .9em; }
.log{ height:200px; overflow:auto; background:var(--bg-2); border:1px solid var(--line); padding:12px; border-radius:10px; font-family: monospace; font-size: .85em; white-space: pre-wrap; word-break: break-all; } html[data-theme="dark"] .log { background: #0f151e; border-color: var(--line); }
.table-wrap{ overflow:auto; } 
/* Correção de espaçamento na Tabela Admin */
.table-wrap table.t thead th{ text-align:left; font-size:.9rem; color:var(--muted); font-weight:800; border-bottom:1px solid var(--line); padding:8px 10px; white-space: nowrap; } 
.table-wrap table.t tbody td{ background:var(--panel); padding:10px; border-top:1px solid var(--line); border-bottom:1px solid var(--line); vertical-align: middle; white-space: nowrap; } /* Garantir que não quebre linha */
.table-wrap table.t tbody tr td:first-child{ border-left:1px solid var(--line); border-radius:10px 0 0 10px; } 
.table-wrap table.t tbody tr td:last-child{ border-right:1px solid var(--line); border-radius:0 10px 10px 0; }
.badge{ display:inline-flex; align-items:center; height:26px; padding:0 10px; background:var(--bg-2); border:1px solid var(--line); border-radius:999px; font-size:.82rem; font-weight:800; }
.status-novo{ color:#1d4ed8; border-color:#93c5fd; background:#eff6ff; } .status-contatado{ color:#0f766e; border-color:#99f6e4; background:#ecfeff; } .status-negociacao{ color:#a16207; border-color:#fde68a; background:#fffbeb; } .status-convertido{ color:#065f46; border-color:#86efac; background:#ecfdf5; } .status-perdido{ color:#991b1b; border-color:#fecaca; background:#fef2f2; }
.btn.sm[href*="wa.me"]{ background:#25D366; color:#fff; box-shadow:0 4px 12px rgba(37,211,102,.3); } .btn.sm[href*="wa.me"]:hover{ background:#1ebe5d; }
.pill.sm{ background:transparent; border:1px solid var(--line); color:var(--text); height:32px; padding:0 10px; border-radius:999px; font-weight:800; cursor:pointer; font-size: .8rem; } .pill.sm:hover{ border-color:color-mix(in srgb,var(--brand) 40%,var(--line)); color:var(--brand-strong); }
.h2.sub{ margin-top:20px; border-top:1px solid var(--line); padding-top:16px; font-size: 1.25rem; } .muted.sub { font-size: 0.9em; margin-bottom: 10px; color: var(--muted); }
/* Admin Plus Styles */
.kpi-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:12px;margin-top:8px} .kpi-card{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:12px} .kpi-top{color:var(--muted);font-weight:700;font-size:.85rem} .kpi-num{font-weight:900;font-size:1.6rem;margin-top:4px} /* Heatmap */ .heatmap{display:grid;grid-template-columns:repeat(24,1fr);gap:3px;margin-top:10px} .heatmap .cell{height:16px;border-radius:4px;background:var(--bg-2);border:1px solid var(--line)} .heatmap .cell.l1{background:#d1fae5}.heatmap .cell.l2{background:#a7f3d0} .heatmap .cell.l3{background:#6ee7b7}.heatmap .cell.l4{background:#34d399} /* Kanban */ .kanban-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:10px} .kan-col{border:1px dashed var(--line);border-radius:12px;padding:10px;min-height:200px;background:var(--bg-2)} .kan-title{font-weight:900;margin-bottom:6px;color:var(--muted)} .kan-list{min-height:10px} .kan-card{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:8px;margin-bottom:8px;cursor:grab;display:grid;gap:4px} .kan-card .top{display:flex;justify-content:space-between;align-items:center} .kan-card .name{font-weight:800} .kan-card .muted{font-size:.85rem;color:var(--muted)} .kan-card.sel{outline:2px solid var(--brand)} /* Drawer */ .drawer{position:fixed;inset:auto 0 0 auto;top:0;width:min(420px,92vw);background:var(--panel);border-left:1px solid var(--line);box-shadow:var(--shadow);height:100vh;transform:translateX(110%);transition:.2s;z-index:80;padding:14px; overflow-y: auto;} .drawer.open{transform:translateX(0)} .drawer-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px} .drawer-title{font-weight:900;font-size:1.2rem} .drawer-sub{color:var(--muted);font-size:.9rem} .drawer-block{margin:10px 0} .drawer .list{display:grid;gap:6px;margin-top:6px} .drawer-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px} /* Responsivo */ @media(max-width:1100px){.kanban-grid{grid-template-columns:repeat(2,1fr)}} @media(max-width:640px){.kanban-grid{grid-template-columns:1fr}}
/* Acessibilidade */
:where(a,button,.btn,.chip,.th,.card,input){ outline:none; } :where(a,button,.btn,.chip,.th,.card,input:not([type=checkbox])):focus-visible{ box-shadow:var(--ring); }
@media(prefers-reduced-motion:reduce){ *{ animation:none !important; transition:none !important; } }
/* Mobile Nav */
@media(max-width:860px){ .menu-btn{ display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; border-radius:12px; background:var(--bg-2); border:1px solid var(--line); color:var(--text); cursor: pointer; } .nav{ position:fixed; inset:66px 0 auto 0; background:var(--panel); border-bottom:1px solid var(--line); padding:var(--space-3); gap:var(--space-2); display:none; flex-direction: column; z-index: 35; } html.menu-open .nav{ display:flex; } .search{ margin-left:0; flex-grow: 1; } .top { flex-wrap: wrap; padding-bottom: var(--space-2); } }
/* Theme Toggle */
.theme-switch{ position:relative; display:inline-flex; align-items:center; gap:8px; height:40px; padding:0 10px; border-radius:999px; background:var(--bg-2); border:1px solid var(--line); cursor:pointer; user-select:none; } .theme-switch input{ position:absolute; inset:0; opacity:0; cursor:pointer; } .theme-switch .icon{ font-size:16px; line-height:1; } .theme-switch .sun{ opacity:1; transition:.2s; } .theme-switch .moon{ opacity:.45; transition:.2s; }
html[data-theme="dark"] .theme-switch{ background:color-mix(in srgb,var(--brand) 6%,var(--bg-2)); border-color:color-mix(in srgb,var(--brand) 28%,var(--line)); } html[data-theme="dark"] .theme-switch .sun{ opacity:.45; } html[data-theme="dark"] .theme-switch .moon{ opacity:1; }
/* Lightbox/Zoom */
.lightbox{ 
    position:fixed; inset:0; 
    display:none; 
    align-items:center; 
    justify-content:center; 
    background:rgba(0,0,0,.85); /* Fundo mais escuro */
    z-index:10000; /* Z-index alto para garantir que fique por cima de tudo */
    padding: 24px; 
} 
.lightbox.open{ 
    display:flex; 
} 
.lightbox img{ 
    max-width: 95vw; 
    max-height: 90vh; /* Aumenta a altura máxima */
    object-fit: contain; 
    border-radius: 14px; 
    background: #fff; 
    box-shadow: 0 10px 40px rgba(0,0,0,.5); 
} 
html[data-theme="dark"] .lightbox img{ 
    background: var(--bg-2); 
} 
.lightbox .close{ 
    position: absolute; 
    top: 10px; 
    right: 10px; 
    border: 0; 
    border-radius: 50%; /* Faz o botão de fechar ser redondo */
    padding: 8px 12px;
    height: 40px; width: 40px;
    font-weight: 800; 
    background: #f04444; 
    color: #fff; 
    cursor: pointer; 
    font-size: 1.2rem; 
    line-height: 1; 
    text-align: center;
}