/* portal.css — estilos utilitarios y prioridad del header del portal */

/* ===== Variables por defecto ===== */
:root{
  /* Offset que empuja el contenido debajo del header del portal.
     portal.js actualizará este valor dinámicamente según la altura real */
  --header-offset: 192px;     /* ~2" por defecto */
  --header-z: 99999;          /* prioridad del header por encima del contenido */
}

/* Empuja el contenido para no quedar debajo del header */
body{
  padding-top: calc(32px + var(--header-offset));
}

/* ===== Header al frente ===== */
.portal-header-front{
  position: relative !important;
  z-index: var(--header-z) !important;
  pointer-events: auto !important;
}

/* También intenta cubrir nombres comunes si no puedes añadir la clase */
:where(header, .header, #header, .site-header, .app-header, .navbar, .topbar){
  position: relative;
  z-index: var(--header-z);
  background: #fff;
}

/* Asegura que el contenido de aplicaciones quede por debajo */
:where(main, .wrap, .card){
  position: relative;
  z-index: 1;
}

/* ===== Header PSC construido por portal.js (sticky + sombra) ===== */
.psc-header{
  position: sticky;
  top: 0;
  z-index: var(--header-z);
  background: #fff;
  box-shadow: 0 6px 18px rgba(0,0,0,.06);
}
.psc-header__inner{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 14px; }
.psc-brand{ display:flex; align-items:center; gap:10px; text-decoration:none; color:#111; font-weight:700 }
.psc-brand img{ width:40px; height:auto }
.psc-nav{ display:flex; gap:14px; }
.psc-nav a{ text-decoration:none; color:#111; font-weight:600; opacity:.9 }
.psc-nav a[aria-current="page"]{ opacity:1; text-decoration:underline }
.psc-burger{ display:none; background:#fff; border:1px solid #e5e5ea; border-radius:10px; width:40px; height:36px; cursor:pointer }
.psc-right{ display:flex; gap:10px; align-items:center }
.psc-session{ font-size:12px; color:#555 }
.psc-logout{ background:#fff; border:1px solid #e5e5ea; border-radius:10px; padding:8px 10px; cursor:pointer; font-weight:600 }
.psc-logout:hover{ box-shadow:0 6px 18px rgba(0,0,0,.06) }

/* Navegación responsive */
@media (max-width: 800px){
  .psc-burger{ display:inline-flex; align-items:center; justify-content:center }
  .psc-nav{ display:none; position:absolute; left:0; right:0; top:100%; background:#fff; padding:10px 14px; border-bottom:1px solid #e5e5ea; }
  .psc-nav.is-open{ display:flex; flex-direction:column; }
}

/* ===== Utilidades que faltaban en algunos HTML ===== */
.small{ font-size: 12px; line-height: 1.2; }
.mono{ font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace; }
.muted{ color: #6c6d75; }
.hidden{ display: none !important; }

/* Accesibilidad en focus */
:focus-visible{
  outline: 3px solid rgba(0,122,255,.35);
  outline-offset: 2px;
}

/* Tablas responsivas */
.table-scroll{ overflow:auto; -webkit-overflow-scrolling: touch; }

/* Pequeño refinamiento en móviles */
@media (max-width: 640px){
  body{ padding-top: calc(18px + var(--header-offset)); }
}