/* ============================================================================
   UNPARALLEL — tema da plataforma projetix
   ----------------------------------------------------------------------------
   Esta folha é a ÚNICA fonte da verdade do aspeto da aplicação. Tudo o que se
   vê — plataforma e módulos — sai daqui. Um módulo não escreve CSS próprio:
   usa as classes `.up-*` e, se precisar de afinar, as variáveis `--up-*`.

   Organização:
     1. Tokens          cor, tipografia, espaço, forma
     2. Base
     3. Estrutura       barra lateral, conteúdo, cabeçalho de página
     4. Navegação
     5. Botões
     6. Cartões e grelhas
     7. Campos e formulários
     8. Tabelas
     9. Etiquetas, KPI, avatar
    10. Estados         vazio, a carregar, erro, sem permissão
    11. Diálogo e barra de guardar
    12. Utilitários

   Regra ao mexer: mudar um token muda a aplicação inteira; acrescentar uma
   classe nova é acrescentar vocabulário a toda a gente. Nunca pôr aqui nada
   que só sirva a um módulo.
   ========================================================================== */

/* 1. ------------------------------------------------------------- Tokens */
:root {
  /* — Cor de marca (manual de normas UNPARALLEL) — */
  --up-teal:      #008490;   /* acento principal */
  --up-teal-700:  #0c6e78;   /* hover / estado carregado */
  --up-teal-bg:   #e1f2f3;   /* fundo muito claro */
  --up-orange:    #F09C18;   /* acento secundário */
  --up-orange-700:#b6720a;
  --up-orange-bg: #fdeecf;

  /* — Base neutra — */
  --up-black:   #111418;
  --up-ink:     #1b1f24;   /* texto principal */
  --up-white:   #ffffff;
  --up-bg:      #f7f7f8;   /* fundo da aplicação */
  --up-surface: #ffffff;   /* cartões */
  --up-line:    #ececef;   /* traços e limites */
  --up-muted:   #6b7280;   /* texto secundário */
  --up-faint:   #f4f4f5;   /* realce leve, hover */

  --up-accent:    var(--up-teal);
  --up-accent-bg: var(--up-teal-bg);

  /* — Cinzentos — */
  --up-grey-100:#f4f4f5; --up-grey-200:#e6e7e9; --up-grey-300:#d1d3d6;
  --up-grey-500:#8b9096; --up-grey-700:#4a4f55;

  /* — Estado — */
  --up-ok:  #3B6D11; --up-ok-bg:  #EAF3DE;
  --up-warn:#8a5a00; --up-warn-bg:#FAEEDA;
  --up-err: #A32D2D; --up-err-bg: #FCEBEB;

  /* — Tipografia — */
  --up-font: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --up-fs-xs:12px; --up-fs-sm:13px; --up-fs-md:14px; --up-fs-lg:16px;
  --up-fs-h1:20px; --up-fs-h2:15px;
  --up-lh:1.55;

  /* — Espaço — */
  --up-sp-1:4px; --up-sp-2:8px; --up-sp-3:12px; --up-sp-4:16px;
  --up-sp-5:24px; --up-sp-6:32px; --up-sp-7:48px;
  --up-gap:var(--up-sp-4);

  /* — Forma — */
  --up-radius:10px; --up-radius-sm:8px; --up-radius-lg:14px; --up-radius-pill:999px;
  --up-shadow:0 1px 2px rgba(17,20,24,.04), 0 1px 3px rgba(17,20,24,.06);
  --up-shadow-lg:0 8px 30px rgba(17,20,24,.10);

  /* — Estrutura — */
  --up-sidebar:224px;      /* largura da barra lateral */
  --up-content:1120px;     /* largura máxima do conteúdo */
  --up-topbar:56px;        /* altura da barra no topo, em ecrã pequeno */
  --up-transition:.12s;
}

/* 2. --------------------------------------------------------------- Base */
*, *::before, *::after { box-sizing:border-box }

