/* ==========================================================================
   Portal Carneiros: sistema de design v1 ("Dossiê")
   Fonte única da verdade, servida em /static/design-system.css (rota em
   main.py). Cada tela faz <link rel="stylesheet"> antes do próprio <style>.

   Origem: logo-carneiros.png
     petróleo  #044C5C  (o "C" do logo)
     ardósia   #2B393E  (as asas)
     ouro      #C6A166  (o bico)

   Princípios
   1. Petróleo é a cor de trabalho (ação primária, navegação, títulos).
   2. Ouro é a assinatura: um traço curto que marca "você está aqui"
      (aba ativa, título da página). Nunca em texto corrido, nunca em botão.
   3. Papel frio e clínico, não creme. Superfícies brancas sobre papel.
   4. Raios com hierarquia: campo 6px, cartão 10px, selo em pílula.
   5. Sem fonte externa: a CSP do app (font-src 'self' data:) bloqueia
      Google Fonts. Títulos em Bahnschrift (DIN, nativa do Windows 10+),
      com equivalentes no macOS/Linux; texto em Segoe UI / system-ui.
   ========================================================================== */

:root {
    /* Cor: marca */
    --cor-petroleo-950: #02262E;
    --cor-petroleo-900: #033A46;
    --cor-petroleo-700: #044C5C;
    --cor-petroleo-600: #0B6070;
    --cor-petroleo-500: #2A7A89;
    --cor-petroleo-200: #BFD7DC;
    --cor-petroleo-100: #DFECEF;
    --cor-petroleo-50:  #EFF5F6;

    --cor-ardosia:      #2B393E;
    --cor-ouro:         #C6A166;
    --cor-ouro-escuro:  #85642B;   /* ouro legível sobre branco (AA) */
    --cor-ouro-claro:   #F6EFE2;

    /* Cor: neutros */
    --cor-papel:        #F1F4F5;
    --cor-superficie:   #FFFFFF;
    --cor-superficie-2: #F7F9FA;
    --cor-linha:        #D6DEE1;
    --cor-linha-forte:  #A9B9BE;
    --cor-texto:        #1F2B2F;
    --cor-texto-suave:  #52646A;   /* 5.9:1 sobre branco */
    --cor-texto-fraco:  #6E7F85;   /* 4.5:1 sobre branco, só texto auxiliar */
    --cor-sobre-escuro: #FFFFFF;

    /* Cor: estados */
    --cor-sucesso:        #1C6B4A;
    --cor-sucesso-fundo:  #E4F2EB;
    --cor-sucesso-linha:  #A8D3BE;
    --cor-alerta:         #885400;
    --cor-alerta-fundo:   #FCF1DB;
    --cor-alerta-linha:   #EBCB8C;
    --cor-erro:           #A3261D;
    --cor-erro-fundo:     #FBEBE9;
    --cor-erro-linha:     #EDB5AF;
    --cor-info:           var(--cor-petroleo-700);
    --cor-info-fundo:     var(--cor-petroleo-50);
    --cor-info-linha:     var(--cor-petroleo-200);
    --cor-neutro-fundo:   #EDF0F1;
    --cor-desabilitado:   #E6EAEB;
    --cor-desabilitado-texto: #7D8B90;
    --cor-foco:           #2A7A89;

    /* Tipografia */
    --fonte-titulo: "Bahnschrift", "DIN Alternate", "DIN Next", "Avenir Next", "Segoe UI", system-ui, sans-serif;
    --fonte-texto: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;

    /* escala tradicional (Bringhurst): 12 14 16 18 21 24 30 36 48 */
    --texto-xs: 0.75rem;
    --texto-sm: 0.875rem;
    --texto-md: 1rem;
    --texto-lg: 1.125rem;
    --texto-xl: 1.3125rem;
    --texto-2xl: 1.5rem;
    --texto-3xl: 1.875rem;
    --texto-4xl: 2.25rem;
    --texto-5xl: 3rem;

    --peso-normal: 400;
    --peso-medio: 600;
    --peso-forte: 700;
    --altura-linha: 1.55;
    --altura-linha-titulo: 1.2;

    /* Espaçamento (base 4px) */
    --esp-1: 4px;
    --esp-2: 8px;
    --esp-3: 12px;
    --esp-4: 16px;
    --esp-5: 20px;
    --esp-6: 24px;
    --esp-8: 32px;
    --esp-10: 40px;
    --esp-12: 48px;
    --esp-16: 64px;

    /* Raios (com hierarquia) */
    --raio-campo: 6px;
    --raio-cartao: 10px;
    --raio-modal: 14px;
    --raio-pilula: 999px;

    /* Sombras tingidas de petróleo */
    --sombra-1: 0 1px 2px rgba(4, 76, 92, 0.08);
    --sombra-2: 0 1px 2px rgba(4, 76, 92, 0.06), 0 10px 24px -14px rgba(4, 76, 92, 0.35);
    --sombra-3: 0 2px 6px rgba(4, 76, 92, 0.08), 0 28px 60px -24px rgba(2, 38, 46, 0.45);

    /* Movimento */
    --duracao: 160ms;
    --curva: cubic-bezier(0.2, 0.7, 0.2, 1);

    /* Assinatura: o traço de ouro */
    --traco-ouro: 3px;
}

