/* ==========================================================================
   TENISS — estilo único do site e dos painéis
   Escuro, limpo e com o amarelo da marca usado com parcimônia:
   só em ação principal, item ativo e números que importam.
   (A tela de login mantém o visual próprio, mais estiloso.)
   ========================================================================== */

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-display: swap;
    font-weight: 100 900;
    src: url('../fonts/inter-latin-wght-normal.woff2') format('woff2-variations');
}

:root {
    /* Superfícies */
    --tn-fundo: #0b0b0c;
    --tn-superficie: #141416;
    --tn-superficie-2: #1b1b1f;
    --tn-borda: #26262b;
    --tn-borda-forte: #34343a;

    /* Texto */
    --tn-texto: #f2f2f3;
    --tn-texto-2: #b4b4bb;
    --tn-texto-3: #7c7c85;

    /* Marca e estados (tons contidos, sem neon) */
    --tn-marca: #ffe600;
    --tn-marca-texto: #111111;
    --tn-marca-suave: rgba(255, 230, 0, 0.10);
    --tn-sucesso: #3ecf8e;
    --tn-alerta: #f5b83d;
    --tn-perigo: #ef5a6f;
    --tn-info: #6aa9ff;

    /* Forma */
    --tn-raio: 12px;
    --tn-raio-p: 8px;
    --tn-sombra: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px rgba(0, 0, 0, 0.25);
    --tn-fonte: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
}

/* ---------- Base ---------- */
.tn-app, .tn-app * { box-sizing: border-box; }
.tn-app {
    margin: 0;
    background: var(--tn-fundo);
    color: var(--tn-texto);
    font-family: var(--tn-fonte);
    font-size: 14px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}
.tn-app a { color: inherit; }
.tn-app h1, .tn-app h2, .tn-app h3 { margin: 0; font-weight: 700; letter-spacing: -0.01em; }
.tn-rotulo {
    font-size: 11px; font-weight: 600; text-transform: uppercase;
    letter-spacing: 0.08em; color: var(--tn-texto-3);
}
.tn-mudo { color: var(--tn-texto-3); }
.tn-numero { font-variant-numeric: tabular-nums; }
.tn-destaque { color: var(--tn-marca); }

