/* ============================================================
   MOBILE38 — Fundação Mobile do Portal .38 · DS38 v1 · Fase 1
   Aditivo: nenhuma regra remove funcionalidade desktop.
   Breakpoints oficiais: 480 · 640 · 900 · 1150
   ============================================================ */

/* ---------- sempre ativos (inofensivos no desktop) ---------- */
.m38-tbl{overflow-x:auto;-webkit-overflow-scrolling:touch;width:100%;max-width:100%}
.m38-tbl>table{min-width:max-content}
.m38-menu-btn{display:none;align-items:center;justify-content:center;width:44px;height:44px;min-width:44px;
  background:var(--surface2,#20242c);border:1px solid var(--border2,rgba(255,255,255,.14));border-radius:10px;
  color:var(--text,#f2f3f5);cursor:pointer;padding:0}
.m38-menu-btn svg{width:22px;height:22px}
.m38-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:1390;opacity:0;pointer-events:none;transition:opacity .18s}
body.m38-nav-aberta .m38-backdrop{opacity:1;pointer-events:auto}
/* acessibilidade: foco visível consistente */
.m38-menu-btn:focus-visible,.nav-item:focus-visible{outline:2px solid var(--accent,#dd9933);outline-offset:2px}
@media (prefers-reduced-motion: reduce){
  aside,.m38-backdrop{transition:none !important}
}

/* ---------- ≤1150px — notebook compacto ---------- */
@media(max-width:1150px){
  .content{padding:20px}
}

/* ---------- ≤900px — tablet retrato: entra o drawer ---------- */
@media(max-width:900px){
  /* menu vira gaveta sobreposta */
  aside{position:fixed;left:0;top:0;bottom:0;z-index:1400;width:286px;min-width:286px;
    transform:translateX(-104%);transition:transform .2s ease;
    box-shadow:12px 0 40px rgba(0,0,0,.45)}
  body.m38-nav-aberta aside{transform:none}
  main{width:100%;min-width:0}
  .m38-menu-btn{display:inline-flex}

  /* corpo nunca rola de lado: conteúdo largo (tabelas) rola dentro do
     próprio .m38-tbl; qualquer sobra acidental é contida aqui em vez de
     esticar todos os cards à largura de rolagem. */
  .content{overflow-x:hidden}
  .content .card,.content .kpis,.content .grid2,.content .grid32,.content .grid23{max-width:100%;min-width:0}
  .content .chart-wrap{overflow-x:auto;max-width:100%}
  .kpi{min-width:0}
  .kpi .val{overflow-wrap:anywhere}

  header{padding:0 12px;gap:10px}
  header h2{font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
  header>div:first-of-type{min-width:0;flex:1}
  .crumb{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .content{padding:16px 14px calc(28px + env(safe-area-inset-bottom,0px))}

  /* alvos de toque — DS38: mínimo 44px em ação primária */
  .btn{min-height:44px;padding:10px 18px}
  .btn.sm{min-height:38px;padding:8px 13px}
  .tab{min-height:42px;padding:11px 16px;display:inline-flex;align-items:center}
  .nav-item{min-height:46px;padding:11px 12px;font-size:14.5px}
  .fld input,.fld select{min-height:44px;font-size:16px}
  .obs-in{min-height:40px;font-size:16px}
  .dest-sel{min-height:40px;font-size:14px}
  .search{font-size:16px}
  .chk input{width:20px;height:20px}
  .qchip{height:34px;min-width:38px}
  .reltag{padding:9px 14px;font-size:13px}

  /* módulos: overlays ocupam a tela toda quando o menu é gaveta.
     chk38 posiciona por variável medida; proj38 grava left inline —
     os !important abaixo vencem os dois com segurança. */
  #chk38{inset:0 0 0 0 !important}
  #p38-root{left:0 !important;padding:18px 14px !important}
  #chk38-lancador{bottom:calc(18px + env(safe-area-inset-bottom,0px)) !important}
}

/* ---------- ≤640px — smartphone ---------- */
@media(max-width:640px){
  .kpis{grid-template-columns:repeat(auto-fit,minmax(136px,1fr));gap:10px}
  .kpi{padding:13px 14px}
  .kpi .val{font-size:22px}
  .card{padding:14px;border-radius:10px}
  .grid2,.grid32,.grid23{gap:12px}
  .form-grid{grid-template-columns:1fr 1fr}
  .form-grid .fld:has(input[type="date"]),.form-grid .fld:has(select){grid-column:auto}

  /* cabeçalho: busca colapsada num alvo de 44px que expande ao focar */
  header{position:relative}
  .hdr-user{display:none}
  .search{width:44px;min-width:44px;height:40px;padding:8px;color:transparent;cursor:pointer;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b6bcc8' stroke-width='2' stroke-linecap='round'><circle cx='11' cy='11' r='7'/><line x1='16.6' y1='16.6' x2='21' y2='21'/></svg>");
    background-repeat:no-repeat;background-position:center;background-size:19px}
  .search::placeholder{color:transparent}
  .search:focus{position:absolute;left:10px;right:10px;top:10px;width:auto;height:40px;z-index:6;
    color:var(--text,#f2f3f5);background-image:none;cursor:text}
  .search:focus::placeholder{color:var(--muted,#8a919e)}

  /* toast ao alcance e em largura total */
  .toast{left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom,0px));text-align:center}

  /* gráficos: rótulos um pouco maiores ao escalar */
  .bar-row .lbl{width:104px;font-size:12px}
  .bar-row .v{width:62px}
  .legend{gap:10px}

  /* cabeçalho de card com filtros: título e controles empilham em vez de
     espremer o título em coluna e cortar a busca à direita */
  .card-head{flex-wrap:wrap;gap:10px}
  .card-head>*{min-width:0}
  .card-head>div:last-child{width:100%;justify-content:flex-start !important}
  /* buscas/filtros DENTRO do conteúdo ganham largura total (o inline
     width:210px do markup é sobreposto aqui; a busca do cabeçalho global,
     fora de .content, não é afetada) */
  .content .search{width:100% !important;min-width:0}
  .content .obs-in{min-width:0}

  /* organograma e tabelas grandes respiram fora do padding do card */
  .exec-bar{gap:8px;padding:10px}

  /* ---- TABELA → CARDS (telas com .m38-cards, ex.: Usuários) ----
     Cada linha vira um card com rótulo:valor; a 1ª célula é o título e a
     última (ações) vira uma faixa de botões tocáveis. */
  .m38-tbl-cards{overflow-x:visible}           /* não precisa mais rolar de lado */
  .m38-cards, .m38-cards tbody, .m38-cards tr, .m38-cards td{display:block;width:auto}
  .m38-cards thead{display:none}
  .m38-cards tr{
    background:var(--surface2);border:1px solid var(--border);border-radius:12px;
    padding:12px 14px;margin-bottom:12px;
  }
  .m38-cards tr:hover td{background:transparent}
  .m38-cards td{border:none;padding:4px 0;font-size:13.5px}
  .m38-cards td[data-label]::before{
    content:attr(data-label);display:block;font-size:10px;font-weight:600;
    text-transform:uppercase;letter-spacing:.6px;color:var(--muted);margin-bottom:2px;
  }
  /* 1ª célula = nome/título do registro, em destaque, sem rótulo */
  .m38-cards td:first-child{font-size:15px;padding-bottom:8px}
  .m38-cards td:first-child::before{display:none}
  /* última célula = ações → faixa de botões grandes */
  .m38-cards td:last-child{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px;padding-top:10px;border-top:1px solid var(--border)}
  .m38-cards td:last-child::before{display:none}
  .m38-cards td:last-child .btn{flex:1 1 auto;min-height:44px;justify-content:center}

  /* ---- TIRAR FOTO nos anexos (itens 12/13) ---- */
  .m38-cam{
    display:inline-flex;align-items:center;gap:7px;margin:8px 0 2px;
    background:var(--surface2,#20242c);color:var(--text,#f2f3f5);
    border:1px solid var(--accent,#dd9933);border-radius:9px;
    padding:10px 14px;font:inherit;font-size:13px;font-weight:600;cursor:pointer;min-height:44px;
  }
  .m38-cam svg{width:18px;height:18px;color:var(--accent,#dd9933)}
  .m38-cam:active{transform:translateY(1px)}

  /* ---- COMPARTILHAR nativo (item 27) ---- */
  .m38-share{
    display:inline-flex;align-items:center;gap:6px;margin:2px 0 2px 8px;vertical-align:middle;
    background:var(--surface2,#20242c);color:var(--text2,#b6bcc8);
    border:1px solid var(--border2,rgba(255,255,255,.14));border-radius:8px;
    padding:8px 12px;font:inherit;font-size:12.5px;font-weight:600;cursor:pointer;min-height:40px;
  }
  .m38-share svg{width:15px;height:15px;color:var(--accent,#dd9933)}
  .m38-share:hover{border-color:var(--accent,#dd9933);color:var(--text,#f2f3f5)}
  .m38-share:disabled,.m38-share.carregando{opacity:.55;cursor:default}

  /* ---- DASHBOARD POR PRIORIDADE (o que pede ação primeiro) ----
     A ordem é aplicada só no celular; no desktop os cards ficam na ordem
     natural do HTML. */
  .m38-dash-prio .kpi[data-prio="1"]{order:1}
  .m38-dash-prio .kpi[data-prio="2"]{order:2}
  .m38-dash-prio .kpi[data-prio="3"]{order:3}
  .m38-dash-prio .kpi[data-prio="4"]{order:4}
  .m38-dash-prio .kpi[data-prio="5"]{order:5}
  .m38-dash-prio .kpi[data-prio="6"]{order:6}
  .m38-dash-prio .kpi[data-prio="7"]{order:7}
}

/* ---------- ≤480px — smartphone pequeno ---------- */
@media(max-width:480px){
  .content{padding:12px 10px calc(24px + env(safe-area-inset-bottom,0px))}
  .kpis{grid-template-columns:1fr 1fr}
  .form-grid{grid-template-columns:1fr}
  header{height:56px;min-height:56px}
}


/* ==================================================================
   DOC38-LISTA-CELULAR — 19/09/2026
   O módulo Documentos em lista no celular (pedido da Gerência).
   Cada documento era uma linha só: com os botões sem encolher, o
   título ficava com zero pixel e a tela vazava para o lado.
   Aqui ele vira bloco de lista. Nada disto vale no computador.
   ================================================================== */
@media (max-width: 640px){

  /* ---- cada documento: um bloco de lista ---- */
  .doc-item{
    position: relative;                 /* o ícone sai do fluxo e vira marcador */
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    row-gap: 10px;
    padding: 12px 12px 12px 56px;       /* faixa à esquerda reservada ao ícone */
  }
  .doc-item .dico{
    position: absolute;
    left: 12px;
    top: 12px;
    width: 32px;
    height: 32px;
  }
  .doc-item .din{ flex: 1 1 100%; }     /* título e descrição com a linha toda */
  .doc-item .din b{ font-size: 13.5px; line-height: 1.35; }
  .doc-item .din span{ display: block; margin-top: 3px; line-height: 1.4; }

  /* etiqueta e grupos de botões numa faixa que quebra sozinha.
     O !important é porque estes espaçamentos vêm no style= do HTML. */
  .doc-item > .tag{ flex: 0 0 auto; }
  .doc-item > span:not(.tag){ margin-left: 0 !important; gap: 5px !important; flex: 0 0 auto; }
  .doc-item > .btn{ margin-left: auto !important; }   /* "Editar" fecha a faixa */

  /* ---- cabeçalho do card: a ação em cima, os setores como filtros ---- */
  .card:has(.doc-item) .card-head > div:last-child{
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
  }
  .card:has(.doc-item) .card-head > div:last-child > .btn:first-child{
    flex: 1 0 100%;                      /* "+ Adicionar documento" na linha inteira */
  }
}