/* ======================================================================
 * GIV CTF — MISIONES: control operativo + editor visual
 *
 * Hoja propia (no está en givctf-overrides.css) con todo lo de esta fase:
 *
 *   1. barra operativa de la cabecera de Ajustes (.givctf-ops)
 *   2. badge de estado operativo + cuenta atrás (.givctf-op-*), común a la
 *      tarjeta del gestor, al índice público y a la cabecera del editor
 *   3. tarjeta del gestor: checkbox de selección y marca de borrador
 *   4. editor visual: la vista del participante (.givctf-mission-view) con el
 *      modificador .is-editor. Solo se estilan aquí los CAMPOS y controles;
 *      la composición (banner, bloques, lista, reto) es la de la vista real,
 *      para que las dos pantallas no diverjan.
 *   5. índice público y pantalla «misión no disponible»
 *
 * Siempre CLASSIC: el editor no depende del modo visual global.
 * Paleta: cian (títulos / acciones), verde lima (números, ACTIVA), ámbar
 * (puntos, FINALIZADA), rojo (peligro).
 * ====================================================================== */

/* ------------------------------------------------ 1. barra operativa --- */
/* Va dentro de .givctf-admin-head (flex, una sola línea). Se coloca al final
 * con margin-left:auto; si no cabe, la cabecera envuelve y la barra pasa a
 * una segunda línea entera. Compacta: altura de un botón pequeño. */
.givctf-ops {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-left: auto;
}
.givctf-ops-sel {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-secondary);
  padding-right: 0.5rem;
  border-right: 1px solid var(--border-color);
  white-space: nowrap;
}
.givctf-ops[data-n]:not([data-n="0"]) .givctf-ops-sel { color: var(--accent-cyan); }
.givctf-ops-tiempo {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin: 0;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-secondary);
}
.givctf-ops-tiempo input {
  width: 4.4rem;
  padding: 0.22rem 0.4rem;
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  color: var(--text-primary);
  font-family: inherit;
  font-size: 0.8rem;
  text-align: center;
  -moz-appearance: textfield;
}
.givctf-ops-tiempo input::-webkit-outer-spin-button,
.givctf-ops-tiempo input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.givctf-ops-tiempo input:focus {
  outline: none;
  border-color: var(--accent-cyan);
  box-shadow: 0 0 0 1px rgba(0, 217, 255, 0.35);
}
.givctf-ops-tiempo em { font-style: normal; }
.givctf-ops .btn {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.66rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.3rem 0.7rem;
  white-space: nowrap;
}
@media (max-width: 991.98px) {
  .givctf-ops { flex: 1 1 100%; margin-left: 0; }
}