@media (prefers-reduced-motion: reduce) {
    :root { --duracao: 0ms; }
}

/* ---------- Base ---------- */

.ds-base {
    font-family: var(--fonte-texto);
    font-size: var(--texto-md);
    line-height: var(--altura-linha);
    color: var(--cor-texto);
    background: var(--cor-papel);
    -webkit-font-smoothing: antialiased;
}

.ds-titulo {
    font-family: var(--fonte-titulo);
    font-weight: var(--peso-medio);
    line-height: var(--altura-linha-titulo);
    color: var(--cor-petroleo-900);
    letter-spacing: -0.01em;
    margin: 0;
}

/* título de página com o traço de ouro à esquerda */
.ds-titulo-pagina {
    position: relative;
    padding-left: var(--esp-4);
    font-size: var(--texto-2xl);
}
.ds-titulo-pagina::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.2em;
    bottom: 0.2em;
    width: var(--traco-ouro);
    border-radius: 2px;
    background: var(--cor-ouro);
}

.ds-texto-suave { color: var(--cor-texto-suave); }
.ds-numero { font-family: var(--fonte-titulo); font-variant-numeric: tabular-nums; }

:where(a) { color: var(--cor-petroleo-600); text-underline-offset: 3px; }
:where(a):hover { color: var(--cor-petroleo-900); }

/* foco visível em tudo que é interativo */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
    outline: 3px solid var(--cor-foco);
    outline-offset: 2px;
}

/* ---------- Botões ---------- */

.ds-botao {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--esp-2);
    min-height: 44px;
    padding: 10px 20px;
    border: 1px solid transparent;
    border-radius: var(--raio-campo);
    font-family: var(--fonte-titulo);
    font-size: var(--texto-md);
    font-weight: var(--peso-medio);
    letter-spacing: 0.01em;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    transition: background-color var(--duracao) var(--curva),
                border-color var(--duracao) var(--curva),
                color var(--duracao) var(--curva);
}

.ds-botao-primario {
    background: var(--cor-petroleo-700);
    color: var(--cor-sobre-escuro);
}
.ds-botao-primario:hover { background: var(--cor-petroleo-900); }
.ds-botao-primario:active { background: var(--cor-petroleo-950); }

.ds-botao-secundario {
    background: var(--cor-superficie);
    border-color: var(--cor-linha-forte);
    color: var(--cor-petroleo-700);
}
.ds-botao-secundario:hover { border-color: var(--cor-petroleo-700); background: var(--cor-petroleo-50); }

.ds-botao-sutil {
    background: transparent;
    color: var(--cor-petroleo-700);
}
.ds-botao-sutil:hover { background: var(--cor-petroleo-50); }

