@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

:root{

    /* Cores principais */
    --cor-fundo:#F4F5F7;
    --cor-superficie:#FFFFFF;
    --cor-superficie-2:#F9FAFB;

    --cor-texto:#1F2937;
    --cor-texto-secundario:#6B7280;
    --cor-texto-terciario:#9CA3AF;

    --cor-primaria:#0B6E4F;
    --cor-primaria-hover:#095940;
    --cor-primaria-fundo:#E6F4EE;

    --cor-sucesso:#16A34A;
    --cor-sucesso-fundo:#DCFCE7;

    --cor-aviso:#D97706;
    --cor-aviso-fundo:#FEF3C7;

    --cor-perigo:#DC2626;
    --cor-perigo-fundo:#FEE2E2;

    --cor-borda:#E5E7EB;
    --cor-borda-forte:#D1D5DB;

    --sombra-card:0 1px 2px rgba(16,24,40,.05), 0 1px 3px rgba(16,24,40,.06);
    --sombra-elevada:0 4px 12px rgba(16,24,40,.10);

    --raio:10px;
    --raio-grande:14px;

}

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

body{
    display:flex;
    background:var(--cor-fundo);
    color:var(--cor-texto);
    -webkit-font-smoothing:antialiased;
}

/* ===== Sidebar ===== */

.sidebar{
    position:fixed;
    top:0;
    left:0;
    width:270px;
    height:100vh;
    background:#132A22;
    color:#F4F5F7;
    padding:24px 16px;
    transform:translateX(-100%);
    transition:transform .25s ease;
    z-index:999;
    box-shadow:var(--sombra-elevada);
    overflow-y:auto;
}

.sidebar.aberta{
    transform:translateX(0);
}

.sidebar h2{
    margin-bottom:32px;
    text-align:left;
    padding:0 12px;
    font-size:18px;
    font-weight:700;
    letter-spacing:.3px;
    color:#FFFFFF;
}

.sidebar nav{
    display:flex;
    flex-direction:column;
    gap:2px;
}

.sidebar a{
    color:#C9D3CE;
    text-decoration:none;
    padding:11px 12px;
    border-radius:8px;
    font-size:14px;
    font-weight:500;
    transition:background .15s, color .15s;
}

.sidebar a:hover{
    background:rgba(255,255,255,.08);
    color:#FFFFFF;
}

.sidebar a.ativo{
    background:var(--cor-primaria);
    color:#FFFFFF;
}

/* ===== Botão do menu + overlay ===== */

.botaoMenu{
    position:fixed;
    top:16px;
    left:16px;
    z-index:1000;
    width:42px;
    height:42px;
    background:var(--cor-superficie);
    color:var(--cor-texto);
    border:1px solid var(--cor-borda);
    border-radius:var(--raio);
    font-size:18px;
    cursor:pointer;
    box-shadow:var(--sombra-card);
    display:flex;
    align-items:center;
    justify-content:center;
}

.botaoMenu:hover{
    background:var(--cor-superficie-2);
}

.overlayMenu{
    display:none;
    position:fixed;
    inset:0;
    background:rgba(15,23,20,.45);
    z-index:998;
}

.overlayMenu.ativo{
    display:block;
}

/* ===== Conteúdo principal ===== */

main{
    flex:1;
    padding:24px 20px 40px;
    padding-top:76px;
    max-width:1100px;
    margin:0 auto;
    width:100%;
}

header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:28px;
    flex-wrap:wrap;
    gap:12px;
}

h1{
    font-size:22px;
    font-weight:700;
    color:var(--cor-texto);
}

/* ===== Cartões (KPI / genéricos) ===== */

.cards{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
    gap:14px;
    margin-bottom:28px;
}

.card{
    background:var(--cor-superficie);
    border:1px solid var(--cor-borda);
    border-radius:var(--raio-grande);
    padding:18px 20px;
    box-shadow:var(--sombra-card);
}

a.card{
    display:block;
    text-decoration:none;
    color:inherit;
    transition:border-color .15s, box-shadow .15s, transform .15s;
}

a.card:hover{
    border-color:var(--cor-primaria);
    box-shadow:var(--sombra-elevada);
    transform:translateY(-1px);
}

.card h3{
    font-size:13px;
    font-weight:500;
    color:var(--cor-texto-secundario);
    margin-bottom:8px;
}

.card p{
    font-size:26px;
    font-weight:700;
    color:var(--cor-texto);
}