/* ------------------------------------------ 2. badge estado operativo --- */
.givctf-op-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  flex: 0 0 auto;
  padding: 0.2rem 0.55rem;
  border: 1px solid var(--border-color);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
  color: #7b8a98;                                   /* INACTIVA: gris */
}
.givctf-op-dot {
  width: 7px;
  height: 7px;
  flex: 0 0 auto;
  background: currentColor;
}
.givctf-op-badge[data-op="active"] {              /* ACTIVA: verde lima */
  color: var(--accent-lime, #b7f52a);
  border-color: rgba(183, 245, 42, 0.45);
  background: rgba(183, 245, 42, 0.07);
}
.givctf-op-badge[data-op="active"] .givctf-op-dot {
  box-shadow: 0 0 6px rgba(183, 245, 42, 0.8);
}
.givctf-op-badge[data-op="finished"] {            /* FINALIZADA: ámbar/rojo discreto */
  color: #e0a04a;
  border-color: rgba(255, 184, 0, 0.35);
  background: rgba(255, 184, 0, 0.05);
}
.givctf-op-clock {
  margin-left: 0.15rem;
  padding-left: 0.45rem;
  border-left: 1px solid rgba(183, 245, 42, 0.35);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #f2f5f8;
}

/* -------------------------------------------- 3. tarjeta del gestor --- */
.givctf-msl-check {
  display: inline-flex;
  align-items: center;
  margin: 0;
  cursor: pointer;
}
.givctf-msl-check input {
  width: 15px;
  height: 15px;
  margin: 0;
  accent-color: var(--accent-cyan);
  cursor: pointer;
}
.givctf-msl-top .givctf-op-badge { margin-right: auto; }
.givctf-msl-card.is-seleccionada,
.givctf-msl-card.is-seleccionada:hover {
  border-color: rgba(0, 217, 255, 0.6);
  box-shadow: inset 0 0 0 1px rgba(0, 217, 255, 0.18);
}
.givctf-msl-editorial {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.58rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #556575;
  border: 1px dashed #2a3745;
  padding: 0.16rem 0.4rem;
}
/* Ranura libre más compacta: sin texto de relleno, el CREAR ya lo dice. */
.givctf-msl-hueco .givctf-msl-hueco-titulo { margin-bottom: 0.2rem; }

/* ------------------------------------------------ 4. editor visual --- */
/* Dentro de Ajustes no hay que llenar el viewport ni descontar navbar. */
.givctf-mission-view.is-editor {
  min-height: 0;
  height: auto;
  padding: 0;
  max-width: none;
}
@media (min-width: 1200px) {
  /* Misma idea que el participante: las tres columnas caben en pantalla y
   * cada una se desplaza por dentro. Se descuenta la cabecera de Ajustes. */
  .givctf-mission-view.is-editor { height: calc(100vh - 13rem); min-height: 34rem; }
}
.givctf-mis-cabecera-titulo {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.6rem 0.9rem;
}
.givctf-mis-cabecera-nota { margin-top: 0.35rem; }

/* ---- campos: ocupan el hueco del dato. Foco: solo el borde del campo. */
/* Los overrides globales del theme fijan tipografía, fondo y borde de
 * input/textarea/select con !important; aquí hace falta lo mismo para que el
 * campo herede la letra del dato que sustituye (Rajdhani en los textos,
 * JetBrains en títulos y cifras), y no salga todo en monoespacia. */
.givctf-mission-view .givctf-mv-in,
.givctf-mission-view .givctf-mv-ta {
  min-width: 0;
  padding: 0.3rem 0.5rem;
  background: rgba(6, 10, 15, 0.55) !important;
  border: 1px solid #2a3745 !important;
  color: inherit !important;
  font: inherit;
  font-family: inherit !important;
  line-height: 1.35;
  border-radius: 0 !important;
}
.givctf-mission-view .givctf-mv-in::placeholder,
.givctf-mission-view .givctf-mv-ta::placeholder { color: #4d5a67; font-weight: 400; text-transform: none; }
.givctf-mission-view .givctf-mv-in:focus,
.givctf-mission-view .givctf-mv-ta:focus {
  outline: none;
  border-color: var(--accent-cyan) !important;
  box-shadow: 0 0 0 1px rgba(0, 217, 255, 0.3) !important;
}
.givctf-mission-view .givctf-mv-in:disabled { opacity: 0.5; }
.givctf-mission-view .givctf-mv-ta {
  display: block;
  width: 100%;
  resize: vertical;
  font-family: 'Rajdhani', system-ui, sans-serif !important;
  font-size: 1rem;
  color: var(--text-primary) !important;
}
.givctf-mission-view .givctf-mv-title.is-edit .givctf-mv-in,
.givctf-mission-view .givctf-mv-in-num,
.givctf-mission-view .givctf-mv-in-pts,
.givctf-mission-view .givctf-mv-in-answer,
.givctf-mission-view .givctf-mv-work-title.is-edit,
.givctf-mission-view .givctf-mv-ficha .givctf-mv-in {
  font-family: 'JetBrains Mono', ui-monospace, monospace !important;
}
.givctf-mission-view .givctf-mv-in-rule,
.givctf-mission-view .givctf-mv-in-disc,
.givctf-mission-view .givctf-mv-in-place,
.givctf-mission-view .givctf-mv-material-form .givctf-mv-in {
  font-family: 'Rajdhani', system-ui, sans-serif !important;
}
.givctf-mission-view select.givctf-mv-in {
  appearance: auto;
  -webkit-appearance: auto;
  background-color: #0b1017 !important;
  cursor: pointer;
}
.givctf-mission-view .givctf-mv-in[type="number"] { -moz-appearance: textfield; }
.givctf-mission-view .givctf-mv-in[type="number"]::-webkit-outer-spin-button,
.givctf-mission-view .givctf-mv-in[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* ---- cabecera del banner */
.givctf-mission-view .givctf-mv-banner-edit {
  display: flex;
  gap: 0.4rem;
  align-items: center;
}
.givctf-mission-view .givctf-mv-title.is-edit {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.givctf-mission-view .givctf-mv-title.is-edit .givctf-mv-in {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 0.85em;
  color: #f2f5f8;
}
.givctf-mission-view .givctf-mv-in-num { width: 3.6rem; text-align: center; color: var(--accent-cyan) !important; }
.givctf-mission-view .givctf-mv-in-sub { flex: 1 1 10rem; }
.givctf-mission-view .givctf-mv-meta.is-edit {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.35rem;
}
.givctf-mission-view .givctf-mv-meta.is-edit .givctf-mv-in {
  font-size: 0.82rem;
  text-transform: none;
  letter-spacing: 0;
}
.givctf-mission-view .givctf-mv-in-prio { width: auto; }
.givctf-mission-view .givctf-mv-in-disc { flex: 1 1 8rem; }
.givctf-mission-view .givctf-mv-facts.is-edit { align-items: center; }
.givctf-mission-view .givctf-mv-facts.is-edit b { font-weight: 700; }
.givctf-mission-view .givctf-mv-in-place { width: 9rem; font-size: 0.8rem; padding: 0.15rem 0.4rem; }
.givctf-mission-view .givctf-mv-chip-admin {
  font-style: normal;
  opacity: 0.75;
  text-transform: none;
  letter-spacing: 0.04em;
}

/* ---- bloques del cuerpo */
.givctf-mission-view .givctf-mv-frag {
  font-size: 0.92rem;
  color: var(--text-secondary);
  border-left: 2px solid #2a3745;
  padding-left: 0.6rem;
  margin: 0 0 0.5rem;
}
.givctf-mission-view .givctf-mv-add {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.5rem;
  padding: 0.35rem 0.7rem;
  background: transparent;
  border: 1px dashed rgba(0, 217, 255, 0.45);
  color: var(--accent-cyan);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
}
.givctf-mission-view .givctf-mv-add:hover { background: rgba(0, 217, 255, 0.1); }
.givctf-mission-view .givctf-mv-x {
  flex: 0 0 auto;
  width: 1.7rem;
  height: 1.7rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid #2a3745;
  color: #7b8a98;
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
}
.givctf-mission-view .givctf-mv-x:hover { color: var(--accent-red); border-color: rgba(255, 51, 102, 0.5); }

/* ---- reglas: lista editable en la misma posición que la del participante */
.givctf-mission-view .givctf-mv-rules-edit { list-style: none; margin: 0; padding: 0; }
.givctf-mission-view .givctf-mv-rules-edit li {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  position: relative;
  padding-left: 1.1rem;
  margin-bottom: 0.4rem;
}
.givctf-mission-view .givctf-mv-rules-edit li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 6px;
  height: 6px;
  margin-top: -3px;
  background: var(--accent-cyan);
}
.givctf-mission-view .givctf-mv-rules-edit li.is-calc {
  color: var(--text-secondary);
  font-size: 0.95rem;
  padding-top: 0.2rem;
  padding-bottom: 0.2rem;
}
.givctf-mission-view .givctf-mv-rules-edit li.is-calc::before { background: #556575; }
.givctf-mission-view .givctf-mv-in-rule { flex: 1 1 auto; font-size: 0.95rem; }

/* ---- material: la tarjeta del participante con controles discretos */
.givctf-mission-view .givctf-mv-material.is-edit { position: relative; padding-bottom: 2.3rem; }
.givctf-mission-view .givctf-mv-material.is-off { opacity: 0.45; }
.givctf-mission-view .givctf-mv-material-ctl {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  padding: 0.3rem 0.45rem;
  border-top: 1px solid var(--mv-line);
  background: rgba(6, 10, 15, 0.45);
}
.givctf-mission-view .givctf-mv-material-ctl button {
  background: transparent;
  border: 0;
  padding: 0.1rem 0.3rem;
  color: #93a2b0;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.58rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
}
.givctf-mission-view .givctf-mv-material-ctl button:hover { color: var(--accent-cyan); }
.givctf-mission-view .givctf-mv-material-ctl button.is-danger:hover { color: var(--accent-red); }
.givctf-mission-view .givctf-mv-material-ctl button:disabled { opacity: 0.3; cursor: default; }
.givctf-mission-view .givctf-mv-material-add {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  border-style: dashed;
  background: transparent;
}
.givctf-mission-view .givctf-mv-material-add .givctf-mv-add { margin-top: 0; }
.givctf-mission-view .givctf-mv-material-menu {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.3rem;
}
.givctf-mission-view .givctf-mv-material-form {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  width: 100%;
  margin-top: 0.4rem;
  padding-top: 0.4rem;
  border-top: 1px solid var(--mv-line);
  text-align: left;
}
.givctf-mission-view .givctf-mv-material.is-edit .givctf-mv-material-form { margin-bottom: 2.2rem; }
.givctf-mission-view .givctf-mv-material-form .givctf-mv-in { font-size: 0.85rem; width: 100%; }
.givctf-mission-view .givctf-mv-material-ayuda { margin: 0.2rem 0 0; font-size: 0.72rem; line-height: 1.45; color: var(--text-secondary); }
.givctf-mission-view .givctf-mv-material-ayuda code { font-size: 0.7rem; color: var(--accent-cyan); background: transparent; overflow-wrap: anywhere; }
.givctf-mission-view .givctf-mv-material-form-btn { display: flex; gap: 0.3rem; }
.givctf-mission-view .givctf-mv-progreso {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.62rem;
  color: var(--accent-cyan);
}

/* ---- ficha técnica + guardado de la misión */
.givctf-mission-view .givctf-mv-ficha {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.2rem;
  margin-top: 1.2rem;
  padding-top: 0.8rem;
  border-top: 1px dashed var(--mv-line);
}
.givctf-mission-view .givctf-mv-ficha label {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin: 0;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-secondary);
}
.givctf-mission-view .givctf-mv-ficha .givctf-mv-in { font-size: 0.8rem; text-transform: none; letter-spacing: 0; }
.givctf-mission-view .givctf-mv-ficha code { color: #7b8a98; font-size: 0.75rem; }
.givctf-mission-view .givctf-mv-in-slug { width: 12rem; }
.givctf-mission-view .givctf-mv-ficha em { font-style: normal; }
.givctf-mission-view .givctf-mv-save {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1rem;
  padding-top: 0.8rem;
  border-top: 1px solid var(--mv-line);
}
.givctf-mission-view .givctf-mv-save-estado {
  margin-left: auto;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

/* ---- lista de preguntas */
.givctf-mission-view .givctf-mv-progress.is-edit .givctf-mv-progress-head { margin-bottom: 0; }
.givctf-mission-view .givctf-mv-list-card { display: flex; flex-direction: column; min-height: 0; }
.givctf-mission-view .givctf-mv-list-card .givctf-mv-questions { flex: 1 1 auto; min-height: 0; }
.givctf-mission-view .givctf-mv-empty {
  margin: 0;
  padding: 1.2rem var(--mv-pad);
  color: var(--text-secondary);
  font-size: 0.95rem;
}
.givctf-mission-view .givctf-mv-add-q { margin: 0.6rem var(--mv-pad) 0.8rem; align-self: flex-start; }
.givctf-mission-view.is-editor .givctf-mv-q { display: flex; align-items: stretch; }
.givctf-mission-view.is-editor .givctf-mv-q-link { flex: 1 1 auto; min-width: 0; }
.givctf-mission-view .givctf-mv-q-ctl {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1px;
  padding-right: 0.35rem;
}
.givctf-mission-view .givctf-mv-q-ctl button {
  background: transparent;
  border: 0;
  padding: 0 0.25rem;
  color: #556575;
  font-size: 0.55rem;
  line-height: 1.2;
  cursor: pointer;
}
.givctf-mission-view .givctf-mv-q-ctl button:hover { color: var(--accent-cyan); }
.givctf-mission-view .givctf-mv-q-ctl button:disabled { opacity: 0.25; cursor: default; }
/* Estado de la pregunta en modo admin: completa (ok) o le falta algo (warn). */
.givctf-mission-view .givctf-mv-q[data-estado="ok"] .givctf-mv-q-state { color: var(--accent-lime, #b7f52a); }
.givctf-mission-view .givctf-mv-q[data-estado="ok"] .givctf-mv-q-state i::before { content: "\f058"; font-size: 0.78rem; }
.givctf-mission-view .givctf-mv-q[data-estado="warn"] .givctf-mv-q-state { color: #d3a34a; }
.givctf-mission-view .givctf-mv-q[data-estado="warn"] .givctf-mv-q-state i::before { content: "\f071"; font-size: 0.72rem; }

/* ---- reto */
.givctf-mission-view .givctf-mv-work-title.is-edit { width: 100%; padding: 0.35rem 0.5rem; }
.givctf-mission-view .givctf-mv-work-points.is-edit {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.15rem 0.5rem 0.15rem 0.15rem;
}
.givctf-mission-view .givctf-mv-in-pts {
  width: 4.6rem;
  text-align: center;
  color: var(--accent-amber) !important;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-weight: 700;
  padding: 0.15rem 0.3rem;
}
.givctf-mission-view .givctf-mv-format.is-edit .givctf-mv-ta-format {
  font-size: 0.95rem;
  min-height: 2.6rem;
}
.givctf-mission-view .givctf-mv-answers-hint {
  margin: -0.25rem 0 0.5rem;
  font-size: 0.82rem;
  color: var(--text-secondary);
}
.givctf-mission-view .givctf-mv-answers-list { display: flex; flex-direction: column; gap: 0.35rem; }
.givctf-mission-view .givctf-mv-answer-row {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}
.givctf-mission-view .givctf-mv-in-answer {
  flex: 1 1 auto;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.85rem;
}
.givctf-mission-view .givctf-mv-in-type { font-size: 0.72rem; padding: 0.3rem 0.3rem; width: auto; }
.givctf-mission-view .givctf-mv-in-ci {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  margin: 0;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.7rem;
  color: var(--text-secondary);
  cursor: pointer;
  white-space: nowrap;
}
.givctf-mission-view .givctf-mv-in-ci input { accent-color: var(--accent-cyan); margin: 0; }
.givctf-mission-view .givctf-mv-answer.is-ghost { flex: 0 0 auto; opacity: 0.45; }
.givctf-mission-view .givctf-mv-ghost {
  border: 1px dashed #2a3745;
  padding: 0.7rem 0.8rem;
  font-size: 0.9rem;
  color: var(--text-secondary);
}
.givctf-mission-view .givctf-mv-pendiente {
  padding: 0.7rem 0.9rem;
  border: 1px solid rgba(255, 184, 0, 0.5);
  background: rgba(255, 184, 0, 0.08);
  color: var(--text-primary);
  font-size: 0.92rem;
}
.givctf-mission-view .givctf-mv-pendiente p { margin: 0 0 0.5rem; }
.givctf-mission-view .givctf-mv-pendiente-btn { display: flex; gap: 0.4rem; flex-wrap: wrap; }

/* ---- penalización: bloque compacto, claramente GLOBAL de la misión */
.givctf-mission-view .givctf-mv-penalty {
  flex: 0 0 auto;
  padding: 0.7rem var(--mv-pad) 0.75rem;
  border-color: rgba(255, 184, 0, 0.3);
}
.givctf-mission-view .givctf-mv-penalty-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 0.5rem;
}
.givctf-mission-view .givctf-mv-penalty h3 {
  margin: 0;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-amber);
  display: flex;
  align-items: center;
  gap: 0.45rem;
}
.givctf-mission-view .givctf-mv-penalty-tag {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.58rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-amber);
  border: 1px solid rgba(255, 184, 0, 0.45);
  padding: 0.15rem 0.45rem;
}
.givctf-mission-view .givctf-mv-penalty-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
}
.givctf-mission-view .givctf-mv-penalty-row label {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin: 0;
  font-size: 0.88rem;
  color: var(--text-primary);
  white-space: nowrap;
}
.givctf-mission-view .givctf-mv-penalty-row label span {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.6rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-secondary);
}
.givctf-mission-view .givctf-mv-penalty-switch input { accent-color: var(--accent-amber); margin: 0; }
.givctf-mission-view .givctf-mv-penalty-nota {
  margin: 0.5rem 0 0;
  font-size: 0.8rem;
  color: var(--text-secondary);
}

/* ---- responsive del editor: misma escalera que la vista del participante
 * (1200: misión arriba, preguntas + reto debajo; 860: una columna). Ya lo
 * hacen las @media de givctf-overrides.css sobre .givctf-mission-view; aquí
 * solo lo que el editor añade. */
@media (max-width: 1199.98px) {
  .givctf-mission-view.is-editor { height: auto; }
  .givctf-mission-view.is-editor .givctf-mv-list-card .givctf-mv-questions { max-height: 28rem; }
}
@media (max-width: 860px) {
  .givctf-mission-view .givctf-mv-banner-edit { flex-wrap: wrap; }
  .givctf-mission-view .givctf-mv-in-place { width: 100%; }
  .givctf-mission-view .givctf-mv-in-slug { width: 100%; }
}

/* ------------------------------------------- 5. índice y no disponible --- */
.givctf-mi-card .givctf-op-badge {
  align-self: flex-start;
  margin-bottom: 0.45rem;
  background: rgba(6, 10, 15, 0.6);
}
.givctf-mi-card .givctf-op-badge[data-op="active"] { background: rgba(6, 10, 15, 0.7); }
.givctf-mu-vacio h1 {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 1.1rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-amber);
  margin: 0.6rem 0 0.4rem;
}
.givctf-mu-vacio a { color: var(--accent-cyan); }

/* ------------------------------------------------ 6. portada con sesión ---
 * Sin el panel de acceso (solo se pinta sin sesión), la composición pasa a
 * una columna: el escudo y el texto ocupan el sitio, sin un hueco a la derecha. */
.givctf-hero-layout.is-solo {
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  max-width: 900px;
}
.givctf-hero-layout.is-solo .givctf-hero-identity { text-align: center; }

/* ------------------------------------------------ 7. portada: efectos ---
 * Un «fallo de señal» recorre la identidad entera. Ciclo de 14 s:
 *   · tres glitches cortos (~0,25 s) en t = 1,4 s, 5,3 s y 8,7 s;
 *   · un glitch GRANDE (~0,6 s) en t = 11,5 s: desplazamientos de 15-25 px,
 *     sesgo, más franjas y una banda de barrido que cruza el bloque.
 * Escudo y rótulo lo hacen a la vez (dos copias teñidas en cian y rojo en
 * ::before/::after, recortadas con clip-path). Además, palabras sueltas del
 * texto tienen su propio glitch, cada una con su ciclo y su retardo. Todo
 * CSS; se apaga con prefers-reduced-motion. Referencias: efectos glitch en
 * CSS (cssauthor.com, ahmodmusa.com, codefronts.com). */

.givctf-hero-emblem {
  position: relative;
  display: block;
  width: -moz-fit-content;
  width: fit-content;
  margin: 0 auto clamp(0.9rem, 2.6vh, 1.8rem);
  animation: givctf-hero-float 6s ease-in-out infinite;
}
.givctf-hero-emblem .givctf-hero-logo {
  position: relative;
  z-index: 2;
  margin-bottom: 0;
  /* Algo más grande que antes (268 px de tope → 330 px). */
  width: clamp(156px, min(29vh, 52vw), 330px);
  animation: givctf-hero-logo-jitter 14s steps(1, end) infinite;
}
.givctf-hero-emblem::before,
.givctf-hero-emblem::after {
  content: "";
  position: absolute;
  inset: 0;
  background: url("/themes/givctf/static/img/givctf-logo.png?v=1") center / contain no-repeat;
  opacity: 0;
  pointer-events: none;
  z-index: 3;
  mix-blend-mode: screen;
}
.givctf-hero-emblem::before {
  filter: grayscale(1) brightness(1.1) sepia(1) saturate(9) hue-rotate(150deg);   /* cian */
  animation: givctf-hero-glitch-a 14s steps(1, end) infinite;
}
.givctf-hero-emblem::after {
  filter: grayscale(1) brightness(1.1) sepia(1) saturate(9) hue-rotate(-50deg);   /* rojo */
  animation: givctf-hero-glitch-b 14s steps(1, end) infinite;
}
@keyframes givctf-hero-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-5px); }
}