.ds-botao-perigo {
    background: var(--cor-erro);
    color: var(--cor-sobre-escuro);
}
.ds-botao-perigo:hover { background: #821C15; }

.ds-botao:disabled,
.ds-botao[aria-disabled="true"] {
    background: var(--cor-desabilitado);
    border-color: transparent;
    color: var(--cor-desabilitado-texto);
    cursor: not-allowed;
}
.ds-botao[aria-busy="true"] { cursor: progress; }

.ds-botao-bloco { width: 100%; }
.ds-botao-pequeno { min-height: 34px; padding: 6px 12px; font-size: var(--texto-sm); }

/* ---------- Campos ---------- */

.ds-campo { display: grid; gap: 6px; margin-bottom: var(--esp-5); }

.ds-rotulo {
    font-size: var(--texto-sm);
    font-weight: var(--peso-medio);
    color: var(--cor-ardosia);
}

.ds-entrada {
    width: 100%;
    min-height: 44px;
    padding: 10px 12px;
    border: 1px solid var(--cor-linha-forte);
    border-radius: var(--raio-campo);
    background: var(--cor-superficie);
    color: var(--cor-texto);
    font: inherit;
    font-size: var(--texto-md); /* 16px evita zoom no iOS */
    transition: border-color var(--duracao) var(--curva), box-shadow var(--duracao) var(--curva);
}
.ds-entrada::placeholder { color: var(--cor-texto-fraco); }
.ds-entrada:hover { border-color: var(--cor-petroleo-500); }
.ds-entrada:focus,
.ds-entrada:focus-visible {
    outline: 3px solid var(--cor-foco);
    outline-offset: 1px;
    border-color: var(--cor-petroleo-700);
}
.ds-entrada[aria-invalid="true"],
.ds-entrada.ds-invalida {
    border-color: var(--cor-erro);
    box-shadow: 0 0 0 3px var(--cor-erro-fundo);
}
.ds-entrada:disabled {
    background: var(--cor-desabilitado);
    color: var(--cor-desabilitado-texto);
    cursor: not-allowed;
}
textarea.ds-entrada { min-height: 96px; resize: vertical; }
select.ds-entrada { padding-right: 32px; }

.ds-ajuda { font-size: var(--texto-sm); color: var(--cor-texto-suave); }
.ds-erro-campo { font-size: var(--texto-sm); color: var(--cor-erro); font-weight: var(--peso-medio); }

/* ---------- Cartões ---------- */

.ds-cartao {
    background: var(--cor-superficie);
    border: 1px solid var(--cor-linha);
    border-radius: var(--raio-cartao);
    padding: var(--esp-6);
    box-shadow: var(--sombra-1);
}
.ds-cartao-elevado { box-shadow: var(--sombra-2); border-color: transparent; }

/* ---------- Tabelas ---------- */

.ds-tabela-envoltorio {
    overflow-x: auto;
    border: 1px solid var(--cor-linha);
    border-radius: var(--raio-cartao);
    background: var(--cor-superficie);
}
.ds-tabela { width: 100%; border-collapse: collapse; font-size: var(--texto-sm); }
.ds-tabela th {
    position: sticky;
    top: 0;
    padding: 10px 14px;
    background: var(--cor-superficie-2);
    border-bottom: 1px solid var(--cor-linha-forte);
    color: var(--cor-texto-suave);
    font-weight: var(--peso-medio);
    text-align: left;
    white-space: nowrap;
}
.ds-tabela td {
    padding: 12px 14px;
    border-bottom: 1px solid var(--cor-linha);
    vertical-align: top;
}
.ds-tabela tr:last-child td { border-bottom: 0; }
.ds-tabela tbody tr:hover { background: var(--cor-petroleo-50); }
.ds-tabela .ds-numero, .ds-tabela td.numero { text-align: right; }

/* ---------- Abas ---------- */

.ds-abas {
    display: flex;
    gap: var(--esp-1);
    border-bottom: 1px solid var(--cor-linha);
    overflow-x: auto;
    overflow-y: hidden; /* o traço da aba ativa não pode gerar rolagem vertical */
    scrollbar-width: thin;
}
.ds-aba {
    position: relative;
    padding: 12px 16px;
    border: 0;
    background: transparent;
    color: var(--cor-texto-suave);
    font-family: var(--fonte-titulo);
    font-size: var(--texto-md);
    font-weight: var(--peso-medio);
    white-space: nowrap;
    cursor: pointer;
}
.ds-aba:hover { color: var(--cor-petroleo-700); }
.ds-aba[aria-selected="true"],
.ds-aba.ativa,
.ds-aba.ativo { color: var(--cor-petroleo-900); }
.ds-aba[aria-selected="true"]::after,
.ds-aba.ativa::after,
.ds-aba.ativo::after {
    content: "";
    position: absolute;
    left: 16px;
    right: 16px;
    bottom: 0;
    height: var(--traco-ouro);
    border-radius: 2px 2px 0 0;
    background: var(--cor-ouro);
}

/* ---------- Modais ---------- */

.ds-modal-fundo {
    position: fixed;
    inset: 0;
    display: grid;
    place-items: center;
    padding: var(--esp-4);
    background: rgba(2, 38, 46, 0.55);
    z-index: 1000;
}
.ds-modal {
    width: min(640px, 100%);
    max-height: calc(100vh - 32px);
    overflow: auto;
    background: var(--cor-superficie);
    border-radius: var(--raio-modal);
    box-shadow: var(--sombra-3);
}
.ds-modal-cabecalho {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--esp-4);
    padding: var(--esp-5) var(--esp-6);
    border-bottom: 1px solid var(--cor-linha);
}
.ds-modal-corpo { padding: var(--esp-6); }
.ds-modal-rodape {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: var(--esp-3);
    padding: var(--esp-4) var(--esp-6);
    border-top: 1px solid var(--cor-linha);
    background: var(--cor-superficie-2);
    border-radius: 0 0 var(--raio-modal) var(--raio-modal);
}

