/* VEMIX Studio — CSS próprio, sem build (como o atacado). */
:root {
    --fundo: #f6f6f8;
    --superficie: #ffffff;
    --texto: #1c1c22;
    --discreto: #6b6b76;
    --borda: #e2e2e8;
    --marca: #111111;
    --destaque: #fe2c55;
    --sucesso-fundo: #e7f6ec;
    --sucesso-texto: #1d6b38;
    --aviso-fundo: #fff6e0;
    --aviso-texto: #7a5a00;
    --erro-fundo: #fdecee;
    --erro-texto: #a3122a;
    --raio: 10px;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--fundo);
    color: var(--texto);
    font: 15px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

a { color: var(--texto); }
code { background: #eee; padding: 0 4px; border-radius: 4px; font-size: .9em; }
h1 { font-size: 1.5rem; margin: 0 0 .5rem; }
h2 { font-size: 1.15rem; margin: 1.5rem 0 .5rem; }
hr { border: 0; border-top: 1px solid var(--borda); margin: 2rem 0; }

.topo {
    display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap;
    padding: .75rem 16px; background: var(--marca); color: #fff;
}
.topo a { color: #fff; text-decoration: none; }
.marca { font-size: 1.1rem; letter-spacing: .02em; }
.marca strong { color: var(--destaque); }
.topo nav { display: flex; gap: 1rem; flex-wrap: wrap; flex: 1; }
.topo nav a { opacity: .75; padding: .25rem 0; border-bottom: 2px solid transparent; }
.topo nav a.ativo, .topo nav a:hover { opacity: 1; border-bottom-color: var(--destaque); }
.sair { display: flex; gap: .5rem; align-items: center; font-size: .9rem; opacity: .85; }

.conteudo { max-width: 960px; margin: 0 auto; padding: 1.5rem 16px 3rem; }
.conteudo.texto { max-width: 760px; }
.rodape { text-align: center; color: var(--discreto); font-size: .85rem; padding: 1rem 16px 2rem; }

.cabecalho { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.discreto { color: var(--discreto); font-size: .9em; }
.quebra { overflow-wrap: anywhere; }

.cartao {
    background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio);
    padding: 1rem; margin-bottom: 1rem;
}
.cartao.estreito { max-width: 400px; margin: 2rem auto; }
.cartao.vazio { color: var(--discreto); }
details.cartao summary { cursor: pointer; font-weight: 600; }

.alerta { border-radius: var(--raio); padding: .75rem 1rem; margin-bottom: 1rem; }
.alerta.sucesso { background: var(--sucesso-fundo); color: var(--sucesso-texto); }
.alerta.aviso { background: var(--aviso-fundo); color: var(--aviso-texto); }
.alerta.erro { background: var(--erro-fundo); color: var(--erro-texto); }

.etiqueta { display: inline-block; padding: .1rem .5rem; border-radius: 999px; background: #eee; font-size: .85em; }
.etiqueta.sucesso { background: var(--sucesso-fundo); color: var(--sucesso-texto); }
.etiqueta.erro { background: var(--erro-fundo); color: var(--erro-texto); }

.botao {
    display: inline-block; border: 0; border-radius: 8px; cursor: pointer;
    background: var(--destaque); color: #fff; padding: .6rem 1.1rem; font: inherit; font-weight: 600;
    text-decoration: none;
}
.botao:disabled { opacity: .5; cursor: not-allowed; }
.botao.secundario { background: transparent; color: var(--texto); border: 1px solid var(--borda); }
.botao.pequeno { padding: .3rem .7rem; font-size: .85rem; font-weight: 500; }
button.link { background: none; border: 0; color: inherit; cursor: pointer; text-decoration: underline; font: inherit; padding: 0; }

.formulario { display: grid; gap: .9rem; }
.formulario label { display: grid; gap: .3rem; font-weight: 600; font-size: .9rem; }
input[type=email], input[type=password], input[type=url], input[type=text], select, textarea {
    width: 100%; padding: .55rem .7rem; border: 1px solid var(--borda); border-radius: 8px; font: inherit; background: #fff;
}
.linha { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; margin: .5rem 0; }
.linha select { width: auto; flex: 1; min-width: 160px; }

.conta { display: flex; align-items: center; gap: 1rem; }
.conta .dados { flex: 1; display: grid; }
.avatar { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; background: #ddd; flex-shrink: 0; }

.item-fila { display: flex; gap: 1rem; align-items: flex-start; }
.item-fila .dados { flex: 1; min-width: 0; }
.previa { width: 180px; aspect-ratio: 9 / 16; background: #000; border-radius: 8px; flex-shrink: 0; }
.legenda { white-space: pre-line; }

.tabela-rolagem { overflow-x: auto; }
.tabela { width: 100%; border-collapse: collapse; background: var(--superficie); border-radius: var(--raio); overflow: hidden; }
.tabela th, .tabela td { text-align: left; padding: .6rem .7rem; border-bottom: 1px solid var(--borda); vertical-align: top; }
.tabela th { font-size: .8rem; text-transform: uppercase; color: var(--discreto); }
.tabela .vazio { color: var(--discreto); text-align: center; }
.acoes form { margin-bottom: .3rem; }

.paginacao { display: flex; gap: 1rem; justify-content: center; margin: 1rem 0; }
.lista-simples { padding-left: 1.2rem; color: var(--discreto); }

@media (max-width: 600px) {
    .item-fila { flex-direction: column; }
    .previa { width: 100%; max-width: 260px; }
    .sair span { display: none; }
}