/* ---------- Topo dos painéis ---------- */
.tn-topo {
    position: sticky; top: 0; z-index: 50;
    display: flex; align-items: center; gap: 16px;
    height: 60px; padding: 0 20px;
    background: rgba(11, 11, 12, 0.92);
    border-bottom: 1px solid var(--tn-borda);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.tn-topo .tn-logo { height: 30px; display: block; }
.tn-topo .tn-espaco { flex: 1; }
.tn-usuario {
    display: flex; align-items: center; gap: 10px; padding: 4px 12px 4px 4px;
    border: 1px solid var(--tn-borda); border-radius: 999px; background: var(--tn-superficie);
    font-weight: 600; font-size: 13px; cursor: pointer;
}
.tn-usuario img, .tn-avatar {
    width: 30px; height: 30px; border-radius: 50%; object-fit: cover; background: var(--tn-superficie-2);
}
.tn-avatar {
    display: inline-grid; place-items: center; background: var(--tn-marca); color: #111;
    font-size: 12px; font-weight: 800;
}

/* ---------- Abas ---------- */
.tn-abas {
    display: flex; gap: 4px; padding: 0 20px; overflow-x: auto;
    border-bottom: 1px solid var(--tn-borda); scrollbar-width: none;
}
.tn-abas::-webkit-scrollbar { display: none; }
.tn-aba {
    position: relative; padding: 14px 12px; background: none; border: none; cursor: pointer;
    color: var(--tn-texto-3); font: inherit; font-weight: 600; white-space: nowrap;
}
.tn-aba:hover { color: var(--tn-texto); }
.tn-aba.ativa { color: var(--tn-texto); }
.tn-aba.ativa::after {
    content: ""; position: absolute; left: 12px; right: 12px; bottom: -1px;
    height: 2px; border-radius: 2px; background: var(--tn-marca);
}
.tn-contagem {
    display: inline-block; min-width: 20px; padding: 0 6px; margin-left: 6px;
    border-radius: 999px; background: var(--tn-superficie-2); color: var(--tn-texto-2);
    font-size: 11px; line-height: 18px; text-align: center;
}

/* ---------- Conteúdo ---------- */
.tn-conteudo { max-width: 1280px; margin: 0 auto; padding: 24px 20px 48px; }
.tn-cabecalho-secao { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.tn-cabecalho-secao h2 { font-size: 20px; }

.tn-cartao {
    background: var(--tn-superficie); border: 1px solid var(--tn-borda);
    border-radius: var(--tn-raio); padding: 18px;
}
.tn-cartao + .tn-cartao { margin-top: 12px; }
.tn-grade > .tn-cartao { margin-top: 0; }
.tn-grade { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }

/* Indicadores (cartões de número) */
.tn-indicador .tn-valor { font-size: 24px; font-weight: 700; margin-top: 4px; font-variant-numeric: tabular-nums; }

/* ---------- Botões ---------- */
.tn-botao {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    height: 38px; padding: 0 16px; border-radius: var(--tn-raio-p);
    border: 1px solid var(--tn-borda-forte); background: var(--tn-superficie-2); color: var(--tn-texto);
    font: inherit; font-weight: 600; text-decoration: none; cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.tn-botao:hover { border-color: #4a4a52; background: #222227; }
.tn-botao.primario { background: var(--tn-marca); border-color: var(--tn-marca); color: var(--tn-marca-texto); }
.tn-botao.primario:hover { background: #fff04d; }
.tn-botao.fantasma { background: transparent; border-color: transparent; color: var(--tn-texto-2); }
.tn-botao.fantasma:hover { background: var(--tn-superficie-2); color: var(--tn-texto); }
.tn-botao.perigo:hover { border-color: var(--tn-perigo); color: var(--tn-perigo); }
.tn-botao.whatsapp { background: #1fa855; border-color: #1fa855; color: #fff; }
.tn-botao.pequeno { height: 32px; padding: 0 12px; font-size: 13px; }
.tn-botao.cheio { width: 100%; }

/* Botões de ícone (ações da tabela): neutros, com cor só ao passar o mouse */
.tn-acoes { display: flex; gap: 4px; flex-wrap: wrap; }
.tn-acao {
    position: relative; width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center;
    border-radius: var(--tn-raio-p); border: 1px solid transparent; background: transparent;
    color: var(--tn-texto-3); cursor: pointer; font-size: 14px;
}
.tn-acao:hover { background: var(--tn-superficie-2); border-color: var(--tn-borda); color: var(--tn-texto); }
.tn-acao.perigo:hover { color: var(--tn-perigo); }
.tn-acao .tn-bolinha {
    position: absolute; top: -3px; right: -3px; min-width: 16px; height: 16px; padding: 0 4px;
    border-radius: 999px; background: var(--tn-marca); color: #111; font-size: 10px; font-weight: 700; line-height: 16px;
}

/* ---------- Selos de status ---------- */
.tn-selo {
    display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px;
    border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap;
    background: var(--tn-superficie-2); color: var(--tn-texto-2);
}
.tn-selo::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: 0.9; }
.tn-selo.sucesso { background: rgba(62, 207, 142, 0.12); color: var(--tn-sucesso); }
.tn-selo.alerta  { background: rgba(245, 184, 61, 0.12); color: var(--tn-alerta); }
.tn-selo.perigo  { background: rgba(239, 90, 111, 0.12); color: var(--tn-perigo); }
.tn-selo.info    { background: rgba(106, 169, 255, 0.12); color: var(--tn-info); }
.tn-selo.marca   { background: var(--tn-marca-suave); color: var(--tn-marca); }
.tn-selo.sem-ponto::before { display: none; }

/* ---------- Filtros (pílulas) ---------- */
.tn-filtros { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-bottom: 14px; }
.tn-pilula {
    height: 32px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--tn-borda);
    background: transparent; color: var(--tn-texto-2); font: inherit; font-size: 13px; font-weight: 500; cursor: pointer;
}
.tn-pilula:hover { color: var(--tn-texto); border-color: var(--tn-borda-forte); }
.tn-pilula.ativa { background: var(--tn-texto); border-color: var(--tn-texto); color: #111; }

/* ---------- Campos ---------- */
.tn-campo { display: block; margin-bottom: 14px; }
.tn-campo > span { display: block; margin-bottom: 6px; font-size: 12px; font-weight: 600; color: var(--tn-texto-2); }
.tn-entrada, .tn-app select, .tn-app textarea {
    width: 100%; height: 40px; padding: 0 12px; border-radius: var(--tn-raio-p);
    border: 1px solid var(--tn-borda-forte); background: var(--tn-fundo); color: var(--tn-texto);
    font: inherit; outline: none;
}
.tn-app textarea { height: auto; padding: 10px 12px; }
.tn-entrada:focus, .tn-app select:focus, .tn-app textarea:focus { border-color: var(--tn-marca); box-shadow: 0 0 0 3px var(--tn-marca-suave); }
.tn-busca { position: relative; flex: 1 1 260px; }
.tn-busca .tn-entrada { padding-left: 36px; height: 36px; border-radius: 999px; background: var(--tn-superficie); }
.tn-busca svg, .tn-busca i { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: var(--tn-texto-3); }

/* ---------- Tabela ---------- */
.tn-tabela-caixa { background: var(--tn-superficie); border: 1px solid var(--tn-borda); border-radius: var(--tn-raio); overflow-x: auto; }
.tn-tabela { width: 100%; border-collapse: collapse; }
.tn-tabela th {
    padding: 12px 14px; text-align: left; font-size: 11px; font-weight: 600; letter-spacing: 0.06em;
    text-transform: uppercase; color: var(--tn-texto-3); border-bottom: 1px solid var(--tn-borda); white-space: nowrap;
}
.tn-tabela td { padding: 12px 14px; border-bottom: 1px solid var(--tn-borda); vertical-align: middle; }
.tn-tabela tr:last-child td { border-bottom: none; }
.tn-tabela tbody tr:hover td { background: rgba(255, 255, 255, 0.02); }
.tn-tabela .tn-codigo { font-weight: 700; color: var(--tn-texto); text-decoration: none; }
.tn-tabela .tn-codigo:hover { color: var(--tn-marca); }
.tn-miniatura { width: 44px; height: 44px; border-radius: var(--tn-raio-p); object-fit: cover; background: #efefed; display: block; }

/* ---------- Etapas do pedido ---------- */
.tn-etapas { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; list-style: none; margin: 0; padding: 0; }
.tn-etapas li { font-size: 11px; font-weight: 600; color: var(--tn-texto-3); text-align: center; }
.tn-etapas li::before { content: ""; display: block; height: 4px; border-radius: 4px; background: var(--tn-borda-forte); margin-bottom: 8px; }
.tn-etapas li.feita { color: var(--tn-texto-2); }
.tn-etapas li.feita::before { background: var(--tn-sucesso); }
.tn-etapas li.atual { color: var(--tn-marca); }
.tn-etapas li.atual::before { background: var(--tn-marca); }

/* ---------- Produto (catálogo) ---------- */
.tn-produtos { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.tn-produto {
    display: block; text-decoration: none; background: var(--tn-superficie); border: 1px solid var(--tn-borda);
    border-radius: var(--tn-raio); overflow: hidden; transition: border-color 0.15s, transform 0.15s;
}
.tn-produto:hover { border-color: var(--tn-borda-forte); transform: translateY(-2px); }
.tn-produto .tn-foto { aspect-ratio: 1; background: #efefed; display: flex; align-items: center; justify-content: center; }
.tn-produto .tn-foto img { width: 100%; height: 100%; object-fit: cover; }
.tn-produto .tn-info { padding: 12px 14px 14px; }
.tn-produto .tn-marca-produto { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--tn-texto-3); }
.tn-produto .tn-nome { margin-top: 2px; font-weight: 600; color: var(--tn-texto); }

/* ---------- Avisos ---------- */
.tn-aviso { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: var(--tn-raio-p); font-size: 13px; margin-bottom: 14px; border: 1px solid; }
.tn-aviso.sucesso { background: rgba(62, 207, 142, 0.08); border-color: rgba(62, 207, 142, 0.3); color: #9be8c4; }
.tn-aviso.erro { background: rgba(239, 90, 111, 0.08); border-color: rgba(239, 90, 111, 0.3); color: #f5a3af; }

@media (max-width: 720px) {
    .tn-topo { padding: 0 14px; gap: 10px; }
    .tn-conteudo { padding: 16px 14px 40px; }
    .tn-abas { padding: 0 8px; }
    .tn-produtos { grid-template-columns: repeat(2, 1fr); gap: 10px; }
}