/* ==========================================================================
   SGSAP — pacotes de tema
   --------------------------------------------------------------------------
   Um pacote troca a "personalidade" da interface: fonte, densidade, cantos,
   bordas e sombras. É uma dimensão separada do claro/escuro —
   dá para usar "pixelado" no escuro ou "compacto" no claro.

   Cada pacote é só um bloco de variáveis. Nenhum JavaScript por pacote, nenhum
   template duplicado: o custo de um pacote novo é o tamanho do seu bloco.

   Regras da casa:

   * Pacote NÃO muda estrutura de HTML. Ele pode mudar densidade, tamanho e
     forma; mover elementos de lugar exigiria template próprio por pacote, que
     é onde o custo de manutenção explode.
   * Cor é responsabilidade do tema (sgsap-tokens.css): nenhum pacote a muda.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Terminal operacional
   --------------------------------------------------------------------------
   Este é o único pacote com paleta própria, e a exceção é deliberada.

   A regra geral continua valendo: pacote muda forma, não cor. Mas "terminal"
   sem fósforo sobre preto não é um terminal — é uma fonte monoespaçada. O
   pacote estava fraco exatamente por isso: mudava a letra e o canto, e a tela
   continuava sendo a mesma tela.

   A exceção vem com as condições que o plano previa:

   * a paleta é definida POR TEMA (claro e escuro), nunca uma só;
   * a cor de destaque continua intocada — o preenchimento é a cor que a pessoa
     escolheu, aqui como em qualquer outro pacote;
   * o teste de contraste mede a combinação pacote × tema com as superfícies
     deste pacote, não com as do tema padrão.

   Não há bloco para `prefers-color-scheme` porque pacote só existe com
   JavaScript: sem ele o atributo data-theme-pack nunca é escrito.
   -------------------------------------------------------------------------- */

[data-theme-pack="terminal"] {
    --sgsap-font-body: "IBM Plex Mono", "Cascadia Mono", Consolas, monospace;
    --sgsap-font-size-body: .92rem;
    --sgsap-font-size-small: .78rem;
    --sgsap-font-size-title: clamp(1.25rem, 1.8vw, 1.65rem);

    /* Recorte reto: console não tem canto arredondado. */
    --sgsap-radius: 0;
    --sgsap-radius-sm: 0;
    --sgsap-radius-md: 0;
    --sgsap-radius-lg: 0;
    --sgsap-radius-pill: 0;

    --sgsap-shadow-sm: 1px 1px 0 var(--sgsap-border-strong);
    --sgsap-shadow: 2px 2px 0 var(--sgsap-border-strong);
    --sgsap-shadow-lg: 3px 3px 0 var(--sgsap-border-strong);

    /* Terminal não interpola: o estado muda no quadro seguinte. */
    --sgsap-transition: 0ms;
    --sgsap-duracao-rapida: 0ms;
    --sgsap-duracao: 0ms;
    --sgsap-duracao-lenta: 0ms;

    --sgsap-space-3: .6rem;
    --sgsap-space-4: .8rem;

    /* Papel de impressora: claro, esverdeado de leve, sem brilho. */
    --sgsap-page: #e9ece4;
    --sgsap-surface: #f5f7f1;
    --sgsap-surface-muted: #dee3d7;
    --sgsap-surface-raised: #f5f7f1;
    --sgsap-surface-tinted: #e4e9dd;
    --sgsap-surface-hover: #d7ded0;
    --sgsap-text: #10201a;
    --sgsap-text-muted: #3b5748;
    --sgsap-border: #b9c4b2;
    --sgsap-border-subtle: #cdd6c6;
    --sgsap-border-strong: #4f6b5b;
    --sgsap-success: #10633c;
    --sgsap-warning: #7a4a00;
    --sgsap-danger: #97200f;
    --sgsap-info: #0f4f8f;
}

/* Fósforo sobre preto. */
[data-theme="dark"][data-theme-pack="terminal"] {
    --sgsap-page: #04070a;
    --sgsap-surface: #08110d;
    --sgsap-surface-muted: #0d1a14;
    --sgsap-surface-raised: #0a150f;
    --sgsap-surface-tinted: #0b1712;
    --sgsap-surface-hover: #10241a;
    --sgsap-text: #c8f9d9;
    --sgsap-text-muted: #79c497;
    --sgsap-border: #1d3d2c;
    --sgsap-border-subtle: #142c20;
    --sgsap-border-strong: #46b37a;
    --sgsap-success: #5cf2a0;
    --sgsap-warning: #f2c86a;
    --sgsap-danger: #ff8f84;
    --sgsap-info: #7fd4ff;
}

/* --- estrutura de console ------------------------------------------------- */

[data-theme-pack="terminal"] .sgsap-shell {
    /* Coluna de números alinhada, que é metade da leitura de uma fila. */
    font-variant-numeric: tabular-nums;
}

