/* ================================================================
   MOTOR DE EVENTOS — index.html, editor.html y room.html
   ----------------------------------------------------------------
   Dirección de diseño: EXPEDIENTE. Un Murder Mystery no es un
   formulario, es un caso abierto sobre una mesa. Así que los paneles
   se leen como carpetas de archivo (pestaña de cabecera, filete de
   color, papel oscuro), las pistas como pruebas precintadas hasta que
   se pagan, y el desenlace como el sello de "CASO CERRADO".

   Lo que se corrigió en la pasada de pulido:
   ─ El texto iba apelmazado. Casi todo lo que se lee (bios, pistas,
     mensajes) tenía line-height por defecto y márgenes de 0.6rem
     entre bloques que no se relacionan entre sí. Ahora hay una escala
     de espaciado explícita (--ev-gap*) y el texto largo respira.
   ─ Todos los paneles eran la misma caja gris. No había forma de
     saber de un vistazo qué es información tuya, qué es pública y qué
     es el estado del caso. Ahora cada tipo tiene su color de filete.
   ─ Los <h2> no se distinguían del cuerpo salvo por la tipografía.
     Ahora llevan pestaña, filete y separación real.
   ================================================================ */

/* Escala de espaciado propia del área de eventos. Existe para que
   "más aire" sea un cambio en un sitio y no en cuarenta reglas. */
:root {
  --ev-gap-xs: 0.4rem;
  --ev-gap-sm: 0.7rem;
  --ev-gap:    1.1rem;
  --ev-gap-lg: 1.8rem;
  --ev-gap-xl: 2.8rem;

  /* Colores de expediente */
  --ev-papel:     rgba(15, 9, 24, 0.82);
  --ev-papel-alt: rgba(255, 255, 255, 0.035);
  --ev-linea:     rgba(255, 255, 255, 0.1);
  --ev-sangre:    #ff6b8f;
  --ev-oro:       #ffd98f;
  --ev-verde:     #8fffb0;

  /* Alto de línea del texto que se LEE (bios, pistas, mensajes).
     El resto de la web usa 1.5; aquí hay párrafos largos de lore y
     1.7 es la diferencia entre leerlos y escanearlos. */
  --ev-lectura: 1.72;
}

.ev-main {
  position: relative;
  z-index: 1;
  max-width: 1240px;
  margin: 0 auto;
  padding: calc(var(--nav-height, 84px) + 2.2rem) 1.3rem 5rem;
}

/* ================================================================
   Cabecera
   ================================================================ */
.ev-hero { text-align: center; margin-bottom: var(--ev-gap-xl); }

.ev-hero-title {
  font-family: var(--font-heading);
  font-size: clamp(1.9rem, 6vw, 3.2rem);
  letter-spacing: 0.08em;
  margin: 0.4rem 0 0.8rem;
  background: var(--pl-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.ev-hero-sub {
  color: var(--pl-muted);
  max-width: 48rem;
  margin: 0 auto;
  line-height: var(--ev-lectura);
}

.ev-loading, .ev-error, .ev-empty {
  text-align: center;
  color: var(--pl-muted);
  padding: 2.6rem 1rem;
  line-height: var(--ev-lectura);
}
.ev-error { color: var(--ev-sangre); }

/* Herramientas de moderador */
.ev-modtools {
  display: flex;
  gap: var(--ev-gap-sm);
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: var(--ev-gap-lg);
}

/* ================================================================
   Galería de eventos
   ================================================================ */
.ev-group { margin-bottom: var(--ev-gap-xl); }

.ev-group-title {
  font-family: var(--font-heading);
  font-size: 1rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--pl-cyan);
  margin: 0 0 var(--ev-gap);
  display: flex;
  align-items: center;
  gap: var(--ev-gap-sm);
}
.ev-group-title::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--ev-linea);
}

.ev-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr));
  gap: var(--ev-gap);
}

.ev-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--ev-papel);
  border: 1px solid var(--ev-linea);
  border-radius: 1rem;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}
.ev-card:hover, .ev-card:focus-visible {
  transform: translateY(-3px);
  border-color: rgba(141, 238, 255, 0.55);
  box-shadow: 0 18px 40px -22px rgba(141, 238, 255, 0.6);
}

.ev-card-cover {
  aspect-ratio: 16 / 9;
  background: var(--pl-grad-soft);
  background-size: cover;
  background-position: center;
  display: grid;
  place-items: center;
  font-size: 2.6rem;
}

.ev-card-body {
  padding: var(--ev-gap) 1.15rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: var(--ev-gap-sm);
  flex: 1;
}

.ev-card-title {
  font-family: var(--font-heading);
  font-size: 1.02rem;
  line-height: 1.35;
  margin: 0;
  color: var(--pl-text);
}

.ev-card-desc {
  font-size: 0.86rem;
  color: var(--pl-muted);
  line-height: var(--ev-lectura);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.ev-card-foot {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ev-gap-sm);
  font-size: 0.76rem;
  color: var(--pl-muted);
  padding-top: var(--ev-gap-xs);
  border-top: 1px solid var(--ev-linea);
}

/* Insignia de estado */
.ev-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.22rem 0.65rem;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  border: 1px solid var(--ev-linea);
}
.ev-badge[data-estado="activo"] {
  color: var(--ev-verde);
  border-color: rgba(143, 255, 176, 0.5);
  background: rgba(143, 255, 176, 0.08);
}
.ev-badge[data-estado="programado"] {
  color: var(--pl-cyan);
  border-color: rgba(141, 238, 255, 0.5);
  background: rgba(141, 238, 255, 0.07);
}
.ev-badge[data-estado="finalizado"] { color: var(--pl-muted); }
.ev-badge[data-estado="borrador"] {
  color: var(--ev-oro);
  border-color: rgba(255, 217, 143, 0.5);
  background: rgba(255, 217, 143, 0.07);
}

/* El "en marcha" late: en una lista de eventos es lo único que pide
   que entres AHORA, y merece distinguirse sin leer la etiqueta. */
.ev-badge[data-estado="activo"]::before {
  content: "";
  width: 0.42rem;
  height: 0.42rem;
  border-radius: 50%;
  background: var(--ev-verde);
  box-shadow: 0 0 0 0 rgba(143, 255, 176, 0.7);
  animation: evLatido 2s ease-out infinite;
}
@keyframes evLatido {
  0%   { box-shadow: 0 0 0 0 rgba(143, 255, 176, 0.6); }
  70%  { box-shadow: 0 0 0 0.5rem rgba(143, 255, 176, 0); }
  100% { box-shadow: 0 0 0 0 rgba(143, 255, 176, 0); }
}