/* ---- rótulo: color sólido (sin degradado), con su halo de siempre. */
.givctf-fx-title {
  position: relative;
  display: block;
  animation: givctf-hero-focus 1.1s cubic-bezier(0.2, 0.8, 0.2, 1) both,
             givctf-hero-title-jitter 14s steps(1, end) 1.1s infinite;
}
.givctf-fx-title-txt {
  position: relative;
  z-index: 2;
  color: var(--accent-cyan);
}
.givctf-fx-title::before,
.givctf-fx-title::after,
.givctf-fx-word::before,
.givctf-fx-word::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  text-indent: inherit;
  letter-spacing: inherit;
  opacity: 0;
  pointer-events: none;
  text-shadow: none;
  white-space: nowrap;
}
.givctf-fx-title::before { color: #ff3366; z-index: 1; animation: givctf-hero-glitch-a 14s steps(1, end) infinite; }
.givctf-fx-title::after  { color: var(--accent-cyan); z-index: 1; animation: givctf-hero-glitch-b 14s steps(1, end) infinite; }

/* ---- palabras sueltas: mismo mecanismo, ciclo y retardo propios. */
.givctf-fx-word {
  position: relative;
  display: inline-block;
  animation: givctf-word-jitter var(--fx-cycle, 11s) steps(1, end) var(--fx-delay, 0s) infinite;
}
.givctf-fx-word::before { color: #ff3366; animation: givctf-word-glitch-a var(--fx-cycle, 11s) steps(1, end) var(--fx-delay, 0s) infinite; }
.givctf-fx-word::after  { color: var(--accent-cyan); animation: givctf-word-glitch-b var(--fx-cycle, 11s) steps(1, end) var(--fx-delay, 0s) infinite; }

/* Ciclo de 14 s: tres cortos (~0,25 s) en 10 %, 38 % y 62 %; grande (~0,6 s) en 82 %. */
@keyframes givctf-hero-glitch-a {
  0%, 9.9%, 11.9%, 37.9%, 39.9%, 61.9%, 63.9%, 81.9%, 86.4%, 100% { opacity: 0; clip-path: inset(0 0 100% 0); transform: none; }
  10%   { opacity: 0.9; clip-path: inset(10% 0 55% 0); transform: translate(-7px, -2px); }
  10.6% { opacity: 0.9; clip-path: inset(62% 0 8% 0);  transform: translate(6px, 1px); }
  11.2% { opacity: 0.9; clip-path: inset(30% 0 40% 0); transform: translate(-4px, 0); }
  38%   { opacity: 0.9; clip-path: inset(0 0 78% 0);   transform: translate(5px, -1px); }
  38.6% { opacity: 0.9; clip-path: inset(45% 0 30% 0); transform: translate(-6px, 1px); }
  39.2% { opacity: 0.9; clip-path: inset(20% 0 60% 0); transform: translate(4px, 0); }
  62%   { opacity: 0.9; clip-path: inset(50% 0 25% 0); transform: translate(-5px, 1px); }
  62.6% { opacity: 0.9; clip-path: inset(15% 0 65% 0); transform: translate(7px, -1px); }
  63.2% { opacity: 0.9; clip-path: inset(70% 0 5% 0);  transform: translate(-3px, 0); }
  82%   { opacity: 0.95; clip-path: inset(5% 0 70% 0);  transform: translate(-22px, -4px) skewX(-8deg); }
  82.6% { opacity: 0.95; clip-path: inset(40% 0 35% 0); transform: translate(18px, 3px) skewX(6deg); }
  83.2% { opacity: 0.95; clip-path: inset(65% 0 5% 0);  transform: translate(-16px, 0) skewX(-4deg); }
  83.8% { opacity: 0.95; clip-path: inset(15% 0 50% 0); transform: translate(25px, -3px); }
  84.4% { opacity: 0.95; clip-path: inset(50% 0 20% 0); transform: translate(-20px, 2px) skewX(10deg); }
  85%   { opacity: 0.95; clip-path: inset(0 0 60% 0);   transform: translate(14px, 0); }
  85.6% { opacity: 0.95; clip-path: inset(30% 0 30% 0); transform: translate(-9px, 1px); }
}
@keyframes givctf-hero-glitch-b {
  0%, 9.9%, 11.9%, 37.9%, 39.9%, 61.9%, 63.9%, 81.9%, 86.4%, 100% { opacity: 0; clip-path: inset(0 0 100% 0); transform: none; }
  10%   { opacity: 0.9; clip-path: inset(55% 0 20% 0); transform: translate(7px, 2px); }
  10.6% { opacity: 0.9; clip-path: inset(5% 0 70% 0);  transform: translate(-6px, -1px); }
  11.2% { opacity: 0.9; clip-path: inset(70% 0 5% 0);  transform: translate(4px, 1px); }
  38%   { opacity: 0.9; clip-path: inset(35% 0 35% 0); transform: translate(-5px, 0); }
  38.6% { opacity: 0.9; clip-path: inset(0 0 65% 0);   transform: translate(6px, -1px); }
  39.2% { opacity: 0.9; clip-path: inset(60% 0 10% 0); transform: translate(-4px, 1px); }
  62%   { opacity: 0.9; clip-path: inset(5% 0 60% 0);  transform: translate(5px, -1px); }
  62.6% { opacity: 0.9; clip-path: inset(60% 0 15% 0); transform: translate(-7px, 1px); }
  63.2% { opacity: 0.9; clip-path: inset(25% 0 45% 0); transform: translate(3px, 0); }
  82%   { opacity: 0.95; clip-path: inset(60% 0 10% 0); transform: translate(22px, 4px) skewX(8deg); }
  82.6% { opacity: 0.95; clip-path: inset(0 0 75% 0);   transform: translate(-18px, -3px) skewX(-6deg); }
  83.2% { opacity: 0.95; clip-path: inset(25% 0 45% 0); transform: translate(16px, 0) skewX(4deg); }
  83.8% { opacity: 0.95; clip-path: inset(70% 0 0 0);   transform: translate(-25px, 3px); }
  84.4% { opacity: 0.95; clip-path: inset(10% 0 60% 0); transform: translate(20px, -2px) skewX(-10deg); }
  85%   { opacity: 0.95; clip-path: inset(45% 0 25% 0); transform: translate(-14px, 0); }
  85.6% { opacity: 0.95; clip-path: inset(0 0 40% 0);   transform: translate(9px, -1px); }
}
/* El escudo y el rótulo reales también tiemblan; en el grande, mucho más. */
@keyframes givctf-hero-logo-jitter {
  0%, 9.9%, 11.9%, 37.9%, 39.9%, 61.9%, 63.9%, 81.9%, 86.4%, 100% { transform: none; opacity: 1; filter: none; }
  10%   { transform: translate(2px, -1px) skewX(-2deg); opacity: 0.85; }
  10.6% { transform: translate(-3px, 1px); }
  11.2% { transform: translate(1px, 0) skewX(1.5deg); opacity: 0.8; }
  38%   { transform: translate(-2px, 1px) skewX(2deg); opacity: 0.85; }
  38.6% { transform: translate(3px, -1px); }
  39.2% { transform: translate(-1px, 0); opacity: 0.8; }
  62%   { transform: translate(3px, 0) skewX(-2deg); opacity: 0.85; }
  62.6% { transform: translate(-2px, 1px); }
  63.2% { transform: translate(1px, -1px); opacity: 0.8; }
  82%   { transform: translate(-10px, 3px) skewX(-9deg) scale(1.04); opacity: 0.7; filter: contrast(1.6) brightness(1.3); }
  82.6% { transform: translate(12px, -4px) skewX(7deg); opacity: 0.9; filter: invert(0.12) hue-rotate(40deg); }
  83.2% { transform: translate(-7px, 0) scaleX(1.06); opacity: 0.6; }
  83.8% { transform: translate(9px, 2px) skewX(-6deg); opacity: 1; filter: contrast(1.4) saturate(2); }
  84.4% { transform: translate(-13px, -2px) skewX(10deg) scale(0.98); opacity: 0.75; }
  85%   { transform: translate(5px, 1px); opacity: 0.9; filter: invert(0.08); }
  85.6% { transform: translate(-2px, 0) skewX(-2deg); opacity: 1; }
}
@keyframes givctf-hero-title-jitter {
  0%, 9.9%, 11.9%, 37.9%, 39.9%, 61.9%, 63.9%, 81.9%, 86.4%, 100% { transform: none; opacity: 1; }
  10%   { transform: translate(1px, 0); }
  11.2% { transform: translate(-1px, 0); }
  38%   { transform: translate(-1px, 0); }
  39.2% { transform: translate(1px, 0); }
  62%   { transform: translate(1px, 0); }
  63.2% { transform: translate(-1px, 0); }
  82%   { transform: translate(-8px, 2px) skewX(-6deg); opacity: 0.8; }
  82.6% { transform: translate(10px, -2px) skewX(5deg); }
  83.2% { transform: translate(-6px, 0); opacity: 0.6; }
  83.8% { transform: translate(7px, 1px) skewX(-4deg); opacity: 1; }
  84.4% { transform: translate(-11px, -1px) skewX(8deg); opacity: 0.75; }
  85%   { transform: translate(4px, 0); }
  85.6% { transform: translate(-2px, 0); }
}
/* Palabras sueltas: dos golpes por ciclo (30-34 % y 72-74 %), ciclos de 5-9 s. */
@keyframes givctf-word-glitch-a {
  0%, 29.9%, 34.1%, 71.9%, 74.1%, 100% { opacity: 0; clip-path: inset(0 0 100% 0); transform: none; }
  30%   { opacity: 0.9; clip-path: inset(0 0 60% 0);   transform: translate(-5px, -1px); }
  31%   { opacity: 0.9; clip-path: inset(50% 0 15% 0); transform: translate(4px, 1px); }
  32%   { opacity: 0.9; clip-path: inset(25% 0 40% 0); transform: translate(-3px, 0); }
  33%   { opacity: 0.9; clip-path: inset(10% 0 70% 0); transform: translate(6px, 1px); }
  72%   { opacity: 0.9; clip-path: inset(40% 0 30% 0); transform: translate(4px, -1px); }
  73%   { opacity: 0.9; clip-path: inset(0 0 55% 0);   transform: translate(-4px, 0); }
}
@keyframes givctf-word-glitch-b {
  0%, 29.9%, 34.1%, 71.9%, 74.1%, 100% { opacity: 0; clip-path: inset(0 0 100% 0); transform: none; }
  30%   { opacity: 0.9; clip-path: inset(55% 0 10% 0); transform: translate(5px, 1px); }
  31%   { opacity: 0.9; clip-path: inset(5% 0 65% 0);  transform: translate(-4px, -1px); }
  32%   { opacity: 0.9; clip-path: inset(40% 0 30% 0); transform: translate(3px, 0); }
  33%   { opacity: 0.9; clip-path: inset(65% 0 5% 0);  transform: translate(-6px, -1px); }
  72%   { opacity: 0.9; clip-path: inset(10% 0 60% 0); transform: translate(-4px, 1px); }
  73%   { opacity: 0.9; clip-path: inset(60% 0 10% 0); transform: translate(4px, 0); }
}
@keyframes givctf-word-jitter {
  0%, 29.9%, 34.1%, 71.9%, 74.1%, 100% { transform: none; opacity: 1; }
  30%   { transform: translate(1px, 0); opacity: 0.7; }
  31%   { transform: translate(-1px, 0); }
  32%   { transform: translate(1px, 0); opacity: 0.8; }
  33%   { transform: translate(-1px, 0); opacity: 0.9; }
  72%   { transform: translate(-1px, 0); opacity: 0.75; }
  73%   { transform: translate(1px, 0); }
}

/* Banda de barrido: cruza el bloque de identidad durante el glitch grande. */
.givctf-hero-identity { position: relative; }
.givctf-hero-identity::after {
  content: "";
  position: absolute;
  left: -10%;
  right: -10%;
  top: 0;
  height: 14px;
  background: linear-gradient(90deg,
    rgba(0, 217, 255, 0) 0%, rgba(0, 217, 255, 0.35) 20%,
    rgba(255, 255, 255, 0.55) 50%, rgba(255, 51, 102, 0.35) 80%, rgba(255, 51, 102, 0) 100%);
  mix-blend-mode: screen;
  opacity: 0;
  pointer-events: none;
  animation: givctf-hero-band 14s steps(1, end) infinite;
}
@keyframes givctf-hero-band {
  0%, 81.9%, 86.4%, 100% { opacity: 0; top: 0; }
  82%   { opacity: 0.9; top: 8%; }
  82.6% { opacity: 0.9; top: 63%; }
  83.2% { opacity: 0.9; top: 31%; }
  83.8% { opacity: 0.9; top: 88%; }
  84.4% { opacity: 0.9; top: 47%; }
  85%   { opacity: 0.9; top: 15%; }
  85.6% { opacity: 0.9; top: 72%; }
}

@keyframes givctf-hero-focus {
  0%   { opacity: 0; filter: blur(10px); letter-spacing: 0.45em; text-indent: 0.45em; }
  60%  { opacity: 1; filter: blur(0); }
  100% { letter-spacing: 0.14em; text-indent: 0.14em; }
}

/* ---- subtítulo: entra después del rótulo, con cursor de terminal. */
.givctf-fx-sub {
  animation: givctf-hero-rise 0.9s ease-out 0.5s both;
}
.givctf-fx-sub .givctf-hero-sub-txt::after {
  content: "";
  display: inline-block;
  width: 0.55em;
  height: 1em;
  margin-left: 0.35em;
  vertical-align: -0.12em;
  background: var(--accent-cyan);
  box-shadow: 0 0 8px rgba(0, 217, 255, 0.8);
  animation: givctf-hero-blink 1.1s steps(1, end) infinite;
}
@keyframes givctf-hero-rise {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
@keyframes givctf-hero-blink { 50% { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .givctf-hero-emblem, .givctf-hero-emblem .givctf-hero-logo,
  .givctf-hero-emblem::before, .givctf-hero-emblem::after,
  .givctf-fx-title, .givctf-fx-title::before, .givctf-fx-title::after,
  .givctf-fx-word, .givctf-fx-word::before, .givctf-fx-word::after,
  .givctf-hero-identity::after,
  .givctf-console-sheen, .givctf-console-body .givctf-access, .givctf-console-bar i,
  .givctf-console-cursor,
  .givctf-fx-sub, .givctf-fx-sub .givctf-hero-sub-txt::after {
    animation: none;
  }
  .givctf-fx-title::before, .givctf-fx-title::after,
  .givctf-fx-word::before, .givctf-fx-word::after,
  .givctf-hero-emblem::before, .givctf-hero-emblem::after,
  .givctf-hero-identity::after { display: none; }
}

/* ------------------------------------------------ 8. portada: consola ---
 * Sin sesión, la portada es un único panel («consola de acceso») que contiene
 * la identidad a la izquierda y el formulario a la derecha, con una barra de
 * cabecera y un pie de estado en monoespacia y marcas de esquina tipo HUD.
 * El vídeo sigue detrás, más velado y desenfocado dentro del panel. */
.givctf-hero-inner.is-console { max-width: 1140px; }
/* «Cristal líquido» (a la manera del Liquid Glass de iOS 26): sin marco. El
 * panel es un bloque de vidrio de cantos rectos, MUY transparente,
 * que desenfoca, satura y REFRACTA (filtro SVG #givctf-glass, solo Chromium;
 * el resto se queda con el desenfoque) lo que hay detrás. No hay borde ni
 * filo de ningún tipo en el contorno: solo un brillo interior difuso, una
 * sombra interior suave y un reflejo especular que se desplaza despacio. */
.givctf-console {
  position: relative;
  text-align: left;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.10) 0%, rgba(255, 255, 255, 0.03) 35%,
                            rgba(255, 255, 255, 0.01) 60%, rgba(0, 217, 255, 0.05) 100%),
    rgba(10, 18, 28, 0.16);
  /* Sin ninguna línea en el contorno: solo un brillo interior difuso, una
   * sombra interior suave abajo y la sombra que lo despega del fondo. */
  box-shadow:
    inset 0 0 70px rgba(255, 255, 255, 0.06),
    inset 0 -50px 70px -50px rgba(0, 0, 0, 0.30),
    0 40px 90px rgba(0, 0, 0, 0.5);
  -webkit-backdrop-filter: blur(22px) saturate(1.8) brightness(1.08);
          backdrop-filter: blur(22px) saturate(1.8) brightness(1.08);
  -webkit-backdrop-filter: url(#givctf-glass) blur(18px) saturate(1.8) brightness(1.08);
          backdrop-filter: url(#givctf-glass) blur(18px) saturate(1.8) brightness(1.08);
}
/* Sin marco: ni borde ni marcas de esquina. */
.givctf-console::before, .givctf-console::after,
.givctf-console-foot::before, .givctf-console-foot::after { display: none; }
/* Reflejo especular: un óvalo de luz que cruza el cristal muy despacio, y una
 * banda de refracción en la arista superior. */
.givctf-console-sheen {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(ellipse 42% 60% at var(--sheen-x, 20%) 8%,
      rgba(255, 255, 255, 0.20) 0%, rgba(255, 255, 255, 0.06) 45%, rgba(255, 255, 255, 0) 70%),
    radial-gradient(ellipse 30% 40% at calc(100% - var(--sheen-x, 20%)) 100%,
      rgba(0, 217, 255, 0.10) 0%, rgba(0, 217, 255, 0) 70%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.06) 0, rgba(255, 255, 255, 0) 22%);
  animation: givctf-console-sheen 14s ease-in-out infinite alternate;
}
@keyframes givctf-console-sheen {
  from { --sheen-x: 15%; opacity: 0.9; }
  to   { --sheen-x: 85%; opacity: 1; }
}
@property --sheen-x { syntax: "<percentage>"; inherits: false; initial-value: 20%; }
.givctf-console > *:not(.givctf-console-sheen) { position: relative; z-index: 1; }
/* Sin soporte de backdrop-filter, el cristal se vuelve más opaco para que el
 * texto siga leyéndose sobre el vídeo. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .givctf-console { background: rgba(8, 14, 22, 0.9); }
}

.givctf-console-bar,
.givctf-console-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.55rem 1.1rem;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.64rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent-cyan);
}
.givctf-console-bar {
  border-bottom: 1px solid rgba(255, 255, 255, 0.10);
  padding-left: 1.6rem;
  padding-right: 1.6rem;
}
.givctf-console-bar i {
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 0.5rem;
  vertical-align: 0.05em;
  background: var(--accent-lime, #b7f52a);
  box-shadow: 0 0 8px rgba(183, 245, 42, 0.9);
  animation: givctf-hero-blink 1.6s steps(1, end) infinite;
}
.givctf-console-bar span:last-child,
.givctf-console-foot span:last-child { color: #7b8a98; }
.givctf-console-foot {
  position: relative;
  border-top: 1px solid rgba(255, 255, 255, 0.10);
  padding-left: 1.6rem;
  padding-right: 1.6rem;
  color: #93a2b0;
}
.givctf-console-cursor {
  display: inline-block;
  width: 0.55em;
  height: 1em;
  margin-left: 0.4em;
  vertical-align: -0.15em;
  background: var(--accent-cyan);
  box-shadow: 0 0 8px rgba(0, 217, 255, 0.8);
  animation: givctf-hero-blink 1.1s steps(1, end) infinite;
}

/* Cuerpo: identidad | línea | acceso. */
.givctf-console-body {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: clamp(1.5rem, 3vw, 3rem);
  padding: clamp(1.4rem, 3.2vh, 2.4rem) clamp(1.4rem, 3vw, 2.8rem);
}
.givctf-console-body .givctf-hero-identity {
  text-align: center;
  align-self: center;
  padding-right: clamp(0.5rem, 2vw, 1.5rem);
}
/* Dentro de la consola el escudo y el rótulo van algo más contenidos. */
.givctf-console-body .givctf-hero-emblem .givctf-hero-logo { width: clamp(130px, min(22vh, 40vw), 230px); }
.givctf-console-body .givctf-hero-title { font-size: clamp(2rem, min(6vh, 11vw), 3.4rem); }
.givctf-console-body .givctf-hero-lead { font-size: clamp(0.98rem, 1.7vh, 1.1rem); }

/* El formulario pierde su caja propia: ahora la caja es la consola. */
.givctf-console-body .givctf-access {
  max-width: none;
  padding: 0 0 0 clamp(1.5rem, 3vw, 3rem);
  background: none;
  border: 0;
  border-left: 1px solid rgba(255, 255, 255, 0.14);
  /* El bloque de acceso también tiembla con el glitch grande, como el rótulo. */
  animation: givctf-hero-title-jitter 14s steps(1, end) 0.3s infinite;
  box-shadow: none;
  -webkit-backdrop-filter: none;
          backdrop-filter: none;
  align-self: center;
}
.givctf-console-body .givctf-access::before { display: none; }
.givctf-console-body .givctf-access h2 { font-size: 30px; margin-bottom: 6px; }
.givctf-console-body .givctf-access-intro { margin-bottom: 22px; }
.givctf-console-body .givctf-access-form { gap: 14px 16px; }
.givctf-console-body .givctf-access .form-control {
  padding: 0.7rem 0.85rem !important;
  background: rgba(255, 255, 255, 0.06) !important;
  border-color: rgba(255, 255, 255, 0.16) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10);
}
.givctf-console-body .givctf-access .form-control:focus {
  border-color: var(--accent-cyan) !important;
  box-shadow: 0 0 0 1px rgba(0, 217, 255, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}
/* Glitch en los textos del acceso: mismas copias cian/roja que las palabras
 * sueltas, heredando la letra de cada sitio (título, botones). */
.givctf-access .givctf-fx-word::before,
.givctf-access .givctf-fx-word::after { font: inherit; }
.givctf-hero-btn .givctf-fx-word { display: inline-block; }
.givctf-console-body .givctf-access-register {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px dashed rgba(0, 217, 255, 0.2);
}

@media (max-width: 991.98px) {
  .givctf-console-body { grid-template-columns: minmax(0, 1fr); gap: 1.4rem; }
  .givctf-console-body .givctf-hero-identity { padding-right: 0; }
  .givctf-console-body .givctf-access {
    padding: 1.4rem 0 0;
    border-left: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
  }
  .givctf-console-body .givctf-hero-emblem .givctf-hero-logo { width: clamp(110px, 24vw, 150px); }
  .givctf-console-bar span:last-child, .givctf-console-foot span:last-child { display: none; }
}
@media (max-width: 575.98px) {
  .givctf-hero { padding-left: 0.75rem; padding-right: 0.75rem; }
  .givctf-console-body { padding: 1.2rem 1rem; }
  .givctf-console-bar, .givctf-console-foot { font-size: 0.56rem; letter-spacing: 0.12em; }
}

/* ---- consola en /login y /register: errores y textos legales del acceso. */
.givctf-console-body .givctf-access .alert {
  margin: 0 0 14px;
  padding: 0.6rem 0.8rem;
  border-radius: 0;
  font-size: 0.9rem;
}
.givctf-console-body .givctf-access-extra:empty { display: none; }
.givctf-console-body .givctf-access-extra .form-label { display: block; margin: 0 0 6px; }
.givctf-console-body .givctf-access-legal {
  margin: 12px 0 0;
  font-size: 0.82rem;
  color: #93a2b0;
}
.givctf-console-body .givctf-access-legal a { color: var(--accent-cyan); }
/* /login y /register llevan pie de página: la consola no tiene que llenar
 * la ventana entera, basta con centrarse en lo que quede. */
.givctf-hero .givctf-hero-inner.is-console { margin: 0 auto; }

/* ==========================================================================
   BANNERS DE MISIÓN — dos variantes (normal y retro)
   ==========================================================================
   Cada misión puede tener dos imágenes de cabecera, una por modo visual del
   CTF. En el panel se enseñan SIEMPRE las dos por separado, cada una con su
   caja, su vista previa y su estado, para que no haya duda de cuál es cuál.
   Esto no es material de la misión y se mantiene lejos de él.
   ========================================================================== */

.givctf-msl-bnrs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.55rem;
}
.givctf-msl-bnr {
  min-width: 0;
  border: 1px solid var(--border-color);
  padding: 0.4rem;
  background: rgba(6, 10, 15, 0.35);
}
/* La variante que corresponde al modo visual de ahora: la que vería el
   participante. Se marca en cian para que se distinga de un vistazo. */
.givctf-msl-bnr.is-modo { border-color: rgba(0, 217, 255, 0.45); }
.givctf-msl-bnr-cab {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.4rem;
  margin-bottom: 0.35rem;
}
.givctf-msl-bnr-tit {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.6rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-secondary);
}
.givctf-msl-bnr.is-modo .givctf-msl-bnr-tit { color: var(--accent-cyan); }
.givctf-msl-bnr-actual {
  font-size: 0.9em;
  letter-spacing: 0.1em;
  color: var(--accent-cyan);
  opacity: 0.85;
}
.givctf-msl-bnr-estado {
  flex: none;
  padding: 0 0.35rem;
  border: 1px solid var(--border-color);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.54rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #6b7785;
}
.givctf-msl-bnr-estado.is-on { color: var(--accent-green); border-color: rgba(0, 255, 136, 0.35); }
/* Elegido pero aún sin guardar, o marcado para quitar: ámbar, como todo lo
   que está pendiente de confirmar en el panel. */
.givctf-msl-bnr-estado.is-pendiente { color: var(--accent-amber); border-color: rgba(255, 184, 0, 0.45); }
.givctf-msl-bnr-pie {
  margin: 0.35rem 0 0;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.55rem;
  letter-spacing: 0.06em;
  color: #6b7785;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Marcas N / R sobre la miniatura de la tarjeta: qué variantes hay cargadas. */
.givctf-msl-banner-marcas {
  position: absolute;
  right: 0.3rem;
  bottom: 0.3rem;
  display: flex;
  gap: 0.2rem;
}
.givctf-msl-banner-marca {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.1rem;
  height: 1.1rem;
  background: rgba(6, 10, 15, 0.85);
  border: 1px solid var(--border-color);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.54rem;
  color: #566574;
}
.givctf-msl-banner-marca.is-on { color: var(--accent-green); border-color: rgba(0, 255, 136, 0.45); }
.givctf-msl-banner-marca.is-modo { box-shadow: 0 0 0 1px rgba(0, 217, 255, 0.55); }

/* Bloque del editor, bajo la cabecera y separado del material. */
.givctf-mission-view .givctf-mv-bnrs {
  padding: 0.7rem 1rem 0.9rem;
  border-bottom: 1px solid var(--border-color);
}
.givctf-mission-view .givctf-mv-bnrs-cab {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  flex-wrap: wrap;
  margin-bottom: 0.5rem;
}
.givctf-mission-view .givctf-mv-bnrs-cab h3 {
  margin: 0;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-cyan);
}
.givctf-mission-view .givctf-mv-bnrs-cab em {
  font-style: normal;
  font-size: 0.72rem;
  color: var(--text-secondary);
}
.givctf-mission-view .givctf-mv-bnrs .givctf-msl-banner { height: 5.4rem; }
/* Aviso de qué banner enseña la cabecera del editor con el modo de ahora. */
.givctf-mission-view .givctf-mv-chip-banner {
  background: rgba(6, 10, 15, 0.7);
  border-color: rgba(255, 184, 0, 0.45);
  color: var(--accent-amber);
}

/* En la tarjeta del gestor no hay ancho para dos columnas: las cajas van una
   debajo de otra, cada una con su franja de acciones legible. En el editor,
   que ocupa una columna entera, sí caben las dos al lado. */
.givctf-msl-card .givctf-msl-bnrs { grid-template-columns: minmax(0, 1fr); gap: 0.4rem; }
.givctf-msl-card .givctf-msl-banner { height: 3.6rem; }

@media (max-width: 700px) {
  .givctf-msl-bnrs { grid-template-columns: minmax(0, 1fr); }
}

/* ------------------------------------- panel del instructor (reabrir) ---
 * El final especial abre su consola sola al ACTIVAR. Este botón, que solo
 * aparece en las misiones con final de bomba, la vuelve a abrir cuando esa
 * pestaña se ha cerrado a mitad de partida: sin él había que reactivar la
 * misión, y eso reinicia el reloj.
 *
 * Ocupa la fila entera bajo CONFIGURAR, en ámbar (el color de la bomba en el
 * resto de la interfaz), para que no se confunda con las acciones de
 * edición ni con ELIMINAR. Deshabilitado mientras la misión no está en juego,
 * que es cuando la consola no puede funcionar. */
.givctf-msl-bomba {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  margin-top: 0.35rem;
  border: 1px solid var(--accent-amber, #f59e0b);
  background: transparent;
  color: var(--accent-amber, #f59e0b);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.givctf-msl-bomba:hover:not(:disabled) {
  background: var(--accent-amber, #f59e0b);
  color: #1a1206;
}
.givctf-msl-bomba.is-off,
.givctf-msl-bomba:disabled {
  border-color: var(--border-color);
  color: var(--text-secondary);
  opacity: 0.45;
  cursor: not-allowed;
}

/* ------------------------------------------------ columnas de la rejilla ---
 * Desplegable para decidir cuántas misiones se ven por fila (3 a 6). Es una
 * preferencia de quien mira, no del CTF: se guarda en el navegador y no toca
 * la base. En pantallas estrechas mandan los cortes responsive, así que lo
 * elegido es un MÁXIMO, no una imposición. */
.givctf-mcol {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.45rem;
  margin: 0 0 0.5rem;
}
.givctf-mcol-lbl {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.66rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-secondary);
}
.givctf-mcol-sel {
  padding: 0.18rem 0.4rem;
  border: 1px solid var(--border-color);
  border-radius: 4px;
  background: var(--bg-primary);
  color: var(--text-primary);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.72rem;
  cursor: pointer;
}
.givctf-mcol-sel:focus {
  outline: none;
  border-color: var(--accent-cyan, #22d3ee);
}
/* Cuando lo elegido no cabe, se dice: si no, parece que el desplegable no
   funciona. */
.givctf-mcol-nota {
  font-size: 0.66rem;
  color: var(--text-secondary);
  opacity: 0.75;
}
@media (max-width: 820px) {
  .givctf-mcol { display: none; }   /* en una columna no hay nada que elegir */
}

/* ------------------------------- bloc de resolución: ancho ajustable ---
 * El bloc sigue siendo el cajón de la derecha: se despliega igual, ocupa todo
 * el alto y no se mueve de sitio. Lo único nuevo es que su BORDE IZQUIERDO se
 * agarra y se estira para ensancharlo y ver más texto de una vez.
 *
 * El texto de dentro no necesita nada: el textarea ya es `width: 100%` y
 * `flex: 1 1 auto`, así que se ensancha con el bloc. */
.givctf-res-borde {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 8px;
  cursor: ew-resize;
  touch-action: none;
  background: transparent;
  transition: background 120ms ease;
}
/* Una barrita que aparece al acercarse, para que se vea que ahí se agarra. */
.givctf-res-borde::before {
  content: "";
  position: absolute;
  left: 3px;
  top: 50%;
  width: 2px;
  height: 46px;
  transform: translateY(-50%);
  border-radius: 2px;
  background: var(--border-color);
  transition: background 120ms ease, height 120ms ease;
}
.givctf-res-borde:hover::before,
.givctf-res-borde:focus-visible::before,
.givctf-res.is-estirando .givctf-res-borde::before {
  background: var(--accent-amber, #f59e0b);
  height: 90px;
}
.givctf-res-borde:focus-visible { outline: none; }

/* Mientras se estira: sin selección de texto y sin que el textarea robe el
   puntero al cruzarlo. */
.givctf-res.is-estirando { user-select: none; }
.givctf-res.is-estirando .givctf-res-texto { pointer-events: none; }

/* «Ancho normal»: vuelve a los 500 px de siempre. Discreto, en el pie, junto
   al estado de guardado. */
.givctf-res-reset {
  margin-left: auto;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-secondary);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.1rem 0.4rem;
  border-radius: 3px;
  cursor: pointer;
}
.givctf-res-reset:hover {
  color: var(--text-primary);
  border-color: var(--border-color);
}

/* ------------------------- cabecera de la tarjeta a muchas columnas ---
 * La cabecera (selección · estado · borrador · dificultad · flechas) es una
 * fila flex que no envolvía: con 5 o 6 columnas la tarjeta se estrecha, deja
 * de caber y se desbordaba HACIA FUERA de la rejilla, provocando scroll
 * horizontal en toda la página. Se deja envolver y encoger; el grupo de
 * flechas no se parte por la mitad. */
.givctf-msl-top {
  flex-wrap: wrap;
  row-gap: 0.35rem;
  min-width: 0;
}
.givctf-msl-top > * { min-width: 0; }
.givctf-msl-mover { flex: none; margin-left: auto; }
.givctf-msl-dif { flex: 0 1 auto; overflow: hidden; text-overflow: ellipsis; }