/* ══════════════════════════════════════════════════════════════════════
   RESPONSIVO — CotaPrime
   Carregado DEPOIS do style.css. Não cria cor, fonte, raio nem sombra:
   usa só as variáveis do :root / [data-theme="dark"] (modo claro e escuro
   continuam valendo sozinhos).

   Faixas (desktop-first, como o resto do sistema):
     ≤ 1280px  menu lateral só com ícones (expande no hover; botão salva a escolha)
     < 1024px  menu vira gaveta (☰); tabela de resultados sem #, Tipo doc., Data
     < 768px   celular: topo só ícones + menu ⋯, formulário 1 coluna, resultados
               em cartões, barra de ações fixa no rodapé, alvos de toque 44px
     < 480px   janelas em tela cheia com rodapé fixo; ajustes finos

   REGRA DE OURO: tudo que mexe em tabela, cartão de estatística, tag etc. fica
   com escopo .app-shell (ou id da tela). O PDF (relatorio.js → gerarPDF) é
   montado num <div> solto no <body>, fora do .app-shell — assim ele sai igual
   no computador e no celular.
   ══════════════════════════════════════════════════════════════════════ */

/* Área principal nunca cresce além da tela: tabelas largas rolam dentro do
   .table-wrap delas (sem isto a tabela de resultados empurrava a página em
   1024–1366px) */
.main { min-width: 0; }

/* ── Peças novas: escondidas por padrão (aparecem só na faixa delas) ── */
#btn-gaveta, #btn-sidebar-modo, #topo-mais { display: none; }
#gaveta-fundo { display: none; }
.so-mobile { display: none; }

/* Menu ⋯ genérico (topo no celular, cartões de Minhas Listas) */
.menu-mais { position: relative; }
.menu-mais-lista {
  display: none;
  position: absolute; top: calc(100% + 6px); right: 0;
  min-width: 190px;
  padding: 6px;
  background: var(--surface);
  border: 1px solid var(--border2);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  z-index: 60;
  flex-direction: column; gap: 2px;
}
.menu-mais.aberto .menu-mais-lista { display: flex; }
.menu-mais-lista > button {
  display: flex; align-items: center; gap: 9px;
  width: 100%;
  padding: 10px 12px;
  border: none; border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text);
  font-family: var(--font); font-size: 13px; font-weight: 500;
  text-align: left; cursor: pointer;
}
.menu-mais-lista > button:hover { background: var(--surface2); }
.menu-mais-lista > button svg { width: 15px; height: 15px; flex-shrink: 0; }
.menu-mais-lista > button.btn-danger { color: var(--red); }
.ponto-aviso {
  position: absolute; top: 4px; right: 4px;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--red);
  border: 2px solid var(--surface);
}

/* Minhas Listas no computador: o ⋯ some e os botões aparecem em linha,
   com "Editar" de volta na 1ª posição — visual idêntico ao de antes */
.lista-card .acoes-extra { display: contents; }
.lista-card .acoes-extra > .menu-mais-btn { display: none; }
.lista-card .acoes-extra > .menu-mais-lista {
  display: contents;
  position: static; padding: 0; border: 0; box-shadow: none; background: none; min-width: 0;
}
.lista-card .acoes-extra .acao-editar { order: -1; }
.lista-card .acoes-extra > .menu-mais-lista > button {
  /* volta ao .btn .btn-sm normal (anula o estilo de item de menu acima) */
  display: inline-flex; width: auto;
  padding: 4px 10px; font-size: 12px;
  border: 1px solid var(--border2); background: var(--surface);
}
.lista-card .acoes-extra > .menu-mais-lista > button.btn-danger { background: var(--red-bg); border-color: transparent; }

