/* NexoProCRM v0.21.7 · Adaptación tablet / iPad / pantallas táctiles 13"
   Capa visual únicamente. No modifica VERI*FACTU, facturación, comisiones ni datos fiscales. */

/*
  Problema corregido:
  En iPad, tablets landscape y portátiles táctiles pequeños, la barra lateral fija resta demasiado ancho
  y no se adapta bien. En estos tamaños se pasa a un layout de una sola columna con navegación superior
  de botones cuadrados, manteniendo la barra lateral solo en escritorio amplio.
*/
@media (min-width:783px) and (max-width:1368px){
  html body.nexopro-app-page{
    background:#f4f6f8!important;
  }

  .ch301-app.ch301-app-layout-v2{
    width:100%!important;
    max-width:none!important;
  }

  .ch301-layout{
    display:block!important;
    grid-template-columns:none!important;
    min-height:100vh!important;
    width:100%!important;
  }

  /* La barra lateral se oculta en modo tablet para evitar que robe ancho al contenido. */
  .ch301-layout > .ch301-nav{
    display:none!important;
  }

  .ch301-main{
    width:100%!important;
    max-width:none!important;
    min-width:0!important;
    padding:18px 18px 46px!important;
    box-sizing:border-box!important;
  }

  .ch301-header{
    position:relative!important;
    top:auto!important;
    z-index:10!important;
    margin:0 0 12px!important;
    padding:22px 24px!important;
    border-radius:18px!important;
  }

  .ch301-header .ch301-title-block,
  .ch301-title-block{
    min-width:0!important;
  }

  .ch301-header h1,
  .ch301-title-block h1{
    font-size:34px!important;
    line-height:1.05!important;
    letter-spacing:-.04em!important;
  }

  .ch301-header-right{
    gap:10px!important;
    flex-wrap:wrap!important;
    justify-content:flex-end!important;
  }

  .ch301-refresh-button,
  .ch301-user-pill,
  .ch301-brand-bosch{
    min-height:44px!important;
    border-radius:12px!important;
  }

  .ch301-user-pill{
    max-width:220px!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    white-space:nowrap!important;
  }

  /* Menú superior tipo tablet: botones cuadrados entre header y migas. */
  .ch301-mobile-quick-actions{
    display:block!important;
    width:100%!important;
    max-width:100%!important;
    margin:10px 0 12px!important;
    padding:0!important;
    overflow:hidden!important;
  }

  .ch301-mobile-quick-actions-inner{
    display:flex!important;
    align-items:stretch!important;
    gap:10px!important;
    width:100%!important;
    max-width:100%!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    -webkit-overflow-scrolling:touch!important;
    scroll-snap-type:x proximity!important;
    padding:2px 2px 10px!important;
    scrollbar-width:thin!important;
    scrollbar-color:#cbd5e1 transparent!important;
  }

  .ch301-mobile-quick-actions-inner::-webkit-scrollbar{
    height:6px!important;
  }
  .ch301-mobile-quick-actions-inner::-webkit-scrollbar-thumb{
    background:#cbd5e1!important;
    border-radius:999px!important;
  }

  .ch301-mobile-quick-action{
    position:relative!important;
    flex:0 0 74px!important;
    width:74px!important;
    height:68px!important;
    min-width:74px!important;
    max-width:74px!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:center!important;
    gap:6px!important;
    border:1px solid #dbe3ec!important;
    border-radius:15px!important;
    background:#fff!important;
    color:#667085!important;
    text-decoration:none!important;
    box-shadow:0 7px 18px rgba(15,23,42,.055)!important;
    scroll-snap-align:start!important;
    box-sizing:border-box!important;
  }

  .ch301-mobile-quick-action .ch301-nav-icon{
    width:22px!important;
    height:22px!important;
    min-width:22px!important;
    max-width:22px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    color:currentColor!important;
  }

  .ch301-mobile-quick-action .ch301-nav-icon svg{
    width:21px!important;
    height:21px!important;
    stroke-width:1.85!important;
  }

  .ch301-mobile-quick-action span:not(.ch301-nav-icon){
    max-width:68px!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    white-space:nowrap!important;
    color:inherit!important;
    font-size:10px!important;
    line-height:1!important;
    font-weight:850!important;
    letter-spacing:-.02em!important;
    text-align:center!important;
  }

  .ch301-mobile-quick-action:hover,
  .ch301-mobile-quick-action:focus-visible{
    color:#202832!important;
    background:#f8fafc!important;
    border-color:#cbd5e1!important;
    outline:none!important;
  }

  .ch301-mobile-quick-action.is-active{
    color:#d71920!important;
    background:#fff7f7!important;
    border-color:rgba(215,25,32,.30)!important;
    box-shadow:inset 0 -2px 0 #d71920, 0 7px 18px rgba(15,23,42,.055)!important;
  }

  .ch301-mobile-quick-action.is-active:before{
    content:""!important;
    position:absolute!important;
    top:7px!important;
    left:50%!important;
    width:5px!important;
    height:5px!important;
    border-radius:999px!important;
    background:#d71920!important;
    transform:translateX(-50%)!important;
  }

  .ch301-breadcrumbs{
    margin:0 0 14px!important;
    padding:14px 16px!important;
    border-radius:14px!important;
  }

  /* Evita anchos fijos heredados en módulos internos. */
  .ch301-panel,
  .ch301-card,
  .ch301-dashboard,
  .nxp-accounting-wrap,
  .nxp-commission-wrap,
  .nxp-sales-hub,
  .nxp-sales-hub *{
    max-width:100%!important;
    box-sizing:border-box!important;
  }

  .ch301-grid,
  .ch301-stats,
  .ch301-kpi-grid,
  .nxp-dashboard-kpis,
  .nxp-commission-kpi-grid,
  .nxp-sales-hub .nxp-sales-grid,
  .nxp-sales-hub .nxp-sales-cards{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
}

/* Tablets más estrechas y iPad vertical: una columna más aireada, sin barra inferior duplicada salvo móvil real. */
@media (min-width:783px) and (max-width:1100px){
  .ch301-main{
    padding:16px 14px 42px!important;
  }

  .ch301-header{
    padding:20px!important;
  }

  .ch301-header h1,
  .ch301-title-block h1{
    font-size:30px!important;
  }

  .ch301-mobile-quick-action{
    flex-basis:68px!important;
    width:68px!important;
    min-width:68px!important;
    max-width:68px!important;
    height:64px!important;
  }

  .ch301-grid,
  .ch301-stats,
  .ch301-kpi-grid,
  .nxp-dashboard-kpis,
  .nxp-commission-kpi-grid,
  .nxp-sales-hub .nxp-sales-grid,
  .nxp-sales-hub .nxp-sales-cards{
    grid-template-columns:1fr!important;
  }
}

/* Escritorio medio: si se mantiene sidebar por encima de 1368, se compacta ligeramente. */
@media (min-width:1369px) and (max-width:1480px){
  :root{--nxp-layout-sidebar:250px;}
  .ch301-nav{
    padding:14px 12px!important;
  }
  .ch301-nav a.ch301-nav-item,
  .ch301-nav .ch301-nav-item{
    font-size:13px!important;
    padding:9px 10px!important;
    min-height:40px!important;
  }
  .ch301-nav-brand strong{font-size:14px!important;}
  .ch301-main{padding:20px 22px 40px!important;}
}