/* ================================================================
   Paneles — la carpeta del expediente
   ================================================================ */
.ev-panel {
  position: relative;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.025), transparent 6rem),
    var(--ev-papel);
  border: 1px solid var(--ev-linea);
  border-radius: 1rem;
  padding: var(--ev-gap-lg) 1.5rem 1.6rem;
  margin-bottom: var(--ev-gap);
}

/* Filete superior: la "pestaña" de la carpeta. Cada panel puede
   cambiarlo con --ev-filete para decir de qué va sin leer el título. */
.ev-panel::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  border-radius: 1rem 1rem 0 0;
  background: var(--ev-filete, var(--pl-grad));
  opacity: 0.75;
}

.ev-panel h2 {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--font-heading);
  font-size: 0.94rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--pl-text);
  /* Antes: 0 0 1rem. El título quedaba pegado al primer párrafo y
     todo el panel se leía como un bloque único. */
  margin: 0 0 var(--ev-gap);
  padding-bottom: var(--ev-gap-sm);
  border-bottom: 1px solid var(--ev-linea);
}

.ev-panel h3 {
  font-family: var(--font-heading);
  font-size: 0.8rem;
  letter-spacing: 0.07em;
  color: var(--pl-soft);
  margin: var(--ev-gap-lg) 0 var(--ev-gap-sm);
}
.ev-panel h3:first-child { margin-top: 0; }

/* Todo párrafo suelto dentro de un panel respira igual */
.ev-panel > p { line-height: var(--ev-lectura); margin: 0 0 var(--ev-gap-sm); }
.ev-panel > p:last-child { margin-bottom: 0; }

/* Una invitación pendiente no es un panel más: es lo único que tienes
   que resolver antes de poder jugar. Se distingue por el filete. */
#ev-invitacion { --ev-filete: linear-gradient(90deg, #ffd98f, #ff6b8f); }
#ev-invitacion h2 { color: var(--ev-oro); }

/* ================================================================
   Formularios (creador y modales)
   ================================================================ */
.ev-field { margin-bottom: var(--ev-gap); }
.ev-field label {
  display: block;
  font-size: 0.78rem;
  font-weight: 800;
  color: var(--pl-muted);
  margin-bottom: var(--ev-gap-xs);
  letter-spacing: 0.03em;
}
.ev-field input,
.ev-field select,
.ev-field textarea {
  width: 100%;
  padding: 0.68rem 0.8rem;
  background: var(--ev-papel-alt);
  border: 1px solid var(--ev-linea);
  border-radius: 0.6rem;
  color: var(--pl-text);
  font: inherit;
  font-size: 0.92rem;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.ev-field textarea {
  min-height: 6.5rem;
  resize: vertical;
  line-height: var(--ev-lectura);
}
.ev-field input:focus, .ev-field select:focus, .ev-field textarea:focus {
  outline: none;
  border-color: var(--pl-cyan);
  background: rgba(141, 238, 255, 0.05);
}
.ev-field-hint {
  font-size: 0.76rem;
  color: var(--pl-muted);
  margin: var(--ev-gap-xs) 0 0;
  opacity: 0.9;
  line-height: 1.6;
}
.ev-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
  gap: var(--ev-gap);
}

.ev-check {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
  color: var(--pl-soft);
  cursor: pointer;
  margin: 0 1.2rem var(--ev-gap-xs) 0;
}
.ev-check input { width: auto; accent-color: var(--pl-lilac); }

/* ================================================================
   Botones
   ================================================================ */
.ev-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.6rem 1.1rem;
  border-radius: 0.65rem;
  border: 1px solid var(--ev-linea);
  background: var(--ev-papel-alt);
  color: var(--pl-text);
  font: inherit;
  font-weight: 700;
  font-size: 0.86rem;
  cursor: pointer;
  transition: border-color 0.15s ease, transform 0.15s ease, background 0.15s ease;
}
.ev-btn:hover:not(:disabled) {
  border-color: var(--pl-cyan);
  background: rgba(141, 238, 255, 0.08);
  transform: translateY(-1px);
}
.ev-btn:focus-visible { outline: 2px solid var(--pl-cyan); outline-offset: 2px; }
.ev-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.ev-btn-primary {
  background: var(--pl-grad);
  color: #16091f;
  border-color: transparent;
  font-weight: 800;
}
.ev-btn-primary:hover:not(:disabled) { background: var(--pl-grad); filter: brightness(1.1); }
.ev-btn-danger {
  color: var(--ev-sangre);
  border-color: rgba(255, 107, 143, 0.45);
  background: rgba(255, 107, 143, 0.07);
}
.ev-btn-danger:hover:not(:disabled) {
  border-color: var(--ev-sangre);
  background: rgba(255, 107, 143, 0.15);
}

.ev-actions {
  display: flex;
  gap: var(--ev-gap-sm);
  flex-wrap: wrap;
  align-items: center;
  margin-top: var(--ev-gap);
}
.ev-msg { font-size: 0.83rem; min-height: 1.2em; margin: var(--ev-gap-sm) 0 0; line-height: 1.6; }
.ev-msg.is-err { color: var(--ev-sangre); }
.ev-msg.is-ok  { color: var(--ev-verde); }

/* ================================================================
   Pasos del creador
   ================================================================ */
.ev-steps {
  display: flex;
  gap: var(--ev-gap-xs);
  flex-wrap: wrap;
  margin-bottom: var(--ev-gap-lg);
}
.ev-step {
  flex: 1 1 8rem;
  padding: 0.6rem 0.75rem;
  border-radius: 0.65rem;
  border: 1px solid var(--ev-linea);
  background: transparent;
  color: var(--pl-muted);
  font: inherit;
  font-size: 0.79rem;
  font-weight: 700;
  cursor: pointer;
  text-align: center;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}
.ev-step:hover { color: var(--pl-soft); border-color: rgba(141, 238, 255, 0.35); }
.ev-step.is-active {
  border-color: var(--pl-cyan);
  color: var(--pl-text);
  background: rgba(141, 238, 255, 0.1);
}

/* ================================================================
   Listas editables (personajes, pistas, reparto)
   ================================================================ */
