/* Fascínius · direção visual "Jardim" (escolhida em 12/10/2026)
   Base comum dos 4 sistemas internos (CRM, Lojas, Ecommerce, Controle de Peças).
   Arquivo-mestre: docs/jardim/jardim.css. Cada sistema tem uma CÓPIA IGUAL na sua pasta pública:
   crm/public, lojas/static, ecommerce/public, pecas/public. Carregar DEPOIS do fascinius-theme.css.
   Não usar nas páginas públicas que as clientes recebem (link do material): lá a cor vem da peça. */

:root {
  /* base: fundo rosado bem claro, cartões brancos, texto quente */
  --fs-canvas: #FBF5F2; --fs-paper: #FFFFFF; --fs-ink: #2B2522; --fs-muted: #6E625C;
  --fs-line: #EEDFD8; --fs-line-strong: #D9C4BA; --fs-soft: #F6ECE7; --fs-soft-hover: #F9EFEA;
  /* ação principal: verde-folha */
  --fs-action: #2F5D4E; --fs-action-hover: #244A3E; --fs-action-text: #FFFFFF;
  --fs-accent: #2F5D4E; --fs-accent-soft: #E6F0EC; --fs-focus: #2F5D4E; --fs-link: #2F5D4E;
  /* menu lateral / topo escuro: verde-escuro */
  --fs-dark: #24453A; --fs-dark-ink: #D6E5DE; --fs-dark-active: #33604F;
  /* saudação (cartão blush) */
  --fs-blush: #F9E3DC; --fs-blush-ink: #3B2620; --fs-blush-muted: #7A4A3E; --fs-blush-track: #F1CBBF;
  /* uma cor para cada tipo de coisa (sempre com o texto junto, nunca só a cor) */
  --fs-today: #6A4FA3;  --fs-today-bg: #EEEAF7;   /* para hoje: lavanda */
  --fs-late: #BF402C;   --fs-late-bg: #FBE4DE;    /* atrasada: coral */
  --fs-done: #2F7A55;   --fs-done-bg: #E6F3EB;    /* feita / deu certo: verde */
  --fs-next: #3C6585;   --fs-next-bg: #E4EDF5;    /* próximos dias / informação: azul */
  --fs-claim: #8A5A12;  --fs-claim-bg: #FBEFD8;   /* para assumir / atenção: mel */
  --fs-flag: #8A2F1F;   --fs-flag-bg: #FBE1DA;    /* prioridade alta */
  /* nomes antigos do tema apontam para as cores novas (o "danger" deixa de ser vinho) */
  --fs-success: var(--fs-done); --fs-success-bg: var(--fs-done-bg);
  --fs-warning: var(--fs-claim); --fs-warning-bg: var(--fs-claim-bg);
  --fs-danger: var(--fs-late); --fs-danger-bg: var(--fs-late-bg);
  --fs-info: var(--fs-next); --fs-info-bg: var(--fs-next-bg);
  /* pétalas das comemorações */
  --fs-petal-1: #F2A9A0; --fs-petal-2: #B7A3E0; --fs-petal-3: #8CC5A3; --fs-petal-4: #F6C27A;
  --fs-radius-sm: 8px; --fs-radius-md: 12px; --fs-radius-lg: 18px;
  --fs-shadow: 0 2px 10px rgb(120 70 50 / 9%);
  --fs-shadow-lg: 0 18px 48px rgb(80 40 30 / 16%);
}
body { background: var(--fs-canvas); color: var(--fs-ink); }
::selection { background: var(--fs-blush); color: var(--fs-blush-ink); }
a { color: var(--fs-link); text-underline-offset: 3px; }

