/* Celular (até 700px de largura). Tudo aqui dentro de media query: no computador esta folha não muda nada. */
@media (max-width: 700px) {
  html { -webkit-text-size-adjust: 100%; }
  main { padding: 0 12px 60px; }
  .panel { padding: 14px; border-radius: 12px; }
  .panel h2 { font-size: 16px; }
  .hint { font-size: 14px; max-width: none; }

  /* Topo: a sidebar vira gaveta (style.css); o hero fica recolhido por padrão */
  .cover .hero { padding: 18px 14px; }
  .hero-in { gap: 0; }
  .hero-in > div:nth-child(2) { display: none; }
  .cover-x { right: 22px; }
  .cover-title { font-size: 24px; }
  .hero p { font-size: 14.5px; margin-top: 10px; }
  .appbar .topbar { gap: 6px; }

  /* Abas e subabas: uma faixa que rola de lado, em vez de empilhar */
  .tabs, .subtabs { flex-wrap: nowrap; overflow-x: auto; width: 100%; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .tabs::-webkit-scrollbar, .subtabs::-webkit-scrollbar { display: none; }
  .tab, .subtab { flex: 0 0 auto; white-space: nowrap; }
  .tab { padding: 8px 14px; }

  /* Toque: alvos maiores e campos em 16px (evita o zoom automático ao digitar) */
  button:not(.mini):not(.xclose):not(.star):not(.combo-btn):not(.cpick):not(.grpbtn):not(.tab):not(.subtab):not(.ghost):not(.linkbtn):not(.eye):not(.theme-btn):not(.rm) { min-height: 44px; }
  button.mini { min-height: 40px; padding: 6px 14px; font-size: 14px; }
  button.cpick { min-height: 36px; }
  button.star { font-size: 24px; padding: 4px 8px 4px 0; }
  input:not([type=checkbox]):not([type=radio]), select, textarea { font-size: 16px; min-height: 44px; }
  input[type=checkbox], input[type=radio] { width: 20px; height: 20px; }
  label.row, .showall-wrap { min-height: 36px; }
  .row { gap: 8px; }
  table.audit td.actions button.mini { flex: 1 1 40%; min-height: 40px; white-space: nowrap; }
  .row > button:not(.mini):not(.cpick):not(.xclose):not(.star) { flex: 1 1 140px; }
  .panel .row > button.primary:not(.mini), .pwgrid button.primary, .pwgrid > div > button { flex: 1 1 100%; width: 100%; }
  button.tab, button.subtab { min-height: 40px; }
  main { padding-bottom: calc(60px + env(safe-area-inset-bottom)); }
  .filters { grid-template-columns: 1fr; }
  .cmpbar { gap: 10px; }
  details.more > summary { min-height: 40px; padding: 6px 16px; }

  /* Tabelas viram cartões: cada linha é um cartão, cada coluna um par "rótulo  valor" */
  .tablewrap { border: 0; overflow: visible; border-radius: 0; }
  table.audit, table.audit tbody { display: block; width: 100%; min-width: 0 !important; max-width: 100%; }
  table.audit thead { display: none; }
  table.audit tr { display: block; border: 1px solid var(--line); border-radius: 10px; margin: 0 0 10px; padding: 6px 12px; background: var(--surface); }
  table.audit td { display: block; padding: 5px 0; border: 0; text-align: left; white-space: normal !important; min-width: 0 !important; width: auto !important; overflow-wrap: anywhere; }
  table.audit td[data-label]:not([data-label=""]) { display: block; position: relative; padding-left: 36%; min-height: 24px; }
  table.audit td[data-label]:not([data-label=""])::before { content: attr(data-label); position: absolute; left: 0; top: 6px; width: 32%; color: var(--muted); font-size: 12.5px; line-height: 1.3; }
  table.audit td.actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; padding-top: 10px; border-top: 1px dashed var(--line); text-align: left !important; }
  table.audit td.actions::before { display: none !important; }
  table.audit td.actions > button, table.audit td.actions > details { flex: 0 0 auto; }
  table.audit td.chk, table.audit td:first-child:has(> input[type=checkbox]:only-child) { padding-bottom: 0; }
  table.audit tr.grp { border: 0; background: none; padding: 0; margin: 14px 0 6px; }
  table.audit tr.grp td { padding: 0; }
  table.audit tr.env-prd { border-left: 4px solid var(--bad); }
  table.audit tr.env-prd > td:first-child { box-shadow: none; }
  table.audit tr.clickrow { cursor: pointer; }
  .xt { table-layout: auto; }
  .xt .detrow pre.code { max-height: 260px; }

  /* Menu ⋯ flutuante nunca passa da borda da tela */
  details.more .menu { max-width: calc(100vw - 16px); }

  /* Faixas e comparações em coluna única */
  #sugg-btn { font-size: 0; } #sugg-btn .ico { font-size: 14px; margin: 0; }
  .ctrhead { padding: 10px; }
  .ctrhead .ctrinfo { flex-basis: 100%; }
  .ctrhead .ctrbtns { flex-basis: 100%; }
  .ctrhead .ctrbtns button, .ctrhead .ctrbtns select { flex: 1 1 100%; }
  .filters2 .fld { flex: 1 1 100%; }
  .optrow .sp { display: none; }
  .dkpis { grid-template-columns: repeat(2, 1fr); }
  pre, pre.code { font-size: 12.5px; max-width: 100%; overflow-x: auto; }

  /* Linhas de bot (Resources, Flows etc.): cada bot vira um cartão em coluna */
  .bot, #bots.has-pick .bot { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px; border: 1px solid var(--line); border-radius: 10px; position: relative; margin-bottom: 10px; }
  .bot .dot { position: absolute; top: 8px; left: 8px; }
  .bot select, .bot input[type=text], .bot input[type=password], .bot .secret { flex: 1 1 100%; width: 100%; min-width: 0; }
  .bot label { flex: 1 1 40%; min-height: 40px; font-size: 15px; }
  .bot .rm { margin-left: auto; min-height: 40px; min-width: 44px; }
  .bot .botmsg { flex: 1 1 100%; }
  .eye { width: 40px; height: 40px; }

  /* Campos soltos nas linhas de filtro ocupam a largura toda em vez de ficarem espremidos */
  .panel select:not(#bld-var-kind):not(#bld-blk-kind), .panel input[type=text], .panel input[type=search], .panel input[type=password], .panel input[type=email] { width: 100%; max-width: 100%; min-width: 0; }
  .row > select, .row > input:not([type=checkbox]):not([type=radio]), .row > .secret { flex: 1 1 100%; }
  .hint.clamp:not(.open) { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; cursor: pointer; }
  .hint.clamp { cursor: pointer; }
  .hint.clamp:not(.open)::after { content: ' (toque para ler tudo)'; }

  /* Cartão: o nome vira o título e a caixa de seleção vai para o canto */
  table.audit td[data-label="Nome"]:not([data-label=""]), table.audit td[data-label="Bot"]:not([data-label=""]) { display: block; padding-left: 0; font-weight: 650; font-size: 16px; padding-right: 36px; }
  table.audit td[data-label="Nome"]::before, table.audit td[data-label="Bot"]::before { display: none; }
  table.audit tr { position: relative; }
  table.audit tr td, .audit tr.flowrow:hover td, #bld-table tr.clickrow:hover td, #bld-table tr.clickrow.sel td, .audit tr.sel td { background: transparent !important; }
  table.audit tr.sel, #bld-table tr.clickrow.sel { background: var(--accent-soft); border-color: var(--accent); }
  table.audit td:first-child:has(> input[type=checkbox]:only-child) { position: absolute; top: 10px; right: 12px; padding: 0; }
  /* Builder: as regras com #bld-table (padding de 6px, largura mínima) venciam as do cartão e empurravam o rótulo para cima do valor */
  #bld-table td[data-label]:not([data-label=""]) { padding-left: 36%; padding-right: 0; min-width: 0; white-space: normal; }
  #bld-table td[data-label="Bot"]:not([data-label=""]) { padding-left: 0; padding-right: 36px; }
  #bld-table td.actions { padding-left: 0; white-space: normal; }
}

/* Janelas no celular: sobem da parte de baixo da tela, como uma folha */
@media (max-width: 700px) {
  .modal:not([hidden]) { top: auto; bottom: 0; left: 0; transform: none; width: 100%; max-height: 88dvh; border-radius: 16px 16px 0 0;
    padding: 18px 16px calc(18px + env(safe-area-inset-bottom)); animation: sheet-in .2s ease-out; }
  @keyframes sheet-in { from { transform: translateY(24px); opacity: .6; } to { transform: none; opacity: 1; } }
}

/* Fase 8: barras de ação e filtros no celular */
@media (max-width: 700px) {
  .actionbar { flex-direction: column-reverse; align-items: stretch; }
  .actionbar > button { width: 100%; }
  .guard-grid { grid-template-columns: 1fr; }
  .guard-opt { min-height: 44px; }
  .filtros { flex: 1 1 100%; }
  .filtros > summary { width: 100%; justify-content: space-between; min-height: 44px; }
  .bldtop .fld.grow { flex: 1 1 100%; }
  .bldtop > button { flex: 1 1 100%; }
}