.ev-item {
  border: 1px solid var(--ev-linea);
  border-radius: 0.85rem;
  padding: var(--ev-gap) 1.15rem 1.15rem;
  margin-bottom: var(--ev-gap-sm);
  background: var(--ev-papel-alt);
}
.ev-item-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ev-gap-sm);
  /* Antes 0.7rem: el nombre y su contenido se tocaban */
  margin-bottom: var(--ev-gap-sm);
  flex-wrap: wrap;
}
.ev-item-name {
  font-family: var(--font-heading);
  font-weight: 800;
  color: var(--pl-text);
  font-size: 0.92rem;
  letter-spacing: 0.03em;
}

.ev-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  padding: 0.18rem 0.6rem;
  border-radius: 999px;
  border: 1px solid var(--ev-linea);
  color: var(--pl-muted);
  white-space: nowrap;
}
.ev-tag-asesino {
  color: var(--ev-sangre);
  border-color: rgba(255, 107, 143, 0.5);
  background: rgba(255, 107, 143, 0.1);
}
.ev-tag-detective {
  color: var(--pl-cyan);
  border-color: rgba(141, 238, 255, 0.5);
  background: rgba(141, 238, 255, 0.09);
}

/* ================================================================
   SALA
   ================================================================ */
.ev-room {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: var(--ev-gap);
  align-items: start;
}
@media (max-width: 880px) {
  .ev-room { grid-template-columns: 1fr; }
}

/* La columna del chat se queda a la vista mientras lees el expediente:
   en un evento en directo, perder el chat de vista al bajar a las
   pistas es perder la conversación. */
@media (min-width: 881px) {
  .ev-room-lado {
    position: sticky;
    top: calc(var(--nav-height, 84px) + 1rem);
  }
}

/* Cabecera de la sala: título, estado y reloj */
.ev-sala-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--ev-gap);
  flex-wrap: wrap;
  margin-bottom: var(--ev-gap-lg);
  padding-bottom: var(--ev-gap);
  border-bottom: 1px solid var(--ev-linea);
}
/* Más pequeño que el de la galería: aquí el título ya no es la
   portada de la sección, es la etiqueta del caso que estás jugando.
   (Este tamaño venía de un `style=` incrustado en room.html.) */
.ev-sala-head .ev-hero-title {
  font-size: clamp(1.4rem, 4vw, 2.4rem);
  margin: 0 0 0.6rem;
  text-align: left;
}
.ev-sala-meta {
  display: flex;
  align-items: center;
  gap: var(--ev-gap-sm);
  flex-wrap: wrap;
  font-size: 0.82rem;
  color: var(--pl-muted);
  line-height: 1.6;
}
.ev-sala-desc {
  margin: var(--ev-gap-sm) 0 0;
  max-width: 62ch;
  color: var(--pl-soft);
  line-height: var(--ev-lectura);
  font-size: 0.9rem;
}

/* Reloj del caso. Es solo presión psicológica: cuenta atrás para
   empezar, o tiempo transcurrido si ya está en marcha. */
.ev-reloj {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.15rem;
  padding: 0.6rem 1rem;
  border-radius: 0.75rem;
  border: 1px solid var(--ev-linea);
  background: var(--ev-papel-alt);
  flex: none;
}
.ev-reloj-label {
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--pl-muted);
}
.ev-reloj-valor {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: 900;
  color: var(--pl-cyan);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
}
.ev-reloj.es-vivo .ev-reloj-valor { color: var(--ev-verde); }
.ev-reloj.es-fin .ev-reloj-valor  { color: var(--pl-muted); }

/* ── Puntos del detective ─────────────────────────────────────── */
.ev-puntos {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.5rem 0.95rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 217, 143, 0.35);
  background: rgba(255, 217, 143, 0.09);
  font-family: var(--font-heading);
  font-size: 1.05rem;
  font-weight: 900;
  color: var(--ev-oro);
  font-variant-numeric: tabular-nums;
  margin: 0;
}

/* Separación entre los bloques que event-room.js apila dentro del
   mismo panel (ficha, cuaderno, pistas). Antes cada uno traía su
   propio `style="margin-top"` incrustado en el JS. */
.ev-bloque { margin-top: var(--ev-gap-xl); }
.ev-bloque:first-child { margin-top: 0; }

/* ================================================================
   Pistas — pruebas del expediente
   ================================================================ */
.ev-fase {
  display: flex;
  align-items: center;
  gap: var(--ev-gap-sm);
  font-family: var(--font-heading);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--pl-muted);
  margin: var(--ev-gap-lg) 0 var(--ev-gap-sm);
}
.ev-fase:first-child { margin-top: 0; }
.ev-fase::after {
  content: "";
  flex: 1;
  height: 1px;
  background: repeating-linear-gradient(
    90deg, var(--ev-linea) 0 6px, transparent 6px 12px);
}

.ev-clue {
  position: relative;
  border: 1px solid var(--ev-linea);
  border-radius: 0.85rem;
  /* Antes 0.85rem/1rem: título y texto se tocaban dentro de la caja */
  padding: var(--ev-gap) 1.15rem 1.15rem;
  margin-bottom: var(--ev-gap-sm);
  background: var(--ev-papel-alt);
  overflow: hidden;
  transition: border-color 0.18s ease, background 0.18s ease;
}

/* Una pista abierta es una prueba admitida: filete cian a la
   izquierda. Una cerrada es un sobre precintado. */
.ev-clue::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 2px;
  background: var(--pl-cyan);
  opacity: 0.55;
}
.ev-clue.is-locked::before { background: var(--pl-muted); opacity: 0.28; }
.ev-clue.is-locked { background: rgba(255, 255, 255, 0.018); }
.ev-clue:not(.is-locked):hover { border-color: rgba(141, 238, 255, 0.35); }

.ev-clue-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ev-gap-sm);
  flex-wrap: wrap;
}
.ev-clue-title {
  font-weight: 800;
  font-size: 0.93rem;
  color: var(--pl-text);
  letter-spacing: 0.02em;
}
.ev-clue.is-locked .ev-clue-title { color: var(--pl-muted); }