/* O atributo `hidden` tem de vencer os `display:flex/grid` das classes abaixo — senão
   um `<div class="up-savebar" hidden>` continua à vista. Vale para tudo, de uma vez. */
[hidden] { display:none !important }

body.up, .up {
  font-family:var(--up-font); font-size:var(--up-fs-md);
  color:var(--up-ink); background:var(--up-bg); line-height:var(--up-lh);
}
body.up { margin:0 }

.up h1{ font-size:var(--up-fs-h1); font-weight:650; margin:0 0 var(--up-sp-1) }
.up h2{ font-size:var(--up-fs-h2); font-weight:600; margin:0 0 var(--up-sp-3) }
.up a { color:var(--up-ink) }
.up .muted { color:var(--up-muted) }
.up .small { font-size:var(--up-fs-sm) }
.up code { font-family:ui-monospace, SFMono-Regular, Menlo, monospace; font-size:var(--up-fs-sm);
  background:var(--up-faint); padding:1px 5px; border-radius:5px }

/* Foco visível — a mesma marca em todo o lado, para quem navega por teclado. */
.up :focus-visible { outline:2px solid var(--up-teal); outline-offset:2px }

/* 3. ---------------------------------------------------------- Estrutura */
/* A página é: barra lateral fixa + conteúdo. Em ecrã pequeno a barra passa
   para o topo e o conteúdo ocupa tudo. */
.up-app { min-height:100vh }

.up-main { padding:var(--up-sp-5) var(--up-sp-5) var(--up-sp-7) }
.up-content { max-width:var(--up-content); margin:0 auto }
.up-content.narrow { max-width:760px }

/* Cabeçalho de página: título, migalhas, ações à direita. */
.up-page-head { display:flex; align-items:flex-start; justify-content:space-between;
  gap:var(--up-sp-4); flex-wrap:wrap; margin-bottom:var(--up-sp-5) }
.up-page-head .up-actions { display:flex; gap:var(--up-sp-2); flex-wrap:wrap }
.up-crumbs { font-size:var(--up-fs-xs); color:var(--up-muted); margin-bottom:var(--up-sp-1) }
.up-crumbs a { color:var(--up-muted); text-decoration:none }
.up-crumbs a:hover { color:var(--up-ink) }
.up-crumbs .sep { margin:0 6px; color:var(--up-grey-300) }

@media (min-width:901px) {
  body.up { padding-left:var(--up-sidebar) }
}

/* 4. ---------------------------------------------------------- Navegação */
.up-sidebar { position:fixed; top:0; left:0; bottom:0; width:var(--up-sidebar);
  background:var(--up-white); border-right:1px solid var(--up-line);
  display:flex; flex-direction:column; padding:18px 14px; z-index:30 }
.up-sidebar .up-brand { display:block; padding:4px 6px 14px; text-decoration:none;
  border-bottom:1px solid var(--up-line); margin-bottom:var(--up-sp-2) }
.up-sidebar .up-brand img { height:38px; width:auto; display:block }

/* Comutador de módulos: diz em que módulo se está e leva aos outros.
   É a peça que falta hoje — com dois módulos deixa de haver contexto. */
.up-switch { position:relative; margin-bottom:var(--up-sp-2) }
.up-switch > button { display:flex; align-items:center; gap:var(--up-sp-2); width:100%;
  padding:8px 10px; border:1px solid var(--up-line); border-radius:var(--up-radius);
  background:var(--up-white); font:inherit; font-size:var(--up-fs-md); font-weight:600;
  color:var(--up-ink); cursor:pointer; text-align:left; transition:var(--up-transition) }
.up-switch > button:hover { background:var(--up-faint) }
.up-switch > button .up-i { color:var(--up-teal) }
.up-switch > button .caret { margin-left:auto; color:var(--up-muted); font-size:11px }
.up-switch-menu { position:absolute; top:calc(100% + 4px); left:0; right:0; background:var(--up-white);
  border:1px solid var(--up-line); border-radius:var(--up-radius); box-shadow:var(--up-shadow-lg);
  overflow:hidden; z-index:40 }
