/* base.css — reset, tokens globais, palco, régua, folha escalável e
   componentes estruturais (faixa-meses, abas-caderno, botao-neu, trio,
   faixas, pilha, rodapé). Unidade dentro da folha: 1px CSS = 1 pt do PDF.
   Cores do Planner amostradas de docs/evidencias/renders (p3 e p47, 144 dpi). */

/* ------------------------------------------------------------ tokens */
:root {
  /* aplicação */
  --regua-altura: 24px;
  --regua-fundo: #F6F6F5;
  --regua-borda: #DCDCDA;
  --regua-texto: #4A4A4A;
  --regua-texto-suave: #8A8A88;
  --regua-erro: #A33A2B;
  --palco-fundo: #D9D9D7;
  --folha-sombra: 0 2px 10px rgba(0, 0, 0, .18);

  /* Planner (amostrado) */
  --planner-fundo-home: #F0F0EE;   /* fundo da Home (p3): 240,240,238 */
  --planner-fundo-folha: #FFFFFF;  /* páginas internas (p47) */
  --planner-titulo: #333333;       /* "PLANEJAMENTO DIÁRIO" */
  --planner-rotulo: #5D5D5C;       /* rótulos dos botões da Home: 93,93,92 */
  --planner-icone: #000000;        /* glifos dos ícones */
  --planner-linha: #666666;        /* linhas 0.4 gray */
  --planner-regua-linha: #000000;  /* fios sob os títulos de seção */
  --planner-aba-texto: #F1F1F1;    /* JAN…DEZ */
  --planner-aba-home: #F2F2F1;
  /* abas dos meses: degradê do cinza (JAN) ao grafite (DEZ) */
  --aba-planner-1: #808188; --aba-planner-2: #5E5F66; --aba-planner-3: #51535C; --aba-planner-4: #41444C;
  --aba-planner-5: #383941; --aba-planner-6: #33353B; --aba-planner-7: #2E3036; --aba-planner-8: #2C2C33;
  --aba-planner-9: #292B2F; --aba-planner-10: #292B2F; --aba-planner-11: #27292E; --aba-planner-12: #1F2126;

  /* botões neumórficos (tecla 252,253,254 sobre fundo 240,240,238) */
  --neu-tecla-claro: #FFFFFF;
  --neu-tecla-escuro: #E6E7EA;
  --neu-sombra: rgba(0, 0, 0, .22);
  --neu-luz: rgba(255, 255, 255, .95);
  --neu-anel: #9C9C9A;

  /* Caderno: reserva (tema-caderno.css define a paleta Blue) */
  --aba-1: #DCE7F2; --aba-2: #CFDFEE; --aba-3: #C1D6EA; --aba-4: #B2CCE5; --aba-5: #A3C2E0; --aba-6: #93B7DA;
  --aba-7: #83ABD3; --aba-8: #739FCB; --aba-9: #6493C3; --aba-10: #5687BA; --aba-11: #497AB0; --aba-12: #3D6EA5;
  --aba-13: #33639A; --aba-14: #2A588E; --aba-15: #234E82; --aba-16: #1D4476; --aba-17: #183B6A; --aba-18: #14335E;
  --aba-19: #102B53; --aba-20: #0D2448; --aba-21: #0A1D3D; --aba-22: #081733; --aba-23: #061229; --aba-24: #040D20;

  /* tipografia (fontes.css declara as famílias) */
  --fonte-titulo: "Lempicka Small Caps", "Poiret One", "Caviar Dreams", sans-serif;
  --fonte-rotulo: "Caviar Dreams", "Lato", "Helvetica Neue", Arial, sans-serif;
  --fonte-escrita: "Caviar Dreams", "Lato", "Helvetica Neue", Arial, sans-serif;
  --fonte-script: "Alexander Lettering", "Brittany Signature", cursive;
  --fonte-mes-agenda: "Brittany Signature", "Alexander Lettering", cursive;
  --fonte-app: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;

  /* folha */
  --folha-fundo: var(--planner-fundo-folha);
}

