/* =========================================================
   Laquilas — Demonstracao: Sistema de E-commerce Personalizado
   Estilos da aplicacao. Os tokens vem de tokens.css, carregado
   antes deste arquivo pelo templates/base.html.twig.

   O vocabulario de classes compartilhado com as demais
   demonstracoes (.faixa-demo, .barra, .marca, .tela-login,
   .cartao-login, .credenciais, .campo, .botao, .sair) e
   deliberado: as demos precisam parecer uma familia.
   ========================================================= */

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: var(--font-sans);
    font-size: 16px;
    line-height: 1.7;
    color: var(--text-body);
    background: var(--bg-main);
}

h1, h2, h3 { color: var(--text-strong); line-height: 1.25; margin: 0 0 .5rem; }
h1 { font-size: 1.6rem; font-weight: 700; }
h2 { font-size: 1.2rem; font-weight: 600; }
h3 { font-size: 1.05rem; font-weight: 600; }

a { color: var(--brand-blue); text-decoration: none; }
a:hover { text-decoration: underline; }

.container { max-width: 1180px; margin: 0 auto; padding: 0 1.5rem; }

/* --- Faixa de demonstracao -------------------------------------------
   Exigida na tela de login e em todas as telas apos o acesso. */
.faixa-demo {
    position: sticky;
    top: 0;
    z-index: 10;
    background: linear-gradient(135deg, var(--brand-navy) 0%, var(--brand-blue) 55%, var(--brand-cyan) 100%);
    color: var(--text-on-dark);
    font-size: .9rem;
    text-align: center;
    padding: .6rem 1.5rem;
}

.faixa-demo strong { font-weight: 700; }

/* --- Barra utilitaria e cabecalho da loja ------------------------------
   O arranjo usual do comercio eletronico brasileiro: barra fina de
   servico, cabecalho com a busca ocupando o centro e a barra de
   departamentos logo abaixo. */
.barra-utilitaria {
    background: var(--brand-navy);
    color: var(--text-on-dark);
    font-size: .82rem;
}

.barra-utilitaria .container {
    display: flex; align-items: center; gap: .75rem; flex-wrap: wrap;
    min-height: 2.2rem;
}

.barra-utilitaria .separador { flex: 1; }
.barra-utilitaria a { color: var(--text-on-dark); font-weight: 600; }

.cabecalho-loja { background: var(--surface); border-bottom: 1px solid var(--border-soft); }

.cabecalho-loja .container {
    display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap;
    min-height: 5rem;
}

.marca {
    font-size: 1.15rem; font-weight: 700; color: var(--text-strong);
    white-space: nowrap;
}
.marca:hover { text-decoration: none; }
.marca span { color: var(--brand-blue); font-weight: 500; }

/* A busca e o caminho mais curto para quem ja sabe o que quer, e por
   isso ocupa todo o espaco livre do cabecalho. */
.busca { flex: 1; min-width: 18rem; display: flex; gap: .5rem; }
.busca input { flex: 1; }

.atalhos { display: flex; align-items: center; gap: 1.25rem; }

.conta { display: flex; flex-direction: column; line-height: 1.3; font-size: .8rem; }
.conta strong { color: var(--text-strong); font-size: .9rem; }
.conta span { color: var(--text-soft); }

.conta-visitante:hover { text-decoration: none; }
.conta-visitante:hover strong { color: var(--brand-blue); }

.atalho-carrinho {
    display: inline-flex; align-items: center; gap: .5rem;
    font-weight: 600; color: var(--text-strong);
    padding: .5rem .9rem;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-pill);
}
.atalho-carrinho:hover { text-decoration: none; border-color: var(--brand-blue); color: var(--brand-blue); }

.contador {
    display: inline-block;
    min-width: 1.4rem; padding: 0 .35rem;
    border-radius: var(--radius-pill);
    background: var(--brand-coral); color: #fff;
    font-size: .72rem; font-weight: 700; text-align: center; line-height: 1.4rem;
}

.departamentos {
    background: var(--brand-blue);
    box-shadow: var(--shadow-soft);
}

.departamentos .container {
    display: flex; gap: 1.5rem; flex-wrap: wrap;
    overflow-x: auto;
}

.departamentos a {
    color: var(--text-on-dark);
    font-size: .88rem; font-weight: 600;
    padding: .7rem 0;
    border-bottom: 3px solid transparent;
    white-space: nowrap;
}
.departamentos a:hover { text-decoration: none; border-bottom-color: rgba(255, 255, 255, .5); }
.departamentos a.ativo { border-bottom-color: var(--brand-cyan); }

/* --- Cabecalho da retaguarda ------------------------------------------- */
.cabecalho-retaguarda { background: var(--surface); border-bottom: 1px solid var(--border-soft); }

