/* =========================================================================
   TEMA "Arpoador · Mesa de Operação" — a fonte única de cores, fonte e
   medidas do sistema todo (Oficina, app das lojas e login).

   Regras do tema
   - Neutros frios, cor de granito: a tela é uma mesa de trabalho, não vitrine.
   - Uma cor de AÇÃO só (azul-oceano). Botão principal, link, aba ativa, foco.
   - Verde / âmbar / vermelho são SITUAÇÃO (feito / falta / problema) e nada mais.
   - Roxo é o ROBÔ (tudo que manda o robô mexer no sistema).
   - Marca (Boticário, Eudora, QDB) aparece só como etiqueta com o nome escrito.
   - Números em tabela: algarismos de largura fixa (tabular-nums).

   Os nomes antigos (--azul, --tinta, --iaf-*...) continuam valendo como
   apelidos dos novos — assim as telas antigas já seguem o tema e o modo escuro.
   ========================================================================= */

@font-face { font-family: "Plex Sans"; src: url("fontes/plex-sans-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Plex Sans"; src: url("fontes/plex-sans-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Plex Sans"; src: url("fontes/plex-sans-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Plex Sans"; src: url("fontes/plex-sans-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Plex Mono"; src: url("fontes/plex-mono-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Plex Mono"; src: url("fontes/plex-mono-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }

:root {
  color-scheme: light;

  /* ---- superfícies e texto ---- */
  --cor-fundo: #f1f3f5;          /* granito claro: o fundo da mesa */
  --cor-superficie: #ffffff;     /* cartões, tabelas, janelas */
  --cor-superficie-2: #f7f8fa;   /* cabeçalho de tabela, faixa de filtros */
  --cor-superficie-3: #eceff3;   /* hover, trilho de abas */
  --cor-borda: #dce1e7;
  --cor-borda-forte: #c3cbd4;
  --cor-texto: #16202a;
  --cor-texto-2: #4f5d6b;        /* secundário */
  --cor-texto-3: #6f7c89;        /* legenda, rótulo (passa AA no branco) */

  /* ---- ação ---- */
  --cor-acao: #0b5c8e;           /* azul-oceano */
  --cor-acao-hover: #084a73;
  --cor-acao-suave: #e2eef6;
  --cor-acao-texto: #ffffff;
  --cor-foco: #2f8fd0;

  /* ---- situação ---- */
  --cor-ok: #1b7a4b;        --cor-ok-suave: #e1f2e8;
  --cor-atencao: #9a5b06;   --cor-atencao-suave: #fbefd9;
  --cor-erro: #b3261e;      --cor-erro-suave: #fbe6e4;
  --cor-neutro: #5f6b78;    --cor-neutro-suave: #eceff3;

  /* ---- robô ---- */
  --cor-robo: #5b3fa8;      --cor-robo-hover: #4a3290;   --cor-robo-suave: #ece7f8;

  /* ---- marcas ---- */
  --marca-boticario: #00754a;  --marca-boticario-suave: #e0f1e9;
  --marca-eudora: #6a2c8e;     --marca-eudora-suave: #efe5f5;
  --marca-qdb: #c4006b;        --marca-qdb-suave: #fbe3ef;
  --marca-vd: #6d4fd1;         --marca-vd-suave: #ece8fc;

  /* ---- tipografia ---- */
  --fonte: "Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --fonte-mono: "Plex Mono", "Cascadia Mono", Consolas, monospace;
  --t-xs: .75rem;    /* 12 */
  --t-s: .8125rem;   /* 13 */
  --t-m: .875rem;    /* 14  texto da Oficina */
  --t-l: 1rem;       /* 16  texto do app */
  --t-xl: 1.25rem;   /* 20  título de seção */
  --t-xxl: 1.625rem; /* 26  título de tela */
  --t-num: 1.75rem;  /* 28  número de indicador */

  /* ---- medidas ---- */
  --raio-p: 6px;     /* selo, campo pequeno */
  --raio-m: 10px;    /* botão, campo */
  --raio-g: 14px;    /* cartão, janela */
  --esp-1: 4px; --esp-2: 8px; --esp-3: 12px; --esp-4: 16px; --esp-5: 24px; --esp-6: 32px;
  --toque: 44px;     /* altura mínima de algo que se toca */
  --largura: 1240px;
  --sombra-1: 0 1px 2px rgba(22, 32, 42, .06);
  --sombra-2: 0 2px 6px rgba(22, 32, 42, .06), 0 10px 28px rgba(22, 32, 42, .08);
  --sombra-3: 0 18px 50px rgba(22, 32, 42, .22);

  /* ---- apelidos dos nomes antigos (style.css / oficina.css / embalagens.css) ---- */
  --azul: var(--cor-acao);
  --azul-escuro: var(--cor-acao-hover);
  --navy: var(--cor-texto);
  --texto: var(--cor-texto);
  --texto-suave: var(--cor-texto-2);
  --borda: var(--cor-borda);
  --fundo: var(--cor-fundo);
  --branco: var(--cor-superficie);
  --verde: var(--cor-ok);
  --verde-fundo: var(--cor-ok-suave);
  --vermelho: var(--cor-erro);
  --vermelho-fundo: var(--cor-erro-suave);
  --roxo: var(--cor-robo);
  --sombra: var(--sombra-1);
  /* (loja.css) */
  --cartao: var(--cor-superficie);
  --tinta: var(--cor-texto);
  --suave: var(--cor-texto-2);
  --linha: var(--cor-borda);
  --azul-esc: var(--cor-acao-hover);
  --azul-claro: var(--cor-acao-suave);
  --verde-claro: var(--cor-ok-suave);
  --amarelo: var(--cor-atencao);
  --amarelo-claro: var(--cor-atencao-suave);
  --vermelho-claro: var(--cor-erro-suave);
  --raio: var(--raio-g);
  /* (iaf.css) */
  --iaf-azul: var(--cor-acao);
  --iaf-azul-claro: var(--cor-acao-suave);
  --iaf-tinta: var(--cor-texto);
  --iaf-apagado: var(--cor-texto-3);
  --iaf-linha: var(--cor-borda);
  --iaf-fundo: var(--cor-fundo);
  --iaf-sobe: var(--cor-ok);
  --iaf-desce: var(--cor-erro);
  --iaf-aviso: var(--cor-atencao);
}

/* ---- modo escuro: o mesmo tema à noite (nada de preto puro) ---- */
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    color-scheme: dark;
    --cor-fundo: #0f151b;
    --cor-superficie: #161e26;
    --cor-superficie-2: #1b252f;
    --cor-superficie-3: #232f3b;
    --cor-borda: #2a3643;
    --cor-borda-forte: #3a4857;
    --cor-texto: #e4e9ee;
    --cor-texto-2: #a9b5c1;
    --cor-texto-3: #8693a0;
    --cor-acao: #4aa3dc;
    --cor-acao-hover: #6ab5e6;
    --cor-acao-suave: #13314a;
    --cor-acao-texto: #06131d;
    --cor-foco: #6ab5e6;
    --cor-ok: #4cc28a;        --cor-ok-suave: #12301f;
    --cor-atencao: #e2a548;   --cor-atencao-suave: #36270f;
    --cor-erro: #f07a70;      --cor-erro-suave: #3a1714;
    --cor-neutro: #9aa6b2;    --cor-neutro-suave: #232f3b;
    --cor-robo: #a28ce8;      --cor-robo-hover: #b6a4ef;   --cor-robo-suave: #261e40;
    --marca-boticario: #4cc28a;  --marca-boticario-suave: #12301f;
    --marca-eudora: #c79be2;     --marca-eudora-suave: #2c1a38;
    --marca-qdb: #f37bb6;        --marca-qdb-suave: #3a1328;
    --marca-vd: #b3a3f5;         --marca-vd-suave: #251d45;
    --sombra-1: 0 1px 2px rgba(0, 0, 0, .35);
    --sombra-2: 0 2px 8px rgba(0, 0, 0, .35), 0 12px 30px rgba(0, 0, 0, .3);
    --sombra-3: 0 20px 60px rgba(0, 0, 0, .55);
  }
}
:root[data-tema="escuro"] {
  color-scheme: dark;
  --cor-fundo: #0f151b;
  --cor-superficie: #161e26;
  --cor-superficie-2: #1b252f;
  --cor-superficie-3: #232f3b;
  --cor-borda: #2a3643;
  --cor-borda-forte: #3a4857;
  --cor-texto: #e4e9ee;
  --cor-texto-2: #a9b5c1;
  --cor-texto-3: #8693a0;
  --cor-acao: #4aa3dc;
  --cor-acao-hover: #6ab5e6;
  --cor-acao-suave: #13314a;
  --cor-acao-texto: #06131d;
  --cor-foco: #6ab5e6;
  --cor-ok: #4cc28a;        --cor-ok-suave: #12301f;
  --cor-atencao: #e2a548;   --cor-atencao-suave: #36270f;
  --cor-erro: #f07a70;      --cor-erro-suave: #3a1714;
  --cor-neutro: #9aa6b2;    --cor-neutro-suave: #232f3b;
  --cor-robo: #a28ce8;      --cor-robo-hover: #b6a4ef;   --cor-robo-suave: #261e40;
  --marca-boticario: #4cc28a;  --marca-boticario-suave: #12301f;
  --marca-eudora: #c79be2;     --marca-eudora-suave: #2c1a38;
  --marca-qdb: #f37bb6;        --marca-qdb-suave: #3a1328;
  --marca-vd: #b3a3f5;         --marca-vd-suave: #251d45;
  --sombra-1: 0 1px 2px rgba(0, 0, 0, .35);
  --sombra-2: 0 2px 8px rgba(0, 0, 0, .35), 0 12px 30px rgba(0, 0, 0, .3);
  --sombra-3: 0 20px 60px rgba(0, 0, 0, .55);
}

/* ---- o básico que vale em toda tela ---- */
html { -webkit-text-size-adjust: 100%; }
/* rede de segurança (v1.01): nada empurra a página pro lado — a página só rola pra baixo.
   "clip" (e não "hidden") pra não quebrar o topo grudado (position: sticky). Tabelas largas
   continuam rolando dentro da caixa delas. */
html, body { overflow-x: clip; }
/* "app" no celular (v1.01, pedido do usuário): sem zoom.
   - dois toques rápidos não dão zoom (touch-action);
   - o iPhone dá zoom sozinho ao tocar num campo com letra menor que 16px: no toque, campo é 16px;
   - o viewport (maximum-scale=1, nos _base) segura o resto. */
html { touch-action: manipulation; }
@media (pointer: coarse) {
  input:not([type=checkbox]):not([type=radio]):not([type=range]), select, textarea { font-size: 16px !important; }
}
body {
  background: var(--cor-fundo);
  color: var(--cor-texto);
  font-family: var(--fonte);
  font-feature-settings: "tnum" 0;
}
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--cor-foco); outline-offset: 2px; }
table, .num, .numero, .tabular { font-variant-numeric: tabular-nums; }
code, kbd, .mono { font-family: var(--fonte-mono); }
::selection { background: var(--cor-acao-suave); }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* ---- chave liga/desliga (estilo iPhone, v1.01): <label class="chave"><input type="checkbox"><span class="chave-trilho"></span></label> ---- */
.chave { position: relative; display: inline-flex; align-items: center; gap: 10px; cursor: pointer; flex: none; user-select: none; }
.chave input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.chave-trilho { position: relative; width: 51px; height: 31px; border-radius: 999px; background: var(--cor-borda-forte);
  transition: background-color .25s ease; flex: none; }
.chave-trilho::after { content: ""; position: absolute; top: 2px; left: 2px; width: 27px; height: 27px; border-radius: 50%;
  background: #fff; box-shadow: 0 2px 4px rgba(0, 0, 0, .25), 0 0 1px rgba(0, 0, 0, .2);
  transition: transform .25s cubic-bezier(.3, 1.4, .6, 1), width .15s ease; }
.chave:active .chave-trilho::after { width: 31px; }
.chave input:checked + .chave-trilho { background: #34c759; }
.chave input:checked + .chave-trilho::after { transform: translateX(20px); }
.chave:active input:checked + .chave-trilho::after { transform: translateX(16px); }
.chave input:focus-visible + .chave-trilho { outline: 2px solid var(--cor-foco); outline-offset: 2px; }
.chave input:disabled + .chave-trilho { opacity: .5; cursor: not-allowed; }
.chave-texto { font-weight: 600; font-size: .9rem; min-width: 58px; }
@media (prefers-reduced-motion: reduce) { .chave-trilho, .chave-trilho::after { transition: none; } }

/* v1.02: o campo de arquivo ("Escolher arquivo") nunca passa da caixa no celular */
input[type="file"] { max-width: 100%; }