/* ══════════ ≤ 1280px e ≥ 1024px — MENU LATERAL SÓ COM ÍCONES ══════════ */
@media (min-width: 1024px) and (max-width: 1280px) {
  html:not(.sidebar-expandida) { --sidebar-w: 72px; }

  #btn-sidebar-modo {
    display: inline-flex; justify-content: center;
    width: 100%; margin-top: 10px;
  }
  #btn-sidebar-modo svg { transition: transform var(--transition); }
  html.sidebar-expandida #btn-sidebar-modo svg { transform: rotate(180deg); }

  .sidebar { transition: width var(--transition), box-shadow var(--transition); }

  /* recolhido: só ícones */
  html:not(.sidebar-expandida) .sidebar:not(:hover) .rotulo,
  html:not(.sidebar-expandida) .sidebar:not(:hover) .nav-label,
  html:not(.sidebar-expandida) .sidebar:not(:hover) .badge-lei,
  html:not(.sidebar-expandida) .sidebar:not(:hover) .logo-mark > div,
  html:not(.sidebar-expandida) .sidebar:not(:hover) .lei-box,
  html:not(.sidebar-expandida) .sidebar:not(:hover) .dev-info,
  html:not(.sidebar-expandida) .sidebar:not(:hover) #label-theme,
  html:not(.sidebar-expandida) .sidebar:not(:hover) #info-user,
  html:not(.sidebar-expandida) .sidebar:not(:hover) .sidebar-footer .btn[onclick="abrirModalCores()"] { display: none; }

  html:not(.sidebar-expandida) .sidebar:not(:hover) .sidebar-header { padding: 1rem .5rem; }
  html:not(.sidebar-expandida) .sidebar:not(:hover) .logo-mark { justify-content: center; }
  html:not(.sidebar-expandida) .sidebar:not(:hover) .nav-section { padding: .5rem; }
  html:not(.sidebar-expandida) .sidebar:not(:hover) .nav-item {
    justify-content: center; padding: 10px 0;
  }
  html:not(.sidebar-expandida) .sidebar:not(:hover) .nav-item svg { width: 18px; height: 18px; }
  /* contador de listas e cadeado viram um pontinho no canto do ícone */
  html:not(.sidebar-expandida) .sidebar:not(:hover) .nav-badge,
  html:not(.sidebar-expandida) .sidebar:not(:hover) .nav-cadeado {
    position: absolute; top: 5px; right: 12px; margin: 0;
    width: 8px; height: 8px; min-width: 0; padding: 0;
    font-size: 0; border-radius: 50%; overflow: hidden;
    background: var(--accent);
  }
  html:not(.sidebar-expandida) .sidebar:not(:hover) .nav-item.active .nav-badge { background: #fff; }
  html:not(.sidebar-expandida) .sidebar:not(:hover) .sidebar-footer { padding: .5rem; }
  html:not(.sidebar-expandida) .sidebar:not(:hover) #bloco-usuario { padding: 4px; }
  html:not(.sidebar-expandida) .sidebar:not(:hover) #bloco-usuario .btn { margin-top: 0 !important; font-size: 0 !important; }
  html:not(.sidebar-expandida) .sidebar:not(:hover) #bloco-usuario .btn::after { content: 'Sair'; font-size: 10.5px; }

  /* hover no menu recolhido: abre por cima do conteúdo (o nome aparece) */
  html:not(.sidebar-expandida) .sidebar:hover {
    width: 248px;
    box-shadow: var(--shadow-md);
    transition-delay: .15s;
  }
}

/* ══════════ < 1024px — GAVETA ══════════ */
@media (max-width: 1023.98px) {
  :root { --sidebar-w: 0px; }

  .sidebar {
    width: 280px; max-width: 86vw;
    transform: translateX(-100%);
    transition: transform var(--transition), box-shadow var(--transition);
    z-index: 190;               /* acima do topo (40) e do FAB (150); abaixo das janelas (200) */
  }
  html.gaveta-aberta .sidebar { transform: none; box-shadow: var(--shadow-md); }

  #gaveta-fundo {
    display: block;
    position: fixed; inset: 0;
    background: rgba(10,8,6,.45);        /* mesmo fundo do .modal-overlay */
    backdrop-filter: blur(2px);
    z-index: 185;
    opacity: 0; pointer-events: none;
    transition: opacity var(--transition);
  }
  html.gaveta-aberta #gaveta-fundo { opacity: 1; pointer-events: auto; }
  html.gaveta-aberta body { overflow: hidden; }

  #btn-gaveta { display: inline-flex; justify-content: center; flex-shrink: 0; }
  #btn-gaveta svg { width: 18px; height: 18px; }

  .main { margin-left: 0; min-width: 0; }
  .topbar { padding: .75rem 1rem; gap: 8px; }
  .topbar-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .page-content { padding: 1.1rem 1.1rem; }

  /* Pesquisa: formulário em 2 colunas */
  .app-shell #view-pesquisa > .card > .search-grid { grid-template-columns: 1fr 1fr; }

  /* Tabela de resultados: sem #, Tipo doc. e Data */
  .app-shell .tabela-resultados .c-num,
  .app-shell .tabela-resultados .c-tipo,
  .app-shell .tabela-resultados .c-data,
  .app-shell .tabela-resultados thead th:nth-child(2),
  .app-shell .tabela-resultados thead th:nth-child(6),
  .app-shell .tabela-resultados thead th:nth-child(9) { display: none; }

  /* Página inicial */
  #landing-page #como-funciona { padding-left: 1.5rem !important; padding-right: 1.5rem !important; }
  #landing-page .landing-features-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ══════════ < 768px — CELULAR ══════════ */