.ev-clue-text {
  /* Antes 0.6rem de margen y 1.55 de alto. Estas son las líneas que
     más se leen de toda la sala: son el contenido del misterio. */
  margin: var(--ev-gap-sm) 0 0;
  font-size: 0.9rem;
  line-height: var(--ev-lectura);
  color: var(--pl-soft);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.ev-clue.is-locked .ev-clue-text { color: var(--pl-muted); opacity: 0.75; }

.ev-clue-cost { font-size: 0.76rem; color: var(--pl-muted); white-space: nowrap; }

/* ================================================================
   Ficha secreta — lo único que solo ves tú
   ================================================================ */
.ev-ficha-secreta {
  position: relative;
  border: 1px solid rgba(229, 89, 177, 0.4);
  border-radius: 0.9rem;
  padding: var(--ev-gap-lg) 1.4rem 1.5rem;
  background:
    radial-gradient(120% 100% at 0% 0%, rgba(229, 89, 177, 0.14), transparent 60%),
    var(--ev-papel-alt);
}
.ev-ficha-secreta h3 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-heading);
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  /* Antes 0 0 0.6rem para todos: los bloques de bio, secreto y
     objetivos quedaban indistinguibles unos de otros. */
  margin: var(--ev-gap-lg) 0 var(--ev-gap-sm);
  color: var(--pl-pink);
}
.ev-ficha-secreta h3:first-child { margin-top: 0; }
.ev-ficha-secreta p {
  font-size: 0.9rem;
  line-height: var(--ev-lectura);
  color: var(--pl-soft);
  white-space: pre-wrap;
  margin: 0;
}
.ev-ficha-secreta p + h3 { border-top: 1px dashed rgba(229, 89, 177, 0.22); padding-top: var(--ev-gap); }

/* ================================================================
   Desenlace — el sello de caso cerrado
   ================================================================ */
.ev-desenlace {
  position: relative;
  border: 1px solid rgba(255, 107, 143, 0.35);
  border-radius: 0.9rem;
  padding: var(--ev-gap-lg) 1.4rem 1.5rem;
  margin-bottom: var(--ev-gap-lg);
  background:
    radial-gradient(120% 120% at 100% 0%, rgba(255, 107, 143, 0.13), transparent 62%),
    var(--ev-papel-alt);
  text-align: center;
}
.ev-desenlace-sello {
  display: inline-block;
  padding: 0.3rem 1rem;
  border: 2px solid rgba(255, 107, 143, 0.5);
  border-radius: 0.4rem;
  font-family: var(--font-heading);
  font-size: 0.7rem;
  font-weight: 900;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ev-sangre);
  transform: rotate(-2.5deg);
  margin-bottom: var(--ev-gap);
}
.ev-desenlace-quien {
  font-family: var(--font-heading);
  font-size: clamp(1.1rem, 3.4vw, 1.7rem);
  font-weight: 900;
  line-height: 1.3;
  margin: 0 0 var(--ev-gap-sm);
  color: var(--pl-text);
}
.ev-desenlace-quien b { color: var(--ev-sangre); }
.ev-desenlace-veredicto {
  font-size: 0.94rem;
  line-height: var(--ev-lectura);
  color: var(--pl-soft);
  margin: 0 auto var(--ev-gap-sm);
  max-width: 46ch;
}
.ev-desenlace .ev-field-hint { margin-top: var(--ev-gap); }

/* ================================================================
   Reparto
   ================================================================ */
.ev-reparto { display: grid; gap: var(--ev-gap-xs); }

.ev-persona {
  display: flex;
  align-items: center;
  gap: var(--ev-gap-sm);
  /* Antes 0.5rem/0.7rem: las filas se tocaban entre sí */
  padding: 0.65rem 0.85rem;
  border: 1px solid var(--ev-linea);
  border-radius: 0.7rem;
  background: var(--ev-papel-alt);
  transition: border-color 0.15s ease, background 0.15s ease;
}
.ev-persona:hover { border-color: rgba(141, 238, 255, 0.3); background: rgba(255, 255, 255, 0.05); }

/* El personaje que interpretas tú, marcado en la lista */
.ev-persona.es-yo {
  border-color: rgba(141, 238, 255, 0.45);
  background: rgba(141, 238, 255, 0.07);
}

.ev-persona-avatar {
  width: 2.3rem;
  height: 2.3rem;
  border-radius: 50%;
  object-fit: cover;
  background: var(--pl-grad-soft);
  display: grid;
  place-items: center;
  font-size: 0.85rem;
  font-weight: 800;
  flex: none;
  border: 1px solid var(--ev-linea);
}
.ev-persona-copy { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }
.ev-persona-nombre {
  font-size: 0.88rem;
  color: var(--pl-text);
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ev-persona-rol {
  font-size: 0.76rem;
  color: var(--pl-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ev-persona-estado {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.72rem;
  color: var(--pl-muted);
  white-space: nowrap;
  flex: none;
}

/* ================================================================
   Chat
   ================================================================ */
.ev-chat {
  display: flex;
  flex-direction: column;
  height: min(72vh, 38rem);
  background: var(--ev-papel);
  border: 1px solid var(--ev-linea);
  border-radius: 1rem;
  overflow: hidden;
}

.ev-chat-head {
  padding: 0.85rem 1.1rem;
  border-bottom: 1px solid var(--ev-linea);
  font-family: var(--font-heading);
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--pl-cyan);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ev-gap-sm);
  background: rgba(255, 255, 255, 0.02);
}
.ev-chat-estado {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.68rem;
  color: var(--pl-muted);
  letter-spacing: 0;
  text-transform: none;
  font-family: inherit;
}
/* Punto de conexión: verde en directo, ámbar reconectando, gris caído */
.ev-chat-estado::before {
  content: "";
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 50%;
  background: var(--pl-muted);
  flex: none;
}
.ev-chat-estado[data-conn="ok"]::before   { background: var(--ev-verde); }
.ev-chat-estado[data-conn="wait"]::before { background: var(--ev-oro); }

.ev-chat-log {
  flex: 1;
  overflow-y: auto;
  padding: var(--ev-gap);
  display: flex;
  flex-direction: column;
  gap: var(--ev-gap-sm);
  scroll-behavior: smooth;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.18) transparent;
}
.ev-chat-log::-webkit-scrollbar { width: 8px; }
.ev-chat-log::-webkit-scrollbar-track { background: transparent; }
.ev-chat-log::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: content-box;
}

.ev-msg-row { display: flex; }
.ev-msg-row.is-mine { justify-content: flex-end; }

