/* ───────────────────────────────────────────────────────────
   D O M I N A R I A · pele neumórfica
   o mesmo app, vestido no design de soft-UI:
   fundo cinza-claro, tudo em squircle branco com sombra dupla
   (luz em cima-esquerda, sombra embaixo-direita), busca afundada.
   ─────────────────────────────────────────────────────────── */

:root{
  /* ── as cores do design ── */
  --fundo:      #DCE0E9;
  --carta:      #E8EAEF;
  --carta-alto: #FDFDFE;
  --luz:        #FFFFFF;   /* sombra clara */
  --sombra-d:   #C6CAD6;   /* sombra escura */

  /* remapeia os tokens antigos do creme pro cinza do design */
  --papel:    #DCE0E9;
  --papel-2:  #EDEFF4;
  --nuvem:    #F4F6F9;
  --linho:    #E3E6ED;
  --granola:  #DCE0EA;
  --borda:    #DEE2EB;
  --borda-2:  #CDD3E0;
  --tinta:    #5B6172;
  --tinta-2:  #8A90A0;
  --tinta-3:  #A6ACBC;

  --raio:   18px;
  --raio-g: 30px;
  --raio-p: 14px;

  /* relevo */
  --alto:   0 -10px 20px var(--luz), 0 10px 20px var(--sombra-d);
  --alto-g: 0 -14px 28px var(--luz), 0 14px 28px var(--sombra-d);
  --baixo:  inset 0 8px 14px var(--luz), inset 0 -8px 14px var(--sombra-d);
  --baixo-p: inset 0 5px 9px var(--luz), inset 0 -5px 9px var(--sombra-d);

  --sombra-1: 0 -7px 15px var(--luz), 0 7px 15px var(--sombra-d);
  --sombra-2: var(--alto);
  --sombra-3: var(--alto-g);
}

html, body{
  background: var(--fundo);
  color: var(--tinta);
  font-family: 'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 15px;
}
/* nada de bold — o destaque vem do relevo, não do peso */
body, body *{ font-weight: 400; font-synthesis-weight: none; }
body{ background-image: none; background: var(--fundo); }

