/* Componentes compartilhados (ui.js) e peças que qualquer tela usa: ilha, botão, selo, avatar de app,
   pílula, menu, modal, toast, tela em construção. Só tokens de tokens.css: valem nos dois temas. */

.ico { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* ---- ilha: a superfície de cartão e painel ---- */
.ui-ilha { background: var(--ilha); border: 1px solid var(--border); border-radius: var(--raio-ilha); }

/* ---- botões ---- */
.ui-botao { display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 32px; padding: 0 13px; border-radius: var(--raio-p); border: 1px solid var(--border-2); background: transparent; color: var(--text-2); font-size: 13.5px; font-weight: 500; white-space: nowrap; transition: background var(--dur), border-color var(--dur), color var(--dur), transform var(--dur) var(--ease); }
.ui-botao:hover { background: var(--hover); border-color: var(--border-2); color: var(--text); }
.ui-botao:active { transform: scale(.97); }
.ui-botao:disabled { opacity: .5; cursor: default; transform: none; }
.ui-botao.primario { border-color: transparent; background: var(--signal); color: var(--signal-ink); font-weight: 600; }
.ui-botao.primario:hover { background: var(--signal-light); }
.ui-botao.perigo { border-color: transparent; background: var(--danger-dim); color: var(--danger-text); }
.ui-botao.perigo:hover { background: var(--danger); color: #fff; }
.ui-botao .ico { width: 16px; height: 16px; }

/* ---- selo ---- */
.ui-selo { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 9px; border-radius: 999px; font-size: 12px; font-weight: 600; line-height: 1; white-space: nowrap; background: var(--surface-2); color: var(--soft); }
.ui-selo::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.ui-selo-ok { background: var(--signal-dim); color: var(--signal); }
.ui-selo-aviso { background: var(--warn-dim); color: var(--warn); }
.ui-selo-erro { background: var(--danger-dim); color: var(--danger-text); }
.ui-selo-neutro::before { display: none; }

/* ---- avatar de app (letra colorida, t0 a t5) ---- */
.ui-app-letra { display: inline-grid; place-items: center; flex: none; font-style: normal; width: 20px; height: 20px; border-radius: 6px; font-size: 11px; font-weight: 700; line-height: 1; background: var(--t0-bg); color: var(--t0-tx); }
.ui-app-letra.t1 { background: var(--t1-bg); color: var(--t1-tx); }
.ui-app-letra.t2 { background: var(--t2-bg); color: var(--t2-tx); }
.ui-app-letra.t3 { background: var(--t3-bg); color: var(--t3-tx); }
.ui-app-letra.t4 { background: var(--t4-bg); color: var(--t4-tx); }
.ui-app-letra.t5 { background: var(--t5-bg); color: var(--t5-tx); }

/* ---- pílula (seletor compacto do compositor e dos filtros) ---- */
.ui-pilula { display: inline-flex; align-items: center; gap: 6px; height: 28px; max-width: 100%; padding: 0 8px 0 9px; border-radius: 999px; border: 1px solid transparent; background: transparent; color: var(--muted); font-size: 12.5px; font-weight: 500; transition: background var(--dur), color var(--dur), border-color var(--dur); }
.ui-pilula:hover, .ui-pilula[aria-expanded="true"] { background: var(--hover); color: var(--text); border-color: var(--border); }
.ui-pilula .ico { width: 14px; height: 14px; }
.ui-pilula .ui-pilula-seta { width: 12px; height: 12px; opacity: .7; }
.ui-pilula-texto { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---- menu e lista de opções (flutuam: são os únicos com sombra) ---- */
.ui-menu { position: fixed; z-index: 75; min-width: 200px; max-width: min(320px, calc(100vw - 16px)); max-height: min(420px, calc(100dvh - 16px)); overflow-y: auto; padding: 5px; border-radius: 10px; border: 1px solid var(--border-2); background: var(--ilha-2); box-shadow: var(--sombra-alta); animation: ui-surge .14s var(--ease); }
.ui-menu-item { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 34px; padding: 6px 10px; border: 0; border-radius: 7px; background: none; color: var(--text-2); font-size: 13.5px; text-align: left; }
.ui-menu-item:hover, .ui-menu-item:focus-visible { background: var(--hover); color: var(--text); outline: none; }
.ui-menu-item[aria-disabled="true"] { opacity: .45; cursor: default; }
.ui-menu-item.perigo { color: var(--danger-text); }
.ui-menu-item .ico { width: 16px; height: 16px; color: var(--muted); }
.ui-menu-item.perigo .ico { color: currentColor; }
.ui-menu-texto { display: flex; flex-direction: column; min-width: 0; }
.ui-menu-texto small { color: var(--muted); font-size: 12px; }
.ui-menu-sep { height: 1px; margin: 5px 4px; background: var(--border); }
.ui-marca { width: 16px; height: 16px; flex: none; color: var(--signal); }

/* ---- modal ---- */
.ui-sem-rolagem, .ui-sem-rolagem body { overflow: hidden; }
.ui-veu { position: fixed; inset: 0; z-index: 70; display: grid; place-items: center; padding: 16px; background: var(--veu); animation: ui-aparece .16s ease-out; }
.ui-modal { width: min(460px, 100%); max-height: calc(100dvh - 32px); overflow-y: auto; padding: 20px; border-radius: var(--raio-ilha); border: 1px solid var(--border-2); background: var(--ilha-2); box-shadow: var(--sombra-alta); animation: ui-surge .2s var(--ease); }
.ui-modal:focus { outline: none; }
.ui-modal-titulo { margin: 0; font-size: 17px; font-weight: 600; line-height: 1.35; letter-spacing: -.01em; }
.ui-modal-corpo { margin-top: 10px; color: var(--soft); font-size: 14.5px; }
.ui-modal-corpo p { margin: 0 0 10px; }
.ui-modal-acoes { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.ui-modal-acoes .ui-botao { height: 36px; padding: 0 16px; }

/* ---- toast ---- */
.ui-toasts { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 80; display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none; width: max-content; max-width: calc(100vw - 32px); }
.ui-toast { display: flex; align-items: center; gap: 10px; padding: 10px 14px 10px 12px; border-radius: 10px; border: 1px solid var(--border-2); background: var(--ilha-2); color: var(--text); font-size: 13.5px; box-shadow: var(--sombra-alta); pointer-events: auto; animation: ui-sobe .25s var(--ease); transition: opacity .18s, transform .18s; }
.ui-toast .ico { width: 16px; height: 16px; color: var(--signal); }
.ui-toast-aviso .ico { color: var(--warn); }
.ui-toast-erro { border-color: var(--danger); }
.ui-toast-erro .ico { color: var(--danger); }
.ui-toast a { color: var(--signal); font-weight: 600; text-decoration: none; margin-left: 2px; }
.ui-toast a:hover { text-decoration: underline; }
.ui-toast.saindo { opacity: 0; transform: translateY(6px); }

/* ---- tela em construção e tela que não abriu ---- */
.em-obras { max-width: 560px; padding-top: clamp(16px, 6vh, 56px); }
.em-obras h1 { margin: 0 0 10px; font-size: clamp(26px, 3.4vw, 32px); line-height: 1.1; letter-spacing: -.02em; font-weight: 700; }
.em-obras p { margin: 0; color: var(--muted); font-size: 15px; }

@keyframes ui-surge { from { opacity: 0; transform: translateY(-4px) scale(.98); } }
@keyframes ui-sobe { from { opacity: 0; transform: translateY(8px); } }
@keyframes ui-aparece { from { opacity: 0; } }

@media (max-width: 760px) {
  .ui-veu { place-items: end stretch; padding: 0; }
  .ui-modal { width: 100%; max-height: 88dvh; border-radius: 16px 16px 0 0; border-width: 1px 0 0; padding: 20px 16px calc(16px + env(safe-area-inset-bottom)); animation: ui-folha .28s var(--ease-suave); }
  .ui-modal-acoes { flex-direction: column-reverse; }
  .ui-modal-acoes .ui-botao { height: 44px; width: 100%; font-size: 15px; }
  .ui-menu-item { min-height: 44px; font-size: 15px; }
  .ui-toasts { bottom: calc(76px + env(safe-area-inset-bottom)); }
  @keyframes ui-folha { from { transform: translateY(100%); } }
}