/* ==========================================================================
   SGA Naviraí — design system
   Princípios: simples, rápido, sem decoração. Tudo que aparece leva a uma
   ação. Plano: cantos retos, sem glow, sem gradiente, sem sombra decorativa.
   Hierarquia por tipografia, espaço e cor sólida. Cores do brasão de Naviraí.
   ========================================================================== */

@font-face {
    font-family: "Inter";
    src: url("fontes/inter-latin-wght-normal.woff2") format("woff2");
    font-weight: 100 900;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: "Inter";
    src: url("fontes/inter-latin-ext-wght-normal.woff2") format("woff2");
    font-weight: 100 900;
    font-display: swap;
    unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
    /* Identidade (brasão / logotipo) */
    --sga-azul: #0b3c91;
    --sga-azul-escuro: #072a66;
    --sga-azul-tinta: #e8eef9;
    --sga-amarelo: #ffc20e;
    --sga-amarelo-tinta: #fff6d6;
    --sga-vermelho: #b3001b;
    --sga-vermelho-tinta: #fde8eb;

    /* Semânticas */
    --sga-sucesso: #0f7a4a;
    --sga-sucesso-tinta: #e3f4ec;
    --sga-atencao: #9a5b00;
    --sga-atencao-tinta: #fff1d6;
    --sga-perigo: var(--sga-vermelho);
    --sga-perigo-tinta: var(--sga-vermelho-tinta);
    --sga-prioridade: #c2410c;
    --sga-prioridade-tinta: #ffeddf;

    /* Neutros */
    --sga-fundo: #f2f4f7;
    --sga-superficie: #ffffff;
    --sga-superficie-2: #f7f8fa;
    --sga-linha: #d7dce4;
    --sga-linha-forte: #aeb6c3;
    --sga-texto: #10141b;
    --sga-texto-2: #485062;
    --sga-texto-3: #7a8396;

    /* Tipografia */
    --sga-fonte: "Inter", "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
    --sga-fs-xs: 0.75rem;
    --sga-fs-sm: 0.8125rem;
    --sga-fs-md: 0.9375rem;
    --sga-fs-lg: 1.125rem;
    --sga-fs-xl: 1.5rem;
    --sga-fs-2xl: 2rem;

    /* Espaço (grade de 4px) */
    --sga-1: 4px;
    --sga-2: 8px;
    --sga-3: 12px;
    --sga-4: 16px;
    --sga-5: 24px;
    --sga-6: 32px;
    --sga-7: 48px;

    --sga-foco: 3px solid var(--sga-amarelo);
    --sga-transicao: 120ms ease-out;
}

*, *::before, *::after { box-sizing: border-box; border-radius: 0 !important; }

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

body.sga {
    margin: 0;
    background: var(--sga-fundo);
    color: var(--sga-texto);
    font-family: var(--sga-fonte);
    font-size: var(--sga-fs-md);
    line-height: 1.5;
    font-feature-settings: "tnum" 1, "cv11" 1;
}

.sga :focus-visible { outline: var(--sga-foco); outline-offset: 2px; }

.sga a:not(.sga-btn) { color: var(--sga-azul); text-underline-offset: 3px; }
.sga h1, .sga h2, .sga h3 { margin: 0; line-height: 1.2; letter-spacing: -0.01em; }

