/* ============================================================
   ui2.css — camada de refinamento da interface
   ============================================================
   Carregada DEPOIS de style.css, de propósito: só corrige e afina o
   que já existe, em vez de reescrever mil e quinhentas linhas. Assim
   é fácil voltar atrás (basta remover a linha que carrega este
   ficheiro) e não se estraga nada do que já funcionava.

   O que resolve, por ordem:
     1. navegação em telemóvel (deixava de partir em duas linhas)
     2. chips de estado dos fornecedores (texto cortado)
     3. menu do painel de administração em telemóvel
     4. campos de formulário (o iPhone fazia zoom sozinho)
     5. alvos de toque e foco visível
     6. tabelas largas
   ============================================================ */

/* ---------- 1. Navegação ---------- */
/* Em ecrãs estreitos o menu passa a uma faixa que se desliza na
   horizontal. Antes quebrava em duas linhas e empurrava o conteúdo. */
@media (max-width: 900px) {
  .topbar {
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px 16px;
  }
  .brand { font-size: 17px; }

  .nav-links {
    order: 3;
    width: 100%;
    display: flex;
    align-items: center;
    gap: 4px;
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 2px 0;
    margin: 0 -16px;
    padding-left: 16px;
    padding-right: 16px;
  }
  .nav-links::-webkit-scrollbar { display: none; }
  .nav-links a {
    flex: 0 0 auto;
    padding: 8px 12px;
    border-radius: 999px;
  }
  .theme-toggle { flex: 0 0 auto; }
}

/* ---------- 2. Chips de estado dos fornecedores ---------- */
/* O texto "A testar…" ficava partido em duas linhas dentro de um
   chip estreito. Em telemóvel passam a ocupar a largura toda. */
@media (max-width: 620px) {
  .status-bar {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
  }
  .status-pill {
    width: 100%;
    justify-content: flex-start;
  }
  .status-name { flex: 1 1 auto; }
  .status-text { white-space: nowrap; }
}

/* ---------- 3. Menu do painel de administração ---------- */
/* Os grupos do menu empurravam-se uns aos outros e sobrava um item
   solto no topo. Com "display: contents" os links passam a fazer parte
   de uma única faixa deslizante. */
@media (max-width: 900px) {
  .admin-body.admin-com-menu .admin-nav {
    display: flex;
    flex-wrap: nowrap;
    gap: 6px;
    overflow-x: auto;
    position: sticky;
    top: 0;
    z-index: 5;
    padding: 6px 0 10px;
    background: var(--bg);
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .admin-body.admin-com-menu .admin-nav::-webkit-scrollbar { display: none; }
  .admin-nav .nav-group { display: contents; }
  .admin-nav .nav-group-title { display: none; }
  .admin-nav .nav-link {
    flex: 0 0 auto;
    padding: 8px 12px;
    border: 1px solid var(--border);
    background: var(--card);
  }
  .admin-nav .nav-txt small { display: none; }
  .admin-nav .nav-badge { margin-left: 6px; }
  /* A lista de links dentro de cada grupo deixa de se comportar como
     coluna, porque o grupo já não é uma caixa. */
  .admin-body.admin-com-menu .admin-nav .nav-group > .nav-link { display: flex; }
}

/* ---------- 4. Campos de formulário ---------- */
/* 16px é o mínimo para o iPhone não fazer zoom ao focar um campo. */
@media (max-width: 620px) {
  input[type="text"],
  input[type="password"],
  input[type="email"],
  input[type="number"],
  input[type="search"],
  select,
  textarea {
    font-size: 16px;
  }
  .container { padding-left: 16px; padding-right: 16px; }
  .footer-wrap { padding-bottom: max(16px, env(safe-area-inset-bottom)); }
}

/* ---------- 5. Toque e foco ---------- */
@media (max-width: 620px) {
  .submit,
  .mini-btn,
  button.primary,
  .row-actions .mini-btn {
    min-height: 46px;
    font-size: 15px;
  }
  .ico-btn { min-width: 42px; min-height: 42px; }
}

/* Foco visível: quem navega por teclado tem de ver onde está. */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--accent-bright);
  outline-offset: 2px;
  border-radius: 6px;
}

/* ---------- 6. Tabelas largas ---------- */
/* Em vez de esmagar as colunas (ficavam ilegíveis), a tabela desliza
   na horizontal dentro do seu contentor. */
@media (max-width: 900px) {
  .admin-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .users-table { min-width: 760px; }
}

/* ---------- 7. Afinação geral ---------- */
/* Sombra discreta nos cartões: dá relevo sem pesar. */
.card {
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 10px 30px -22px rgba(0, 0, 0, 0.35);
}

/* Títulos muito grandes em telemóvel partiam em três linhas. */
@media (max-width: 620px) {
  h1 { font-size: clamp(26px, 8vw, 34px); line-height: 1.15; }
  h2 { font-size: clamp(21px, 6.4vw, 28px); line-height: 1.2; }
  .subtitle, .section-hint { line-height: 1.55; }
}

/* Respeita quem pediu menos animações no sistema. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- 8. Correções encontradas com medição no browser ---------- */

/* O menu do topo continuava a partir em duas linhas: a regra original
   define flex-wrap: wrap e a minha não o anulava. */
@media (max-width: 900px) {
  .topbar .nav-links { flex-wrap: nowrap; }
}

/* BUG: .filter-field.grow tem "flex: 1 1 220px". Em fila (desktop) isso
   é a largura; quando o formulário passa a coluna (telemóvel), o mesmo
   220px passa a ser ALTURA — e abria um buraco de 220px por baixo do
   campo de pesquisa. Em coluna, o campo deve ter a altura natural. */
@media (max-width: 900px) {
  .filter-bar .filter-field,
  .filter-bar .filter-field.grow {
    flex: 0 0 auto;
    width: 100%;
  }
  .filter-bar .mini-btn { width: 100%; }
}

/* ============================================================
   9. Navegação com botão (telemóvel)
   ============================================================
   Substitui a faixa deslizante por um menu que abre e fecha. O botão
   só aparece em ecrãs estreitos; no computador fica tudo como estava. */

.nav-toggle { display: none; }

@media (max-width: 900px) {
  .topbar { position: relative; }

  .nav-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    margin-left: auto;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--card);
    color: var(--heading);
    font-size: 19px;
    line-height: 1;
    cursor: pointer;
  }

  /* Escondido até se carregar no botão. */
  .topbar .nav-links {
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    position: absolute;
    top: calc(100% + 6px);
    left: 12px;
    right: 12px;
    z-index: 40;
    padding: 8px;
    margin: 0;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 16px;
    box-shadow: 0 18px 40px -22px rgba(0, 0, 0, 0.45);
    overflow: visible;
  }
  body.nav-open .topbar .nav-links { display: flex; }
  .topbar .nav-links a {
    padding: 12px 14px;
    border-radius: 10px;
    font-size: 15px;
  }
  .topbar .nav-links a.active { background: var(--accent-soft); }
  .topbar .nav-links .theme-toggle {
    align-self: flex-start;
    margin-top: 4px;
  }
}

/* ============================================================
   10. Página de entrada (login)
   ============================================================
   Mais presença: marca visível, fundo com profundidade e cartão com
   melhor hierarquia. Só usa classes que já existiam. */

.auth-wrap {
  position: relative;
  max-width: 430px;
  margin: 0 auto;
  padding: 48px 20px 64px;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Brilho suave atrás do cartão: tira a planura do fundo. */
.auth-wrap::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(680px 420px at 50% -10%, rgba(180, 83, 9, 0.10), transparent 70%),
    radial-gradient(520px 380px at 85% 110%, rgba(184, 134, 11, 0.08), transparent 70%);
}

/* O botão de tema deixa de colidir com a marca. */
.auth-wrap > .theme-toggle {
  position: absolute;
  top: 18px;
  right: 16px;
  z-index: 5;
}

