@import url("/assets/css/ecofyx-visual-harmony-v295.css?v=20260828-295");
/* Ecofyx V296 — auditoria mobile página a página.
 * Somente apresentação/responsividade. Sem alteração de motor, dados ou permissões.
 * Regra visual: superfície principal quase toda a viewport, pequenos gutters,
 * ações dentro do container e faixas horizontais preservando a largura dos itens.
 */

@media (max-width: 760px) {
  html, body { max-width:100%; overflow-x:clip; }

  /* Faixas horizontais NÃO podem herdar o min-width:0 genérico da V295.
     Os itens mantêm largura legível e a própria faixa faz a rolagem. */
  .scope-tabs,
  .op-action-row,
  body > .wrap > nav.card.nav,
  .ecofyx-horizontal-scroll,
  .ecofyx-chip-rail {
    overflow-x:auto !important;
    overflow-y:hidden;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior-inline:contain;
  }
  .scope-tabs > *,
  .op-action-row > *,
  body > .wrap > nav.card.nav > *,
  .ecofyx-horizontal-scroll > *,
  .ecofyx-chip-rail > * {
    flex:0 0 auto !important;
    min-width:max-content !important;
    max-width:none;
    writing-mode:horizontal-tb !important;
    word-break:normal !important;
  }

  /* Central de Administração: navegação é uma faixa rolável, não uma grade comprimida. */
  body > .wrap > nav.card.nav {
    display:flex !important;
    flex-wrap:nowrap !important;
    gap:7px !important;
    padding:8px !important;
    scrollbar-width:none;
  }
  body > .wrap > nav.card.nav::-webkit-scrollbar { display:none; }
  body > .wrap > nav.card.nav .nav-spacer { display:none !important; }
  body > .wrap > nav.card.nav .nav-item {
    white-space:nowrap !important;
    overflow-wrap:normal !important;
  }

  /* Alertas: nomes de templates precisam permanecer horizontais. */
  nav.scope-tabs {
    display:flex !important;
    flex-wrap:nowrap !important;
    gap:7px !important;
    padding:8px 8px 10px !important;
    scrollbar-width:none;
  }
  nav.scope-tabs::-webkit-scrollbar { display:none; }
  nav.scope-tabs > .scope-label,
  nav.scope-tabs > .btn {
    white-space:nowrap !important;
    overflow-wrap:normal !important;
  }

  /* Demais barras de navegação operacional explicitamente roláveis. */
  .tabs:has(> .btn) {
    overflow-x:auto !important;
    overflow-y:hidden;
    -webkit-overflow-scrolling:touch;
  }
  .tabs:has(> .btn) > .btn {
    flex:0 0 auto !important;
    min-width:max-content !important;
    white-space:nowrap !important;
    overflow-wrap:normal !important;
  }

  /* Home pública PT/EN: evita o container width:100% local somar margem/padding. */
  main > section.eco-home-library > .container,
  main > section.hero.eco-home-library > .container,
  main > section.hero.has-results.eco-home-library > .container {
    box-sizing:border-box !important;
    width:calc(100% - 8px) !important;
    max-width:none !important;
    margin-left:4px !important;
    margin-right:4px !important;
    padding-left:4px !important;
    padding-right:4px !important;
  }

  /* Resultados: o popover Exportar é ancorado à largura do cabeçalho inteiro.
     Assim nunca nasce com left negativo quando o botão fica no canto. */
  .results-central .results-controls-title { position:relative !important; }
  .results-central .results-toolbar { position:static !important; }
  .results-central .export-panel { position:static !important; }
  .results-central .export-popover {
    left:4px !important;
    right:4px !important;
    top:calc(100% + 8px) !important;
    width:auto !important;
    max-width:none !important;
    box-sizing:border-box !important;
  }

  /* Popovers/menu: sempre confinados ao viewport. */
  .op-more-menu > div,
  .card-more-menu,
  .ecofyx-mobile-menu-panel,
  .form-more-menu > div,
  .eco-editor-more-panel,
  .fb-question-more-panel {
    max-width:calc(100vw - 12px) !important;
  }
  .op-more-menu > div {
    min-width:min(220px, calc(100vw - 12px)) !important;
  }

  /* Texto técnico e caminhos longos não empurram caixas. */
  .code, .detail, .technical-path, .technical-value,
  code, pre, kbd, samp {
    overflow-wrap:anywhere;
    word-break:break-word;
  }

  /* Legibilidade mínima para elementos operacionais que ainda estavam microscópicos. */
  body.ecofyx-panel-home .action-caption,
  body.ecofyx-panel-home .panel-home-op-stat small,
  body.ecofyx-panel-home .panel-home-op-footer small,
  body.ecofyx-myops-page .stat span,
  body.ecofyx-myops-page .meta,
  .ecofyx-opshell-section-label,
  .ecofyx-opshell-form-text small {
    font-size:11px !important;
    line-height:1.2 !important;
  }

  /* Ações do topo da Visão global: o grupo reutilizado deve ocupar o TERCEIRO
     slot existente do shell; nunca virar um quarto item do grid. */
  body.ecofyx-panel-home .ecofyx-opshell-mobilebar {
    grid-template-columns:40px minmax(0,1fr) auto !important;
    min-height:56px !important;
    height:56px !important;
    align-items:center !important;
    overflow:visible !important;
  }
  body.ecofyx-panel-home .ecofyx-opshell-mobile-context-actions {
    min-width:0 !important;
    display:flex !important;
    justify-content:flex-end !important;
    align-items:center !important;
    gap:0 !important;
  }
  body.ecofyx-panel-home .panel-mobile-top-actions,
  body.ecofyx-panel-home .panel-mobile-top-actions .header-actions {
    display:flex !important;
    flex-flow:row nowrap !important;
    align-items:center !important;
    justify-content:flex-end !important;
    gap:2px !important;
    min-width:0 !important;
  }
  body.ecofyx-panel-home .panel-mobile-top-actions .menu-btn {
    flex:0 0 30px !important;
    width:30px !important;
    height:30px !important;
    min-width:30px !important;
    min-height:30px !important;
    padding:0 !important;
    border:0 !important;
    border-radius:9px !important;
    background:transparent !important;
    box-shadow:none !important;
    color:#475569 !important;
    font-size:15px !important;
  }
  body.ecofyx-panel-home > .app > .header,
  body.ecofyx-panel-home .app > .header {
    margin-top:0 !important;
  }
  body.ecofyx-panel-home .header .container {
    margin-top:4px !important;
  }

  /* Barra fixa inferior: respeita o mesmo pequeno recuo lateral. */
  .mobile-op-nav {
    left:max(4px, env(safe-area-inset-left)) !important;
    right:max(4px, env(safe-area-inset-right)) !important;
    max-width:calc(100vw - 8px) !important;
    box-sizing:border-box !important;
  }
}

@media (max-width: 420px) {
  /* Padrão solicitado: praticamente toda a largura, com apenas 4px por lado. */
  body.ecofyx-operation-shell-wide > .w,
  body.ecofyx-operation-shell-wide > .wrap,
  body.ecofyx-mobile-menu-only > .w,
  body.results-central > .wrap {
    box-sizing:border-box !important;
    width:calc(100% - 8px) !important;
    max-width:none !important;
    margin-left:4px !important;
    margin-right:4px !important;
    padding-left:4px !important;
    padding-right:4px !important;
  }

  /* Modais e caixas de conteúdo não encostam totalmente na borda. */
  :where(.modal,.modal-card,.modal-panel,.dialog,.dialog-card,.create-picker-card) {
    max-width:calc(100vw - 12px) !important;
  }

  body.ecofyx-panel-home .ecofyx-opshell-mobilebar strong {
    font-size:13.5px !important;
  }
}

/* V296 — menus de details fechados não participam da geometria mobile. */
@media (max-width:900px){
  details.card-more:not([open]) > .card-more-menu{display:none!important;}
  details.op-more-menu:not([open]) > div{display:none!important;}
  details.form-more-menu:not([open]) > div{display:none!important;}
}