/* =============================================================================
   EL CAMIÓN POR DENTRO
   Tres pestañas: el equipo, las cámaras y la salida. Comparte carcasa con el
   expediente a propósito — es el mismo mundo de metal negro y verde ácido.
============================================================================= */
.inv-solapas {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 6px;
  margin: 0 0 14px;
}
.inv-solapa {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 11px 10px;
  border: 0;
  border-radius: 10px;
  background: rgba(157, 107, 255, .1);
  box-shadow: inset 0 0 0 1px rgba(157, 107, 255, .22);
  color: var(--ink-dim);
  font-family: var(--face-pixel);
  font-size: 20px;
  letter-spacing: .05em;
  cursor: pointer;
  transition: background 130ms ease, color 130ms ease;
}
.inv-solapa:hover { background: rgba(157, 107, 255, .2); color: var(--ink); }
.inv-solapa.on {
  background: rgba(168, 244, 37, .14);
  box-shadow: inset 0 0 0 1px rgba(168, 244, 37, .6);
  color: var(--lime);
}
.inv-solapa-glifo { font-size: 18px; opacity: .85; }
.inv-cuerpo { display: grid; gap: 12px; }

/* --- Las cámaras ------------------------------------------------------------ */
.cam-marco { display: grid; grid-template-columns: 190px 1fr; gap: 12px; }
.cam-lista { display: grid; gap: 6px; align-content: start; }
.cam-boton {
  display: grid;
  gap: 2px;
  padding: 10px 12px;
  border: 0;
  border-radius: 9px;
  background: rgba(157, 107, 255, .1);
  box-shadow: inset 0 0 0 1px rgba(157, 107, 255, .22);
  color: var(--ink-dim);
  text-align: left;
  cursor: pointer;
}
.cam-boton strong { font-family: var(--face-pixel); font-size: 20px; letter-spacing: .06em; }
.cam-boton:hover { background: rgba(157, 107, 255, .2); }
.cam-boton.on {
  background: rgba(255, 79, 216, .12);
  box-shadow: inset 0 0 0 1px rgba(255, 79, 216, .6);
  color: var(--ink);
}

/* La pantalla. El hueco va TRANSPARENTE: por ahí se ve el lienzo del juego,
   donde una segunda cámara de Phaser dibuja lo que enfoca el trasto. Aquí solo
   está el marco, el rótulo y las rayas de tubo. */
.cam-pantalla {
  position: relative;
  min-height: 260px;
  border-radius: 12px;
  box-shadow: inset 0 0 0 2px rgba(255, 79, 216, .3), inset 0 0 40px rgba(0, 0, 0, .6);
  overflow: hidden;
}
/* El hueco: sin fondo NINGUNO. Por aquí se ve el lienzo del juego a través del
   recorte que el menú se hace a sí mismo (ver abrirVentana en inventario.js). */
.cam-hueco { position: absolute; inset: 8px; border-radius: 8px; background: none; }
.cam-pantalla::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(
    to bottom,
    rgba(255, 255, 255, .05) 0 1px,
    transparent 1px 3px);
}
.cam-monitor { display: grid; gap: 6px; min-width: 0; }
/* La barra del monitor va fuera de la pantalla: dentro caería en el recorte por
   el que se ve el juego y se la llevaría por delante. */
.cam-barra {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 4px;
}
.cam-rotulo {
  font-family: var(--face-pixel);
  font-size: 19px;
  letter-spacing: .1em;
  color: rgba(255, 255, 255, .85);
  text-shadow: 0 2px 0 rgba(0, 0, 0, .7);
}
.cam-rec {
  font-family: var(--face-pixel);
  font-size: 17px;
  color: #ff4d6d;
  text-shadow: 0 0 12px rgba(255, 77, 109, .8);
  animation: ex-late 1.4s ease-in-out infinite;
}

/* --- La salida -------------------------------------------------------------- */
.sal-sospechosos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(124px, 1fr));
  gap: 8px;
}
.sal-pie { display: grid; gap: 6px; justify-items: center; margin-top: 6px; }

/* =============================================================================
   EL ACTA DE LA NOCHE
============================================================================= */
.res {
  position: fixed;
  inset: 0;
  z-index: 64;
  display: grid;
  place-items: center;
  padding: 20px;
  background: radial-gradient(130% 100% at 50% 40%, rgba(24, 8, 46, .8), rgba(2, 1, 6, .97));
  backdrop-filter: blur(6px);
  animation: ex-entra 220ms var(--ease-out);
}
.res[hidden] { display: none; }

.res-caja {
  width: min(960px, 96vw);
  max-height: 92vh;
  display: grid;
  gap: 14px;
  align-content: start;
  padding: 20px;
  overflow-y: auto;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(30, 20, 54, .96), rgba(10, 7, 20, .98));
  box-shadow: inset 0 0 0 2px rgba(157, 107, 255, .3), 0 30px 80px rgba(0, 0, 0, .7);
  animation: ex-sube 280ms var(--ease-pop);
}

