/* PEM SySO UX V2 · Commercial polish gate
   Final visual contract for demo-ready surfaces. Loaded after ux_v2_bundle.css. */

/* A hidden state is semantic. Local layout rules must never resurrect it. */
[hidden]{display:none!important}

/* A commercial demo must present the product, not its internal release label. */
.pem-v2-edition{display:none!important}

/* Search: exactly one canonical icon, no development shortcut badge. */
html.pem-enterprise-ui .pem-global-search::before,
html.pem-enterprise-ui .pem-global-search::after,
html.pem-enterprise-ui .topbar .search::before,
html.pem-enterprise-ui .topbar .search::after,
.pem-global-search::before,
.pem-global-search::after,
.topbar .search::before,
.topbar .search::after{content:none!important;display:none!important}
.pem-global-search-kbd{display:none!important}
html.pem-enterprise-ui .pem-global-search input,
html.pem-enterprise-ui .topbar .search input,
.pem-global-search input,
.topbar .search input{padding-left:48px!important;padding-right:16px!important}
.pem-commercial-search-icon{position:absolute;left:16px;top:50%;width:18px;height:18px;transform:translateY(-50%);pointer-events:none;color:#60758e;z-index:2}
.pem-commercial-search-icon svg{display:block;width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* One page-title contract: generous H1 in content, compact context only after it leaves view. */
.pem-page-header{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;margin:0 0 16px;padding:0;min-width:0}
.pem-page-header-main{min-width:0;max-width:840px}
.pem-page-header .pem-eyebrow{display:block;margin:0 0 5px;color:#4f6d8e;font-size:11px;font-weight:800;letter-spacing:.075em;text-transform:uppercase}
.pem-page-header h1{margin:0!important;color:#10233f!important;font-size:clamp(24px,2vw,32px)!important;line-height:1.12!important;letter-spacing:-.018em!important}
.pem-page-header p{margin:6px 0 0!important;color:#65778d!important;line-height:1.45!important;max-width:760px}
.pem-page-header-actions{display:flex;align-items:center;justify-content:flex-end;gap:8px;flex-wrap:wrap;min-width:0}

/* Existing flagship headers participate in the same geometry. */
.hero.pem-page-header,.indicator-head.pem-page-header{margin-bottom:16px!important}
.indicator-head.pem-page-header{align-items:flex-end!important}

/* Shell context is navigation context, not a second permanent page title. */
.pem-global-context,.pem-spa-context{opacity:0;visibility:hidden;transform:none;transition:none;pointer-events:none}
body.pem-title-scrolled .pem-global-context,
body.pem-title-scrolled .pem-spa-context,
body.pem-no-page-title .pem-global-context,
body.pem-no-page-title .pem-spa-context{opacity:1;visibility:visible;transform:none;pointer-events:auto}
.pem-spa-context{display:flex;align-items:center;min-width:0;max-width:230px;color:#193451;font-size:12px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pem-spa-context span{overflow:hidden;text-overflow:ellipsis}

/* Contextual navigation: one secondary back action, never a competing CTA. */
.pem-commercial-hidden-nav{display:none!important}
.pem-context-back{display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:0 4px;color:#315f91;font-size:12px;font-weight:750;text-decoration:none}
.pem-context-back:hover{text-decoration:underline}
.pem-global-back,.pem-root-back{
  appearance:none!important;border:0!important;background:transparent!important;box-shadow:none!important;
  display:inline-flex!important;align-items:center!important;justify-content:flex-start!important;gap:5px!important;
  width:auto!important;min-width:0!important;min-height:36px!important;padding:0 4px!important;margin:0 8px 0 0!important;
  color:#315f91!important;font-size:12px!important;font-weight:750!important;line-height:1!important;cursor:pointer!important;
}
.pem-global-back:hover,.pem-root-back:hover{text-decoration:underline!important;background:transparent!important}

/* Canonical form/action geometry. */
.pem-form-actions,.pem-action-bar,.pem-commercial-actions{display:flex!important;justify-content:flex-end!important;align-items:center!important;gap:8px!important;flex-wrap:wrap!important;width:100%!important}
.pem-form-actions .btn,.pem-action-bar .btn,.pem-commercial-actions .btn{width:auto!important;min-width:0!important}
form .full.pem-commercial-submit{display:flex!important;justify-content:flex-end!important;align-items:center!important;gap:10px!important}
form>button.btn,form>.btn[type="submit"]{width:auto!important;max-width:100%;justify-self:end;align-self:end}
form>button.btn.span2,form>.btn[type="submit"].span2{justify-self:end!important;width:auto!important}

/* Help belongs to the label it explains. It must never float over values or copy. */
.metric-label{display:flex!important;align-items:center!important;gap:6px!important;min-width:0!important}
.metric-label .metric-help,.pem-inline-help,.pem-info-tooltip,.pem-info-button,.pem-help-trigger{position:static!important;inset:auto!important;transform:none!important;flex:0 0 auto!important;vertical-align:middle!important;margin:0 2px 0 6px!important}
.metric-help,.pem-help-trigger{width:24px!important;height:24px!important;min-width:24px!important;min-height:24px!important;padding:0!important;display:inline-grid!important;place-items:center!important;line-height:1!important}
.pem-help-trigger svg,.metric-help svg{width:13px!important;height:13px!important;display:block!important}
.pem-inline-help{display:inline-flex!important;align-items:center!important;gap:6px!important}

/* MOC/help chips occupy their own slot and cannot concatenate with adjacent words. */
.pem-moc-inline{display:inline-flex!important;align-items:center!important;gap:8px!important;flex-wrap:wrap!important}
.pem-moc-inline>.badge,.pem-moc-inline>.chip,.pem-moc-inline>[title]{flex:0 0 auto!important;margin:0!important}
.badge+.pem-help-trigger,.badge2+.pem-help-trigger,.chip+.pem-help-trigger{margin-left:8px!important}

/* Invalid/disabled states have one clear action and no contradictory affordance. */
.pem-invalid-context,.pem-disabled-state,.pem-commercial-empty{border:1px solid #d8e3ef;border-radius:16px;background:#fff;padding:26px;box-shadow:0 1px 2px rgba(15,45,85,.04);text-align:left}
.pem-disabled-state,.pem-commercial-empty{text-align:center;max-width:760px;margin:18px auto}
.pem-disabled-state .pem-state-icon,.pem-commercial-empty .pem-state-icon{width:44px;height:44px;margin:0 auto 12px;border-radius:14px;display:grid;place-items:center;background:#eef5fc;color:#315f91;font-weight:900;font-size:18px}
.pem-disabled-state h2,.pem-commercial-empty h2{margin:0;color:#10233f;font-size:20px}
.pem-disabled-state p,.pem-commercial-empty p{max-width:620px;margin:8px auto 0;color:#65778d;line-height:1.5}
.pem-disabled-state .pem-state-actions,.pem-commercial-empty .pem-state-actions{display:flex;justify-content:center;gap:8px;margin-top:16px;flex-wrap:wrap}

/* EPP: hide operational UI until capability is resolved. Never expose technical capability names. */
body.pem-route-epp:not(.pem-ppe-ready):not(.pem-ppe-disabled) .grid,
body.pem-route-epp:not(.pem-ppe-ready):not(.pem-ppe-disabled) .notice,
body.pem-route-epp:not(.pem-ppe-ready):not(.pem-ppe-disabled) #status{visibility:hidden}
body.pem-route-epp.pem-ppe-disabled .grid,
body.pem-route-epp.pem-ppe-disabled .notice,
body.pem-route-epp.pem-ppe-disabled #status{display:none!important}
body.pem-route-epp .shell>.top{display:none!important}

/* Plan no longer repeats the local product strip already provided by the shell. */
body.pem-route-plan .shell>.top{display:none!important}

/* Risks/Actions and Investigations: keep contextual actions, remove duplicate product branding. */
body.pem-route-risks .shell>.top>.brand,
body.pem-route-actions .shell>.top>.brand,
body.pem-route-investigations .shell>.top>.brand{display:none!important}
body.pem-route-risks .shell>.top,
body.pem-route-actions .shell>.top,
body.pem-route-investigations .shell>.top{justify-content:flex-end!important;margin-bottom:8px!important}

/* Commercially usable empty states instead of tall blank canvases. */
.pem-empty-state,.empty.pem-commercialized{min-height:0!important;height:auto!important;padding:26px!important;border:1px dashed #cbd9e7!important;border-radius:14px!important;background:#fbfdff!important;text-align:center!important;color:#65778d!important}

/* Critical-work UAT is internal validation, never a fake commercial module. */
body.pem-internal-uat .hero{background:linear-gradient(135deg,#0f2d55,#164f82)!important;color:#fff!important}
body.pem-internal-uat .hero h1,body.pem-internal-uat .hero h2,body.pem-internal-uat .hero b{color:#fff!important}
body.pem-internal-uat .hero p,body.pem-internal-uat .hero .eyebrow{color:#e6f0fa!important}
body.pem-internal-uat .pem-global-link.active{background:transparent!important;color:inherit!important}
body.pem-internal-uat .pem-global-context>span:first-child{font-size:0}
body.pem-internal-uat .pem-global-context>span:first-child::after{content:'Validación interna · Trabajos críticos';font-size:12px}

/* Tables/cards: protect horizontal geometry and avoid “compressed desktop” mobile. */
.pem-product-content,.pem-product-main,.shell,.view,.card{min-width:0}
img,svg,canvas{max-width:100%}

/* Accessible focus and touch geometry remain visible above page-local CSS. */
:where(a,button,input,select,textarea,[tabindex]):focus-visible{outline:3px solid rgba(31,111,199,.34)!important;outline-offset:2px!important}
button,.btn,a.btn{min-height:38px}

@media(max-width:900px){
  .pem-page-header{gap:12px;flex-direction:column;margin-bottom:14px}
  .pem-page-header-actions{width:100%;justify-content:flex-start}
  .pem-global-context{display:flex!important;max-width:min(42vw,210px)!important;min-width:0!important}
  .pem-global-context .pem-v2-edition{display:none!important}
  .pem-global-context>span:first-child{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  body:not(.pem-title-scrolled):not(.pem-no-page-title) .pem-global-context{width:0!important;max-width:0!important;overflow:hidden!important;margin:0!important}
  .pem-spa-context{max-width:min(38vw,190px)}
  body:not(.pem-title-scrolled):not(.pem-no-page-title) .pem-spa-context{display:none!important}
  .pem-form-actions,.pem-action-bar,.pem-commercial-actions{justify-content:stretch!important}
  .pem-form-actions .btn,.pem-action-bar .btn,.pem-commercial-actions .btn{flex:1 1 180px}
}

@media(max-width:620px){
  .pem-page-header h1{font-size:24px!important}
  .pem-page-header p{font-size:13px!important}
  .pem-page-header-actions{display:grid;grid-template-columns:1fr;gap:7px}
  .pem-page-header-actions .btn,.pem-page-header-actions a.btn{width:100%!important}
  form .full.pem-commercial-submit{display:grid!important;grid-template-columns:1fr!important}
  form .full.pem-commercial-submit .btn{width:100%!important}
  form>button.btn,form>.btn[type="submit"],form>button.btn.span2,form>.btn[type="submit"].span2{width:100%!important;justify-self:stretch!important}
  .pem-disabled-state,.pem-commercial-empty,.pem-invalid-context{padding:20px 16px}
  .pem-global-context{max-width:42vw!important}
  .pem-spa-context{max-width:40vw;font-size:11px}
  .pem-global-back,.pem-root-back{min-height:42px!important;padding:0 6px!important;margin-right:4px!important}
}