@media (max-width: 767.98px) {
  .so-desktop { display: none; }
  .so-mobile { display: inline; }

  .topbar { padding: .5rem .75rem; gap: 6px; }
  .topbar-title { font-size: 14px; }
  .page-content { padding: 1rem .875rem; }

  /* Topo: só ícones (nome no title); "Gerar PDF" mantém o texto;
     Notícias e Ajuda vão para o ⋯ */
  .topbar .btn .rotulo { display: none; }
  .topbar .btn.manter-rotulo .rotulo { display: inline; }
  .topbar .btn.topo-colapsavel { display: none; }
  #topo-mais { display: block; }
  .topbar .btn { min-height: 44px; min-width: 44px; justify-content: center; padding: 0 10px; }
  .topbar .btn svg { width: 17px; height: 17px; }

  /* Painel de notícias: ocupa a largura disponível */
  #notif-panel { left: 8px !important; right: 8px !important; width: auto !important; top: 64px !important; }

  /* ── Pesquisa de Preços ── */
  .app-shell #view-pesquisa > .card > .search-grid { grid-template-columns: 1fr; }
  .app-shell #view-pesquisa .search-grid .span2 { grid-column: 1 / -1; }
  .app-shell .acoes-busca .btn-primary { width: 100%; justify-content: center; }

  /* filtros rápidos, status e "Ordenar por": uma linha que rola para o lado */
  .app-shell .chips-rolagem {
    flex-wrap: nowrap !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    padding-bottom: 2px;
  }
  .app-shell .chips-rolagem::-webkit-scrollbar { display: none; }
  .app-shell .chips-rolagem > * { flex-shrink: 0; white-space: nowrap; scroll-snap-align: start; }

  /* 4 quadros de resumo → 2×2 */
  .app-shell .stats-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
  .app-shell .stat-card { padding: .75rem .875rem; min-width: 0; }
  .app-shell .stat-value { font-size: 18px; overflow-wrap: anywhere; }

  /* ── Tabela de resultados → cartões (mesmos <td>, mesma ordem no DOM) ── */
  .app-shell .tabela-resultados,
  .app-shell .tabela-resultados tbody { display: block; width: 100%; }
  .app-shell .tabela-resultados thead { display: none; }
  .app-shell .tabela-resultados tbody tr {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr) auto auto;
    grid-template-areas:
      "chk  desc   desc  desc"
      "chk  preco  preco tipo"
      "chk  unid   unid  unid"
      "chk  orgao  uf    data"
      "acoes acoes acoes acoes";
    column-gap: 8px; row-gap: 6px;
    align-items: center;
    padding: 12px;
    margin-bottom: 10px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
  }
  .app-shell .tabela-resultados tbody tr:hover td { background: transparent; }
  .app-shell .tabela-resultados tbody td {
    display: block;
    padding: 0; border: none;
    max-width: none !important;
    min-width: 0;
  }
  .app-shell .tabela-resultados .c-chk  { grid-area: chk; align-self: start; width: auto; padding-top: 1px; }
  .app-shell .tabela-resultados .c-num  { display: none; }
  .app-shell .tabela-resultados .c-desc { grid-area: desc; }
  .app-shell .tabela-resultados .c-desc .truncate {
    white-space: normal;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  }
  .app-shell .tabela-resultados .c-desc > div:first-child { font-size: 13.5px !important; font-weight: 500; line-height: 1.35; }
  .app-shell .tabela-resultados .c-preco { grid-area: preco; }
  .app-shell .tabela-resultados .c-preco > span { font-size: 17px; }
  .app-shell .tabela-resultados .c-unid { grid-area: unid; margin-top: -4px; }
  .app-shell .tabela-resultados .c-unid::before { content: attr(data-label) ' '; font-size: 10.5px; color: var(--text3); }
  .app-shell .tabela-resultados .c-tipo { grid-area: tipo; display: block; justify-self: end; }
  .app-shell .tabela-resultados .c-orgao { grid-area: orgao; color: var(--text3); }
  .app-shell .tabela-resultados .c-orgao .truncate { font-size: 11.5px !important; }
  .app-shell .tabela-resultados .c-uf   { grid-area: uf; }
  .app-shell .tabela-resultados .c-data { grid-area: data; display: block; justify-self: end; }
  .app-shell .tabela-resultados .c-uf::before,
  .app-shell .tabela-resultados .c-data::before { content: '·'; margin-right: 6px; color: var(--text3); }
  .app-shell .tabela-resultados .c-acoes {
    grid-area: acoes;
    display: flex; gap: 8px;
    white-space: normal !important;
    padding-top: 4px;
  }
  .app-shell .tabela-resultados .c-acoes > a,
  .app-shell .tabela-resultados .c-acoes > button {
    flex: 1; justify-content: center;
    min-height: 44px; margin: 0 !important;
    font-size: 13px;
  }
  .app-shell .tabela-resultados .c-acoes > a { display: inline-flex; align-items: center; border: 1px solid var(--border2); border-radius: var(--radius-sm); }
  .app-shell .tabela-resultados .c-acoes svg { width: 14px !important; height: 14px !important; }
  .app-shell .tabela-resultados tfoot,
  .app-shell .tabela-resultados tfoot tr { display: block; }
  .app-shell .tabela-resultados tfoot td { display: block; border-radius: var(--radius-sm); }
  .app-shell .tabela-resultados tfoot .tf-rotulo { text-align: left !important; border-top: 2px solid var(--accent); border-radius: var(--radius-sm) var(--radius-sm) 0 0; }
  .app-shell .tabela-resultados tfoot .tf-valor { border-top: none; border-radius: 0 0 var(--radius-sm) var(--radius-sm); }
  .app-shell #results-area .table-wrap { overflow-x: visible; }
  .app-shell #outros-detalhes > div { padding: 10px; }

  /* ── Compras.gov: busca em largura cheia e tabela de preços → cartões
        (8 colunas em 360px é rolagem lateral; o acesso é de qualquer
        máquina — celular precisa do preço e da ação à mostra) ── */
  .app-shell #view-comprasgov #cg-btn { width: 100%; justify-content: center; }
  .app-shell #cg-resultados .cg-tab,
  .app-shell #cg-resultados .cg-tab tbody { display: block; width: 100%; }
  .app-shell #cg-resultados .cg-tab thead { display: none; }
  .app-shell #cg-resultados .cg-tab tbody tr {
    display: flex; flex-direction: column;
    margin-bottom: 10px; padding: 12px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
  }
  .app-shell #cg-resultados .cg-tab tbody td {
    display: block;
    padding: 4px 0 !important;
    border: none;
    max-width: none !important;
    white-space: normal !important;
  }
  .app-shell #cg-resultados .cg-tab td[data-label]::before {
    content: attr(data-label) ' ';
    display: block;
    font-size: 10px;
    font-weight: 700;
    color: var(--text3);
    text-transform: uppercase;
    letter-spacing: .05em;
  }
  .app-shell #cg-resultados .cg-tab .cg-c-item  { order: 1; font-size: 13.5px; font-weight: 500; line-height: 1.35; margin-bottom: 4px; }
  .app-shell #cg-resultados .cg-tab .cg-c-preco { order: 2; font-size: 17px; margin-bottom: 6px; }
  .app-shell #cg-resultados .cg-tab .cg-c-data  { order: 3; }
  .app-shell #cg-resultados .cg-tab .cg-c-qtd   { order: 4; }
  .app-shell #cg-resultados .cg-tab .cg-c-unid  { order: 5; }
  .app-shell #cg-resultados .cg-tab .cg-c-forn  { order: 6; }
  .app-shell #cg-resultados .cg-tab .cg-c-orgao { order: 7; }
  .app-shell #cg-resultados .cg-tab tbody td.cg-c-acoes {
    order: 8;
    display: flex; gap: 8px;
    padding: 10px 0 0 !important;
    margin-top: 6px;
    border-top: 1px dashed var(--border2);
  }
  .app-shell #cg-resultados .cg-tab tbody td.cg-c-acoes > * {
    flex: 1;
    justify-content: center;
    margin: 0 !important;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  /* ── Diários Oficiais (pesquisa de preços): mesma tratativa da tabela do
        Compras.gov — no celular a tabela de cotações vira cartões ── */
  .app-shell #qd-resultados .cg-tab,
  .app-shell #qd-resultados .cg-tab tbody { display: block; width: 100%; }
  .app-shell #qd-resultados .cg-tab thead { display: none; }
  .app-shell #qd-resultados .cg-tab tbody tr {
    display: flex; flex-direction: column;
    margin-bottom: 10px; padding: 12px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
  }
  .app-shell #qd-resultados .cg-tab tbody td {
    display: block;
    padding: 4px 0 !important;
    border: none;
    max-width: none !important;
    white-space: normal !important;
  }
  .app-shell #qd-resultados .cg-tab td[data-label]::before {
    content: attr(data-label) ' ';
    display: block;
    font-size: 10px;
    font-weight: 700;
    color: var(--text3);
    text-transform: uppercase;
    letter-spacing: .05em;
  }
  .app-shell #qd-resultados .cg-tab .cg-c-item  { order: 1; font-size: 13px; line-height: 1.4; margin-bottom: 4px; }
  .app-shell #qd-resultados .cg-tab .cg-c-preco { order: 2; font-size: 17px; margin-bottom: 6px; }
  .app-shell #qd-resultados .cg-tab .cg-c-data  { order: 3; }
  .app-shell #qd-resultados .cg-tab .cg-c-orgao { order: 7; }
  .app-shell #qd-resultados .cg-tab tbody td.cg-c-acoes {
    order: 8;
    display: flex; gap: 8px;
    padding: 10px 0 0 !important;
    margin-top: 6px;
    border-top: 1px dashed var(--border2);
  }
  .app-shell #qd-resultados .cg-tab tbody td.cg-c-acoes > * {
    flex: 1;
    justify-content: center;
    margin: 0 !important;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  /* checkbox maior, célula inteira clicável */
  .app-shell input[type=checkbox] { width: 22px; height: 22px; }

  /* ── Barra de ações fixa no rodapé (Selecionar todos / Desmarcar /
        Adicionar / Selecionar 3 fontes). O FAB "Selecionar 3 fontes" ocupa
        a vaga "fab" da grade — fica DENTRO da barra e não cobre cartão. ── */
  .app-shell .barra-acoes-resultados {
    position: fixed; left: 0; right: 0; bottom: 0;
    z-index: 150;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "sel desm" "fab add";
    gap: 8px;
    padding: 8px 12px calc(8px + env(safe-area-inset-bottom, 0px));
    background: var(--surface);
    border-top: 1px solid var(--border);
    box-shadow: var(--shadow-md);
  }
  .app-shell .barra-acoes-resultados .btn { min-height: 44px; width: 100%; justify-content: center; font-size: 12.5px; }
  .app-shell .barra-acoes-resultados .acao-sel  { grid-area: sel; }
  .app-shell .barra-acoes-resultados .acao-desm { grid-area: desm; }
  .app-shell .barra-acoes-resultados .acao-add  { grid-area: add; }
  .app-shell .fab-selecao {
    left: 12px; right: auto;
    bottom: calc(8px + env(safe-area-inset-bottom, 0px));
    width: calc(50vw - 16px);
    height: 44px; padding: 0 10px;
    justify-content: center;
    border-radius: var(--radius-sm);
    box-shadow: none;
    font-size: 12.5px;
    z-index: 151;
  }
  .app-shell .fab-selecao:hover { transform: none; box-shadow: none; }
  /* espaço no fim da tela para o último cartão não ficar atrás da barra */
  .app-shell #view-pesquisa { padding-bottom: calc(120px + env(safe-area-inset-bottom, 0px)); }

  /* ── Minhas Listas: Ver Itens e Relatório visíveis; o resto no ⋯ ── */
  .app-shell .cabecalho-tela { flex-wrap: wrap; gap: 10px; }
  .app-shell .lista-card { overflow: visible; }
  .app-shell .lista-card-header { flex-wrap: wrap; border-radius: var(--radius) var(--radius) 0 0; }
  .app-shell .lista-card-header > div:first-child { flex: 1 1 100% !important; }
  .app-shell .acoes-lista { width: 100%; }
  .app-shell .acoes-lista > .btn { flex: 1; justify-content: center; }
  .app-shell .lista-card .acoes-extra { display: block; }
  .app-shell .lista-card .acoes-extra > .menu-mais-btn { display: inline-flex; justify-content: center; }
  .app-shell .lista-card .acoes-extra > .menu-mais-lista {
    display: none;
    position: absolute; top: calc(100% + 6px); right: 0;
    min-width: 190px; padding: 6px;
    background: var(--surface);
    border: 1px solid var(--border2);
    border-radius: var(--radius);
    box-shadow: var(--shadow-md);
  }
  .app-shell .lista-card .acoes-extra.aberto > .menu-mais-lista { display: flex; }
  .app-shell .lista-card .acoes-extra > .menu-mais-lista > button {
    display: flex; width: 100%;
    padding: 10px 12px; font-size: 13px;
    border: none; background: transparent; justify-content: flex-start;
  }
  .app-shell .lista-card .acoes-extra > .menu-mais-lista > button:hover { background: var(--surface2); }
  .app-shell .lista-card .acoes-extra > .menu-mais-lista > button.btn-danger { background: transparent; color: var(--red); }
  .app-shell .lista-card .acoes-extra .acao-editar { order: 0; }
  .app-shell .lista-footer { flex-wrap: wrap; gap: 4px; }

  /* Relatório: seletor e botões quebram linha */
  .app-shell .barra-relatorio { flex-wrap: wrap; width: 100%; }
  .app-shell .barra-relatorio select { flex: 1 1 100%; min-width: 0 !important; }
  .app-shell .barra-relatorio .btn { flex: 1; justify-content: center; margin-left: 0 !important; }

  /* Administração */
  .app-shell #view-admin { padding: 0 !important; }
  .app-shell #view-admin .admin-bloco { padding: .875rem !important; }

  /* ── Toque: alvo mínimo de 44px; campos com 16px (iOS não dá zoom) ── */
  .app-shell .btn,
  .app-shell .nav-item,
  .app-shell .status-radio,
  .app-shell .filter-btn,
  .app-shell .landing-tcu-chip,
  .menu-mais-lista > button,
  .modal-overlay .btn { min-height: 44px; }
  .app-shell .status-radio, .app-shell .filter-btn { padding-top: 0 !important; padding-bottom: 0 !important; }
  .modal-close { width: 44px; height: 44px; }
  input[type=text], input[type=number], input[type=date], input[type=email],
  input[type=password], input[type=search], input:not([type]), select, textarea {
    font-size: 16px !important;
  }

  /* Avisos (toast): centralizados embaixo, acima da barra fixa */
  #toast {
    left: 50%; right: auto;
    bottom: calc(132px + env(safe-area-inset-bottom, 0px));
    max-width: calc(100vw - 32px);
    transform: translate(-50%, calc(100% + 160px));
  }
  #toast.show { transform: translate(-50%, 0); }

  /* Nada pode passar da largura da tela: campos com largura mínima fixa
     (inline, ~40 telas) e grades montadas em JS com minmax(220-320px) */
  .app-shell .page-content [style*="min-width"] { min-width: 0 !important; }
  .app-shell .page-content [style*="minmax(220px"],
  .app-shell .page-content [style*="minmax(230px"],
  .app-shell .page-content [style*="minmax(250px"],
  .app-shell .page-content [style*="minmax(260px"],
  .app-shell .page-content [style*="minmax(280px"],
  .app-shell .page-content [style*="minmax(300px"],
  .app-shell .page-content [style*="minmax(320px"] { grid-template-columns: 1fr !important; }
  .app-shell .landing-tcu-grid { grid-template-columns: 1fr; }

  /* ── Página inicial ── */
  #landing-page .landing-nav { padding: .75rem 1rem; }
  #landing-page .landing-hero { padding: 6.5rem 1.25rem 3rem; }
  #landing-page .landing-hero-actions { flex-wrap: wrap; justify-content: center; }
  #landing-page .landing-hero-actions > * { flex: 1 1 220px; justify-content: center; }
  #landing-page .landing-trust-bar { padding: 1.25rem 1rem; }
  #landing-page .landing-hero-visual { margin-top: 2.5rem; }
  #landing-page .landing-dash-preview { transform: none; }
  #landing-page .l-preview-body { min-height: 0; }
  #landing-page .l-preview-main { padding: 12px; }
  #landing-page .landing-section,
  #landing-page .landing-tcu { padding: 3.5rem 1.25rem; }
  #landing-page .landing-quem-somos,
  #landing-page .landing-social-proof { padding: 3rem 1.25rem; }
  #landing-page #como-funciona { padding-left: 1.25rem !important; padding-right: 1.25rem !important; }
  #landing-page .landing-cta { padding: 3.5rem 1.25rem; }
  #landing-page .landing-footer { padding: 1.5rem 1.25rem; text-align: center; }
  #landing-page .landing-features-grid { grid-template-columns: 1fr; }
  #landing-page .landing-tcu-grid { grid-template-columns: 1fr; }
  #landing-page .landing-nav-cta,
  #landing-page .landing-btn-primary,
  #landing-page .landing-btn-secondary { min-height: 44px; }
  #login-page > div { max-width: calc(100vw - 32px) !important; }
}