.ev-bubble {
  position: relative;
  max-width: 80%;
  /* Antes 0.5rem/0.75rem: el texto tocaba el borde de la burbuja */
  padding: 0.6rem 0.9rem 0.7rem;
  border-radius: 0.9rem;
  background: var(--ev-papel-alt);
  border: 1px solid var(--ev-linea);
  font-size: 0.88rem;
  line-height: 1.6;
  overflow-wrap: anywhere;
}
/* La esquina que apunta a quien habla: sutil, pero convierte una
   lista de cajas en una conversación. */
.ev-msg-row:not(.is-mine) .ev-bubble { border-bottom-left-radius: 0.25rem; }
.ev-msg-row.is-mine .ev-bubble { border-bottom-right-radius: 0.25rem; }

.is-mine .ev-bubble {
  background: linear-gradient(135deg, rgba(141, 238, 255, 0.16), rgba(169, 106, 231, 0.16));
  border-color: rgba(141, 238, 255, 0.35);
}

/* El color del nombre lo pone event-room.js por personaje (--ev-voz),
   para poder seguir a alguien por el hilo sin leer cada nombre. */
.ev-bubble-autor {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  font-size: 0.72rem;
  font-weight: 800;
  color: var(--ev-voz, var(--pl-cyan));
  margin-bottom: 0.3rem;
}
/* Nombre real de la cuenta, detrás del personaje */
.ev-bubble-cuenta {
  font-size: 0.64rem;
  font-weight: 600;
  color: var(--pl-muted);
  opacity: 0.75;
}
.ev-bubble-hora {
  display: block;
  font-size: 0.64rem;
  color: var(--pl-muted);
  margin-top: 0.35rem;
  opacity: 0.8;
}

.ev-chat-form {
  display: flex;
  gap: var(--ev-gap-xs);
  padding: 0.8rem;
  border-top: 1px solid var(--ev-linea);
  background: rgba(255, 255, 255, 0.015);
}
.ev-chat-form input {
  flex: 1;
  min-width: 0;
  padding: 0.68rem 0.9rem;
  background: var(--ev-papel-alt);
  border: 1px solid var(--ev-linea);
  border-radius: 0.65rem;
  color: var(--pl-text);
  font: inherit;
  font-size: 0.9rem;
}
.ev-chat-form input:focus { outline: none; border-color: var(--pl-cyan); }

/* Cartel del modo espectador */
.ev-chat-aviso {
  padding: var(--ev-gap) 1.1rem;
  border-top: 1px solid var(--ev-linea);
  font-size: 0.83rem;
  color: var(--pl-muted);
  text-align: center;
  line-height: var(--ev-lectura);
}

/* ================================================================
   Modal
   ================================================================ */
.ev-overlay {
  position: fixed;
  inset: 0;
  z-index: 120;
  background: rgba(7, 6, 13, 0.8);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  display: grid;
  place-items: center;
  padding: 1.2rem;
}
.ev-overlay[hidden] { display: none; }

.ev-modal {
  width: min(34rem, 100%);
  max-height: 86vh;
  overflow-y: auto;
  background: var(--pl-deep);
  border: 1px solid var(--ev-linea);
  border-radius: 1rem;
  padding: var(--ev-gap-lg) 1.5rem 1.6rem;
  box-shadow: 0 30px 70px -20px rgba(0, 0, 0, 0.8);
}
.ev-modal h3 {
  font-family: var(--font-heading);
  font-size: 0.95rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin: 0 0 var(--ev-gap-sm);
  color: var(--pl-text);
}

.ev-buscador-res {
  max-height: 15rem;
  overflow-y: auto;
  border: 1px solid var(--ev-linea);
  border-radius: 0.65rem;
  margin-top: var(--ev-gap-sm);
}
.ev-buscador-item {
  display: flex;
  align-items: center;
  gap: var(--ev-gap-sm);
  width: 100%;
  padding: 0.7rem 0.85rem;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--ev-linea);
  color: var(--pl-text);
  font: inherit;
  font-size: 0.88rem;
  text-align: left;
  cursor: pointer;
  transition: background 0.15s ease;
}
.ev-buscador-item:last-child { border-bottom: none; }
.ev-buscador-item:hover, .ev-buscador-item:focus-visible { background: var(--ev-papel-alt); }

/* ================================================================
   Tema Phosphor: sin esquinas redondeadas, como el resto del sitio
   ================================================================ */
body.theme-pixel .ev-card,
body.theme-pixel .ev-panel,
body.theme-pixel .ev-item,
body.theme-pixel .ev-clue,
body.theme-pixel .ev-btn,
body.theme-pixel .ev-step,
body.theme-pixel .ev-chat,
body.theme-pixel .ev-bubble,
body.theme-pixel .ev-modal,
body.theme-pixel .ev-persona,
body.theme-pixel .ev-reloj,
body.theme-pixel .ev-ficha-secreta,
body.theme-pixel .ev-desenlace { border-radius: 0; }

/* ================================================================
   Menos animación / bajo rendimiento
   ================================================================ */
@media (prefers-reduced-motion: reduce) {
  .ev-card, .ev-btn, .ev-clue, .ev-persona, .ev-step { transition: none; }
  .ev-chat-log { scroll-behavior: auto; }
  .ev-badge[data-estado="activo"]::before { animation: none; }
}
.perf-low .ev-card,
.perf-low .ev-btn,
.perf-low .ev-clue,
.perf-low .ev-persona,
.perf-low .ev-step { transition: none; }
.perf-low .ev-badge[data-estado="activo"]::before { animation: none; }
.perf-low .ev-overlay { -webkit-backdrop-filter: none; backdrop-filter: none; }

/* ================================================================
   Móvil
   ================================================================ */
@media (max-width: 640px) {
  .ev-main { padding-inline: 1rem; }
  .ev-panel { padding: var(--ev-gap) 1.05rem 1.15rem; }
  .ev-ficha-secreta, .ev-desenlace { padding: var(--ev-gap) 1.05rem 1.15rem; }
  .ev-sala-head { flex-direction: column; align-items: stretch; }
  .ev-reloj { align-items: flex-start; }
  .ev-bubble { max-width: 88%; }
  .ev-chat { height: min(65vh, 30rem); }
}

/* ================================================================
   MECÁNICAS DE ROLEPLAY (esquema §81)
   ----------------------------------------------------------------
   Dos, y solo dos, con un criterio: una mecánica entra si da RAZONES
   PARA HABLAR. Si lo que añade es algo que pulsar, compite con el
   objetivo del formato en vez de alimentarlo.
   ================================================================ */

