/* Acabamento (27/10): sombra em camadas, entrada suave da página, hover/press, foco azul e transição entre telas.
   Só polimento: não muda forma nem medida de nenhuma peça. Carrega depois de conectee.css. Vale só dentro do app (body.app-body). */
.app-body {
  --ac-ease: cubic-bezier(.2, .7, .2, 1);
  --ac-rapido: 150ms;
  --ac-sombra-sm: 0 1px 2px rgba(11, 15, 30, .04), 0 2px 8px -2px rgba(11, 15, 30, .06);
  --ac-sombra: 0 1px 2px rgba(11, 15, 30, .04), 0 4px 10px -2px rgba(11, 15, 30, .05), 0 16px 32px -16px rgba(11, 15, 30, .12);
  --ac-sombra-alta: 0 2px 4px rgba(11, 15, 30, .05), 0 10px 20px -6px rgba(11, 15, 30, .08), 0 28px 48px -20px rgba(11, 15, 30, .20);
  --ac-sombra-escura: 0 2px 4px rgba(11, 15, 30, .10), 0 10px 24px -6px rgba(11, 15, 30, .18), 0 28px 56px -20px rgba(11, 15, 30, .36);
  --ac-sombra-escura-alta: 0 4px 8px rgba(11, 15, 30, .12), 0 16px 32px -8px rgba(11, 15, 30, .24), 0 36px 64px -24px rgba(11, 15, 30, .42);
}

/* ---------- 1. Sombras ---------- */
.app-body :is(.i-card, .card, .stat, .tutorial, .product, .em-none, .kpis > .kpi) { box-shadow: var(--ac-sombra); }
.app-body :is(.i-net, .mp-data, .ct-ficha, .pl-main, .ac-you, .i-tile.dark) { box-shadow: var(--ac-sombra-escura); }
.app-body :is(.cx-pills, .cx-switch, .cx-company, .cx .me summary, .i-pill, .pl-status, .mp-seg, .em-filters, .ct-search, .em-search) { box-shadow: var(--ac-sombra-sm); }
.app-body .ct-k { box-shadow: var(--ac-sombra-sm); transition: box-shadow var(--ac-rapido) ease; }
.app-body .ct-k:hover { box-shadow: var(--ac-sombra); }
/* Cartão de empresa: mantém o contorno de hover/escolhido por cima da sombra. */
.app-body .em-card { box-shadow: var(--ac-sombra); transition: box-shadow .2s var(--ac-ease), transform .2s var(--ac-ease); }
.app-body .em-card:hover { box-shadow: inset 0 0 0 1px var(--control-hover), var(--ac-sombra-alta); transform: translateY(-2px); }
.app-body .em-card.on, .app-body .em-card.on:hover { box-shadow: inset 0 0 0 3px var(--cx-tinta), var(--ac-sombra); }