.cabecalho-retaguarda .container {
    display: flex; align-items: center; gap: 2rem; flex-wrap: wrap;
    min-height: 4.5rem;
}

.cabecalho-retaguarda nav { display: flex; gap: 1.5rem; margin-right: auto; }

.cabecalho-retaguarda nav a {
    color: var(--text-body); font-weight: 600; font-size: .92rem;
    padding: .25rem 0;
    border-bottom: 2px solid transparent;
}
.cabecalho-retaguarda nav a:hover { text-decoration: none; color: var(--brand-blue); }
.cabecalho-retaguarda nav a.ativo { color: var(--brand-navy); border-bottom-color: var(--brand-blue); }

.sair {
    background: none; border: 0; padding: 0;
    font: inherit; font-size: .85rem; color: var(--text-soft); cursor: pointer;
}
.sair:hover { color: var(--brand-coral); }

main { padding: 2.5rem 0 4rem; }

.cabecalho-tela { margin-bottom: 1.5rem; }
.subtitulo { color: var(--text-soft); margin: 0 0 1rem; }
.nota { font-size: .82rem; color: var(--text-soft); }

.trilha { color: var(--text-soft); font-size: .85rem; margin: 0 0 1.25rem; }
.trilha a { color: var(--text-soft); }

/* --- Faixa de destaque da home ------------------------------------------ */
.destaque {
    background: linear-gradient(120deg, var(--brand-navy) 0%, var(--brand-blue) 60%, var(--brand-cyan) 100%);
    color: var(--text-on-dark);
    border-radius: var(--radius-lg);
    padding: 2.5rem 2rem;
    margin-bottom: 2rem;
}

.destaque h1 { color: #fff; font-size: 1.9rem; max-width: 24ch; }
.destaque p { margin: 0; max-width: 52ch; opacity: .92; }

.destaque-etiqueta {
    display: inline-block;
    font-size: .72rem; text-transform: uppercase; letter-spacing: .08em;
    font-weight: 700;
    background: rgba(255, 255, 255, .18);
    border-radius: var(--radius-pill);
    padding: .2rem .8rem;
    margin-bottom: .75rem;
}

/* --- Cartoes ---------------------------------------------------------- */
.cartao {
    background: var(--surface);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-soft);
    padding: 1.5rem;
}

/* --- Grade de produtos -------------------------------------------------- */
.grade-produtos {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 1.5rem;
}

.cartao-produto {
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-soft);
    overflow: hidden;
}

.cartao-imagem { display: block; position: relative; }
.cartao-produto img { display: block; width: 100%; height: auto; }

.tarja {
    position: absolute; top: .75rem; left: .75rem;
    background: var(--erro-fg); color: #fff;
    font-size: .72rem; font-weight: 700;
    padding: .15rem .7rem;
    border-radius: var(--radius-pill);
}
.cartao-produto .corpo { padding: 1.15rem 1.25rem .5rem; flex: 1; }
.cartao-produto h2 { font-size: 1rem; margin: .35rem 0 .5rem; }
.cartao-produto h2 a { color: var(--text-strong); }
.cartao-produto form { padding: 0 1.25rem 1.25rem; }
.cartao-produto .botao { width: 100%; text-align: center; }

.etiqueta {
    display: inline-block;
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    font-weight: 700;
    color: var(--brand-blue);
}

/* Bloco de preco: o valor em destaque e a linha de parcelamento
   logo abaixo — a leitura que o comprador brasileiro espera. */
.bloco-preco { margin: .75rem 0 .5rem; }

.preco {
    display: block;
    font-family: var(--font-mono);
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--brand-navy);
    line-height: 1.2;
}

.preco-grande { font-size: 2rem; }

.parcelas { display: block; font-size: .82rem; color: var(--text-soft); }

.saldo { font-size: .85rem; color: var(--text-soft); margin: .25rem 0 0; }
.saldo.esgotado { color: var(--erro-fg); font-weight: 600; }

/* --- Detalhe do produto -------------------------------------------------
   Imagem e descricao a esquerda, caixa de compra a direita: preco,
   saldo e o botao ficam juntos, sem exigir rolagem para decidir. */
.detalhe-produto {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr) 20rem;
    grid-template-areas: 'imagem descricao compra';
    gap: 2rem;
    align-items: start;
}

.detalhe-imagem { grid-area: imagem; }
.detalhe-descricao { grid-area: descricao; }
.caixa-compra { grid-area: compra; }

.detalhe-imagem img {
    width: 100%; height: auto;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-soft);
    background: var(--surface);
}

.detalhe-descricao h1 { font-size: 1.5rem; margin: .35rem 0 1rem; }
.detalhe-descricao h2 { font-size: 1rem; margin-top: 1.5rem; }

