/* Vistio Business v1.1.87 — Jerarquía del panel, SOLO dispositivos móviles.
   Reutiliza botones/data-nav existentes. No altera lógica, planes ni escritorio. */
.vb187-mobile-guide,.vb187-mobile-more,.vb187-section-status{display:none}

@media (max-width:820px){
  /* Contenedor general: lectura con jerarquía clara y separación consistente. */
  #workspace .workspace-shell.wrap{
    gap:12px!important;
    padding:12px clamp(11px,3.4vw,22px) 34px!important;
  }
  #workspace .workspace-shell > .sidebar.vb187-mobile-ready{
    padding:clamp(13px,3.4vw,19px)!important;
    border:1px solid rgba(211,170,99,.30)!important;
    background:linear-gradient(155deg,rgba(25,24,23,.98),rgba(13,13,15,.99));
    box-shadow:0 12px 30px rgba(0,0,0,.22);
    border-radius:21px!important;
  }
  #workspace .sidebar.vb187-mobile-ready .side-brand{
    display:flex;align-items:center;
    padding-bottom:10px;margin-bottom:11px;
    border-bottom:1px solid rgba(221,185,121,.12);
  }
  #workspace .sidebar.vb187-mobile-ready .side-user{
    display:flex;align-items:center;gap:11px;
    padding:11px 12px;margin:0 0 14px!important;
    border:1px solid rgba(210,174,112,.19);
    border-radius:15px;
    background:linear-gradient(100deg,rgba(186,142,78,.11),rgba(255,255,255,.016));
  }
  #workspace .sidebar.vb187-mobile-ready .side-user .avatar{flex:0 0 auto}
  #workspace .sidebar.vb187-mobile-ready #user-handle{
    color:#cfab70!important;
    font-size:11px!important;letter-spacing:.07em;
  }
  #workspace .sidebar.vb187-mobile-ready #user-email{
    margin-top:2px;line-height:1.3;color:#f7f0e5;
    font-size:clamp(12px,3.3vw,15px)!important;
  }
  /* Orientación para un nuevo usuario, sin crear botones falsos. */
  #workspace .sidebar.vb187-mobile-ready .vb187-mobile-guide{display:block;margin:0 0 12px}
  #workspace .vb187-mobile-guide .vb187-kicker{
    display:block;color:#cba56a;font-size:10px;font-weight:800;letter-spacing:.14em;
  }
  #workspace .vb187-mobile-guide .vb187-heading{
    display:block;margin-top:5px;color:#f9f3e8;
    font-size:clamp(18px,4.5vw,22px);font-weight:780;line-height:1.25;
  }
  #workspace .vb187-mobile-guide .vb187-explanation{
    display:block;margin-top:6px;color:#bcb3a7;font-size:12px;line-height:1.5;
  }
  /* Reemplaza la barra horizontal de v1.1.79 por un menú visual de accesos. */
  #workspace .sidebar.vb187-mobile-ready nav.sidenav{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    grid-auto-flow:row!important;
    align-items:stretch!important;
    column-gap:9px!important;row-gap:9px!important;
    width:100%!important;max-width:100%!important;min-width:0!important;
    padding:0!important;margin:0!important;
    overflow:visible!important;scroll-snap-type:none!important;
    touch-action:pan-y!important;
  }
  #workspace .sidebar.vb187-mobile-ready nav.sidenav > button{
    display:flex!important;
    flex-direction:row!important;
    justify-content:flex-start!important;
    align-items:center!important;
    width:100%!important;max-width:100%!important;
    min-width:0!important;min-height:58px!important;
    white-space:normal!important;
    padding:12px 10px!important;
    margin:0!important;
    text-align:left!important;
    gap:8px!important;
    box-sizing:border-box!important;
    border:1px solid rgba(218,180,117,.20)!important;
    border-radius:14px!important;
    color:#eadfcd!important;
    background:rgba(255,255,255,.028)!important;
    line-height:1.25!important;
    font-size:clamp(11px,3vw,13px)!important;
    font-weight:700!important;
    overflow-wrap:anywhere;
    position:relative!important;
    scroll-snap-align:none!important;
    transition:background .18s ease,border-color .18s ease,transform .18s ease;
  }
  #workspace .sidebar.vb187-mobile-ready nav.sidenav > button .nav-glyph{
    flex:0 0 31px!important;width:31px!important;height:31px!important;
    display:flex;align-items:center;justify-content:center;
    border-radius:10px;
    background:rgba(207,165,99,.10);color:#d4ae76;
  }
  #workspace .sidebar.vb187-mobile-ready nav.sidenav > button .nav-glyph svg{
    width:18px;height:18px;max-width:100%;max-height:100%;
  }
  #workspace .sidebar.vb187-mobile-ready nav.sidenav > button:is([data-nav="appointments"],[data-nav="studio-clients"]){
    padding-bottom:20px!important;
  }
  #workspace .sidebar.vb187-mobile-ready nav.sidenav > button small.vb-studio-nav-tag{
    position:absolute;right:8px;bottom:5px;max-width:calc(100% - 12px);
    font-size:8px!important;line-height:1!important;white-space:nowrap!important;
    letter-spacing:.025em;
  }
  #workspace .sidebar.vb187-mobile-ready nav.sidenav > button.active,
  #workspace .sidebar.vb187-mobile-ready nav.sidenav > button[aria-current="page"]{
    color:#f7dfac!important;
    border-color:rgba(223,185,112,.70)!important;
    background:linear-gradient(125deg,rgba(187,140,74,.22),rgba(70,51,30,.18))!important;
    box-shadow:inset 0 0 0 1px rgba(210,165,92,.12);
  }
  #workspace .sidebar.vb187-mobile-ready nav.sidenav > button.active .nav-glyph{
    background:rgba(229,185,112,.20);color:#f4d49d;
  }
  #workspace .sidebar.vb187-mobile-ready nav.sidenav > button:focus-visible,
  #workspace .sidebar.vb187-mobile-ready .vb187-mobile-more:focus-visible{
    outline:2px solid #efc47b!important;outline-offset:3px;
  }
  #workspace .sidebar.vb187-mobile-ready nav.sidenav > button[data-nav="overview"]{
    grid-column:1 / -1!important;
    min-height:50px!important;
    background:linear-gradient(100deg,rgba(197,151,84,.14),rgba(255,255,255,.022))!important;
  }
  /* Secundarias: accesibles desde “Más secciones” y nunca se pierden. */
  #workspace .sidebar.vb187-mobile-ready:not(.vb187-expanded)
    nav.sidenav > button.vb187-secondary:not(.active){display:none!important}
  #workspace .sidebar.vb187-mobile-ready:not(.vb187-expanded)
    nav.sidenav > button.vb187-secondary.active{display:flex!important}
  #workspace .sidebar.vb187-mobile-ready .vb187-mobile-more{
    display:flex!important;align-items:center;justify-content:space-between;
    width:100%;min-height:45px;margin-top:10px;padding:9px 13px;
    font-family:inherit;font-size:12px;line-height:1.3;font-weight:750;
    color:#e6c58e;background:rgba(188,144,77,.075);
    border:1px solid rgba(212,172,111,.28);border-radius:13px;
    cursor:pointer;
  }
  #workspace .sidebar.vb187-mobile-ready .vb187-mobile-more .vb187-chevron{
    display:inline-flex;align-items:center;justify-content:center;
    font-size:16px;line-height:1;
    transition:transform .2s ease;
  }
  #workspace .sidebar.vb187-mobile-ready.vb187-expanded .vb187-chevron{transform:rotate(180deg)}
  #workspace .sidebar.vb187-mobile-ready .sidebar-bottom{
    margin:11px 0 0!important;padding-top:10px;
    border-top:1px solid rgba(224,181,106,.13);
  }
  #workspace .sidebar.vb187-mobile-ready .sidebar-bottom #logout.vb125-logout{
    font-size:11px!important;
  }
  /* El área de trabajo aparece después de la navegación con contexto visible. */
  #workspace .workspace-shell > .workspace-body{
    min-width:0!important;max-width:100%!important;
  }
  #workspace .workspace-body > .vb187-section-status{
    display:flex;align-items:center;justify-content:space-between;gap:9px;
    margin:0 0 10px;padding:10px 12px;
    border:1px solid rgba(209,170,105,.19);border-radius:13px;
    background:rgba(207,168,111,.052);
    color:#e3d3bd;font-size:12px;line-height:1.4;
  }
  #workspace .vb187-status-label{color:#a9a095}
  #workspace .vb187-status-name{color:#edc88c;font-weight:800;text-align:right}
  #workspace .workspace-top{
    margin:0 0 14px!important;
    padding:10px 2px!important;
    border-bottom:1px solid rgba(213,172,109,.12);
    min-width:0!important;
  }
  #workspace .workspace-right{
    flex:0 0 auto;align-items:center;gap:6px!important;
  }
  #workspace .view-head{gap:12px!important;margin-bottom:15px!important}
  #workspace .view-head .view-title{font-size:clamp(26px,6.2vw,38px)!important;line-height:1.13!important}
  #workspace #view-content{min-width:0!important}
  #workspace .dashboard-hero.v03-hero{
    padding:clamp(17px,4vw,26px)!important;
    border-radius:19px;
  }
  #workspace .statgrid{gap:10px!important}
  #workspace .module-grid, #workspace .resource-grid, #workspace .resources-grid{gap:11px!important}
}
@media(max-width:370px){
  #workspace .sidebar.vb187-mobile-ready nav.sidenav > button{
    padding:10px 8px!important;font-size:11px!important;
  }
  #workspace .sidebar.vb187-mobile-ready nav.sidenav > button .nav-glyph{
    flex-basis:27px!important;width:27px!important;height:27px!important;
  }
}
@media(prefers-reduced-motion:reduce){
  #workspace .sidebar.vb187-mobile-ready nav.sidenav > button,
  #workspace .vb187-mobile-more .vb187-chevron{transition:none!important}
}