/* ---------- Selos de status ---------- */

.ds-selo {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border: 1px solid transparent;
    border-radius: var(--raio-pilula);
    font-size: var(--texto-xs);
    font-weight: var(--peso-medio);
    line-height: 1.5;
    white-space: nowrap;
}
.ds-selo::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}
.ds-selo-neutro  { background: var(--cor-neutro-fundo);  color: var(--cor-texto-suave); border-color: var(--cor-linha); }
.ds-selo-info    { background: var(--cor-info-fundo);    color: var(--cor-info);    border-color: var(--cor-info-linha); }
.ds-selo-sucesso { background: var(--cor-sucesso-fundo); color: var(--cor-sucesso); border-color: var(--cor-sucesso-linha); }
.ds-selo-alerta  { background: var(--cor-alerta-fundo);  color: var(--cor-alerta);  border-color: var(--cor-alerta-linha); }
.ds-selo-erro    { background: var(--cor-erro-fundo);    color: var(--cor-erro);    border-color: var(--cor-erro-linha); }

/* ---------- Alertas ---------- */

.ds-alerta {
    display: block;
    padding: 12px 14px 12px 16px;
    border: 1px solid;
    border-left-width: 4px;
    border-radius: var(--raio-campo);
    font-size: var(--texto-sm);
    line-height: 1.5;
}
.ds-alerta-info    { background: var(--cor-info-fundo);    border-color: var(--cor-info-linha);    border-left-color: var(--cor-info);    color: var(--cor-petroleo-900); }
.ds-alerta-sucesso { background: var(--cor-sucesso-fundo); border-color: var(--cor-sucesso-linha); border-left-color: var(--cor-sucesso); color: var(--cor-sucesso); }
.ds-alerta-alerta  { background: var(--cor-alerta-fundo);  border-color: var(--cor-alerta-linha);  border-left-color: var(--cor-alerta);  color: var(--cor-alerta); }
.ds-alerta-erro    { background: var(--cor-erro-fundo);    border-color: var(--cor-erro-linha);    border-left-color: var(--cor-erro);    color: var(--cor-erro); }