/* G10 CDN Control — estilos estruturais (consomem exclusivamente os tokens do tema) */
* { box-sizing: border-box; }
body {
    margin: 0;
    font-family: var(--g10-fonte-base);
    font-size: var(--g10-tamanho-fonte-base);
    background: var(--g10-cor-fundo);
    color: var(--g10-cor-texto);
}
a { color: var(--g10-cor-primaria); text-decoration: none; }
a:hover { text-decoration: underline; }
code, .mono { font-family: var(--g10-fonte-mono); font-size: 0.92em; }

.barra_superior {
    display: flex; align-items: center; gap: var(--g10-espacamento-3);
    background: var(--g10-cor-primaria); color: var(--g10-cor-primaria-contraste);
    padding: var(--g10-espacamento-2) var(--g10-espacamento-3);
}
.barra_superior .titulo { font-weight: 700; }
.barra_superior form { margin-left: auto; display: flex; gap: var(--g10-espacamento-2); align-items: center; }
.barra_superior a, .barra_superior button { color: var(--g10-cor-primaria-contraste); }

.leiaute { display: flex; min-height: calc(100vh - 42px); }
.menu_lateral {
    width: 220px; flex-shrink: 0; background: var(--g10-cor-superficie);
    border-right: 1px solid var(--g10-cor-borda); padding: var(--g10-espacamento-3) 0;
}
.menu_lateral a {
    display: block; padding: var(--g10-espacamento-2) var(--g10-espacamento-3);
    color: var(--g10-cor-texto);
}
.menu_lateral a:hover { background: var(--g10-cor-fundo); text-decoration: none; }
.menu_lateral .secao { padding: var(--g10-espacamento-2) var(--g10-espacamento-3);
    color: var(--g10-cor-texto-suave); font-size: 0.85em; text-transform: uppercase; }

.conteudo { flex: 1; padding: var(--g10-espacamento-4); }

.cartao {
    background: var(--g10-cor-superficie); border: 1px solid var(--g10-cor-borda);
    border-radius: var(--g10-raio-borda); box-shadow: var(--g10-sombra-padrao);
    padding: var(--g10-espacamento-3); margin-bottom: var(--g10-espacamento-3);
}
.cartoes_totais { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: var(--g10-espacamento-3); }
.cartoes_totais .numero { font-size: 1.9em; font-weight: 700; color: var(--g10-cor-primaria); }

table.tabela { width: 100%; border-collapse: collapse; }
table.tabela th, table.tabela td {
    text-align: left; padding: var(--g10-espacamento-2);
    border-bottom: 1px solid var(--g10-cor-borda);
}
table.tabela th { color: var(--g10-cor-texto-suave); font-size: 0.9em; }

.formulario { display: grid; gap: var(--g10-espacamento-3); max-width: 720px; }
.formulario label { display: block; font-weight: 600; margin-bottom: var(--g10-espacamento-1); }
.formulario .ajuda { color: var(--g10-cor-texto-suave); font-size: 0.88em; margin-top: var(--g10-espacamento-1); }
.formulario input[type=text], .formulario input[type=password], .formulario input[type=number],
.formulario input[type=email], .formulario select, .formulario textarea {
    width: 100%; padding: var(--g10-espacamento-2);
    border: 1px solid var(--g10-cor-borda); border-radius: var(--g10-raio-borda);
    background: var(--g10-cor-superficie); color: var(--g10-cor-texto);
}
.botao {
    display: inline-block; border: 0; cursor: pointer;
    background: var(--g10-cor-primaria); color: var(--g10-cor-primaria-contraste);
    padding: var(--g10-espacamento-2) var(--g10-espacamento-3);
    border-radius: var(--g10-raio-borda); font-weight: 600;
}
.botao.perigo { background: var(--g10-cor-erro); }
.botao.secundario { background: transparent; color: var(--g10-cor-primaria); border: 1px solid var(--g10-cor-primaria); }

.selo { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 0.85em; font-weight: 600; }
.selo.sucesso { background: color-mix(in srgb, var(--g10-cor-sucesso) 15%, transparent); color: var(--g10-cor-sucesso); }
.selo.alerta { background: color-mix(in srgb, var(--g10-cor-alerta) 15%, transparent); color: var(--g10-cor-alerta); }
.selo.erro { background: color-mix(in srgb, var(--g10-cor-erro) 15%, transparent); color: var(--g10-cor-erro); }
.selo.info { background: color-mix(in srgb, var(--g10-cor-info) 15%, transparent); color: var(--g10-cor-info); }

.mensagem { padding: var(--g10-espacamento-2) var(--g10-espacamento-3); border-radius: var(--g10-raio-borda); margin-bottom: var(--g10-espacamento-3); }
.mensagem.erro { background: color-mix(in srgb, var(--g10-cor-erro) 12%, transparent); color: var(--g10-cor-erro); }
.mensagem.sucesso { background: color-mix(in srgb, var(--g10-cor-sucesso) 12%, transparent); color: var(--g10-cor-sucesso); }

.tela_login { display: flex; align-items: center; justify-content: center; min-height: 100vh; }
.tela_login .cartao { width: 360px; }