/* ============================================================
   Meiliy · Painel Administrativo
   Camada de estilo fina sobre o Tailwind — o que a utility
   class não cobre: molas iOS, scrollbars, sheets, switches.
   ============================================================ */

:root { color-scheme: light; }
.dark { color-scheme: dark; }

html, body { -webkit-tap-highlight-color: transparent; }

/* ---------- scrollbar discreta ---------- */
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: rgba(120,120,128,.3);
  border: 3px solid transparent;
  border-radius: 999px;
  background-clip: content-box;
}
*::-webkit-scrollbar-thumb:hover { background: rgba(120,120,128,.5); background-clip: content-box; }

/* ---------- molas ---------- */
@keyframes surgir      { from { opacity:0; transform: translateY(8px) scale(.985); } to { opacity:1; transform:none; } }
@keyframes subir       { from { transform: translateY(100%); }  to { transform: translateY(0); } }
@keyframes descer      { from { transform: translateY(0); }     to { transform: translateY(100%); } }
@keyframes escalar     { from { opacity:0; transform: scale(.94) translateY(10px); } to { opacity:1; transform: scale(1) translateY(0); } }
@keyframes desescalar  { from { opacity:1; transform: scale(1); } to { opacity:0; transform: scale(.96); } }
@keyframes fade        { from { opacity:0 } to { opacity:1 } }
@keyframes desfade     { from { opacity:1 } to { opacity:0 } }
@keyframes toast-in    { from { opacity:0; transform: translateY(-14px) scale(.95); } to { opacity:1; transform:none; } }
@keyframes pulsar      { 0%,100% { opacity:1 } 50% { opacity:.45 } }

.anim-surgir  { animation: surgir .42s cubic-bezier(.32,.72,0,1) both; }
.anim-fade    { animation: fade .22s ease both; }
.anim-toast   { animation: toast-in .38s cubic-bezier(.32,.72,0,1) both; }
.pulsando     { animation: pulsar 2s ease-in-out infinite; }

/* entrada em cascata das listas */
.cascata > * { animation: surgir .45s cubic-bezier(.32,.72,0,1) both; }
.cascata > *:nth-child(1){animation-delay:.02s}  .cascata > *:nth-child(2){animation-delay:.05s}
.cascata > *:nth-child(3){animation-delay:.08s}  .cascata > *:nth-child(4){animation-delay:.11s}
.cascata > *:nth-child(5){animation-delay:.14s}  .cascata > *:nth-child(6){animation-delay:.17s}
.cascata > *:nth-child(7){animation-delay:.20s}  .cascata > *:nth-child(8){animation-delay:.23s}
.cascata > *:nth-child(n+9){animation-delay:.26s}

/* ---------- sheet (modal iOS) ---------- */
.sheet-fundo   { animation: fade .28s ease both; }
.sheet-fundo.saindo { animation: desfade .24s ease both; }
.sheet-painel  { animation: subir .46s cubic-bezier(.32,.72,0,1) both; }
.sheet-painel.saindo { animation: descer .3s cubic-bezier(.4,0,1,1) both; }

@media (min-width: 640px) {
  .sheet-painel { animation: escalar .38s cubic-bezier(.32,.72,0,1) both; }
  .sheet-painel.saindo { animation: desescalar .22s ease both; }
}

/* ---------- campos de formulário ---------- */
/* background-color, nunca o atalho `background`: o atalho zera a
   background-image e some com a setinha do <select>. */