/* ---------- 2. Entrada da página (uma vez, em cascata) ---------- */
@keyframes ac-sobe { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes ac-aparece { from { opacity: 0; } to { opacity: 1; } }
/* fill-mode "backwards": no fim não sobra transform (não quebra janelas fixas dentro dos cartões). */
.app-body :is(.i-head, .topline) { animation: ac-aparece 240ms ease-out backwards; }
.app-body :is(.i-grid, .mp-grid, .ct-grid, .ct-board, .pl-grid, .ac-grid, .em-grid, .kpis, .stats, .admin-grid, .grid-2) > *,
.app-body .stack > :is(.card, .tutorial, .table, .msg) { animation: ac-sobe 300ms var(--ac-ease) backwards; animation-delay: 40ms; }
.app-body :is(.i-grid, .mp-grid, .ct-grid, .ct-board, .pl-grid, .ac-grid, .em-grid, .kpis, .stats, .admin-grid, .grid-2) > :nth-child(2) { animation-delay: 110ms; }
.app-body :is(.i-grid, .mp-grid, .ct-grid, .ct-board, .pl-grid, .ac-grid, .em-grid, .kpis, .stats, .admin-grid, .grid-2) > :nth-child(3) { animation-delay: 180ms; }
.app-body :is(.i-grid, .mp-grid, .ct-grid, .ct-board, .pl-grid, .ac-grid, .em-grid, .kpis, .stats, .admin-grid, .grid-2) > :nth-child(4) { animation-delay: 250ms; }
.app-body :is(.i-grid, .mp-grid, .ct-grid, .ct-board, .pl-grid, .ac-grid, .em-grid, .kpis, .stats, .admin-grid, .grid-2) > :nth-child(5) { animation-delay: 320ms; }
.app-body :is(.i-grid, .mp-grid, .ct-grid, .ct-board, .pl-grid, .ac-grid, .em-grid, .kpis, .stats, .admin-grid, .grid-2) > :nth-child(6) { animation-delay: 390ms; }
.app-body :is(.i-grid, .mp-grid, .ct-grid, .ct-board, .pl-grid, .ac-grid, .em-grid, .kpis, .stats, .admin-grid, .grid-2) > :nth-child(7) { animation-delay: 460ms; }
.app-body :is(.i-grid, .mp-grid, .ct-grid, .ct-board, .pl-grid, .ac-grid, .em-grid, .kpis, .stats, .admin-grid, .grid-2) > :nth-child(n+8) { animation-delay: 520ms; }

/* ---------- 3. Hover e clique ---------- */
.app-body a.i-card { transition: transform .2s var(--ac-ease), box-shadow .2s var(--ac-ease), filter var(--ac-rapido) ease; }
.app-body a.i-card:hover { transform: translateY(-2px); box-shadow: var(--ac-sombra-alta); }
.app-body a.i-card.dark:hover, .app-body a.i-tile.dark:hover { box-shadow: var(--ac-sombra-escura-alta); }
.app-body a.i-card:active { transform: translateY(0) scale(.98); transition-duration: 90ms; }

.app-body :is(.btn, .i-pill, .cx-switch, .cx-company, .ac-btn, .ct-zap, .i-arrow, .mp-edit, .mp-add-btn, .pl-mail-btn, .back-link, .switch-btn, .cx .me summary,
  .cx-pills a, .pills a, .mp-seg a, .mp-devs button, .em-filters button, .ct-chip, .cb button, .cx .tabbar a, .i-hot) {
  transition: background-color var(--ac-rapido) ease, color var(--ac-rapido) ease, border-color var(--ac-rapido) ease, box-shadow var(--ac-rapido) ease, filter var(--ac-rapido) ease, transform var(--ac-rapido) var(--ac-ease);
}
.app-body :is(.btn, .i-pill, .cx-switch, .cx-company, .ac-btn, .ct-zap, .mp-edit, .mp-add-btn, .pl-mail-btn, .switch-btn,
  .cx-pills a, .pills a, .mp-seg a, .mp-devs button, .em-filters button, .ct-chip, .cb button, .cx .tabbar a):active { transform: scale(.98); }
.app-body :is(.i-pill, .cx-switch, .cx-company):hover { box-shadow: var(--ac-sombra); }

/* ---------- 4. Campos, chaves e abas ---------- */
.app-body :is(.field input, .field select, .field textarea, .input-sm) { transition: border-color var(--ac-rapido) ease, box-shadow var(--ac-rapido) ease; }
.app-body :is(.field input:not([type=checkbox], [type=radio], [type=file]), .field select, .field textarea, .input-sm):focus { border-color: #0B6BFF; box-shadow: 0 0 0 3px rgba(11, 107, 255, .16); }
.app-body .em-search { transition: box-shadow var(--ac-rapido) ease; }
.app-body .em-search:focus { outline: none; box-shadow: 0 0 0 2px #0B6BFF, var(--ac-sombra-sm); }
.app-body .ct-search { transition: box-shadow var(--ac-rapido) ease; }
.app-body .ct-search:focus-within { box-shadow: 0 0 0 2px #0B6BFF, var(--ac-sombra-sm); }
.app-body .switch, .app-body .mp-switch, .app-body .i-switch { transition: background-color .18s ease; }
.app-body .switch::after { transition: left .2s var(--ac-ease); }
.app-body .mp-switch::after { transition: transform .2s var(--ac-ease); }
.app-body .pl-big span { transition: background-color .22s ease; }
.app-body .pl-big span::after { transition: left .24s var(--ac-ease), background-color .22s ease; }

/* Foco do teclado: anel azul com 2px de folga; dentro das peças escuras o anel é branco (azul nunca direto no preto). */
.app-body :focus-visible:not(input:not([type=checkbox], [type=radio], [type=file]), textarea, select) { outline: 2px solid #0B6BFF; outline-offset: 2px; }
.app-body :is(.i-net, .mp-data, .ct-ficha, .pl-main, .ac-you, .i-tile.dark, .i-hot.top, .cb, .cx .tabbar, .em-bar-in) :focus-visible:not(input:not([type=checkbox], [type=radio], [type=file]), textarea, select) { outline-color: #FFFFFF; }
.app-body :is(.i-net, .mp-data, .ct-ficha, .pl-main, .ac-you) :is(.field input:not([type=checkbox], [type=radio], [type=file]), .field select, .field textarea, .input-sm):focus { border-color: #FFFFFF; box-shadow: 0 0 0 3px rgba(255, 255, 255, .18); }

/* ---------- 5. Transição entre telas (só nos navegadores que suportam) ---------- */
@view-transition { navigation: auto; }
.app-body .cx-top { view-transition-name: cx-top; }
.app-body .tabbar { view-transition-name: cx-tabbar; }
::view-transition-old(root) { animation: 160ms ease-in both ac-vt-sai; }
::view-transition-new(root) { animation: 220ms ease-out both ac-aparece; }
@keyframes ac-vt-sai { to { opacity: 0; } }

/* Movimento reduzido: nada anima. */
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  .app-body *, .app-body *::before, .app-body *::after { animation: none !important; transition: none !important; }
  .app-body a.i-card:hover, .app-body .em-card:hover { transform: none; }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}