/* =============================================================================
   base.css - Fundacao visual compartilhada por todas as paginas do Dashboard.

   Carregado por _partials/head.html, DENTRO do <head> e ANTES do <style> de
   cada pagina. A ordem importa e nao e' acidental: a pagina carrega depois,
   entao qualquer regra propria dela sobrescreve esta base sem !important.
   Foi assim que a deduplicacao pode ser feita sem mudar o visual de ninguem -
   as paginas que divergiam mantiveram so' o delta no proprio <style>.

   Antes desta extracao existiam:
     - 3 copias identicas do bloco :root (cadastro, configuracoes, header)
     - 2 copias identicas de [data-theme="dark"] (configuracoes, header)
     - 11 copias do reset *
     - login.html com um :root PARCIAL (9 das 19 variaveis) e sem tema escuro
       nenhum - a divergencia que provava que o padrao ja tinha vazado.

   Nao ha nada de especifico de pagina aqui. Componente (.panel/.tag/.modal/
   .toast) mora em componentes.css, que simulacao_risco_pert.html
   deliberadamente NAO carrega - ver o cabecalho daquele arquivo.
   ============================================================================= */

/* O reset NAO define font-family: simulacao_risco_pert.html usa 'Inter' no
   body e, num seletor universal, a fonte venceria a do body (o * casa cada
   elemento diretamente, e heranca perde de regra direta). A fonte vai na
   lista explicita abaixo, que cobre o motivo real de estar no *: controle de
   formulario nao herda fonte do body por padrao. */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body,
input,
select,
textarea,
button {
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}

:root {
    --page: #edf2f7;
    --surface: #ffffff;
    --surface-soft: #f7fafc;
    --ink: #1f2933;
    --muted: #667685;
    --line: #d6e0ea;
    --line-strong: #b8c8d8;
    --navy: #1f3d5c;
    --blue: #2d6ea8;
    --blue-soft: #e5f0fa;
    --green: #2f7d59;
    --green-soft: #e5f4ec;
    --amber: #9f6515;
    --amber-soft: #fff3dc;
    --red: #a43d2a;
    --red-soft: #fff0ec;
    --violet: #6652a3;
    --violet-soft: #eeeafd;
    --shadow: 0 10px 30px rgba(31, 61, 92, 0.08);
}

[data-theme="dark"] {
    --page: #0f1720;
    --surface: #16212c;
    --surface-soft: #1c2a37;
    --ink: #e6edf3;
    --muted: #93a3b3;
    --line: #28394a;
    --line-strong: #34495d;
    --navy: #bcd6ef;
    --blue: #4c8ac4;
    --blue-soft: rgba(76, 138, 196, 0.16);
    --green: #56c288;
    --green-soft: rgba(86, 194, 136, 0.16);
    --amber: #e0a940;
    --amber-soft: rgba(224, 169, 64, 0.16);
    --red: #e0665a;
    --red-soft: rgba(224, 102, 90, 0.16);
    --violet: #a595e0;
    --violet-soft: rgba(165, 149, 224, 0.16);
    --shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
}

body {
    min-height: 100vh;
    background: var(--page);
    color: var(--ink);
    transition: background 0.25s ease, color 0.25s ease;
}

/* -----------------------------------------------------------------------------
   Formulario
   -------------------------------------------------------------------------- */

label,
.field-label {
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.field {
    display: grid;
    gap: 6px;
}

input,
select,
textarea {
    width: 100%;
    min-height: 40px;
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: 9px 11px;
    color: var(--ink);
    background: var(--surface);
    outline: none;
    font-size: 14px;
}

textarea {
    resize: vertical;
}

input:focus,
select:focus,
textarea:focus {
    border-color: var(--blue);
    box-shadow: 0 0 0 3px rgba(45, 110, 168, 0.14);
}

/* -----------------------------------------------------------------------------
   Botao

   `button` cru so' recebe o que TODAS as paginas concordavam (cursor e fonte).
   O resto divergia de forma contraditoria - inspecoes/filas/ocorrencias
   pintam todo button de azul solido, cadastro pinta de surface-soft - e por
   isso continua no <style> de cada uma.
   -------------------------------------------------------------------------- */

button {
    cursor: pointer;
    font-family: inherit;
}

/* Azul FIXO (nao var(--blue)) de proposito: --blue e' pensado pra ser TEXTO/
   acento sobre --surface, entao no tema escuro ele clareia (#2d6ea8 claro ->
   #4c8ac4 escuro) pra continuar legivel como texto num fundo escuro - contra
   texto branco fixo isso cai pra ~3.66:1 de contraste (abaixo do 4.5:1 do
   AA). Mesmo motivo de .mes-toast-erro/.mes-alert-badge (chrome.css) usarem
   cor fixa: botao solido com texto branco sempre precisa da MESMA cor nos
   dois temas, nao da cor pensada pra texto. */
.btn-primary {
    min-height: 40px;
    border: none;
    border-radius: 6px;
    padding: 0 16px;
    background: #2d6ea8;
    color: #fff;
    font-size: 14px;
    font-weight: 800;
}

.btn-primary:hover {
    background: #245d90;
}

.btn-secondary {
    min-height: 40px;
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: 0 14px;
    background: var(--surface);
    color: var(--navy);
    font-size: 13px;
    font-weight: 800;
}

.btn-danger {
    /* borda tambem por var(--red) (nao fixa) - #f0c8bf e' um rosa claro
       pensado pra contrastar com --red-soft NO TEMA CLARO; no escuro
       --red-soft vira um vermelho translucido escuro e a borda clara
       destoava (anel claro em volta de preenchimento escuro). */
    border: 1px solid var(--red);
    border-radius: 6px;
    background: var(--red-soft);
    color: var(--red);
}

.btn-icon {
    width: 32px;
    min-height: 32px;
    height: 32px;
    display: inline-grid;
    place-items: center;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: var(--surface);
    color: var(--navy);
    font-size: 14px;
}

.btn-icon:disabled,
.btn-danger:disabled,
.btn-secondary:disabled,
.btn-primary:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* -----------------------------------------------------------------------------
   Tabela
   -------------------------------------------------------------------------- */

table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

th,
td {
    padding: 10px 12px;
    text-align: left;
    border-bottom: 1px solid var(--line);
}

th {
    color: var(--muted);
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    background: var(--surface-soft);
}

tbody tr:hover {
    background: var(--surface-soft);
}

/* -----------------------------------------------------------------------------
   Utilitario
   -------------------------------------------------------------------------- */

.hidden {
    display: none !important;
}

.mes-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* -----------------------------------------------------------------------------
   Estado de carregamento - par visual de MES.comCarregando (mes.js).

   Achado 2026-09-07: o design system nao tinha nenhum estado de "processando",
   so' de erro. Sem feedback, o operador de tablet clica de novo achando que
   nao registrou e a acao roda duas vezes.

   O spinner e' um ::after em vez de markup novo, pra funcionar em qualquer
   botao existente sem mexer no HTML das 38 paginas. Respeita
   prefers-reduced-motion (fica estatico em vez de girar).
   -------------------------------------------------------------------------- */

.btn-carregando {
    position: relative;
    cursor: progress;
    opacity: .85;
}

.btn-carregando::after {
    content: "";
    display: inline-block;
    width: 12px;
    height: 12px;
    margin-left: 8px;
    vertical-align: -2px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: mes-girando .7s linear infinite;
}

@keyframes mes-girando {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .btn-carregando::after {
        animation: none;
        border-right-color: currentColor;
        opacity: .5;
    }
}