/* ── El secreto inconfesable ─────────────────────────────────────
   Vive dentro de tu ficha secreta, así que hereda su caja. Solo se
   distingue con el borde punteado: es lo único de la ficha sobre lo
   que puedes ACTUAR. */
.ev-ficha-secreta h3 + p + .ev-actions { margin-top: var(--ev-gap-sm); }

/* Cómo terminó el secreto de cada uno, en el desenlace */
.ev-secreto-final {
  margin: var(--ev-gap-sm) 0 0;
  padding-top: var(--ev-gap-sm);
  border-top: 1px dashed var(--ev-linea);
  font-size: 0.88rem;
  line-height: var(--ev-lectura);
  color: var(--pl-soft);
}
/* Quien aguantó sin soltarlo: es el que cobra */
.ev-tag-guardado {
  color: var(--ev-oro);
  border-color: rgba(255, 217, 143, 0.5);
  background: rgba(255, 217, 143, 0.1);
}

/* ── Muro de evidencia ───────────────────────────────────────────
   Recortes de chat clavados en un corcho. El borde izquierdo toma el
   color de la voz de quien lo dijo (--ev-voz), el mismo que en el
   chat: así se ve de un vistazo si el muro está lleno de frases de
   una sola persona, que es justo la señal que interesa. */
#ev-muro-card { --ev-filete: linear-gradient(90deg, #ffd98f, #8deeff); }

.ev-pin {
  position: relative;
  border: 1px solid var(--ev-linea);
  border-left: 3px solid var(--ev-voz, var(--pl-muted));
  border-radius: 0.7rem;
  padding: 0.85rem 1rem 0.9rem;
  margin-bottom: var(--ev-gap-sm);
  background: var(--ev-papel-alt);
}
.ev-pin:last-child { margin-bottom: 0; }

.ev-pin-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ev-gap-sm);
  margin-bottom: var(--ev-gap-xs);
}
.ev-pin-autor {
  font-size: 0.76rem;
  font-weight: 800;
  color: var(--ev-voz, var(--pl-cyan));
}
.ev-pin-x {
  border: 1px solid var(--ev-linea);
  background: transparent;
  color: var(--pl-muted);
  border-radius: 0.4rem;
  padding: 0.1rem 0.45rem;
  font: inherit;
  font-size: 0.75rem;
  cursor: pointer;
  line-height: 1.4;
}
.ev-pin-x:hover { color: var(--ev-sangre); border-color: rgba(255, 107, 143, 0.5); }

/* La cita textual: entrecomillada y en cursiva, para que se lea como
   algo que alguien DIJO y no como texto del sistema. */
.ev-pin-cita {
  margin: 0;
  font-size: 0.89rem;
  font-style: italic;
  line-height: var(--ev-lectura);
  color: var(--pl-text);
  overflow-wrap: anywhere;
}
.ev-pin-cita::before { content: "\201C"; }
.ev-pin-cita::after  { content: "\201D"; }

.ev-pin-nota {
  margin: var(--ev-gap-xs) 0 0;
  font-size: 0.82rem;
  line-height: 1.6;
  color: var(--pl-soft);
}
.ev-pin-pie {
  margin: var(--ev-gap-xs) 0 0;
  font-size: 0.72rem;
  color: var(--pl-muted);
}

/* Chincheta de cada mensaje del chat. Aparece al pasar por encima para
   no ensuciar la conversación; en táctil, donde no hay hover, se queda
   siempre visible pero tenue. */
.ev-pin-btn {
  position: absolute;
  top: 0.25rem;
  right: 0.3rem;
  border: none;
  background: transparent;
  color: var(--pl-muted);
  font-size: 0.78rem;
  line-height: 1;
  padding: 0.2rem;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s ease, transform 0.15s ease;
}
.ev-bubble:hover .ev-pin-btn,
.ev-pin-btn:focus-visible { opacity: 0.85; }
.ev-pin-btn:hover { opacity: 1; transform: scale(1.15); }

@media (hover: none) {
  .ev-pin-btn { opacity: 0.45; }
}

/* Un mensaje que ya está en el muro se marca en el propio chat */
.ev-msg-row.es-fijado .ev-bubble {
  border-color: rgba(255, 217, 143, 0.5);
  box-shadow: inset 3px 0 0 rgba(255, 217, 143, 0.7);
}
.ev-msg-row.es-fijado .ev-pin-btn { opacity: 0.9; }

/* ── Mensajes de sistema (confesiones) ───────────────────────────
   Ni burbuja ni autor: es la sala entera enterándose de algo. */
.ev-sistema {
  align-self: center;
  max-width: 92%;
  text-align: center;
  padding: 0.55rem 0.95rem;
  border-radius: 0.7rem;
  border: 1px dashed rgba(229, 89, 177, 0.45);
  background: rgba(229, 89, 177, 0.08);
  font-size: 0.85rem;
  line-height: 1.6;
  color: var(--pl-soft);
  overflow-wrap: anywhere;
}
.ev-sistema-hora {
  display: block;
  font-size: 0.62rem;
  color: var(--pl-muted);
  margin-top: 0.25rem;
  opacity: 0.8;
}

body.theme-pixel .ev-pin,
body.theme-pixel .ev-sistema { border-radius: 0; }

@media (prefers-reduced-motion: reduce) {
  .ev-pin-btn { transition: none; }
}
.perf-low .ev-pin-btn { transition: none; }

/* ── Papelera de la tarjeta (solo moderadores) ────────────────
   Va FUERA del <a> de la tarjeta, no dentro: un <button> anidado en un
   enlace es HTML invalido y, en la practica, el navegador se lleva el
   clic al enlace en vez de al boton. Por eso la tarjeta pasa a vivir
   dentro de .ev-card-wrap, que es quien pone el position: relative.

   Mismo comportamiento que el lapiz de las fichas de Miembros: aparece
   al pasar por encima, y con teclado en cuanto recibe el foco — si solo
   respondiera al hover, quien navegue con tabulador no lo encontraria
   nunca. */
/* display:flex + flex:1 en la tarjeta para que siga estirándose hasta
   la altura de la fila del grid. Sin esto, meter la envoltura por en
   medio dejaría las tarjetas cortas flotando en celdas altas. */
.ev-card-wrap { position: relative; display: flex; }
.ev-card-wrap > .ev-card { flex: 1; }

