@font-face {
  font-family: Pixel;
  src: url("/assets/pixel.woff2") format("woff2");
  font-display: swap;
}
:root {
  /* Sin esto, el navegador del celular agranda el texto por su cuenta al girarlo a horizontal. */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  font-family: Arial, Helvetica, sans-serif;
  color: #173e35;
  background: #f6f8f2;
  --ink: #173e35;
  --green: #c6ed86;
  --line: #d6ded5;
  --paper: #fff;
  --muted: #506259;
  letter-spacing: 0;
  color-scheme: light;
}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
}
button,
input,
select {
  font: inherit;
}
button,
a,
input,
summary {
  touch-action: manipulation;
}
button {
  cursor: pointer;
}
button:disabled {
  cursor: wait;
  opacity: 0.6;
}
a {
  color: inherit;
  text-underline-offset: 4px;
}
button:focus-visible,
a:focus-visible,
input:focus-visible,
summary:focus-visible {
  outline: 3px solid #08768a;
  outline-offset: 4px;
}
::selection {
  background: #c6ed86;
  color: #173e35;
}
input {
  caret-color: #173e35;
}
body::-webkit-scrollbar {
  width: 10px;
}
body::-webkit-scrollbar-thumb {
  background: #768e7d;
}
h1,
h2,
h3,
p {
  margin: 0;
}
p {
  line-height: 1.6;
}
svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.topbar {
  height: 94px;
  padding: 0 5%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--line);
  gap: 20px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  font-size: 13px;
  line-height: 1.35;
  font-weight: 800;
}
.brand svg {
  width: 38px;
  height: 42px;
}
.edition {
  font-size: 14px;
  color: var(--muted);
}
.icon-button {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 4px;
}
.icon-button:hover {
  background: #e6ecdf;
}
main {
  min-height: calc(100svh - 155px);
}
footer {
  padding: 20px 5%;
  display: flex;
  justify-content: space-between;
  gap: 20px;
  font-size: 12px;
  color: var(--muted);
  border-top: 1px solid var(--line);
}
.welcome {
  position: relative;
  min-height: 640px;
  display: grid;
  grid-template-columns: 1fr 390px;
  align-items: center;
  padding: 48px 6%;
  gap: 40px;
  overflow: hidden;
  background: #b5ddd1;
}
.world {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
}
.welcome-copy {
  position: relative;
  align-self: start;
  padding-top: 12px;
  max-width: 580px;
  pointer-events: none;
}
.welcome h1 {
  font-family: Pixel, monospace;
  font-size: 52px;
  line-height: 1.24;
  font-weight: 400;
  text-wrap: balance;
  max-width: 570px;
}
.welcome-copy p {
  max-width: 405px;
  margin-top: 20px;
  font-size: 18px;
  color: #173e35;
  background: #b5ddd1;
  padding: 6px 0;
}
.start-panel {
  position: relative;
  background: #fff;
  padding: 28px;
  border: 1px solid #173e35;
  border-radius: 6px;
  box-shadow: 0 12px 30px #173e3520;
}
.start-panel h2 {
  font-size: 23px;
  margin-bottom: 8px;
}
.subtle {
  font-size: 14px;
  color: var(--muted);
}
.avatars {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 22px 0;
}
.avatar-option {
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: 8px;
  background: #f3f5ee;
  border: 2px solid transparent;
  border-radius: 4px;
  padding: 10px 4px;
  font-size: 12px;
  color: var(--ink);
}
.avatar-option[aria-pressed="true"] {
  border-color: var(--ink);
  background: #e4f3d1;
}
.avatar-option:hover {
  background: #e4f3d1;
}
.sprite {
  width: 56px;
  height: 72px;
  image-rendering: pixelated;
}
.uniforms {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: -10px 0 18px;
}
.uniform-option {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  padding: 6px 8px;
  background: #f3f5ee;
  border: 2px solid transparent;
  border-radius: 4px;
  color: var(--ink);
  font-size: 12px;
  line-height: 1.25;
  text-align: left;
}
.uniform-option small {
  display: block;
  color: var(--muted);
  font-size: 11px;
}
.uniform-option[aria-pressed="true"] {
  border-color: var(--ink);
  background: #e4f3d1;
}
.uniform-option:hover {
  background: #e4f3d1;
}
.swatch {
  flex: 0 0 18px;
  height: 22px;
  border: 1px solid #173e35;
  border-radius: 4px;
  background: linear-gradient(90deg, transparent 58%, #f85000 58% 70%, #fdb31e 70% 82%, #15bed6 82% 94%, transparent 94%) 0 5px / 100% 3px no-repeat;
}
.swatch-blanca {
  background-color: #f2f4f1;
}
.swatch-marino {
  background-color: #1f2f55;
}
.swatch-gris {
  background-color: #8d949a;
}
.field {
  display: block;
  font-size: 13px;
  font-weight: 700;
  margin: 14px 0;
}
.field input,
.field select {
  display: block;
  width: 100%;
  margin-top: 8px;
  padding: 12px;
  border: 1px solid #899d91;
  border-radius: 3px;
  background: #fff;
  color: var(--ink);
}
/* Sin `appearance: none` cada navegador le da su propio alto y el selector no alinea con los
   campos de texto de arriba y de abajo. La flecha se dibuja con dos degradados. */
.field select {
  appearance: none;
  padding-right: 34px;
  background-image: linear-gradient(45deg, transparent 50%, #173e35 50%), linear-gradient(135deg, #173e35 50%, transparent 50%);
  background-position: right 16px top 18px, right 11px top 18px;
  background-size: 5px 5px;
  background-repeat: no-repeat;
}
.field select:invalid {
  color: #506259;
}
.field small {
  font-weight: 400;
  color: var(--muted);
}
.consent {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: 12px;
  line-height: 1.5;
  margin: 18px 0;
}
.consent input {
  accent-color: #173e35;
  min-width: 17px;
  height: 17px;
  margin: 1px 0;
}
.primary,
.secondary {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 12px 20px;
  border-radius: 4px;
  font-weight: 700;
  border: 1px solid var(--ink);
  text-decoration: none;
}
.primary {
  background: var(--ink);
  color: #fff;
}
.primary:hover {
  background: #285849;
}
.secondary {
  background: transparent;
  color: var(--ink);
}
.secondary:hover {
  background: #e7eedf;
}
.wide {
  width: 100%;
}
.error {
  color: #a32b29;
  font-size: 14px;
  line-height: 1.5;
  margin: 12px 0;
}
.journey-note {
  padding: 24px 6%;
  display: flex;
  justify-content: space-between;
  gap: 24px;
}
.journey-note span {
  font-size: 14px;
}
.journey-note strong {
  display: block;
  margin-bottom: 6px;
  font-size: 16px;
}
.play {
  max-width: 1400px;
  margin: auto;
  padding: 30px 4% 42px;
}
.play-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-bottom: 24px;
}
.play-top h1 {
  font-size: 23px;
}
.progress {
  display: flex;
  gap: 5px;
  margin-top: 10px;
}
.progress i {
  width: 38px;
  height: 5px;
  background: #d5dfd0;
}
.progress i.done {
  background: #29754c;
}
.score {
  flex-shrink: 0;
  white-space: nowrap;
  font-family: Pixel, monospace;
  font-size: 17px;
  text-align: right;
}
.game-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 400px;
  gap: 30px;
  align-items: start;
}
.scene {
  position: relative;
  height: 480px;
  overflow: hidden;
  background: #b5ddd1;
  border-radius: 4px;
}
.scene canvas {
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
}
.scene-label {
  position: absolute;
  left: 18px;
  top: 18px;
  background: #fff;
  padding: 10px 14px;
  font-size: 14px;
  font-weight: 700;
}
.hotspot {
  position: absolute;
  left: 50%;
  top: 52%;
  transform: translate(-50%, -50%);
  background: #fff;
  color: var(--ink);
  border: 2px solid var(--ink);
  border-radius: 4px;
  padding: 14px 18px;
  font-weight: 700;
  box-shadow: 0 6px 20px #173e3540;
  animation: float 2.4s ease-in-out infinite;
}
.hotspot:hover {
  background: var(--green);
}
.scene-caption {
  margin-top: 14px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--muted);
}
.mission {
  padding: 8px 0;
}
.mission h2 {
  font-size: 28px;
  line-height: 1.15;
  margin-bottom: 16px;
}
.mission > p {
  margin-bottom: 20px;
}
.message {
  background: #fff;
  border: 1px solid #b8c9bc;
  border-radius: 4px;
  padding: 20px;
  margin: 20px 0;
  white-space: pre-line;
  line-height: 1.6;
  font-size: 15px;
}
.choices {
  display: grid;
  gap: 10px;
}
.choice {
  display: flex;
  align-items: center;
  gap: 13px;
  text-align: left;
  min-height: 66px;
  border: 1px solid #a4b7a8;
  border-radius: 4px;
  background: #fff;
  color: var(--ink);
  padding: 14px;
  font-size: 15px;
  line-height: 1.35;
}
.choice:hover {
  background: #edf5e1;
  border-color: var(--ink);
}
.choice .choice-number {
  display: grid;
  place-items: center;
  flex: 0 0 25px;
  height: 25px;
  background: #e9efe5;
  border-radius: 50%;
  font-size: 12px;
  font-weight: bold;
}
.feedback {
  border-top: 3px solid #30774f;
  padding: 22px 0;
  margin-top: 18px;
}
.feedback h3 {
  font-size: 22px;
  margin-bottom: 12px;
}
.feedback p {
  margin-bottom: 20px;
}
.feedback.learn {
  border-color: #a76829;
}
.floor {
  background: #1b222b;
  border-radius: 4px;
  padding: 10px;
}
.floor:focus-visible {
  outline: 3px solid #08768a;
  outline-offset: 4px;
}
.floor-hud {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 0 2px 8px;
  color: #e8edf0;
  font-family: Pixel, monospace;
  font-size: 15px;
}
.floor-hud b {
  color: var(--green);
  font-weight: 400;
}
.floor canvas {
  display: block;
  margin: 0 auto;
  max-width: 100%;
  height: auto;
  image-rendering: pixelated;
  cursor: pointer;
}
.map-stage {
  position: relative;
  overflow: hidden;
}
.minimap-wrap {
  position: absolute;
  right: 12px;
  bottom: 12px;
  padding: 7px 9px 9px;
  color: #e8edf0;
  background: #1b222bea;
  border: 1px solid #b9cfb4;
  pointer-events: none;
}
.minimap-wrap span {
  display: block;
  margin-bottom: 5px;
  font-size: 11px;
  font-weight: 700;
}
.floor .minimap {
  display: block;
  width: 104px;
  height: 60px;
  image-rendering: pixelated;
  cursor: default;
}
.floor .minimap svg { display: block; width: 100%; height: 100%; stroke: none; }
.floor-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin-top: 12px;
}
.keys {
  flex: 1 1 260px;
  font-size: 13px;
  color: var(--muted);
}
.act {
  flex: 1 0 190px;
  max-width: 100%;
}
.act:disabled {
  cursor: default;
}
.pad {
  display: none;
  grid-template-columns: repeat(3, 48px);
  grid-template-rows: repeat(2, 48px);
  gap: 4px;
  flex: 0 0 auto;
}
.pad button {
  background: #e9efe5;
  border: 1px solid #a4b7a8;
  border-radius: 4px;
  color: var(--ink);
  font-size: 16px;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
}
.pad .up {
  grid-column: 2;
}
.pad .left {
  grid-row: 2;
}
.pad .down {
  grid-row: 2;
}
.pad .right {
  grid-row: 2;
}
.shortcuts {
  margin-top: 20px;
}
.shortcuts-title {
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 8px;
}
#shortcuts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.shortcut {
  min-height: 44px;
  padding: 8px 12px;
  border: 1px solid #a4b7a8;
  border-radius: 4px;
  background: #fff;
  color: var(--ink);
  font-size: 14px;
}
.shortcut:hover {
  border-color: var(--ink);
}
.shortcut.done {
  background: #e4f3d1;
  border-color: #29754c;
}
.place {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 8px;
}
.mission .subtle {
  margin-top: 12px;
}
.mission .ask {
  font-weight: 700;
  margin: 18px 0 10px;
}
.mission .leave {
  margin-top: 18px;
}
.mail {
  display: grid;
  gap: 6px;
  background: #fff;
  border: 1px solid #b8c9bc;
  border-radius: 4px;
  padding: 16px 18px;
  margin: 14px 0 8px;
  font-size: 15px;
  line-height: 1.7;
  overflow-wrap: anywhere;
}
.incident-prop {
  overflow: hidden;
  margin: 18px 0 10px;
  border: 2px solid #344b45;
  border-radius: 8px;
  background: #f8fbf5;
}
.prop-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 15px;
  color: #fff;
  background: #173e35;
  font-family: Pixel, monospace;
  font-size: 15px;
}
.prop-body {
  padding: 20px;
}
.prop-body strong {
  display: block;
  font-size: 16px;
}
.prop-body p {
  margin-top: 17px;
  padding: 15px;
  border: 1px solid #b8c9bc;
  background: #fff;
  line-height: 1.55;
}
.prop-body small {
  display: block;
  margin-top: 12px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.4;
}
.prop-prompt {
  margin: 22px 0 10px;
  font-size: 16px;
}
.prop-body .choices { gap: 8px; }
.prop-body .choice { min-height: 58px; }
.prop-body .choice-number { flex-basis: 25px; }
.prop-body .reveal {
  margin-top: 20px;
  min-height: 48px;
}
.incident-prop.phone {
  border-radius: 22px;
  background: #202a35;
  color: #fff;
}
.phone .prop-head {
  background: #202a35;
  border-bottom: 1px solid #5c7080;
}
.phone .prop-body {
  padding: 26px 20px;
}
.phone .prop-body p {
  max-width: 30ch;
  margin-left: auto;
  border-radius: 16px 16px 3px 16px;
  color: #173e35;
}
.phone .prop-body small {
  color: #d6e3df;
}
.phone .prop-prompt { color: #fff; }
.phone .choice {
  background: #dce8e6;
  color: #173e35;
  border-color: #9ab6ae;
}
.phone .choice:hover { background: #c6ed86; }
.phone .reveal {
  background: #c6ed86;
  color: #173e35;
}
.usb .prop-head { background: #46505b; }
.usb .prop-body { background: #ecece4; }
.usb .choice { background: #fffef7; border-color: #a5aaa2; }
.wifi .prop-body { background: #e8f0ef; }
.wifi .prop-body p { border-radius: 8px; }
.wifi .choice { background: #fff; border-color: #95b6bb; }
.password .prop-head { background: #314c6d; }
.password .prop-body { background: #eef3f8; }
.password .choice { background: #fff; }
.choices.phone .choice { border-radius: 12px; }
.choices.wifi .choice { border-radius: 8px; }
.choices.password .choice { border-color: #7890a8; }
@media (max-width: 720px) {
  .minimap-wrap { right: 7px; bottom: 7px; padding: 5px; }
  .minimap-wrap span { display: none; }
  .floor .minimap { width: 78px; height: 45px; }
}
.clue {
  display: inline;
  background: none;
  border: 0;
  border-bottom: 2px dotted #8aa093;
  padding: 0 2px;
  color: inherit;
  text-align: left;
  line-height: inherit;
}
.clue:hover {
  background: #f1f5ec;
}
.clue.found {
  background: #ffe0da;
  border-bottom-color: #a32b29;
}
.clue.fine {
  background: #e4f3d1;
  border-bottom-color: #29754c;
}
.clue-count {
  font-size: 14px;
  color: var(--muted);
}
.floor-caption {
  margin: 8px 0 0;
  padding: 8px 2px 0;
  border-top: 1px solid #3a4654;
  color: #e8edf0;
  font-size: 15px;
  line-height: 1.45;
}
.beats {
  display: grid;
  gap: 8px;
  margin: 14px 0;
  padding-left: 22px;
  line-height: 1.5;
}
.mission .skip {
  margin-top: 6px;
}
.consequence {
  margin: 16px 0 4px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
.consequence h3 {
  font-size: 18px;
}
.consequence .beats {
  margin-bottom: 0;
}
.feedback .actions {
  margin-top: 4px;
}
.end .tower {
  display: block;
  width: 100%;
  height: 280px;
  margin: 8px 0 26px;
  border-radius: 4px;
  image-rendering: pixelated;
}
/* Palanca y boton A: solo en pantallas tactiles; con raton se usan teclas o clic en el piso. */
.stick,
.act-letter,
.act-caption {
  display: none;
}
@media (hover: none), (pointer: coarse) {
  .stick {
    display: block;
  }
  .keys {
    display: none;
  }
  .act-letter {
    display: block;
  }
}
.end {
  max-width: 1000px;
  margin: auto;
  padding: 50px 6%;
}
.end h1 {
  font-family: Pixel, monospace;
  font-size: 36px;
  line-height: 1.4;
  margin: 18px 0;
}
.end-banner {
  background: #dcefcc;
  padding: 28px;
  display: flex;
  align-items: center;
  gap: 28px;
  margin-bottom: 30px;
}
.end-banner .sprite {
  width: 84px;
  height: 108px;
}
.end-banner strong {
  font-size: 32px;
  display: block;
  margin-bottom: 8px;
}
/* Tira de cinco marcas junto al puntaje: de un vistazo se ve donde se acerto y donde no. */
.strip {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
  padding: 0;
  list-style: none;
}
.strip li {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  font-size: 13px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
}
.strip .right span {
  color: #29754c;
  font-weight: 700;
}
.strip .wrong span {
  color: #a32b29;
  font-weight: 700;
}
.end-sub {
  margin-top: 36px;
  font-size: 22px;
}
.lessons {
  display: grid;
  gap: 14px;
  margin: 18px 0 30px;
}
/* Cada decision se cuenta entera: que elegiste, que convenia, que paso y que te llevas. Antes
   era un desplegable con una sola linea y no se recordaba ni la propia respuesta. */
.lesson {
  padding: 18px 20px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
}
.lesson header {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 12px;
}
.lesson-mark {
  flex: 0 0 30px;
  height: 30px;
  display: grid;
  place-items: center;
  font-weight: 700;
  border-radius: 50%;
  background: #e4f3d1;
  color: #29754c;
}
.lesson.wrong .lesson-mark {
  background: #ffe0da;
  color: #a32b29;
}
.lesson h3 {
  font-size: 19px;
}
.lesson dl {
  display: grid;
  grid-template-columns: 142px minmax(0, 1fr);
  gap: 6px 16px;
  margin: 0;
}
.lesson dt {
  font-size: 13px;
  font-weight: 700;
  color: var(--muted);
}
.lesson dd {
  margin: 0;
  line-height: 1.5;
}
.lesson dd.better {
  color: #29754c;
  font-weight: 700;
}
@media (max-width: 720px) {
  .lesson dl {
    grid-template-columns: 1fr;
    gap: 2px;
  }
  .lesson dt {
    margin-top: 10px;
  }
}
.actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.admin {
  max-width: 1100px;
  padding: 40px 5%;
  margin: auto;
}
.admin h1 {
  margin-bottom: 24px;
}
.admin .field {
  max-width: 440px;
}
.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
  gap: 20px 24px;
  padding: 26px 0;
}
.stats strong {
  font-size: 30px;
  display: block;
}
.table-wrap {
  overflow: auto;
  margin: 22px 0;
}
table {
  border-collapse: collapse;
  width: 100%;
  font-size: 14px;
  text-align: left;
}
td,
th {
  padding: 12px;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
th {
  background: #e9efe5;
}
.loading {
  padding: 80px 6%;
  font-size: 20px;
}
.privacy {
  font-size: 12px;
  color: var(--muted);
  margin-top: 12px;
}
.empty {
  padding: 30px 0;
  color: var(--muted);
}
/* Panel de organizadores: el numero que se compara es el del tema; el detalle por caso se abre aparte. */
.hint {
  margin: 6px 0 0;
  font-size: 13px;
  line-height: 1.45;
  color: var(--muted);
}
details.variants {
  margin: 0 0 22px;
}
details.variants summary {
  padding: 8px 0;
  font-size: 14px;
  color: var(--muted);
  cursor: pointer;
}
details.variants .table-wrap {
  margin: 8px 0 0;
}
/* ---------- Panel de organizadores: graficas ---------- */
/* Las barras son cajas, no SVG ni libreria: la politica de contenido del sitio no permite
   scripts de fuera, y una barra horizontal con su cifra al lado se lee mejor que un grafico
   de pastel para comparar. El dato siempre va escrito; la barra solo lo hace visible. */
#report section {
  margin: 38px 0;
}
#report h2 {
  font-size: 22px;
  margin-bottom: 6px;
}
.bar {
  display: block;
  height: 10px;
  border-radius: 4px;
  background: #e9efe5;
  overflow: hidden;
}
.bar i {
  display: block;
  height: 100%;
  border-radius: 4px;
  background: #29754c;
}
.bar.bad i {
  background: #e0564f;
}
.themes {
  display: grid;
  gap: 14px;
  margin-top: 18px;
  grid-template-columns: repeat(auto-fit, minmax(310px, 1fr));
}
.theme {
  padding: 16px 18px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
}
.theme header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 14px;
}
.theme h3 {
  font-size: 17px;
}
.place-note {
  font-size: 13px;
  color: var(--muted);
}
.theme-score {
  text-align: right;
  white-space: nowrap;
}
.theme-score strong {
  display: block;
  font-size: 26px;
  line-height: 1.1;
}
.theme-score span {
  font-size: 12px;
  color: var(--muted);
}
.options,
.units,
.funnel {
  list-style: none;
  margin: 0;
  padding: 0;
}
.options li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 84px 34px;
  align-items: center;
  gap: 10px;
  padding: 5px 0;
  font-size: 14px;
}
.options .wrong .opt-name {
  color: var(--muted);
}
.opt-name {
  overflow-wrap: anywhere;
}
.opt-count {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.units {
  margin-top: 18px;
}
.units li,
.funnel li {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr) 52px;
  align-items: center;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid var(--line);
  font-size: 14px;
}
.unit-num,
.funnel-num {
  text-align: right;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.unit-note {
  grid-column: 1 / -1;
  margin-top: -6px;
  font-size: 12px;
  color: var(--muted);
}
.funnel {
  margin-top: 18px;
}
.funnel li {
  grid-template-columns: 116px minmax(0, 1fr) 52px;
}
.filters {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 14px;
  margin: 16px 0 4px;
}
.filters label {
  display: grid;
  gap: 5px;
  font-size: 13px;
  font-weight: 700;
}
.filters select {
  min-width: 170px;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  color: var(--ink);
}
.filter-count {
  padding-bottom: 9px;
  font-size: 13px;
  color: var(--muted);
}
td.num {
  font-variant-numeric: tabular-nums;
}
/* Lo que eligio cada persona, decision por decision: antes solo decia la letra de la opcion. */
.picks {
  margin: 10px 0 4px;
  padding-left: 18px;
  font-size: 13px;
}
.picks li {
  padding: 3px 0;
}
.picks li b {
  display: block;
  font-weight: 700;
}
.picks li span {
  white-space: normal;
}
.picks .wrong span {
  color: #a32b29;
}
.picks .right span {
  color: #29754c;
}
/* La celda de decisiones es la unica que envuelve texto: si no, al abrir el detalle la tabla
   crece a lo ancho, aparece barra horizontal y la primera columna queda fuera de la vista. */
#report td details {
  white-space: normal;
}
#report td:last-child {
  max-width: 330px;
  white-space: normal;
}
/* Siete columnas dejan de caber bastante antes que el resto del panel, asi que la tabla de
   recorridos tiene su propio punto de quiebre: por debajo, cada recorrido es una tarjeta con
   sus etiquetas al lado. El HTML sigue siendo una tabla, para no mantener dos marcados. */
@media (max-width: 900px) {
  #report table,
  #report tbody,
  #report tr,
  #report td {
    display: block;
  }
  #report thead {
    display: none;
  }
  #report tbody tr {
    margin-bottom: 12px;
    padding: 6px 14px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 8px;
  }
  #report tbody td {
    display: grid;
    grid-template-columns: 88px minmax(0, 1fr);
    gap: 10px;
    max-width: none;
    padding: 7px 0;
    white-space: normal;
    border-bottom: 0;
  }
  #report tbody td + td {
    border-top: 1px solid var(--line);
  }
  #report tbody td::before {
    content: attr(data-label);
    font-weight: 700;
    font-size: 13px;
  }
}
.cases {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
}
.cases li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 140px 46px;
  align-items: center;
  gap: 12px;
  padding: 7px 0;
  border-bottom: 1px solid var(--line);
  font-size: 14px;
}
.case-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.case-note {
  grid-column: 1 / -1;
  margin-top: -5px;
  font-size: 12px;
  color: var(--muted);
}
@media (max-width: 720px) {
  .themes {
    grid-template-columns: 1fr;
  }
  .cases li {
    grid-template-columns: minmax(0, 1fr) 70px 42px;
  }

  .units li,
  .funnel li {
    grid-template-columns: 104px minmax(0, 1fr) 46px;
    gap: 9px;
    font-size: 13px;
  }
  .options li {
    grid-template-columns: minmax(0, 1fr) 56px 30px;
  }
  .filters select {
    min-width: 0;
    width: 100%;
  }
  .filters label {
    flex: 1 1 140px;
  }
}
/* Vaciar recorridos: va al final, plegado y con su propia palabra de confirmacion, para que
   nadie borre la actividad de un grupo buscando el boton de exportar. */
