/* ==========================================================================
   menu-soc.css — menú contextual con estética de terminal/SOC.
   Easter egg: aparece al hacer clic derecho (ver menu-soc.js).

   Capa independiente de cinematico.css: nada de aquí cuelga de html.js-listo,
   porque esto no es movimiento sino una función, y debe existir también con
   prefers-reduced-motion (solo se le quitan las animaciones).

   El encargo pedía «border-emerald-500/40» (Tailwind). Aquí no hay Tailwind,
   así que se traduce a su valor real: emerald-500 = #10B981 al 40 %.
   ========================================================================== */

:root{
  --soc-verde:#10B981;        /* emerald-500 */
  --soc-verde-claro:#34D399;  /* emerald-400, para texto sobre negro */
  --soc-tinta:#CFD4DC;
}

.soc{
  position:fixed; z-index:200;
  /* Ancho FIJO a propósito: con min/max el texto se reajustaba al mover el
     menú y su alto cambiaba (146 px a la izquierda, 163 a la derecha), así
     que la medida previa dejaba de valer y se salía por la esquina inferior
     derecha. Con ancho estable, una sola medición basta. */
  width:268px; max-width:calc(100vw - 20px);
  background:rgba(9,11,15,.92);
  -webkit-backdrop-filter:blur(10px) saturate(140%);
          backdrop-filter:blur(10px) saturate(140%);
  border:1px solid rgba(16,185,129,.40);
  border-radius:8px;
  box-shadow:0 18px 44px rgba(0,0,0,.55),
             inset 0 0 0 1px rgba(201,169,97,.10);  /* microborde dorado */
  font-family:var(--mono,"IBM Plex Mono",Consolas,monospace);
  font-size:11.5px; line-height:1.5; color:var(--soc-tinta);
  opacity:0; transform:translateY(-4px) scale(.985);
  transition:opacity .14s var(--e-suave,ease), transform .14s var(--e-suave,ease);
  pointer-events:none;
}
.soc[data-abierto]{opacity:1; transform:none; pointer-events:auto}

/* ---------- cabecera ---------- */
.soc-cab{
  display:flex; align-items:center; gap:9px;
  padding:9px 12px;
  border-bottom:1px solid rgba(16,185,129,.22);
  color:var(--soc-verde-claro);
  font-size:10.5px; letter-spacing:.10em;
}
.soc-punto{
  flex:0 0 auto; width:6px; height:6px; border-radius:50%;
  background:var(--soc-verde-claro);
  animation:soc-latido 1.7s ease-out infinite;
}
@keyframes soc-latido{
  0%  {box-shadow:0 0 0 0 rgba(52,211,153,.55)}
  70% {box-shadow:0 0 0 7px rgba(52,211,153,0)}
  100%{box-shadow:0 0 0 0 rgba(52,211,153,0)}
}

/* ---------- opciones ---------- */
.soc-lista{margin:0; padding:5px; list-style:none}
.soc-op{
  display:flex; align-items:baseline; gap:9px;
  width:100%; padding:8px 9px;
  font:inherit; color:inherit; text-align:left;
  background:none; border:0; border-radius:5px; cursor:pointer;
  transition:background .12s ease, color .12s ease;
}
.soc-op:hover, .soc-op:focus-visible{
  background:rgba(16,185,129,.10); color:#E8E6E1; outline:none;
}
.soc-op:focus-visible{box-shadow:inset 0 0 0 1px rgba(16,185,129,.45)}
.soc-op i{font-style:normal; color:var(--oro,#C9A961)}  /* el prompt > */

/* ---------- salida del «comando» ---------- */
.soc-salida{
  display:none; margin:0;
  padding:9px 12px 11px;
  border-top:1px solid rgba(16,185,129,.18);
}
.soc-salida[data-visible]{display:block}
.soc-salida[data-tono="ok"]{color:var(--soc-verde-claro)}
.soc-salida[data-tono="aviso"]{color:var(--oro,#C9A961)}

/* ---------- movimiento reducido: la función se queda, el adorno no ------- */
@media (prefers-reduced-motion:reduce){
  .soc{transition:none; transform:none}
  .soc[data-abierto]{transform:none}
  .soc-punto{animation:none}
  .soc-op{transition:none}
}

/* ---------- impresión ---------- */
@media print{ .soc{display:none} }