.ev-card-del {
  position: absolute;
  top: 0.55rem;
  right: 0.55rem;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border-radius: 0.5rem;
  border: 1px solid rgba(255, 157, 176, 0.45);
  background: rgba(7, 6, 13, 0.82);
  backdrop-filter: blur(3px);
  color: #ff9db0;
  font-size: 0.9rem;
  line-height: 1;
  cursor: pointer;
  opacity: 0;
  transform: translateY(-3px);
  transition: opacity 0.15s ease, transform 0.15s ease, border-color 0.15s ease;
}
.ev-card-wrap:hover .ev-card-del,
.ev-card-del:focus-visible { opacity: 1; transform: translateY(0); }
.ev-card-del:hover { border-color: #ff9db0; background: rgba(255, 157, 176, 0.18); }
.ev-card-del:disabled { opacity: 0.5; cursor: not-allowed; }

/* En tactil no hay hover: ahi se queda siempre visible, porque si no
   la papelera sencillamente no existe para quien entre desde el movil. */
@media (hover: none) {
  .ev-card-del { opacity: 1; transform: none; }
}

/* La tarjeta se va con una transicion en vez de desaparecer de golpe:
   confirma que el borrado ocurrio sin necesidad de recargar la lista. */
.ev-card-wrap.is-going {
  opacity: 0;
  transform: scale(0.96);
  transition: opacity 0.24s ease, transform 0.24s ease;
  pointer-events: none;
}

/* ── Zona peligrosa del editor ────────────────────────────────
   Separada del resto y al final, para que borrar no comparta fila con
   guardar. */
.ev-panel-danger { border-color: rgba(255, 157, 176, 0.35); }
.ev-panel-danger h2 { color: #ff9db0; }

@media (prefers-reduced-motion: reduce) {
  .ev-card-del, .ev-card-wrap.is-going { transition: none; }
}
.perf-low .ev-card-del { transition: none; }

/* ── FICHA DE PERSONAJE (§83) ─────────────────────────────────
   El expediente público. Se abre desde el chat, desde el reparto y
   desde la vista previa del editor, y es el mismo marcado en los tres
   sitios (PLEvents.fichaHTML).

   El acento lo pone cada ficha con --ev-acento, que sale de un juego
   de cinco colores de la paleta del sitio. No es un color libre a
   propósito: cinco que combinan con los cuatro temas valen más que un
   selector con el que se puede escribir en amarillo sobre blanco. */
.ev-modal-ficha {
  --ev-acento: var(--pl-lilac);
  position: relative;
  padding: 0;
  overflow: hidden;
}

.ev-modal-cerrar {
  position: absolute;
  top: 0.6rem;
  right: 0.6rem;
  z-index: 3;
  width: 2rem;
  height: 2rem;
  display: grid;
  place-items: center;
  border-radius: 0.5rem;
  border: 1px solid var(--ev-linea);
  background: var(--ev-papel);
  color: var(--pl-muted);
  font-size: 0.9rem;
  line-height: 1;
  cursor: pointer;
}
.ev-modal-cerrar:hover { color: var(--pl-text); border-color: var(--pl-cyan); }

.ev-ficha { --ev-acento: var(--pl-lilac); }

.ev-ficha-head {
  display: flex;
  align-items: center;
  gap: var(--ev-gap);
  padding: var(--ev-gap) 3rem var(--ev-gap) var(--ev-gap);
  background:
    linear-gradient(120deg,
      color-mix(in srgb, var(--ev-acento) 22%, transparent),
      transparent 70%);
  border-bottom: 1px solid var(--ev-linea);
}

.ev-ficha-retrato {
  width: 5rem;
  height: 5rem;
  flex: none;
  border-radius: 0.9rem;
  object-fit: cover;
  border: 2px solid var(--ev-acento);
  background: var(--ev-papel-alt);
  display: grid;
  place-items: center;
  font-family: var(--font-heading);
  font-size: 1.7rem;
  color: var(--ev-acento);
}

.ev-ficha-nombre {
  font-family: var(--font-heading);
  font-size: 1.15rem;
  margin: 0;
  color: var(--pl-text);
  overflow-wrap: anywhere;
}
.ev-ficha-titulo {
  margin: 0.2rem 0 0;
  font-size: 0.86rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: var(--ev-acento);
}
.ev-ficha-edad { margin: 0.15rem 0 0; font-size: 0.78rem; color: var(--pl-muted); }

.ev-ficha-cuerpo { padding: var(--ev-gap) var(--ev-gap) var(--ev-gap-lg); }

.ev-ficha-cita {
  margin: 0 0 var(--ev-gap);
  padding: 0.6rem 0 0.6rem 0.9rem;
  border-left: 3px solid var(--ev-acento);
  font-style: italic;
  font-size: 0.95rem;
  line-height: var(--ev-lectura);
  color: var(--pl-soft);
  overflow-wrap: anywhere;
}

.ev-ficha-rasgos { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: var(--ev-gap); }
.ev-ficha-rasgo {
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--ev-acento) 55%, transparent);
  background: color-mix(in srgb, var(--ev-acento) 12%, transparent);
  font-size: 0.74rem;
  font-weight: 700;
  color: var(--pl-soft);
}

.ev-ficha-bloque { margin-bottom: var(--ev-gap); }
.ev-ficha-bloque:last-child { margin-bottom: 0; }
.ev-ficha-bloque h4 {
  font-family: var(--font-heading);
  font-size: 0.74rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--pl-muted);
  margin: 0 0 0.5rem;
}
.ev-ficha-texto p {
  margin: 0 0 0.6rem;
  font-size: 0.89rem;
  line-height: var(--ev-lectura);
  color: var(--pl-soft);
  overflow-wrap: anywhere;
}
.ev-ficha-texto p:last-child { margin-bottom: 0; }

/* Clave y valor en dos columnas, que es lo que permite leer cinco
   fichas seguidas y ver el hueco de un vistazo. */
.ev-ficha-datos {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.35rem 0.9rem;
  margin: 0;
  font-size: 0.85rem;
}
.ev-ficha-datos dt { color: var(--pl-muted); font-weight: 700; }
.ev-ficha-datos dd { margin: 0; color: var(--pl-soft); overflow-wrap: anywhere; }

.ev-ficha-rel { margin: 0; padding-left: 1.1rem; font-size: 0.85rem; color: var(--pl-soft); }
.ev-ficha-rel li { margin-bottom: 0.3rem; line-height: 1.5; }
.ev-ficha-rel b { color: var(--ev-acento); }