.especificacoes {
    display: grid; grid-template-columns: auto 1fr; gap: .25rem 1.5rem;
    margin: 0; font-size: .9rem;
}
.especificacoes dt { font-weight: 600; color: var(--text-body); }
.especificacoes dd { margin: 0; color: var(--text-strong); }

.caixa-compra {
    position: sticky; top: 3.5rem;
    background: var(--surface);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-soft);
    padding: 1.5rem;
}

.caixa-compra .botao { width: 100%; text-align: center; }
.caixa-compra .campo { margin: 1rem 0; }

.garantias {
    list-style: none; margin: 1.25rem 0 0; padding: 1rem 0 0;
    border-top: 1px solid var(--border-soft);
    font-size: .82rem; color: var(--text-soft);
}
.garantias li { padding: .2rem 0; }

@media (max-width: 1040px) {
    .detalhe-produto {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        grid-template-areas: 'imagem compra' 'descricao compra';
    }
}

@media (max-width: 780px) {
    .detalhe-produto {
        grid-template-columns: 1fr;
        grid-template-areas: 'imagem' 'compra' 'descricao';
    }
    .caixa-compra { position: static; }
}

/* --- Tabelas ------------------------------------------------------------ */
.tabela {
    width: 100%;
    border-collapse: collapse;
    font-size: .92rem;
    background: var(--surface);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-soft);
    overflow: hidden;
}

.tabela th {
    text-align: left;
    font-size: .72rem; text-transform: uppercase; letter-spacing: .04em;
    color: var(--text-soft); font-weight: 600;
    padding: .75rem 1rem;
    border-bottom: 1px solid var(--border-strong);
    white-space: nowrap;
}

.tabela td {
    padding: .8rem 1rem;
    border-bottom: 1px solid var(--border-soft);
    vertical-align: middle;
}

.tabela tbody tr:last-child td { border-bottom: 0; }
.tabela td.numero, .tabela th.numero { text-align: right; }
.tabela tfoot th { border-bottom: 0; border-top: 1px solid var(--border-strong); color: var(--text-strong); font-size: .9rem; }

.aviso { display: block; font-size: .8rem; color: var(--text-soft); }

.lista-itens { list-style: none; margin: 0; padding: 0; font-size: .85rem; }

.vazio { color: var(--text-soft); padding: 2rem .75rem; text-align: center; }

/* --- Selos de estado ---------------------------------------------------- */
.selo {
    display: inline-block;
    border-radius: var(--radius-pill);
    padding: .2rem .75rem;
    font-size: .78rem; font-weight: 600; white-space: nowrap;
}

.selo-ok, .selo-entregue { color: var(--ok-fg); background: var(--ok-bg); }
.selo-aviso, .selo-pago  { color: var(--aviso-fg); background: var(--aviso-bg); }
.selo-enviado            { color: var(--brand-navy); background: var(--surface-muted); }

/* Perfis de acesso */
.selo-cliente       { color: var(--brand-navy); background: var(--surface-muted); }
.selo-interno       { color: var(--ok-fg); background: var(--ok-bg); }
.selo-administrador { color: var(--erro-fg); background: var(--erro-bg); }

.grade-perfis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}
.grade-perfis .cartao { padding: 1.15rem 1.25rem; }
.grade-perfis p { margin: .35rem 0 0; font-size: .88rem; }

.aviso-acesso { max-width: 42rem; margin: 0 auto; text-align: center; }

/* --- Formularios --------------------------------------------------------- */
.campo { margin-bottom: 1rem; }

.campo label {
    display: block;
    font-size: .78rem; font-weight: 600; color: var(--text-strong);
    margin-bottom: .3rem;
}

input, select, textarea {
    width: 100%;
    padding: .6rem .75rem;
    font: inherit; font-size: .95rem;
    color: var(--text-strong);
    background: var(--surface);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
}

textarea { resize: vertical; }

input:focus, select:focus, textarea:focus {
    outline: 2px solid var(--brand-blue);
    outline-offset: 1px;
    border-color: var(--brand-blue);
}

.linha-campos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 1rem;
    align-items: end;
}

.campo-marcacao {
    display: flex; align-items: center; gap: .5rem;
    margin: 1rem 0 1.5rem;
    font-size: .9rem; font-weight: 600; color: var(--text-strong);
}

.campo-marcacao input { width: auto; }

.formulario-linha { display: flex; gap: 1rem; align-items: flex-end; flex-wrap: wrap; }
.formulario-linha .campo { margin-bottom: 0; width: 8rem; }

.formulario-quantidade { display: flex; gap: .4rem; justify-content: flex-end; }
.formulario-quantidade input { width: 4.5rem; text-align: right; }