.up-switch-menu[hidden] { display:none }
.up-switch-menu a { display:flex; align-items:center; gap:var(--up-sp-2); padding:9px 11px;
  font-size:var(--up-fs-md); text-decoration:none; color:var(--up-ink) }
.up-switch-menu a:hover { background:var(--up-faint) }
.up-switch-menu a.on { color:var(--up-teal); font-weight:600 }

.up-nav { display:flex; flex-direction:column; gap:2px }
.up-nav a { display:flex; align-items:center; gap:11px; padding:9px 11px;
  border-radius:var(--up-radius); color:#3a3f45; text-decoration:none;
  font-size:var(--up-fs-md); font-weight:500; transition:var(--up-transition) }
.up-nav a .up-i { color:var(--up-grey-500) }
/* Um módulo pode trazer SVG próprio nas entradas de menu (`NavEntry.icone`), sem classe
   nenhuma. Dimensionar só os `.up-i` deixava esses do tamanho que o ficheiro trouxesse — e
   um SVG sem `width` ocupa a linha toda. Vale para qualquer svg dentro da navegação. */
.up-nav a svg, .up-nav-plataforma a svg, .up-mod > .cab svg, .up-syncbtn svg {
  width:18px; height:18px; flex:none }
.up-nav a svg:not(.up-i), .up-nav-plataforma a svg:not(.up-i) { color:var(--up-grey-500) }
.up-nav a.on svg, .up-nav-plataforma a.on svg { color:#fff }
.up-nav a:hover { background:var(--up-faint); color:var(--up-ink) }
.up-nav a.on { background:var(--up-teal); color:#fff }
.up-nav a.on .up-i { color:#fff }
.up-nav .up-nav-group { font-size:var(--up-fs-xs); color:var(--up-muted); font-weight:600;
  letter-spacing:.04em; text-transform:uppercase; padding:14px 11px 4px }
.up-sep { height:1px; background:var(--up-line); margin:var(--up-sp-2) 6px }

/* Um menu comprido rola dentro da barra; quem está autenticado nunca sai do fundo. */
.up-sidebar .up-nav { flex:0 1 auto; overflow-y:auto; min-height:0; margin:0 -4px; padding:0 4px }

/* — Módulos em acordeão —
   A barra mostra TODOS os módulos a que a pessoa tem acesso; só o módulo onde ela
   está abre as suas entradas. É o que permite saber o que existe (e saltar num
   clique) sem pôr trinta links numa coluna: o módulo de viagens sozinho traz dez
   entradas a quem aprova. */
.up-mod { border-radius:var(--up-radius) }
.up-mod > .cab { display:flex; align-items:center; gap:11px; width:100%; padding:9px 11px;
  border:none; background:none; border-radius:var(--up-radius); cursor:pointer;
  font:inherit; font-size:var(--up-fs-md); font-weight:600; color:var(--up-ink);
  text-align:left; text-decoration:none; transition:var(--up-transition) }
.up-mod > .cab:hover { background:var(--up-faint) }
.up-mod > .cab .up-i { color:var(--up-grey-500) }
.up-mod > .cab .seta { margin-left:auto; color:var(--up-grey-300); transition:transform .15s }
/* Nada de números ao lado do nome do módulo: numa navegação, um número lê-se como
   "tens três coisas por fazer", e não é isso que ali estaria. */

/* O módulo onde se está: cabeçalho marcado e entradas à vista. */
.up-mod.aberto > .cab { color:var(--up-teal) }
.up-mod.aberto > .cab .up-i { color:var(--up-teal) }
.up-mod.aberto > .cab .seta { transform:rotate(90deg) }
.up-mod-sub { display:flex; flex-direction:column; gap:2px; padding:2px 0 var(--up-sp-3) }
/* O traço à esquerda amarra as entradas ao módulo a que pertencem. */
.up-mod-sub { margin-left:20px; border-left:1px solid var(--up-line); padding-left:6px }
.up-mod-sub a { font-weight:500; padding:7px 10px }

/* As entradas da plataforma (Utilizadores, e o que vier) ficam fora da zona que rola,
   agarradas ao rodapé: estão sempre no mesmo sítio, por mais módulos que existam. */
.up-nav-plataforma { flex:none; display:flex; flex-direction:column; gap:2px;
  border-top:1px solid var(--up-line); margin-top:var(--up-sp-2); padding-top:var(--up-sp-2) }
.up-nav-plataforma:empty { display:none }   /* quem não é administrador não vê o traço */
.up-nav-plataforma a { display:flex; align-items:center; gap:11px; padding:9px 11px;
  border-radius:var(--up-radius); color:#3a3f45; text-decoration:none;
  font-size:var(--up-fs-md); font-weight:500; transition:var(--up-transition) }
.up-nav-plataforma a .up-i { color:var(--up-grey-500) }
.up-nav-plataforma a:hover { background:var(--up-faint); color:var(--up-ink) }
.up-nav-plataforma a.on { background:var(--up-teal); color:#fff }
.up-nav-plataforma a.on .up-i { color:#fff }

/* Uma pessoa com um módulo só não vê cabeçalho nenhum — é o caso mais comum hoje,
   e não pode ficar pior do que está. */
.up-nav.um-modulo .up-mod > .cab { display:none }
.up-nav.um-modulo .up-mod-sub { margin-left:0; border-left:none; padding-left:0 }

/* — Gaveta (ecrã pequeno) —
   Com módulos e subopções, achatar a navegação numa fila no topo deixa de dar. */
.up-topbar { display:none; align-items:center; gap:var(--up-sp-3); height:var(--up-topbar);
  padding:0 var(--up-sp-3); background:var(--up-white); border-bottom:1px solid var(--up-line);
  position:sticky; top:0; z-index:28 }
.up-topbar img { height:22px }
.up-navbtn { display:inline-flex; align-items:center; justify-content:center; width:36px;
  height:36px; border:1px solid var(--up-line); border-radius:var(--up-radius-sm);
  background:var(--up-white); cursor:pointer; color:var(--up-ink) }
.up-scrim { position:fixed; inset:0; background:rgba(17,20,24,.35); z-index:29 }

/* — Sincronizar —
   Só aparece no ambiente local (é o único que puxa a base do servidor). Acende quando há
   coisas novas lá: um botão apagado que muda de cor diz mais do que um aviso. */
.up-syncbtn { display:flex; align-items:center; gap:11px; padding:9px 11px; width:100%;
  border:1px solid var(--up-line); border-radius:var(--up-radius); background:var(--up-white);
  color:#3a3f45; font:inherit; font-size:var(--up-fs-md); font-weight:500; cursor:pointer;
  text-align:left; transition:var(--up-transition) }
.up-syncbtn .up-i { color:var(--up-grey-500) }
.up-syncbtn:hover:not(:disabled) { background:var(--up-faint); color:var(--up-ink) }
.up-syncbtn:disabled { opacity:.55; cursor:default }
.up-syncbtn.has { background:var(--up-orange-bg); border-color:#f0c46b; color:var(--up-warn) }
.up-syncbtn.has .up-i { color:var(--up-orange) }
.up-syncbadge { margin-left:auto; background:var(--up-orange); color:#fff;
  border-radius:var(--up-radius-pill); min-width:18px; text-align:center;
  font-size:11px; font-weight:700; padding:0 6px; line-height:18px }

/* Rodapé da barra: quem está autenticado. */
.up-side-foot { margin-top:auto; border-top:1px solid var(--up-line);
  padding-top:var(--up-sp-2); position:relative }
.up-user { display:flex; align-items:center; gap:var(--up-sp-2); width:100%; padding:7px 8px;
  border:none; background:none; cursor:pointer; border-radius:var(--up-radius);
  text-align:left; font:inherit }
.up-user:hover { background:var(--up-faint) }
.up-user .who { display:flex; flex-direction:column; line-height:1.2; overflow:hidden }
.up-user .who .nm { font-size:var(--up-fs-sm); font-weight:600; color:var(--up-ink);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:120px }
.up-user .who .rl { font-size:11px; color:var(--up-muted); text-transform:capitalize }
.up-user .caret { margin-left:auto; color:var(--up-muted); font-size:16px; letter-spacing:1px }
.up-menu { position:absolute; bottom:56px; left:6px; right:6px; background:var(--up-white);
  border:1px solid var(--up-line); border-radius:var(--up-radius);
  box-shadow:var(--up-shadow-lg); overflow:hidden; z-index:40 }
.up-menu[hidden] { display:none }
.up-menu a { display:block; padding:10px 13px; font-size:var(--up-fs-sm);
  color:var(--up-ink); text-decoration:none }
.up-menu a:hover { background:var(--up-faint) }
.up-menu-langs { display:flex; gap:4px; padding:8px 13px; border-top:1px solid var(--up-line) }
.up-menu-langs a { padding:2px 8px; border-radius:6px; font-size:var(--up-fs-xs);
  color:var(--up-muted); background:var(--up-faint); text-decoration:none }
.up-menu-langs a.on { background:var(--up-teal); color:#fff }
.up-menu .ver { padding:8px 13px; font-size:11px; color:#b3b8be;
  border-top:1px solid var(--up-line); letter-spacing:.02em }

/* Ecrã pequeno: barra no topo com o botão, e a mesma navegação numa gaveta. */
@media (max-width:900px) {
  .up-topbar { display:flex }
  .up-sidebar { transform:translateX(-100%); transition:transform .18s ease; width:min(86vw, 300px);
    box-shadow:var(--up-shadow-lg) }
  .up-sidebar.aberta { transform:none }
  .up-main { padding:var(--up-sp-4) var(--up-sp-3) var(--up-sp-6) }
  .up-savebar { padding:10px var(--up-sp-3) }
}
@media (min-width:901px) {
  .up-scrim { display:none }
}
@media (prefers-reduced-motion:reduce) { .up-sidebar { transition:none } }

/* 5. ------------------------------------------------------------- Botões */
.up-btn { display:inline-flex; align-items:center; gap:var(--up-sp-2);
  border:1px solid var(--up-black); background:var(--up-black); color:#fff;
  font:inherit; font-size:var(--up-fs-md); font-weight:500; padding:9px 15px;
  border-radius:var(--up-radius-sm); cursor:pointer; transition:var(--up-transition);
  text-decoration:none; white-space:nowrap }
.up-btn:hover { background:#000 }
.up-btn.ghost { background:var(--up-white); color:var(--up-ink); border-color:var(--up-line) }
.up-btn.ghost:hover { background:var(--up-faint) }
.up-btn.accent { background:var(--up-teal); border-color:var(--up-teal) }
.up-btn.accent:hover { background:var(--up-teal-700); border-color:var(--up-teal-700) }
.up-btn.ok { background:var(--up-ok); border-color:var(--up-ok) }
.up-btn.danger { background:var(--up-err); border-color:var(--up-err) }
.up-btn.sm { padding:5px 10px; font-size:var(--up-fs-sm) }
.up-btn:disabled, .up-btn[disabled] { opacity:.45; cursor:not-allowed }
.up-btn .up-i { width:16px; height:16px }

/* 6. --------------------------------------------------- Cartões e grelhas */
.up-card { background:var(--up-surface); border:1px solid var(--up-line);
  border-radius:var(--up-radius); padding:18px 20px; box-shadow:var(--up-shadow) }
.up-card + .up-card { margin-top:var(--up-sp-4) }
.up-card-head { display:flex; align-items:center; justify-content:space-between;
  gap:var(--up-sp-3); margin-bottom:var(--up-sp-3) }
.up-card.flush { padding:0 }          /* para cartões que só têm uma tabela dentro */
.up-card.flush .up-card-head { padding:16px 20px 0 }

.up-grid { display:grid; gap:var(--up-gap);
  grid-template-columns:repeat(auto-fill, minmax(240px, 1fr)) }
.up-row { display:flex; gap:var(--up-sp-3); align-items:center; flex-wrap:wrap }

/* 7. ------------------------------------------------ Campos e formulários */
.up-input, .up-select, .up-textarea { width:100%; font:inherit; font-size:var(--up-fs-md);
  padding:9px 11px; border:1px solid var(--up-line); border-radius:var(--up-radius-sm);
  background:var(--up-white); color:var(--up-ink) }
.up-input:focus, .up-select:focus, .up-textarea:focus { outline:none; border-color:var(--up-teal);
  box-shadow:0 0 0 3px rgba(0,132,144,.15) }
.up-input:disabled, .up-select:disabled, .up-textarea:disabled { background:var(--up-faint);
  color:var(--up-muted) }
.up-input.err, .up-select.err, .up-textarea.err { border-color:var(--up-err) }
.up-label { display:block; font-size:var(--up-fs-xs); color:var(--up-muted); margin:0 0 var(--up-sp-1) }
.up-field { margin-bottom:var(--up-sp-4) }
.up-field .up-hint { font-size:var(--up-fs-xs); color:var(--up-muted); margin-top:var(--up-sp-1) }
.up-field .up-error { font-size:var(--up-fs-xs); color:var(--up-err); margin-top:var(--up-sp-1) }
.up-form-grid { display:grid; gap:0 var(--up-sp-4);
  grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)) }

/* 8. ------------------------------------------------------------ Tabelas */
.up-table { width:100%; border-collapse:collapse; font-size:var(--up-fs-md) }
.up-table th { text-align:left; color:var(--up-muted); font-weight:500; font-size:var(--up-fs-xs);
  padding:10px 12px; border-bottom:1px solid var(--up-line); white-space:nowrap }
.up-table td { padding:10px 12px; border-bottom:1px solid var(--up-line); vertical-align:top }
.up-table tr:last-child td { border-bottom:none }
.up-table tr.click:hover { background:#faf9f6; cursor:pointer }
.up-table td.num, .up-table th.num { text-align:right; font-variant-numeric:tabular-nums }
.up-table-wrap { overflow-x:auto }   /* tabela larga rola dentro do cartão, não na página */

/* 9. ------------------------------------------- Etiquetas, KPI, avatar */
.up-tag { display:inline-block; border-radius:var(--up-radius-pill); padding:2px 10px;
  font-size:var(--up-fs-xs); background:var(--up-grey-100); color:var(--up-grey-700) }
.up-tag.accent { background:var(--up-teal-bg); color:var(--up-teal-700) }
.up-tag.ok   { background:var(--up-ok-bg);   color:var(--up-ok) }
.up-tag.warn { background:var(--up-warn-bg); color:var(--up-warn) }
.up-tag.err  { background:var(--up-err-bg);  color:var(--up-err) }

.up-kpi { background:var(--up-surface); border:1px solid var(--up-line);
  border-radius:var(--up-radius); padding:14px 16px }
.up-kpi .v { font-size:24px; font-weight:700; font-variant-numeric:tabular-nums }
.up-kpi .l { color:var(--up-muted); font-size:var(--up-fs-xs); margin-top:2px }

.up-avatar { width:32px; height:32px; border-radius:50%; background:var(--up-black); color:#fff;
  display:inline-flex; align-items:center; justify-content:center;
  font-size:var(--up-fs-md); font-weight:600; flex:none }
.up-avatar.accent { background:var(--up-teal) }

/* Ícones: `<svg class="up-i"><use href="/theme/static/icons.svg#i-home"></use></svg>` */
.up-i { width:18px; height:18px; flex:none; fill:none; stroke:currentColor;
  stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round }
.up-i.sm { width:14px; height:14px }
.up-i.lg { width:24px; height:24px }

/* 10. ----------------------------------------------------------- Estados */
/* Os ecrãs que ninguém desenha e toda a gente vê. */
.up-empty { text-align:center; padding:var(--up-sp-7) var(--up-sp-5); color:var(--up-muted) }
.up-empty .up-i { width:32px; height:32px; color:var(--up-grey-300); margin-bottom:var(--up-sp-3) }
.up-empty h2 { color:var(--up-ink); margin-bottom:var(--up-sp-1) }
.up-empty p { margin:0 0 var(--up-sp-4); font-size:var(--up-fs-md) }

.up-spin { display:inline-block; width:15px; height:15px; border:2px solid var(--up-grey-200);
  border-top-color:var(--up-ink); border-radius:50%; animation:up-spin .8s linear infinite;
  vertical-align:-3px }
@keyframes up-spin { to { transform:rotate(360deg) } }
@media (prefers-reduced-motion:reduce) { .up-spin { animation-duration:2.4s } }
.up-loading { display:flex; align-items:center; gap:var(--up-sp-2); color:var(--up-muted);
  padding:var(--up-sp-5); justify-content:center }

/* Esqueleto, para quando o conteúdo demora e já se sabe a forma que vai ter. */
.up-skel { background:linear-gradient(90deg, var(--up-grey-100), var(--up-grey-200), var(--up-grey-100));
  background-size:200% 100%; animation:up-skel 1.2s ease-in-out infinite;
  border-radius:6px; height:12px; margin:6px 0 }
@keyframes up-skel { 0%{background-position:200% 0} 100%{background-position:-200% 0} }

.up-note { border:1px solid var(--up-line); border-left-width:3px; border-radius:var(--up-radius-sm);
  padding:11px 14px; font-size:var(--up-fs-sm); background:var(--up-white) }
.up-note.ok   { border-left-color:var(--up-ok);   background:var(--up-ok-bg);   color:var(--up-ok) }
.up-note.warn { border-left-color:var(--up-warn); background:var(--up-warn-bg); color:var(--up-warn) }
.up-note.err  { border-left-color:var(--up-err);  background:var(--up-err-bg);  color:var(--up-err) }

/* 11. ------------------------------------------ Diálogo e barra de guardar */
.up-dialog-bg { position:fixed; inset:0; background:rgba(17,20,24,.35); z-index:50;
  display:flex; align-items:center; justify-content:center; padding:var(--up-sp-4) }
.up-dialog-bg[hidden] { display:none }
.up-dialog { background:var(--up-white); border-radius:var(--up-radius-lg); box-shadow:var(--up-shadow-lg);
  max-width:440px; width:100%; padding:22px 24px }
.up-dialog h2 { font-size:var(--up-fs-lg); margin-bottom:var(--up-sp-2) }
.up-dialog p { color:var(--up-muted); margin:0 0 var(--up-sp-5) }
.up-dialog .up-actions { display:flex; gap:var(--up-sp-2); justify-content:flex-end }

/* Barra fixa no fundo, para guardar sem ter de rolar até baixo. */
.up-savebar { position:fixed; left:0; right:0; bottom:0; background:var(--up-white);
  border-top:1px solid var(--up-line); padding:10px var(--up-sp-5); z-index:25;
  display:flex; align-items:center; gap:var(--up-sp-3); justify-content:flex-end;
  box-shadow:0 -1px 3px rgba(17,20,24,.05) }
.up-savebar .estado { margin-right:auto; font-size:var(--up-fs-sm); color:var(--up-muted) }
@media (min-width:901px) { .up-savebar { left:var(--up-sidebar) } }

/* 12. ------------------------------------------------------- Utilitários */
/* Poucos de propósito: se faltar um, quase sempre falta antes um componente. */
.up-stack > * + * { margin-top:var(--up-sp-3) }
.up-right { margin-left:auto }
.up-nowrap { white-space:nowrap }
.up-hide { display:none !important }
@media (max-width:900px) { .up-hide-sm { display:none !important } }