/* PANEL v720 — restauración de navegación móvil + marca legible + blindaje de maquetación móvil */

/* v2.020: el shell superior ya no se dimensiona aquí; base.html es la única fuente. */
/* La botonera clásica sólo existe en móvil. */
.eg-mobile-classic{display:none!important;}

@media(max-width:900px){
  /* Cabecera móvil: definida únicamente en base.html (v2.020). */

  /* La botonera clásica es la navegación móvil activa; no hay cajón superpuesto. */

  /* Botonera por categorías: tres columnas; las filas dependen de los
     grupos visibles para el usuario (HOME más las categorías permitidas). */
  .eg-mobile-classic.barra-nav{
    display:grid!important;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:6px;
    position:sticky;
    top:var(--eg-top);
    z-index:115;
    width:100%;
    box-sizing:border-box;
    padding:7px 8px;
    margin:0!important;
    overflow:visible!important;
    background:rgba(8,10,11,.985)!important;
    border-top:1px solid rgba(255,255,255,.04);
    border-bottom:1px solid rgba(255,255,255,.09);
  }
  .eg-mobile-classic .menu-cat{position:relative!important;min-width:0!important;margin:0!important;}
  .eg-mobile-classic .menu-cat-boton{
    width:100%!important;
    min-width:0!important;
    min-height:38px!important;
    height:38px!important;
    margin:0!important;
    padding:0 8px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    gap:5px!important;
    border:1px solid #32383c!important;
    border-radius:8px!important;
    background:#111416!important;
    color:#c4c9cc!important;
    box-shadow:none!important;
    font-size:13px!important;
    line-height:1!important;
    font-weight:800!important;
    white-space:nowrap!important;
  }
  .eg-mobile-classic .menu-cat-boton.activo{
    color:#ff941e!important;
    border-color:#8a5208!important;
    background:rgba(232,121,30,.12)!important;
  }
  .eg-mobile-classic .menu-flecha{font-size:11px!important;line-height:1!important;}
  .eg-mobile-classic .menu-desplegable{
    display:none!important;
    position:fixed!important;
    left:10px!important;
    right:10px!important;
    top:calc(var(--eg-top) + 96px)!important;
    width:auto!important;
    min-width:0!important;
    max-width:none!important;
    max-height:calc(100vh - var(--eg-top) - 112px)!important;
    overflow:auto!important;
    z-index:180!important;
    padding:8px!important;
    border:1px solid #343a3e!important;
    border-radius:10px!important;
    background:#090b0c!important;
    box-shadow:0 18px 60px rgba(0,0,0,.62)!important;
  }
  .eg-mobile-classic .menu-cat.abierto .menu-desplegable{display:block!important;}
  .eg-mobile-classic .menu-desplegable a{
    display:flex!important;
    align-items:center!important;
    gap:10px!important;
    min-height:42px!important;
    margin:2px 0!important;
    padding:8px 11px!important;
    border:1px solid transparent!important;
    border-radius:8px!important;
    color:#c0c5c8!important;
    text-decoration:none!important;
    font-size:14px!important;
    font-weight:700!important;
    white-space:normal!important;
    writing-mode:horizontal-tb!important;
  }
  .eg-mobile-classic .menu-desplegable a.activo{
    color:#ff941e!important;
    border-color:rgba(232,121,30,.22)!important;
    background:rgba(232,121,30,.12)!important;
  }
  .eg-mobile-classic .eg-side-icon{flex:0 0 20px!important;width:20px!important;height:20px!important;margin:0!important;}
  .eg-mobile-classic .menu-desplegable .eg-v745-ia-subnav{margin:3px 0 7px 9px!important;padding-left:7px!important;}
  .eg-mobile-classic .menu-desplegable .eg-v745-ia-subnav a{min-height:36px!important;padding:7px 10px!important;font-size:12px!important;}
  .eg-mobile-classic .menu-desplegable .eg-v745-ia-subnav a.activo{color:#ff941e!important;border-color:rgba(232,121,30,.28)!important;background:rgba(232,121,30,.12)!important;}

  /* El contenido empieza debajo de la botonera, sin capas cruzadas. */
  .eg-app{display:block!important;}
  .eg-sidebar{display:none!important;}
  .eg-workspace{padding:0 10px 64px!important;overflow-x:hidden!important;}

  /* Ningún título/etiqueta puede girarse o comprimirse en vertical. */
  .eg-workspace h1,.eg-workspace h2,.eg-workspace h3,
  .eg-tool-hero h1,.eg-kpi,.eg-kpi *,
  .panel,.panel *{
    writing-mode:horizontal-tb!important;
    text-orientation:mixed!important;
  }
  .eg-tool-hero h1{
    word-break:normal!important;
    overflow-wrap:break-word!important;
    hyphens:none!important;
  }
  .eg-kpi-etiqueta,.eg-kpi strong,.eg-kpi small{
    word-break:normal!important;
    overflow-wrap:break-word!important;
    white-space:normal!important;
    transform:none!important;
  }
}

@media(max-width:520px){
  .eg-mobile-classic.barra-nav{gap:5px;padding:6px;}
  .eg-mobile-classic .menu-cat-boton{font-size:12px!important;padding:0 5px!important;}
  .eg-mobile-classic .menu-desplegable{left:6px!important;right:6px!important;}
  .eg-kpi-grid-6,.eg-kpi-grid-5,.eg-kpi-grid-3,.eg-kpi-grid{grid-template-columns:1fr!important;}
  .eg-kpi{min-width:0!important;width:100%!important;}
}

@media(max-width:380px){
  .eg-mobile-classic .menu-cat-boton{font-size:11px!important;}
}