/* Seleção invertida em bloco, como marcar texto num terminal. */
[data-theme-pack="terminal"] .sgsap-shell ::selection {
    background-color: var(--sgsap-text);
    color: var(--sgsap-page);
}

/* Varredura horizontal. Duas linhas de 3px são suficientes para dar a textura
   sem virar listra: a intenção é o CRT no canto do olho, não o efeito. */
[data-theme-pack="terminal"] .sgsap-shell .sgsap-content {
    background-image: repeating-linear-gradient(
        to bottom,
        var(--sgsap-surface-tinted) 0,
        var(--sgsap-surface-tinted) 1px,
        transparent 1px,
        transparent 3px
    );
}

@keyframes sgsap-terminal-cursor {
    0%, 49% { opacity: 1; }
    50%, 100% { opacity: 0; }
}

/* Cursor de bloco piscando depois do título da tela. */
[data-theme-pack="terminal"] .sgsap-shell h1::after {
    animation: sgsap-terminal-cursor 1.05s steps(1) infinite;
    content: "\2588";
    margin-left: .3ch;
    opacity: 1;
}

/* Linha de contexto vira comentário; título de seção vira prompt. */
[data-theme-pack="terminal"] .sgsap-shell .sgsap-page-header__context::before {
    content: "// ";
}

[data-theme-pack="terminal"] .sgsap-shell h2::before {
    content: "\276F\0020";
    opacity: .7;
}

[data-theme-pack="terminal"] .sgsap-shell .sidebar-brand-text::before {
    content: "~$ ";
}

[data-theme-pack="terminal"] .sgsap-shell h1,
[data-theme-pack="terminal"] .sgsap-shell h2,
[data-theme-pack="terminal"] .sgsap-shell .sidebar-heading {
    letter-spacing: .04em;
    text-transform: uppercase;
}

/* --- controles ------------------------------------------------------------ */

[data-theme-pack="terminal"] .sgsap-shell .card,
[data-theme-pack="terminal"] .sgsap-shell .dropdown-menu,
[data-theme-pack="terminal"] .sgsap-shell .form-control,
[data-theme-pack="terminal"] .sgsap-shell .custom-select,
[data-theme-pack="terminal"] .sgsap-shell input,
[data-theme-pack="terminal"] .sgsap-shell select,
[data-theme-pack="terminal"] .sgsap-shell textarea {
    border-width: 1px;
    border-style: solid;
    border-color: var(--sgsap-border-strong);
}

/* Botão com colchetes, como opção de menu de terminal. `:has()` mantém os
   colchetes longe dos botões que só têm ícone; onde `:has()` não existir, a
   regra simplesmente não se aplica. */
[data-theme-pack="terminal"] .sgsap-shell .btn:not(.close, .btn-link, .navbar-toggler):not(:has(i, svg, img))::before {
    content: "[ ";
}

[data-theme-pack="terminal"] .sgsap-shell .btn:not(.close, .btn-link, .navbar-toggler):not(:has(i, svg, img))::after {
    content: " ]";
}

[data-theme-pack="terminal"] .sgsap-shell .btn {
    letter-spacing: .06em;
    text-transform: uppercase;
}

[data-theme-pack="terminal"] .sgsap-shell .btn:active {
    transform: translate(1px, 1px);
}

/* Cursor de texto visível e foco em bloco, sem sombra difusa. */
[data-theme-pack="terminal"] .sgsap-shell input,
[data-theme-pack="terminal"] .sgsap-shell textarea {
    caret-color: var(--sgsap-text);
}

[data-theme-pack="terminal"] .sgsap-shell :focus-visible {
    box-shadow: none;
    outline: 2px solid var(--sgsap-border-strong);
    outline-offset: 0;
}

/* --- tabelas -------------------------------------------------------------- */

[data-theme-pack="terminal"] .sgsap-shell .table th {
    letter-spacing: .045em;
    text-transform: uppercase;
}

[data-theme-pack="terminal"] .sgsap-shell .table thead th {
    border-bottom-width: 2px;
}

/* Linha apontada fica invertida em bloco, como cursor de lista. */
[data-theme-pack="terminal"] .sgsap-shell .table tbody tr:hover {
    background-color: var(--sgsap-surface-hover);
}

/* --------------------------------------------------------------------------
   Desenhado — caderno de rascunho
   --------------------------------------------------------------------------
   Segundo pacote com paleta própria, pela mesma razão do terminal: caneta
   sobre papel é metade do que faz um desenho parecer desenho. A outra metade
   é a linha nunca sair reta — daí o raio irregular, que é um raio elíptico de
   quatro valores fingindo tremor de mão.

   A cor de destaque continua exata, como em todos os pacotes.
   -------------------------------------------------------------------------- */