/* ------------------------------------------------------------ reset */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; }
body {
  overflow: hidden;
  background: var(--palco-fundo);
  color: #222;
  font-family: var(--fonte-app);
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
}
img, svg { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; }
h1, h2, h3, h4, p, ul, ol { margin: 0; }
[hidden] { display: none !important; }

/* ------------------------------------------------------------ palco */
#palco {
  position: fixed;
  top: var(--regua-altura);
  left: 0; right: 0; bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* ------------------------------------------------------------ folha */
pagina-folha {
  display: block;
  position: relative;
  flex: none;
  box-shadow: var(--folha-sombra);
  background: var(--folha-fundo);
}
.folha-canvas {
  position: absolute;
  top: 0; left: 0;
  transform-origin: 0 0;
  overflow: hidden;
  background: var(--folha-fundo);
  font-family: var(--fonte-rotulo);
  color: var(--planner-titulo);
  font-size: 9px;
  line-height: 1.2;
}
/* o conteúdo do template ocupa a folha inteira; filhos posicionados em pt */
.folha-canvas > * { position: absolute; inset: 0; }
.folha-vazia {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  color: #999; font-family: var(--fonte-app);
}
.folha-vazia-rota { font-size: 14px; }
.folha-vazia-detalhe { font-size: 9px; }

/* ------------------------------------------------------------ régua */
regua-app {
  position: fixed; top: 0; left: 0; right: 0;
  height: var(--regua-altura);
  z-index: 50;
  display: flex; align-items: center; gap: 10px;
  padding: 0 10px;
  background: var(--regua-fundo);
  border-bottom: 1px solid var(--regua-borda);
  color: var(--regua-texto);
  font: 11px/1 var(--fonte-app);
  white-space: nowrap;
  user-select: none;
}
/* ENTRADA (SP-D23): no endereço publicado /assets/ (onde estão as fontes do produto) só é servido com
   sessão, e a entrada não pode depender de nada de lá. A regra mora aqui, no CSS do boot, e não em
   stark-entrada.css (carregado sob demanda): com a latência real a folha da entrada é desenhada antes
   desse arquivo chegar, e o navegador já pediria a fonte do contêiner. Só fontes do sistema. */
pagina-folha:has(.sk-entrada), .folha-canvas:has(.sk-entrada) { font-family: system-ui, "Helvetica Neue", Helvetica, Arial, sans-serif; }
.sk.sk-entrada, .sk-entrada {
  --sk-sans: system-ui, "Helvetica Neue", Helvetica, Arial, sans-serif;
  --sk-serif: "Hoefler Text", Baskerville, "Baskerville Old Face", Georgia, serif;
  --sk-didone: Didot, "Bodoni 72", "Bodoni MT", "Hoefler Text", Georgia, serif;
  --fonte-escrita: var(--sk-sans);
  font-family: var(--sk-sans);
}

/* Antes da rota e na entrada, a régua usa só fontes do sistema: no endereço publicado as fontes do produto
   (/assets/) só são servidas com sessão (SP-D23), e a entrada não pode depender delas. */