.botao {
    display: inline-block;
    padding: .6rem 1.4rem;
    font: inherit; font-weight: 600;
    color: #fff;
    background: var(--brand-blue);
    border: 1px solid var(--brand-blue);
    border-radius: var(--radius-pill);
    cursor: pointer;
    white-space: nowrap;
}

.botao:hover { background: var(--brand-navy); border-color: var(--brand-navy); text-decoration: none; }
.botao[disabled] { opacity: .55; cursor: not-allowed; }

.botao-secundario { background: transparent; color: var(--brand-blue); }
.botao-secundario:hover { background: var(--surface-muted); color: var(--brand-navy); border-color: var(--brand-blue); }

.botao-perigo { background: transparent; color: var(--erro-fg); border-color: var(--erro-fg); }
.botao-perigo:hover { background: var(--erro-bg); color: var(--erro-fg); border-color: var(--erro-fg); }

.acoes { display: flex; gap: .75rem; align-items: center; flex-wrap: wrap; margin: 1.5rem 0; }
.acoes-linha { display: flex; gap: .5rem; justify-content: flex-end; }

/* --- Checkout ------------------------------------------------------------ */
.colunas-checkout {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    gap: 1.5rem;
    align-items: start;
}

@media (max-width: 880px) {
    .colunas-checkout { grid-template-columns: 1fr; }
}

.colunas-checkout h2 { margin-top: 1.5rem; }
.colunas-checkout form > h2:first-of-type { margin-top: 0; }
.colunas-checkout .botao { width: 100%; text-align: center; margin-top: .5rem; }

.lista-resumo { list-style: none; margin: 0 0 1rem; padding: 0; }

.lista-resumo li {
    display: flex; justify-content: space-between; gap: 1rem;
    padding: .5rem 0;
    border-bottom: 1px solid var(--border-soft);
    font-size: .9rem;
}

.lista-resumo strong { font-family: var(--font-mono); color: var(--text-strong); }

.resumo .total {
    display: flex; justify-content: space-between; align-items: baseline;
    font-weight: 600; color: var(--text-strong);
    margin: 0 0 .5rem;
}

.resumo .total strong { font-family: var(--font-mono); font-size: 1.3rem; }

.dados-pedido {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: .3rem 1.5rem;
    margin: 0 0 1.5rem;
    font-size: .92rem;
}

.dados-pedido dt { font-weight: 600; color: var(--text-body); }
.dados-pedido dd { margin: 0; color: var(--text-strong); }

/* --- Mensagens ----------------------------------------------------------- */
.mensagem {
    border-radius: var(--radius-sm);
    padding: .75rem 1rem;
    margin-bottom: 1rem;
    font-size: .9rem;
}

.mensagem p { margin: 0; }
.mensagem.erro { color: var(--erro-fg); background: var(--erro-bg); }
.mensagem.ok   { color: var(--ok-fg);   background: var(--ok-bg); }

/* --- Tela de login -------------------------------------------------------- */
.tela-login {
    min-height: calc(100vh - 3rem);
    display: flex; align-items: center; justify-content: center;
    padding: 2.5rem 1.5rem;
}

.cartao-login {
    width: 100%; max-width: 26rem;
    background: var(--surface);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-soft);
    padding: 2rem;
}

.credenciais {
    background: var(--surface-muted);
    border-radius: var(--radius-sm);
    padding: 1rem 1.25rem;
    margin-bottom: 1.5rem;
    font-size: .88rem;
}

.credenciais p { margin: 0 0 .5rem; color: var(--text-soft); }
.credenciais dl { display: grid; grid-template-columns: auto 1fr; gap: .2rem 1rem; margin: 0; }
.credenciais dt { font-weight: 600; color: var(--text-body); }
.credenciais dd { margin: 0; font-family: var(--font-mono); color: var(--text-strong); }

.descricao-perfil {
    display: block;
    font-family: var(--font-sans);
    font-size: .78rem;
    color: var(--text-soft);
}

.cartao-login .botao { width: 100%; text-align: center; }

/* --- Rodape ---------------------------------------------------------------- */
.rodape {
    border-top: 1px solid var(--border-soft);
    background: var(--surface);
    padding: 2.5rem 0 0;
    font-size: .85rem;
    color: var(--text-soft);
}

.rodape-colunas {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 2rem;
    padding-bottom: 2rem;
}

.rodape h3 { font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; color: var(--text-strong); }
.rodape p { margin: .25rem 0; }

.selos-pagamento { list-style: none; margin: .5rem 0; padding: 0; display: flex; gap: .5rem; flex-wrap: wrap; }

.selos-pagamento li {
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    padding: .2rem .6rem;
    font-size: .78rem;
}

.rodape-assinatura {
    border-top: 1px solid var(--border-soft);
    margin: 0;
    padding: 1.25rem 1.5rem;
    text-align: center;
    font-size: .8rem;
}