.auth-logo { text-align: center; margin-bottom: 22px; }

/* Monograma: ponto focal da página. */
.auth-mark {
  width: 60px;
  height: 60px;
  margin: 0 auto 14px;
  display: grid;
  place-items: center;
  border-radius: 18px;
  background: linear-gradient(150deg, var(--accent-bright), var(--accent-dark));
  color: #fffaf3;
  font-family: var(--font-serif);
  font-size: 30px;
  font-weight: 600;
  letter-spacing: 0.5px;
  box-shadow: 0 12px 26px -14px rgba(180, 83, 9, 0.8);
}

.auth-logo .name {
  font-family: var(--font-serif);
  font-size: clamp(24px, 6.4vw, 30px);
  line-height: 1.15;
  color: var(--heading);
  letter-spacing: -0.2px;
}
.auth-logo .name span { font-style: italic; }
.auth-tagline {
  margin: 6px 0 0;
  font-size: 13px;
  color: var(--muted);
}

/* Separadores Entrar/Registar: pílula com indicador claro. */
.auth-wrap .tabs {
  display: flex;
  gap: 4px;
  padding: 4px;
  background: var(--well);
  border: 1px solid var(--border);
  border-radius: 14px;
}
.auth-wrap .tabs button {
  flex: 1 1 0;
  padding: 10px 12px;
  border: 0;
  border-radius: 11px;
  background: transparent;
  font-size: 14px;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
}
.auth-wrap .tabs button.active {
  background: var(--card);
  color: var(--heading);
  box-shadow: 0 2px 8px -4px rgba(0, 0, 0, 0.25);
}

.auth-wrap .card {
  margin-top: 12px;
  padding: 22px 20px;
  border-radius: 20px;
}

/* Campos com foco evidente: é o que mais se usa nesta página. */
.auth-wrap input[type="text"],
.auth-wrap input[type="password"] {
  padding: 13px 14px;
  border-radius: 12px;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.auth-wrap input[type="text"]:focus,
.auth-wrap input[type="password"]:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-soft);
}
.auth-wrap label { font-size: 13px; font-weight: 600; }

.auth-wrap .submit {
  width: 100%;
  margin-top: 20px;
  padding: 14px 16px;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 600;
  background: linear-gradient(160deg, var(--accent-bright), var(--accent));
  border-color: transparent;
  box-shadow: 0 10px 22px -14px rgba(180, 83, 9, 0.9);
}
.auth-wrap .submit:hover { filter: brightness(1.04); }

.auth-wrap .footer-wrap { margin-top: 26px; }
@media (max-width: 620px) {
  .auth-wrap { padding: 40px 16px 48px; justify-content: flex-start; }
}
/* Sem o botao (JS em falta), o menu tem de continuar visivel. */
@media (max-width: 900px) {
  .topbar:not(:has(.nav-toggle)) .nav-links { display: flex; position: static; flex-wrap: wrap; box-shadow: none; }
}

/* ============================================================
   11. Tabelas em cartões (telemóvel)
   ============================================================
   Só se aplica a tabelas que o JavaScript marcou com .is-cards, ou
   seja, que têm cabeçalhos para servir de etiqueta. Sem JavaScript, a
   tabela continua normal (com deslize horizontal). */
@media (max-width: 900px) {
  table.is-cards {
    display: block;
    width: 100%;
    min-width: 0 !important;
  }
  table.is-cards thead { display: none; }
  table.is-cards tbody { display: block; }
  table.is-cards tr {
    display: block;
    margin-bottom: 10px;
    padding: 12px 14px;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 14px;
  }
  table.is-cards tr:hover { background: var(--card); }
  table.is-cards td {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 7px 0;
    border: 0 !important;
    text-align: right;
  }
  table.is-cards td::before {
    content: attr(data-label);
    flex: 0 0 auto;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--muted);
    text-align: left;
  }
  /* Células de comando e de seleção: sem etiqueta, alinhadas à esquerda. */
  table.is-cards td[data-label=""]::before { content: none; }
  table.is-cards td[data-label=""] { justify-content: flex-end; }
  table.is-cards td.col-check {
    justify-content: flex-start;
    padding-bottom: 9px;
    border-bottom: 1px solid var(--border) !important;
    margin-bottom: 5px;
  }
  table.is-cards td:empty { display: none; }
  table.is-cards .row-actions { justify-content: flex-end; flex-wrap: wrap; }
}

/* ============================================================
   12. Menu de utilizador (substitui o "Sair (nome)")
   ============================================================ */
.user-menu { position: relative; display: inline-flex; }

.user-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 10px 5px 5px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--card);
  color: var(--heading);
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.user-chip:hover { border-color: var(--accent); }

.user-avatar {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: linear-gradient(150deg, var(--accent-bright), var(--accent-dark));
  color: #fffaf3;
  font-family: var(--font-serif);
  font-size: 14px;
  font-weight: 600;
  flex: 0 0 auto;
}
.user-caret { font-size: 10px; color: var(--muted); }
.user-name { max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.user-pop {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 60;
  min-width: 214px;
  padding: 6px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 20px 44px -24px rgba(0, 0, 0, 0.5);
}
.user-menu.open .user-pop { display: block; }

.user-pop-head {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 9px 10px 11px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--border);
}
.user-pop-head strong { font-size: 13.5px; }
.user-pop-head small { font-size: 11.5px; color: var(--muted); }

.user-pop a {
  display: block;
  padding: 10px;
  border-radius: 9px;
  font-size: 13.5px;
  color: var(--text);
  text-decoration: none;
}
.user-pop a:hover { background: var(--well); }
.user-pop a.user-pop-out {
  margin-top: 4px;
  border-top: 1px solid var(--border);
  border-radius: 0 0 9px 9px;
  color: var(--danger);
  font-weight: 600;
}

@media (max-width: 900px) {
  .topbar .nav-links .user-menu { width: 100%; }
  .topbar .nav-links .user-chip { width: 100%; justify-content: flex-start; }
  .topbar .nav-links .user-pop {
    position: static;
    display: block;
    box-shadow: none;
    border: 0;
    padding: 0 0 4px;
    min-width: 0;
  }
  .topbar .nav-links .user-pop-head { padding: 8px 12px 10px; }
}

/* ============================================================
   13. Dashboard
   ============================================================ */
.dash-hero {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 4px 0 20px;
  padding: 18px 20px;
  border-radius: 20px;
  background: linear-gradient(140deg, var(--card), var(--well));
  border: 1px solid var(--border);
}
.dash-hero-avatar {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  flex: 0 0 auto;
  border-radius: 18px;
  background: linear-gradient(150deg, var(--accent-bright), var(--accent-dark));
  color: #fffaf3;
  font-family: var(--font-serif);
  font-size: 25px;
  font-weight: 600;
  box-shadow: 0 12px 24px -16px rgba(180, 83, 9, 0.9);
}
.dash-hero-txt { min-width: 0; }
.dash-hero h1 { margin: 0; font-size: clamp(22px, 5.4vw, 30px); line-height: 1.15; }
.dash-hero .subtitle { margin: 3px 0 0; }
.dash-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.dash-badge {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent-dark);
}
.dash-badge.muted { background: var(--well); color: var(--muted); }

.stats-grid { gap: 12px; }
.stat-card { position: relative; overflow: hidden; border-radius: 16px; padding: 16px 18px; }
.stat-card::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: linear-gradient(var(--accent-bright), var(--accent-dark));
}
.stat-card .stat-value {
  font-family: var(--font-serif);
  font-size: clamp(26px, 7vw, 34px);
  line-height: 1.05;
  letter-spacing: -0.5px;
}
.stat-card .stat-label { font-size: 10.5px; letter-spacing: 0.7px; }

