/* ===========================================================================
   Teste Grátis — folha de estilo do admin do módulo.

   Autossuficiente de propósito: nenhuma dependência de Bootstrap, jQuery ou
   fonte remota. As telas carregavam Bootstrap 4.6.0 (jsdelivr), Font Awesome
   5.15.3 (cdnjs), jQuery (code.jquery.com) e a família Outfit
   (fonts.googleapis.com) — quatro hosts de terceiro que, se caírem ou mudarem
   de política, derrubam a aparência do painel de todo franqueado. O único
   arquivo externo que resta é o Font Awesome 6.4.0 servido pelo PRÓPRIO
   painel, que já viaja no pacote.

   A tipografia é a Poppins local (a mesma da vitrine e do painel).
   =========================================================================== */

:root {
    --tg-fundo:        #f1f5f9;
    --tg-superficie:   #ffffff;
    --tg-borda:        #e2e8f0;
    --tg-borda-forte:  #cbd5e1;
    --tg-texto:        #0f172a;
    --tg-texto-suave:  #64748b;
    --tg-primaria:     #6366f1;
    --tg-primaria-esc: #4338ca;
    --tg-sidebar-a:    #1e1b4b;
    --tg-sidebar-b:    #0f0e26;
    --tg-ok:           #15803d;
    --tg-ok-fundo:     #dcfce7;
    --tg-alerta:       #b45309;
    --tg-alerta-fundo: #fef3c7;
    --tg-erro:         #b91c1c;
    --tg-erro-fundo:   #fee2e2;
    --tg-raio:         14px;
    --tg-sombra:       0 1px 2px rgba(15, 23, 42, .04), 0 8px 24px -12px rgba(15, 23, 42, .12);
    --tg-largura-menu: 248px;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    font-size: 14px;
    line-height: 1.55;
    color: var(--tg-texto);
    background: var(--tg-fundo);
}

a { color: var(--tg-primaria); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ------------------------------------------------------------------ menu -- */
.tg-menu {
    position: fixed;
    top: 0; left: 0; bottom: 0;
    width: var(--tg-largura-menu);
    background: linear-gradient(180deg, var(--tg-sidebar-a) 0%, var(--tg-sidebar-b) 100%);
    padding: 24px 0;
    overflow-y: auto;
    z-index: 30;
}

.tg-marca {
    display: block;
    padding: 0 22px 22px;
    margin-bottom: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, .07);
}
.tg-marca strong {
    display: block;
    font-size: 15px;
    font-weight: 600;
    color: #fff;
    line-height: 1.3;
    overflow-wrap: anywhere;
}
.tg-marca span {
    display: block;
    margin-top: 3px;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: #a5b4fc;
}