details.wipe {
  margin: 34px 0 10px;
  padding: 14px 16px;
  border: 1px solid #a32b29;
  border-radius: 8px;
  background: #ffe0da;
}
details.wipe summary {
  font-weight: 700;
  color: #a32b29;
  cursor: pointer;
}
details.wipe p {
  margin: 10px 0 14px;
  max-width: 62ch;
  font-size: 14px;
  line-height: 1.5;
}
details.wipe form {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}
details.wipe label {
  font-size: 14px;
}
/* Cada etiqueta pegada a su campo. El formulario es una fila que envuelve, y en el de borrar
   una parte hay tres campos: sueltas, a 390 px las etiquetas caian al lado del campo de
   al lado y parecia que "Desde" nombraba al numero de empleado. */
details.wipe .campo {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
details.wipe #cuantos {
  flex-basis: 100%;
}
details.wipe #cuantos p {
  margin: 4px 0 10px;
}
details.wipe input {
  min-width: 10ch;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
}
button.danger {
  min-height: 44px;
  padding: 10px 16px;
  color: #fff;
  font-weight: 700;
  background: #a32b29;
  border: 1px solid #8a2a24;
  border-radius: 6px;
  cursor: pointer;
}
button.danger:hover {
  background: #8a2a24;
}
button.danger:disabled {
  opacity: 0.6;
  cursor: default;
}
@keyframes float {
  50% {
    translate: 0 -6px;
  }
}
@media (min-width: 1500px) {
  .welcome {
    min-height: 710px;
    padding-left: 10%;
    padding-right: 10%;
  }
  .welcome-copy {
    padding-top: 30px;
  }
}
@media (max-width: 1000px) {
  .welcome {
    grid-template-columns: 1fr 350px;
    padding: 35px 4%;
    gap: 20px;
  }
  .welcome h1 {
    font-size: 38px;
  }
  .game-layout {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}
@media (max-width: 720px) {
  .topbar {
    height: 76px;
    padding: 0 5%;
  }
  .edition {
    display: none;
  }
  .welcome {
    display: block;
    padding: 30px 5%;
    min-height: auto;
  }
  .welcome-copy {
    padding: 0 0 170px;
  }
  .welcome h1 {
    font-size: 34px;
    max-width: 430px;
  }
  .welcome-copy p {
    font-size: 16px;
    max-width: 340px;
  }
  .start-panel {
    max-width: 440px;
    margin: 0 auto;
    padding: 23px;
  }
  .welcome > .world {
    height: 440px;
  }
  .journey-note {
    flex-wrap: wrap;
    gap: 20px;
  }
  .journey-note span {
    flex: 1 1 130px;
    font-size: 12px;
  }
  .journey-note strong {
    font-size: 14px;
  }
  footer {
    font-size: 11px;
    flex-wrap: wrap;
  }
  .play {
    padding: 24px 5%;
  }
  .play-top h1 {
    font-size: 18px;
  }
  .game-layout {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .scene {
    height: 265px;
  }
  .mission h2 {
    font-size: 26px;
  }
  .scene-caption {
    margin-top: 10px;
  }
  .mission-index {
    display: none;
  }
  .score {
    font-size: 13px;
  }
  .end {
    padding: 25px 5%;
  }
  .end h1 {
    font-size: 27px;
  }
  .end-banner {
    padding: 20px;
    gap: 18px;
  }
  .end-banner strong {
    font-size: 26px;
  }
}
@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    scroll-behavior: auto !important;
  }
}
/* El recorrido es una unica pantalla: mundo, controles y decisiones comparten el marco. */
body.in-game {
  overflow: hidden;
  background: #1b222b;
}
body.in-game .topbar {
  height: 54px;
  padding: 0 24px;
  color: #e8edf0;
  background: #172029;
  border-color: #34434d;
}
body.in-game .brand { font-size: 11px; }
body.in-game .brand svg { width: 29px; height: 32px; }
body.in-game .edition { color: #d3dfdc; }
body.in-game .icon-button { border-color: #52646b; color: #e8edf0; }
body.in-game main { height: calc(100dvh - 54px); min-height: 0; }
body.in-game footer { display: none; }
body.in-game .play,
body.in-game .game-layout { width: 100%; height: 100%; max-width: none; padding: 0; display: block; }
body.in-game .floor {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 0;
  padding: 0;
  background: #1b222b;
}
body.in-game .map-stage {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: #1b222b;
}
body.in-game .floor-map { max-width: none; }
/* Acercamiento de la consecuencia. Va sobre el Canvas ya dibujado y solo mientras dura
   (clase `zooming`), asi el juego normal no arrastra ninguna capa ni transformacion.
   El factor y el punto los pone world.js; cada ancho repite aqui su propio transform
   porque el acercamiento tiene que componerse con el centrado, no sustituirlo. */
body.in-game .floor-map.zooming {
  transform-origin: var(--zoom-x, 50%) var(--zoom-y, 50%);
  transform: translateY(var(--pan-y, 0px)) scale(var(--zoom, 1));
}
body.in-game .play-top {
  position: absolute;
  z-index: 3;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 72px;
  margin: 0;
  padding: 10px 24px;
  color: #e8edf0;
  background: #172029ed;
  border-bottom: 1px solid #52646b;
}
body.in-game .play-top h1 { font-size: 17px; color: #e8edf0; }
body.in-game .progress { margin-top: 6px; }
body.in-game .progress i { background: #51605f; height: 4px; width: 30px; }
body.in-game .progress i.done { background: #c6ed86; }
body.in-game .floor-hud { display: flex; flex-direction: column; gap: 2px; padding: 0; text-align: center; }
body.in-game .floor-hud b { color: #c6ed86; }
body.in-game .score { color: #e8edf0; }
body.in-game .minimap-wrap { z-index: 3; right: 20px; top: 84px; bottom: auto; }
body.in-game .floor-controls {
  position: absolute;
  z-index: 3;
  left: 20px;
  bottom: 20px;
  display: flex;
  align-items: center;
  max-width: min(600px, calc(100% - 40px));
  margin: 0;
  padding: 11px;
  background: #172029ed;
  border: 1px solid #52646b;
  border-radius: 6px;
}
body.in-game .keys { color: #e8edf0; font-size: 13px; }
body.in-game .touch-keys { display: none; }
body.in-game .act { flex: 0 1 230px; min-height: 48px; white-space: normal; }
body.in-game .shortcuts {
  position: absolute;
  z-index: 4;
  right: 20px;
  bottom: 20px;
  max-width: min(470px, calc(100% - 40px));
  margin: 0;
  color: #e8edf0;
  background: #172029ed;
  border: 1px solid #52646b;
  border-radius: 6px;
}
body.in-game .shortcuts summary { padding: 13px 16px; cursor: pointer; font-weight: 700; }
body.in-game #shortcuts { padding: 0 12px 12px; }
body.in-game .shortcut { min-height: 40px; }
body.in-game .floor[data-mode]:not([data-mode="explore"]) .floor-controls,
body.in-game .floor[data-mode]:not([data-mode="explore"]) .shortcuts,
body.in-game .floor[data-mode]:not([data-mode="explore"]) .minimap-wrap { display: none; }
/* Velo que apaga el piso cuando se lee algo encima. En "watch" no va: la consecuencia se
   ve en el piso y el panel ya es opaco. Se excluye aqui, no con un override posterior:
   [data-mode]:not(...) pesa mas que [data-mode="watch"] y el override nunca ganaba. */
body.in-game .floor[data-mode]:not([data-mode="explore"]):not([data-mode="watch"])::before {
  content: "";
  position: absolute;
  z-index: 4;
  inset: 72px 0 0;
  background: #111b23a8;
  pointer-events: none;
}
body.in-game .mission[hidden] { display: none; }
body.in-game .mission {
  position: absolute;
  z-index: 5;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 24px 28px;
  color: #173e35;
  background: #f6f8f2;
  border: 2px solid #a4b7a8;
  border-radius: 8px;
  box-shadow: 0 12px 35px #0c1519a3;
}
body.in-game .mission > h2 { font-size: clamp(23px, 2vw, 31px); margin-bottom: 8px; }
body.in-game .mission > p { margin-bottom: 10px; }
body.in-game .mission .leave { margin-top: 8px; }
body.in-game .floor[data-mode="incident"] .mission {
  top: 50%;
  right: 24px;
  bottom: auto;
  width: min(900px, 70vw);
  max-height: calc(100% - 110px);
  transform: translateY(-50%);
}
body.in-game .email-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; }
body.in-game .email-inspect,
body.in-game .email-decide { min-width: 0; }
body.in-game .mail { margin-top: 8px; padding: 12px; font-size: 14px; line-height: 1.45; }
body.in-game .clue-count { margin: 8px 0; }
body.in-game .email-wait { padding: 20px; background: #e9efe5; line-height: 1.45; }
body.in-game .incident-prop { margin: 14px 0 0; }
body.in-game .prop-body { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 18px; align-items: start; padding: 18px; }
body.in-game .prop-body p { margin-top: 12px; padding: 12px; font-size: 14px; }
body.in-game .prop-body small { margin-top: 8px; }
body.in-game .prop-body .choice { min-height: 54px; padding: 10px; font-size: 14px; }
body.in-game .prop-prompt { margin: 0 0 10px; }
body.in-game .floor[data-mode="talk"] .mission {
  left: 50%;
  bottom: 25px;
  width: min(760px, calc(100% - 48px));
  transform: translateX(-50%);
}
body.in-game .floor[data-mode="watch"] .mission {
  left: 50%;
  bottom: 20px;
  width: min(950px, calc(100% - 48px));
  min-height: 140px;
  transform: translateX(-50%);
  color: #e8edf0;
  background: #172029f2;
  border-color: #52646b;
}
body.in-game .floor[data-mode="watch"] .mission h2,
body.in-game .floor[data-mode="watch"] .mission .place { color: #e8edf0; }
body.in-game .floor[data-mode="watch"] .beats { margin: 10px 0; }
body.in-game .floor[data-mode="watch"] .skip {
  position: absolute;
  right: 20px;
  top: 20px;
  color: #e8edf0;
  background: #23333b;
  border-color: #a4b7a8;
}
body.in-game .floor[data-mode="watch"] .skip:hover { background: #345048; }
body.in-game .floor[data-mode="result"] .mission {
  left: 50%;
  top: 50%;
  width: min(1060px, calc(100% - 48px));
  max-height: calc(100% - 130px);
  transform: translate(-50%, -50%);
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 32px;
  align-items: start;
}
body.in-game .floor[data-mode="result"] .mission > .place,
body.in-game .floor[data-mode="result"] .mission > h2 { grid-column: 1 / -1; }
body.in-game .floor[data-mode="result"] .consequence,
body.in-game .floor[data-mode="result"] .feedback { margin-top: 6px; }
@media (max-width: 1000px) {
  body.in-game .floor[data-mode="incident"] .mission { width: min(650px, 70vw); }
  body.in-game .floor-controls { max-width: 55%; }
}
@media (max-width: 720px) {
  body.in-game .topbar { padding: 0 14px; }
  body.in-game .play-top { height: 66px; min-height: 66px; gap: 8px; padding: 7px 12px; }
  body.in-game .play-top h1 { font-size: 14px; }
  body.in-game .progress i { width: 20px; }
  body.in-game .floor-hud { font-size: 11px; }
  body.in-game .score { font-size: 11px; }
  body.in-game .map-stage { inset: 66px 0 0; display: block; }
  body.in-game .floor-map { position: absolute; top: 0; left: 50%; margin: 0; transform: translateX(-50%); }
  body.in-game .floor-map.zooming { transform: translateX(-50%) translateY(var(--pan-y, 0px)) scale(var(--zoom, 1)); }
  body.in-game .minimap-wrap { top: 75px; right: 8px; }
  body.in-game .floor-controls {
    left: 10px;
    right: 10px;
    bottom: 10px;
    max-width: none;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 8px 12px;
    padding: 8px;
  }
  body.in-game .floor-controls .keys { display: block; grid-column: 1 / -1; font-size: 12px; }
  body.in-game .desktop-keys { display: none; }
  body.in-game .touch-keys { display: inline; }
  body.in-game .pad { display: grid; }
  body.in-game .pad { grid-column: 1; grid-row: 2; }
  body.in-game .act { grid-column: 2; grid-row: 2; width: 100%; align-self: stretch; }
  body.in-game .shortcuts { right: 10px; bottom: 184px; }
  body.in-game .floor[data-mode]:not([data-mode="explore"]):not([data-mode="watch"])::before { inset: 66px 0 0; }
  body.in-game .mission,
  body.in-game .floor[data-mode="incident"] .mission,
  body.in-game .floor[data-mode="result"] .mission,
  body.in-game .floor[data-mode="talk"] .mission {
    left: 0;
    right: 0;
    top: min(32vh, 270px);
    bottom: 0;
    width: auto;
    max-height: none;
    transform: none;
    display: block;
    padding: 18px;
    border-radius: 16px 16px 0 0;
  }
  body.in-game .mission > h2 { font-size: 23px; }
  body.in-game .email-layout,
  body.in-game .prop-body { display: block; }
  body.in-game .email-decide { margin-top: 14px; }
  body.in-game .prop-decision { margin-top: 18px; }
  body.in-game .floor[data-mode="watch"] .mission {
    left: 0;
    right: 0;
    bottom: 0;
    width: auto;
    min-height: 0;
    max-height: 35vh;
    transform: none;
    padding: 14px 18px;
    border-radius: 12px 12px 0 0;
  }
  body.in-game .floor[data-mode="watch"] .skip { position: static; margin-top: 4px; }
}
/* El reconocimiento no se ve en pantalla: existe solo para la hoja impresa. */
.award {
  display: none;
}
@media print {
  .topbar,
  footer,
  .actions,
  .icon-button,
  .end {
    display: none;
  }
  /* Al imprimir se invierte: fuera el recorrido, dentro la hoja. Asi lo que sale no es la
     pagina recortada sino un reconocimiento pensado para una hoja. */
  .award {
    display: block;
  }
  @page {
    margin: 14mm;
  }
  .award-sheet {
    padding: 26mm 20mm;
    text-align: center;
    border: 2px solid #173e35;
    border-radius: 4mm;
  }
  .award-brand {
    font-size: 11pt;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #506259;
  }
  .award h2 {
    margin: 10mm 0 6mm;
    font-family: Pixel, monospace;
    font-size: 30pt;
    font-weight: 400;
  }
  .award-to {
    font-size: 22pt;
    font-weight: 700;
    line-height: 1.25;
  }
  .award-who {
    margin-top: 2mm;
    font-size: 12pt;
    color: #506259;
  }
  .award-why {
    margin: 8mm auto 0;
    max-width: 125mm;
    font-size: 11pt;
    line-height: 1.6;
  }
  .award-score {
    margin: 9mm 0 7mm;
  }
  .award-score strong {
    display: block;
    font-family: Pixel, monospace;
    font-size: 26pt;
  }
  .award-score span {
    font-size: 11pt;
    color: #506259;
  }
  .award-list {
    margin: 0 auto;
    padding: 0;
    max-width: 125mm;
    list-style: none;
    text-align: left;
    font-size: 10.5pt;
  }
  .award-list li {
    display: grid;
    grid-template-columns: 7mm 46mm minmax(0, 1fr);
    gap: 3mm;
    padding: 2mm 0;
    border-bottom: 1px solid #d6ded5;
  }
  .award-list b {
    font-weight: 700;
  }
  .award-date {
    margin-top: 9mm;
    font-size: 11pt;
  }
  .award-foot {
    margin-top: 4mm;
    font-size: 9pt;
    color: #506259;
  }
}

/* ---------- Piso nitido y monitor de incidentes ---------- */
/* El piso ocupa el espacio bajo el HUD; world.js lo amplia por un entero (resize). */
body.in-game .map-stage { inset: 72px 0 0; }
body.in-game .floor-map { height: auto; }
body.in-game .monitor-shell { display: contents; }
/* Los incidentes se leen en la pantalla de un monitor de sobremesa: marco con CSS y pedestal de SpriteLab. */
body.in-game .floor[data-mode="incident"] .monitor-shell {
  display: block;
  position: absolute;
  z-index: 5;
  top: calc(50% - 35px);
  left: 50%;
  width: min(900px, 70vw);
  padding: 6px 6px 12px;
  background: #20262e;
  border: 2px solid #0b0f13;
  border-radius: 10px;
  box-shadow: inset 0 0 0 2px #3a4452, 0 18px 40px #0c1519b3;
  transform: translate(-50%, -50%);
}
body.in-game .floor[data-mode="incident"] .monitor-shell::before {
  content: "";
  position: absolute;
  right: 16px;
  bottom: 5px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #c6ed86;
  box-shadow: 0 0 6px #c6ed86;
}
body.in-game .floor[data-mode="incident"] .monitor-shell::after {
  content: "";
  position: absolute;
  z-index: -1;
  /* Pedestal proporcional al monitor (17 % del ancho, sprite 3:2); el cuello queda detras del marco. */
  top: calc(100% - 34px);
  left: 50%;
  width: 17%;
  aspect-ratio: 3 / 2;
  background: url("/assets/entorno/base-monitor.png") center bottom / 100% 100% no-repeat;
  image-rendering: pixelated;
  transform: translateX(-50%);
}
body.in-game .floor[data-mode="incident"] .monitor-shell .mission {
  position: static;
  width: auto;
  max-height: calc(100dvh - 54px - 16px - 70px - 22px - 4px);
  padding: 8px 20px;
  border: 2px solid #0b0f13;
  border-radius: 4px;
  box-shadow: inset 0 0 0 1px #d6ded5;
  transform: none;
}
body.in-game .floor[data-mode="incident"] .monitor-shell .mission > .place { margin-bottom: 2px; }
body.in-game .floor[data-mode="incident"] .monitor-shell .mission > h2 { font-size: clamp(22px, 1.8vw, 28px); margin-bottom: 4px; }
body.in-game .floor[data-mode="incident"] .monitor-shell .mission > p { margin-bottom: 6px; line-height: 1.45; }
body.in-game .floor[data-mode="incident"] .monitor-shell .incident-prop { margin-top: 8px; }
@media (max-width: 720px) {
  body.in-game .floor[data-mode="incident"] .monitor-shell {
    top: min(32vh, 270px);
    right: 0;
    bottom: 0;
    left: 0;
    width: auto;
    padding: 10px 10px 0;
    border-bottom: 0;
    border-radius: 16px 16px 0 0;
    transform: none;
  }
  body.in-game .floor[data-mode="incident"] .monitor-shell::before { top: 4px; right: 50%; bottom: auto; transform: translateX(3px); }
  body.in-game .floor[data-mode="incident"] .monitor-shell::after { display: none; }
  body.in-game .floor[data-mode="incident"] .monitor-shell .mission {
    height: 100%;
    max-height: none;
    padding: 16px;
    overflow-y: auto;
    border-bottom: 0;
    border-radius: 8px 8px 0 0;
  }
}

/* ---------- Tutorial de primera vez ---------- */
body.in-game .tour {
  position: absolute;
  z-index: 8;
  inset: 0;
  pointer-events: none;
}
body.in-game .tour-ring {
  position: absolute;
  border: 3px solid #c6ed86;
  border-radius: 8px;
  box-shadow: 0 0 0 9999px #0b0f1394;
  animation: tour-pulse 1.6s ease-in-out infinite;
}
body.in-game .tour.no-target .tour-ring {
  inset: 0;
  width: auto !important;
  height: auto !important;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: #0b0f1394;
  animation: none;
}
body.in-game .tour.practicing .tour-ring {
  display: none;
}
@keyframes tour-pulse {
  50% {
    border-color: #f6f8f2;
  }
}
body.in-game .tour-card {
  position: absolute;
  left: 50%;
  bottom: 24px;
  width: min(460px, calc(100% - 32px));
  padding: 18px 20px 14px;
  color: #173e35;
  background: #f6f8f2;
  border: 2px solid #0b0f13;
  border-radius: 8px;
  box-shadow: 0 14px 36px #0c1519b3;
  pointer-events: auto;
  transform: translateX(-50%);
}
body.in-game .tour.no-target .tour-card {
  top: 50%;
  bottom: auto;
  transform: translate(-50%, -50%);
}
body.in-game .tour-card.at-top {
  top: 84px;
  bottom: auto;
}
body.in-game .tour-count {
  margin-bottom: 4px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #506259;
}
body.in-game .tour-card h2 {
  margin-bottom: 6px;
  font-size: 22px;
  line-height: 1.2;
}
body.in-game .tour-card h2:focus {
  outline: none;
}
body.in-game .tour-check {
  margin-top: 8px;
  padding: 6px 10px;
  border-radius: 4px;
  background: #e4f3d1;
  font-weight: 700;
}
body.in-game .tour-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 14px;
}
body.in-game .tour-actions span {
  display: flex;
  gap: 8px;
  margin-left: auto;
}
body.in-game .tour-skip {
  min-height: 44px;
  padding: 0 4px;
  border: 0;
  background: none;
  color: #506259;
  text-decoration: underline;
  text-underline-offset: 4px;
}
body.in-game .tour-card .primary,
body.in-game .tour-card .secondary {
  min-height: 44px;
  padding: 8px 16px;
}
body.in-game .shortcuts .tour-replay {
  width: 100%;
  margin-top: 8px;
}
@media (max-width: 720px) {
  body.in-game .tour-card {
    bottom: 12px;
    padding: 14px 14px 10px;
  }
  body.in-game .tour-card.at-top {
    top: 74px;
  }
  body.in-game .tour-card h2 {
    font-size: 19px;
  }
  body.in-game .tour-card p {
    font-size: 15px;
    line-height: 1.45;
  }
}
@media (prefers-reduced-motion: reduce) {
  body.in-game .tour-ring {
    animation: none;
  }
}

/* ---------- Orden de lectura del incidente ---------- */
/* Una sola columna numerada: lo que pasa, lo que ves y tu decision. */
.read-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}
.read-top .leave {
  flex: 0 0 auto;
  min-height: 40px;
  margin: 2px 0 0;
  padding: 6px 14px;
  font-size: 14px;
}
body.in-game .mission .read-top .leave { margin-top: 2px; }
.reading {
  display: grid;
  gap: 9px;
  margin: 6px 0 0;
  padding: 0;
  list-style: none;
  counter-reset: read;
}
.read-step {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  column-gap: 12px;
  align-items: start;
  counter-increment: read;
}
.read-step::before {
  content: counter(read);
  grid-row: 1 / span 3;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #173e35;
  color: #c6ed86;
  font: 700 13px Arial, Helvetica, sans-serif;
}
.read-step > * {
  grid-column: 2;
}
.read-label {
  font-size: 12px;
  font-weight: 700;
  line-height: 26px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #506259;
}
.read-intro {
  margin: 0;
  font-size: 16px;
  line-height: 1.45;
}
body.in-game .mission .reading p { margin-bottom: 0; }
.read-decide.waiting::before {
  background: #d6ded5;
  color: #506259;
}
.read-wait {
  margin: 0;
  padding: 10px 12px;
  border: 1px dashed #a4b7a8;
  border-radius: 4px;
  color: #506259;
  font-size: 14px;
}
.read-question {
  margin: 0 0 6px;
  font-size: 17px;
}
.read-choices {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
body.in-game .read-choices .choice {
  align-items: flex-start;
  min-height: 54px;
  padding: 8px 10px;
  font-size: 14px;
  line-height: 1.35;
}
.read-hint {
  margin: 0 0 6px;
  font-size: 14px;
  color: #506259;
}
.artifact {
  overflow: hidden;
  border: 2px solid #344b45;
  border-radius: 8px;
  background: #fff;
  color: #173e35;
}
.artifact:focus {
  outline: 3px solid #08768a;
  outline-offset: 2px;
}
.artifact-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 4px 12px;
  color: #fff;
  background: #173e35;
  font: 14px Pixel, monospace;
}
.artifact-body {
  display: grid;
  justify-items: start;
  gap: 6px;
  padding: 12px 14px;
}
.artifact-headline {
  font-size: 18px;
  line-height: 1.3;
}
.artifact-text {
  margin: 0;
  font-size: 15px;
  line-height: 1.5;
}
.artifact small {
  color: #506259;
  font-size: 13px;
  line-height: 1.4;
}
.artifact .reveal {
  min-height: 44px;
  margin-top: 4px;
}
.artifact .mail {
  width: 100%;
  margin: 0;
  padding: 8px 10px;
  gap: 0;
  font-size: 14px;
  line-height: 1.5;
}
.artifact.inbox .artifact-body {
  gap: 4px;
  padding: 8px 12px;
}
.artifact .clue-count {
  margin: 2px 0 0;
  font-size: 13px;
  line-height: 1.4;
}
.artifact.popup .artifact-head { background: #8a2a24; }
.artifact.popup .artifact-headline { color: #a32b29; }
.artifact.phone {
  border-radius: 16px;
  background: #202a35;
  color: #fff;
}
.artifact.phone .artifact-head {
  background: #202a35;
  border-bottom: 1px solid #5c7080;
}
.artifact.phone .artifact-text {
  padding: 8px 12px;
  border-radius: 14px 14px 14px 3px;
  background: #fff;
  color: #173e35;
}
.artifact.phone small { color: #d6e3df; }
.artifact.phone .reveal { background: #c6ed86; color: #173e35; }
.artifact.usb .artifact-head { background: #46505b; }
.artifact.usb .artifact-body { background: #ecece4; }
.artifact.wifi .artifact-body { background: #e8f0ef; }
.artifact.password .artifact-head { background: #314c6d; }
.artifact.password .artifact-body { background: #eef3f8; }
@media (max-width: 720px) {
  .read-top { gap: 10px; }
  .read-top .leave { padding: 6px 10px; font-size: 13px; }
  .read-step { grid-template-columns: 24px minmax(0, 1fr); column-gap: 10px; }
  .read-step::before { width: 24px; height: 24px; }
  .read-label { line-height: 24px; }
  .read-choices { grid-template-columns: 1fr; }
  .artifact-headline { font-size: 17px; }
}

/* ---------- Celular: el juego se juega en horizontal ---------- */
.rotate-notice { display: none; }
@media (orientation: portrait) and (max-width: 720px) {
  body.in-game .rotate-notice {
    position: fixed;
    z-index: 50;
    inset: 0;
    display: grid;
    align-content: center;
    justify-items: center;
    gap: 14px;
    padding: 24px;
    text-align: center;
    color: #e8edf0;
    background: #1b222b;
  }
  body.in-game .rotate-notice h2 { font-size: 24px; color: #e8edf0; }
  body.in-game .rotate-notice p { max-width: 30ch; font-size: 16px; line-height: 1.5; color: #c9d4d8; }
  body.in-game .rotate-notice .primary { background: #c6ed86; border-color: #c6ed86; color: #173e35; }
  body.in-game .rotate-phone {
    width: 46px;
    height: 78px;
    margin-bottom: 6px;
    border: 4px solid #c6ed86;
    border-radius: 9px;
    box-shadow: inset 0 -8px 0 -4px #c6ed86;
    animation: rotate-hint 2.4s ease-in-out infinite;
  }
  body.in-game .game-layout { visibility: hidden; }
}
@keyframes rotate-hint {
  0%, 25% { transform: rotate(0deg); }
  55%, 100% { transform: rotate(-90deg); }
}
@media (prefers-reduced-motion: reduce) {
  body.in-game .rotate-phone { animation: none; transform: rotate(-90deg); }
}

/* Celular en horizontal (o ventana muy baja): barra compacta, controles a los lados y monitor casi a pantalla completa. */
@media (orientation: landscape) and (max-height: 500px) {
  body.in-game .topbar { display: none; }
  body.in-game main { height: 100dvh; }
  body.in-game .play-top { height: 44px; min-height: 44px; gap: 10px; padding: 4px 12px; }
  body.in-game .play-top h1 { font-size: 13px; }
  body.in-game .progress { margin-top: 3px; }
  body.in-game .progress i { width: 18px; height: 3px; }
  body.in-game .floor-hud { font-size: 11px; }
  body.in-game .score { font-size: 11px; }
  body.in-game .map-stage { inset: 44px 0 0; display: grid; place-items: center; }
  body.in-game .floor-map { position: static; margin: 0; transform: none; }
  body.in-game .floor-map.zooming { transform: translateY(var(--pan-y, 0px)) scale(var(--zoom, 1)); }
  body.in-game .minimap-wrap { top: 52px; right: 8px; bottom: auto; padding: 5px; }
  body.in-game .minimap-wrap span { display: none; }
  body.in-game .floor .minimap { width: 78px; height: 45px; }
  body.in-game .floor-controls {
    left: 8px;
    right: auto;
    bottom: 8px;
    display: flex;
    align-items: flex-end;
    gap: 10px;
    max-width: none;
    padding: 6px;
  }
  body.in-game .floor-controls .keys { display: none; }
  body.in-game .shortcuts { top: 52px; right: auto; left: 8px; bottom: auto; }
  body.in-game .floor[data-mode]:not([data-mode="explore"]):not([data-mode="watch"])::before { inset: 44px 0 0; }
  body.in-game .floor[data-mode]:not([data-mode="explore"]):not([data-mode="incident"]) .mission {
    top: auto;
    right: auto;
    bottom: 8px;
    left: 50%;
    width: min(760px, calc(100vw - 24px));
    max-height: calc(100dvh - 60px);
    padding: 12px 16px;
    overflow-y: auto;
    border-radius: 8px;
    transform: translateX(-50%);
  }
  body.in-game .floor[data-mode="incident"] .monitor-shell {
    top: 50%;
    right: auto;
    bottom: auto;
    left: 50%;
    width: min(900px, calc(100vw - 20px));
    padding: 5px 5px 9px;
    border-bottom: 2px solid #0b0f13;
    border-radius: 10px;
    transform: translate(-50%, -50%);
  }
  body.in-game .floor[data-mode="incident"] .monitor-shell::before { top: auto; right: 12px; bottom: 2px; transform: none; }
  body.in-game .floor[data-mode="incident"] .monitor-shell::after { display: none; }
  body.in-game .floor[data-mode="incident"] .monitor-shell .mission {
    height: auto;
    max-height: calc(100dvh - 34px);
    padding: 8px 14px;
    overflow-y: auto;
    border-bottom: 2px solid #0b0f13;
    border-radius: 4px;
  }
  body.in-game .floor[data-mode="incident"] .monitor-shell .mission > .read-top h2,
  body.in-game .mission > h2 { font-size: 19px; }
  /* Poca altura: pasos 1 y 2 a la izquierda y la decision a la derecha, para ver las respuestas sin desplazar. */
  .reading { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); column-gap: 18px; row-gap: 8px; align-items: start; }
  .read-step:nth-child(3) { grid-column: 2; grid-row: 1 / span 2; align-self: start; position: sticky; top: 0; z-index: 1; padding-bottom: 4px; background: #f6f8f2; }
  .read-choices { grid-template-columns: 1fr; gap: 6px; }
  body.in-game .read-choices .choice { min-height: 44px; padding: 6px 8px; font-size: 13px; line-height: 1.3; }
  .read-question { margin-bottom: 4px; font-size: 15px; }
  .read-label { font-size: 11px; }
  .read-intro { font-size: 14px; line-height: 1.4; }
  .artifact-head { padding: 3px 10px; font-size: 12px; }
  .artifact-body { gap: 4px; padding: 8px 10px; }
  .artifact-headline { font-size: 15px; }
  .artifact-text { font-size: 13px; line-height: 1.4; }
  .artifact small { font-size: 12px; }
  .artifact .mail { padding: 6px 8px; font-size: 12px; line-height: 1.4; }
  .artifact.phone .artifact-text { padding: 6px 10px; }
  .read-top .leave { min-height: 36px; padding: 4px 10px; font-size: 12px; }
  body.in-game .floor[data-mode="incident"] .monitor-shell .mission > .read-top h2 { font-size: 17px; margin-bottom: 0; }
  body.in-game .floor[data-mode="incident"] .monitor-shell .mission .place { font-size: 11px; margin-bottom: 0; }
  body.in-game .tour-card { bottom: 8px; width: min(440px, calc(100vw - 24px)); padding: 10px 14px 8px; }
  body.in-game .tour-card.at-top { top: 52px; }
  body.in-game .tour-card h2 { font-size: 17px; }
  body.in-game .tour-card p { font-size: 14px; line-height: 1.4; }
  body.in-game .tour-actions { margin-top: 8px; }
}

/* Pantalla baja y acostada (celular, y tambien un tablet de 600 px de alto): el panel de la
   consecuencia tapaba casi la mitad del piso, justo cuando hay que mirarlo. Va aparte del
   bloque de 500 px porque el panel compacto conviene siempre que sobre poco alto, aunque el
   resto de la interfaz todavia tenga sitio.

   Se queda con lo imprescindible: el titulo y la frase del momento. El lugar se omite porque
   ya esta arriba, en la barra. El boton de saltar se sube a la esquina en vez de ocupar fila
   propia, y se queda en 44 px de alto, que es el minimo comodo para el dedo. */
@media (orientation: landscape) and (max-height: 700px) {
  body.in-game .floor[data-mode="watch"] .mission {
    /* La regla base reserva 140 px de alto minimo para que el panel no baile entre frases.
       Con poco alto eso ya es media pantalla, asi que aqui se suelta. */
    min-height: 0;
    max-height: 40vh;
    padding: 8px 12px 10px;
  }
  body.in-game .floor[data-mode="watch"] .mission > .place { display: none; }
  body.in-game .floor[data-mode="watch"] .mission > h2 {
    margin: 0 116px 3px 0;
    font-size: 15px;
    line-height: 1.25;
  }
  body.in-game .floor[data-mode="watch"] .beats {
    margin: 0;
    padding-left: 18px;
    font-size: 13px;
    line-height: 1.35;
  }
  body.in-game .floor[data-mode="watch"] .skip {
    position: absolute;
    top: 8px;
    right: 12px;
    min-height: 44px;
    margin: 0;
    padding: 6px 12px;
    font-size: 13px;
  }
}

/* ---------- Palanca (joystick) y boton A en pantallas tactiles ---------- */
.stick-base {
  position: relative;
  width: 104px;
  height: 104px;
  border-radius: 50%;
  background: #172029c4;
  border: 2px solid #52646b;
  touch-action: none;
}
.stick-base.active {
  border-color: #c6ed86;
}
.stick-knob {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 46px;
  height: 46px;
  margin: -23px 0 0 -23px;
  border-radius: 50%;
  background: linear-gradient(to bottom, #c6ed86 0 calc(100% - 4px), #9cc56b calc(100% - 4px));
}
.act-zone {
  display: grid;
  justify-items: center;
  gap: 4px;
}
.act-caption {
  max-width: 150px;
  color: #e8edf0;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  text-shadow: 0 1px 3px #0b0f13;
}
@media (hover: none), (pointer: coarse) {
  body.in-game .stick .pad,
  body.in-game .act-text {
    display: none;
  }
  body.in-game .act {
    flex: 0 0 auto;
    width: 84px;
    height: 84px;
    min-height: 0;
    padding: 0;
    border-radius: 50%;
    font: 700 30px Pixel, monospace;
    box-shadow: inset 0 -5px 0 #0d2a22;
  }
  body.in-game .floor-controls {
    left: 12px;
    right: 12px;
    bottom: 12px;
    max-width: none;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
    padding: 0;
    background: none;
    border: 0;
  }
}
/* Pantalla baja y horizontal (celular girado): mismos controles de pulgar, sin depender de la deteccion tactil. */
@media (orientation: landscape) and (max-height: 500px) {
  .stick,
  .act-letter,
  .act-caption {
    display: block;
  }
  .keys,
  body.in-game .stick .pad,
  body.in-game .act-text {
    display: none;
  }
  body.in-game .act {
    flex: 0 0 auto;
    min-height: 0;
    padding: 0;
    border-radius: 50%;
    font: 700 26px Pixel, monospace;
    box-shadow: inset 0 -5px 0 #0d2a22;
  }
  body.in-game .floor-controls {
    left: 10px;
    right: 10px;
    bottom: 10px;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    padding: 0;
    background: none;
    border: 0;
  }
  .stick-base { width: 92px; height: 92px; }
  .stick-knob { width: 40px; height: 40px; margin: -20px 0 0 -20px; }
  body.in-game .act { width: 74px; height: 74px; font-size: 26px; }
  body.in-game .shortcuts { top: 52px; left: 8px; right: auto; bottom: auto; }
}

/* ---------- Portal ---------- */
/* El portal es la pagina de inicio de la plataforma: la persona entra una vez y ve sus
   actividades. Reutiliza los tamanos de letra que ya existen en la hoja a proposito, para no
   sumarle pasos a la rampa tipografica que ya esta anotada como pendiente en DESIGN.md. */
.card {
  max-width: 560px;
  margin: 28px auto;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--paper);
  box-shadow: 0 2px 10px rgb(23 62 53 / 6%);
}
.lead {
  margin: 6px 0 18px;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.5;
}
.card h1 {
  margin: 0;
  font-size: 28px;
}
.campo {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 14px;
}
.campo label {
  font-size: 15px;
  font-weight: 700;
}
.campo input,
.campo select {
  padding: 11px 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
}
.opcional {
  color: var(--muted);
  font-weight: 400;
}
.aviso-error:empty {
  display: none;
}
.aviso-error {
  margin: 10px 0 0;
  padding: 10px 12px;
  border: 1px solid #a32b29;
  border-radius: 6px;
  background: #ffe0da;
  color: #a32b29;
  font-size: 15px;
}
.portal-inicio {
  max-width: 900px;
  margin: 28px auto;
  padding: 0 16px;
}
.portal-saludo h1 {
  margin: 0;
  font-size: 28px;
}
.modulos {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
/* El estado se dice con texto y se refuerza con el fondo, no con una franja de color a un lado:
   el color solo no basta para quien no lo distingue. */
.modulo {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--paper);
}
.modulo.pendiente,
.modulo.cerrado {
  background: #f6f8f2;
  color: var(--muted);
}
.modulo h3 {
  margin: 0;
  font-size: 22px;
}
.modulo-tipo {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.modulo-resumen {
  margin: 0;
  font-size: 15px;
  line-height: 1.45;
}
.modulo-pie {
  margin: 4px 0 8px;
  font-size: 15px;
  font-weight: 700;
}
.modulo-pie.abierto { color: #29754c; }
.modulo-pie.hecho { color: #29754c; }
.modulo-pie.pendiente,
.modulo-pie.cerrado { color: var(--muted); font-weight: 400; }
.modulo .primary,
.modulo .secondary {
  margin-top: auto;
  text-align: center;
}
a.boton {
  display: inline-block;
  text-decoration: none;
}
.portal-nota {
  margin: 22px 0 0;
  color: var(--muted);
  font-size: 15px;
}
.portal-salir {
  margin-top: 14px;
}
.trivia-barra {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.card.trivia h2 {
  margin: 0 0 18px;
  font-size: 22px;
  line-height: 1.35;
}
.opciones {
  display: grid;
  gap: 10px;
}
.opciones .choice .num {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  border: 1px solid var(--line);
  border-radius: 50%;
  font-size: 15px;
  font-weight: 700;
}
.choice.bien { border-color: #29754c; background: #e4f3d1; }
.choice.mal { border-color: #a32b29; background: #ffe0da; }
.choice:disabled { cursor: default; }
.trivia-fallo {
  margin: 16px 0;
  font-size: 15px;
  line-height: 1.5;
}
.trivia-fallo.bien { color: #29754c; }
.trivia-fallo.mal { color: #a32b29; }
.trivia-pies .primary {
  width: 100%;
}
@media (max-width: 520px) {
  .card { margin: 16px; padding: 18px; }
  .portal-inicio { margin: 16px auto; }
}

/* Calendario del evento, en el panel de organizadores. Va arriba de las graficas porque durante
   una sesion en vivo es lo que el organizador necesita a la mano. */
.calendario .sub {
  margin: 4px 0 14px;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.45;
}
.acciones-cal {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.estado {
  display: inline-block;
  padding: 3px 10px;
  /* 4px, el radio mas usado de la hoja. La pastilla de 999px que tenia antes era una forma que
     el sistema no usa en ningun otro lado: "esquinas discretas" dice DESIGN.md. */
  border-radius: 4px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.estado.abierto { background: #e4f3d1; color: #29754c; }
.estado.pendiente { background: #f6f8f2; color: var(--muted); }
.estado.cerrado { background: #ffe0da; color: #a32b29; }

/* ---------- Semana de la Ciberseguridad 2026 ---------- */
/* El portal es la sede del evento. Se acota con .event-portal para que el juego y el panel de
   organizadores conserven su interfaz operativa. */
.event-portal {
  --event-navy: #071a2e;
  --event-navy-2: #0b2845;
  --event-panel: #0e3152;
  --event-paper: #f7fbff;
  --event-ink: #0a2238;
  --event-muted: #5d7185;
  --event-line: #bfd0df;
  --event-orange: #ff5a24;
  --event-yellow: #ffc429;
  --event-green: #55d568;
  --event-blue: #2d7dff;
  --event-cyan: #19d3ef;
  min-height: 100svh;
  color: #eaf5ff;
  background:
    linear-gradient(118deg, transparent 0 68%, rgb(25 211 239 / 8%) 68% 68.2%, transparent 68.2% 100%),
    linear-gradient(62deg, transparent 0 18%, rgb(45 125 255 / 10%) 18% 18.2%, transparent 18.2% 100%),
    var(--event-navy);
  color-scheme: dark;
}
.event-portal::before {
  position: fixed;
  z-index: -1;
  inset: 0;
  content: "";
  opacity: .42;
  background-image:
    linear-gradient(90deg, transparent 31px, rgb(142 190 226 / 8%) 32px),
    linear-gradient(transparent 31px, rgb(142 190 226 / 7%) 32px);
  background-size: 32px 32px;
  mask-image: linear-gradient(to bottom, #000, transparent 78%);
}
.event-portal .event-topbar {
  height: 88px;
  padding: 0 clamp(20px, 5vw, 72px);
  border-bottom: 1px solid rgb(137 194 232 / 28%);
  background: rgb(5 21 37 / 92%);
}
.event-brand {
  gap: 13px;
  color: #fff;
}
.event-brand .event-mark {
  width: 52px;
  height: 52px;
  object-fit: contain;
}
.event-brand strong {
  display: block;
  font-size: 13px;
  line-height: 1.05;
  letter-spacing: .035em;
}
.event-brand small {
  display: block;
  margin-top: 5px;
  color: #8ddff0;
  font-size: 11px;
  letter-spacing: .16em;
}
.event-portal .edition {
  color: #c4d9e9;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.event-portal main {
  min-height: calc(100svh - 150px);
}
.event-portal .event-footer {
  min-height: 62px;
  padding: 19px clamp(20px, 5vw, 72px);
  color: #a9c4d9;
  border-top-color: rgb(137 194 232 / 24%);
}
.event-footer strong {
  color: #fff;
  text-decoration: underline;
  text-decoration-color: var(--event-yellow);
  text-underline-offset: 3px;
}
.event-footer a { color: #dcefff; }
.event-portal button:focus-visible,
.event-portal a:focus-visible,
.event-portal input:focus-visible,
.event-portal select:focus-visible {
  outline-color: var(--event-cyan);
}
.event-portal ::selection {
  color: var(--event-navy);
  background: var(--event-cyan);
}
.event-portal input { caret-color: var(--event-blue); }
.event-portal::-webkit-scrollbar-thumb { background: #537590; }

.portal-entrada {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(360px, 480px);
  align-items: center;
  gap: clamp(40px, 7vw, 100px);
  width: min(1220px, calc(100% - 40px));
  min-height: calc(100svh - 150px);
  margin: 0 auto;
  padding: 64px 0;
}
.event-intro {
  position: relative;
  padding: 28px 0 34px clamp(0px, 2vw, 28px);
}
.event-hero-logo {
  position: relative;
  display: block;
  width: clamp(112px, 11vw, 156px);
  height: auto;
  margin: -18px 0 16px;
  object-fit: contain;
}
.event-intro::after {
  position: absolute;
  bottom: 0;
  left: clamp(0px, 2vw, 28px);
  width: min(520px, 92%);
  height: 5px;
  content: "";
  background: linear-gradient(90deg,
    var(--event-orange) 0 19%, transparent 19% 20%,
    var(--event-yellow) 20% 39%, transparent 39% 40%,
    var(--event-green) 40% 59%, transparent 59% 60%,
    var(--event-blue) 60% 79%, transparent 79% 80%,
    var(--event-cyan) 80% 100%);
}
.event-year {
  position: absolute;
  top: -54px;
  right: 0;
  color: rgb(95 177 231 / 12%);
  font: 400 clamp(92px, 12vw, 176px)/1 Pixel, monospace;
  letter-spacing: -.05em;
  pointer-events: none;
}
.event-intro h1 {
  position: relative;
  max-width: 660px;
  font: 400 clamp(36px, 5.2vw, 68px)/1.04 Pixel, monospace;
  letter-spacing: 0;
  text-wrap: balance;
}
.event-intro > p {
  position: relative;
  max-width: 58ch;
  margin-top: 24px;
  color: #c1d9ea;
  font-size: 18px;
  line-height: 1.55;
}
.event-intro .event-motto {
  margin-top: 18px;
  color: #fff;
  font-size: 22px;
  line-height: 1.25;
}
.event-motto strong {
  color: var(--event-yellow);
  font-weight: 700;
}
.event-disciplines {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: 14px 20px;
  margin-top: 34px;
}
.event-disciplines span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #e7f4fc;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .025em;
}
.event-disciplines i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
}
.disc-orange { background: var(--event-orange); }
.disc-yellow { background: var(--event-yellow); }
.disc-green { background: var(--event-green); }
.disc-blue { background: var(--event-blue); }
.disc-cyan { background: var(--event-cyan); }

.event-portal .card {
  color: var(--event-ink);
  border: 1px solid #87a9c2;
  border-radius: 8px;
  background: var(--event-paper);
  box-shadow: 0 22px 60px rgb(0 0 0 / 34%);
}
.event-access {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: clamp(24px, 3vw, 36px);
}
.event-access h2 {
  font-size: 28px;
  letter-spacing: -.02em;
}
.event-portal .lead { color: var(--event-muted); }
.event-portal .campo { gap: 6px; margin-bottom: 13px; }
.event-portal .campo label { color: var(--event-ink); font-size: 14px; }
.event-portal .campo input,
.event-portal .campo select {
  width: 100%;
  min-height: 46px;
  color: var(--event-ink);
  border-color: #9eb4c5;
  border-radius: 4px;
  background: #fff;
}
.event-portal .campo input:hover,
.event-portal .campo select:hover { border-color: var(--event-blue); }
.event-portal .opcional { color: var(--event-muted); }
.event-portal .consent { color: #405a70; }
.event-portal .consent input { accent-color: var(--event-blue); }
.event-portal .primary {
  color: #fff;
  border-color: #155fce;
  background: var(--event-blue);
}
.event-portal .primary:hover { background: #155fce; }
.event-access .primary { width: 100%; }
.event-portal .secondary {
  color: #dcefff;
  border-color: #6689a5;
}
.event-portal .secondary:hover { background: rgb(105 153 188 / 16%); }
.event-portal .aviso-error {
  border-color: #d44a3d;
  background: #fff0ed;
  color: #9b2922;
}

.event-portal .portal-inicio {
  max-width: 1120px;
  margin: 0 auto;
  padding: clamp(44px, 7vw, 82px) 20px 54px;
}
.event-portal .portal-saludo {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 28px;
  margin-bottom: 38px;
}
.event-portal .portal-saludo h1 {
  max-width: 700px;
  color: #fff;
  font: 400 clamp(34px, 5vw, 56px)/1.04 Pixel, monospace;
  letter-spacing: 0;
}
.portal-saludo p {
  margin-top: 12px;
  color: #bad2e4;
  font-size: 15px;
}
.portal-saludo p strong { color: #fff; }
.portal-progreso {
  display: grid;
  grid-template-columns: auto auto;
  align-items: baseline;
  gap: 4px 10px;
  min-width: 188px;
  padding: 13px 16px;
  color: #dff7ff;
  border: 1px solid #426b8b;
  border-radius: 4px;
  background: #0d2a46;
}
.portal-progreso strong {
  grid-row: 1 / span 2;
  color: var(--event-cyan);
  font: 400 30px/1 Pixel, monospace;
}
.portal-progreso span {
  max-width: 74px;
  font-size: 11px;
  line-height: 1.2;
  text-transform: uppercase;
}
.event-portal .modulos {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}
.event-portal .modulos::before {
  position: absolute;
  top: 36px;
  bottom: 36px;
  left: 35px;
  width: 2px;
  content: "";
  background: #315574;
}
.event-portal .modulo {
  --stage-color: var(--event-blue);
  position: relative;
  display: grid;
  grid-template-columns: 70px minmax(0, 1fr) minmax(220px, 280px);
  align-items: center;
  gap: 22px;
  min-height: 142px;
  padding: 22px 24px 22px 0;
  color: var(--event-ink);
  border: 1px solid #95b0c4;
  border-radius: 6px;
  background: var(--event-paper);
  box-shadow: 0 10px 30px rgb(0 0 0 / 22%);
  overflow: hidden;
}
.event-portal .modulo:nth-child(5n + 1) { --stage-color: var(--event-orange); }
.event-portal .modulo:nth-child(5n + 2) { --stage-color: var(--event-yellow); }
.event-portal .modulo:nth-child(5n + 3) { --stage-color: var(--event-green); }
.event-portal .modulo:nth-child(5n + 4) { --stage-color: var(--event-blue); }
.event-portal .modulo:nth-child(5n + 5) { --stage-color: var(--event-cyan); }
.modulo-medalla {
  z-index: 1;
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  margin-left: 10px;
  color: #fff;
  border: 4px solid var(--event-paper);
  border-radius: 50%;
  background: var(--stage-color);
  box-shadow: 0 5px 12px rgb(0 0 0 / 24%);
}
.modulo-medalla span { font: 400 20px/1 Pixel, monospace; }
.event-portal .modulo:nth-child(5n + 2) .modulo-medalla,
.event-portal .modulo:nth-child(5n + 3) .modulo-medalla,
.event-portal .modulo:nth-child(5n + 5) .modulo-medalla { color: var(--event-navy); }
.event-portal .modulo-tipo { color: #557087; }
.event-portal .modulo h3 {
  margin-top: 3px;
  color: var(--event-ink);
  line-height: 1.15;
}
.event-portal .modulo-resumen {
  max-width: 62ch;
  margin-top: 7px;
  color: #52687a;
}
.modulo-accion {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}
.event-portal .modulo-pie { margin: 0 0 10px; }
.event-portal .modulo-pie.abierto,
.event-portal .modulo-pie.hecho { color: #126d52; }
.event-portal .modulo.pendiente,
.event-portal .modulo.cerrado {
  color: #5f7180;
  border-color: #6e879a;
  background: #dce6ed;
}
.event-portal .modulo.pendiente .modulo-medalla,
.event-portal .modulo.cerrado .modulo-medalla {
  color: #dce7ef;
  background: #61798c;
}
.event-portal .modulo .secondary {
  color: var(--event-ink);
  border-color: #7f9bb0;
}
.event-portal .modulo .secondary:hover { background: #e1edf5; }
.portal-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-top: 24px;
}
.event-portal .portal-nota {
  max-width: 68ch;
  margin: 0;
  color: #a9c3d7;
}
.event-portal .portal-salir { flex: 0 0 auto; margin: 0; }

.event-portal .card.trivia {
  max-width: 760px;
  margin: clamp(32px, 7vw, 76px) auto;
  padding: clamp(24px, 4vw, 42px);
}
.trivia-stage {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 22px;
  color: #4b687f;
  font-size: 11px;
  line-height: 1.25;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.trivia-stage > span:last-child { display: grid; gap: 2px; }
.trivia-stage strong { color: var(--event-ink); font-size: 13px; }
.trivia-medal {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  color: #fff;
  border-radius: 50%;
  background: var(--event-orange);
  box-shadow: 0 5px 12px rgb(0 0 0 / 22%);
  font: 400 18px/1 Pixel, monospace;
}
.event-portal .trivia-barra {
  padding-bottom: 14px;
  color: #46647b;
  border-bottom: 3px solid var(--event-blue);
}
.event-portal .card.trivia h2 {
  margin: 26px 0 24px;
  color: var(--event-ink);
  font-size: clamp(22px, 3vw, 30px);
}
.event-portal .opciones .choice {
  min-height: 58px;
  color: var(--event-ink);
  border: 1px solid #9bb2c3;
  border-radius: 4px;
  background: #fff;
}
.event-portal .opciones .choice:hover:not(:disabled) {
  border-color: var(--event-blue);
  background: #edf5ff;
}
.event-portal .opciones .choice .num {
  color: #fff;
  border-color: var(--event-blue);
  background: var(--event-blue);
}
.event-portal .choice.bien { border-color: #16875f; background: #e1f7ed; }
.event-portal .choice.mal { border-color: #c44639; background: #fff0ed; }
.event-portal .trivia-fallo.bien { color: #126d52; }
.event-portal .trivia-fallo.mal { color: #9b2922; }

@media (max-width: 860px) {
  .portal-entrada {
    grid-template-columns: 1fr;
    gap: 30px;
    padding: 54px 0;
  }
  .event-intro { padding-right: 18px; }
  .event-year { right: 18px; }
  .event-access { max-width: 620px; justify-self: center; }
  .event-portal .modulo {
    grid-template-columns: 70px minmax(0, 1fr);
  }
  .modulo-accion { grid-column: 2; }
}
@media (max-width: 600px) {
  .event-portal .event-topbar {
    height: 76px;
    padding: 0 16px;
  }
  .event-brand .event-mark { width: 44px; height: 44px; }
  .event-brand strong { font-size: 11px; }
  .event-brand small { font-size: 11px; }
  .event-portal .edition { display: none; }
  .event-portal main { min-height: calc(100svh - 132px); }
  .portal-entrada {
    width: min(100% - 28px, 560px);
    min-height: auto;
    padding: 42px 0;
  }
  .event-intro { padding: 28px 0 26px; }
  .event-hero-logo { width: 108px; margin: -12px 0 14px; }
  .event-intro::after { left: 0; width: 100%; }
  .event-year { top: -23px; right: 0; font-size: 82px; }
  .event-intro h1 { font-size: 38px; }
  .event-intro > p { margin-top: 18px; font-size: 16px; }
  .event-disciplines { gap: 11px 14px; margin-top: 24px; }
  .event-access { padding: 22px 18px; }
  .event-access h2 { font-size: 24px; }
  .event-portal .portal-inicio { padding: 40px 14px; }
  .event-portal .portal-saludo { align-items: stretch; flex-direction: column; margin-bottom: 28px; }
  .event-portal .portal-saludo h1 { font-size: 38px; }
  .portal-progreso { align-self: flex-start; }
  .event-portal .modulos::before { left: 24px; }
  .event-portal .modulo {
    grid-template-columns: 50px minmax(0, 1fr);
    gap: 14px;
    min-height: 0;
    padding: 18px 18px 18px 0;
  }
  .modulo-medalla {
    width: 40px;
    height: 40px;
    margin-left: 4px;
    border-width: 3px;
  }
  .event-portal .modulo h3 { font-size: 20px; }
  .event-portal .modulo-accion { grid-column: 1 / -1; padding-left: 64px; }
  .portal-meta { align-items: stretch; flex-direction: column; }
  .event-portal .portal-salir { width: 100%; }
  .event-portal .card.trivia { margin: 24px 14px; padding: 22px 18px; }
  .event-portal .event-footer {
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
    padding: 18px 16px;
  }
}