[data-theme-pack="desenhado"] {
    --sgsap-font-body: Kalam, "Segoe Print", cursive;
    --sgsap-font-size-body: 1.02rem;
    --sgsap-font-size-title: clamp(1.6rem, 2.2vw, 2.2rem);

    /* Raio elíptico assimétrico: o contorno sai da régua e vira traço. */
    --sgsap-radius: 14px 4px 12px 5px / 5px 12px 4px 14px;
    --sgsap-radius-sm: 8px 3px 7px 3px / 3px 7px 3px 8px;
    --sgsap-radius-md: 11px 4px 10px 4px / 4px 10px 4px 11px;
    --sgsap-radius-lg: 20px 6px 18px 7px / 7px 18px 6px 20px;

    --sgsap-shadow-sm: 1px 2px 0 var(--sgsap-border-strong);
    --sgsap-shadow: 2px 3px 0 var(--sgsap-border-strong);
    --sgsap-shadow-lg: 3px 5px 0 var(--sgsap-border-strong);

    /* Papel de caderno, grafite por cima. */
    --sgsap-page: #f6f1e6;
    --sgsap-surface: #fffcf5;
    --sgsap-surface-muted: #ece5d6;
    --sgsap-surface-raised: #fffcf5;
    --sgsap-surface-tinted: #f1ebdd;
    --sgsap-surface-hover: #e6dfcd;
    --sgsap-text: #2c2a26;
    --sgsap-text-muted: #55504a;
    --sgsap-border: #a9a294;
    --sgsap-border-subtle: #d8d0be;
    --sgsap-border-strong: #45413a;
    --sgsap-success: #1f6b3d;
    --sgsap-warning: #7d4d00;
    --sgsap-danger: #a12318;
    --sgsap-info: #17548f;
}

/* Caderno preto, giz claro. */
[data-theme="dark"][data-theme-pack="desenhado"] {
    --sgsap-page: #16161a;
    --sgsap-surface: #1e1e24;
    --sgsap-surface-muted: #282830;
    --sgsap-surface-raised: #212128;
    --sgsap-surface-tinted: #23232b;
    --sgsap-surface-hover: #2f2f39;
    --sgsap-text: #ece7db;
    /* Um pouco mais claro do que pede o olho no cartão: a hora do chip do
       calendário é texto secundário sobre um chip tingido pelo destaque, e com
       amarelo escolhido esse fundo sobe. Medido em navegador: 4,11:1 antes. */
    --sgsap-text-muted: #bbb4a3;
    --sgsap-border: #4a4842;
    --sgsap-border-subtle: #33323a;
    --sgsap-border-strong: #b3ab99;
    --sgsap-success: #74dd9c;
    --sgsap-warning: #edc478;
    --sgsap-danger: #ff9b8f;
    --sgsap-info: #8cc6ff;
}

/* Cartões levemente tortos, alternando o lado — pilha de folhas, não grade. */
[data-theme-pack="desenhado"] .sgsap-shell .card {
    border-width: 2px;
    border-style: solid;
    border-color: var(--sgsap-border-strong);
    transform: rotate(-.25deg);
}

[data-theme-pack="desenhado"] .sgsap-shell [data-dashboard-card]:nth-child(even) .card {
    transform: rotate(.3deg);
}

[data-theme-pack="desenhado"] .sgsap-shell .btn,
[data-theme-pack="desenhado"] .sgsap-shell .form-control,
[data-theme-pack="desenhado"] .sgsap-shell .custom-select,
[data-theme-pack="desenhado"] .sgsap-shell input,
[data-theme-pack="desenhado"] .sgsap-shell select,
[data-theme-pack="desenhado"] .sgsap-shell textarea {
    border-width: 2px;
    border-style: solid;
    border-color: var(--sgsap-border-strong);
}

/* Link sublinhado a mão. */
[data-theme-pack="desenhado"] .sgsap-shell a:not(.btn) {
    text-decoration: underline;
    text-decoration-style: wavy;
    text-decoration-thickness: 1px;
    text-underline-offset: .18em;
}

/* Marca-texto atrás do título, com a cor de destaque bem diluída. */
[data-theme-pack="desenhado"] .sgsap-shell h1 {
    background-image: linear-gradient(transparent 58%, var(--sgsap-accent-soft) 58%);
    display: inline;
    padding: 0 .15em;
}

[data-theme-pack="desenhado"] .sgsap-shell h2 {
    text-decoration: underline;
    text-decoration-style: wavy;
    text-decoration-thickness: 1px;
    text-underline-offset: .25em;
}

/* Linhas de tabela como traço interrompido de lápis. */
[data-theme-pack="desenhado"] .sgsap-shell .table th,
[data-theme-pack="desenhado"] .sgsap-shell .table td {
    border-top: 0;
    border-bottom: 1px dashed var(--sgsap-border);
}

[data-theme-pack="desenhado"] .sgsap-shell .table thead th {
    border-bottom: 2px solid var(--sgsap-border-strong);
}

[data-theme-pack="desenhado"] .sgsap-shell .table-striped tbody tr:nth-of-type(odd) {
    background-color: transparent;
}