/* ---- Botões ------------------------------------------------------------ */
.sga-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--sga-2);
    min-height: 44px; padding: 0 var(--sga-5);
    border: 2px solid transparent; background: var(--sga-superficie); color: var(--sga-texto);
    font: 600 var(--sga-fs-md)/1 var(--sga-fonte); text-decoration: none; cursor: pointer;
    transition: background var(--sga-transicao), border-color var(--sga-transicao), color var(--sga-transicao);
    user-select: none; white-space: nowrap;
}
.sga-btn:disabled, .sga-btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }
.sga-btn--primario { background: var(--sga-azul); color: #fff; }
.sga-btn--primario:hover:not(:disabled) { background: var(--sga-azul-escuro); }
.sga-btn--secundario { border-color: var(--sga-linha-forte); }
.sga-btn--secundario:hover:not(:disabled) { border-color: var(--sga-azul); color: var(--sga-azul); }
.sga-btn--perigo { background: var(--sga-perigo); color: #fff; }
.sga-btn--perigo:hover:not(:disabled) { background: #8a0015; }
.sga-btn--sucesso { background: var(--sga-sucesso); color: #fff; }
.sga-btn--sucesso:hover:not(:disabled) { background: #0a5e39; }
.sga-btn--fantasma { background: transparent; color: var(--sga-texto-2); }
.sga-btn--fantasma:hover:not(:disabled) { background: var(--sga-superficie-2); color: var(--sga-texto); }
.sga-btn--grande { min-height: 64px; font-size: var(--sga-fs-lg); padding: 0 var(--sga-6); }
.sga-btn--bloco { width: 100%; }

/* ---- Campos ------------------------------------------------------------ */
.sga-campo { display: grid; gap: var(--sga-1); }
.sga-campo label { font-size: var(--sga-fs-sm); font-weight: 600; color: var(--sga-texto-2); }
.sga-input {
    width: 100%; min-height: 48px; padding: 0 var(--sga-4);
    background: var(--sga-superficie); color: var(--sga-texto);
    border: 1px solid var(--sga-linha-forte); font: 500 var(--sga-fs-md) var(--sga-fonte);
    transition: border-color var(--sga-transicao);
}
.sga-input:hover { border-color: var(--sga-texto-3); }
.sga-input:focus { outline: none; border-color: var(--sga-azul); box-shadow: inset 0 -3px 0 var(--sga-azul); }
.sga-input--codigo { font-size: var(--sga-fs-xl); letter-spacing: .35em; text-align: center; font-weight: 700; }

/* ---- Avisos ------------------------------------------------------------ */
.sga-aviso { padding: var(--sga-3) var(--sga-4); border-left: 4px solid; font-size: var(--sga-fs-sm); }
.sga-aviso--erro { background: var(--sga-perigo-tinta); border-color: var(--sga-perigo); color: #6e0011; }
.sga-aviso--ok { background: var(--sga-sucesso-tinta); border-color: var(--sga-sucesso); color: #064a2c; }
.sga-aviso--info { background: var(--sga-azul-tinta); border-color: var(--sga-azul); color: var(--sga-azul-escuro); }
.sga-aviso--atencao { background: var(--sga-atencao-tinta); border-color: var(--sga-atencao); color: #5c3600; }

@media (prefers-reduced-motion: reduce) { .sga * { transition: none !important; } }

/* ==========================================================================
   Páginas do sistema (dentro do layout padrão)
   ========================================================================== */
.sga-pagina { max-width: 1180px; margin: 0 auto; padding: var(--sga-5) 0 var(--sga-7); display: grid; gap: var(--sga-5); font-family: var(--sga-fonte); color: var(--sga-texto); font-feature-settings: "tnum" 1; }
.sga-cabecalho { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--sga-4); flex-wrap: wrap; }
.sga-cabecalho h1 { font-size: var(--sga-fs-2xl); font-weight: 800; letter-spacing: -0.02em; }
.sga-migalha { margin: 0 0 var(--sga-1); font-size: var(--sga-fs-sm); color: var(--sga-texto-3); }
.sga-sub { margin: var(--sga-1) 0 0; color: var(--sga-texto-2); font-size: var(--sga-fs-sm); }
.sga-vazio { margin: 0; padding: var(--sga-5); text-align: center; color: var(--sga-texto-2); background: var(--sga-superficie-2); }

.sga-cartao { background: var(--sga-superficie); border: 1px solid var(--sga-linha); padding: var(--sga-5); display: grid; gap: var(--sga-4); }
.sga-cartao h2 { font-size: var(--sga-fs-lg); font-weight: 800; }
.sga-cartao--destaque { border-left: 6px solid var(--sga-amarelo); }

.sga-grade { display: grid; gap: var(--sga-4); grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.sga-grade--3 { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.sga-grade--4 { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.sga-linha-form { display: flex; gap: var(--sga-3); align-items: flex-end; flex-wrap: wrap; }
.sga-linha-form .sga-campo { flex: 1 1 180px; }
.sga-linha-form--compacta { flex-wrap: nowrap; }
.sga-linha-form--compacta .sga-input { min-height: 40px; }
select.sga-input { appearance: auto; padding-right: var(--sga-3); }
.sga-textarea { min-height: 112px; padding: var(--sga-3) var(--sga-4); line-height: 1.5; resize: vertical; }
.sga-cor { width: 100%; height: 48px; padding: 2px; border: 1px solid var(--sga-linha-forte); background: var(--sga-superficie); cursor: pointer; }
input[type="range"] { width: 100%; accent-color: var(--sga-azul); }

.sga-fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: var(--sga-2); }
.sga-fieldset legend { font-size: var(--sga-fs-sm); font-weight: 700; color: var(--sga-texto-2); margin-bottom: var(--sga-1); }
.sga-opcoes { display: flex; flex-wrap: wrap; gap: var(--sga-2); }
.sga-opcao { display: inline-flex; align-items: center; gap: var(--sga-2); padding: var(--sga-2) var(--sga-3); border: 1px solid var(--sga-linha); background: var(--sga-superficie-2); font-size: var(--sga-fs-sm); cursor: pointer; user-select: none; }
.sga-opcao:has(input:checked) { border-color: var(--sga-azul); background: var(--sga-azul-tinta); }
.sga-check { display: flex; gap: var(--sga-3); align-items: flex-start; cursor: pointer; }
.sga-check input[type="checkbox"], .sga-opcao input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--sga-azul); margin-top: 2px; }
.sga-check small { display: block; color: var(--sga-texto-2); font-size: var(--sga-fs-xs); }
.sga-acoes-linha { display: flex; gap: var(--sga-3); align-items: center; flex-wrap: wrap; }

.sga-tabela { width: 100%; border-collapse: collapse; font-size: var(--sga-fs-sm); }
.sga-tabela th { text-align: left; font-size: var(--sga-fs-xs); text-transform: uppercase; letter-spacing: .06em; color: var(--sga-texto-3); padding: var(--sga-2) var(--sga-3); border-bottom: 2px solid var(--sga-linha); }
.sga-tabela td { padding: var(--sga-3); border-bottom: 1px solid var(--sga-linha); vertical-align: middle; }
.sga-acoes { text-align: right; white-space: nowrap; }
.sga-selo { display: inline-block; padding: 2px 8px; font-size: var(--sga-fs-xs); font-weight: 700; background: var(--sga-superficie-2); color: var(--sga-texto-2); border: 1px solid var(--sga-linha); white-space: nowrap; }
.sga-selo--ok { background: var(--sga-sucesso-tinta); color: var(--sga-sucesso); border-color: transparent; }
.sga-selo--erro { background: var(--sga-perigo-tinta); color: var(--sga-perigo); border-color: transparent; }
.sga-selo--atencao { background: var(--sga-atencao-tinta); color: var(--sga-atencao); border-color: transparent; }

.sga-barra-salvar { position: sticky; bottom: 0; display: flex; justify-content: flex-end; gap: var(--sga-3); padding: var(--sga-3) 0; border-top: 1px solid var(--sga-linha); background-color: var(--sga-fundo); }
.sga-zona-perigo { display: flex; justify-content: flex-end; padding-top: var(--sga-4); border-top: 1px dashed var(--sga-linha-forte); }
.sga-form-painel { display: grid; gap: var(--sga-5); }
.sga-aviso ul { margin: var(--sga-1) 0 0; padding-left: 1.2em; }

/* Prévia do painel em 3 formatos (só cores e proporções) */
.sga-previa { --p-principal: #0b3c91; --p-destaque: #ffc20e; --p-fundo: #070d1c; --p-sup: #0e1830; --p-texto: #f3f6fc;
    display: flex; gap: var(--sga-4); align-items: flex-end; flex-wrap: wrap; padding: var(--sga-4); background: var(--sga-superficie-2); }
.sga-previa.previa--claro { --p-fundo: #e9edf4; --p-sup: #ffffff; --p-texto: #0c1322; }
.sga-previa figure { margin: 0; display: grid; gap: var(--sga-1); justify-items: center; }
.sga-previa figcaption { font-size: var(--sga-fs-xs); color: var(--sga-texto-3); font-weight: 600; }
.previa-tela { display: grid; gap: 3px; background: var(--p-fundo); padding-bottom: 0;
    grid-template-columns: 4fr 6fr; grid-template-rows: 14% 1.25fr 1fr 12%; grid-template-areas: "t t" "a v" "h v" "r r"; }
.sga-previa__tv .previa-tela { width: 240px; aspect-ratio: 16/9; }
.sga-previa__monitor .previa-tela { width: 180px; aspect-ratio: 4/3; grid-template-columns: 1fr 1fr; grid-template-rows: 14% 1.2fr .6fr 12%; grid-template-areas: "t t" "a v" "h h" "r r"; }
.sga-previa__tablet .previa-tela { width: 110px; aspect-ratio: 3/4; grid-template-columns: 1fr; grid-template-rows: 10% 1.1fr 1fr .9fr 8%; grid-template-areas: "t" "a" "h" "v" "r"; }
.previa--sem-video .previa-video { display: none; }
.previa--sem-video .previa-tela { grid-template-columns: 56fr 44fr; grid-template-rows: 14% 1fr 12%; grid-template-areas: "t t" "a h" "r r"; }
.sga-previa__tablet.sga-previa__tablet .previa--sem-video .previa-tela { grid-template-areas: "t" "a" "h" "r"; }
.previa-topo { grid-area: t; background: var(--p-principal); border-bottom: 2px solid var(--p-destaque); }
.previa-atual { grid-area: a; background: var(--p-sup); border-left: 3px solid var(--p-destaque); color: var(--p-texto); display: flex; flex-direction: column; justify-content: center; padding: 0 6px; overflow: hidden; }
.previa-atual b { font-size: 15px; line-height: 1; }
.previa-atual i { font-style: normal; font-size: 9px; font-weight: 700; color: var(--p-destaque); }
.previa--claro .previa-atual i { color: var(--p-principal); }
.previa-hist { grid-area: h; background: var(--p-sup); opacity: .75; }
.previa-video { grid-area: v; background: #000; }
.previa-rodape { grid-area: r; background: var(--p-sup); opacity: .6; }

/* Vozes do Hugging Face */
.vozes-achado { display: grid; gap: var(--sga-4); padding-top: var(--sga-4); border-top: 1px solid var(--sga-linha); }
.vozes-achado[hidden], .vozes-progresso[hidden], #erro[hidden], #aviso-licenca[hidden] { display: none; }
.vozes-achado__dados { display: flex; flex-wrap: wrap; gap: var(--sga-3) var(--sga-6); margin: 0; }
.vozes-achado__dados dt { font-size: var(--sga-fs-sm); color: var(--sga-texto-3); }
.vozes-achado__dados dd { margin: 0; font-weight: 700; }
.vozes-mono { font-family: ui-monospace, Menlo, Consolas, monospace; font-weight: 500 !important; }
.vozes-progresso { height: 8px; background: var(--sga-linha); }
.vozes-progresso span { display: block; height: 100%; width: 0; background: var(--sga-azul); transition: width .4s ease; }