/* ---------- selo de tipo de coisa ---------- */
.fj-pill { display: inline-flex; align-items: center; gap: 6px; min-height: 26px; padding: 3px 12px; border-radius: 999px; font: 700 13px/1.2 var(--fs-font-body); white-space: nowrap; background: var(--fs-soft); color: var(--fs-muted); }
.fj-pill[data-tone="today"] { background: var(--fs-today); color: #fff; }
.fj-pill[data-tone="late"]  { background: var(--fs-late);  color: #fff; }
.fj-pill[data-tone="done"]  { background: var(--fs-done);  color: #fff; }
.fj-pill[data-tone="next"]  { background: var(--fs-next-bg);  color: var(--fs-next); }
.fj-pill[data-tone="claim"] { background: var(--fs-claim-bg); color: var(--fs-claim); }
.fj-pill[data-tone="flag"]  { background: var(--fs-flag-bg);  color: var(--fs-flag); }
.fj-pill[data-tone="info"]  { background: var(--fs-next-bg);  color: var(--fs-next); }
.fj-pill[data-tone="warn"]  { background: var(--fs-claim-bg); color: var(--fs-claim); }
.fj-pill[data-tone="ok"]    { background: var(--fs-done-bg);  color: var(--fs-done); }
.fj-pill[data-tone="error"] { background: var(--fs-late-bg);  color: var(--fs-late); }

/* ---------- aviso dentro da tela (não some) ---------- */
.fj-note { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: var(--fs-radius-md); background: var(--fs-next-bg); color: var(--fs-ink); font-size: 15px; line-height: 1.45; }
.fj-note[data-tone="ok"] { background: var(--fs-done-bg); }
.fj-note[data-tone="warn"] { background: var(--fs-claim-bg); }
.fj-note[data-tone="error"] { background: var(--fs-late-bg); }
.fj-note b { font-weight: 700; }

/* ---------- saudação / cabeçalho caloroso ---------- */
.fj-hero { position: relative; overflow: hidden; border-radius: 22px; padding: 24px 26px; background: var(--fs-blush); color: var(--fs-blush-ink); box-shadow: var(--fs-shadow); }
.fj-hero > *:not(.fj-hero-art):not(.fj-burst) { position: relative; z-index: 1; }
.fj-hero h1 { margin: 0 0 6px; font: 700 28px/1.2 var(--fs-font-display); letter-spacing: -.02em; padding-right: 96px; }
.fj-hero p { margin: 0; color: var(--fs-blush-muted); font-size: 15px; line-height: 1.5; padding-right: 96px; }
.fj-hero p.fj-lead { color: var(--fs-blush-ink); font-size: 17px; margin-top: 10px; }
.fj-hero-art { position: absolute; right: -6px; top: -4px; width: 140px; height: 140px; pointer-events: none; }
.fj-bar { position: relative; height: 12px; margin-top: 18px; border-radius: 99px; background: var(--fs-blush-track); overflow: hidden; }
.fj-bar > span { position: absolute; inset: 0 auto 0 0; border-radius: 99px; background: var(--fs-action); transition: width .6s cubic-bezier(.2,.8,.2,1); }
.fj-bar-text { display: flex; justify-content: space-between; gap: 12px; margin-top: 8px; font-size: 14px; font-weight: 600; color: var(--fs-blush-muted); }
@media (max-width: 640px) { .fj-hero h1 { font-size: 25px; padding-right: 62px; } .fj-hero p { padding-right: 62px; } .fj-hero-art { width: 104px; height: 104px; } .fj-bar-text, .fj-hero p.fj-tip { padding-right: 0; } }

/* ---------- "?" de ajuda (jardim.js abre com um toque) ---------- */
.fj-help { display: inline-flex; align-items: center; justify-content: center; position: relative; width: 22px; height: 22px; margin: -4px 0 -4px 4px; padding: 0; border-radius: 50%; border: 1px solid var(--fs-line-strong); background: var(--fs-paper); color: var(--fs-muted); font: 700 13px/1 var(--fs-font-body); cursor: pointer; vertical-align: middle; flex: 0 0 auto; text-transform: none; letter-spacing: 0; }
.fj-help::after { content: ''; position: absolute; inset: -11px; }
.fj-help:hover, .fj-help[aria-expanded="true"] { border-color: var(--fs-action); color: var(--fs-action); }
.fj-help-pop { position: fixed; z-index: 1000; width: min(300px, calc(100vw - 24px)); padding: 12px 14px; border-radius: var(--fs-radius-md); background: var(--fs-dark); color: #fff; box-shadow: var(--fs-shadow-lg); font: 400 14px/1.45 var(--fs-font-body); }
.fj-help-pop strong { display: block; margin-bottom: 4px; font-size: 14px; }
.fj-help-pop p { margin: 0; color: #E8F0EC; }

/* ---------- comemoração ---------- */
.fj-burst { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 0; }
.fj-burst i { position: absolute; display: block; width: 12px; height: 16px; border-radius: 70% 0 70% 0; animation: fj-petal 1.8s cubic-bezier(.2,.7,.3,1) forwards; }
@keyframes fj-petal { from { transform: translateY(-18px) rotate(var(--r, 0deg)); opacity: 0; } 15% { opacity: 1; } to { transform: translateY(46px) rotate(calc(var(--r, 0deg) + 120deg)); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .fj-burst i { animation: fj-petal-calm 1.6s linear forwards; } }
@keyframes fj-petal-calm { 0%, 70% { opacity: 1; } to { opacity: 0; } }
.fj-toast { position: fixed; left: 50%; bottom: 24px; z-index: 1001; display: flex; align-items: center; gap: 12px; width: min(440px, calc(100vw - 32px)); padding: 14px 18px; border-radius: 18px; background: var(--fs-dark); color: #fff; box-shadow: 0 14px 40px rgb(0 0 0 / 22%); font: 400 15px/1.4 var(--fs-font-body); transform: translate(-50%, 16px); opacity: 0; transition: transform .25s cubic-bezier(.2,.8,.2,1), opacity .2s; }
.fj-toast.is-on { transform: translate(-50%, 0); opacity: 1; }
.fj-toast[data-tone="error"] { background: var(--fs-late); }
.fj-toast b { display: block; font-size: 16px; }
.fj-check { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--fs-done); color: #fff; flex: 0 0 auto; }
.fj-toast .fj-check { background: #fff; color: var(--fs-done); }
.fj-check svg { width: 16px; height: 16px; }

/* ---------- telas longas (regra de 12/10/2026) ----------
   Bloco que começa fechado, com setinha e resumo no título:
     <details class="fj-fold"><summary><span class="fj-fold-title">Coleções e preços</span>
       <span class="fj-fold-sum">32 coleções · 18 na Promoção</span></summary><div class="fj-fold-body">…</div></details>
   Cartão fechado com o essencial, que abre o detalhe ao tocar:
     <details class="fj-item"><summary>…essencial…</summary><div class="fj-item-body">…detalhe…</div></details>
   Barra de busca e ordem presa no alto: <div class="fj-sticky">…</div> (ajuste --fj-sticky-top se houver topo fixo)
   "Mostrar mais": Jardim.more(faltam, passo, 'peças') devolve o botão (o sistema trata o clique em [data-fj-more]).
   "Voltar ao topo": aparece sozinho (jardim.js) em toda tela ou painel que role bastante. */
.fj-fold { border: 1px solid var(--fs-line); border-radius: var(--fs-radius-lg); background: var(--fs-paper); box-shadow: var(--fs-shadow); }
.fj-fold + .fj-fold { margin-top: 14px; }
.fj-fold > summary { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 12px; min-height: 60px; padding: 14px 52px 14px 20px; position: relative; cursor: pointer; list-style: none; border-radius: var(--fs-radius-lg); }
.fj-fold > summary::-webkit-details-marker { display: none; }
.fj-fold > summary::after, .fj-item > summary::after { content: ''; position: absolute; right: 22px; top: 50%; width: 9px; height: 9px; border-right: 2px solid var(--fs-muted); border-bottom: 2px solid var(--fs-muted); transform: translateY(-70%) rotate(45deg); transition: transform .2s; }
.fj-fold[open] > summary::after, .fj-item[open] > summary::after { transform: translateY(-30%) rotate(-135deg); }
.fj-fold > summary:hover { background: var(--fs-soft-hover); }
.fj-fold > summary:focus-visible, .fj-item > summary:focus-visible { outline: 2px solid var(--fs-focus); outline-offset: 2px; }
.fj-fold[open] > summary { border-bottom: 1px solid var(--fs-line); border-radius: var(--fs-radius-lg) var(--fs-radius-lg) 0 0; }
.fj-fold-title { font: 700 18px/1.3 var(--fs-font-display); color: var(--fs-ink); margin: 0; }
.fj-fold-sum { font-size: 14px; color: var(--fs-muted); font-weight: 500; }
.fj-fold-body { padding: 18px 20px 20px; }
.fj-item { border: 1px solid var(--fs-line); border-radius: var(--fs-radius-md); background: var(--fs-paper); }
.fj-item + .fj-item { margin-top: 10px; }
.fj-item > summary { display: block; position: relative; min-height: 44px; padding: 12px 48px 12px 16px; cursor: pointer; list-style: none; border-radius: var(--fs-radius-md); }
.fj-item > summary::-webkit-details-marker { display: none; }
.fj-item > summary:hover { background: var(--fs-soft-hover); }
.fj-item[open] { border-color: var(--fs-line-strong); box-shadow: var(--fs-shadow); }
.fj-item-body { padding: 4px 16px 16px; border-top: 1px solid var(--fs-line); padding-top: 14px; }
.fj-sticky { position: sticky; top: var(--fj-sticky-top, 0px); z-index: 15; background: var(--fs-canvas); padding: 10px 0; box-shadow: 0 8px 12px -12px rgb(80 40 30 / 25%); }
.fj-more { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 48px; margin-top: 14px; padding: 10px 16px; border: 1px dashed var(--fs-line-strong); border-radius: var(--fs-radius-md); background: var(--fs-paper); color: var(--fs-action); font: 700 15px/1.3 var(--fs-font-body); cursor: pointer; }
.fj-more:hover { background: var(--fs-soft-hover); border-style: solid; }
.fj-more small { color: var(--fs-muted); font-weight: 500; font-size: 14px; }
.fj-top { position: fixed; right: 16px; bottom: 20px; z-index: 900; display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 18px 0 14px; border: 0; border-radius: 999px; background: var(--fs-dark); color: #fff; box-shadow: var(--fs-shadow-lg); font: 700 14px/1 var(--fs-font-body); cursor: pointer; opacity: 0; transform: translateY(12px); pointer-events: none; transition: opacity .2s, transform .2s; }
.fj-top.is-on { opacity: 1; transform: none; pointer-events: auto; }
.fj-top svg { width: 18px; height: 18px; }
.fj-top:focus-visible { outline: 3px solid var(--fs-blush-track); outline-offset: 2px; }
@media (max-width: 640px) { .fj-top { right: 12px; bottom: 16px; padding: 0 16px 0 12px; } .fj-fold > summary { padding-left: 16px; } .fj-fold-body { padding: 14px 16px 16px; } }
@media print { .fj-top { display: none; } }

/* ---------- vazio que orienta ---------- */
.fj-empty { padding: 28px 20px; text-align: center; border: 1px dashed var(--fs-line-strong); border-radius: var(--fs-radius-lg); background: var(--fs-paper); color: var(--fs-muted); }
.fj-empty h3 { margin: 0 0 6px; color: var(--fs-ink); font-size: 18px; }
.fj-empty p { margin: 0 auto; max-width: 44ch; }