[data-theme-pack="desenhado"] .sgsap-shell .btn:active {
    transform: translate(1px, 2px) rotate(-.4deg);
}

/* --------------------------------------------------------------------------
   HQ — página de quadrinho
   --------------------------------------------------------------------------
   Terceiro pacote com paleta própria. Quadrinho é papel amarelado, tinta preta
   grossa e retícula de meio-tom; sem isso o pacote era a fonte Bangers em cima
   do tema padrão.

   O contorno preto é `--sgsap-border-strong`, e por isso a moldura dos quadros
   acompanha o tema: no escuro a tinta vira branca, como página em negativo.
   -------------------------------------------------------------------------- */

[data-theme-pack="hq"] {
    --sgsap-font-body: "Comic Neue", system-ui, sans-serif;
    --sgsap-font-size-body: 1rem;
    --sgsap-font-size-title: clamp(1.8rem, 2.6vw, 2.6rem);

    --sgsap-radius: .2rem;
    --sgsap-radius-sm: .1rem;
    --sgsap-radius-md: .15rem;
    --sgsap-radius-lg: .25rem;
    --sgsap-radius-pill: 999px;

    /* Sombra dura e grossa: contorno de quadro, não elevação. */
    --sgsap-shadow-sm: 2px 2px 0 var(--sgsap-border-strong);
    --sgsap-shadow: 4px 4px 0 var(--sgsap-border-strong);
    --sgsap-shadow-lg: 7px 7px 0 var(--sgsap-border-strong);

    /* Papel de banca: amarelado, com tinta preta por cima. */
    --sgsap-page: #f4ecd8;
    --sgsap-surface: #fffdf2;
    --sgsap-surface-muted: #efe3c4;
    --sgsap-surface-raised: #fffdf2;
    --sgsap-surface-tinted: #f7f0dd;
    --sgsap-surface-hover: #eadfc0;
    --sgsap-text: #16121a;
    --sgsap-text-muted: #4b4350;
    --sgsap-border: #16121a;
    --sgsap-border-subtle: #b9ae95;
    --sgsap-border-strong: #16121a;
    --sgsap-success: #106b37;
    --sgsap-warning: #8a4b00;
    --sgsap-danger: #b5121b;
    --sgsap-info: #14459c;
}

/* Página em negativo: tinta branca sobre noite. */
[data-theme="dark"][data-theme-pack="hq"] {
    --sgsap-page: #100d18;
    --sgsap-surface: #1a1626;
    --sgsap-surface-muted: #262034;
    --sgsap-surface-raised: #1f1a2c;
    --sgsap-surface-tinted: #201a2e;
    --sgsap-surface-hover: #2e2740;
    --sgsap-text: #fbf4e4;
    --sgsap-text-muted: #c0b4cf;
    --sgsap-border: #fbf4e4;
    --sgsap-border-subtle: #3b3350;
    --sgsap-border-strong: #fbf4e4;
    --sgsap-success: #5ce38f;
    --sgsap-warning: #ffcf6b;
    --sgsap-danger: #ff8b86;
    --sgsap-info: #86c2ff;
}

/* Retícula de meio-tom no fundo da página. Dois pontos deslocados dão a trama
   diagonal da impressão barata; o valor é um token de borda, não cor própria. */
[data-theme-pack="hq"] .sgsap-shell .sgsap-content {
    background-image:
        radial-gradient(var(--sgsap-border-subtle) 1.1px, transparent 1.2px),
        radial-gradient(var(--sgsap-border-subtle) 1.1px, transparent 1.2px);
    background-position: 0 0, 5px 5px;
    background-size: 10px 10px;
}

[data-theme-pack="hq"] .sgsap-shell h1,
[data-theme-pack="hq"] .sgsap-shell h2 {
    font-family: Bangers, Impact, sans-serif;
    font-weight: 400;
    letter-spacing: .05em;
    line-height: 1.1;
    text-transform: uppercase;
}

/* Título com contorno: quatro sombras rígidas fazem o traço em volta da letra,
   e a quinta é o deslocamento do quadrinho. */
[data-theme-pack="hq"] .sgsap-shell h1 {
    text-shadow:
        1px 1px 0 var(--sgsap-surface),
        -1px 1px 0 var(--sgsap-surface),
        1px -1px 0 var(--sgsap-surface),
        -1px -1px 0 var(--sgsap-surface),
        3px 3px 0 var(--sgsap-border-strong);
}

/* Quadro: contorno grosso e sombra dura, sem desfoque. */
[data-theme-pack="hq"] .sgsap-shell .card,
[data-theme-pack="hq"] .sgsap-shell .sgsap-dashboard-panel,
[data-theme-pack="hq"] .sgsap-shell .dropdown-menu {
    border-width: 3px;
    border-style: solid;
    border-color: var(--sgsap-border-strong);
    box-shadow: var(--sgsap-shadow);
}