.campo {
  width: 100%;
  border-radius: .875rem;
  border: 1px solid transparent;
  background-color: rgba(118,118,128,.10);
  padding: .7rem .875rem;
  font-size: 16px;          /* abaixo de 16px o Safari do iPhone dá zoom ao focar */
  outline: none;
  transition: box-shadow .18s, background-color .18s, border-color .18s;
}
.dark .campo { background-color: rgba(255,255,255,.07); color: #fff; }
.campo:focus {
  border-color: rgba(251,52,128,.55);
  box-shadow: 0 0 0 4px rgba(251,52,128,.14);
  background-color: rgba(118,118,128,.06);
}
.dark .campo:focus { background-color: rgba(255,255,255,.04); }
.campo::placeholder { color: rgba(120,120,128,.65); }
textarea.campo { resize: vertical; min-height: 84px; line-height: 1.5; }

select.campo {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238E8E93' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .75rem center;
  background-size: 1.05rem;
  padding-right: 2.4rem;
}

/* O Chrome monta a lista suspensa do <select> com a cor de fundo do próprio
   campo. Translúcida, ela virava um popup branco — e com `color:#fff` no tema
   escuro o texto sumia. Fundo opaco e cor fixa nas opções resolvem.
   O `:focus` precisa repetir porque a lista abre com o campo focado. */
select.campo,
select.campo:focus { background-color: #F0F0F1; }
select.campo option { background-color: #fff; color: #111; }

.dark select.campo,
.dark select.campo:focus { background-color: #2C2C2E; }
.dark select.campo option { background-color: #2C2C2E; color: #F2F2F7; }

/* ---------- campos da tela de entrada ----------
   Traço fino e reto, no lugar dos cantos arredondados do resto do painel:
   a tela de entrada tem linguagem editorial, não iOS. */
.entrada {
  width: 100%;
  margin-top: .55rem;
  border: 1px solid rgba(120,113,108,.35);
  background: transparent;
  padding: .85rem 1rem;
  font-size: 16px;          /* abaixo de 16px o Safari do iPhone dá zoom ao focar */
  color: inherit;
  outline: none;
  transition: border-color .2s, box-shadow .2s;
}
.entrada::placeholder { color: rgba(120,113,108,.5); }
/* foco no rosa da marca, como no resto do painel */
.entrada:focus {
  border-color: #fb3480;
  box-shadow: inset 0 0 0 1px #fb3480, 0 0 0 4px rgba(251,52,128,.13);
}

.dark .entrada { border-color: rgba(255,255,255,.18); }
.dark .entrada::placeholder { color: rgba(255,255,255,.28); }
.dark .entrada:focus {
  border-color: #fb3480;
  box-shadow: inset 0 0 0 1px #fb3480, 0 0 0 4px rgba(251,52,128,.18);
}

/* o preenchimento automático do Chrome pinta o campo de amarelo */
.entrada:-webkit-autofill,
.entrada:-webkit-autofill:focus {
  -webkit-text-fill-color: #1c1917;
  box-shadow: inset 0 0 0 100px #FAF7F3;
}
.dark .entrada:-webkit-autofill,
.dark .entrada:-webkit-autofill:focus {
  -webkit-text-fill-color: #fafaf9;
  box-shadow: inset 0 0 0 100px #17161a;
}

.rotulo {
  display: block;
  margin-bottom: .4rem;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: rgba(120,120,128,.95);
}

/* ícone nativo de data/hora combinando com o tema escuro */
.dark input[type="date"]::-webkit-calendar-picker-indicator,
.dark input[type="time"]::-webkit-calendar-picker-indicator { filter: invert(1) opacity(.6); }
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator { opacity:.5; cursor: pointer; }

/* ---------- segmented control iOS ---------- */
.segmento {
  display: flex; gap: 2px; padding: 3px;
  background: rgba(118,118,128,.12);
  border-radius: .875rem;
}
.dark .segmento { background: rgba(255,255,255,.08); }
.segmento button {
  flex: 1 1 0; padding: .45rem .5rem;
  font-size: 13px; font-weight: 600;
  border-radius: .7rem; color: rgba(60,60,67,.7);
  transition: all .22s cubic-bezier(.32,.72,0,1);
  white-space: nowrap;
}
.dark .segmento button { color: rgba(235,235,245,.65); }
.segmento button[aria-selected="true"] {
  background: #fff; color: #111;
  box-shadow: 0 1px 3px rgba(0,0,0,.12), 0 0 0 .5px rgba(0,0,0,.04);
}
.dark .segmento button[aria-selected="true"] { background: #48484A; color: #fff; }

/* ---------- switch iOS ---------- */
.switch { position: relative; width: 51px; height: 31px; flex: none; }
.switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; z-index: 2; }
.switch span {
  position: absolute; inset: 0; border-radius: 999px;
  background: rgba(120,120,128,.32);
  transition: background .3s cubic-bezier(.32,.72,0,1);
}
.switch span::after {
  content: ''; position: absolute; top: 2px; left: 2px;
  width: 27px; height: 27px; border-radius: 999px; background: #fff;
  box-shadow: 0 3px 8px rgba(0,0,0,.18);
  transition: transform .32s cubic-bezier(.32,.72,0,1);
}
.switch input:checked + span { background: #30D158; }
.switch input:checked + span::after { transform: translateX(20px); }

/* ---------- caixinha de loja (seleção estilo iOS) ----------
   Círculo vazio que enche de rosa e ganha o ✓ com um pulinho, como a
   seleção de itens do iOS. É um <button role="checkbox">: o estado mora
   no aria-checked, que é o que o leitor de tela anuncia. */
.check-loja {
  display: flex; align-items: center; gap: .5rem; min-width: 0;
  padding: .7rem .7rem; border-radius: 1rem;
  background: rgba(118,118,128,.09);
  border: 1.5px solid transparent;
  font-size: 13.5px; font-weight: 600; text-align: left;
  color: rgba(60,60,67,.85);
  transition: background .2s, border-color .2s, color .2s;
}
.dark .check-loja { background: rgba(255,255,255,.06); color: rgba(235,235,245,.72); }
.check-loja[aria-checked="true"] {
  background: rgba(251,52,128,.09); border-color: rgba(251,52,128,.5); color: #c8175f;
}
.dark .check-loja[aria-checked="true"] {
  background: rgba(251,52,128,.15); border-color: rgba(251,52,128,.6); color: #fff;
}
.check-loja:focus-visible { outline: none; box-shadow: 0 0 0 4px rgba(251,52,128,.25); }
.check-nome { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.check-bola {
  display: grid; place-items: center; flex: none;
  width: 22px; height: 22px; border-radius: 50%;
  border: 2px solid rgba(60,60,67,.28); color: #fff;
  transition: background .22s cubic-bezier(.32,.72,0,1), border-color .22s,
              transform .3s cubic-bezier(.34,1.56,.64,1), box-shadow .22s;
}
.dark .check-bola { border-color: rgba(235,235,245,.3); }
.check-bola svg {
  width: 13px; height: 13px; opacity: 0; transform: scale(.3);
  transition: opacity .16s, transform .3s cubic-bezier(.34,1.56,.64,1);
}
.check-loja[aria-checked="true"] .check-bola {
  background: #fb3480; border-color: #fb3480;
  box-shadow: 0 4px 10px -3px rgba(251,52,128,.65);
}
.check-loja[aria-checked="true"] .check-bola svg { opacity: 1; transform: scale(1); }
.check-loja:active .check-bola { transform: scale(.86); }

/* Celular: três lojas lado a lado não cabem com a bolinha ao lado do nome —
   "Mongaguá" virava "Mongag…". A bolinha sobe para cima do nome, como os
   botões da Central de Controle do iPhone, e o nome ganha a largura toda. */
@media (max-width: 480px) {
  .check-loja {
    flex-direction: column; justify-content: center; gap: .4rem;
    padding: .75rem .35rem .7rem; text-align: center; font-size: 13px;
  }
  .check-nome { max-width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .check-bola, .check-bola svg { transition-duration: .01ms; }
}

/* ---------- feriado no tema claro ----------
   O dourado do feriado (#F5B800) é ótimo sobre o escuro, mas como TEXTO
   sobre branco não passa de 1,7:1 — "Independência" some no calendário.
   As telas escrevem a cor do tipo direto no style="color:…", então a
   correção pega o próprio atributo: só texto (início do style ou depois
   de ";"), nunca "border-color" nem "background". O !important é o que
   vence o estilo inline. No tema escuro nada muda. */
html:not(.dark) [style^="color:#F5B800"],
html:not(.dark) [style*=";color:#F5B800"] { color: #8a6200 !important; }

/* ---------- utilidades ---------- */
.vidro { backdrop-filter: saturate(180%) blur(24px); -webkit-backdrop-filter: saturate(180%) blur(24px); }
.sem-scroll::-webkit-scrollbar { display: none; }
.sem-scroll { scrollbar-width: none; }

/* Faixa que rola na horizontal: a borda que ainda esconde conteúdo desbota,
   em vez de cortar um chip no meio. As classes entram e saem pelo JS
   (UI.ligarFadeRolagem), então o fade some quando chega ao fim. */
.desliza-fim:not(.desliza-ini) {
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 2.5rem), transparent 100%);
          mask-image: linear-gradient(to right, #000 calc(100% - 2.5rem), transparent 100%);
}
.desliza-ini:not(.desliza-fim) {
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 2.5rem);
          mask-image: linear-gradient(to right, transparent 0, #000 2.5rem);
}
.desliza-ini.desliza-fim {
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 2.5rem, #000 calc(100% - 2.5rem), transparent 100%);
          mask-image: linear-gradient(to right, transparent 0, #000 2.5rem, #000 calc(100% - 2.5rem), transparent 100%);
}
.pressiona { transition: transform .16s cubic-bezier(.32,.72,0,1); }
.pressiona:active { transform: scale(.97); }
.linha-2 { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }

/* ---------- arrastar por toque no calendário ---------- */
/* Enquanto o dedo carrega uma ação: nada de selecionar texto nem de o
   navegador abrir o menu de "copiar/compartilhar" por pressão longa. */
[data-chip] {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}
body.arrastando {
  -webkit-user-select: none;
  user-select: none;
  cursor: grabbing;
}
.sombra-arrasto {
  opacity: .96;
  transform: scale(1.1);
  box-shadow: 0 12px 28px rgba(0,0,0,.3);
  transition: transform .12s ease;
}

/* faixa colorida lateral dos cards de ação */
.faixa { position: relative; overflow: hidden; }
.faixa::before {
  content:''; position:absolute; left:0; top:0; bottom:0; width:4px;
  background: var(--faixa, #8E8E93);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ============================================================
   FOLHA IMPRESSA
   ============================================================
   O painel é um aplicativo: barras fixas, tema escuro, sombras,
   rolagem. Nada disso vira papel decente. Então a impressão não
   reaproveita a tela — `js/impressao.js` monta um documento à
   parte dentro de #impressao, e aqui ele ganha forma.

   As classes são todas .imp-*, escritas à mão, sem Tailwind: o
   Tailwind via CDN gera classe sob demanda e de forma assíncrona,
   e a janela de impressão pode abrir antes disso. Em papel, isso
   sairia como uma página sem estilo nenhum.
   ============================================================ */

#impressao { display: none; }

@media print {
  /* o aplicativo sai de cena; entra a folha */
  body > *:not(#impressao) { display: none !important; }
  #impressao { display: block !important; }

  html, body {
    background: #fff !important;
    color: #111 !important;
    /* sem isto o navegador descarta os fundos coloridos ao imprimir */
    -webkit-print-color-adjust: exact;
            print-color-adjust: exact;
  }

  @page { size: A4 portrait; margin: 13mm 12mm; }
  /* a grade de 7 colunas do mês só respira deitada */
  @page paisagem { size: A4 landscape; margin: 9mm; }
  .imp-paisagem { page: paisagem; }

  a[href]::after { content: none !important; }   /* nada de URL no rodapé */
}

/* --- vale na tela também, para a pré-visualização de teste --- */
.imp-folha {
  font-family: Inter, -apple-system, 'Segoe UI', sans-serif;
  color: #111;
  font-size: 10pt;
  line-height: 1.4;
}

/* ---------- cabeçalho ---------- */
.imp-topo {
  display: flex; align-items: flex-start; gap: 12px;
  padding-bottom: 10px; margin-bottom: 16px;
  border-bottom: 2px solid #fb3480;
}
.imp-logo { width: 46px; height: 46px; border-radius: 999px; object-fit: cover; flex: none; }
.imp-marca { flex: 1 1 auto; min-width: 0; }
.imp-nome {
  margin: 0; font-size: 8pt; font-weight: 700;
  letter-spacing: .22em; text-transform: uppercase; color: #fb3480;
}
.imp-titulo {
  margin: 3px 0 0; font-size: 21pt; font-weight: 400; line-height: 1.05;
  font-family: 'Playfair Display', Georgia, serif;
}
.imp-linha { margin: 4px 0 0; font-size: 9pt; color: #555; }
.imp-emissao { flex: none; text-align: right; font-size: 8pt; color: #777; line-height: 1.5; }
.imp-emissao strong { display: block; color: #111; font-size: 9pt; }

/* ---------- lista por dia ---------- */
.imp-dia { margin-bottom: 14px; break-inside: avoid; page-break-inside: avoid; }
.imp-dia-cab {
  display: flex; align-items: baseline; gap: 8px;
  margin: 0 0 5px; padding-bottom: 4px;
  border-bottom: 1px solid #e2e2e6;
}
.imp-dia-num {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 17pt; line-height: 1; color: #fb3480;
}
.imp-dia-nome { font-size: 10.5pt; font-weight: 700; }
.imp-dia-conta { margin-left: auto; font-size: 8.5pt; font-weight: 500; color: #888; }

.imp-tabela { width: 100%; border-collapse: collapse; }
.imp-tabela td { padding: 4px 6px 4px 0; vertical-align: top; border-bottom: 1px solid #f0f0f2; }
.imp-tabela tr:last-child td { border-bottom: 0; }

.imp-check { width: 18px; }
.imp-quadro {
  display: block; width: 11px; height: 11px; margin-top: 2px;
  border: 1.2px solid #9a9aa0; border-radius: 2.5px;
}
.imp-hora { width: 44px; font-variant-numeric: tabular-nums; font-weight: 700; font-size: 9.5pt; }
.imp-tit { font-weight: 600; font-size: 10pt; }
.imp-sub { display: block; margin-top: 1px; font-weight: 400; font-size: 8.5pt; color: #777; }
.imp-nota {
  display: block; margin-top: 3px; padding-left: 7px;
  border-left: 2px solid #f0dcc4; font-size: 8.5pt; color: #555;
  white-space: pre-wrap;
}
.imp-loja { width: 74px; font-size: 9pt; color: #444; }
.imp-status { width: 74px; font-size: 8.5pt; text-align: right; white-space: nowrap; }
.imp-riscado .imp-tit, .imp-riscado .imp-sub { text-decoration: line-through; color: #999; }

/* ---------- grade do mês ---------- */
.imp-cal { width: 100%; border-collapse: collapse; table-layout: fixed; }
.imp-cal th {
  padding: 0 0 5px; font-size: 8pt; font-weight: 700;
  text-transform: uppercase; letter-spacing: .12em; color: #888;
}
.imp-cal td {
  height: 92px; padding: 4px 5px; vertical-align: top;
  border: 1px solid #e2e2e6;
}
.imp-cal .imp-fora { background: #fafafb; }
.imp-cal .imp-fds  { background: #fdf5f8; }
/* Feriado no papel: fundo dourado e um fio dourado no alto da célula. O fio
   é borda, e borda imprime mesmo com "gráficos de segundo plano" desligado
   — o fundo sozinho sumiria nessa configuração. */
.imp-cal .imp-feriado { background: #fff8e0; border-top: 2.5px solid #e0a800; }
.imp-feriado .imp-cel-num { color: #a87a00; }
.imp-dia-feriado {
  margin-left: 8px; padding: 0 6px; border: .8px solid #e0a800; border-radius: 999px;
  font-size: 7.5pt; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #a87a00;
}
.imp-cel-num { font-size: 10pt; font-weight: 700; }
.imp-fora .imp-cel-num { color: #bbb; font-weight: 500; }
.imp-cel-hoje {
  display: inline-block; min-width: 17px; padding: 1px 4px;
  border-radius: 999px; background: #fb3480; color: #fff; text-align: center;
}
.imp-cel-lista { margin: 3px 0 0; padding: 0; list-style: none; }
.imp-cel-lista li {
  display: flex; align-items: flex-start; gap: 3px;
  font-size: 7.5pt; line-height: 1.25; margin-bottom: 1.5px;
}
.imp-ponto { width: 5px; height: 5px; border-radius: 999px; flex: none; margin-top: 3px; }
.imp-cel-marca { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.imp-cel-loja { flex: none; font-weight: 700; color: #888; }
.imp-cel-mais { font-size: 7pt; color: #999; }

/* ---------- rodapé e legenda ---------- */
.imp-legenda {
  display: flex; flex-wrap: wrap; gap: 4px 14px;
  margin-top: 10px; font-size: 8pt; color: #555;
}
.imp-legenda span { display: inline-flex; align-items: center; gap: 4px; }
.imp-rodape {
  margin-top: 16px; padding-top: 7px;
  border-top: 1px solid #e2e2e6;
  font-size: 7.5pt; color: #999; text-align: center;
}
.imp-vazio {
  margin: 26px 0; padding: 26px; text-align: center;
  border: 1px dashed #ccc; border-radius: 8px; color: #888; font-size: 10pt;
}