.rate-card {
  margin-top: 12px;
  padding: 16px 18px;
  border-radius: 16px;
  background: var(--card);
  border: 1px solid var(--border);
}
.rate-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 9px; }
.rate-top strong { font-family: var(--font-serif); font-size: 23px; }
.rate-top span { font-size: 12px; color: var(--muted); }
.rate-track { height: 9px; border-radius: 999px; background: var(--well); overflow: hidden; }
.rate-fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--accent-bright), var(--accent)); }
.rate-legend { display: flex; justify-content: space-between; gap: 10px; margin-top: 7px; font-size: 11.5px; color: var(--muted); }

.quota-track { height: 8px; border-radius: 999px; background: var(--well); overflow: hidden; margin-top: 8px; }
.quota-fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--accent-bright), var(--accent)); }
.quota-fill.alerta { background: linear-gradient(90deg, #d9770f, var(--danger)); }

@media (max-width: 620px) {
  .dash-hero { padding: 15px 16px; gap: 13px; }
  .dash-hero-avatar { width: 46px; height: 46px; border-radius: 15px; font-size: 21px; }
  .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat-card { padding: 14px 15px; }
}

/* ============================================================
   14. Histórico em linha temporal
   ============================================================ */
#historyList { position: relative; padding-left: 18px; }
#historyList::before {
  content: "";
  position: absolute;
  left: 5px;
  top: 10px;
  bottom: 10px;
  width: 2px;
  border-radius: 2px;
  background: linear-gradient(var(--border), transparent 85%);
}
.date-heading {
  position: sticky;
  top: 0;
  z-index: 3;
  display: inline-block;
  margin: 16px 0 10px -18px;
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--card);
  border: 1px solid var(--border);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--muted);
}
.date-heading:first-child { margin-top: 0; }

.history-entry {
  position: relative;
  margin-bottom: 9px;
  border-radius: 14px;
  background: var(--card);
  border: 1px solid var(--border);
}
.history-entry::before {
  content: "";
  position: absolute;
  left: -17px;
  top: 18px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px var(--bg);
}
.history-entry[open] { border-color: rgba(180, 83, 9, 0.35); box-shadow: 0 10px 26px -20px rgba(0, 0, 0, 0.5); }
.history-entry summary { cursor: pointer; padding: 13px 14px; list-style: none; }
.history-entry summary::-webkit-details-marker { display: none; }

.h-imei { font-weight: 600; font-size: 14px; letter-spacing: 0.2px; }
.h-imei .copy-hint { opacity: 0.55; font-size: 12px; }
.h-status.ok { background: rgba(31, 122, 69, 0.12); color: #1f7a45; }
.h-status.fail { background: rgba(179, 64, 47, 0.12); color: var(--danger); }

@media (max-width: 620px) {
  #historyList { padding-left: 14px; }
  #historyList::before { left: 3px; }
  .history-entry::before { left: -14px; width: 7px; height: 7px; }
  .date-heading { margin-left: -14px; }
  .h-imei { font-size: 15px; }
  .h-row2 { flex-wrap: wrap; gap: 6px 8px; }
  .h-time { margin-left: auto; }
  .history-entry summary { padding: 12px 13px; }
}
/* O título do hero vinha centrado da regra geral de .container h1, o que
   desalinhava em relação ao avatar à esquerda. */
.dash-hero-txt, .dash-hero-txt h1, .dash-hero .subtitle { text-align: left; }
/* Dentro do hambúrguer os atalhos já estão no menu principal. Aqui fica
   só a identidade e a saída — evita mostrar "Dashboard/Histórico" duas
   vezes no mesmo ecrã. */
@media (max-width: 900px) {
  .topbar .nav-links .user-pop a:not(.user-pop-out) { display: none; }
  .topbar .nav-links .user-pop-head { border-bottom: 0; margin-bottom: 0; }
}
/* ============================================================
   15. Correção do menu de utilizador em telemóvel
   ============================================================
   O .user-menu é inline-flex, por isso no telemóvel o chip e o painel
   ficavam LADO A LADO e o texto saía fora do ecrã. Aqui passa a coluna,
   o chip sai de cena e fica apenas um botão de saída — sem texto de
   identidade, que só ocupava espaço e repetia o nome. */
@media (max-width: 900px) {
  .topbar .nav-links .user-menu {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    margin-top: 6px;
    padding-top: 8px;
    border-top: 1px solid var(--border);
  }

  /* Sem chip: em mobile não há identidade a mostrar nem gaveta a abrir. */
  .topbar .nav-links .user-chip { display: none; }

  .topbar .nav-links .user-pop {
    position: static;
    display: block;
    width: 100%;
    padding: 0;
    margin: 0;
    border: 0;
    box-shadow: none;
    min-width: 0;
  }

  .topbar .nav-links .user-pop-head { display: none; }
  .topbar .nav-links .user-pop a:not(.user-pop-out) { display: none; }

  /* O único elemento que resta: o botão de saída. */
  .topbar .nav-links .user-pop a.user-pop-out {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    margin: 0;
    padding: 13px 14px;
    border: 1px solid rgba(179, 64, 47, 0.35);
    border-radius: 12px;
    background: rgba(179, 64, 47, 0.06);
    font-size: 15px;
    font-weight: 600;
    color: var(--danger);
  }
  .topbar .nav-links .user-pop a.user-pop-out::before {
    content: "\23FB";
    font-size: 16px;
    line-height: 1;
  }
  .topbar .nav-links .user-pop a.user-pop-out:active {
    background: rgba(179, 64, 47, 0.12);
  }
}
/* Larguras: o painel do menu tinha margem negativa herdada da faixa
   antiga e o botão saía 3px fora do ecrã. Aqui fecha-se a conta. */
@media (max-width: 900px) {
  .topbar .nav-links {
    box-sizing: border-box;
    margin: 0;
    padding: 8px;
  }
  .topbar .nav-links .user-menu { box-sizing: border-box; }
  .topbar .nav-links .user-pop { width: auto; box-sizing: border-box; }
  .topbar .nav-links .user-pop a.user-pop-out {
    width: 100%;
    box-sizing: border-box;
  }
}

/* Duas etiquetas: uma para o computador, outra para o telemóvel. */
.up-short { display: none; }
@media (max-width: 900px) {
  .up-long { display: none; }
  .up-short { display: inline; }
}
/* A faixa antiga define width:100% em .nav-links; com left e right ao
   mesmo tempo, o width ganha e o painel saía 12px fora do ecrã. Em
   telemóvel a largura passa a ser calculada pelas margens. */
@media (max-width: 900px) {
  .topbar .nav-links { width: auto; }
}
/* O glifo de saída (U+23FB) não existe em todas as fontes de telemóvel e
   saía como quadrado. Sem ícone: um botão com a palavra "Sair" é claro e
   não depende de fontes. */
@media (max-width: 900px) {
  .topbar .nav-links .user-pop a.user-pop-out::before { content: none; }
}
/* ============================================================
   16. Leitura do IMEI por foto
   ============================================================ */
.imei-scan-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 10px;
}
.imei-scan-row .mini-btn { min-height: 38px; }
.imei-scan-status { font-size: 12px; color: var(--muted); }
.imei-scan-status.ok { color: #1f7a45; font-weight: 600; }
.imei-scan-status.erro { color: var(--danger); font-weight: 600; }
.imei-luhn { color: #a8621a; }

/* ============================================================
   17. Área de segurança da conta (dashboard)
   ============================================================
   A alteração de password deixa de estar exposta: fica recolhida numa
   linha que se abre. Quando a troca é obrigatória, abre já aberta. */
.sec-area {
  margin-top: 20px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--card);
  overflow: hidden;
}
.sec-area.destaque {
  border-color: rgba(180, 83, 9, 0.5);
  box-shadow: 0 0 0 3px rgba(180, 83, 9, 0.1);
}
.sec-summary {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 15px 17px;
  cursor: pointer;
  list-style: none;
}
.sec-summary::-webkit-details-marker { display: none; }
.sec-ico {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  border-radius: 11px;
  background: var(--well);
  font-size: 16px;
}
.sec-txt { display: flex; flex-direction: column; min-width: 0; }
.sec-txt strong { font-size: 14px; font-weight: 600; }
.sec-txt small { font-size: 11.5px; color: var(--muted); }
.sec-chev { margin-left: auto; color: var(--muted); font-size: 12px; transition: transform 0.15s; }
.sec-area[open] .sec-chev { transform: rotate(180deg); }
.sec-body { padding: 0 17px 18px; }
.sec-body label:first-child { margin-top: 4px; }

@media (max-width: 620px) {
  .sec-summary { padding: 13px 14px; }
  .sec-body { padding: 0 14px 16px; }
}
/* O título do hero continuava centrado por uma regra mais específica de
   .container h1; força-se o alinhamento à esquerda para acompanhar o
   avatar. */
.dash-hero .dash-hero-txt,
.dash-hero .dash-hero-txt h1,
.dash-hero .dash-hero-txt .subtitle { text-align: left !important; }
/* O contentor do campo é flex: o botão da foto entrava como irmão ao lado
   e ficava por cima do campo. Ocupa a linha toda, por baixo. */
.imei-scan-row {
  flex: 1 1 100%;
  width: 100%;
  margin-top: 8px;
}
/* A linha do botao ja e movida para fora do contentor flex pelo JS; aqui
   garante-se apenas a largura e o espacamento. */
.imei-scan-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
/* ============================================================
   18. Leitor de IMEI por foto (complemento do campo)
   ============================================================ */
/* Botão de ajuda: discreto, por baixo do campo, para não competir com ele. */
.imei-helper {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 8px 0 0;
  padding: 6px 2px;
  border: 0;
  background: none;
  color: var(--accent-dark);
  font-family: var(--font-sans);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(180, 83, 9, 0.35);
}
.imei-helper:hover { text-decoration-color: var(--accent); }
.imei-helper-ico { font-size: 14px; }

/* Modal */
.scan-card { max-width: 470px; width: calc(100vw - 28px); }
.scan-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}
.scan-head .modal-title { margin: 0; }
.scan-head .modal-sub { margin: 3px 0 0; font-size: 12.5px; }
.scan-close {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--muted);
  font-size: 14px;
  cursor: pointer;
}