.ev-ficha-coartada {
  border: 1px solid color-mix(in srgb, var(--ev-acento) 40%, transparent);
  border-radius: 0.7rem;
  padding: 0.9rem 1rem;
  background: color-mix(in srgb, var(--ev-acento) 7%, transparent);
}
.ev-ficha-coartada h4 { color: var(--ev-acento); }

/* Navegadores sin color-mix: el borde y el fondo se caen a los tokens
   de siempre en vez de quedarse transparentes. */
@supports not (color: color-mix(in srgb, red 50%, blue)) {
  .ev-ficha-head { background: var(--pl-grad-soft); }
  .ev-ficha-rasgo { border-color: var(--ev-linea); background: var(--ev-papel-alt); }
  .ev-ficha-coartada { border-color: var(--ev-linea); background: var(--ev-papel-alt); }
}

/* ── El nombre del chat, pulsable ─────────────────────────────
   Es un <button> de verdad y no un <span> con onclick: así entra en el
   orden de tabulación y responde a Enter sin tener que añadirle nada. */
.ev-bubble-autor-btn {
  /* Hereda tamaño, peso y COLOR DE VOZ de .ev-bubble-autor, que lleva
     puesta a la vez: aquí solo se le quita el aspecto de botón. Poner
     un color propio le robaría al personaje el suyo. */
  padding: 0;
  border: none;
  background: none;
  font: inherit;
  color: inherit;
  cursor: pointer;
  text-align: left;
  border-bottom: 1px dotted transparent;
}
.ev-bubble-autor-btn:hover,
.ev-bubble-autor-btn:focus-visible { border-bottom-color: currentColor; }

/* Una fila del reparto que abre ficha se comporta como un botón. */
.ev-persona-btn { cursor: pointer; width: 100%; text-align: left; font: inherit; }
.ev-persona-btn:hover { border-color: var(--pl-cyan); }

/* ── Retrato en el editor ─────────────────────────────────────── */
.ev-retrato-fila { display: flex; align-items: center; gap: var(--ev-gap-sm); flex-wrap: wrap; }
.ev-retrato-previa {
  width: 4rem;
  height: 4rem;
  flex: none;
  border-radius: 0.7rem;
  object-fit: cover;
  border: 1px solid var(--ev-linea);
  background: var(--ev-papel-alt);
  display: grid;
  place-items: center;
  font-family: var(--font-heading);
  font-size: 1.3rem;
  color: var(--pl-muted);
}

/* ── Editor de la ficha (paso 2) ──────────────────────────────
   Los controles que no existen en el resto del formulario: el
   selector de acento, las filas de relación y el recuadro de lo
   secreto. */

.ev-acentos { display: flex; gap: var(--ev-gap-xs); flex-wrap: wrap; }
.ev-acento {
  --ev-acento: var(--pl-lilac);
  width: 1.9rem;
  height: 1.9rem;
  padding: 0;
  border-radius: 50%;
  border: 2px solid transparent;
  background: var(--ev-acento);
  cursor: pointer;
  transition: transform 0.14s ease, box-shadow 0.14s ease;
}
.ev-acento:hover { transform: scale(1.1); }
.ev-acento.is-active {
  border-color: var(--pl-text);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ev-acento) 35%, transparent);
}

.ev-rel-lista:not(:empty) { margin-bottom: var(--ev-gap-sm); }
.ev-rel-fila {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) auto;
  gap: var(--ev-gap-xs);
  margin-bottom: var(--ev-gap-xs);
}
/* En móvil las tres columnas dejan el desplegable en dos caracteres:
   se apilan, y el botón de quitar se queda a lo ancho debajo. */
@media (max-width: 620px) {
  .ev-rel-fila { grid-template-columns: 1fr; }
}
.ev-rel-fila select,
.ev-rel-fila input {
  width: 100%;
  min-width: 0;
  padding: 0.5rem 0.65rem;
  background: var(--ev-papel-alt);
  border: 1px solid var(--ev-linea);
  border-radius: 0.55rem;
  color: var(--pl-text);
  font: inherit;
  font-size: 0.88rem;
}

/* Lo secreto, dentro de su propia caja y con el color de la sangre del
   expediente. El error caro de este formulario es escribir lo secreto
   en el hueco de lo público, y de ese no se vuelve: cuando te das
   cuenta, ya lo leyó alguien. Así que la frontera se ve. */
.ev-secreto-caja {
  margin-top: var(--ev-gap-lg);
  padding: var(--ev-gap) var(--ev-gap) 0.4rem;
  border: 1px dashed rgba(255, 107, 143, 0.45);
  border-radius: 0.85rem;
  background: rgba(255, 107, 143, 0.05);
}
.ev-secreto-caja h4 {
  font-family: var(--font-heading);
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ev-sangre);
  margin: 0 0 var(--ev-gap-sm);
}

/* ── Impostor (§84) ───────────────────────────────────────────
   El tablero del segundo formato reutiliza casi todo lo del Murder
   Mystery —paneles, fichas secretas, filas de reparto—. Esto es lo
   poco que le hace falta aparte. */

/* Subtítulo dentro de un panel: bloques que no merecen un <h2> con su
   pestaña de carpeta, pero que sí separan. Lo usan el tablero del
   Impostor y las opciones del editor. */
.ev-sub {
  font-family: var(--font-heading);
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--pl-cyan);
  margin: var(--ev-gap-lg) 0 var(--ev-gap-sm);
}
.ev-sub:first-child { margin-top: 0; }

/* Una fila del reparto que además es botón de voto. Hereda todo de
   .ev-persona-btn; lo único propio es que el "Votar" de la derecha se
   encienda al pasar por encima, para que se vea que la fila entera es
   el botón y no solo esa palabra. */
.ev-persona-btn[data-votar] .ev-persona-estado {
  color: var(--pl-muted);
  transition: color 0.14s ease;
}
.ev-persona-btn[data-votar]:hover .ev-persona-estado,
.ev-persona-btn[data-votar]:focus-visible .ev-persona-estado {
  color: var(--ev-sangre);
}

/* El turno de cada uno, en la tira de orden. Los eliminados se tachan
   con un style en línea desde el JS (salen de la base y no se pueden
   enumerar aquí); esto es solo el que tiene el turno ahora. */
.ev-tag.ev-tag-detective { font-weight: 800; }

@media (prefers-reduced-motion: reduce) {
  .ev-persona-btn[data-votar] .ev-persona-estado { transition: none; }
}