.card p.valor-sucesso{ color:var(--cor-sucesso); }
.card p.valor-aviso{ color:var(--cor-aviso); }

/* ===== Painel do gráfico ===== */

.painel{
    background:var(--cor-superficie);
    border:1px solid var(--cor-borda);
    border-radius:var(--raio-grande);
    padding:20px;
    box-shadow:var(--sombra-card);
    margin-bottom:28px;
}

.painel h2{
    font-size:15px;
    font-weight:600;
    color:var(--cor-texto);
    margin-bottom:14px;
}

.legendaGrafico{
    display:flex;
    flex-wrap:wrap;
    gap:16px;
    margin-bottom:10px;
    font-size:12px;
    color:var(--cor-texto-secundario);
}

.legendaGrafico span{
    display:flex;
    align-items:center;
    gap:6px;
}

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

/* ===== Botões ===== */

button, .botao{
    font-family:inherit;
    font-size:14px;
    font-weight:600;
    padding:10px 16px;
    border-radius:var(--raio);
    border:1px solid var(--cor-borda-forte);
    background:var(--cor-superficie);
    color:var(--cor-texto);
    cursor:pointer;
    transition:background .15s, border-color .15s;
}

button:hover, .botao:hover{
    background:var(--cor-superficie-2);
    border-color:var(--cor-texto-terciario);
}

button.primario{
    background:var(--cor-primaria);
    border-color:var(--cor-primaria);
    color:#FFFFFF;
}

button.primario:hover{
    background:var(--cor-primaria-hover);
    border-color:var(--cor-primaria-hover);
}

/* ===== Badges de status ===== */

.badge{
    display:inline-flex;
    align-items:center;
    gap:6px;
    font-size:12px;
    font-weight:600;
    padding:4px 10px;
    border-radius:999px;
}