regua-app:not([data-modulo]), regua-app[data-modulo=""], regua-app[data-modulo="entrada"] {
  font-family: system-ui, "Helvetica Neue", Helvetica, Arial, sans-serif;
}
regua-app button, regua-app summary, regua-app select {
  height: 18px; padding: 0 7px;
  border: 1px solid var(--regua-borda); border-radius: 4px;
  background: #fff; cursor: pointer; font-size: 11px; line-height: 16px;
}
regua-app select { padding: 0 2px; }
regua-app label { display: inline-flex; align-items: center; gap: 4px; color: var(--regua-texto-suave); }
regua-app button:hover, regua-app summary:hover { background: #F0F0EF; }
.rg-trilha { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; color: var(--regua-texto); }
regua-app .rg-so-planner, regua-app .rg-so-agenda { display: none; }
regua-app[data-modulo="planner"] .rg-so-planner,
regua-app[data-modulo="agenda"] .rg-so-agenda { display: inline-flex; }
.rg-backup { position: relative; }
.rg-backup > summary { list-style: none; display: inline-flex; align-items: center; }
.rg-backup > summary::-webkit-details-marker { display: none; }
.rg-menu {
  position: absolute; top: 21px; right: 0; z-index: 60;
  display: flex; flex-direction: column; gap: 3px; padding: 5px;
  background: #fff; border: 1px solid var(--regua-borda); border-radius: 5px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .12);
}
.rg-modulos { display: inline-flex; gap: 1px; border: 1px solid var(--regua-borda); border-radius: 4px; overflow: hidden; }
.rg-modulos a { padding: 3px 7px; text-decoration: none; background: #fff; }
.rg-modulos a.atual { background: #4A4A4A; color: #fff; }
.rg-estado { min-width: 92px; text-align: right; color: var(--regua-texto-suave); }
.rg-estado.erro { color: var(--regua-erro); font-weight: 600; }

/* régua e palco harmonizados com a identidade STARK — só no Planner (SP-D17, R3; Agenda/Caderno intactos) */
regua-app[data-modulo="planner"] {
  --regua-fundo: #F7F4EF; --regua-borda: #E4DDD3; --regua-texto: #3F3B37; --regua-texto-suave: #8D867E;
}
regua-app[data-modulo="planner"] .rg-modulos a.atual { background: #A2703F; color: #fff; }
body[data-modulo="planner"] { --palco-fundo: #E6E1DA; --regua-altura: clamp(24px, 1.35vw, 46px); }
/* em telas grandes a régua cresce junto (mesmos controles, legíveis a distância) */
regua-app[data-modulo="planner"] { font-size: clamp(11px, .62vw, 21px); gap: .9em; padding: 0 .9em; }
regua-app[data-modulo="planner"] :is(button, summary, select) { height: calc(var(--regua-altura) * .74); font-size: inherit; line-height: 1; padding: 0 .6em; }
regua-app[data-modulo="planner"] .rg-modulos a { padding: .3em .65em; }
regua-app[data-modulo="planner"] .rg-menu { top: calc(var(--regua-altura) - 2px); }
regua-app[data-modulo="planner"] .rg-estado { min-width: 8.5em; }

/* painel lateral de stickers (conteúdo: window.StarkStickers) */
.painel-stickers {
  position: fixed; top: var(--regua-altura); right: 0; bottom: 0; width: 260px; z-index: 40;
  display: flex; flex-direction: column;
  background: #FAFAF9; border-left: 1px solid var(--regua-borda);
  box-shadow: -4px 0 14px rgba(0, 0, 0, .08);
  font: 11px var(--fonte-app); color: var(--regua-texto);
}
.painel-stickers > header {
  display: flex; align-items: center; justify-content: space-between;
  height: 26px; padding: 0 8px; border-bottom: 1px solid var(--regua-borda);
}
.painel-stickers .ps-fechar { border: 0; background: none; font-size: 16px; cursor: pointer; }
.painel-stickers-conteudo { flex: 1; overflow: auto; padding: 8px; }
body.stickers-aberto #palco { right: 260px; }

/* modal nativo (backup) */
dialog.modal-stark {
  max-width: 440px; border: 1px solid var(--regua-borda); border-radius: 8px; padding: 16px 18px;
  font: 13px/1.45 var(--fonte-app); color: #222; box-shadow: 0 12px 40px rgba(0, 0, 0, .25);
}
dialog.modal-stark::backdrop { background: rgba(0, 0, 0, .3); }
dialog.modal-stark h2 { font-size: 15px; margin-bottom: 8px; }
dialog.modal-stark ul { padding-left: 18px; margin: 6px 0; }
dialog.modal-stark p { margin: 6px 0; }
.modal-acoes { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; margin-top: 12px; }
.modal-acoes button { padding: 5px 12px; border: 1px solid #C8C8C6; border-radius: 5px; background: #fff; cursor: pointer; }
.modal-acoes button.perigo { border-color: var(--regua-erro); color: var(--regua-erro); }

/* ------------------------------------------------------------ botao-neu */
botao-neu { display: inline-block; }
.bn {
  --bn-tam: 56px;
  display: flex; flex-direction: column; align-items: center;
  width: calc(var(--bn-tam) + 10px);
  color: var(--planner-rotulo); text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
.bn-anel { position: relative; width: var(--bn-tam); height: var(--bn-tam); display: grid; place-items: center; }
/* anel: metade esquerda contínua, metade direita pontilhada (como no original) */
.bn-anel::before, .bn-anel::after { content: ""; position: absolute; inset: 0; border-radius: 50%; }
.bn-anel::before { border: .8px solid var(--neu-anel); clip-path: inset(0 50% 0 0); }
.bn-anel::after { border: .8px dotted var(--neu-anel); clip-path: inset(0 0 0 50%); }
.bn-tecla {
  width: 66%; height: 66%; border-radius: 24%;
  display: grid; place-items: center;
  background: linear-gradient(145deg, var(--neu-tecla-claro), var(--neu-tecla-escuro));
  box-shadow: 2.5px 2.5px 5px var(--neu-sombra), -1.5px -1.5px 3px var(--neu-luz);
  transition: box-shadow .12s ease, transform .12s ease;
}
.bn-tecla img { width: 62%; height: 62%; object-fit: contain; }
a.bn:active .bn-tecla { transform: scale(.97); box-shadow: inset 1.5px 1.5px 3px var(--neu-sombra), inset -1px -1px 2px var(--neu-luz); }
.bn-seta { font-size: 7px; line-height: 7px; color: #6A6A6A; margin-top: 1px; }
.bn-rotulo { margin-top: 2px; font-family: var(--fonte-rotulo); font-size: 8.5px; line-height: 1.18; text-align: center; white-space: nowrap; }

/* ------------------------------------------------------------ trilho-icones */
trilho-icones { display: flex; flex-direction: column; align-items: center; gap: var(--trilho-gap, 6px); }
trilho-icones.trilho-linha { flex-direction: row; }

/* ------------------------------------------------------------ rodape-marca */
rodape-marca {
  position: absolute; left: 0; right: 0; bottom: 3px;
  text-align: center; font-family: var(--fonte-rotulo); font-size: 7.5px; color: #555;
}
rodape-marca a { text-decoration: none; color: inherit; }
rodape-marca.rodape-maiusculas { text-transform: uppercase; letter-spacing: .6px; }

/* ------------------------------------------------------------ faixa-meses (Planner) */
faixa-meses { position: absolute; top: 0; right: 0; width: 19px; height: 100%; z-index: 5; }
.fm-home {
  position: absolute; top: 8px; right: 1px; width: 17px; height: 44px;
  display: grid; place-items: center;
  border-radius: 0 7px 7px 0; background: var(--planner-aba-home);
  box-shadow: 1px 1px 2px rgba(0, 0, 0, .25); color: #555;
}
.fm-home svg, .fm-home img { width: 11px; height: 11px; }
.fm-home img.fm-marca { width: 14px; height: 14px; }
.fm-barra { position: absolute; top: 0; bottom: 0; left: 0; width: 2.5px; }
.fm-aba {
  position: absolute; right: 0; width: 15px; height: 42.75px;
  display: grid; place-items: center;
  background: var(--aba-cor); color: var(--planner-aba-texto); text-decoration: none;
  border-radius: 0 6px 6px 0; box-shadow: 1px 1px 2px rgba(0, 0, 0, .35);
}
.fm-aba span { writing-mode: vertical-rl; font-family: var(--fonte-rotulo); font-size: 6.2px; letter-spacing: .4px; }
.fm-aba.atual { right: 3px; width: 16px; z-index: 2; }

/* ------------------------------------------------------------ abas-caderno */
abas-caderno { position: absolute; top: 0; right: 0; width: 24px; height: 100%; z-index: 5; }
.ac-home {
  position: absolute; top: 30px; right: 2px; width: 20px; height: 24px;
  display: grid; place-items: center; border-radius: 0 6px 6px 0;
  background: #F4F4F4; color: #444; box-shadow: 1px 1px 2px rgba(0, 0, 0, .25);
}
.ac-home svg { width: 11px; height: 11px; }
.ac-aba {
  position: absolute; right: 0; width: 18px; height: calc((826px - 60px) / 24 - 1px);
  display: grid; place-items: center;
  background: var(--aba-cor); color: #fff; text-shadow: 0 0 2px rgba(0, 0, 0, .55);
  font-family: var(--fonte-rotulo); font-size: 5.5px; text-decoration: none;
  border-radius: 0 5px 5px 0; box-shadow: 1px 1px 1.5px rgba(0, 0, 0, .3);
}
.ac-aba.clara { color: #333; text-shadow: none; }
.ac-aba.atual { right: 4px; z-index: 2; }

/* ------------------------------------------------------------ trio-modulos (Home, D2)
   Sem moldura em "L" desde a SP-D17 (imagem 2): discos circulares STARK. Só a Home do Planner usa. */
trio-modulos { display: flex; align-items: flex-start; justify-content: center; gap: 28px; }
.tm-botao {
  --tm: 48px;
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  color: #2A2826; text-decoration: none;
}
.tm-maior { --tm: 60px; }
.tm-disco {
  width: var(--tm); height: var(--tm); border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle at 34% 28%, #FFFFFF 0%, #FBFAF8 46%, #F1EDE7 100%);
  box-shadow: 0 5px 12px rgba(70, 52, 34, .12), 0 1px 3px rgba(70, 52, 34, .1), inset 0 1px 0 #fff;
  transition: transform .16s ease, box-shadow .16s ease, color .16s ease;
}
.tm-disco svg { width: 44%; height: 44%; }
.tm-botao.atual .tm-disco { box-shadow: 0 0 0 2px #C59A6C, 0 0 0 6px rgba(197, 154, 108, .18), 0 6px 14px rgba(70, 52, 34, .16); color: #A2703F; }
.tm-botao:hover .tm-disco { transform: translateY(-2px); color: #A2703F; }
.tm-rotulo { font: 600 15px/1.1 "Lato", "Helvetica Neue", Arial, sans-serif; }
.tm-maior .tm-rotulo { font-size: 17px; }
.tm-sub { font: 500 10px/1 "Lato", "Helvetica Neue", Arial, sans-serif; letter-spacing: .14em; text-transform: uppercase; color: #8D867E; }

/* ------------------------------------------------------------ faixa-dias / faixa-sem (Agenda) */
faixa-dias { display: flex; align-items: stretch; height: 100%; font-family: var(--fonte-rotulo); font-size: 6.5px; color: var(--agenda-texto, #333); }
.fd-rotulo { display: grid; place-items: center; padding: 0 3px; }
.fd-dia {
  flex: 1 1 0; display: grid; place-items: center;
  border-left: .5px solid var(--agenda-faixa-borda, #C9CFD5); text-decoration: none;
  background: var(--agenda-faixa-bg, transparent);
}
.fd-dia.atual { background: var(--agenda-faixa-ativo, #1F4E5F); color: var(--agenda-faixa-texto-ativo, #fff); }
faixa-sem { display: flex; gap: 2px; font-family: var(--fonte-rotulo); }
.fs-sem {
  display: grid; place-items: center; padding: 2px 3px; font-size: 4.5px; text-decoration: none;
  border: .5px solid var(--agenda-faixa-borda, #C9CFD5); border-radius: 2px; background: var(--agenda-faixa-bg, #EEF1F4);
}
.fs-sem.atual { background: var(--agenda-faixa-ativo, #1F4E5F); color: var(--agenda-faixa-texto-ativo, #fff); }

/* ------------------------------------------------------------ pilha-paginas */
pilha-paginas { display: inline-flex; align-items: center; gap: 3px; font: 7px var(--fonte-app); color: #555; }
pilha-paginas button {
  height: 12px; min-width: 12px; padding: 0 4px; border: .5px solid #BBB; border-radius: 3px;
  background: #fff; cursor: pointer; font-size: 7px; line-height: 11px;
}
pilha-paginas button:disabled { opacity: .35; cursor: default; }
.pp-pos { min-width: 22px; text-align: center; }

/* ------------------------------------------------------------ impressão: só a folha */
@media print {
  regua-app, .painel-stickers { display: none !important; }
  #palco { position: static; }
}