/* css/mobile.css - camada mobile (barra inferior, folhas, cartoes) e camadas tablet/celular estreito. */

/* ==================================================================== */
/* ================  CAMADA MOBILE  (v0.2.1)  ========================= */
/* ==================================================================== */

/* --- barra de navegacao inferior: so aparece no celular --- */
.bnav{display:none}
.bnb,.bnc{font-family:var(--font-b);border:0;background:none;cursor:pointer;color:var(--on-brand)}
.folha{display:none}

@media (max-width:860px){

  /* ---------- 3. regua de secoes some; navegacao vai para baixo ---------- */
  .sidenav{display:none}
  /* a folga da barra de baixo já está no rodapé (casca.css); aqui só um respiro */
  .wrap{--wrap-pb:24px;padding:0 14px var(--wrap-pb);
    padding-left:calc(14px + env(safe-area-inset-left));
    padding-right:calc(14px + env(safe-area-inset-right))}

  .bnav{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:70;
    align-items:stretch;gap:2px;background:var(--brand-deep-fundo);
    padding:7px 10px calc(7px + env(safe-area-inset-bottom));
    box-shadow:0 -6px 22px var(--petroleo-890-a24);transition:transform .18s ease;
    touch-action:none;user-select:none;-webkit-user-select:none;color:var(--on-brand)}
  .bnb{flex:0 0 52px;font-size:25px;line-height:1;border-radius:10px;
    display:flex;align-items:center;justify-content:center;min-height:48px;color:var(--on-brand)}
  .bnb:disabled{opacity:.3;color:var(--on-brand)}
  .bnb:active{background:var(--brilho-a14)}
  .bnc{flex:1 1 auto;min-height:48px;border-radius:10px;background:var(--brilho-a12);
    display:flex;align-items:center;justify-content:center;gap:8px;padding:0 12px;
    font-size:14px;font-weight:600;letter-spacing:.2px;min-width:0;position:relative;overflow:hidden;color:var(--on-brand)}
  .bnc .bn-ic{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;color:var(--on-brand)}
  .bnav .ic-svg,
  .bnc .bn-ic .ic-svg,
  .bnc .bn-ic svg{display:block!important;width:18px!important;height:18px!important;
    color:var(--on-brand)!important;stroke:var(--on-brand)!important;fill:none!important;
    stroke-width:1.6!important;stroke-linecap:round!important;stroke-linejoin:round!important}
  .bnav .ic-svg.ic-cheio,
  .bnc .bn-ic .ic-svg.ic-cheio,
  .bnc .bn-ic svg.ic-cheio{fill:var(--on-brand)!important;stroke:none!important}
  .bnc b{font-family:var(--font-d);font-weight:700;font-size:13px;opacity:.75;flex:0 0 auto;color:var(--on-brand)}
  .bnc b:empty{display:none}
  .bnc span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--on-brand)}
  .bnc i{font-style:normal;font-size:9px;opacity:.8;flex:0 0 auto;color:var(--on-brand)}
  .bnc:active{background:var(--brilho-a22)}

  @keyframes bnSlideNext{from{opacity:.2;transform:translateX(10px)}to{opacity:1;transform:translateX(0)}}
  @keyframes bnSlidePrev{from{opacity:.2;transform:translateX(-10px)}to{opacity:1;transform:translateX(0)}}
  .bn-anim-next{animation:bnSlideNext .16s cubic-bezier(.2,.8,.3,1)}
  .bn-anim-prev{animation:bnSlidePrev .16s cubic-bezier(.2,.8,.3,1)}

  /* some enquanto o teclado esta aberto */
  body.digitando .bnav{transform:translateY(130%)}

  /* ---------- 4. menu de navegação e folhas mobile ---------- */
  .folha{display:block;position:fixed;inset:0;z-index:95}
  .folha[hidden]{display:none}
  .folha-fundo{position:absolute;inset:0;background:var(--petroleo-940-a50);
    animation:flfd .18s ease}
  /* O menu/folha fica com posição e altura ancoradas e fixas; o container NÃO se move para cima */
  .folha-cx{position:absolute;left:0;right:0;bottom:0;background:var(--panel);
    border-radius:18px 18px 0 0;height:82vh;max-height:82vh;display:flex;flex-direction:column;
    padding-bottom:env(safe-area-inset-bottom);animation:folhaEntradaFixa .16s ease-out;
    box-shadow:0 -10px 40px var(--petroleo-940-a30)}
  @keyframes folhaEntradaFixa{from{opacity:0}to{opacity:1}}
  @keyframes flfd{from{opacity:0}to{opacity:1}}
  .folha-tit{display:flex;align-items:center;justify-content:space-between;
    font-family:var(--font-d);font-weight:600;font-size:16px;color:var(--brand-deep);
    padding:16px 18px 12px;border-bottom:1px solid var(--line);flex:0 0 auto;
    background:var(--panel);position:sticky;top:0;z-index:2}
  .folha-x{background:var(--panel2);border:0;border-radius:9px;width:36px;height:36px;
    font-size:14px;color:var(--muted);cursor:pointer;flex:0 0 auto}
  .folha-b{overflow-y:auto;padding:12px 14px calc(24px + env(safe-area-inset-bottom));
    display:flex;flex-direction:column;gap:8px;flex:1 1 auto;-webkit-overflow-scrolling:touch}

  /* Grupos organizados e categorias colapsáveis / expansíveis */
  .fl-secao-grp{border:1px solid var(--line);border-radius:12px;background:var(--panel);overflow:hidden;
    transition:border-color .15s ease,box-shadow .15s ease}

  /* Quem tem que descer são os itens: as categorias descem em cascata suave na abertura */
  .folha:not([hidden]) .fl-secao-grp{
    animation:folhaItemDescer .20s cubic-bezier(.16,1,.3,1) backwards;
  }
  .folha:not([hidden]) .fl-secao-grp:nth-child(1){animation-delay:.01s}
  .folha:not([hidden]) .fl-secao-grp:nth-child(2){animation-delay:.03s}
  .folha:not([hidden]) .fl-secao-grp:nth-child(3){animation-delay:.05s}
  .folha:not([hidden]) .fl-secao-grp:nth-child(4){animation-delay:.07s}
  .folha:not([hidden]) .fl-secao-grp:nth-child(5){animation-delay:.09s}
  .folha:not([hidden]) .fl-secao-grp:nth-child(6){animation-delay:.11s}
  .folha:not([hidden]) .fl-secao-grp:nth-child(7){animation-delay:.13s}
  .folha:not([hidden]) .fl-secao-grp:nth-child(8){animation-delay:.15s}

  @keyframes folhaItemDescer{
    from{opacity:0;transform:translateY(-14px)}
    to{opacity:1;transform:translateY(0)}
  }

  .fl-secao-tit{width:100%;display:flex;align-items:center;justify-content:space-between;gap:10px;
    padding:10px 12px;background:var(--panel2);border:0;border-bottom:1px solid transparent;cursor:pointer;
    text-align:left;user-select:none;-webkit-user-select:none;transition:background .15s ease,border-color .15s ease}
  .fl-secao-tit:active{background:var(--line)}
  .fl-secao-grp:not(.colapsado) .fl-secao-tit{border-bottom-color:var(--line)}
  .fl-secao-tit-esq{display:flex;align-items:center;gap:10px;min-width:0;flex:1 1 auto}
  .fl-secao-ic{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;
    border-radius:8px;background:var(--green-100);color:var(--green-800);flex:0 0 auto}
  .fl-secao-ic .ic-svg{width:17px;height:17px;color:inherit;fill:none;stroke:currentColor;stroke-width:1.6;
    stroke-linecap:round;stroke-linejoin:round}
  .fl-secao-ic .ic-svg.ic-cheio{fill:currentColor;stroke:none}
  .fl-secao-tit-txt{font-family:var(--font-d);font-size:13.5px;font-weight:700;color:var(--brand-deep);
    line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .fl-secao-tit-dir{display:flex;align-items:center;gap:8px;flex:0 0 auto}
  .fl-secao-count{font-family:var(--font-d);font-size:11px;font-weight:700;color:var(--muted);
    background:var(--panel);border:1px solid var(--line);padding:1px 7px;border-radius:99px;line-height:1.4}
  .fl-secao-seta{width:16px;height:16px;color:var(--muted);transition:transform .2s cubic-bezier(.2,.8,.3,1);
    display:block;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
  .fl-secao-grp:not(.colapsado) .fl-secao-seta{transform:rotate(180deg);color:var(--green-800)}
  .fl-secao-col{display:grid;grid-template-rows:1fr;transition:grid-template-rows .22s cubic-bezier(.16,1,.3,1);background:var(--panel)}
  .fl-secao-grp.colapsado .fl-secao-col{grid-template-rows:0fr}
  .fl-secao-col-inner{overflow:hidden;display:flex;flex-direction:column;gap:4px;padding:6px 8px 8px;transition:padding .22s cubic-bezier(.16,1,.3,1)}
  .fl-secao-grp.colapsado .fl-secao-col-inner{padding-top:0;padding-bottom:0}

  /* Ao abrir/expandir uma categoria, os subitens descem a partir do cabeçalho */
  .fl-secao-grp:not(.colapsado) .fl-chip{
    animation:flChipDescer .20s cubic-bezier(.16,1,.3,1) backwards;
  }
  .fl-secao-grp:not(.colapsado) .fl-chip:nth-child(1){animation-delay:.02s}
  .fl-secao-grp:not(.colapsado) .fl-chip:nth-child(2){animation-delay:.04s}
  .fl-secao-grp:not(.colapsado) .fl-chip:nth-child(3){animation-delay:.06s}
  .fl-secao-grp:not(.colapsado) .fl-chip:nth-child(4){animation-delay:.08s}
  .fl-secao-grp:not(.colapsado) .fl-chip:nth-child(5){animation-delay:.10s}
  .fl-secao-grp:not(.colapsado) .fl-chip:nth-child(6){animation-delay:.12s}

  @keyframes flChipDescer{
    from{opacity:0;transform:translateY(-10px)}
    to{opacity:1;transform:translateY(0)}
  }

  /* Item da lista de navegação (fl-chip) dentro da categoria: sem ícone repetido, foco em texto e clareza */
  .fl-chip{width:100%;text-align:left;min-height:42px;border-radius:8px;
    display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:13.5px;font-weight:500;
    padding:8px 12px;border:1px solid transparent;background:transparent;color:var(--ink);cursor:pointer;
    box-sizing:border-box;transition:background .12s ease,border-color .12s ease}
  .fl-chip:active{background:var(--panel2)}
  .fl-chip .fl-chip-num{font-family:var(--font-d);font-weight:700;font-size:11.5px;color:var(--green-700);opacity:.85;flex:0 0 auto;min-width:18px}
  .fl-chip .gt{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .fl-chip.sel{background:var(--green-100);border-color:var(--green-300);color:var(--green-900);font-weight:700}
  .fl-chip.sel .fl-chip-num{color:var(--green-900);opacity:1}
  .fl-chip.sel::after{content:"";display:block;width:6px;height:6px;border-radius:50%;background:var(--green-700);flex:0 0 auto;margin-left:auto}

  .folha-b .gchip{width:100%;text-align:left;min-height:48px;border-radius:10px;
    display:flex;align-items:center;gap:12px;font-size:13.5px;padding:9px 13px}
  .folha-b .gchip b{font-family:var(--font-d);font-weight:700;font-size:12.5px;opacity:.55;flex:0 0 auto}
  .folha-b .gchip.sel b{opacity:.85}
  .folha-info{display:flex;justify-content:space-between;gap:14px;font-size:13.5px;
    padding:9px 4px;border-bottom:1px solid var(--panel2)}
  .folha-info span{color:var(--muted)}
  .folha-info b{color:var(--brand-deep);text-align:right}
  .folha-acao{width:100%;justify-content:center;margin-top:8px;min-height:48px}

  /* ---------- 5. numeros dos KPI param de estourar ---------- */
  .kpi .kv{font-size:19.5px;white-space:normal;overflow-wrap:anywhere;letter-spacing:-.2px}
  .kpi .kv small{font-size:12px}
  .grid.g-kpi{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
  .total-strip .tv{font-size:20px;overflow-wrap:anywhere}
  .pfield.calc .pv{font-size:17.5px;overflow-wrap:anywhere}

  /* ---------- 6. cabecalho de bloco e cartoes ---------- */
  .block-head{gap:6px 12px;padding-bottom:6px;margin-bottom:11px}
  .block-head h2{font-size:18px}
  .block-head .bh-note{font-size:11.5px;margin-left:0;flex-basis:100%;line-height:1.4}
  .card,.kpi{padding:13px 14px}
  .grupo{margin:15px 0 8px}
  .grupo h3{font-size:16px}

  /* ---------- 7. TABELAS VIRAM CARTOES ---------- */
  .tscroll{overflow-x:visible}
  table.t.cards{border-collapse:separate;border-spacing:0;font-size:13.5px}
  table.t.cards thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  table.t.cards,table.t.cards tbody,table.t.cards tr,table.t.cards td{display:block;width:100%}
  table.t.cards tr{border:1px solid var(--line);border-radius:var(--rad-s);
    background:var(--panel);margin-bottom:9px;overflow:hidden}
  table.t.cards tr:nth-child(even) td{background:transparent}
  table.t.cards td{border:0;border-bottom:1px solid var(--panel2);
    padding:9px 13px;display:flex;align-items:baseline;justify-content:space-between;
    gap:14px;text-align:right;min-height:0}
  table.t.cards td:last-child{border-bottom:0}
  table.t.cards td:empty{display:none}
  table.t.cards td::before{content:attr(data-l);flex:0 1 auto;max-width:50%;text-align:left;
    font-size:10px;letter-spacing:.7px;text-transform:uppercase;color:var(--muted);
    font-weight:700;line-height:1.35}
  table.t.cards td[data-l=""]::before,table.t.cards td[data-l="—"]::before{content:none}
  table.t.cards td[data-l=""]{justify-content:flex-end}
  table.t.cards td.num{font-variant-numeric:tabular-nums}
  table.t.cards td.me{background:var(--goldbg)!important}
  table.t.cards tr.tot{background:var(--panel2);border-color:var(--brand-2);border-width:1.5px}
  table.t.cards tr.tot td{background:transparent!important;font-weight:700}
  table.t.cards tr.tot td::before{color:var(--brand-3)}
  /* apagar vira botao de verdade dentro do cartao */
  table.t.cards td .lnk-del{border:1px solid var(--errline);background:var(--errbg);
    border-radius:8px;padding:9px 16px;margin:2px 0;text-decoration:none;font-size:12.5px;
    min-height:40px;display:inline-flex;align-items:center}
  /* primeira celula do cartao vira o titulo */
  table.t.cards td:first-child{background:var(--panel2)!important;font-weight:700;
    color:var(--brand-deep);padding:11px 14px;font-size:14.5px;text-align:left!important;justify-content:flex-start}
  table.t.cards td:first-child::before{content:none!important;display:none!important}
  table.t.cards td[data-l="Ações"]::before{content:none!important;display:none!important}
  table.t.cards td[data-l="Ações"]{justify-content:flex-end}
  table.t.cards tr.tot td:first-child{background:transparent!important}
  /* LRTable (lr-tabela.js) e Data-Tables: tambem viram cartao */
  .table-scroll{max-height:none;overflow:visible;border:0;background:transparent}
  table.data-table, table.sub-tabela-elabore{table-layout:auto;border-collapse:separate;border-spacing:0;font-size:13.5px}
  table.data-table thead, table.sub-tabela-elabore thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  table.data-table,table.data-table tbody,table.data-table tr,table.data-table td,
  table.sub-tabela-elabore,table.sub-tabela-elabore tbody,table.sub-tabela-elabore tr,table.sub-tabela-elabore td{display:block;width:100%}
  table.data-table tr, table.sub-tabela-elabore tr{border:1px solid var(--line);border-radius:var(--rad-s);background:var(--panel);margin-bottom:12px;overflow:hidden;box-shadow:0 1px 3px var(--sombra-a05)}
  table.data-table tr.tr-detalhe-expansivel{border:0;background:transparent;box-shadow:none;margin-bottom:12px}
  table.data-table tr.tr-detalhe-expansivel td{display:block!important;padding:0!important;border:0!important}
  table.data-table tr.tr-detalhe-expansivel td::before{content:none!important;display:none!important}
  table.data-table td, table.sub-tabela-elabore td{border:0;border-bottom:1px solid var(--panel2);padding:9px 13px;display:flex;align-items:center;justify-content:space-between;
    gap:14px;text-align:right!important;white-space:normal;overflow:visible}
  table.data-table td:last-child, table.sub-tabela-elabore td:last-child{border-bottom:0}
  table.data-table td::before, table.sub-tabela-elabore td::before{content:attr(data-l);flex:0 1 auto;max-width:50%;text-align:left;font-size:11px;letter-spacing:.5px;
    text-transform:uppercase;color:var(--muted);font-weight:600;line-height:1.35}
  table.data-table td[data-l=""]::before,table.data-table td.empty-cell::before,table.data-table td[data-l="Ações"]::before,table.data-table td[data-l="—"]::before,
  table.sub-tabela-elabore td[data-l=""]::before,table.sub-tabela-elabore td.empty-cell::before,table.sub-tabela-elabore td[data-l="Ações"]::before,table.sub-tabela-elabore td[data-l="—"]::before{content:none!important;display:none!important}
  table.data-table td[data-l=""],table.data-table td[data-l="Ações"],
  table.sub-tabela-elabore td[data-l=""],table.sub-tabela-elabore td[data-l="Ações"]{justify-content:flex-end;gap:10px}
  table.data-table td:first-child, table.sub-tabela-elabore td:first-child{background:var(--panel2)!important;font-weight:700;color:var(--brand-deep);padding:11px 14px;font-size:14.5px;text-align:left!important;justify-content:flex-start}
  table.data-table td:first-child::before, table.sub-tabela-elabore td:first-child::before{content:none!important;display:none!important}
  table.data-table td .lnk-del, table.sub-tabela-elabore td .lnk-del{border:1px solid var(--errline);background:var(--errbg);border-radius:8px;padding:9px 16px;margin:2px 0;
    text-decoration:none;font-size:12.5px;min-height:40px;display:inline-flex;align-items:center}
  .table-pagination{justify-content:center}

  /* Prevenção de auto-zoom no iOS Safari (font-size < 1rem dispara zoom indesejado) */
  input, select, textarea,
  .pfield input, .pfield select, .pfield textarea,
  #portao input {
    font-size: 1rem !important;
  }

  /* Alvos de toque acessíveis no mobile (mínimo WCAG 2.75rem / 44px) */
  .lr-mais,
  table.data-table td .lr-mais {
    width: 2.75rem !important;
    height: 2.75rem !important;
    min-width: 2.75rem;
    min-height: 2.75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .btn-add-grupo {
    min-width: 2.75rem;
    min-height: 2.75rem;
  }
  .pagination-nav-elabore .pagination-btn {
    width: 2.75rem;
    height: 2.75rem;
    min-width: 2.75rem;
    min-height: 2.75rem;
    font-size: 0.875rem;
  }

  /* ---------- 8. graficos ---------- */
  .vwrap{height:230px;gap:11px;padding:12px 2px 0}
  .vgrp{min-width:78px}
  .pizza{gap:16px}
  .pizza .leg{min-width:0}

  /* ---------- 9. botoes e avisos ---------- */
  .btn{min-height:46px;padding:11px 18px}
  .btn.big{min-height:50px}
  .act-row{gap:9px}
  .act-row .btn{flex:1 1 auto;justify-content:center}
  .toast{bottom:calc(96px + env(safe-area-inset-bottom))}
  details.fold summary{padding:14px 16px;font-size:14.5px}
  details.fold .fold-b{padding:4px 16px 18px}
  #portao{padding:18px;padding-bottom:calc(18px + env(safe-area-inset-bottom))}
}


/* ==================================================================== */
/* ==============  CAMADA TABLET  (861px a 1399px)  =================== */
/* iPad deitado, iPad Pro deitado e janelas medias de computador.       */
/* Objetivo: campo com largura de leitura (>=230px) em vez dos 174px    */
/* que sobravam quando as regras de 5 e 6 colunas entravam cedo demais. */
/* ==================================================================== */
@media (min-width:861px) and (max-width:1399px){

  .wrap{--wrap-pb:48px;padding:0 16px var(--wrap-pb)}

  /* 4 colunas de campo em vez de 5 ou 6 */
  .pgrid{grid-template-columns:repeat(auto-fit,minmax(212px,1fr));gap:11px}
  .span2,.span3{grid-column:auto}

  /* o rotulo cabe em uma linha so, o que derruba a altura do cartao */
  .pfield .pl{font-size:12px;letter-spacing:0;margin-bottom:5px}
  .pfield .pb{font-size:10.8px;line-height:1.4}

  /* KPI: 4 por linha, com folga para o numero */
  .grid.g-kpi{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
  .kpi .kv{font-size:22px}

  /* formulario empilhado ocupa a largura toda com folga */
  .form2{gap:16px}

  /* cabecalho do bloco: a nota vai para baixo em vez de espremer o titulo */
  .block-head{flex-wrap:wrap}
  .block-head .bh-note{margin-left:0;flex-basis:100%;font-size:11.5px}
}

/* ---------- ponte entre a faixa de tablet e a de 6 colunas ---------- */
@media (min-width:1400px) and (max-width:1459px){
  .pgrid.c6{grid-template-columns:repeat(auto-fit,minmax(212px,1fr))}
}

/* ---------- 9b. tablet em pe: 3 colunas largas, nao 4 estreitas ---------- */
@media (min-width:521px) and (max-width:860px){
  .pgrid{grid-template-columns:repeat(auto-fit,minmax(228px,1fr))}
  .grid.g-kpi{grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
  .kpi .kv{font-size:21px}
  .wrap{--wrap-pb:24px;padding:0 18px var(--wrap-pb)}
}

/* ---------- 10. celular estreito: formulario numa coluna ---------- */
@media (max-width:520px){
  .pgrid{grid-template-columns:1fr}
  .chkgrid{grid-template-columns:1fr 1fr}
  .grid.g-2{grid-template-columns:1fr}
  .pfield:not(.calc){padding:0}
  .pfield input,.pfield select{padding:0 12px}
}
@media (max-width:400px){
  .grid.g-kpi{grid-template-columns:1fr 1fr}
  .chkgrid{grid-template-columns:1fr}
}