.scan-sources {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.scan-source {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 14px 10px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--card);
  cursor: pointer;
  font-family: var(--font-sans);
  transition: border-color 0.15s, background 0.15s;
}
.scan-source:hover { border-color: var(--accent); background: var(--accent-soft); }
.scan-source-ico { font-size: 21px; line-height: 1; }
.scan-source strong { font-size: 13px; }
.scan-source small { font-size: 11px; color: var(--muted); }

.scan-preview {
  margin-top: 12px;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--border);
  max-height: 180px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--well);
}
.scan-preview img { max-width: 100%; max-height: 180px; display: block; }

.scan-status { margin: 12px 0 0; font-size: 12.5px; color: var(--muted); min-height: 18px; }
.scan-status.ok { color: #1f7a45; font-weight: 600; }
.scan-status.erro { color: var(--danger); font-weight: 600; }

.scan-results {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.scan-item {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 10px 11px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--well);
}
.scan-value {
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.3px;
  user-select: all;
}
.scan-badge {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 999px;
}
.scan-badge.ok { background: rgba(31, 122, 69, 0.14); color: #1f7a45; }
.scan-badge.aviso { background: rgba(168, 98, 26, 0.16); color: #a8621a; }
.scan-badge.serial { background: var(--accent-soft); color: var(--accent-dark); }
.scan-copy, .scan-use { min-height: 32px; font-size: 12px; padding: 5px 10px; }
.scan-copy.copiado { color: #1f7a45; border-color: rgba(31, 122, 69, 0.4); }
.scan-item .scan-use { margin-left: auto; }
.scan-hint { margin: 10px 0 0; font-size: 11.5px; color: var(--muted); }

/* Não deixar a página rolar por trás do modal */
body.modal-aberto { overflow: hidden; }

@media (max-width: 420px) {
  .scan-sources { grid-template-columns: 1fr; }
  .scan-item .scan-use { margin-left: 0; width: 100%; }
}
/* Cada número em duas linhas: valor e etiqueta em cima, botões em baixo. */
.scan-item { display: flex; flex-direction: column; gap: 8px; }
.scan-item-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.scan-item-actions { display: flex; gap: 8px; }
.scan-item-actions .mini-btn { flex: 1 1 0; min-height: 34px; font-size: 12.5px; }
/* ============================================================
   19. Modal do leitor: cabeçalho fixo, imagem ampliável
   ============================================================ */

/* O modal podia ficar mais alto do que o ecrã e o botão de fechar saía
   por cima, obrigando a diminuir o zoom da página. Agora o cartão tem
   altura máxima e desliza por dentro, com o cabeçalho sempre à vista. */
.modal-overlay { padding: 12px; box-sizing: border-box; }
.modal-card.scan-card {
  max-height: calc(100vh - 24px);
  max-height: calc(100dvh - 24px);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.scan-head {
  position: sticky;
  top: 0;
  z-index: 3;
  margin: -18px -18px 12px;
  padding: 14px 18px 12px;
  background: var(--card);
  border-bottom: 1px solid var(--border);
}
.scan-close { min-width: 34px; min-height: 34px; }

/* Miniatura: convida a ampliar */
.scan-preview { cursor: zoom-in; position: relative; }
.scan-preview::after {
  content: "🔍 tocar para ampliar";
  position: absolute;
  right: 8px;
  bottom: 6px;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-size: 10.5px;
  font-weight: 600;
}

/* Vista ampliada */
.zoom-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(12, 10, 9, 0.94);
  flex-direction: column;
}
.zoom-overlay.show { display: flex; }
.zoom-bar {
  display: flex;
  gap: 8px;
  padding: 10px 12px;
  background: rgba(0, 0, 0, 0.55);
}
.zoom-btn {
  min-height: 40px;
  padding: 8px 14px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.zoom-btn:active { background: rgba(255, 255, 255, 0.18); }
.zoom-reset { margin-left: auto; }
.zoom-close { background: rgba(179, 64, 47, 0.85); border-color: transparent; }
.zoom-stage {
  flex: 1 1 auto;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  display: block;
  padding: 8px;
  touch-action: pan-x pan-y;
}
.zoom-stage img {
  display: block;
  width: 100%;
  height: auto;
  margin: 0 auto;
  border-radius: 8px;
}

@media (max-width: 620px) {
  .scan-head { margin: -14px -14px 10px; padding: 12px 14px 10px; }
  .modal-card.scan-card { max-height: calc(100dvh - 16px); }
}
/* O modal tem z-index alto; a vista ampliada é aberta de dentro dele, por
   isso tem de ficar acima de tudo. */
.zoom-overlay { z-index: 900; }
.zoom-bar { padding-top: max(10px, env(safe-area-inset-top)); }
/* O modal usa z-index 1000; a vista ampliada abre por cima dele. */
.zoom-overlay { z-index: 1100; }
/* ============================================================
   20. Correção do corte no modal do leitor
   ============================================================
   O cabeçalho usava margens negativas para "sangrar" até à borda do
   cartão. Isso tirava o conteúdo da área com padding e os botões
   ficavam cortados na base. Agora o cartão não tem padding próprio:
   cada bloco recebe o seu, e o cabeçalho fica sticky sem truques. */
.modal-card.scan-card {
  padding: 0 0 18px;
  overflow-y: auto;
}
.scan-card .scan-head {
  position: sticky;
  top: 0;
  z-index: 3;
  margin: 0;
  padding: 18px 18px 12px;
  background: var(--card);
  border-bottom: 1px solid var(--border);
}
.scan-card > *:not(.scan-head) {
  padding-left: 18px;
  padding-right: 18px;
}
.scan-card .scan-hint { padding-bottom: 6px; }

/* Os botões de origem herdavam a cor de ligação de uma regra geral. */
.scan-source,
.scan-source strong,
.scan-source small { color: var(--heading); }
.scan-source strong { color: var(--heading); }
.scan-source small { color: var(--muted); }
.scan-source-ico { color: inherit; }

@media (max-width: 620px) {
  .scan-card .scan-head { padding: 14px 14px 10px; }
  .scan-card > *:not(.scan-head) { padding-left: 14px; padding-right: 14px; }
}
/* ============================================================
   21. Menu de consultas: separadores de categoria
   ============================================================ */
.tier-tabs {
  display: flex;
  gap: 8px;
  margin: 12px 0 14px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: 2px;
}
.tier-tabs::-webkit-scrollbar { display: none; }

.tier-tab {
  flex: 0 0 auto;
  min-height: 40px;
  padding: 9px 15px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--card);
  color: var(--muted);
  font-family: var(--font-sans);
  font-size: 13.5px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.tier-tab:active { transform: scale(0.98); }
.tier-tab.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fffaf3;
  box-shadow: 0 8px 18px -12px rgba(180, 83, 9, 0.9);
}

/* A categoria ativa mostra as opções sem precisar de abrir nada. */
.service-group.tab-ativa {
  margin-top: 0;
  border: 0;
  background: none;
  border-radius: 0;
  overflow: visible;
}
.service-group.tab-ativa > summary { display: none; }
.service-group.tab-ativa .service-picker {
  padding: 0;
  background: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Cartões de serviço: mais altos e com um marcador claro. */
.service-card {
  position: relative;
  min-height: 56px;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 14px;
  transition: border-color 0.15s, background 0.15s;
}
.service-card .s-check {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
  border-radius: 50%;
  border: 2px solid var(--border);
  background: var(--card);
  color: transparent;
  font-size: 12px;
  font-weight: 700;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.service-card.selected {
  border-color: var(--accent);
  background: var(--accent-soft);
}
.service-card.selected .s-check {
  background: var(--accent);
  border-color: var(--accent);
  color: #fffaf3;
}

/* Linha do que está escolhido, junto ao botão. */
.escolha-linha {
  display: flex;
  align-items: baseline;
  gap: 7px;
  flex-wrap: wrap;
  margin: 16px 0 10px;
  padding: 9px 12px;
  border-radius: 11px;
  background: var(--well);
  border: 1px solid var(--border);
  font-size: 12.5px;
}
.escolha-prefixo { color: var(--muted); }
.escolha-valor { color: var(--heading); font-size: 13.5px; }

@media (max-width: 620px) {
  .tier-tab { min-height: 42px; padding: 9px 14px; font-size: 13px; }
  .service-card { min-height: 58px; }
}
/* Falta de ar entre o subtítulo e os botões do leitor. */
.scan-card .scan-sources { margin-top: 16px; }
.scan-card .scan-head { padding-bottom: 14px; }
/* ============================================================
   22. Menu de consulta reestruturado
   ============================================================ */

/* --- Barra de ação: o Check está sempre ao alcance --- */
.cta-bar {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 18px;
}
.cta-info {
  display: flex;
  align-items: baseline;
  gap: 7px;
  flex-wrap: wrap;
  padding: 9px 12px;
  border-radius: 11px;
  background: var(--well);
  border: 1px solid var(--border);
  font-size: 12.5px;
}
.cta-rotulo { color: var(--muted); }
.cta-valor { color: var(--heading); font-size: 13.5px; }
.cta-bar .submit { width: 100%; margin: 0; }

/* Em telemóvel a barra fixa-se em baixo. O padding no body impede que
   tape o fim da página. */
@media (max-width: 900px) {
  body.tem-cta { padding-bottom: 104px; }
  .cta-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 60;
    margin: 0;
    gap: 6px;
    padding: 9px 14px calc(9px + env(safe-area-inset-bottom));
    background: var(--bg);
    border-top: 1px solid var(--border);
    box-shadow: 0 -10px 30px -24px rgba(0, 0, 0, 0.6);
  }
  .cta-bar .cta-info {
    padding: 0;
    border: 0;
    background: none;
    font-size: 11.5px;
    min-height: 15px;
  }
  .cta-bar .cta-valor { font-size: 12.5px; }
  .cta-bar .submit { min-height: 46px; font-size: 15px; }
  /* Antes do IMEI estar válido, o botão está desligado: a barra fica
     discreta para não prometer o que não faz. */
  .cta-bar:not(.pronto) .cta-info { opacity: 0.75; }
}

/* --- Categorias: fila de pastilhas --- */
.tier-tabs {
  display: flex;
  gap: 8px;
  margin: 12px 0 14px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: 2px;
}
.tier-tabs::-webkit-scrollbar { display: none; }

.tier-tab {
  flex: 0 0 auto;
  min-height: 40px;
  padding: 9px 15px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--card);
  color: var(--muted);
  font-family: var(--font-sans);
  font-size: 13.5px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.tier-tab:active { transform: scale(0.98); }
.tier-tab.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fffaf3;
  box-shadow: 0 8px 18px -12px rgba(180, 83, 9, 0.9);
}

/* --- Categoria ativa: lista logo à vista, sem acordeão --- */
.service-group.tab-ativa {
  margin-top: 0;
  border: 0;
  background: none;
  border-radius: 0;
  overflow: visible;
}
.service-group.tab-ativa > summary { display: none; }
.service-group.tab-ativa .service-picker {
  padding: 0;
  background: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* --- Cartões de serviço: linha compacta e legível --- */
.service-card {
  position: relative;
  min-height: 56px;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 14px;
  transition: border-color 0.15s, background 0.15s;
}
.service-card .s-desc {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.service-card .s-check {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
  border-radius: 50%;
  border: 2px solid var(--border);
  background: var(--card);
  color: transparent;
  font-size: 12px;
  font-weight: 700;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.service-card.selected {
  border-color: var(--accent);
  background: var(--accent-soft);
}
.service-card.selected .s-check {
  background: var(--accent);
  border-color: var(--accent);
  color: #fffaf3;
}

/* --- Filtro (só em listas longas) --- */
.service-search {
  width: 100%;
  box-sizing: border-box;
  margin: 0 0 10px;
  padding: 11px 13px;
  border: 1px solid var(--border);
  border-radius: 11px;
  background: var(--card);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 14px;
}
.service-search:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-soft);
}
.service-empty {
  margin: 0 0 10px;
  font-size: 12.5px;
  color: var(--muted);
}

@media (max-width: 620px) {
  .tier-tab { min-height: 42px; padding: 9px 14px; font-size: 13px; }
  .service-card { min-height: 58px; padding: 12px; }
  .service-card .s-name { font-size: 14.5px; }
}
/* ============================================================
   23. Resultado da consulta em modal
   ============================================================ */
.result-modal {
  max-width: 560px;
  width: calc(100vw - 28px);
  max-height: calc(100dvh - 28px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0 0 16px;
}
.result-head {
  position: sticky;
  top: 0;
  z-index: 3;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 18px 12px;
  background: var(--card);
  border-bottom: 1px solid var(--border);
}
.result-head .modal-title { margin: 0; }
.result-sub { margin: 3px 0 0; font-size: 12px; color: var(--muted); }
.result-modal > *:not(.result-head) { padding-left: 18px; padding-right: 18px; }

/* Os dois campos decisivos, em cartões grandes */
.destaques {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 14px;
}
.destaques.so-um { grid-template-columns: 1fr; }
.destaque {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 12px 13px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: var(--well);
}
.destaque .d-rotulo {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--muted);
}
.destaque .d-valor {
  font-family: var(--font-serif);
  font-size: 19px;
  line-height: 1.15;
  color: var(--heading);
  word-break: break-word;
}
.destaque.ok {
  background: rgba(31, 122, 69, 0.10);
  border-color: rgba(31, 122, 69, 0.35);
}
.destaque.ok .d-valor { color: #1f7a45; }
.destaque.fail {
  background: rgba(179, 64, 47, 0.10);
  border-color: rgba(179, 64, 47, 0.35);
}
.destaque.fail .d-valor { color: var(--danger); }

/* Dentro do modal o cartão de resultado perde a moldura dupla */
.result-modal .result-card {
  margin-top: 14px;
  border: 0;
  padding: 0;
  background: none;
  box-shadow: none;
}
.result-modal .result-card .info-grid { margin-top: 10px; }

.result-foot {
  display: flex;
  gap: 10px;
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}
.result-foot .mini-btn { flex: 1 1 0; min-height: 42px; }

@media (max-width: 620px) {
  .result-head { padding: 14px 14px 10px; }
  .result-modal > *:not(.result-head) { padding-left: 14px; padding-right: 14px; }
  .destaques { grid-template-columns: 1fr; }
  .destaque .d-valor { font-size: 18px; }
}

/* ============================================================
   24. Últimas consultas
   ============================================================ */
.ultimas { margin-top: 26px; }
.ultimas-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}
.ultimas-head h2 {
  margin: 0;
  font-family: var(--font-serif);
  font-size: 19px;
  color: var(--heading);
}
.ultimas-head a {
  font-size: 12px;
  color: var(--accent-dark);
  text-decoration: none;
  border-bottom: 1px solid rgba(180, 83, 9, 0.3);
}
.ultimas-list { display: flex; flex-direction: column; gap: 8px; }

.ultima {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  padding: 11px 13px;
  border: 1px solid var(--border);
  border-radius: 13px;
  background: var(--card);
  text-align: left;
  cursor: pointer;
  font-family: var(--font-sans);
  transition: border-color 0.15s, background 0.15s;
}
.ultima:hover { border-color: var(--accent); background: var(--accent-soft); }
.ultima:active { transform: scale(0.995); }

.u-estado {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  flex: 0 0 auto;
  border-radius: 50%;
  font-size: 13px;
  font-weight: 700;
}
.u-estado.ok { background: rgba(31, 122, 69, 0.12); color: #1f7a45; }
.u-estado.fail { background: rgba(179, 64, 47, 0.12); color: var(--danger); }

.u-corpo { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1 1 auto; }
.u-imei {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--heading);
  letter-spacing: 0.2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.u-servico { font-size: 11.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.u-hora { flex: 0 0 auto; font-size: 11.5px; color: var(--muted); }

@media (max-width: 620px) {
  .ultima { padding: 10px 11px; gap: 9px; }
  .u-hora { font-size: 11px; }
}
/* ============================================================
   25. Últimas consultas saem da frente durante a preparação
   ============================================================
   Com um IMEI válido escrito, o foco é a consulta. A lista antiga
   esbate-se e deixa de responder a cliques; volta ao normal quando o
   campo fica vazio ou inválido. */
.ultimas {
  transition: filter 0.28s ease, opacity 0.28s ease, transform 0.28s ease;
}
body.consulta-pronta .ultimas {
  filter: blur(3px);
  opacity: 0.28;
  transform: scale(0.99);
  pointer-events: none;
  user-select: none;
}
/* Em ecrãs pequenos esconde-se mesmo: espaço é o que menos há. */
@media (max-width: 620px) {
  body.consulta-pronta .ultimas {
    filter: blur(4px);
    opacity: 0.16;
  }
}
/* Quem pediu menos animações continua a ter o efeito, sem transição. */
@media (prefers-reduced-motion: reduce) {
  .ultimas { transition: none; }
}
/* ============================================================
   26. Últimas consultas compactas
   ============================================================ */
.ultimas.compacta .ultimas-list .ultima:nth-child(n+3) { display: none; }
.ultimas.aberta .ultimas-list .ultima:nth-child(n+3) { display: flex; }

/* Menos peso vertical em geral. */
.ultimas-list { gap: 6px; }
.ultima { padding: 9px 12px; }
.ultimas-toggle {
  display: block;
  width: 100%;
  margin-top: 8px;
  padding: 9px 12px;
  border: 1px dashed var(--border);
  border-radius: 11px;
  background: none;
  color: var(--accent-dark);
  font-family: var(--font-sans);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
}
.ultimas-toggle:hover { border-color: var(--accent); background: var(--accent-soft); }
/* ============================================================
   27. A consultar: a lista sai mesmo de cena
   ============================================================
   Durante o pedido não se mostra o histórico antigo — nem esbatido —
   para não haver dúvida sobre o que está a acontecer. */
body.consulta-em-curso .ultimas { display: none; }
body.consulta-em-curso .cta-bar .submit { cursor: progress; }
/* ============================================================
   28. Ajustes finais: lista coerente, + no cabeçalho, copiar IMEI
   ============================================================ */

/* O + / − vive no cabeçalho da secção. */
.ultimas-head { align-items: center; }
.ultimas-head h2 { margin-right: auto; }
.ultimas-toggle {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  margin-left: 8px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: var(--card);
  color: var(--accent-dark);
  font-family: var(--font-sans);
  font-size: 17px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.ultimas-toggle:hover { border-color: var(--accent); background: var(--accent-soft); }

/* O botão antigo de texto deixa de existir; se sobrar algum, esconde-se. */
.ultimas-list + .ultimas-toggle { display: none; }

/* IMEI copiável */
.u-imei { cursor: copy; }
.u-imei:hover { text-decoration: underline; text-underline-offset: 2px; }
.u-imei.copiado { color: #1f7a45; }
.u-imei.copiado::after { content: " ✓"; font-size: 11px; }

/* O esbatimento foi retirado do comportamento; esta regra garante que
   nenhuma classe antiga em cache o possa reativar. */
body.consulta-pronta .ultimas {
  filter: none;
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
/* ============================================================
   29. Últimas consultas: fechadas por completo
   ============================================================
   Por padrão só se vê o título e o "+". As ordens aparecem quando se
   abre — e o "ver todas" só faz sentido aí, por isso acompanha. */
.ultimas.compacta .ultimas-list { display: none; }
.ultimas.aberta .ultimas-list { display: flex; }

/* O link "ver todas" pertence ao estado aberto. */
.ultimas-head a { display: none; }
.ultimas.aberta .ultimas-head a { display: inline-block; }

/* Sem a lista à vista, o título não precisa de tanto peso em baixo. */
.ultimas.compacta .ultimas-head { margin-bottom: 0; }
/* ============================================================
   30. Ordens: botão de abrir + modelo
   ============================================================ */
.ultima {
  display: grid;
  grid-template-columns: 26px 1fr auto;
  align-items: center;
  column-gap: 10px;
  row-gap: 2px;
  padding: 10px 12px;
}

/* Botão de descompactar no lugar do ✓ */
.u-toggle {
  grid-row: 1 / span 2;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--card);
  font-family: var(--font-sans);
  font-size: 17px;
  font-weight: 700;
  line-height: 1;
  transition: transform 0.18s, border-color 0.18s, background 0.18s;
}
.u-toggle.ok { color: #1f7a45; border-color: rgba(31, 122, 69, 0.35); }
.u-toggle.fail { color: var(--danger); border-color: rgba(179, 64, 47, 0.35); }
.ultima:hover .u-toggle,
.ultima:focus-visible .u-toggle {
  transform: rotate(90deg);
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent-dark);
}

/* Corpo: número e modelo na primeira linha, serviço na segunda */
.u-corpo {
  grid-column: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 7px;
  min-width: 0;
}
.u-modelo {
  font-size: 11.5px;
  color: var(--muted);
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.u-servico {
  flex: 1 1 100%;
  font-size: 11.5px;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.u-hora {
  grid-column: 3;
  grid-row: 1;
  align-self: start;
  white-space: nowrap;
}

@media (max-width: 620px) {
  .ultima { padding: 9px 10px; column-gap: 8px; }
  .u-modelo { font-size: 11px; }
}
/* Número e modelo na MESMA linha; o serviço na segunda. Sem isto o
   modelo descia sozinho e cada ordem gastava três linhas. */
.ultima .u-imei { flex: 0 0 auto; }
.ultima .u-modelo { flex: 1 1 auto; min-width: 0; }
.ultima .u-corpo { row-gap: 1px; }
/* Com basis "auto" o modelo media o texto todo e descia de linha por
   7px. Com basis 0 fica com o espaço que sobra e corta com reticências,
   mantendo número e modelo na mesma linha. */
.ultima .u-modelo { flex: 1 1 0; min-width: 0; }
/* O flex estava a esconder o modelo: número com basis automático e
   serviço a 100% deixavam o modelo com largura zero. Grelha explícita:
   número e modelo em cima, serviço em baixo. */
.ultima .u-corpo {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas:
    "imei modelo"
    "servico servico";
  column-gap: 8px;
  row-gap: 1px;
  align-items: baseline;
}
.ultima .u-imei { grid-area: imei; }
.ultima .u-modelo { grid-area: modelo; }
.ultima .u-servico { grid-area: servico; flex: none; }
/* ============================================================
   31. Admin: utilizadores mais organizados
   ============================================================ */
/* As três colunas de acesso (plano, créditos, uso de hoje) passam a
   ler-se como um bloco só, em vez de três informações soltas. */
.users-table tbody td:nth-child(3),
.users-table tbody td:nth-child(4),
.users-table tbody td:nth-child(5) {
  background: var(--well);
}
.users-table tbody td:nth-child(3) { border-left: 2px solid var(--border); }
.users-table tbody td:nth-child(5) { border-right: 2px solid var(--border); }
.users-table tbody td:nth-child(3) .admin-select { min-width: 150px; }
.users-table tbody td:nth-child(4) .credits-input { width: 76px; }

/* Cabeçalho correspondente, com o mesmo realce. */
.users-table thead th:nth-child(3),
.users-table thead th:nth-child(4),
.users-table thead th:nth-child(5) {
  background: var(--well);
  font-size: 10px;
}
.users-table thead th:nth-child(3) { border-left: 2px solid var(--border); }
.users-table thead th:nth-child(5) { border-right: 2px solid var(--border); }

/* O "Criar utilizador" recolhido: mesma linguagem da área de segurança
   do dashboard, para o painel não parecer outra aplicação. */
.new-user-card.sec-area { margin-top: 14px; }
.new-user-card .sec-body { padding-top: 4px; }
.new-user-card .new-user-form { margin-top: 0; }
.new-user-card .new-user-heading { display: none; }

/* Botão da chave: deixa claro que é a password de qualquer conta. */
.row-actions .ico-btn[data-open-password] { font-size: 15px; }
/* ============================================================
   32. Ações por conta num menu "..."
   ============================================================ */
.row-actions { position: relative; display: inline-flex; }

.row-actions-toggle {
  width: 30px;
  height: 30px;
  font-size: 17px;
  font-weight: 700;
  line-height: 1;
  border-radius: 9px;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--muted);
  cursor: pointer;
}
.row-actions.open .row-actions-toggle {
  border-color: var(--accent);
  color: var(--accent-dark);
  background: var(--accent-soft);
}

.row-actions-menu {
  display: none;
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  z-index: 70;
  min-width: 210px;
  padding: 6px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 13px;
  box-shadow: 0 20px 44px -24px rgba(0, 0, 0, 0.5);
}
.row-actions.open .row-actions-menu { display: flex; flex-direction: column; gap: 2px; }

.row-actions-menu .ra-item {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 9px 10px;
  border: 0;
  border-radius: 9px;
  background: none;
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 13px;
  text-align: left;
  cursor: pointer;
}
.row-actions-menu .ra-item:hover { background: var(--well); }
.row-actions-menu .ra-item.danger { color: var(--danger); }
.row-actions-menu .ra-item.warn { color: #a8621a; }
.row-actions-menu .ra-item .ra-label { flex: 1 1 auto; }

@media (max-width: 900px) {
  /* Em telemóvel o menu abre dentro do cartão, sem flutuar para fora. */
  .row-actions-menu {
    position: static;
    margin-top: 6px;
    min-width: 0;
    box-shadow: none;
    border: 1px solid var(--border);
    background: var(--well);
  }
  .row-actions-toggle { width: 100%; height: 38px; }
}
/* ============================================================
   33. Subscrições
   ============================================================ */
.sub-linha {
  display: block;
  margin-top: 3px;
  font-size: 10.5px;
  color: var(--muted);
}
.sub-linha.aviso { color: #a8621a; font-weight: 600; }
.sub-linha.expirada { color: var(--danger); font-weight: 700; }
.sub-linha.sem-prazo { opacity: 0.7; }

.dias-rapidos { display: flex; gap: 8px; margin: 10px 0 4px; }
.dias-rapidos .mini-btn { flex: 1 1 0; min-height: 38px; font-size: 13px; }

.sub-bloqueio { margin-bottom: 18px; }
.sub-aviso { margin-bottom: 14px; }
/* O nome da conta é o identificador principal da linha: passa a ter o
   peso de um número de encomenda, não de uma etiqueta. */
.users-table .u-name {
  font-family: var(--font-serif);
  font-size: 15.5px;
  font-weight: 600;
  letter-spacing: -0.1px;
  color: var(--heading);
  display: block;
  line-height: 1.2;
}
.users-table .u-meta { font-size: 10.5px; opacity: 0.75; }
.users-table .row-self .u-name { color: var(--accent-dark); }

/* Caixa de marcar das passwords */
.check-linha {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 10px 0 2px;
  font-size: 12.5px;
  color: var(--muted);
  line-height: 1.4;
  cursor: pointer;
}
.check-linha input { width: 16px; height: 16px; margin-top: 1px; flex: 0 0 auto; }
/* ============================================================
   34. Gestor de subscrições
   ============================================================ */
.sub-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}
.sub-hero h1 { margin: 0; }
.sub-hero .subtitle { margin: 4px 0 0; }
.sub-nova { width: auto; padding: 11px 18px; border-radius: 12px; }

.sub-kpis {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 18px;
}
.sub-kpi {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 13px 14px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: var(--card);
  border-left: 3px solid var(--border);
}
.sub-kpi-num { font-family: var(--font-serif); font-size: 24px; line-height: 1; color: var(--heading); }
.sub-kpi-lab { font-size: 10px; font-weight: 700; letter-spacing: 0.6px; text-transform: uppercase; color: var(--muted); }
.sub-kpi.ativa { border-left-color: #1f7a45; }
.sub-kpi.aviso { border-left-color: var(--accent-bright); }
.sub-kpi.expirada { border-left-color: var(--danger); }
.sub-kpi.neutra { border-left-color: var(--muted); }

.sub-lista-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.sub-lista-head input {
  flex: 1 1 220px;
  max-width: 320px;
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--well);
  font-family: var(--font-sans);
  font-size: 13px;
}

.sub-lista { display: flex; flex-direction: column; gap: 8px; }
.sub-linha-item {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto auto auto auto;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 13px;
  background: var(--card);
}
.sub-avatar {
  display: grid;
  place-items: center;
  width: 34px; height: 34px;
  border-radius: 11px;
  background: linear-gradient(150deg, var(--accent-bright), var(--accent-dark));
  color: #fffaf3;
  font-family: var(--font-serif);
  font-size: 16px; font-weight: 600;
}
.sub-id { display: flex; flex-direction: column; min-width: 0; }
.sub-nome {
  font-family: var(--font-serif);
  font-size: 16px;
  font-weight: 600;
  color: var(--heading);
  line-height: 1.15;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sub-meta { font-size: 10.5px; color: var(--muted); }

.sub-dias {
  min-width: 48px;
  text-align: center;
  padding: 4px 8px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 700;
  background: var(--well);
  color: var(--heading);
}
.sub-dias.ok { background: rgba(31,122,69,0.12); color: #1f7a45; }
.sub-dias.aviso { background: rgba(217,119,15,0.14); color: #a8621a; }
.sub-dias.exp { background: rgba(179,64,47,0.14); color: var(--danger); }
.sub-dias.neutro { background: var(--well); color: var(--muted); }

.sub-estado {
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.4px; text-transform: uppercase;
  padding: 3px 9px; border-radius: 999px;
  background: var(--well); color: var(--muted);
}
.sub-estado.ativa { background: rgba(31,122,69,0.12); color: #1f7a45; }
.sub-estado.a-expirar { background: rgba(217,119,15,0.14); color: #a8621a; }
.sub-estado.expirada { background: rgba(179,64,47,0.14); color: var(--danger); }
.sub-estado.sem-prazo { background: var(--well); color: var(--muted); }

.sub-fim { font-size: 11.5px; color: var(--muted); white-space: nowrap; }
.sub-acoes { display: flex; gap: 5px; align-items: center; }
.sub-form { display: flex; gap: 5px; margin: 0; }
.sub-form .mini-btn { min-height: 32px; padding: 5px 9px; font-size: 12px; }
.sub-menos { color: var(--danger); }
.dias-rapidos .mini-btn.ativo { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-dark); }

@media (max-width: 900px) {
  .sub-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sub-linha-item {
    grid-template-columns: 34px minmax(0, 1fr) auto auto;
    grid-template-areas:
      "av id dias estado"
      "av id fim acoes";
    row-gap: 6px;
  }
  .sub-avatar { grid-area: av; }
  .sub-id { grid-area: id; }
  .sub-dias { grid-area: dias; }
  .sub-estado { grid-area: estado; justify-self: end; }
  .sub-fim { grid-area: fim; }
  .sub-acoes { grid-area: acoes; justify-self: end; }
}
@media (max-width: 620px) {
  .sub-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .sub-nome { font-size: 15px; }
  .sub-nova { width: 100%; }
}
/* ============================================================
   35. Subscrições v2: + e − com modal, seleção múltipla
   ============================================================ */
.sub-hero-txt h1 { text-align: left; margin: 0; }
.sub-hero .subtitle { text-align: left; margin: 4px 0 0; }

/* Coluna da caixa de seleção à frente de tudo */
.sub-linha-item {
  grid-template-columns: 18px 34px minmax(0, 1fr) auto auto auto auto;
}
.sub-check { width: 17px; height: 17px; accent-color: var(--accent); cursor: pointer; }
.sub-sel-todas {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 600; font-size: 13px; cursor: pointer;
}
.sub-sel-todas input { width: 17px; height: 17px; accent-color: var(--accent); }

/* Botões + e − redondos */
.sub-mais, .sub-menos {
  display: grid; place-items: center;
  width: 34px; height: 34px;
  border-radius: 50%;
  font-family: var(--font-sans);
  font-size: 19px; font-weight: 700; line-height: 1;
  cursor: pointer;
  transition: transform 0.12s, background 0.15s, border-color 0.15s;
}
.sub-mais {
  border: 1px solid rgba(31,122,69,0.4);
  background: rgba(31,122,69,0.10);
  color: #1f7a45;
}
.sub-menos {
  border: 1px solid rgba(179,64,47,0.35);
  background: rgba(179,64,47,0.08);
  color: var(--danger);
}
.sub-mais:hover { background: rgba(31,122,69,0.2); }
.sub-menos:hover { background: rgba(179,64,47,0.16); }
.sub-mais:active, .sub-menos:active { transform: scale(0.94); }

.sub-acoes { display: flex; gap: 7px; align-items: center; }

/* Barra das contas marcadas */
.sub-bulk {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: 18px;
  z-index: 80;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 999px;
  background: var(--card);
  border: 1px solid var(--border);
  box-shadow: 0 18px 40px -20px rgba(0,0,0,0.55);
}
.sub-bulk-info { font-size: 12.5px; color: var(--muted); }
.sub-bulk .mini-btn { min-height: 36px; }

@media (max-width: 900px) {
  .sub-linha-item {
    grid-template-columns: 18px 34px minmax(0, 1fr) auto;
    grid-template-areas:
      "ck av id dias"
      "ck av id estado"
      "ck av fim acoes";
    row-gap: 5px;
  }
  .sub-check { grid-area: ck; }
  .sub-dias { grid-area: dias; justify-self: end; }
  .sub-estado { grid-area: estado; justify-self: end; }
  .sub-fim { grid-area: fim; }
  .sub-acoes { grid-area: acoes; justify-self: end; }
  .sub-bulk { left: 12px; right: 12px; transform: none; bottom: 12px; justify-content: space-between; }
}
/* ============================================================
   36. Mensagens do site em modal
   ============================================================ */
.flash-card {
  max-width: 420px;
  width: calc(100vw - 32px);
  text-align: center;
  border-top: 4px solid var(--border);
}
.flash-card.ok { border-top-color: #1f7a45; }
.flash-card.erro { border-top-color: var(--danger); }
.flash-icone { font-size: 30px; line-height: 1; margin-bottom: 6px; }
.flash-card.ok .flash-icone { color: #1f7a45; }
.flash-card.erro .flash-icone { color: var(--danger); }
.flash-texto {
  margin: 6px 0 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text);
}
.flash-texto.erro { color: var(--danger); font-weight: 500; }
.flash-card .modal-actions { margin-top: 18px; }
.flash-card .modal-actions .primary { width: 100%; }
/* ============================================================
   37. Interruptor das inscrições
   ============================================================ */
.reg-toggle {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin: 14px 0 0;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 13px;
  background: var(--well);
}
.reg-toggle-txt { display: flex; flex-direction: column; gap: 1px; flex: 1 1 220px; }
.reg-toggle-txt strong { font-size: 13.5px; color: var(--heading); }
.reg-toggle-txt small { font-size: 11.5px; color: var(--muted); }
.reg-toggle .mini-btn { min-height: 38px; }
/* ============================================================
   38. Filtros de subscrição por estado
   ============================================================ */
.sub-filtros {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
  margin: 0 0 12px;
}
.filtro-chip {
  padding: 7px 13px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--card);
  color: var(--muted);
  font-family: var(--font-sans);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.filtro-chip:hover { border-color: var(--accent); }
.filtro-chip.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fffaf3;
}
/* ============================================================
   39. Últimas consultas: uma amostra esbatida quando fechadas
   ============================================================
   Fechada, a lista não desaparece: fica a última consulta, esbatida,
   a dizer "há mais aqui". Ao abrir, aparecem as cinco nítidas. */
.ultimas.compacta .ultimas-list { display: flex; }
.ultimas.compacta .ultima { display: none; }
.ultimas.compacta .ultima:first-child {
  display: grid;
  filter: blur(2.5px);
  opacity: 0.45;
  pointer-events: none;
  user-select: none;
}
.ultimas.aberta .ultimas-list { display: flex; }
.ultimas.aberta .ultima {
  display: grid;
  filter: none;
  opacity: 1;
  pointer-events: auto;
  user-select: auto;
}
/* ============================================================
   40. Códigos de recuperação (2FA sem depender do bot)
   ============================================================ */
.recovery-block {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}
.recovery-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}
.recovery-head strong { font-size: 13.5px; color: var(--heading); }
.recovery-count { font-size: 11.5px; color: var(--muted); }

.recovery-codes {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0 8px;
}
.recovery-codes code {
  padding: 7px 11px;
  border-radius: 9px;
  background: var(--well);
  border: 1px solid var(--border);
  font-family: var(--font-sans);
  font-size: 14px;
  letter-spacing: 1px;
  user-select: all;
}

.recovery-fallback {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}
.recovery-fallback summary {
  cursor: pointer;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--accent-dark);
}
.recovery-fallback input { margin: 8px 0; }
.recovery-block .mini-btn { min-height: 38px; }