/* Navegación por dispositivo: barra inferior en celular, acceso directo en tablet y computador.
   Reutiliza la paleta y los componentes existentes; solo ordena la navegación. */

/* Menú lateral: el ícono de hamburguesa no tenía trazo y se veía vacío */
.mobile-menu svg{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
.sidebar{overflow-y:auto}

/* Acceso al espacio profesional desde la barra superior (tablet y computador) */
.c-pro-link{display:none}
.c-tabbar,.c-scrim{display:none}
.c-tabbar em,.p-tab-count{position:absolute;top:2px;left:calc(50% + 9px);min-width:17px;height:17px;border-radius:9px;background:#b3573e;color:#fff;font-style:normal;font-size:10px;line-height:17px;text-align:center;padding:0 4px;font-weight:800}

@media(min-width:761px){
  .c-pro-link{display:inline-flex;align-items:center;gap:7px;white-space:nowrap;text-decoration:none;min-height:37px;padding:0 13px;font-size:12px}
  .c-pro-link svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
  .c-pro-link svg.c-tooth{stroke-width:4.5}
}
@media(min-width:761px) and (max-width:1170px){
  .c-pro-link span{display:none}
  .c-pro-link{width:37px;padding:0;justify-content:center}
  .crumb{display:none}
}

/* Barra inferior del espacio central (celular) */
@media(max-width:760px){
  body:not(.professional-mode) .c-tabbar{display:flex;position:fixed;bottom:0;left:0;right:0;justify-content:space-around;gap:2px;background:#fff;border-top:1px solid #dce7e4;padding:7px 4px max(9px,env(safe-area-inset-bottom));z-index:30;box-shadow:0 -8px 24px #102e3614}
  body:not(.professional-mode) .c-tabbar button{position:relative;flex:1;max-width:98px;min-width:0;border:0;background:#fff;color:#78908e;display:flex;align-items:center;flex-direction:column;justify-content:center;gap:4px;min-height:52px;font-size:11px;font-weight:650;border-radius:9px;padding:4px 2px;transition:background .18s,color .18s}
  body:not(.professional-mode) .c-tabbar button svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
  body:not(.professional-mode) .c-tabbar button svg.c-tooth{stroke-width:3.6}
  body:not(.professional-mode) .c-tabbar button.active{color:#173c44;background:#eaf2ee;font-weight:800}
  body:not(.professional-mode) .c-tabbar button[aria-expanded="true"]{color:#173c44}
  body:not(.professional-mode) .workspace{padding-bottom:112px}
  body:not(.professional-mode) .toast{left:14px;right:14px;bottom:92px;text-align:center}
  .sidebar:not(.open){box-shadow:none;visibility:hidden}
  body.c-menu-open{overflow:hidden}
  body.c-menu-open .c-tabbar{display:none}
  body.c-menu-open .c-scrim{display:block;position:fixed;inset:0;background:#102d36a6;z-index:4}
}

/* Menú lateral contraíble (tablet y computador): queda un riel de íconos y el contenido gana el ancho.
   El cambio es inmediato: animar el ancho obligaría a recalcular toda la pantalla en cada cuadro.
   La clase vive en <html> para aplicarse antes de pintar y sobrevivir a cada redibujo del espacio profesional.
   El nombre de cada sección se oculta solo a la vista: los lectores de pantalla lo siguen anunciando. */
.mobile-menu .i-panel,.p-nav-toggle,.p-side .brand .brand-mark{display:none}
.p-top-title{flex:1;min-width:0}
@media(min-width:701px){
  #professionalApp .p-nav-toggle{display:inline-flex}
  #professionalApp .p-top{padding-left:10px}
  .p-side{overflow-x:hidden}
  .p-nav{white-space:nowrap}
  html.nav-collapsed .p-layout{grid-template-columns:92px minmax(0,1fr)}
  html.nav-collapsed .p-side{padding-inline:12px}
  html.nav-collapsed .p-side .brand{padding:0;justify-content:center}
  html.nav-collapsed .p-side .brand-logo{display:none}
  html.nav-collapsed .p-side .brand .brand-mark{display:block}
  html.nav-collapsed .p-nav{position:relative;justify-content:center;padding-inline:0}
  html.nav-collapsed .p-nav-label{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  html.nav-collapsed .p-count{position:absolute;top:3px;right:4px;margin:0;min-width:17px;height:17px;padding:0 4px;font-size:10px;line-height:17px;text-align:center;background:#173c44;color:#fff}
  html.nav-collapsed .p-side-foot{padding-inline:0}
  html.nav-collapsed .p-user{justify-content:center;margin-bottom:0}
  html.nav-collapsed .p-user>div:last-child,html.nav-collapsed .p-side-foot .p-btn,html.nav-collapsed .p-side-foot p{display:none}
}
@media(min-width:761px){
  .mobile-menu{display:grid}
  .mobile-menu .i-burger{display:none}
  .mobile-menu .i-panel{display:block}
  .app .topbar{padding-left:12px}
  .topbar .crumb{margin-right:auto}
  .sidebar{overflow-x:hidden}
  .nav-btn{white-space:nowrap}
  html.nav-collapsed .sidebar{width:76px;padding-inline:12px}
  html.nav-collapsed .sidebar .brand{padding-inline:0;justify-content:center}
  html.nav-collapsed .sidebar .brand>div,html.nav-collapsed .j-profile,html.nav-collapsed .space-switch,html.nav-collapsed .workspace-disclaimer,html.nav-collapsed .sidebar-foot>div:not(.avatar){display:none}
  html.nav-collapsed .nav-section{height:1px;margin:10px 8px;padding:0;overflow:hidden;font-size:0;background:#e4ebeb}
  html.nav-collapsed .nav-btn{position:relative;justify-content:center;padding-inline:0}
  html.nav-collapsed .nav-btn span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  html.nav-collapsed .nav-btn em{position:absolute;top:2px;right:4px;margin:0;min-width:17px;height:17px;padding:0 4px;font-size:10px;line-height:17px;text-align:center}
  html.nav-collapsed .sidebar-foot{justify-content:center;padding-inline:0}
}
/* Espacio profesional: la barra ya existía; aquí solo se completa el contador y el foco */
.p-mobile-nav button{position:relative}
.p-mobile-nav button[aria-current="page"]{color:#173c44}