/* ══════════ < 480px — JANELAS EM TELA CHEIA + AJUSTES FINOS ══════════ */
@media (max-width: 479.98px) {
  .page-content { padding: .875rem .75rem; }

  #filtros-avancados .search-grid { grid-template-columns: 1fr !important; }
  .app-shell .stat-value { font-size: 16px; }

  /* Janelas (Nova Lista, Adicionar Itens, Item da Administração, Ajuda e as
     demais): tela cheia, cabeçalho no topo e botões fixos no rodapé */
  .modal-overlay { align-items: stretch; justify-content: stretch; backdrop-filter: none; }
  .modal-overlay .modal {
    width: 100% !important; max-width: 100% !important;
    height: 100dvh; max-height: 100dvh !important;
    border-radius: 0; border: none;
    padding: 0 1rem !important;
    display: flex; flex-direction: column;
    overflow-y: auto;
  }
  .modal-overlay .modal-header {
    position: sticky; top: 0; z-index: 2;
    margin: 0 -1rem; padding: .75rem 1rem;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
  }
  .modal-overlay .modal-footer,
  .modal-overlay .modal-rodape {
    position: sticky; bottom: 0; z-index: 2;
    margin: auto -1rem 0 !important;
    padding: .75rem 1rem calc(.75rem + env(safe-area-inset-bottom, 0px)) !important;
    background: var(--surface);
    border-top: 1px solid var(--border);
    flex-wrap: wrap; flex-shrink: 0;
  }
  .modal-overlay .modal-footer .btn,
  .modal-overlay .modal-rodape .btn { flex: 1; justify-content: center; }
  .modal-overlay .modal-rodape { flex-direction: column; align-items: stretch !important; gap: 8px; }
  .modal-overlay .modal-rodape > div:last-child { display: flex; gap: 8px; }
  .modal-overlay .modal-rodape-dica { text-align: center; }
  .modal-overlay #modal-lista-body,
  .modal-overlay #add-lista-items,
  .modal-overlay #fontes-admin-content { flex: 1 0 auto; }
  .modal-overlay .grade-2 { grid-template-columns: 1fr !important; }
  .modal-overlay .grade-2 > [style*="grid-column"] { grid-column: auto !important; }

  /* Adicionar Itens: preço/qtd/unidade sem largura fixa de 70px */
  .add-item-card [style*="width:70px"],
  .add-item-card [style*="flex:0 0 70px"] { width: auto !important; flex: 1 1 30% !important; }

  /* Campos lado a lado com flex fixo (120–170px) quebram para a linha toda */
  .app-shell .page-content [style*="flex:0 0 1"] { flex: 1 1 100% !important; }

  /* Página inicial */
  #landing-page .l-preview-side { display: none; }
  #landing-page .l-preview-cards { grid-template-columns: 1fr 1fr; }
  #landing-page .landing-steps { grid-template-columns: 1fr; }
  #landing-page .landing-nav-logo-text { font-size: 15px; }
}