/* El veredicto: lo primero, lo más grande y lo único con color propio. */
.res-veredicto {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 22px;
  align-items: center;
  padding: 20px;
  border-radius: 14px;
}
.res-veredicto.bien {
  background: linear-gradient(100deg, rgba(168, 244, 37, .18), transparent 65%), rgba(18, 12, 34, .7);
  box-shadow: inset 0 0 0 1px rgba(168, 244, 37, .45);
}
.res-veredicto.mal {
  background: linear-gradient(100deg, rgba(255, 85, 102, .16), transparent 65%), rgba(18, 12, 34, .7);
  box-shadow: inset 0 0 0 1px rgba(255, 85, 102, .4);
}
.res-cara {
  display: grid;
  place-items: center;
  width: 156px;
  height: 156px;
  border-radius: 14px;
  background: rgba(0, 0, 0, .35);
  box-shadow: inset 0 0 0 1px rgba(157, 107, 255, .28);
}
.res-texto { display: grid; gap: 6px; }
.res-titular {
  margin: 0;
  font-family: var(--face-pixel);
  font-size: clamp(38px, 5vw, 62px);
  line-height: 1;
  letter-spacing: .06em;
}
.res-veredicto.bien .res-titular { color: var(--lime); text-shadow: 0 0 34px rgba(168, 244, 37, .35); }
.res-veredicto.mal .res-titular { color: var(--danger); text-shadow: 0 0 34px rgba(255, 85, 102, .3); }
.res-quien { margin: 0; font-family: var(--face-pixel); font-size: 24px; color: var(--ink); }

.res-objetivos { display: grid; gap: 6px; }
.res-objetivo {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 9px;
  background: rgba(0, 0, 0, .26);
  color: var(--ink-faint);
  font-size: 16px;
}
.res-objetivo.hecho { color: var(--ink); box-shadow: inset 0 0 0 1px rgba(168, 244, 37, .35); }
.res-marca {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 7px;
  background: rgba(255, 85, 102, .16);
  color: var(--danger);
  font-size: 15px;
}
.res-objetivo.hecho .res-marca { background: rgba(168, 244, 37, .18); color: var(--lime); }

/* El porcentaje de un objetivo de propina: verde si se cumplió, apagado si no.
   Tachado sería cruel de más; apagado ya dice bastante. */
.res-plus {
  margin-left: auto;
  color: var(--lime);
  font-family: var(--face-pixel);
  font-size: 14px;
}
.res-plus.fallado { color: rgba(255, 255, 255, .3); }
.ex-h3--sub { margin-top: 14px; opacity: .75; font-size: 17px; }

.res-filas { display: grid; gap: 12px; }
.res-fila { display: grid; gap: 5px; }
/* Las chapas de pruebas: en fila, con aire y saltando de línea cuando no caben.
   Sin esto salían todas pegadas y se leían como una sola palabra kilométrica:
   «Proyector D.O.T.S.Escritura fantasmaOrbes espectrales». */
.ex-chapas { display: flex; flex-wrap: wrap; gap: 6px; }
.ex-chapa {
  padding: 4px 9px;
  border-radius: 999px;
  background: rgba(168, 244, 37, .14);
  color: var(--lime);
  font-family: var(--face-pixel);
  font-size: 13px;
  letter-spacing: .03em;
}
/* La prueba que dejaba y NO conseguiste: tachada. Es la parte que enseña. */
.ex-chapa.perdida {
  background: rgba(255, 85, 102, .12);
  color: var(--danger);
  text-decoration: line-through;
}

.res-paga {
  font-family: var(--face-pixel);
  font-size: 30px;
  letter-spacing: .04em;
  color: var(--lime);
}
.res-equipo { display: grid; gap: 4px; }
.res-tio {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 12px;
  align-items: baseline;
  padding: 8px 10px;
  border-radius: 7px;
  background: rgba(157, 107, 255, .07);
}
.res-tio strong { font-family: var(--face-pixel); font-size: 20px; }
.res-tio.muerto { opacity: .6; }
.res-tio.muerto strong { color: var(--danger); }
.res-cobro { font-family: var(--face-pixel); font-size: 20px; color: var(--lime); }

.res-pie { display: grid; justify-items: center; padding-top: 4px; }

@media (max-width: 760px) {
  .cam-marco { grid-template-columns: 1fr; }
  .res-veredicto { grid-template-columns: 1fr; justify-items: center; text-align: center; }
}

/* Lo que se cuenta de él: la cosa que hace uno y no hacen los demás. En un tono
   más apagado que la manía a propósito — la manía es un hecho, esto es un
   rumor: no pasa todas las noches y no descarta a nadie por sí solo. */
.ex-gesto { color: var(--ink-dim); font-style: italic; }

/* Lo que le saca de quicio: hasta tres cosas, en lista. Saberlas cambia cómo se
   juega la noche, así que van con el mismo peso que la manía y no de adorno. */
.ex-manias {
  margin: 4px 0 0;
  padding: 0 0 0 16px;
  display: grid;
  gap: 4px;
  font-family: var(--face-ui);
  font-size: var(--t-small);
  line-height: 1.5;
  color: var(--ink-dim);
}