*::-webkit-scrollbar-thumb{ background:#D4D8E2; }
*::-webkit-scrollbar-thumb:hover{ background:#C6CAD6; }
::selection{ background:#D9DEEA; color: var(--tinta); }

/* ───────── shell: os painéis flutuam no cinza ───────── */
.app{
  gap: 18px;
  padding: 18px;
  background: var(--fundo);
}

/* ───────── lateral: squircle levantado ───────── */
.lateral{
  background: var(--carta);
  border: 0;
  border-radius: var(--raio-g);
  box-shadow: var(--alto);
  padding: calc(20px + env(safe-area-inset-top)) 14px calc(16px + env(safe-area-inset-bottom));
}

.voltar{ border-radius: 99px; padding: 6px 10px; color: var(--tinta-2); }
.voltar:hover{ background: transparent; box-shadow: var(--baixo-p); color: var(--tinta); }

.marca-wordmark{ color: var(--tinta); letter-spacing:.22em; }
.lateral-titulo{ color: var(--tinta-3); }

.tab-item{ border-radius: var(--raio-p); }
.tab-item:hover{ background: transparent; box-shadow: var(--baixo-p); transform:none; color: var(--tinta); }
.tab-item.ativo{
  background: transparent; color: var(--tinta);
  box-shadow: var(--baixo);
}
.tab-item .tab-mais:hover{ background: transparent; box-shadow: var(--baixo-p); }

.lateral-add{
  border: 0; border-radius: var(--raio-p);
  background: linear-gradient(180deg, #FFFFFF, var(--carta-alto));
  box-shadow: 0 -6px 12px var(--luz), 0 6px 12px var(--sombra-d);
  color: var(--tinta-2);
}
.lateral-add:hover{ background: linear-gradient(180deg, #FFFFFF, var(--carta-alto)); box-shadow: var(--baixo-p); color: var(--tinta); }

.legenda-chip{
  border: 0; border-radius: 99px;
  background: linear-gradient(180deg, #FFFFFF, var(--carta-alto));
  box-shadow: 0 -5px 10px var(--luz), 0 5px 10px var(--sombra-d);
  color: var(--tinta-2);
}
.legenda-chip:hover{ box-shadow: var(--baixo-p); color: var(--tinta); }

.nuvem-btn, .pe-btn{
  border: 0; border-radius: var(--raio-p);
  background: linear-gradient(180deg, #FFFFFF, var(--carta-alto));
  box-shadow: 0 -6px 12px var(--luz), 0 6px 12px var(--sombra-d);
  color: var(--tinta-2);
}
.nuvem-btn:hover, .pe-btn:hover{ box-shadow: var(--baixo-p); color: var(--tinta); }

/* a janelinha (squircle do menu) */
.sq-btn{
  background: linear-gradient(180deg, #FFFFFF, var(--carta-alto));
  border: 0;
  box-shadow: 0 -6px 12px var(--luz), 0 6px 12px var(--sombra-d);
  color: var(--tinta-2);
}
.sq-btn:hover{ box-shadow: var(--baixo-p); }

/* ───────── palco: um squircle grande ───────── */
.palco{
  height: auto; min-height:0;
  background: var(--carta);
  border-radius: var(--raio-g);
  box-shadow: var(--alto);
  overflow: hidden;
}

.topo{
  background: transparent;
  backdrop-filter: none;
  border-bottom: 0;
  padding: calc(18px + env(safe-area-inset-top)) 22px 16px 46px;
}

.emoji-btn{
  background: linear-gradient(180deg, #FFFFFF, var(--carta-alto));
  border: 0; border-radius: 22px;
  box-shadow: 0 -7px 14px var(--luz), 0 7px 14px var(--sombra-d);
}
.emoji-btn:hover{ box-shadow: var(--baixo-p); transform: rotate(-6deg) scale(1.05); }

#tituloTabela{ letter-spacing:.01em; color: var(--tinta); }
#tituloTabela:hover{ background: transparent; box-shadow: var(--baixo-p); }
#tituloTabela:focus{ background: transparent; box-shadow: var(--baixo); }
.sub{ color: var(--tinta-3); }

/* busca afundada — o inverso do card, igual ao design */
.busca{
  background: var(--carta-alto);
  border: 0; border-radius: 99px;
  padding: 0 16px; height: 46px;
  box-shadow: var(--baixo);
  color: var(--tinta-2);
}
.busca:focus-within{ box-shadow: inset 0 8px 15px var(--luz), inset 0 -8px 15px var(--sombra-d); }
.busca input{ width: 132px; }

/* segmentado: trilho afundado, o aceso é o relevo */
.segmentado{
  background: var(--fundo);
  border: 0; border-radius: 99px;
  padding: 5px; gap: 4px;
  box-shadow: var(--baixo-p);
}
.segmentado button{ color: var(--tinta-2); border-radius: 99px; }
.segmentado button.ativo{
  background: linear-gradient(180deg, #FFFFFF, var(--carta-alto));
  color: var(--tinta);
  box-shadow: 0 -4px 8px var(--luz), 0 4px 8px var(--sombra-d);
}

.btn-primario{
  background: linear-gradient(180deg, #FFFFFF, var(--carta-alto));
  color: var(--tinta);
  box-shadow: 0 -7px 14px var(--luz), 0 7px 14px var(--sombra-d);
  padding: 11px 18px;
}
.btn-primario:hover{ transform: translateY(-3px); box-shadow: var(--alto); }
.btn-primario:active{ transform:none; box-shadow: var(--baixo-p); }

.ico-btn{ border-radius: 14px; color: var(--tinta-2); }
.ico-btn:hover{ background: transparent; box-shadow: var(--baixo-p); color: var(--tinta); }

/* ───────── a planilha ───────── */
.corpo{ padding: 0 14px 14px; }
.grade-wrap{ border-radius: 22px; box-shadow: var(--baixo); background: var(--fundo); }

.cel{
  background: var(--carta-alto);
  border-right: 1px solid #DCE0E9;
  border-bottom: 1px solid #DCE0E9;
  min-height: 46px;
}
.linha-hover .cel{ background: #FFFFFF; }
.cel:hover{ box-shadow: inset 0 0 0 1px var(--borda-2); }
.cel.vazia{ color: var(--tinta-3); }

.cel-cabeca, .cel-canto, .cel-add{
  background: var(--carta-alto);
  border-bottom: 1px solid #D2D7E2;
  color: var(--tinta-2);
}
.cel-cabeca:hover, .cel-add:hover{ background: var(--linho); color: var(--tinta); }
.cel-num{ background: var(--carta-alto); color: var(--tinta-3); }
.linha-hover .cel-num{ background: #FFFFFF; }
.cel-num .abrir{
  background: linear-gradient(180deg, #FFFFFF, var(--carta-alto));
  border: 0; border-radius: 9px;
  box-shadow: 0 -4px 8px var(--luz), 0 4px 8px var(--sombra-d);
  color: var(--tinta-2);
}
.cel-fim{ background: var(--fundo); }
.cel-fantasma{ background: var(--carta-alto); }
.cel-fantasma:hover{ background: #FFFFFF; }

.linha-nova:hover, .linha-mais:hover{ background: #FFFFFF; }

/* as pílulas da paleta dela continuam chapadas — só ganham relevo */
.pill{ box-shadow: 0 -4px 7px var(--luz), 0 4px 9px var(--sombra-d); }
.chip-neutro{
  background: linear-gradient(180deg, #FFFFFF, var(--carta-alto));
  border: 0;
  box-shadow: 0 -4px 8px var(--luz), 0 4px 8px var(--sombra-d);
  color: var(--tinta-2);
}
.link-cel{ color: var(--tinta); border-bottom-color: #A9B0C4; }
.link-cel:hover{ color:#6E76C1; border-color:#6E76C1; }
.check{
  background: var(--carta-alto); border: 0; border-radius: 8px;
  box-shadow: var(--baixo-p);
}
.check.on{ background: linear-gradient(180deg, #9DB6A8, #8DA599); color:#FFFBF3; box-shadow: 0 -4px 8px var(--luz), 0 4px 8px var(--sombra-d); }
.estrelas{ color:#C6CAD6; }
.btn-cel{
  background: linear-gradient(180deg, #FFFFFF, var(--carta-alto));
  border: 0;
  box-shadow: 0 -5px 10px var(--luz), 0 5px 10px var(--sombra-d);
  color: var(--tinta);
}
.btn-cel:active{ box-shadow: var(--baixo-p); }

/* ───────── galeria e quadro ───────── */
.card, .cartao{
  background: linear-gradient(180deg, #FFFFFF, var(--carta-alto));
  border: 0; border-radius: var(--raio-g);
  box-shadow: var(--sombra-1);
}
.cartao{ border-radius: var(--raio); }
.card:hover, .cartao:hover{ box-shadow: var(--alto); border: 0; }
.card-capa, .cartao-capa{ background: var(--linho); }

.coluna{
  background: var(--fundo);
  border: 0; border-radius: var(--raio-g);
  box-shadow: var(--baixo-p);
}
.coluna.alvo{ background: var(--linho); }
.coluna-add{
  border: 0;
  background: linear-gradient(180deg, #FFFFFF, var(--carta-alto));
  box-shadow: 0 -6px 12px var(--luz), 0 6px 12px var(--sombra-d);
  color: var(--tinta-2);
}
.coluna-add:hover{ box-shadow: var(--baixo-p); color: var(--tinta); background: linear-gradient(180deg, #FFFFFF, var(--carta-alto)); }

/* ───────── painel do registro ───────── */
.painel{
  background: linear-gradient(180deg, #FFFFFF, var(--carta-alto));
  border-left: 0;
  box-shadow: -14px 0 34px rgba(160,166,182,.45);
  border-radius: var(--raio-g) 0 0 var(--raio-g);
}
.painel-topo, .painel-pe{ border-color: rgba(198,202,214,.5); }
.campo-valor{
  background: var(--carta-alto);
  border: 0; border-radius: var(--raio-p);
  box-shadow: var(--baixo-p);
}
.campo-valor:hover, .campo-valor.foco{ box-shadow: var(--baixo); }
.painel-scrim, .scrim{ background: rgba(126,132,148,.28); }

/* ───────── popover, aviso, lightbox ───────── */
.pop{
  background: linear-gradient(180deg, #FFFFFF, var(--carta-alto));
  border: 0; border-radius: var(--raio-g);
  box-shadow: var(--alto-g);
}
.pop-item{ border-radius: var(--raio-p); }
.pop-item:hover{ background: transparent; box-shadow: var(--baixo-p); }
.pop-input{
  background: var(--carta-alto); border: 0; border-radius: var(--raio-p);
  box-shadow: var(--baixo-p);
}
.pop-input:focus{ box-shadow: var(--baixo); }
.pop-acao{
  background: linear-gradient(180deg, #FFFFFF, var(--carta-alto));
  border: 0; border-radius: var(--raio-p);
  box-shadow: 0 -6px 12px var(--luz), 0 6px 12px var(--sombra-d);
}
.pop-acao:hover{ box-shadow: var(--baixo-p); }
.aviso{
  background: linear-gradient(180deg, #FFFFFF, var(--carta-alto));
  color: var(--tinta); border: 0;
  box-shadow: var(--alto-g);
  border-radius: 99px;
}
.lightbox{ background: rgba(126,132,148,.5); }

/* ───────── celular ───────── */
@media (max-width: 900px){
  .app{ padding: 10px; gap: 10px; }
  .palco{ border-radius: 24px; }
  .lateral{ border-radius: 0 24px 24px 0; }
  .corpo{ padding: 0 8px 8px; }
}