/* Capa shell: «Ver como otro usuario» (Phase 8). Dueño: 08-02.
   Píldora «Viendo el panel como …» y selector «Ver como…» de la barra superior (cabecera del shell)
   y el formulario «Abrir en mi vista» de la página de error. Solo tokens, ningún literal de color:
   la píldora usa los de aviso (--aviso-fondo/-tx/-borde, AA ya medido en tokens.css). Objetivos
   táctiles de al menos 44 px. El selector es un <details> nativo: sin JavaScript (CSP estricta).
   El foco de la barra lo da .topbar :focus-visible (shell.css); el del 403, la regla de abajo. */
@layer shell{
  /* ── Píldora ─────────────────────────────────────────────────────────── */
  .ver-como-pildora{display:inline-flex;align-items:center;gap:var(--esp-2);flex:0 1 auto;min-width:0;max-width:100%;box-sizing:border-box;padding:var(--esp-1) var(--esp-1) var(--esp-1) var(--esp-3);background:var(--aviso-fondo);color:var(--aviso-tx);border:1px solid var(--aviso-borde);border-radius:var(--r-pill);font-size:var(--t-base)}
  /* Un renglón con «…» al final: si no cabe, se corta primero el rol y después el nombre;
     «Viendo el panel como» queda. */
  .ver-como-texto{display:block;flex:0 1 auto;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .ver-como-nombre{font-weight:700}
  .ver-como-salir{display:flex;flex:none;margin:0}
  .ver-como-salir .btn-sec{display:inline-flex;align-items:center;justify-content:center;min-height:44px;box-sizing:border-box;padding:var(--esp-2) var(--esp-3);border-radius:var(--r-pill);white-space:nowrap}

  /* ── Selector «Ver como…» ────────────────────────────────────────────── */
  .ver-como{position:relative;flex:none}
  .ver-como-boton{display:inline-flex;align-items:center;justify-content:center;gap:var(--esp-1);min-width:44px;min-height:44px;box-sizing:border-box;padding:var(--esp-2) var(--esp-3);font-weight:700;border-radius:var(--r-md);cursor:pointer;list-style:none;white-space:nowrap;user-select:none}
  .ver-como-boton::-webkit-details-marker{display:none}
  .ver-como-boton::marker{content:""}
  .ver-como-boton:hover{background:var(--acento-suave)}
  .ver-como-chev{width:18px;height:18px;transform:rotate(90deg);transition:transform var(--transicion)}
  .ver-como[open] > .ver-como-boton .ver-como-chev{transform:rotate(-90deg)}

  /* Cerrado, el panel no tiene cajas: el <details> nativo solo salta su pintado (content-visibility)
     y el select y «Ver» seguían midiéndose como objetivos encima del contenido (08-04, tactil). */
  .ver-como:not([open]) > .ver-como-panel{display:none}
  .ver-como-panel{position:absolute;top:calc(100% + var(--esp-2));right:0;z-index:70;display:grid;gap:var(--esp-2);width:22rem;max-width:calc(100vw - 2 * var(--esp-3));box-sizing:border-box;margin:0;padding:var(--esp-4);background:var(--sup);color:var(--tx);border:1px solid var(--borde);border-radius:var(--r-lg);box-shadow:var(--sombra-2)}
  .ver-como-panel label{color:var(--tx-titulo);font-weight:700}
  .ver-como-panel select{width:100%;min-height:44px;box-sizing:border-box;min-width:0}
  .ver-como-panel button{justify-self:start;min-width:44px;min-height:44px;box-sizing:border-box}

  /* ── «Abrir en mi vista» (página de error con «ver como») ─────────────── */
  .ver-como-abrir{margin:var(--esp-3) 0}
  .ver-como-abrir button{min-width:44px;min-height:44px;box-sizing:border-box}

  .ver-como-panel :focus-visible,
  .ver-como-abrir :focus-visible{outline:var(--foco-ancho) solid var(--foco);outline-offset:var(--foco-sep)}

  /* Celular: la barra envuelve. La píldora o el selector pasan a una segunda fila a todo el ancho,
     bajo el título (en una fila con el título, «Salir» y «Ver como…» no caben a 390 px); el panel
     del selector queda entre los márgenes de la ventana, bajo la barra. El cajón móvil no cambia. */
  @media (max-width: 719.98px){
    .topbar{flex-wrap:wrap;row-gap:0}
    .ver-como-pildora,
    .ver-como{order:10;flex:1 1 100%;margin:0 0 var(--esp-2)}
    .ver-como-pildora{justify-content:space-between}
    .ver-como-panel{top:calc(100% + var(--esp-1));left:0;right:0;width:auto;max-width:none}
  }
  @media (prefers-reduced-motion: reduce){
    .ver-como-chev{transition:none}
  }
}