/* PEM SySO · correcciones finales de accesibilidad y Design System */
button[aria-label^="Ayuda metodológica"],
[role="button"][aria-label^="Ayuda metodológica"] {
  box-sizing: border-box;
  min-width: 28px !important;
  min-height: 28px !important;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

button[aria-label^="Ayuda metodológica"]:focus-visible,
[role="button"][aria-label^="Ayuda metodológica"]:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

/* Search field: reserve an explicit icon lane at Windows scaling. */
html.pem-enterprise-ui .pem-global-topbar .pem-global-search input,
html.pem-enterprise-ui .topbar .search.pem-global-search input {
  padding-left: 64px !important;
}
html.pem-enterprise-ui .pem-global-topbar .pem-enterprise-search-icon,
html.pem-enterprise-ui .topbar .pem-enterprise-search-icon {
  left: 18px !important;
}

/* R14 visual recovery: preserve approved artwork and align every sidebar. */
html.pem-enterprise-ui .sidebar>.brand .shield,
html.pem-enterprise-ui .pem-global-logo {
  box-sizing:border-box!important;
  width:64px!important;min-width:64px!important;max-width:64px!important;
  height:64px!important;min-height:64px!important;max-height:64px!important;
  flex:0 0 64px!important;
  background:#fff url('/static/pem_syso_mark.png') center/contain no-repeat!important;
  border-radius:10px!important;
}
html.pem-enterprise-ui body.pem-standalone-shell:not(.pem-sidebar-collapsed) {
  padding-left:252px!important;
}
@media(max-width:800px) {
  html.pem-enterprise-ui body.pem-standalone-shell:not(.pem-sidebar-collapsed) {padding-left:0!important;}
}
/* Implicit grid min-content tracks must not crop the dashboard canvas. */
html.pem-enterprise-ui body:not(.pem-standalone-shell) .pem-dashboard-view {
  grid-template-columns:minmax(0,1fr)!important;
}
html.pem-enterprise-ui body:not(.pem-standalone-shell) .pem-dashboard-view>*,
html.pem-enterprise-ui body:not(.pem-standalone-shell) .desktop-dashboard {
  min-width:0!important;max-width:100%!important;
}
html.pem-enterprise-ui body:not(.pem-standalone-shell) .context-pills {flex-wrap:wrap!important;min-width:0!important;}

/* Plan summaries keep all five existing metrics visible at narrow widths. */
@media(max-width:1180px) {
  html.pem-enterprise-ui body.pem-route-plan main.shell #summary.kpis {
    grid-template-columns:repeat(auto-fit,minmax(150px,1fr))!important;
    grid-auto-flow:row!important;grid-auto-columns:auto!important;
    width:100%!important;min-width:0!important;max-width:100%!important;
  }
  html.pem-enterprise-ui body.pem-route-plan main.shell #summary.kpis>.kpi {
    width:auto!important;min-width:0!important;max-width:none!important;
  }
}
@media(max-width:900px) {
  html.pem-enterprise-ui body:not(.pem-standalone-shell) .pem-dashboard-view .pem-release-dashboard-band,
  html.pem-enterprise-ui body:not(.pem-standalone-shell) .pem-dashboard-view .desktop-dashboard {
    grid-template-columns:minmax(0,1fr)!important;width:100%!important;min-width:0!important;
  }
  html.pem-enterprise-ui body:not(.pem-standalone-shell) .pem-dashboard-view .pem-release-dashboard-band>* {
    min-width:0!important;max-width:100%!important;
  }
}

/* Preserve contrast on the existing dark UAT helper banner. */
html.pem-enterprise-ui body.pem-standalone-shell #uatWorkspace .hero h1,
html.pem-enterprise-ui body.pem-standalone-shell #uatGate .hero h1 {color:#fff!important;}

@media(max-width:1180px) {
  html.pem-enterprise-ui body:not(.pem-standalone-shell) .pem-dashboard-view .pem-dashboard-kpis {
    width:100%!important;min-width:0!important;max-width:100%!important;
  }
  html.pem-enterprise-ui body:not(.pem-standalone-shell) .pem-dashboard-view .pem-dashboard-kpis .pem-release-kpi-grid {
    grid-template-columns:repeat(auto-fit,minmax(150px,1fr))!important;
    width:100%!important;min-width:0!important;max-width:100%!important;
  }
  html.pem-enterprise-ui body:not(.pem-standalone-shell) .pem-dashboard-view .pem-dashboard-kpis .pem-release-kpi-grid>.kpi {
    width:auto!important;min-width:0!important;max-width:none!important;
  }
}