.badge-sucesso{ background:var(--cor-sucesso-fundo); color:#166534; }
.badge-aviso{ background:var(--cor-aviso-fundo); color:#92400E; }
.badge-perigo{ background:var(--cor-perigo-fundo); color:#991B1B; }
.badge-neutro{ background:var(--cor-superficie-2); color:var(--cor-texto-secundario); border:1px solid var(--cor-borda); }

/* ===== Login (herdado, ajustado à nova paleta) ===== */

.login-page{
    flex:1;
    min-height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
    padding-top:40px;
    background:var(--cor-fundo);
}

.login-box{
    background:var(--cor-superficie);
    border:1px solid var(--cor-borda);
    border-radius:var(--raio-grande);
    padding:40px;
    box-shadow:var(--sombra-elevada);
    width:100%;
    max-width:360px;
    text-align:center;
}

.login-box h2{
    color:var(--cor-primaria);
    margin-bottom:10px;
    font-size:20px;
}

.login-box p{
    margin-bottom:22px;
    color:var(--cor-texto-secundario);
    font-size:14px;
}

.login-box input{
    width:100%;
    padding:11px 12px;
    margin-bottom:12px;
    border:1px solid var(--cor-borda-forte);
    border-radius:var(--raio);
    font-size:14px;
}

.login-box input:focus{
    outline:none;
    border-color:var(--cor-primaria);
}

.login-box button{
    width:100%;
    padding:11px;
    background:var(--cor-primaria);
    color:white;
    border:none;
    border-radius:var(--raio);
    cursor:pointer;
    font-weight:600;
}

.login-box button:hover{
    background:var(--cor-primaria-hover);
}

.erro{
    color:var(--cor-perigo);
    margin-top:14px;
    font-size:13px;
}

/* ===== Telas pequenas ===== */

@media (max-width:600px){

    main{
        padding:20px 14px 32px;
        padding-top:70px;
    }

    h1{
        font-size:19px;
    }

    .card p{
        font-size:22px;
    }

}

/* ===== Campo de busca ===== */

.campoBusca{
    width:100%;
    max-width:420px;
    padding:10px 14px;
    margin-bottom:18px;
    border:1px solid var(--cor-borda-forte);
    border-radius:var(--raio);
    font-size:14px;
    background:var(--cor-superficie);
}

.campoBusca:focus{
    outline:none;
    border-color:var(--cor-primaria);
}

/* ===== Abas de marketplace ===== */

.abasMarketplace{
    display:flex;
    gap:4px;
    flex-wrap:wrap;
    margin-bottom:20px;
    border-bottom:1px solid var(--cor-borda);
}

.abaMarketplace{
    padding:10px 16px;
    border:none;
    border-bottom:2px solid transparent;
    border-radius:0;
    background:transparent;
    font-size:14px;
    font-weight:600;
    color:var(--cor-texto-secundario);
    cursor:pointer;
    margin-bottom:-1px;
}

.abaMarketplace:hover{
    color:var(--cor-texto);
    background:transparent;
    border-color:var(--cor-borda-forte);
}

.abaMarketplace.ativa{
    color:var(--cor-primaria);
    border-color:var(--cor-primaria);
}

/* ===== Linhas de produtos (cada linha com até 20 produtos, rolagem própria) ===== */

.carrosselWrapper{
    display:flex;
    align-items:center;
    gap:8px;
    margin-bottom:16px;
}

.carrosselProdutos{
    display:flex;
    gap:12px;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    scroll-behavior:smooth;
    flex:1;
    padding-bottom:6px;
    scrollbar-width:thin;
}

.carrosselProdutos::-webkit-scrollbar{
    height:6px;
}

.carrosselProdutos::-webkit-scrollbar-thumb{
    background:var(--cor-borda-forte);
    border-radius:99px;
}

.botaoCarrossel{
    flex-shrink:0;
    width:36px;
    height:36px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:0;
    font-size:16px;
    line-height:1;
}

.botaoCarrossel:disabled{
    opacity:.35;
    cursor:not-allowed;
}

.cartaoProdutoPequeno{
    flex:0 0 172px;
    width:172px;
    scroll-snap-align:start;
    background:var(--cor-superficie);
    border:1px solid var(--cor-borda);
    border-radius:var(--raio-grande);
    box-shadow:var(--sombra-card);
    overflow:hidden;
    display:flex;
    flex-direction:column;
}

.cartaoProdutoPequeno .imagemProduto{
    aspect-ratio:1/1;
}

.cartaoProdutoPequeno .corpoProduto{
    padding:10px 10px 12px;
    gap:5px;
}

.cartaoProdutoPequeno .tituloProduto{
    font-size:12px;
    line-height:1.3;
    min-height:31px;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
}

.cartaoProdutoPequeno .precoProduto{
    font-size:15px;
}

.cartaoProdutoPequeno .acoesProduto{
    flex-direction:column;
    gap:4px;
}

.cartaoProdutoPequeno .acoesProduto button{
    padding:6px 4px;
    font-size:11px;
}

/* ===== Ícones sobrepostos na imagem do produto (editar / excluir) ===== */

.acoesImagemProduto{
    position:absolute;
    top:6px;
    left:6px;
    right:6px;
    display:flex;
    justify-content:space-between;
}

.acaoIconeProduto{
    width:26px;
    height:26px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:0;
    border:none;
    background:rgba(255,255,255,.92);
    color:var(--cor-texto);
    box-shadow:var(--sombra-card);
    cursor:pointer;
}

.acaoIconeProduto:hover{
    background:#FFFFFF;
    border:none;
}

.acaoIconeProduto.acaoExcluir{
    color:var(--cor-perigo);
}

@media (max-width:600px){

    .cartaoProdutoPequeno{
        flex-basis:42vw;
        width:42vw;
    }

    .botaoCarrossel{
        width:30px;
        height:30px;
        font-size:14px;
    }

}

/* ===== Paginação de linhas (quando passa de 12 linhas na tela) ===== */

.paginacaoLinhas{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:6px;
    margin-top:24px;
    flex-wrap:wrap;
}

.botaoPagina{
    min-width:34px;
    height:34px;
    padding:0 8px;
    border-radius:8px;
    font-size:13px;
    font-weight:600;
    border:1px solid var(--cor-borda-forte);
    background:var(--cor-superficie);
    color:var(--cor-texto-secundario);
    cursor:pointer;
}

.botaoPagina.ativa{
    border-color:var(--cor-primaria);
    color:var(--cor-primaria);
    background:var(--cor-primaria-fundo);
}

.botaoPaginaSeguinte{
    display:inline-flex;
    align-items:center;
    gap:4px;
    color:var(--cor-texto);
}

/* ===== Grade e cartão de produto ===== */

.gradeProdutos{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(210px,1fr));
    gap:16px;
}

.cartaoProduto{
    background:var(--cor-superficie);
    border:1px solid var(--cor-borda);
    border-radius:var(--raio-grande);
    box-shadow:var(--sombra-card);
    overflow:hidden;
    display:flex;
    flex-direction:column;
}

.imagemProduto{
    width:100%;
    aspect-ratio:1/1;
    background:var(--cor-superficie-2);
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
    position:relative;
}

.imagemProduto img{
    width:100%;
    height:100%;
    object-fit:contain;
}

.placeholderImagem{
    font-size:12px;
    color:var(--cor-texto-terciario);
}

.corpoProduto{
    padding:12px 14px 14px;
    display:flex;
    flex-direction:column;
    gap:6px;
    flex:1;
}

.idProduto{
    font-size:11px;
    color:var(--cor-texto-terciario);
}

.tituloProduto{
    font-size:13px;
    font-weight:600;
    line-height:1.35;
    min-height:36px;
    color:var(--cor-texto);
}

.precoProduto{
    font-size:17px;
    font-weight:700;
    color:var(--cor-texto);
}

.acoesProduto{
    display:flex;
    gap:6px;
    margin-top:auto;
    padding-top:8px;
}

.acoesProduto button{
    flex:1;
    padding:7px 6px;
    font-size:12px;
}

/* ===== Formulários (Novo Produto / Editar Produto) ===== */

.formulario{
    background:var(--cor-superficie);
    border:1px solid var(--cor-borda);
    border-radius:var(--raio-grande);
    padding:24px;
    box-shadow:var(--sombra-card);
    max-width:720px;
}

.campoFormulario{
    margin-bottom:16px;
}

.campoFormulario label{
    display:block;
    font-size:13px;
    font-weight:600;
    color:var(--cor-texto-secundario);
    margin-bottom:6px;
}

.campoFormulario input, .campoFormulario select{
    width:100%;
    padding:10px 12px;
    border:1px solid var(--cor-borda-forte);
    border-radius:var(--raio);
    font-size:14px;
    background:var(--cor-superficie);
    font-family:inherit;
    color:var(--cor-texto);
}

.campoFormulario input:focus, .campoFormulario select:focus{
    outline:none;
    border-color:var(--cor-primaria);
}

.campoFormulario small{
    display:block;
    font-size:12px;
    color:var(--cor-texto-terciario);
    margin-top:4px;
}

.linhaFormulario{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:16px;
}

.acoesFormulario{
    display:flex;
    gap:10px;
    align-items:center;
    margin-top:8px;
    flex-wrap:wrap;
}

.mensagemFormulario{
    margin-top:12px;
    font-size:14px;
}

.mensagemFormulario.sucesso{ color:var(--cor-sucesso); }
.mensagemFormulario.erro{ color:var(--cor-perigo); }

.avisoFormulario{
    background:var(--cor-aviso-fundo);
    color:#92400E;
    padding:10px 14px;
    border-radius:var(--raio);
    font-size:13px;
    margin-bottom:16px;
}

.pratinhaImagem{
    width:100%;
    max-width:160px;
    aspect-ratio:1/1;
    background:var(--cor-superficie-2);
    border:1px solid var(--cor-borda);
    border-radius:var(--raio);
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
    margin-top:8px;
}

.pratinhaImagem img{
    width:100%;
    height:100%;
    object-fit:contain;
}

@media (max-width:600px){

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

    .formulario{
        padding:18px;
    }

}

/* ===== Menu agrupado (Produtos e sub-itens) ===== */

.grupoMenu{
    margin-bottom:2px;
}

.grupoMenu summary{
    list-style:none;
    cursor:pointer;
    padding:11px 12px;
    border-radius:8px;
    font-size:14px;
    font-weight:500;
    color:#C9D3CE;
    display:flex;
    align-items:center;
    justify-content:space-between;
    user-select:none;
    transition:background .15s, color .15s;
}

.grupoMenu summary::-webkit-details-marker{
    display:none;
}

.grupoMenu summary:hover{
    background:rgba(255,255,255,.08);
    color:#FFFFFF;
}

.grupoMenu summary::after{
    content:"›";
    transform:rotate(90deg);
    transition:transform .15s;
    font-size:16px;
    line-height:1;
}

.grupoMenu[open] summary::after{
    transform:rotate(270deg);
}

.submenu{
    display:flex;
    flex-direction:column;
    gap:2px;
    padding-left:14px;
    margin-top:2px;
}

.submenu a{
    font-size:13px;
    padding:9px 12px;
}

/* ===== Abas dentro de formulário (ex: Importar com IA) ===== */

.abasFormulario{
    display:flex;
    gap:4px;
    flex-wrap:wrap;
    margin-bottom:18px;
    border-bottom:1px solid var(--cor-borda);
}

.abaFormulario{
    padding:9px 14px;
    border:none;
    border-bottom:2px solid transparent;
    border-radius:0;
    background:transparent;
    font-size:13px;
    font-weight:600;
    color:var(--cor-texto-secundario);
    cursor:pointer;
    margin-bottom:-1px;
}

.abaFormulario:hover{
    color:var(--cor-texto);
    background:transparent;
    border-color:var(--cor-borda-forte);
}

.abaFormulario.ativa{
    color:var(--cor-primaria);
    border-color:var(--cor-primaria);
}

/* ===== Textarea e input de arquivo dentro de formulário ===== */

.campoFormulario textarea{
    width:100%;
    padding:10px 12px;
    border:1px solid var(--cor-borda-forte);
    border-radius:var(--raio);
    font-size:14px;
    background:var(--cor-superficie);
    font-family:inherit;
    color:var(--cor-texto);
    resize:vertical;
}

.campoFormulario textarea:focus{
    outline:none;
    border-color:var(--cor-primaria);
}

.campoFormulario input[type="file"]{
    width:100%;
    padding:9px 0;
    border:none;
    background:none;
    font-size:13px;
    color:var(--cor-texto-secundario);
}

/* ===== Cartão de resultado da importação por IA ===== */

.cartaoResultadoImportacao{
    background:var(--cor-superficie);
    border:1px solid var(--cor-borda);
    border-radius:var(--raio-grande);
    padding:16px 18px;
    margin-bottom:14px;
    box-shadow:var(--sombra-card);
}

.cartaoResultadoImportacao .tituloResultado{
    font-size:14px;
    font-weight:600;
    margin-bottom:4px;
}

.cartaoResultadoImportacao .metaResultado{
    font-size:12px;
    color:var(--cor-texto-secundario);
    margin-bottom:8px;
}

.cartaoResultadoImportacao .textoVendaResultado{
    font-size:13px;
    color:var(--cor-texto-secundario);
    margin-bottom:12px;
}

.botaoSecundario{
    background:var(--cor-superficie-2);
}

/* ===== Log de atividade (streaming de IA) ===== */

.logAtividade{
    background:var(--cor-superficie-2);
    border:1px solid var(--cor-borda);
    border-radius:var(--raio);
    padding:10px;
    max-height:340px;
    overflow-y:auto;
}

.linhaLog{
    padding:8px 10px;
    border-radius:8px;
    font-size:13px;
    line-height:1.4;
    margin-bottom:4px;
}

.linhaLog-info{
    color:var(--cor-texto-secundario);
}

.linhaLog-sucesso{
    background:var(--cor-sucesso-fundo);
    color:#166534;
}

.linhaLog-erro{
    background:var(--cor-perigo-fundo);
    color:#991B1B;
}

.linhaLog-aviso{
    background:var(--cor-aviso-fundo);
    color:#92400E;
}

.blocoPrompt{
    background:var(--cor-superficie);
    border:1px solid var(--cor-borda);
    border-radius:var(--raio);
    padding:10px 12px;
    margin-bottom:6px;
}

.blocoPrompt summary{
    cursor:pointer;
    font-size:12px;
    font-weight:600;
    color:var(--cor-texto-secundario);
    list-style:none;
}

.blocoPrompt summary::-webkit-details-marker{
    display:none;
}

.blocoPrompt summary::before{
    content:"› ";
}

.blocoPrompt[open] summary::before{
    content:"⌄ ";
}

.blocoPrompt pre{
    margin-top:8px;
    font-size:12px;
    font-family:ui-monospace, 'SFMono-Regular', Consolas, monospace;
    white-space:pre-wrap;
    word-break:break-word;
    color:var(--cor-texto);
    background:var(--cor-superficie-2);
    padding:10px;
    border-radius:8px;
    max-height:220px;
    overflow-y:auto;
}

.blocoResposta{
    background:var(--cor-superficie);
    border:1px solid var(--cor-borda);
    border-radius:var(--raio);
    padding:10px 12px;
    font-size:12px;
    font-family:ui-monospace, 'SFMono-Regular', Consolas, monospace;
    white-space:pre-wrap;
    word-break:break-word;
    color:var(--cor-texto-secundario);
    max-height:220px;
    overflow-y:auto;
    margin-bottom:6px;
}

/* ===== Campo de texto expansível (cresce com o conteúdo, sem rolar) ===== */

.campoFormulario textarea.campoExpandivel,
textarea.campoExpandivel{
    resize:none;
    overflow:hidden;
    min-height:42px;
    line-height:1.4;
}