/* =====================================================================
   Plim · base visual comum (site da loja e painéis)
   As cores NÃO ficam aqui: vêm do tema da loja (loja_aparencia + temas)
   e são aplicadas por /comum/js/tema.js nas variáveis abaixo.
   ===================================================================== */

/* ---------- Fontes (arquivos locais, sem depender de serviço externo) ---------- */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url('/comum/fontes/bricolage-grotesque-latin-wght-normal.woff2') format('woff2-variations');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url('/comum/fontes/bricolage-grotesque-latin-ext-wght-normal.woff2') format('woff2-variations');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Baloo 2';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url('/comum/fontes/baloo-2-latin-600-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Baloo 2';
  font-style: normal;
  font-display: swap;
  font-weight: 800;
  src: url('/comum/fontes/baloo-2-latin-800-normal.woff2') format('woff2');
}

/* ---------- Tokens (valores padrão; o tema da loja sobrescreve) ---------- */
:root {
  --fundo: #ffffff;
  --superficie: #f6f6f4;
  --texto: #141414;
  --texto-suave: #6b6b6b;
  --borda: #e7e7e3;
  --destaque: #f5a300;
  --sobre-destaque: #111111;   /* texto em cima do destaque (preto ou branco, pelo contraste) */
  --destaque-texto: #a86f00;   /* destaque legível como texto sobre o fundo */
  --destaque-suave: color-mix(in srgb, var(--destaque) 14%, var(--fundo));
  --raio: 16px;
  --raio-p: calc(var(--raio) * 0.6);
  --fonte-titulos: 'Bricolage Grotesque', system-ui, sans-serif;
  --fonte: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

  /* Significado fixo (iguais em toda loja) */
  --alerta: #e8590c;
  --alerta-suave: color-mix(in srgb, var(--alerta) 14%, var(--fundo));
  --perigo: #c92a2a;
  --perigo-suave: color-mix(in srgb, var(--perigo) 12%, var(--fundo));
  --ok: #2b8a3e;
  --ok-suave: color-mix(in srgb, var(--ok) 14%, var(--fundo));
  --atraso: #e8590c;           /* o tema troca se a cor da loja for parecida */
  --sobre-atraso: #ffffff;
  --atraso-texto: #c2410c;
  --atraso-suave: color-mix(in srgb, var(--atraso) 14%, var(--fundo));

  --sombra-folha: 0 -8px 40px rgb(0 0 0 / 0.18);
  --toque: 48px;               /* menor área de toque */
  color-scheme: light;
}
:root[data-modo='escuro'] {
  color-scheme: dark;
  --sombra-folha: 0 -8px 40px rgb(0 0 0 / 0.55);
}