.tg-menu nav { padding: 6px 12px 0; }
.tg-menu nav a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 14px;
    margin-bottom: 2px;
    border-radius: 10px;
    color: rgba(255, 255, 255, .68);
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    transition: background .15s, color .15s;
}
.tg-menu nav a i { width: 18px; text-align: center; font-size: 15px; }
.tg-menu nav a:hover { background: rgba(255, 255, 255, .06); color: #fff; text-decoration: none; }
.tg-menu nav a.ativo { background: rgba(99, 102, 241, .28); color: #fff; }
.tg-menu nav a.sair { margin-top: 18px; color: #fca5a5; }
.tg-menu nav a.sair:hover { background: rgba(239, 68, 68, .12); color: #fecaca; }

.tg-menu-fechar { display: none; }

/* --------------------------------------------------------------- conteúdo -- */
.tg-conteudo {
    margin-left: var(--tg-largura-menu);
    padding: 28px 32px 56px;
    max-width: 1400px;
}

.tg-topo {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 24px;
}
.tg-topo h1 {
    margin: 0;
    font-size: 24px;
    font-weight: 600;
    letter-spacing: -.02em;
}
.tg-topo p { margin: 3px 0 0; color: var(--tg-texto-suave); font-size: 13px; }
.tg-topo .tg-acoes { margin-left: auto; display: flex; gap: 10px; flex-wrap: wrap; }

.tg-abrir-menu {
    display: none;
    align-items: center;
    justify-content: center;
    width: 42px; height: 42px;
    border: 1px solid var(--tg-borda);
    border-radius: 10px;
    background: var(--tg-superficie);
    color: var(--tg-texto);
    font-size: 16px;
    cursor: pointer;
}

/* ------------------------------------------------------------------ card -- */
.tg-card {
    background: var(--tg-superficie);
    border: 1px solid var(--tg-borda);
    border-radius: var(--tg-raio);
    box-shadow: var(--tg-sombra);
    margin-bottom: 22px;
    overflow: hidden;
}
.tg-card > header {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    padding: 16px 20px;
    border-bottom: 1px solid var(--tg-borda);
}
.tg-card > header h2 { margin: 0; font-size: 15px; font-weight: 600; }
.tg-card > header .tg-conta { margin-left: auto; color: var(--tg-texto-suave); font-size: 13px; }
.tg-card .tg-corpo { padding: 20px; }

/* ---------------------------------------------------------------- números -- */
.tg-numeros {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
    margin-bottom: 22px;
}
.tg-numero {
    background: var(--tg-superficie);
    border: 1px solid var(--tg-borda);
    border-radius: var(--tg-raio);
    box-shadow: var(--tg-sombra);
    padding: 18px 20px;
    display: flex;
    align-items: center;
    gap: 16px;
}
.tg-numero .tg-icone {
    flex: none;
    width: 44px; height: 44px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 12px;
    background: #eef2ff;
    color: var(--tg-primaria);
    font-size: 17px;
}
.tg-numero .tg-icone.verde  { background: var(--tg-ok-fundo);     color: var(--tg-ok); }
.tg-numero .tg-icone.ambar  { background: var(--tg-alerta-fundo); color: var(--tg-alerta); }
.tg-numero dt { margin: 0; font-size: 12px; font-weight: 500; color: var(--tg-texto-suave); }
.tg-numero dd { margin: 0; font-size: 26px; font-weight: 600; line-height: 1.2; letter-spacing: -.02em; }

/* ---------------------------------------------------------------- tabelas -- */
.tg-rolagem { overflow-x: auto; -webkit-overflow-scrolling: touch; }

table.tg-tabela {
    width: 100%;
    border-collapse: collapse;
    font-size: 13.5px;
}
table.tg-tabela th {
    padding: 11px 20px;
    text-align: left;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--tg-texto-suave);
    background: #f8fafc;
    border-bottom: 1px solid var(--tg-borda);
    white-space: nowrap;
}
table.tg-tabela td {
    padding: 13px 20px;
    border-bottom: 1px solid #f1f5f9;
    vertical-align: middle;
}
table.tg-tabela tbody tr:last-child td { border-bottom: none; }
table.tg-tabela tbody tr:hover { background: #f8fafc; }
table.tg-tabela td.tg-num { font-variant-numeric: tabular-nums; white-space: nowrap; }
table.tg-tabela td.tg-cortar { max-width: 280px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tg-vazio { padding: 40px 20px; text-align: center; color: var(--tg-texto-suave); }
.tg-vazio i { display: block; font-size: 26px; margin-bottom: 10px; color: var(--tg-borda-forte); }

/* ----------------------------------------------------------------- selos -- */
.tg-selo {
    display: inline-block;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.6;
    white-space: nowrap;
}
.tg-selo.verde   { background: var(--tg-ok-fundo);     color: var(--tg-ok); }
.tg-selo.cinza   { background: #f1f5f9;                color: #475569; }
.tg-selo.ambar   { background: var(--tg-alerta-fundo); color: var(--tg-alerta); }
.tg-selo.vermelho{ background: var(--tg-erro-fundo);   color: var(--tg-erro); }

/* --------------------------------------------------------------- botões -- */
.tg-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 16px;
    border: 1px solid transparent;
    border-radius: 10px;
    background: var(--tg-primaria);
    color: #fff;
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 500;
    line-height: 1.4;
    cursor: pointer;
    text-decoration: none;
    transition: background .15s, border-color .15s;
}
.tg-btn:hover { background: var(--tg-primaria-esc); color: #fff; text-decoration: none; }
.tg-btn[disabled] { opacity: .55; cursor: not-allowed; }
.tg-btn.neutro { background: var(--tg-superficie); border-color: var(--tg-borda-forte); color: #334155; }
.tg-btn.neutro:hover { background: #f8fafc; color: var(--tg-texto); }
.tg-btn.perigo { background: #dc2626; }
.tg-btn.perigo:hover { background: #b91c1c; }
.tg-btn.pequeno { padding: 6px 11px; font-size: 12.5px; border-radius: 8px; }
.tg-btn.icone { padding: 7px 9px; }

/* -------------------------------------------------------------- formulário -- */
.tg-campo { margin-bottom: 16px; }
.tg-campo:last-child { margin-bottom: 0; }
.tg-campo label {
    display: block;
    margin-bottom: 6px;
    font-size: 13px;
    font-weight: 500;
    color: #334155;
}
.tg-campo input[type=text],
.tg-campo input[type=url],
.tg-campo input[type=number],
.tg-campo input[type=password],
.tg-campo select,
.tg-campo textarea {
    width: 100%;
    padding: 10px 13px;
    border: 1px solid var(--tg-borda-forte);
    border-radius: 10px;
    background: #fff;
    font-family: inherit;
    font-size: 14px;
    color: var(--tg-texto);
}
.tg-campo textarea { resize: vertical; min-height: 96px; }
.tg-campo input:focus, .tg-campo select:focus, .tg-campo textarea:focus {
    outline: none;
    border-color: var(--tg-primaria);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, .16);
}
.tg-dica { display: block; margin-top: 6px; font-size: 12.5px; color: var(--tg-texto-suave); }
.tg-dica strong { color: #334155; }

.tg-marcar { display: flex; align-items: center; gap: 9px; font-size: 14px; cursor: pointer; }
.tg-marcar input { width: 16px; height: 16px; accent-color: var(--tg-primaria); }

/* Duas colunas que se comportam como DUAS COLUNAS: cada uma cresce sozinha, a
   dica de uma não empurra o rótulo da outra, e o espaçamento entre linhas vem
   do gap — não da soma de margem com gap, que era o que desalinhava o formulário
   de edição. */
.tg-linha {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 8px 18px;
    align-items: start;
    margin-bottom: 18px;
}
.tg-linha:last-child { margin-bottom: 0; }
.tg-linha > .tg-campo { margin-bottom: 0; }
.tg-campo + .tg-linha { margin-top: 18px; }

.tg-rodape-form {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 20px;
}

/* ------------------------------------------------------------------ busca -- */
.tg-busca { position: relative; flex: 1 1 240px; min-width: 200px; }
.tg-busca i {
    position: absolute;
    left: 13px; top: 50%;
    transform: translateY(-50%);
    color: var(--tg-texto-suave);
    font-size: 13px;
    pointer-events: none;
}
.tg-busca input {
    width: 100%;
    padding: 9px 13px 9px 36px;
    border: 1px solid var(--tg-borda-forte);
    border-radius: 10px;
    font-family: inherit;
    font-size: 13.5px;
}
.tg-busca input:focus { outline: none; border-color: var(--tg-primaria); box-shadow: 0 0 0 3px rgba(99, 102, 241, .16); }

/* ------------------------------------------------------------------ avisos -- */
.tg-aviso {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    padding: 13px 16px;
    border-radius: 12px;
    border: 1px solid transparent;
    margin-bottom: 20px;
    font-size: 13.5px;
}
.tg-aviso i { margin-top: 2px; }
.tg-aviso.ok      { background: var(--tg-ok-fundo);     border-color: #bbf7d0; color: #14532d; }
.tg-aviso.erro    { background: var(--tg-erro-fundo);   border-color: #fecaca; color: #7f1d1d; }
.tg-aviso.atencao { background: var(--tg-alerta-fundo); border-color: #fde68a; color: #78350f; }
.tg-aviso.info    { background: #eef2ff;                border-color: #c7d2fe; color: #3730a3; }

/* ------------------------------------------------------------------- abas -- */
.tg-abas {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    padding: 0 20px;
    border-bottom: 1px solid var(--tg-borda);
}
.tg-abas button {
    padding: 14px 14px 12px;
    border: none;
    border-bottom: 2px solid transparent;
    background: none;
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 500;
    color: var(--tg-texto-suave);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.tg-abas button:hover { color: var(--tg-texto); }
.tg-abas button[aria-selected="true"] { color: var(--tg-primaria); border-bottom-color: var(--tg-primaria); }
.tg-painel[hidden] { display: none; }

/* ------------------------------------------------------------------ modal -- */
.tg-modal[hidden] { display: none; }
.tg-modal {
    position: fixed;
    inset: 0;
    z-index: 60;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(15, 23, 42, .55);
}
.tg-modal .tg-janela {
    width: 100%;
    /* 600 e não 520: com 520 cada coluna do formulário sobrava ~210px e toda
       dica quebrava em duas linhas, o que desencontrava os campos. */
    max-width: 600px;
    max-height: 90vh;
    overflow-y: auto;
    background: var(--tg-superficie);
    border-radius: 16px;
    box-shadow: 0 24px 48px -12px rgba(15, 23, 42, .35);
}
.tg-modal .tg-janela header {
    display: flex;
    align-items: center;
    padding: 18px 22px;
    border-bottom: 1px solid var(--tg-borda);
}
.tg-modal .tg-janela header h2 { margin: 0; font-size: 16px; font-weight: 600; }
.tg-modal .tg-fechar {
    margin-left: auto;
    border: none;
    background: none;
    font-size: 20px;
    line-height: 1;
    color: var(--tg-texto-suave);
    cursor: pointer;
    padding: 4px 6px;
}
.tg-modal .tg-janela .tg-corpo { padding: 24px; }
.tg-modal .tg-janela footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 16px 24px;
    border-top: 1px solid var(--tg-borda);
    background: #f8fafc;
}
/* A caixa de "mostrar na vitrine" é a última decisão do formulário: ganha ar e
   uma moldura para não ficar colada no campo de cima. */
.tg-modal .tg-marcar {
    margin-top: 20px;
    padding: 12px 14px;
    border: 1px solid var(--tg-borda);
    border-radius: 10px;
    background: #f8fafc;
}
@media (max-width: 560px) {
    .tg-modal { padding: 12px; align-items: flex-end; }
    .tg-modal .tg-janela { max-height: 94vh; border-radius: 16px 16px 12px 12px; }
    .tg-modal .tg-janela .tg-corpo { padding: 18px; }
    .tg-modal .tg-janela footer { padding: 14px 18px; }
    .tg-modal .tg-janela footer .tg-btn { flex: 1; justify-content: center; }
}

/* -------------------------------------------------------------- paginação -- */
.tg-paginas {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    padding: 16px 20px;
    border-top: 1px solid var(--tg-borda);
}
.tg-paginas .tg-info { margin-right: auto; color: var(--tg-texto-suave); font-size: 13px; }
.tg-paginas a, .tg-paginas span {
    min-width: 34px;
    padding: 6px 10px;
    border: 1px solid var(--tg-borda);
    border-radius: 8px;
    text-align: center;
    font-size: 13px;
    color: #334155;
    text-decoration: none;
}
.tg-paginas a:hover { background: #f8fafc; text-decoration: none; }
.tg-paginas .atual { background: var(--tg-primaria); border-color: var(--tg-primaria); color: #fff; }
.tg-paginas .inerte { opacity: .45; }

/* ------------------------------------------------------------------ login -- */
.tg-login {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: linear-gradient(135deg, var(--tg-sidebar-a) 0%, #4c1d95 100%);
}
.tg-login .tg-caixa {
    width: 100%;
    max-width: 400px;
    background: var(--tg-superficie);
    border-radius: 18px;
    padding: 34px 30px;
    box-shadow: 0 24px 48px -16px rgba(0, 0, 0, .5);
}
.tg-login .tg-cabeca { text-align: center; margin-bottom: 26px; }
.tg-login .tg-cabeca .tg-emblema {
    width: 52px; height: 52px;
    margin: 0 auto 14px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 15px;
    background: #eef2ff;
    color: var(--tg-primaria);
    font-size: 21px;
}
.tg-login .tg-cabeca h1 { margin: 0; font-size: 19px; font-weight: 600; }
.tg-login .tg-cabeca p { margin: 5px 0 0; font-size: 13px; color: var(--tg-texto-suave); }
.tg-login .tg-btn { width: 100%; justify-content: center; margin-top: 4px; }
.tg-login .tg-voltar { display: block; margin-top: 18px; text-align: center; font-size: 13px; color: var(--tg-texto-suave); }

/* -------------------------------------------------------------- responsivo -- */
@media (max-width: 900px) {
    .tg-menu {
        transform: translateX(-100%);
        transition: transform .22s ease;
        box-shadow: 0 0 40px rgba(0, 0, 0, .4);
    }
    body.tg-menu-aberto .tg-menu { transform: translateX(0); }
    body.tg-menu-aberto::after {
        content: '';
        position: fixed;
        inset: 0;
        background: rgba(15, 23, 42, .5);
        z-index: 29;
    }
    .tg-menu-fechar {
        display: block;
        position: absolute;
        top: 16px; right: 14px;
        border: none;
        background: none;
        color: rgba(255, 255, 255, .7);
        font-size: 20px;
        cursor: pointer;
    }
    .tg-conteudo { margin-left: 0; padding: 20px 16px 48px; }
    .tg-abrir-menu { display: inline-flex; }
    .tg-topo h1 { font-size: 20px; }
    .tg-card .tg-corpo { padding: 16px; }
    table.tg-tabela th, table.tg-tabela td { padding: 11px 14px; }
    table.tg-tabela td.tg-cortar { max-width: 180px; }
}