/* ══════════════════════════════════════════════════════════════════
   SijLista — Estilo de la lista de opciones institucional
   ────────────────────────────────────────────────────────────────────
   Solo viste la lista desplegada. La caja cerrada del <select> la sigue
   estilizando sij-select.css y conserva su tamaño y posición.

   El panel vive suelto en <body> (position:fixed) y lo coloca
   sij-lista.js, por eso aquí no se le fija ni left ni top.
   ══════════════════════════════════════════════════════════════════ */

.sjp{
  position:fixed;
  z-index:99998;                 /* por debajo de la ficha de ayuda (99999) */
  display:none;
  min-width:160px;
  max-width:min(420px, 92vw);
  overflow-y:auto;
  overscroll-behavior:contain;
  background:#fff;
  border:1px solid var(--border,#e2e8f0);
  border-radius:11px;
  box-shadow:0 4px 12px rgba(20,40,80,.10), 0 18px 40px -12px rgba(20,40,80,.28);
  padding:5px;
  font-family:'Outfit',system-ui,-apple-system,'Segoe UI',sans-serif;
}
.sjp.on{
  display:block;
  animation:sjpEntra .14s cubic-bezier(.4,0,.2,1) both;
}
@keyframes sjpEntra{from{opacity:0;transform:translateY(-5px);}to{opacity:1;transform:none;}}

.sjp-op{
  position:relative;
  display:flex;
  align-items:center;
  gap:9px;
  width:100%;
  text-align:left;
  font:inherit;
  font-size:.79rem;
  line-height:1.35;
  color:var(--text,#1a2744);
  background:none;
  border:0;
  border-radius:8px;
  padding:8px 10px;
  cursor:pointer;
}
/* Barra dorada que aparece en la opción bajo el cursor, igual que en las filas */
.sjp-op::before{
  content:"";
  position:absolute;
  left:0; top:6px; bottom:6px;
  width:3px;
  border-radius:0 3px 3px 0;
  background:var(--gold,#c9a227);
  transform:scaleY(0);
  transition:transform .16s cubic-bezier(.22,1,.36,1);
}
.sjp-op.cur{background:#f2f5f9;}
.sjp-op.cur::before{transform:scaleY(1);}
.sjp-op[aria-selected="true"]{font-weight:600;color:var(--navy,#1a2744);}
.sjp-op[aria-disabled="true"]{opacity:.45;cursor:not-allowed;}

.sjp-tx{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.sjp-tick{
  width:14px; height:14px; flex:none;
  stroke:var(--teal,#1a7a5e); stroke-width:2.4; fill:none;
  stroke-linecap:round; stroke-linejoin:round;
  opacity:0; transition:opacity .12s;
}
.sjp-op[aria-selected="true"] .sjp-tick{opacity:1;}
.sjp-vacio{padding:12px 10px;text-align:center;font-size:.78rem;color:var(--muted,#5a6a7a);}

/* Mientras su lista está abierta, la caja se realza como si tuviera el foco */
select[data-sjp-abierto]{
  border-color:var(--gold,#c9a227) !important;
  box-shadow:0 0 0 3px rgba(201,162,39,.28) !important;
}

@media (prefers-reduced-motion:reduce){
  .sjp.on{animation:none;}
  .sjp-op::before{transition:none;}
}
