/*
 * EL & ELLA / Kysap V4.2.1
 * Correção visual mobile baseada nas telas reais do aparelho.
 * Carregado depois dos estilos originais para não alterar o desktop.
 */

/* Textos nunca podem escapar dos próprios botões/cartões. */
.kysap-mobile-drawer-nav .nav-item,
.app-tab,
.app-button,
.app-action-card,
button,.btn,a.btn{
  max-width:100%;
  overflow-wrap:anywhere;
  word-break:normal;
}
.kysap-mobile-drawer-nav .nav-item span,
.app-action-card strong,
.app-action-card span{
  min-width:0;
  max-width:100%;
}

@media (max-width:768px){
  /* O botão fica dentro do cabeçalho e sai junto com ele ao rolar a página. */
  .app-hero,.header,.top,.header-pdv{position:relative!important}
  .kysap-mobile-menu-button.kysap-menu-in-header{
    position:absolute!important;
    left:12px!important;
    right:auto!important;
    top:calc(12px + env(safe-area-inset-top,0px))!important;
    bottom:auto!important;
    margin:0!important;
    transform:none!important;
    opacity:1!important;
  }

  /* Menu lateral: ícone e nome em colunas separadas, sem sobreposição. */
  .kysap-mobile-drawer{width:min(350px,92vw)!important}
  .kysap-mobile-drawer-content{
    padding:12px 12px 24px!important;
    min-height:0!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
  }
  .kysap-menu-section{margin:8px 0 16px!important}
  .kysap-menu-section-title{padding:0 12px 8px!important;font-size:12px!important}
  .kysap-mobile-drawer-nav{gap:7px!important}
  .kysap-mobile-drawer-nav .nav-item{
    display:grid!important;
    grid-template-columns:25px minmax(0,1fr)!important;
    align-items:center!important;
    column-gap:12px!important;
    width:100%!important;
    min-height:50px!important;
    padding:12px 14px!important;
    font-size:15px!important;
    line-height:1.25!important;
    white-space:normal!important;
  }
  .kysap-mobile-drawer-nav .nav-item i{
    width:25px!important;
    margin:0!important;
    text-align:center!important;
    align-self:center!important;
  }
  .kysap-mobile-drawer-nav .nav-item span{
    display:block!important;
    white-space:normal!important;
    line-height:1.25!important;
  }
  .kysap-mobile-drawer-footer{
    position:relative!important;
    flex:0 0 auto!important;
    padding:14px 14px calc(14px + env(safe-area-inset-bottom,0px))!important;
  }

  /* Cabeçalhos simples, como a tela de etiquetas. */
  .top{
    padding:calc(16px + env(safe-area-inset-top,0px)) 14px 16px 72px!important;
    min-height:72px!important;
  }
  .top>b,.top>strong{
    display:block!important;
    margin:0!important;
    font-size:18px!important;
    line-height:1.25!important;
    overflow-wrap:anywhere!important;
  }
  .top>a,.top>br{display:none!important}
  .top + .wrap{padding:12px!important}
  .top + .wrap .card{padding:16px!important}
  .top + .wrap h2{font-size:25px!important;line-height:1.2!important}

  /* Aplicativo EL & ELLA */
  body.aplicativo-elella{overflow-x:hidden!important}
  .app-hero{
    padding:calc(14px + env(safe-area-inset-top,0px)) 14px 16px 72px!important;
  }
  .app-hero-inner,.app-brand,.app-brand>div{min-width:0!important;max-width:100%!important}
  .app-brand{gap:12px!important}
  .app-logo{flex:0 0 50px!important;width:50px!important;height:50px!important}
  .app-brand h1{
    font-size:19px!important;
    line-height:1.2!important;
    margin:0 0 5px!important;
    overflow-wrap:anywhere!important;
  }
  .app-brand p{font-size:13px!important;line-height:1.42!important}
  .app-hero-actions{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:9px!important;
    width:100%!important;
    margin-top:14px!important;
  }
  .app-status,.app-hero-actions .app-button{
    width:100%!important;
    min-width:0!important;
    min-height:44px!important;
    padding:9px 10px!important;
    justify-content:center!important;
    text-align:center!important;
    line-height:1.2!important;
    white-space:normal!important;
  }
  .app-main{width:100%!important;max-width:100%!important;padding:14px 12px calc(30px + env(safe-area-inset-bottom,0px))!important}

  /* As três opções ficam em caixas completas. Não encolhem nem misturam ícone e nome. */
  .app-tabs{
    position:static!important;
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    gap:8px!important;
    width:100%!important;
    overflow:visible!important;
    padding:0 0 16px!important;
    margin:0!important;
    background:transparent!important;
  }
  .app-tab{
    display:flex!important;
    align-items:center!important;
    justify-content:flex-start!important;
    gap:11px!important;
    width:100%!important;
    min-width:0!important;
    min-height:48px!important;
    flex:none!important;
    padding:12px 15px!important;
    border-radius:12px!important;
    font-size:15px!important;
    line-height:1.25!important;
    text-align:left!important;
    white-space:normal!important;
  }
  .app-tab i{flex:0 0 22px!important;width:22px!important;margin:0!important;text-align:center!important}

  .app-section-title{font-size:24px!important;line-height:1.2!important;margin:2px 0 14px!important}
  .app-grid{
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    gap:11px!important;
  }
  .app-action-card{
    display:grid!important;
    grid-template-columns:40px minmax(0,1fr)!important;
    grid-template-rows:auto auto!important;
    column-gap:13px!important;
    row-gap:4px!important;
    align-content:center!important;
    min-height:104px!important;
    width:100%!important;
    padding:16px!important;
    border-radius:14px!important;
  }
  .app-action-card i{
    grid-column:1!important;
    grid-row:1 / span 2!important;
    align-self:start!important;
    width:40px!important;
    margin:1px 0 0!important;
    text-align:center!important;
    font-size:27px!important;
  }
  .app-action-card strong{
    grid-column:2!important;
    grid-row:1!important;
    display:block!important;
    margin:0!important;
    font-size:17px!important;
    line-height:1.25!important;
  }
  .app-action-card span{
    grid-column:2!important;
    grid-row:2!important;
    display:block!important;
    margin:0!important;
    font-size:14px!important;
    line-height:1.45!important;
  }

  .app-card{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    padding:16px!important;
    overflow:hidden!important;
  }
  .app-card form,.app-field,.app-barcode-row{width:100%!important;max-width:100%!important;min-width:0!important}
  .app-form-grid,.app-products{grid-template-columns:minmax(0,1fr)!important}
  .app-field input,.app-field textarea,.app-search{max-width:100%!important;min-width:0!important}
  .app-barcode-row{display:grid!important;grid-template-columns:minmax(0,1fr)!important;gap:9px!important}
  .app-barcode-row .app-button{width:100%!important}
  .app-barcode-preview{
    display:block!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    height:auto!important;
    aspect-ratio:13 / 3!important;
    object-fit:contain!important;
    margin:4px 0 14px!important;
  }

  /* Elementos gerais nunca passam da borda do cartão. */
  .card,.form-section,.content-card,.config-section,.table-container,.preview{
    min-width:0!important;
    max-width:100%!important;
  }
  button,.btn,a.btn{
    line-height:1.25!important;
    white-space:normal!important;
  }
  canvas{max-width:100%!important}
}

@media (max-width:380px){
  .app-hero-actions{grid-template-columns:minmax(0,1fr)!important}
  .app-brand h1{font-size:18px!important}
  .app-main{padding-left:10px!important;padding-right:10px!important}
  .app-action-card{grid-template-columns:36px minmax(0,1fr)!important;padding:14px!important}
  .app-action-card i{width:36px!important;font-size:24px!important}
  .kysap-mobile-drawer{width:94vw!important}
}