/* Cabeçalho do quadro vira legenda de canto. */
[data-theme-pack="hq"] .sgsap-shell .card-header {
    border-bottom: 3px solid var(--sgsap-border-strong);
    font-weight: 700;
    letter-spacing: .03em;
    text-transform: uppercase;
}

[data-theme-pack="hq"] .sgsap-shell .btn,
[data-theme-pack="hq"] .sgsap-shell .form-control,
[data-theme-pack="hq"] .sgsap-shell .custom-select,
[data-theme-pack="hq"] .sgsap-shell input,
[data-theme-pack="hq"] .sgsap-shell select,
[data-theme-pack="hq"] .sgsap-shell textarea {
    border-width: 2px;
    border-style: solid;
    border-color: var(--sgsap-border-strong);
}

[data-theme-pack="hq"] .sgsap-shell .btn {
    box-shadow: var(--sgsap-shadow-sm);
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

[data-theme-pack="hq"] .sgsap-shell .btn:active {
    box-shadow: none;
    transform: translate(2px, 2px);
}

/* Etiqueta inclinada, como selo carimbado na página. */
[data-theme-pack="hq"] .sgsap-shell .badge {
    border: 2px solid var(--sgsap-border-strong);
    font-weight: 700;
    letter-spacing: .03em;
    text-transform: uppercase;
    transform: rotate(-1.5deg);
}

[data-theme-pack="hq"] .sgsap-shell .table,
[data-theme-pack="hq"] .sgsap-shell .table th,
[data-theme-pack="hq"] .sgsap-shell .table td {
    border-width: 2px;
    border-style: solid;
    border-color: var(--sgsap-border-strong);
}

[data-theme-pack="hq"] .sgsap-shell .table thead th {
    background-color: var(--sgsap-surface-muted);
    font-family: Bangers, Impact, sans-serif;
    font-weight: 400;
    letter-spacing: .06em;
}

/* --------------------------------------------------------------------------
   Impresso — página de jornal: serifa, tabela sem grade e cabeçalho em
   versalete. As linhas horizontais fazem o trabalho que a grade fazia.
   -------------------------------------------------------------------------- */
[data-theme-pack="impresso"] {
    --sgsap-font-body: "Libre Baskerville", Georgia, serif;
    --sgsap-font-size-body: .96rem;
    --sgsap-font-size-title: clamp(1.45rem, 2vw, 2rem);
    --sgsap-radius: .1rem;
    --sgsap-radius-sm: .1rem;
    --sgsap-radius-md: .1rem;
    --sgsap-radius-lg: .1rem;
    --sgsap-shadow: var(--sgsap-shadow-sm);
}

[data-theme-pack="impresso"] .sgsap-shell h1,
[data-theme-pack="impresso"] .sgsap-shell h2 {
    letter-spacing: -.02em;
}

/* Tratamento editorial da tabela: sem linhas verticais, sem zebrado, régua
   grossa sob o cabeçalho e fio fino entre as linhas. */
[data-theme-pack="impresso"] .sgsap-shell .table,
[data-theme-pack="impresso"] .sgsap-shell .table th,
[data-theme-pack="impresso"] .sgsap-shell .table td {
    border-left: 0;
    border-right: 0;
}

[data-theme-pack="impresso"] .sgsap-shell .table thead th {
    border-top: 0;
    border-bottom-width: 2px;
    font-size: .78em;
    font-variant-caps: all-small-caps;
    letter-spacing: .08em;
    text-transform: lowercase;
}

[data-theme-pack="impresso"] .sgsap-shell .table tbody td {
    border-top: 1px solid var(--sgsap-border-subtle);
}

[data-theme-pack="impresso"] .sgsap-shell .table-striped tbody tr:nth-of-type(odd) {
    background-color: transparent;
}

[data-theme-pack="impresso"] .sgsap-shell .sgsap-detail-description,
[data-theme-pack="impresso"] .sgsap-shell .sgsap-page-header__description {
    max-width: 68ch;
}

/* --------------------------------------------------------------------------
   Brutalista — bloco, peso e nenhum ornamento. O tratamento chega até os
   formulários e as tabelas, que é onde a interface passa o dia.
   -------------------------------------------------------------------------- */
[data-theme-pack="brutalista"] {
    --sgsap-font-body: "Archivo Narrow", Arial, sans-serif;
    --sgsap-font-size-title: clamp(1.5rem, 2.1vw, 2.3rem);
    --sgsap-radius: 0;
    --sgsap-radius-sm: 0;
    --sgsap-radius-md: 0;
    --sgsap-radius-lg: 0;
    --sgsap-radius-pill: 0;
    --sgsap-shadow-sm: 3px 3px 0 var(--sgsap-border-strong);
    --sgsap-shadow: 5px 5px 0 var(--sgsap-border-strong);
    --sgsap-shadow-lg: 8px 8px 0 var(--sgsap-border-strong);
    --sgsap-transition: 0ms;
}

[data-theme-pack="brutalista"] .sgsap-shell h1,
[data-theme-pack="brutalista"] .sgsap-shell h2 {
    font-family: "Archivo Black", Impact, sans-serif;
    letter-spacing: -.04em;
    text-transform: uppercase;
}

[data-theme-pack="brutalista"] .sgsap-shell .btn,
[data-theme-pack="brutalista"] .sgsap-shell .card,
[data-theme-pack="brutalista"] .sgsap-shell .form-control,
[data-theme-pack="brutalista"] .sgsap-shell .custom-select,
[data-theme-pack="brutalista"] .sgsap-shell .dropdown-menu {
    border-width: 3px;
    border-style: solid;
    border-color: var(--sgsap-border-strong);
}

[data-theme-pack="brutalista"] .sgsap-shell .btn {
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}

[data-theme-pack="brutalista"] .sgsap-shell .btn:active {
    box-shadow: none;
    transform: translate(3px, 3px);
}

[data-theme-pack="brutalista"] .sgsap-shell label {
    font-size: .78em;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}

[data-theme-pack="brutalista"] .sgsap-shell .table,
[data-theme-pack="brutalista"] .sgsap-shell .table th,
[data-theme-pack="brutalista"] .sgsap-shell .table td {
    border-width: 2px;
    border-style: solid;
    border-color: var(--sgsap-border-strong);
}

[data-theme-pack="brutalista"] .sgsap-shell .table thead th {
    background-color: var(--sgsap-surface-muted);
    letter-spacing: .05em;
    text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   Pixelado — interface de terminal/8-bit: fonte monoespaçada, canto reto,
   sombra dura deslocada e borda grossa.
   -------------------------------------------------------------------------- */
[data-theme-pack="pixelado"] {
    /* A fonte de pixel é baixada só quando este pacote é escolhido; sem ela, a
       pilha monoespaçada do sistema já dá o visual. */
    --sgsap-font-body: "Press Start 2P", ui-monospace, "Cascadia Mono", "Consolas", monospace;
    --sgsap-font-size-body: 0.8rem;
    --sgsap-font-size-small: 0.7rem;
    --sgsap-font-size-title: clamp(1rem, 1.6vw, 1.35rem);

    --sgsap-radius: 0;
    --sgsap-radius-sm: 0;
    --sgsap-radius-md: 0;
    --sgsap-radius-lg: 0;
    --sgsap-radius-pill: 0;

    --sgsap-shadow-sm: 2px 2px 0 var(--sgsap-border-strong);
    --sgsap-shadow: 4px 4px 0 var(--sgsap-border-strong);
    --sgsap-shadow-lg: 6px 6px 0 var(--sgsap-border-strong);

    --sgsap-transition: 0ms;

    --sgsap-space-3: 0.7rem;
    --sgsap-space-4: 0.9rem;
}

[data-theme-pack="pixelado"] .sgsap-shell .btn,
[data-theme-pack="pixelado"] .sgsap-shell .form-control,
[data-theme-pack="pixelado"] .sgsap-shell .custom-select,
[data-theme-pack="pixelado"] .sgsap-shell .card,
[data-theme-pack="pixelado"] .sgsap-shell .table,
[data-theme-pack="pixelado"] .sgsap-shell .dropdown-menu {
    border-width: 2px;
    border-style: solid;
    border-color: var(--sgsap-border-strong);
}

[data-theme-pack="pixelado"] .sgsap-shell .btn:active {
    transform: translate(2px, 2px);
}

[data-theme-pack="pixelado"] .sgsap-shell h1,
[data-theme-pack="pixelado"] .sgsap-shell h2,
[data-theme-pack="pixelado"] .sgsap-shell .sgsap-page-header__context {
    letter-spacing: 0;
    text-transform: uppercase;
}

/* Linhas de tabela viram blocos separados, no espírito de interface de bloco. */
[data-theme-pack="pixelado"] .sgsap-shell .table thead th {
    border-bottom-width: 2px;
}

/* --------------------------------------------------------------------------
   Compacto — mesma linguagem visual, mais linhas por tela. Para quem passa o
   dia na fila de atendimento.
   -------------------------------------------------------------------------- */
[data-theme-pack="compacto"] {
    --sgsap-font-body: "Roboto Condensed", "Arial Narrow", Arial, sans-serif;
    --sgsap-font-size-body: 0.875rem;
    --sgsap-font-size-small: 0.78rem;
    --sgsap-font-size-title: clamp(1.2rem, 1.6vw, 1.5rem);

    --sgsap-space-1: 0.2rem;
    --sgsap-space-2: 0.35rem;
    --sgsap-space-3: 0.5rem;
    --sgsap-space-4: 0.7rem;
    --sgsap-space-5: 1rem;
    --sgsap-space-6: 1.35rem;

    --sgsap-radius: 0.4rem;
    --sgsap-radius-md: 0.35rem;
    --sgsap-radius-lg: 0.5rem;
}

[data-theme-pack="compacto"] .sgsap-shell {
    font-variant-numeric: tabular-nums;
}

/* Linhas secas: sem zebrado, sem grade vertical, só um fio entre as linhas.
   É o que separa este pacote de um "padrão com zoom para fora". */
[data-theme-pack="compacto"] .sgsap-shell .table th,
[data-theme-pack="compacto"] .sgsap-shell .table td {
    border-left: 0;
    border-right: 0;
    border-top: 0;
    border-bottom: 1px solid var(--sgsap-border-subtle);
    padding-top: 0.35rem;
    padding-bottom: 0.35rem;
}

[data-theme-pack="compacto"] .sgsap-shell .table thead th {
    border-bottom-width: 2px;
    font-size: 0.74em;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

[data-theme-pack="compacto"] .sgsap-shell .table-striped tbody tr:nth-of-type(odd) {
    background-color: transparent;
}

/* Cartão sem elevação: em tela cheia de dados, sombra vira ruído. */
[data-theme-pack="compacto"] .sgsap-shell .card {
    border: 1px solid var(--sgsap-border-subtle);
    box-shadow: none;
}

[data-theme-pack="compacto"] .sgsap-shell .badge {
    font-size: 0.7em;
}

[data-theme-pack="compacto"] .sgsap-shell .btn {
    padding: 0.25rem 0.6rem;
}

[data-theme-pack="compacto"] .sgsap-shell .sgsap-content {
    padding: 0 1rem 1.25rem;
}

[data-theme-pack="compacto"] .sgsap-shell .sgsap-page-header {
    margin-bottom: 0.75rem;
}

/* --------------------------------------------------------------------------
   Leitura — o oposto do compacto: fonte maior e mais respiro, para uso
   prolongado ou baixa visão.
   -------------------------------------------------------------------------- */
[data-theme-pack="leitura"] {
    --sgsap-font-body: "Source Serif 4", Georgia, "Iowan Old Style", "Times New Roman", serif;
    --sgsap-font-size-body: 1.125rem;
    --sgsap-font-size-small: 1rem;
    --sgsap-font-size-title: clamp(1.8rem, 2.4vw, 2.4rem);

    --sgsap-space-4: 1.15rem;
    --sgsap-space-5: 1.75rem;
    --sgsap-space-6: 2.5rem;

    --sgsap-radius: 0.6rem;
}

[data-theme-pack="leitura"] .sgsap-shell {
    line-height: 1.7;
}

[data-theme-pack="leitura"] .sgsap-shell .table th,
[data-theme-pack="leitura"] .sgsap-shell .table td {
    padding-top: 0.85rem;
    padding-bottom: 0.85rem;
}

/* Texto longo ganha largura de leitura confortável. */
[data-theme-pack="leitura"] .sgsap-shell .sgsap-detail-description,
[data-theme-pack="leitura"] .sgsap-shell .sgsap-page-header__description,
[data-theme-pack="leitura"] .sgsap-shell .card-body > p {
    max-width: 65ch;
}

/* Serifa de verdade pede entrelinha e um respiro entre blocos. */
[data-theme-pack="leitura"] .sgsap-shell p + p {
    margin-top: var(--sgsap-space-4);
}

[data-theme-pack="leitura"] .sgsap-shell h1,
[data-theme-pack="leitura"] .sgsap-shell h2 {
    line-height: 1.25;
}

/* --------------------------------------------------------------------------
   Universo Geek — observatório arcano e central de comando
   --------------------------------------------------------------------------
   A linguagem mistura ficção científica, magia e energia heroica sem copiar
   símbolos, personagens ou identidades visuais de franquias existentes.
   -------------------------------------------------------------------------- */
[data-theme-pack="geek"] {
    --sgsap-font-body: Rajdhani, "Segoe UI", sans-serif;
    --sgsap-font-size-body: 1rem;
    --sgsap-font-size-small: .84rem;
    --sgsap-font-size-title: clamp(1.55rem, 2.2vw, 2.25rem);

    --sgsap-radius: .35rem;
    --sgsap-radius-sm: .2rem;
    --sgsap-radius-md: .45rem;
    --sgsap-radius-lg: .65rem;
    --sgsap-radius-pill: 999px;

    --sgsap-shadow-sm: 0 2px 0 var(--sgsap-border-strong);
    --sgsap-shadow: 0 5px 14px rgba(30, 24, 74, .12);
    --sgsap-shadow-lg: 0 14px 34px rgba(30, 24, 74, .18);

    /* Carta estelar clara: pergaminho frio, tinta azul-violeta. */
    --sgsap-page: #edf1f8;
    --sgsap-surface: #ffffff;
    --sgsap-surface-muted: #e4e8f3;
    --sgsap-surface-raised: #ffffff;
    --sgsap-surface-tinted: #e9e8f6;
    --sgsap-surface-hover: #dde3f0;
    --sgsap-text: #171a31;
    --sgsap-text-muted: #515a74;
    --sgsap-border: #aeb8cf;
    --sgsap-border-subtle: #d3d9e7;
    --sgsap-border-strong: #596584;
    --sgsap-success: #14734b;
    --sgsap-warning: #855800;
    --sgsap-danger: #ad2920;
    --sgsap-info: #2457a7;
}

/* Ponte de comando à noite: azul profundo, leitura clara e brilho controlado. */
[data-theme="dark"][data-theme-pack="geek"] {
    --sgsap-page: #080b18;
    --sgsap-surface: #11162a;
    --sgsap-surface-muted: #1a2038;
    --sgsap-surface-raised: #171d34;
    --sgsap-surface-tinted: #171b35;
    --sgsap-surface-hover: #222944;
    --sgsap-text: #f2f4ff;
    --sgsap-text-muted: #b5bdd4;
    --sgsap-border: #38425f;
    --sgsap-border-subtle: #252c47;
    --sgsap-border-strong: #8292bc;
    --sgsap-success: #64e0a4;
    --sgsap-warning: #f5c968;
    --sgsap-danger: #ff938c;
    --sgsap-info: #8ebcff;
}

/* Campo de estrelas discreto: só tokens do próprio tema, para acompanhar a
   troca claro/escuro e a cor de destaque escolhida pela pessoa. */
[data-theme-pack="geek"] .sgsap-shell .sgsap-content {
    background-image:
        radial-gradient(circle at 12% 18%, var(--sgsap-border) 0 1px, transparent 1.5px),
        radial-gradient(circle at 74% 32%, var(--sgsap-border-subtle) 0 1px, transparent 1.5px),
        radial-gradient(circle at 38% 76%, var(--sgsap-accent-soft) 0 2px, transparent 2.5px),
        linear-gradient(135deg, transparent 0 72%, var(--sgsap-surface-tinted) 72% 73%, transparent 73%);
    background-size: 87px 87px, 131px 131px, 173px 173px, 100% 100%;
}

[data-theme-pack="geek"] .sgsap-shell h1,
[data-theme-pack="geek"] .sgsap-shell h2,
[data-theme-pack="geek"] .sgsap-shell .sidebar-heading {
    font-family: Orbitron, Rajdhani, "Segoe UI", sans-serif;
    letter-spacing: .035em;
}

[data-theme-pack="geek"] .sgsap-shell .sgsap-page-header__context::before {
    content: "✦ ";
}

[data-theme-pack="geek"] .sgsap-shell h2::after {
    color: var(--sgsap-accent-legivel);
    content: " ◇";
    font-size: .65em;
    vertical-align: .18em;
}

[data-theme-pack="geek"] .sgsap-shell .card,
[data-theme-pack="geek"] .sgsap-shell .sgsap-dashboard-panel,
[data-theme-pack="geek"] .sgsap-shell .dropdown-menu {
    border: 1px solid var(--sgsap-border);
    border-top: 3px solid var(--sgsap-accent-legivel);
    box-shadow: var(--sgsap-shadow);
}

[data-theme-pack="geek"] .sgsap-shell .card-header {
    background-image: linear-gradient(90deg, var(--sgsap-accent-soft), transparent);
    border-bottom: 1px solid var(--sgsap-border);
}

[data-theme-pack="geek"] .sgsap-shell .btn,
[data-theme-pack="geek"] .sgsap-shell .form-control,
[data-theme-pack="geek"] .sgsap-shell .custom-select,
[data-theme-pack="geek"] .sgsap-shell input,
[data-theme-pack="geek"] .sgsap-shell select,
[data-theme-pack="geek"] .sgsap-shell textarea {
    border-width: 1px;
    border-color: var(--sgsap-border-strong);
}

[data-theme-pack="geek"] .sgsap-shell .btn:not(.btn-link) {
    font-weight: 700;
    letter-spacing: .045em;
    text-transform: uppercase;
}

[data-theme-pack="geek"] .sgsap-shell .btn:active {
    transform: translateY(2px);
}

[data-theme-pack="geek"] .sgsap-shell .table thead th {
    background-image: linear-gradient(90deg, var(--sgsap-surface-muted), var(--sgsap-surface-tinted));
    border-bottom: 2px solid var(--sgsap-accent-legivel);
    font-family: Orbitron, Rajdhani, sans-serif;
    font-size: .78em;
    letter-spacing: .055em;
    text-transform: uppercase;
}

[data-theme-pack="geek"] .sgsap-shell .table tbody tr:hover {
    background-color: var(--sgsap-surface-hover);
    box-shadow: inset 3px 0 0 var(--sgsap-accent-legivel);
}

[data-theme-pack="geek"] .sgsap-shell .badge {
    border: 1px solid var(--sgsap-border-strong);
    letter-spacing: .035em;
}