/* Compact sidebar keeps the same artwork and accessible group names. */
html.pem-enterprise-ui.pem-sidebar-collapsed .sidebar>.brand .shield,
html.pem-enterprise-ui.pem-sidebar-collapsed .pem-global-logo {
  width:40px!important;min-width:40px!important;max-width:40px!important;
  height:40px!important;min-height:40px!important;max-height:40px!important;
  flex:0 0 40px!important;
}
html.pem-enterprise-ui.pem-sidebar-collapsed .pem-release-nav-group-toggle {
  position:relative!important;justify-content:center!important;
  min-width:0!important;padding:10px 4px!important;gap:0!important;
}
html.pem-enterprise-ui.pem-sidebar-collapsed .pem-release-nav-group-toggle>span:first-child {
  position:absolute!important;width:1px!important;height:1px!important;
  margin:-1px!important;padding:0!important;border:0!important;
  overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;
}
html.pem-enterprise-ui.pem-sidebar-collapsed .pem-release-nav-chevron {
  flex:0 0 auto!important;font-size:18px!important;
}


/* BRAND HOTFIX: full official PEM SySO lockup on expanded desktop sidebar. */
@media (min-width:901px){
  html.pem-enterprise-ui:not(.pem-sidebar-collapsed) .sidebar>.brand,
  html.pem-enterprise-ui:not(.pem-sidebar-collapsed) .pem-global-brand{
    justify-content:center!important;
    min-height:72px!important;
    padding:10px 12px!important;
  }
  html.pem-enterprise-ui:not(.pem-sidebar-collapsed) .sidebar>.brand .shield,
  html.pem-enterprise-ui:not(.pem-sidebar-collapsed) .pem-global-logo{
    width:190px!important;
    min-width:190px!important;
    max-width:190px!important;
    height:52px!important;
    min-height:52px!important;
    max-height:52px!important;
    flex:0 0 190px!important;
    background:#fff url('/static/pem_syso_logo.png') center/contain no-repeat!important;
    border-radius:10px!important;
  }
  html.pem-enterprise-ui:not(.pem-sidebar-collapsed) .sidebar>.brand>div:last-child,
  html.pem-enterprise-ui:not(.pem-sidebar-collapsed) .pem-global-brand-copy{
    display:none!important;
  }
  html.pem-enterprise-ui.pem-sidebar-collapsed .sidebar>.brand .shield,
  html.pem-enterprise-ui.pem-sidebar-collapsed .pem-global-logo{
    width:40px!important;
    min-width:40px!important;
    max-width:40px!important;
    height:40px!important;
    min-height:40px!important;
    max-height:40px!important;
    flex:0 0 40px!important;
    background:#fff url('/static/pem_syso_mark.png') center/contain no-repeat!important;
  }
}


@media(min-width:1181px){
/* FINAL VISUAL AUDIT 2026-10-04 · Plan SySO canonical compact 10-up layout */
html.pem-enterprise-ui body.pem-route-plan #summary.kpis{
  display:grid!important;grid-template-columns:repeat(10,minmax(0,1fr))!important;
  width:100%!important;max-width:100%!important;gap:7px!important;
}
html.pem-enterprise-ui body.pem-route-plan #summary.kpis .kpi{
  width:auto!important;min-width:0!important;max-width:none!important;
  height:76px!important;min-height:76px!important;box-sizing:border-box!important;
  display:grid!important;grid-template-rows:minmax(28px,auto) 1fr!important;
  align-content:stretch!important;gap:2px!important;padding:7px 8px!important;
}
html.pem-enterprise-ui body.pem-route-plan #summary.kpis .kpi.pem-demo-help-card{padding-right:8px!important}
html.pem-enterprise-ui body.pem-route-plan #summary.kpis .kpi>span{
  display:block!important;min-height:28px!important;line-height:1.12!important;font-size:11px!important;margin:0!important;
}
html.pem-enterprise-ui body.pem-route-plan #summary.kpis .kpi.pem-demo-help-card>span{padding-right:24px!important}
html.pem-enterprise-ui body.pem-route-plan #summary.kpis .kpi>b{
  align-self:center!important;margin:0!important;line-height:1!important;text-align:center!important;font-size:24px!important;
}
html.pem-enterprise-ui body.pem-route-plan #summary.kpis .kpi>small{display:none!important}
}


/* Canonical root sidebar: fixed while main content scrolls. */
@media(min-width:801px){
  html.pem-enterprise-ui body:not(.pem-standalone-shell) .app-shell>.sidebar{
    position:fixed!important;top:0!important;bottom:0!important;left:0!important;
    width:var(--pem-sidebar-w,252px)!important;height:100vh!important;max-height:100vh!important;
    z-index:1200!important;
  }
  html.pem-enterprise-ui body:not(.pem-standalone-shell) .app-shell>.main{grid-column:2!important;min-width:0!important}
  html.pem-enterprise-ui.pem-sidebar-collapsed body:not(.pem-standalone-shell) .app-shell>.sidebar{
    width:var(--pem-sidebar-collapsed,56px)!important;
  }
}