/* Application shell. No page-entrance or scroll animation. */
.ui-app .wrapper { display: flex; min-height: 100dvh; }
.ui-app #sidebar { position: fixed; inset: 0 auto 0 0; width: var(--sidebar-width); display: flex; flex-direction: column; z-index: 1030; background: var(--ui-surface); color: var(--ui-ink); border-right: 1px solid var(--ui-line); }
.ui-app .sidebar-header { display: flex; align-items: center; padding: 10px 16px; min-height: 64px; border-bottom: 1px solid var(--ui-line); }
.ui-app .logo-container { display: flex; align-items: center; gap: 12px; }
.ui-app .sidebar-marca { width: 36px; height: 36px; flex-shrink: 0; background: url("../../img/logo-solara.a73c7e9f9843.svg") center / contain no-repeat; }
.ui-app .sidebar-logo { width: 36px; height: 36px; object-fit: contain; }
.ui-app .sidebar-logo-unidade { max-width: 100%; max-height: 28px; width: auto; height: auto; object-fit: contain; }
/* Marca da unidade: o cabeçalho empilha. A barra tem 216px e sobram 184px
   úteis; ao lado de uma assinatura larga o texto ficava com 22px, quebrava
   em três linhas e era cortado pelo min-height do cabeçalho. */
.ui-app .logo-container-unidade { flex-direction: column; align-items: flex-start; gap: 3px; flex: 1; min-width: 0; }
.ui-app .logo-container-unidade .sidebar-brand { width: 100%; }
.ui-app .logo-container-unidade .sidebar-brand-empresa { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
[data-theme="dark"] .ui-app .sidebar-logo { content: url("../../img/asa-solara-clara.63be9d014b88.svg"); }
.ui-app .sidebar-brand { min-width: 0; }
.ui-app .sidebar-brand-text { display: block; font-size: 16px; font-weight: 700; letter-spacing: -.035em; color: var(--ui-ink); overflow-wrap: anywhere; }
.ui-app .sidebar-brand-empresa { display: block; font-size: 11px; color: var(--ui-muted); margin-top: 0; }
.ui-app #sidebar > .nav { display: block; margin: 0; padding: 20px 12px 16px; flex: 1; overflow-y: auto; overflow-x: hidden; scrollbar-width: thin; scrollbar-color: var(--ui-line-strong) transparent; }
.ui-app #sidebar :is(.nav-link,.nav-more-links a) { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 10px 12px; color: var(--ui-secondary); font-size: 13px; line-height: 1.5; font-weight: 500; border: 1px solid transparent; border-radius: 10px; text-decoration: none; background: transparent; box-shadow: none; transition: color var(--ui-control-time), background-color var(--ui-control-time), border-color var(--ui-control-time); }
.ui-app #sidebar .nav-link i { font-size: 18px; width: 20px; text-align: center; flex-shrink: 0; }
.ui-app #sidebar :is(.nav-link,.nav-more-links a):hover { color: var(--ui-ink); background: var(--ui-soft); }
.ui-app #sidebar :is(.nav-link,.nav-more-links a).active { color: var(--ui-accent); background: transparent; border-color: transparent; font-weight: 700; }
.ui-app #sidebar a::before, .ui-app #sidebar a::after { content: none; }
.ui-app #sidebar .nav-section { color: var(--ui-muted); font-size: 11px; font-weight: 600; padding: 18px 12px 8px; }
.ui-app .ui-nav-group { list-style: none; margin-top: 4px; }
.ui-app .ui-nav-direct { list-style: none; }
.ui-app .ui-nav-direct + .ui-nav-group { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--ui-line); }
.ui-app .ui-nav-group > details > summary { display: flex; align-items: center; gap: 12px; min-height: 46px; padding: 10px 12px; color: var(--ui-secondary); font-size: 13px; font-weight: 600; cursor: pointer; list-style: none; border-radius: 10px; transition: background-color var(--ui-control-time),color var(--ui-control-time); }
.ui-app .ui-nav-group > details > summary:hover { background: var(--ui-soft); color: var(--ui-ink); }
.ui-app .ui-nav-group.is-current > details > summary { color: var(--ui-accent); }
.ui-app .ui-nav-group > details > summary > .bi:first-child { width: 20px; font-size: 18px; text-align: center; flex-shrink: 0; }
.ui-app .ui-nav-group-label { flex: 1; }
.ui-app .ui-nav-chevron { font-size: 12px; color: var(--ui-muted); transition: transform var(--ui-overlay-time); }
.ui-app .ui-nav-group details[open] > summary .ui-nav-chevron { transform: rotate(90deg); }
.ui-app .ui-nav-group > details > summary::-webkit-details-marker { display: none; }
.ui-app .ui-nav-group summary::after { content: none; }
.ui-app .ui-nav-links { padding: 0 0 0 10px; margin: 4px 0 12px 21px; border-left: 1px solid var(--ui-line); list-style: none; }
.ui-app #sidebar .ui-nav-links .nav-link { gap: 10px; padding: 10px 8px; }
.ui-app #sidebar .ui-nav-links .nav-link i { font-size: 16px; width: 18px; }
.ui-app .sidebar-footer { padding: 12px; border-top: 1px solid var(--ui-line); }
.ui-app .sidebar-user-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ui-app .user-info { display: flex; align-items: center; gap: 12px; font-size: 13px; min-width: 0; }
.ui-app .user-info span { overflow: hidden; text-overflow: ellipsis; }
.ui-app .sidebar-avatar { display: grid; place-items: center; width: 36px; height: 36px; flex-shrink: 0; background: var(--ui-action); color: var(--ui-action-text); font-weight: 700; border: 1px solid var(--ui-action); border-radius: 50%; }
.ui-app .sidebar-user-copy { display: flex; flex-direction: column; }
.ui-app .sidebar-user-copy strong { font-size: 13px; font-weight: 600; }
.ui-app .sidebar-user-copy small { font-size: 11px; color: var(--ui-muted); }
.ui-app .sidebar-logout { display: grid; place-items: center; width: 44px; height: 44px; flex-shrink: 0; color: var(--ui-secondary); border: 1px solid var(--ui-line); border-radius: 10px; background: transparent; transition: background-color var(--ui-control-time),color var(--ui-control-time); }
.ui-app .sidebar-logout:hover { color: var(--ui-ink); background: var(--ui-soft); }
.ui-app #content { margin-left: var(--sidebar-width); flex: 1; min-width: 0; max-width: calc(100% - var(--sidebar-width)); width: calc(100% - var(--sidebar-width)); }
.ui-app #content > .navbar { height: 64px; min-height: 64px; padding: 0 24px; border-bottom: 1px solid var(--ui-line); background: var(--ui-surface); position: sticky; top: 0; z-index: 1020; box-shadow: none; }
.ui-app #content > .navbar .container-fluid { display: flex; align-items: center; padding: 0; gap: 16px; flex-wrap: nowrap; }
.ui-app .ui-topbar-location { display: flex; align-items: center; flex: 1; min-width: 0; }
.ui-app .ui-breadcrumb { display: flex; align-items: center; gap: 12px; list-style: none; margin: 0; padding: 0; min-width: 0; overflow: hidden; color: var(--ui-muted); font-size: 13px; }
.ui-app .ui-breadcrumb li { display: flex; align-items: center; gap: 12px; min-width: 0; white-space: nowrap; }
.ui-app .ui-breadcrumb li:not(:last-child) { flex-shrink: 0; }
.ui-app .ui-breadcrumb li + li::before { content: '/'; color: var(--ui-line-strong); font-weight: 400; }
.ui-app .ui-breadcrumb li:last-child { display: block; overflow: hidden; text-overflow: ellipsis; font-weight: 600; color: var(--ui-ink); }
.ui-app .ui-breadcrumb li:last-child::before { margin-right: 12px; }
.ui-app .ui-breadcrumb a { color: var(--ui-muted); }
.ui-app .ui-topbar-tools { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.ui-app .ui-nav-icon-button { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; flex-shrink: 0; padding: 0; color: var(--ui-secondary); background: transparent; border: 1px solid transparent; border-radius: 8px; font-size: 20px; }
.ui-app .ui-nav-icon-button:hover { background: var(--ui-soft); }
.ui-app .main-content { max-width: 1440px; width: 100%; margin: auto; padding: 24px; min-height: calc(100dvh - 64px); }
.ui-app .main-content > .container-fluid { padding-inline: 0; max-width: 100%; margin-inline: 0; }
.ui-app #sidebarCollapse { display: none; }
.ui-app .theme-toggle { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 44px; height: 44px; padding: 0; border-radius: 12px; border: 1px solid var(--ui-line); color: var(--ui-secondary); background: var(--ui-surface); transition: background-color var(--ui-control-time),color var(--ui-control-time),box-shadow var(--ui-control-time); }
.ui-app .theme-toggle:hover { background: var(--ui-soft); }
.ui-app .busca-gatilho { display: inline-flex; align-items: center; gap: 12px; flex: 0 0 320px; min-width: 0; min-height: 44px; margin: 0; padding: 8px 14px; border: 1px solid transparent; border-radius: 22px; background: var(--ui-bg); color: var(--ui-muted); text-align: left; font-size: 13px; transition: border-color var(--ui-control-time),background-color var(--ui-control-time),box-shadow var(--ui-control-time); }
.ui-app .busca-gatilho:hover, .ui-app .busca-gatilho[aria-expanded="true"] { border-color: var(--ui-line-strong); background: var(--ui-soft); }
.ui-app .busca-gatilho-texto { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-app .busca-gatilho-tecla { margin-left: auto; flex-shrink: 0; white-space: nowrap; background: var(--ui-surface); border: 1px solid var(--ui-line); border-radius: 4px; color: var(--ui-muted); font: inherit; font-size: 12px; padding: 2px 6px; }
.ui-app .empresa-switcher-topbar { position: relative; flex-shrink: 0; min-width: 0; }
.ui-app :is(.empresa-switcher-topbar-btn,.empresa-topbar-static) { display: flex; align-items: center; gap: 10px; min-height: 44px; max-width: 252px; padding: 4px 12px 4px 5px; background: var(--ui-surface); color: var(--ui-ink); border: 1px solid var(--ui-line); border-radius: 12px; text-align: left; font-size: 13px; }
.ui-app .empresa-switcher-topbar-btn { transition: background-color var(--ui-control-time),border-color var(--ui-control-time); }
.ui-app .empresa-switcher-topbar-btn:hover, .ui-app .empresa-switcher-topbar-btn[aria-expanded="true"] { border-color: var(--ui-accent); background: var(--ui-accent-soft); }
.ui-app .empresa-switcher-mark { display: grid; place-items: center; width: 34px; height: 34px; flex-shrink: 0; background: var(--ui-action); color: var(--ui-action-text); border-radius: 50%; font-size: 16px; }
.ui-app .empresa-switcher-chevron { font-size: 12px; color: var(--ui-muted); flex-shrink: 0; margin-left: auto; transition: transform var(--ui-overlay-time); }
.ui-app .empresa-switcher-topbar-btn[aria-expanded="true"] .empresa-switcher-chevron { transform: rotate(180deg); }
.ui-app .empresa-topbar-static { border-color: transparent; }
.ui-app .empresa-switcher-topbar-copy { display: flex; flex-direction: column; min-width: 0; }
.ui-app .empresa-switcher-topbar-copy small { color: var(--ui-muted); font-size: 12px; line-height: 1.3; }
.ui-app .empresa-switcher-topbar-name { font-size: 14px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-app .empresa-switcher-dot { width: 8px; height: 8px; flex-shrink: 0; border-radius: 50%; background: var(--s-empresa, var(--ui-accent)); }
.ui-app .empresa-switcher-list { display: none; position: fixed; left: auto; z-index: 1100; padding: 8px; margin: 0; list-style: none; overflow-y: auto; overscroll-behavior: contain; background: var(--ui-surface); color: var(--ui-ink); border: 1px solid var(--ui-line); border-radius: 16px; box-shadow: var(--ui-overlay-shadow); }
.ui-app .empresa-switcher-heading { padding: 8px 12px 12px; color: var(--ui-muted); font-size: 12px; font-weight: 600; }
.ui-app .empresa-switcher-list.open { display: block; animation: ui-pop var(--ui-overlay-time) ease-out; }
.ui-app .empresa-switcher-option { width: 100%; min-height: 44px; display: flex; align-items: center; gap: 12px; padding: 12px; border: 0; border-radius: 8px; background: transparent; color: var(--ui-ink); text-align: left; font-size: 14px; }
.ui-app .empresa-switcher-option:hover { background: var(--ui-soft); }
.ui-app .empresa-switcher-option.is-active { background: var(--ui-accent-soft); color: var(--ui-accent); font-weight: 600; }
.ui-app .empresa-option-mark { display: grid; place-items: center; flex-shrink: 0; width: 36px; height: 36px; border: 1px solid var(--ui-line); border-radius: 8px; background: var(--ui-surface); color: var(--ui-secondary); font-weight: 600; }
.ui-app .empresa-option-copy { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ui-app .empresa-option-copy strong { font-size: 14px; font-weight: 600; overflow-wrap: anywhere; }
.ui-app .empresa-option-copy small { font-size: 12px; color: var(--ui-muted); }
.ui-app .empresa-confirm-backdrop { position: fixed; inset: 0; z-index: 11000; background: #10182880; display: flex; align-items: center; justify-content: center; padding: 20px; }
.ui-app .empresa-confirm-backdrop[hidden] { display: none; }
.ui-app .empresa-confirm-modal { width: min(440px, 100%); padding: 24px; background: var(--ui-surface); color: var(--ui-ink); border: 1px solid var(--ui-line); border-radius: 16px; box-shadow: var(--ui-overlay-shadow); animation: ui-pop var(--ui-overlay-time) ease-out; }
.ui-app .empresa-confirm-modal h3 { font-size: 18px; margin-bottom: 12px; }
.ui-app .empresa-confirm-modal p { color: var(--ui-secondary); }
.ui-app .empresa-confirm-actions { display: flex; justify-content: flex-end; gap: 8px; }
.ui-app :is(.bottom-nav,.bottom-nav-more-menu,.bottom-nav-more-overlay,.sidebar-overlay) { display: none; }
.ui-app .skip-link { position: fixed; top: -100px; left: 16px; z-index: 12000; padding: 12px 16px; color: var(--ui-action-text); background: var(--ui-action); border-radius: 8px; }
.ui-app .skip-link:focus { top: 12px; }
.ui-app #toastContainer { position: fixed; top: 80px; right: 24px; width: min(380px,calc(100vw - 32px)); z-index: 12000; }
.ui-app #toastContainer .toast { display: flex; align-items: center; gap: 12px; padding: 16px; background: var(--ui-surface); color: var(--ui-ink); border: 1px solid var(--ui-line); border-radius: 12px; box-shadow: var(--ui-overlay-shadow); opacity: 1; margin-bottom: 8px; }
.ui-app .toast-icon { color: var(--ui-accent); }
.ui-app .toast-error .toast-icon { color: var(--ui-danger); }
.ui-app .toast-success .toast-icon { color: var(--ui-success); }
.ui-app [aria-busy="true"] { cursor: progress; }
.ui-app .guarda-fio { display: inline-block; width: 12px; height: 12px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; margin-right: 8px; animation: ui-busy .9s linear infinite; }
@keyframes ui-pop { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
@keyframes ui-busy { to { transform: rotate(360deg); } }
.ui-login .login-layout { min-height: 100dvh; display: grid; place-items: center; padding: 32px 16px; }
.ui-login .login-panel { width: min(100%,440px); }
.ui-login .login-card { padding: 40px; background: var(--ui-surface); border: 1px solid var(--ui-line); border-radius: 12px; }
.ui-login .login-brand-lockup { display: flex; align-items: center; gap: 12px; margin-bottom: 32px; }
.ui-login .login-brand-lockup img { width: 40px; height: 40px; }
.ui-login .login-wordmark { display: block; font-size: 24px; font-weight: 700; letter-spacing: -.04em; }
.ui-login .login-brand-lockup small { display: block; color: var(--ui-muted); font-size: 12px; }
.ui-login .login-header { margin-bottom: 24px; }
.ui-login .login-header p { margin: 0; color: var(--ui-muted); }
.ui-login .form-group { position: relative; margin-bottom: 20px; }
.ui-login label { display: block; }
.ui-login #password { padding-right: 48px; }
.ui-login .password-toggle { position: absolute; right: 0; bottom: 0; width: 44px; height: 44px; border: 0; color: var(--ui-muted); background: transparent; border-radius: 8px; }
.ui-login .btn-login { width: 100%; }
.ui-login .btn-text { display: flex; align-items: center; gap: 12px; }
.ui-login .login-footer { margin-top: 24px; border-top: 1px solid var(--ui-line); padding-top: 20px; font-size: 12px; line-height: 1.6; color: var(--ui-muted); }
.ui-login .login-footer p { margin: 0; }
@media (min-width: 1024px) {
  .ui-app .busca-gatilho { order: -1; }
  .ui-app .ui-topbar-location { order: 0; }
  .ui-app .empresa-switcher-topbar, .ui-app .empresa-topbar-static { order: 1; }
  .ui-app .ui-topbar-tools { order: 2; }
}
@media (min-width: 1024px) and (max-width: 1279px) {
  .ui-app .busca-gatilho { flex-basis: 44px; width: 44px; padding: 12px; }
  .ui-app :is(.busca-gatilho-texto,.busca-gatilho-tecla) { display: none; }
}
@media (max-width: 1023px) {
  .ui-app #sidebar { z-index: 1060; width: min(280px,88vw); visibility: hidden; transform: translateX(-100%); transition: transform var(--ui-overlay-time) ease-out; }
  .ui-app #sidebar.active { visibility: visible; transform: none; }
  .ui-app #content { width: 100%; max-width: 100%; margin: 0; }
  .ui-app #content > .navbar { padding: 0 16px; }
  .ui-app #content > .navbar .container-fluid { gap: 8px; }
  .ui-app .ui-topbar-location { flex: 0 0 auto; }
  .ui-app .ui-breadcrumb { display: none; }
  .ui-app .main-content { padding: 16px 16px calc(32px + env(safe-area-inset-bottom)); }
  .ui-app #sidebarCollapse { display: inline-flex; min-width: 44px; }
  .ui-app .topbar-theme-toggle { display: inline-flex; }
  .ui-app .busca-gatilho { flex: 0 0 44px; width: 44px; height: 44px; padding: 12px; }
  .ui-app :is(.busca-gatilho-texto,.busca-gatilho-tecla) { display: none; }
  .ui-app :is(.empresa-switcher-topbar,.empresa-topbar-static) { flex: 1; min-width: 0; max-width: none; }
  .ui-app .empresa-switcher-topbar-btn { width: 100%; max-width: none; padding: 4px 8px; gap: 8px; }
  .ui-app .empresa-switcher-topbar-name { font-size: 13px; }
  .ui-app .bottom-nav { display: none; }
  .ui-app .bottom-nav-items { display: flex; align-items: stretch; justify-content: space-around; min-height: 72px; }
  .ui-app .bottom-nav-item { position: relative; isolation: isolate; display: flex; flex: 1; align-items: center; justify-content: center; flex-direction: column; gap: 4px; padding: 8px 4px; color: var(--ui-muted); background: transparent; border: 0; text-decoration: none; font-size: 12px; transition: color var(--ui-control-time); }
  .ui-app .bottom-nav-item::before { content: ''; position: absolute; z-index: -1; top: 6px; left: 50%; transform: translateX(-50%); width: min(56px,80%); height: 32px; border-radius: 16px; background: transparent; transition: background-color var(--ui-control-time); }
  .ui-app .bottom-nav-item i { font-size: 20px; line-height: 28px; }
  .ui-app .bottom-nav-item.active, .ui-app .bottom-nav-item[aria-expanded="true"] { color: var(--ui-accent); font-weight: 700; }
  .ui-app .bottom-nav-item.active::before, .ui-app .bottom-nav-item[aria-expanded="true"]::before { background: var(--ui-accent-soft); }
  .ui-app .bottom-nav-item:hover { text-decoration: none; color: var(--ui-accent); }
  .ui-app .bottom-nav-more-overlay.active, .ui-app .sidebar-overlay.active { display: block; position: fixed; inset: 0; z-index: 1025; background: #10182880; }
  .ui-app .sidebar-overlay.active { z-index: 1055; }
  .ui-app .bottom-nav-more-overlay.active { z-index: 1045; }
  .ui-app .bottom-nav-more-menu.active { display: block; position: fixed; inset: auto 0 0; z-index: 1050; max-height: 85dvh; padding-bottom: calc(16px + env(safe-area-inset-bottom)); overflow-y: auto; background: var(--ui-surface); color: var(--ui-ink); border-radius: 12px 12px 0 0; box-shadow: var(--ui-overlay-shadow); animation: ui-pop var(--ui-overlay-time) ease-out; }
  .ui-app .bottom-nav-more-header { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--ui-line); font-size: 18px; font-weight: 700; }
  .ui-app .bottom-nav-more-close { width: 44px; height: 44px; background: none; color: var(--ui-muted); border: 0; }
  .ui-app .bottom-nav-more-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 4px; padding: 12px; }
  .ui-app .bottom-nav-more-item { display: flex; align-items: center; gap: 12px; padding: 12px; min-height: 52px; color: var(--ui-ink); border-radius: 8px; font-size: 13px; }
  .ui-app .bottom-nav-more-item.active { background: var(--ui-accent-soft); color: var(--ui-accent); }
  .ui-app .bottom-nav-more-icon { font-size: 20px; }
}
@media (max-width: 600px) {
  .ui-app .empresa-switcher-mark { display: none; }
}
@media (max-width: 400px) {
  .ui-login .login-card { padding: 24px; }
}

/* --- Transição da troca de empresa -------------------------------------
   Uma tela só, do DESTINO. A saída a pinta com a cor e o logotipo da unidade
   escolhida; a página nova nasce com os mesmos valores pelo `branding`, então
   as duas metades são a MESMA tela — de fora parece que ela nunca piscou.

   O logotipo vai a branco por filtro: a marca da ANCALLA é rosa e sumia num
   fundo rosa. Fundo escuro resolveria o contraste mas jogaria a identidade
   fora; assim a cor da unidade continua sendo a tela. */
/* O chão é a tinta escura do produto (`--ui-ink`), NUNCA a cor da unidade.
   Pintar o campo inteiro com a marca deu os dois defeitos de 23/09/2026: o
   azul default virava um bloco que nao existe na paleta, e o rosa da ANCALLA
   (#DCBCBC) punha branco sobre claro — 1,9:1 de contraste, logotipo e texto
   sumindo. A unidade entra como VÉU e ACENTO: da para reconhecer de quem e a
   tela sem que ela dispute com o que esta escrito por cima. */
.ui-app .troca-tela {
  --troca-cor: var(--s-empresa, #946b19);
  --troca-cor-2: var(--s-empresa-2, var(--troca-cor));
  /* Degrade fixo, derivado de --ui-ink: #101f31. */
  --troca-fundo: #0e1a29;
  --troca-fundo-alto: #16273c;
  --troca-fundo-baixo: #090f19;
  position: fixed; inset: 0; z-index: 2000;
  display: grid; place-items: center;
  background:
    radial-gradient(88% 58% at 50% 32%,
      color-mix(in srgb, var(--troca-cor) 20%, transparent) 0%, transparent 70%),
    radial-gradient(130% 100% at 50% 116%,
      color-mix(in srgb, var(--troca-cor-2) 14%, transparent) 0%, transparent 62%),
    linear-gradient(168deg, var(--troca-fundo-alto) 0%, var(--troca-fundo) 52%, var(--troca-fundo-baixo) 100%);
  opacity: 0; visibility: hidden;
  transition: opacity .3s ease, visibility 0s linear .3s;
}
.ui-app .troca-tela.is-visivel { opacity: 1; visibility: visible; transition: opacity .3s ease; }
/* Na ENTRADA a camada já nasce coberta: animar a aparição faria a página nova
   piscar antes de ser tapada. */
.ui-app .troca-tela.is-instantanea { transition: none; }

/* Brilho suave atrás da marca — tira o ar de "tela de carregamento crua". */
.ui-app .troca-tela-halo {
  position: absolute; width: min(70vw, 620px); aspect-ratio: 1;
  background: radial-gradient(circle,
    color-mix(in srgb, var(--troca-cor) 26%, transparent) 0%,
    color-mix(in srgb, var(--troca-cor) 8%, transparent) 42%,
    transparent 68%);
  filter: blur(26px); pointer-events: none;
}
/* Fio de luz na cor da unidade: o detalhe que assina a tela sem clarear o
   fundo atras do texto. */
.ui-app .troca-tela-corpo::before {
  content: ""; position: absolute; top: -26px; left: 50%; translate: -50% 0;
  width: 128px; height: 1px;
  background: linear-gradient(90deg, transparent,
    color-mix(in srgb, var(--troca-cor) 72%, #fff) 50%, transparent);
  opacity: .55;
}

.ui-app .troca-tela-corpo {
  position: relative; display: flex; flex-direction: column; align-items: center;
  gap: 18px; padding: 0 28px; text-align: center;
  animation: trocaTelaEntra .5s cubic-bezier(.2, .7, .3, 1) both;
}
@keyframes trocaTelaEntra {
  from { opacity: 0; transform: translateY(10px) scale(.985); }
  to   { opacity: 1; transform: none; }
}

.ui-app .troca-tela-logo {
  max-width: 230px; max-height: 52px; width: auto; height: auto; object-fit: contain;
  /* A marca da ANCALLA e rosa claro: sobre a tinta escura ela some. Vai a
     branco puro, que no fundo escuro le com 15:1. */
  filter: brightness(0) invert(1)
          drop-shadow(0 0 22px color-mix(in srgb, var(--troca-cor) 55%, transparent));
  opacity: .98;
}
.ui-app .troca-tela-nome {
  font-size: 15px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  color: #fff; text-shadow: 0 1px 18px rgba(0,0,0,.45);
}
/* Com logotipo, o nome vira legenda: a marca já diz quem é. */
.ui-app .troca-tela-logo:not([hidden]) ~ .troca-tela-nome {
  font-size: 11px; font-weight: 500; opacity: .72; letter-spacing: .22em;
}
.ui-app .troca-tela-dica {
  font-size: 11px; letter-spacing: .1em;
  color: color-mix(in srgb, var(--troca-cor) 42%, #fff);
  opacity: .78;
}

/* Barra indeterminada no lugar do círculo girando: lê como progresso, e não
   como "pendurado". */
.ui-app .troca-tela-barra {
  position: relative; width: 132px; height: 2px; border-radius: 2px;
  background: rgba(255,255,255,.14); overflow: hidden;
}
.ui-app .troca-tela-barra i {
  position: absolute; inset: 0 auto 0 0; width: 40%; border-radius: inherit;
  background: linear-gradient(90deg, transparent,
    color-mix(in srgb, var(--troca-cor) 60%, #fff), transparent);
  animation: trocaTelaBarra 1.15s ease-in-out infinite;
}
@keyframes trocaTelaBarra {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(330%); }
}

/* Quem pediu menos movimento continua tendo a COBERTURA, que é o que evita a
   sensação de travado. O que sai é o movimento. */
@media (prefers-reduced-motion: reduce) {
  .ui-app .troca-tela { transition: none; }
  .ui-app .troca-tela-corpo { animation: none; }
  .ui-app .troca-tela-barra i {
    animation: none; width: 100%;
    background: color-mix(in srgb, var(--troca-cor) 60%, #fff);
  }
}