/* ---------- Reset curto ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--fundo);
  color: var(--texto);
  font: 16px/1.45 var(--fonte);
  -webkit-font-smoothing: antialiased;
}
/* Textura do tema (imagem + opacidade), por baixo de tudo */
body[data-textura]::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  background-image: var(--textura);
  background-size: 256px;
  opacity: var(--textura-opacidade, 0);
  pointer-events: none;
}
img, svg { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3 { font-family: var(--fonte-titulos); line-height: 1.15; margin: 0; font-weight: 700; letter-spacing: -0.01em; }
p { margin: 0; }
a { color: var(--destaque-texto); }
[hidden] { display: none !important; }

.visualmente-oculto {
  position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Foco sempre visível (teclado) */
:focus-visible {
  outline: 3px solid var(--destaque-texto);
  outline-offset: 2px;
  border-radius: 6px;
}

.icone { width: 1.25em; height: 1.25em; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.num { font-variant-numeric: tabular-nums; }

/* ---------- Botões ---------- */
.botao {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5em;
  min-height: var(--toque); padding: 0 1.1em;
  border: 1.5px solid transparent; border-radius: 999px;
  background: var(--superficie); color: var(--texto);
  font-weight: 650; font-size: 1rem; text-decoration: none; cursor: pointer;
  transition: transform 0.08s ease, background-color 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}
.botao:active { transform: scale(0.97); }
.botao:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
.botao--principal { background: var(--destaque); color: var(--sobre-destaque); }
.botao--contorno { background: transparent; border-color: var(--borda); }
.botao--perigo { background: var(--perigo); color: #fff; }
.botao--perigo-contorno { background: transparent; color: var(--perigo); border-color: currentColor; }
.botao--grande { min-height: 60px; font-size: 1.12rem; padding: 0 1.4em; }
.botao--largo { width: 100%; }
.botao--icone { width: var(--toque); padding: 0; flex: none; }
.botao--fantasma { background: transparent; }
.botao--fantasma:hover { background: var(--superficie); }

/* ---------- Campos ---------- */
.campo { display: grid; gap: 6px; }
.campo > span, .campo > legend { font-weight: 600; font-size: 0.95rem; }
.campo small { color: var(--texto-suave); font-size: 0.85rem; }
.entrada, select.entrada, textarea.entrada {
  width: 100%; min-height: var(--toque); padding: 10px 14px;
  border: 1.5px solid var(--borda); border-radius: var(--raio-p);
  background: var(--fundo); color: var(--texto); font-size: 1rem;
}
textarea.entrada { min-height: 96px; resize: vertical; }
.entrada:focus { border-color: var(--destaque-texto); outline: none; box-shadow: 0 0 0 3px var(--destaque-suave); }
.entrada[aria-invalid='true'] { border-color: var(--perigo); }
.erro-campo { color: var(--perigo); font-size: 0.88rem; font-weight: 600; }
.linha-campos { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); align-items: start; }

/* ---------- Interruptor grande (input checkbox role=switch) ---------- */
.interruptor { position: relative; display: inline-flex; align-items: center; gap: 12px; cursor: pointer; min-height: var(--toque); }
.interruptor input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.interruptor .trilho {
  width: 58px; height: 34px; flex: none; border-radius: 999px;
  background: var(--borda); position: relative; transition: background-color 0.15s ease;
}
.interruptor .trilho::after {
  content: ''; position: absolute; top: 3px; left: 3px; width: 28px; height: 28px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 3px rgb(0 0 0 / 0.3); transition: transform 0.15s ease;
}
.interruptor input:checked + .trilho { background: var(--ok); }
.interruptor input:checked + .trilho::after { transform: translateX(24px); }
.interruptor input:focus-visible + .trilho { outline: 3px solid var(--destaque-texto); outline-offset: 2px; }

/* ---------- Selos (pílulas) ---------- */
.selo {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 10px; border-radius: 999px; font-size: 0.82rem; font-weight: 700;
  background: var(--superficie); color: var(--texto); white-space: nowrap;
}
.selo--destaque { background: var(--destaque); color: var(--sobre-destaque); }
.selo--contorno { background: transparent; box-shadow: inset 0 0 0 1.5px var(--borda); color: var(--texto-suave); }
.selo--ok { background: var(--ok-suave); color: var(--ok); }
.selo--alerta { background: var(--alerta); color: #fff; }
.selo--perigo { background: var(--perigo); color: #fff; }

/* ---------- Folha (janela que sobe de baixo; no PC vira janela central) ---------- */
dialog.folha {
  margin: auto auto 0; width: 100%; max-width: 640px; max-height: 92dvh;
  padding: 0; border: 0; border-radius: calc(var(--raio) + 6px) calc(var(--raio) + 6px) 0 0;
  background: var(--fundo); color: var(--texto); box-shadow: var(--sombra-folha);
  overflow: hidden; display: none; flex-direction: column;
}
dialog.folha[open] { display: flex; animation: folha-sobe 0.22s ease-out; }
dialog.folha::backdrop { background: rgb(0 0 0 / 0.45); }
.folha__topo { display: flex; align-items: center; gap: 8px; padding: 14px 14px 10px 20px; border-bottom: 1px solid var(--borda); }
.folha__topo h2 { flex: 1; font-size: 1.3rem; }
.folha__corpo { padding: 16px 20px 20px; overflow-y: auto; overscroll-behavior: contain; }
.folha__rodape { padding: 12px 20px calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid var(--borda); display: flex; gap: 10px; flex-wrap: wrap; }
@keyframes folha-sobe { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (min-width: 760px) {
  dialog.folha { margin: auto; border-radius: calc(var(--raio) + 6px); max-height: 86dvh; }
}

/* ---------- Avisos (toast) e faixa de conexão ---------- */
.avisos { position: fixed; left: 50%; bottom: calc(88px + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 50; display: grid; gap: 8px; width: min(92vw, 420px); pointer-events: none; }
.aviso {
  background: var(--texto); color: var(--fundo); padding: 12px 16px; border-radius: 12px;
  font-weight: 600; box-shadow: 0 6px 24px rgb(0 0 0 / 0.25); pointer-events: auto;
  animation: folha-sobe 0.2s ease-out;
}
.aviso--erro { background: var(--perigo); color: #fff; }
.faixa-conexao {
  position: sticky; top: 0; z-index: 60; padding: 10px 16px; text-align: center;
  background: var(--alerta); color: #fff; font-weight: 700;
}

/* ---------- Carregando e vazio ---------- */
.esqueleto {
  border-radius: var(--raio); min-height: 120px;
  background: linear-gradient(90deg, var(--superficie) 25%, var(--borda) 50%, var(--superficie) 75%);
  background-size: 200% 100%; animation: brilho 1.3s linear infinite;
}
@keyframes brilho { to { background-position: -200% 0; } }
.vazio { display: grid; justify-items: center; gap: 10px; text-align: center; padding: 40px 20px; color: var(--texto-suave); }
.vazio .icone { width: 56px; height: 56px; stroke-width: 1.5; color: var(--destaque-texto); }
.vazio h3 { color: var(--texto); font-size: 1.2rem; }
.vazio p { max-width: 34ch; }

/* ---------- Movimento reduzido ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}