@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: #8fcfe8;
}
.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: rgb(234 245 255 / 90%);
  padding: 6px 0;
}
.start-panel {
  position: relative;
  background: #fff;
  padding: 28px;
  border: 1px solid #173e35;
  border-radius: 6px;
  box-shadow: 0 12px 30px rgb(0 0 0 / 12%);
}
.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 rgb(0 0 0 / 25%);
  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 rgb(0 0 0 / 64%);
}
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 {
    display: block;
    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 rgb(0 0 0 / 70%);
  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: none;
}
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 rgb(0 0 0 / 70%);
  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.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; }
}

/* ---------- Juego · identidad de la Semana de la Ciberseguridad ---------- */
/* El portal y el juego comparten recinto visual. Azul y cian significan accion; naranja y
   amarillo aportan energia; verde queda reservado para una decision correcta o protegida. */
.game-page {
  --game-night: #071a2e;
  --game-night-2: #0b2845;
  --game-ink: #0a2238;
  --game-paper: #f7fbff;
  --game-canvas: #eaf5ff;
  --game-muted: #536d84;
  --game-line: #b7cddd;
  --game-blue: #2d7dff;
  --game-cyan: #19d3ef;
  --game-orange: #ff5a24;
  --game-yellow: #ffc429;
  --game-green: #238044;
  --ink: var(--game-ink);
  --green: var(--game-cyan);
  --line: var(--game-line);
  --paper: var(--game-paper);
  --muted: var(--game-muted);
  color: var(--game-ink);
  background: var(--game-canvas);
}
.game-page button:focus-visible,
.game-page a:focus-visible,
.game-page input:focus-visible,
.game-page select:focus-visible,
.game-page summary:focus-visible {
  outline-color: var(--game-cyan);
}
.game-page ::selection {
  color: var(--game-night);
  background: var(--game-yellow);
}
.game-page input { caret-color: var(--game-blue); }
.game-page::-webkit-scrollbar-thumb { background: #65849d; }
.game-page .topbar {
  color: var(--game-ink);
  border-color: var(--game-line);
  background: var(--game-paper);
}
.game-page .brand svg { color: var(--game-blue); }
.game-page .edition { color: var(--game-muted); }
.game-page .icon-button { color: var(--game-ink); border-color: var(--game-line); }
.game-page .icon-button:hover { background: #dceeff; }
.game-page .welcome { background: #8fcfe8; }
.game-page .welcome-copy p {
  color: var(--game-ink);
  background: rgb(234 245 255 / 88%);
}
.game-page .start-panel {
  color: var(--game-ink);
  background: var(--game-paper);
  border-color: #6d8ba3;
  box-shadow: 0 16px 34px rgb(0 0 0 / 18%);
}
.game-page .avatar-option,
.game-page .uniform-option { background: #edf6ff; }
.game-page .avatar-option:hover,
.game-page .uniform-option:hover { background: #dceeff; }
.game-page .avatar-option[aria-pressed="true"],
.game-page .uniform-option[aria-pressed="true"] {
  color: var(--game-ink);
  border-color: var(--game-blue);
  background: #dceeff;
}
.game-page .primary {
  color: #fff;
  border-color: #134fae;
  background: #1c62d6;
}
.game-page .primary:hover { background: #134fae; }
.game-page .secondary { color: var(--game-ink); border-color: #7f9bb0; }
.game-page .secondary:hover { background: #dceeff; }
.game-page .journey-note {
  color: #eaf5ff;
  background: var(--game-night);
}
.game-page footer { color: var(--game-muted); border-color: var(--game-line); background: var(--game-paper); }
.game-page .progress i { background: #b8cbd9; }
.game-page .progress i.done { background: var(--game-green); }
.game-page .choice:hover { border-color: var(--game-blue); background: #e5f7fc; }
.game-page .choice .choice-number { color: var(--game-ink); background: #dceeff; }
.game-page .feedback { border-top-color: var(--game-green); }
.game-page .feedback.learn { border-top-color: #b65324; }

body.game-page.in-game,
body.game-page.in-game .floor,
body.game-page.in-game .map-stage { background: var(--game-night); }
body.game-page.in-game .topbar,
body.game-page.in-game .play-top,
body.game-page.in-game .floor-controls,
body.game-page.in-game .shortcuts {
  color: #eaf5ff;
  background: rgb(7 26 46 / 94%);
  border-color: #315776;
}
body.game-page.in-game .brand svg,
body.game-page.in-game .floor-hud b { color: var(--game-cyan); }
body.game-page.in-game .edition,
body.game-page.in-game .keys { color: #c4d9e9; }
body.game-page.in-game .progress i { background: #45647c; }
body.game-page.in-game .progress i.done { background: var(--game-green); }
body.game-page.in-game .minimap-wrap {
  color: #eaf5ff;
  background: rgb(7 26 46 / 92%);
  border-color: #557087;
}
body.game-page.in-game .mission { color: var(--game-ink); background: var(--game-paper); }
body.game-page.in-game .tour-ring { border-color: var(--game-yellow); }
body.game-page.in-game .tour-card {
  color: var(--game-ink);
  background: var(--game-paper);
  border-color: var(--game-night);
}
body.game-page.in-game .tour-check { color: #155f38; background: #daf4e3; }
body.game-page.in-game .read-step::before { color: #fff; background: var(--game-blue); }
body.game-page.in-game .read-step:nth-child(2)::before { color: var(--game-night); background: var(--game-yellow); }
body.game-page.in-game .read-step:nth-child(3)::before { color: var(--game-night); background: var(--game-orange); }
body.game-page.in-game .read-decide.waiting::before { color: var(--game-muted); background: #dce6ed; }
body.game-page.in-game .artifact { color: var(--game-ink); border-color: #47657d; }
body.game-page.in-game .artifact-head { color: #fff; background: var(--game-night-2); }
body.game-page.in-game .floor[data-mode="incident"] .monitor-shell::before { background: var(--game-cyan); box-shadow: none; }
body.game-page.in-game .stick-base { background: rgb(7 26 46 / 82%); border-color: #557087; }
body.game-page.in-game .stick-base.active { border-color: var(--game-cyan); }
body.game-page.in-game .stick-knob {
  background: linear-gradient(to bottom, var(--game-cyan) 0 calc(100% - 4px), #0fa8c1 calc(100% - 4px));
}
body.game-page.in-game .act { border-color: #134fae; background: #1c62d6; }
body.game-page.in-game .act:disabled { color: #b8cbd9; border-color: #557087; background: #27455d; }
body.game-page.in-game .rotate-notice { color: #eaf5ff; background: var(--game-night); }
body.game-page.in-game .rotate-notice h2 { color: #eaf5ff; }
body.game-page.in-game .rotate-notice p { color: #c4d9e9; }
body.game-page.in-game .rotate-notice .primary { color: #fff; border-color: #134fae; background: #1c62d6; }
body.game-page.in-game .rotate-phone { border-color: var(--game-cyan); box-shadow: inset 0 -8px 0 -4px var(--game-cyan); }

/* ---------- 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(0 0 0 / 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); }
/* El boton principal lleva el ambar de la llama del emblema, que es el color dominante de la
   marca del evento (~26 % del logo) y el mismo del "Protege al Grupo" del titular. El azul vivo
   que tenia antes no aparece en el emblema —el azul de la marca es el marino del escudo— y
   ademas con texto blanco daba 3.8:1, por debajo del 4.5:1 que hace falta para leerse.
   Con tinta sobre ambar son 10.1:1. Al pasar por encima vira al naranja, que es el otro extremo
   de la misma llama y conserva 5.2:1. */
.event-portal .primary {
  color: var(--event-ink);
  border-color: var(--event-yellow);
  background: var(--event-yellow);
}
.event-portal .primary:hover {
  border-color: var(--event-orange);
  background: var(--event-orange);
}
.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;
  }
}

/* Aviso de privacidad del portal: la casilla dice lo minimo y el detalle se despliega. Un parrafo
   de trescientas palabras junto a una casilla no lo lee nadie, y un consentimiento que nadie lee
   no es consentimiento. */
.aviso {
  margin: -4px 0 16px;
  font-size: 15px;
  line-height: 1.5;
}
.aviso summary {
  cursor: pointer;
  font-weight: 700;
  text-decoration: underline;
}
.aviso p {
  margin: 10px 0;
}

/* Entrar y registrarse son dos cosas distintas y la pantalla lo dice: separarlas es lo que evita
   que alguien escriba el numero de un compañero creyendo que se identifica. */
.tabs {
  display: flex;
  gap: 8px;
  margin: 14px 0 16px;
}
.tab {
  flex: 1;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: transparent;
  color: inherit;
  font-size: 15px;
  font-weight: 700;
}
.tab.activa {
  border-color: currentcolor;
  background: #e4f3d1;
  color: #173e35;
}
.ayuda {
  margin: 4px 0 0;
  font-size: 12px;
  line-height: 1.45;
  opacity: 0.85;
}

/* Restablecer una cuenta desde el panel. El codigo se muestra grande y una sola vez. */
.reset-cuenta {
  margin: 18px 0;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
}
.reset-cuenta summary {
  font-weight: 700;
  cursor: pointer;
}
.reset-cuenta form {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: flex-end;
}
.reset-cuenta #r-salida {
  flex-basis: 100%;
}
.codigo {
  margin: 4px 0;
  font-family: ui-monospace, Menlo, monospace;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0.04em;
  word-break: break-all;
}
.codigo-ok {
  margin: 10px 0 0;
  color: #29754c;
  font-size: 15px;
}

/* Un boton que se lee como enlace: cambiar de formulario no es navegar, asi que no es un <a>. */
.enlace {
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-decoration: underline;
}

/* --- Campos del portal --- */
/* Agrupar el registro en dos bloques: nueve campos seguidos en un celular se leen como un
   tramite, y la gente abandona. Con los bloques se ve de que trata cada parte. */
.bloque {
  margin: 0 0 18px;
  padding: 14px 14px 4px;
  border: 1px solid var(--line);
  border-radius: 8px;
}
.bloque legend {
  padding: 0 6px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
/* La contraseña y su boton de ver comparten renglon. El boton es alto para que se pueda tocar
   con el pulgar sin apuntar. */
/* El ojo va DENTRO del campo. Al lado se comia la mitad de la columna: con las dos contraseñas
   en la misma fila, cada campo quedaba en 95 px y no se alcanzaba a ver lo escrito — justo lo
   contrario de para lo que existe el boton. Dentro, el campo conserva todo su ancho. */
.clave-caja {
  position: relative;
}
.clave-caja input {
  width: 100%;
  padding-right: 46px;
}
.ver-clave {
  position: absolute;
  top: 50%;
  right: 4px;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--event-muted);
}
.ver-clave:hover {
  color: var(--event-ink);
  background: rgb(105 153 188 / 16%);
}
.ver-clave:active {
  transform: translateY(-50%);
}
/* El error va pegado a su campo. Con nueve campos en un celular, un error arriba del todo
   puede quedar fuera de la pantalla y la persona no sabe que corregir. */
.campo-error:empty,
.campo-nota:empty {
  display: none;
}
.campo-error {
  margin: 4px 0 0;
  color: #a32b29;
  font-size: 12px;
  line-height: 1.4;
}
.campo input.malo,
.campo select.malo {
  border-color: #a32b29;
}
.campo-nota {
  margin: 4px 0 0;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.4;
}
.ayuda.ok {
  font-weight: 700;
}
.mayus {
  margin: 4px 0 0;
  font-size: 12px;
  font-weight: 700;
}

/* Registro en dos pasos. En pantalla ancha los campos cortos van de dos en dos: ahi sobra
   espacio horizontal y lo que escasea es alto. En celular siguen en una columna. */
.pasos {
  margin: 0 0 12px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.8;
}
.pasos-botones {
  display: flex;
  gap: 10px;
  margin-top: 4px;
}
.pasos-botones .secondary {
  flex: 0 0 auto;
}
.pasos-botones .primary {
  flex: 1;
}
@media (min-width: 700px) {
  /* Antes que la rejilla: `display: grid` gana sobre el `[hidden] { display: none }` del
     navegador, y el paso 2 se veia junto al 1 en pantalla ancha. Esta linea lo evita. */
  .bloque[hidden] {
    display: none;
  }
  .bloque {
    display: grid;
    gap: 0 16px;
    grid-template-columns: 1fr 1fr;
  }
  .bloque legend,
  .bloque .ancho-completo,
  .bloque .consent,
  .bloque .aviso,
  .bloque .pasos-botones,
  .bloque > button {
    grid-column: 1 / -1;
  }
}

/* --- Casilla de consentimiento y botones del portal --- */

/* El portal declara `color-scheme: dark` para que el navegador dibuje bien lo del fondo oscuro,
   pero la tarjeta de acceso es clara: ahi la casilla nativa salia como un cuadro oscuro, con
   pinta de desactivada. Se dibuja a mano para que se vea igual en cualquier navegador, y mas
   grande: 20 px es un objetivo que se toca con el pulgar sin apuntar. */
.event-access .consent input[type="checkbox"] {
  appearance: none;
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  margin: 0;
  border: 2px solid var(--event-muted);
  border-radius: 4px;
  background: #fff;
}
.event-access .consent input[type="checkbox"]:checked {
  border-color: var(--event-orange);
  background: var(--event-yellow);
}
/* La palomita va dibujada con bordes y no con una imagen: la politica de contenido del sitio
   no permite imagenes incrustadas, y un SVG aparte seria una peticion mas por una palomita. */
.event-access .consent input[type="checkbox"]:checked::after {
  content: "";
  display: block;
  width: 5px;
  height: 10px;
  margin: 1px 0 0 5px;
  /* La palomita va en tinta, no en blanco: sobre el ambar, el blanco se pierde. */
  border: solid var(--event-ink);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.event-access .consent {
  align-items: center;
  font-size: 15px;
}

/* "Atras" vivia sobre la tarjeta clara con el color pensado para el fondo oscuro: texto claro
   sobre fondo claro, practicamente invisible. Dentro de la tarjeta usa la tinta del evento. */
.event-access .secondary {
  border-color: var(--event-line);
  background: #fff;
  color: var(--event-ink);
}
.event-access .secondary:hover {
  border-color: var(--event-muted);
  background: #eaf2fb;
}

/* Los botones tenian el estado justo para funcionar y ninguno para responder. Ahora hunden al
   presionar, levantan al pasar por encima y marcan el foco del teclado, que antes no se veia. */
.primary,
.secondary,
.tab,
.ver-clave {
  transition: transform 0.08s ease, box-shadow 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
}
.event-portal .primary {
  box-shadow: 0 2px 0 var(--event-orange);
}
.event-portal .primary:hover {
  box-shadow: 0 3px 10px rgb(0 0 0 / 22%);
  transform: translateY(-1px);
}
.primary:active,
.secondary:active,
.tab:active,
.ver-clave:active {
  transform: translateY(1px);
  box-shadow: none;
}
.primary:focus-visible,
.secondary:focus-visible,
.tab:focus-visible,
.ver-clave:focus-visible,
.campo input:focus-visible,
.campo select:focus-visible {
  outline: 3px solid var(--event-cyan);
  outline-offset: 2px;
}
/* Deshabilitado tiene que leerse como deshabilitado: antes solo dejaba de responder. */
.primary:disabled,
.secondary:disabled {
  opacity: 0.6;
  box-shadow: none;
  transform: none;
  cursor: progress;
}
/* La pestaña activa se marca con peso y una linea viva, no solo con un fondo tenue. */
.event-access .tab {
  border-color: var(--event-line);
  color: var(--event-muted);
  background: #fff;
}
.event-access .tab.activa {
  border-color: var(--event-orange);
  background: #fff6e6;
  color: var(--event-ink);
  box-shadow: inset 0 -3px 0 var(--event-orange);
}
@media (prefers-reduced-motion: reduce) {
  .primary,
  .secondary,
  .tab,
  .ver-clave {
    transition: none;
  }
  .primary:hover,
  .primary:active,
  .secondary:active,
  .tab:active,
  .ver-clave:active {
    transform: none;
  }
}

/* El boton de ver la contraseña: ojo abierto cuando esta oculta, ojo tachado cuando se ve.
   Se conserva la palabra ademas del icono — para quien no da por sabido que un ojo tachado
   significa "ocultar", la palabra es la que resuelve. */
.ver-clave svg {
  width: 19px;
  height: 19px;
}
.ver-clave .ojo-tachado,
.ver-clave[aria-pressed="true"] .ojo {
  display: none;
}
.ver-clave[aria-pressed="true"] .ojo-tachado {
  display: block;
}

/* --- Barra de seguridad de la contraseña --- */
/* Tres tramos. El color acompaña a la palabra, no la sustituye: quien no distingue el rojo del
   verde lee "Débil" o "Segura" igual. */
.fuerza {
  margin-top: 6px;
}
.fuerza-barra {
  display: flex;
  gap: 4px;
}
.fuerza-barra i {
  flex: 1;
  height: 4px;
  border-radius: 2px;
  background: var(--event-line);
}
.fuerza[data-nivel="1"] .fuerza-barra i:nth-child(1) { background: #d44a3d; }
.fuerza[data-nivel="2"] .fuerza-barra i:nth-child(-n + 2) { background: var(--event-yellow); }
.fuerza[data-nivel="3"] .fuerza-barra i { background: #16875f; }
.fuerza-dice {
  margin: 5px 0 0;
  font-size: 12px;
  line-height: 1.4;
  font-weight: 700;
}
.fuerza[data-nivel="1"] .fuerza-dice { color: #9b2922; }
.fuerza[data-nivel="2"] .fuerza-dice { color: var(--event-ink); }
.fuerza[data-nivel="3"] .fuerza-dice { color: #126d52; }

/* --- Ventana del aviso --- */
.aviso-enlace {
  margin: 0 0 16px;
  font-size: 15px;
}
.modal {
  max-width: 560px;
  width: calc(100% - 32px);
  padding: 0;
  border: 1px solid var(--event-line);
  border-radius: 12px;
  background: var(--event-paper);
  color: var(--event-ink);
}
.modal::backdrop {
  background: rgb(7 26 46 / 72%);
}
.modal-caja {
  padding: 22px;
}
.modal-caja h2 {
  margin: 0 0 12px;
  font-size: 22px;
}
/* El cuerpo se desplaza por dentro: en celular el aviso es largo y la ventana no debe crecer
   mas que la pantalla ni empujar el boton de cerrar fuera de la vista. */
.modal-cuerpo {
  max-height: 60vh;
  overflow-y: auto;
  font-size: 15px;
  line-height: 1.5;
}
.modal-cuerpo p {
  margin: 10px 0;
}
.modal .primary {
  width: 100%;
  margin-top: 16px;
}

/* ================================================================
   CENTRO DE CONTROL DEL EVENTO
   Un dashboard de trabajo: alta densidad, lectura rápida y acciones
   operativas separadas de los resultados para evitar errores.
   ================================================================ */
.admin-page {
  --admin-navy: #071f35;
  --admin-blue: #075da8;
  --admin-cyan: #00a9d6;
  --admin-orange: #e9551f;
  --admin-amber: #f2a51a;
  --admin-ink: #102a40;
  --admin-muted: #536d82;
  --admin-line: #c9d8e4;
  --admin-soft: #e8f1f8;
  --admin-paper: #ffffff;
  --admin-danger: #a92c2c;
  min-height: 100vh;
  margin: 0;
  background: #edf4f8;
  color: var(--admin-ink);
  font-family: Arial, Helvetica, sans-serif;
  color-scheme: light;
}
.admin-page *,
.admin-page *::before,
.admin-page *::after {
  box-sizing: border-box;
}
.admin-page button,
.admin-page input,
.admin-page select {
  font: inherit;
}
.admin-page button,
.admin-page summary,
.admin-page select {
  cursor: pointer;
}
.admin-page [hidden] {
  display: none !important;
}
.admin-page .sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.admin-topbar {
  min-height: 72px;
  padding: 12px clamp(20px, 4vw, 64px);
  border-bottom: 1px solid rgb(255 255 255 / 18%);
  background: var(--admin-navy);
  color: #fff;
}
.admin-brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: #fff;
  text-decoration: none;
}
.admin-brand .admin-mark {
  width: 48px;
  height: 48px;
  object-fit: contain;
}
.admin-brand > span:last-child {
  display: grid;
  gap: 2px;
}
.admin-brand strong {
  font-size: 13px;
  letter-spacing: 0.04em;
}
.admin-brand small {
  color: #b8d6e8;
  font-size: 11px;
  letter-spacing: 0.12em;
}
.admin-context {
  margin-left: auto;
  color: #dceaf3;
  font-size: 14px;
  font-weight: 700;
}
.admin {
  width: min(1480px, calc(100% - 40px));
  margin: 0 auto;
  padding: 32px 0 64px;
}
.admin-login {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(340px, 0.65fr);
  min-height: 430px;
  overflow: hidden;
  border: 1px solid #173e5e;
  border-radius: 8px;
  background: var(--admin-navy);
}
.admin-login-copy {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: clamp(40px, 6vw, 84px);
  background: var(--admin-navy);
  color: #fff;
}
.admin-login-copy h1 {
  max-width: 700px;
  margin: 0 0 18px;
  font-size: clamp(36px, 5vw, 68px);
  line-height: 0.98;
  letter-spacing: -0.045em;
}
.admin-login-copy p {
  max-width: 590px;
  margin: 0;
  color: #c7dceb;
  font-size: 18px;
  line-height: 1.55;
}
.admin-login-form {
  align-self: center;
  margin: 28px;
  padding: 36px;
  border-radius: 10px;
  background: #fff;
  color: var(--admin-ink);
}
.admin-login-form h2 {
  margin: 0 0 28px;
  font-size: 24px;
}
.admin-login-form label,
.admin-login-form input {
  display: block;
  width: 100%;
}
.admin-login-form label {
  margin-bottom: 8px;
  font-size: 14px;
  font-weight: 750;
}
.admin-login-form input {
  min-height: 48px;
  margin-bottom: 16px;
  padding: 0 14px;
  border: 1px solid #9eb4c5;
  border-radius: 6px;
  color: var(--admin-ink);
}
.admin-login-form .primary {
  width: 100%;
  min-height: 48px;
  border: 1px solid var(--admin-blue);
  border-radius: 6px;
  background: var(--admin-blue);
  color: #fff;
  font-weight: 800;
}
.admin-login-form .privacy {
  margin: 16px 0 0;
  color: var(--admin-muted);
  font-size: 12px;
  line-height: 1.45;
}
.admin-login-form code {
  color: var(--admin-ink);
}
.admin-message {
  min-height: 0;
  margin: 12px 0 0;
  color: var(--admin-muted);
  font-size: 14px;
}
.admin-message:empty {
  display: none;
}
.admin-message.error {
  color: var(--admin-danger);
  font-weight: 700;
}
.admin-message[data-kind="success"] {
  color: #176747;
}
.admin-dashboard-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 24px;
}
.admin-dashboard-head > div:first-child {
  display: grid;
  gap: 4px;
}
.admin-dashboard-head strong {
  font-size: 20px;
}
.admin-actions,
.admin-row-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.admin-page .button {
  display: inline-flex;
  min-height: 40px;
  align-items: center;
  justify-content: center;
  padding: 8px 14px;
  border: 1px solid transparent;
  border-radius: 6px;
  text-decoration: none;
  transition: background-color 140ms ease, border-color 140ms ease, transform 80ms ease;
}
.admin-page .button.primary {
  border-color: var(--admin-blue);
  background: var(--admin-blue);
  color: #fff;
  font-weight: 750;
}
.admin-page .button.secondary {
  border-color: #9eb4c5;
  background: #fff;
  color: var(--admin-ink);
  font-weight: 700;
}
.admin-page .button.tertiary {
  border-color: transparent;
  background: transparent;
  color: var(--admin-blue);
  font-weight: 750;
}
.admin-page .button.danger {
  border-color: var(--admin-danger);
  background: var(--admin-danger);
  color: #fff;
  font-weight: 800;
}
.admin-page .button:hover:not(:disabled) {
  border-color: var(--admin-blue);
  background: #e5f1fa;
  color: var(--admin-ink);
}
.admin-page .button.primary:hover:not(:disabled) {
  background: #064f8d;
  color: #fff;
}
.admin-page .button.danger:hover:not(:disabled) {
  border-color: #872222;
  background: #872222;
  color: #fff;
}
.admin-page .button:active:not(:disabled) {
  transform: translateY(1px);
}
.admin-page button:disabled {
  cursor: not-allowed;
  opacity: 0.48;
}
.admin-page button:focus-visible,
.admin-page input:focus-visible,
.admin-page select:focus-visible,
.admin-page summary:focus-visible,
.admin-page a:focus-visible {
  outline: 3px solid var(--admin-cyan);
  outline-offset: 2px;
}
.admin-tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 30px;
  padding: 5px;
  border: 1px solid var(--admin-line);
  border-radius: 8px;
  background: #fff;
}
.admin-tabs button {
  min-height: 44px;
  padding: 8px 18px;
  border: 1px solid transparent;
  border-radius: 5px;
  background: transparent;
  color: var(--admin-muted);
  font-weight: 750;
}
.admin-tabs button[aria-current="page"] {
  border-color: #a9c7dd;
  background: var(--admin-soft);
  color: var(--admin-ink);
}
.admin-tabs span {
  display: inline-block;
  min-width: 24px;
  margin-left: 6px;
  padding: 2px 7px;
  border-radius: 99px;
  background: #dceaf4;
  color: var(--admin-ink);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
.admin-section-title {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 40px;
  margin-bottom: 22px;
}
.admin-section-title h1 {
  margin: 3px 0 0;
  font-size: clamp(30px, 4vw, 46px);
  line-height: 1.08;
  letter-spacing: -0.035em;
}
.admin-section-title > p {
  max-width: 560px;
  margin: 0;
  color: var(--admin-muted);
  line-height: 1.5;
}
.admin-page .eyebrow {
  margin: 0;
  color: var(--admin-blue);
  font-size: 12px;
  font-weight: 850;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}
.admin-kpis {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  margin: 0 0 22px;
  border: 1px solid var(--admin-line);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 8px 24px rgb(0 0 0 / 7%);
}
.admin-kpis > div {
  min-width: 0;
  padding: 22px;
  border-right: 1px solid var(--admin-line);
}
.admin-kpis > div:last-child {
  border-right: 0;
}
.admin-kpis dt {
  min-height: 34px;
  color: var(--admin-muted);
  font-size: 12px;
  font-weight: 750;
  line-height: 1.35;
  text-transform: uppercase;
}
.admin-kpis dd {
  margin: 10px 0 4px;
  color: var(--admin-ink);
  font-size: clamp(25px, 2.7vw, 38px);
  font-weight: 820;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.04em;
}
.admin-kpis dd span {
  color: var(--admin-muted);
  font-size: 16px;
}
.admin-kpis small {
  display: block;
  color: var(--admin-muted);
  font-size: 12px;
  line-height: 1.4;
}
.admin-insights {
  display: grid;
  grid-template-columns: 0.8fr 2.2fr;
  gap: 32px;
  margin-bottom: 22px;
  padding: 28px;
  border-radius: 8px;
  background: var(--admin-navy);
  color: #fff;
}
.admin-insights .eyebrow {
  color: #65d8f2;
}
.admin-insights h2 {
  max-width: 280px;
  margin: 6px 0 0;
  font-size: 25px;
  line-height: 1.12;
}
.admin-insights dl {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0;
}
.admin-insights dl > div {
  padding: 2px 24px;
  border-left: 1px solid rgb(255 255 255 / 20%);
}
.admin-insights dt {
  color: #a9c9dd;
  font-size: 12px;
  font-weight: 700;
}
.admin-insights dd {
  margin: 9px 0 5px;
  font-size: 19px;
  font-weight: 800;
}
.admin-insights small {
  color: #c8dae7;
  font-size: 12px;
  line-height: 1.4;
}
.admin-analysis-stack,
.admin-operations {
  display: grid;
  gap: 22px;
}
#report .admin-analysis-stack > section {
  margin: 0;
}
.admin-analysis-stack {
  --admin-orden: 34px;
  --admin-hueco: 14px;
  --admin-texto-min: 170px;
  --admin-texto-max: 320px;
  --admin-bloque-min: calc(var(--admin-orden) + var(--admin-hueco) + var(--admin-texto-min));
  --admin-bloque-max: calc(var(--admin-orden) + var(--admin-hueco) + var(--admin-texto-max));
}
.admin-card {
  min-width: 0;
  padding: 24px;
  border: 1px solid var(--admin-line);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 8px 24px rgb(0 0 0 / 6%);
}
.admin-card-head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 22px;
}
.admin-card-head h2,
.admin-empty h2 {
  margin: 4px 0 0;
  font-size: 22px;
}
.admin-card-head > p {
  max-width: 240px;
  margin: 0;
  color: var(--admin-muted);
  font-size: 13px;
  line-height: 1.45;
  text-align: right;
}
.admin-ranking,
.admin-unit-list,
.admin-funnel {
  margin: 0;
  padding: 0;
  list-style: none;
}
.admin-ranking li {
  display: grid;
  grid-template-columns: var(--admin-orden) minmax(var(--admin-texto-min), var(--admin-texto-max)) minmax(0, 1fr) 56px;
  gap: var(--admin-hueco);
  align-items: center;
  min-height: 64px;
  border-top: 1px solid #e1eaf0;
}
.admin-ranking li:first-child,
.admin-unit-list li:first-child {
  border-top: 0;
}
.admin-ranking .rank {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border: 1px solid #b8cbd9;
  border-radius: 50%;
  color: var(--admin-muted);
  font-size: 12px;
  font-weight: 800;
}
.rank-copy,
.admin-unit-list div {
  display: grid;
  gap: 4px;
  min-width: 0;
}
.rank-copy small,
.admin-unit-list small {
  color: var(--admin-muted);
  line-height: 1.35;
}
.admin-ranking b,
.admin-unit-list b,
.admin-funnel b,
.tabular {
  font-variant-numeric: tabular-nums;
}
.admin-meter {
  display: block;
  height: 8px;
  overflow: hidden;
  border-radius: 99px;
  background: #dfe9f0;
}
.admin-meter i {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: var(--admin-blue);
}
.admin-meter.needs-work i {
  background: var(--admin-orange);
}
.admin-unit-list li {
  display: grid;
  grid-template-columns: minmax(var(--admin-bloque-min), var(--admin-bloque-max)) minmax(0, 1fr) 56px;
  gap: var(--admin-hueco);
  align-items: center;
  min-height: 62px;
  border-top: 1px solid #e1eaf0;
}
.admin-funnel {
  display: grid;
  gap: 14px;
}
.admin-funnel li {
  display: grid;
  grid-template-columns: minmax(var(--admin-bloque-min), var(--admin-bloque-max)) minmax(0, 1fr) 44px 56px;
  gap: var(--admin-hueco);
  align-items: center;
  font-size: 13px;
}
.admin-funnel small {
  color: var(--admin-muted);
  text-align: right;
}
/* El aviso de no reusar la contraseña del correo: fijo junto al campo, no se borra al escribir. */
.aviso-clave {
  margin: 0 0 8px;
  padding: 8px 10px;
  border-left: 3px solid #b77700;
  border-radius: 0 6px 6px 0;
  background: #fff6e0;
  color: #4a3500;
  font-size: 13px;
  line-height: 1.45;
}

/* El procedimiento de restablecer y los dominios a revisar: avisos de operacion, no decoracion. */
.admin-procedimiento {
  padding: 10px 12px;
  border-left: 3px solid var(--admin-amber);
  background: #fff8e8;
  border-radius: 0 6px 6px 0;
}
.admin-data-table tr.is-revisar { background: #fff8e8; }
.admin-data-table tr.is-revisar small { color: #8a5a00; }

/* Un tiempo inverosimil no se descarta solo: se marca para que un organizador lo confirme. */
.status-badge.is-revisar { margin-left: 6px; color: #8a2c0d; background: #fde4d8; }
.modulo-reloj { margin: 8px 0 0; font-size: 13px; color: var(--muted, #536d84); }

/* Medallero: el corte, el aviso de provisional y los podios de cada actividad. */
.admin-operation-form.admin-corte {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: end;
}
.admin-operation-form.admin-corte label { display: grid; gap: 6px; flex: 0 1 260px; }
.admin-operation-form.admin-corte .admin-helper { flex-basis: 100%; margin: 0; }
#admin-medallero > .admin-card + .admin-card { margin-top: 22px; }
.admin-notice.is-final {
  border-color: #8fcfa8;
  background: #eaf7ef;
  color: #155f38;
}
.admin-podios {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 14px;
}
.admin-podio {
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--admin-line);
  border-radius: 8px;
  background: #fff;
}
.admin-podio.is-provisional { border-style: dashed; }
.admin-podio header {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: start;
  margin-bottom: 10px;
}
.admin-podio h3 { margin: 0; font-size: 15px; }
.admin-podio ol { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.admin-podio li { padding: 8px 10px; border-radius: 6px; }
.admin-podio li.is-lugar-1 { background: #fff6e2; box-shadow: inset 3px 0 0 var(--admin-amber); }
.admin-podio li.is-lugar-2 { background: #eef4f9; box-shadow: inset 3px 0 0 var(--admin-muted); }
.admin-podio li.is-lugar-3 { background: #fdeee7; box-shadow: inset 3px 0 0 var(--admin-orange); }
.admin-podio li b { display: block; font-size: 12px; letter-spacing: .04em; text-transform: uppercase; }
.admin-podio li span { display: block; font-size: 14px; }
.admin-podio li small, .admin-data-table small.empate { color: var(--admin-muted); }
.admin-data-table small.empate { display: block; font-weight: 700; }
.admin-correos { grid-column: 1 / -1; }
.admin-correos textarea {
  width: 100%;
  min-height: 96px;
  padding: 10px;
  border: 1px solid var(--admin-line);
  border-radius: 6px;
  font: 14px/1.5 ui-monospace, Menlo, Consolas, monospace;
}
.quitar-medalla { padding: 2px 8px; font-size: 12px; }

/* Corte de resultados: los filtros de actividad y grupo, y el podio de cada tabla. */
.admin-filtros-resultados {
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.admin-filtros-resultados .admin-helper {
  align-self: center;
  margin-right: 4px;
}
/* El resumen por grupo acompaña a la tabla: es un apunte, no un titular. */
.admin-por-grupo {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 18px;
  padding: 0;
  list-style: none;
}
.admin-por-grupo li {
  flex: 1 1 200px;
  padding: 10px 14px;
  border: 1px solid var(--admin-line);
  border-radius: 6px;
  background: var(--admin-soft);
}
.admin-por-grupo b {
  display: block;
  font-size: 13px;
}
.admin-por-grupo span {
  color: var(--admin-muted);
  font-size: 13px;
}
.admin-conteo {
  margin-left: 8px;
  padding: 1px 7px;
  border-radius: 99px;
  background: var(--admin-soft);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
/* El lugar se dice con el numero, no solo con el color: quien no distinga los tonos tiene que
   poder leer el podio igual. El fondo es un apoyo, no la informacion. */
.admin-data-table tr.is-lugar-1 { background: #fff6e2; }
.admin-data-table tr.is-lugar-2 { background: #eef4f9; }
.admin-data-table tr.is-lugar-3 { background: #fdeee7; }
.admin-data-table tr.is-lugar-1 td:first-child { box-shadow: inset 3px 0 0 var(--admin-amber); }
.admin-data-table tr.is-lugar-2 td:first-child { box-shadow: inset 3px 0 0 var(--admin-muted); }
.admin-data-table tr.is-lugar-3 td:first-child { box-shadow: inset 3px 0 0 var(--admin-orange); }
.admin-empty-copy,
.admin-helper,
.admin-empty > p {
  color: var(--admin-muted);
  line-height: 1.55;
}
.admin-notice {
  padding: 12px 16px;
  border: 1px solid #d9c17b;
  border-radius: 6px;
  background: #fff8dc;
  color: #594815;
}
.admin-table-card {
  padding: 0;
  overflow: hidden;
}
.admin-filters {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) 220px 170px 90px auto;
  gap: 12px;
  align-items: end;
  padding: 20px 22px;
  border-bottom: 1px solid var(--admin-line);
  background: #f8fbfd;
}
.admin-filters label,
.admin-inline-form label,
.admin-operation-form label,
.admin-count-result label {
  display: grid;
  gap: 6px;
  min-width: 0;
  color: var(--admin-ink);
  font-size: 12px;
  font-weight: 750;
}
.admin-page input,
.admin-page select {
  width: 100%;
  min-height: 44px;
  padding: 8px 11px;
  border: 1px solid #9eb4c5;
  border-radius: 5px;
  background: #fff;
  color: var(--admin-ink);
}
.admin-table-summary {
  padding: 13px 22px;
  border-bottom: 1px solid var(--admin-line);
  color: var(--admin-muted);
  font-size: 13px;
}
.admin-table-summary strong {
  color: var(--admin-ink);
}
.admin-table-wrap {
  width: 100%;
  overflow-x: auto;
  overscroll-behavior-x: contain;
}
.admin-data-table {
  width: 100%;
  min-width: 980px;
  border-collapse: collapse;
  color: var(--admin-ink);
  font-size: 13px;
}
.admin-data-table th,
.admin-data-table td {
  padding: 13px 14px;
  border-bottom: 1px solid #e0e8ee;
  text-align: left;
  vertical-align: middle;
}
.admin-data-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: #f1f6fa;
  color: #3f5d73;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  white-space: nowrap;
}
.admin-data-table tbody tr:hover {
  background: #f6fafc;
}
.admin-data-table td strong,
.admin-data-table td small {
  display: block;
}
.admin-data-table td small {
  margin-top: 3px;
  color: var(--admin-muted);
}
.table-sort {
  display: inline-flex;
  min-height: 32px;
  align-items: center;
  gap: 7px;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
}
.table-sort.is-active {
  color: var(--admin-blue);
}
.sort-indicator {
  position: relative;
  width: 8px;
  height: 12px;
}
.sort-indicator::before,
.sort-indicator::after {
  content: "";
  position: absolute;
  left: 1px;
  border-right: 3px solid transparent;
  border-left: 3px solid transparent;
}
.sort-indicator::before {
  top: 0;
  border-bottom: 4px solid #7991a4;
}
.sort-indicator::after {
  bottom: 0;
  border-top: 4px solid #7991a4;
}
.sort-indicator.is-asc::before {
  border-bottom-color: var(--admin-blue);
}
.sort-indicator.is-desc::after {
  border-top-color: var(--admin-blue);
}
.score-cell {
  display: grid;
  min-width: 100px;
  gap: 6px;
}
.score-cell .admin-meter {
  height: 5px;
}
.status-badge {
  display: inline-flex;
  min-height: 28px;
  align-items: center;
  padding: 4px 9px;
  border: 1px solid #bacbd7;
  border-radius: 99px;
  background: #f2f6f8;
  color: #38546a;
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
}
.status-badge.is-complete,
.status-badge.is-abierto {
  border-color: #94c5af;
  background: #e8f5ef;
  color: #155b3e;
}
.status-badge.is-progress,
.status-badge.is-pendiente {
  border-color: #d8bd68;
  background: #fff6d8;
  color: #64500c;
}
.status-badge.is-cerrado {
  border-color: #dbacab;
  background: #faecec;
  color: #842828;
}
.admin-empty-table {
  padding: 70px 24px;
  text-align: center;
}
.admin-empty-table h2 {
  margin: 0 0 8px;
}
.admin-empty-table p {
  margin: 0 0 18px;
  color: var(--admin-muted);
}
.admin-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 16px 22px;
  border-top: 1px solid var(--admin-line);
  background: #f8fbfd;
}
.admin-pagination p {
  margin: 0;
  color: var(--admin-muted);
  font-size: 13px;
}
.admin-pagination > div {
  display: flex;
  align-items: center;
  gap: 12px;
}
.admin-pagination span {
  min-width: 105px;
  text-align: center;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}
.admin-operations {
  grid-template-columns: minmax(0, 1.35fr) minmax(330px, 0.65fr);
  align-items: start;
}
.admin-calendar {
  grid-column: 1 / -1;
}
.admin-calendar .admin-data-table {
  min-width: 860px;
}
.admin-helper {
  margin: -8px 0 20px;
  font-size: 14px;
}
.admin-inline-form,
.admin-operation-form {
  display: grid;
  gap: 14px;
}
.admin-inline-form .button,
.admin-operation-form .button {
  justify-self: start;
}
.admin-form-output {
  margin-top: 16px;
  color: var(--admin-ink);
  line-height: 1.5;
}
.admin-code,
.admin-count-result {
  padding: 16px;
  border: 1px solid #9ec8b3;
  border-radius: 6px;
  background: #eef8f3;
}
.admin-code p,
.admin-code small,
.admin-count-result p {
  display: block;
  margin: 0 0 10px;
}
.admin-code > strong {
  display: block;
  margin: 10px 0;
  font-size: 26px;
  letter-spacing: 0.08em;
}
.admin-danger-zone {
  border-color: #ddbdbc;
}
.admin-danger-zone details {
  border-top: 1px solid #ead8d7;
}
.admin-danger-zone summary {
  min-height: 52px;
  padding: 16px 0;
  color: #7b2727;
  font-weight: 800;
}
.admin-disclosure {
  padding: 0 0 20px;
}
.admin-disclosure > p {
  margin-top: 0;
  color: var(--admin-muted);
  line-height: 1.5;
}
.admin-dialog {
  width: min(780px, calc(100% - 32px));
  max-height: calc(100dvh - 48px);
  padding: 0;
  overflow: auto;
  border: 1px solid var(--admin-line);
  border-radius: 10px;
  background: #fff;
  color: var(--admin-ink);
  box-shadow: 0 16px 28px rgb(0 0 0 / 28%);
}
.admin-dialog::backdrop {
  background: rgb(3 20 34 / 72%);
}
.admin-dialog-head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 20px;
  padding: 24px 26px;
  border-bottom: 1px solid var(--admin-line);
}
.admin-dialog-head h2 {
  margin: 5px 0;
  font-size: 28px;
}
.admin-dialog-head p:last-child {
  margin: 0;
  color: var(--admin-muted);
}
.admin-dialog-meta {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0;
  padding: 20px 26px;
  border-bottom: 1px solid var(--admin-line);
  background: #f5f9fb;
}
.admin-dialog-meta > div {
  padding-right: 15px;
}
.admin-dialog-meta dt {
  color: var(--admin-muted);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}
.admin-dialog-meta dd {
  margin: 6px 0 0;
  font-weight: 800;
  line-height: 1.35;
}
.admin-decisions {
  padding: 24px 26px 30px;
}
.admin-decisions h3 {
  margin: 0 0 16px;
}
.admin-decisions ol {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}
.admin-decisions li {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 14px;
  padding: 16px 0;
  border-top: 1px solid #e0e8ee;
}
.admin-decisions li > span {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border: 1px solid #b9cad6;
  border-radius: 50%;
  background: #f3f7f9;
  font-size: 12px;
  font-weight: 850;
}
.admin-decisions li.is-correct > span {
  border-color: #86bea3;
  background: #e8f5ef;
  color: #155b3e;
}
.admin-decisions li.is-wrong > span {
  border-color: #dfb0ae;
  background: #faecec;
  color: #842828;
}
.admin-decisions strong,
.admin-decisions small {
  display: block;
}
.admin-decisions p {
  margin: 5px 0;
  line-height: 1.45;
}
.admin-decisions small {
  color: var(--admin-muted);
}

@media (max-width: 1120px) {
  .admin-kpis {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .admin-kpis > div:nth-child(3) {
    border-right: 0;
  }
  .admin-kpis > div:nth-child(-n + 3) {
    border-bottom: 1px solid var(--admin-line);
  }
  .admin-insights {
    grid-template-columns: 1fr;
  }
  .admin-insights h2 {
    max-width: none;
  }
  .admin-filters {
    grid-template-columns: minmax(240px, 1fr) repeat(3, minmax(130px, 0.45fr));
  }
  .admin-clear {
    justify-self: start;
  }
}
@media (max-width: 900px) {
  .admin {
    width: min(100% - 28px, 760px);
    padding-top: 22px;
  }
  .admin-login {
    grid-template-columns: 1fr;
  }
  .admin-login-copy {
    min-height: 280px;
    padding: 42px 30px;
  }
  .admin-login-form {
    margin: 0;
    border-radius: 0;
  }
  .admin-dashboard-head,
  .admin-section-title {
    align-items: start;
    flex-direction: column;
  }
  .admin-operations {
    grid-template-columns: 1fr;
  }
  .admin-calendar {
    grid-column: auto;
  }
  .admin-insights dl {
    grid-template-columns: 1fr;
  }
  .admin-insights dl > div {
    padding: 14px 0;
    border-top: 1px solid rgb(255 255 255 / 20%);
    border-left: 0;
  }
  .admin-insights dl > div:first-child {
    border-top: 0;
  }
  .admin-filters {
    grid-template-columns: 1fr 1fr;
  }
  .admin-search {
    grid-column: 1 / -1;
  }
  .admin-dialog-meta {
    grid-template-columns: 1fr 1fr;
    gap: 16px;
  }
}
@media (max-width: 640px) {
  .admin-topbar {
    align-items: center;
    padding-inline: 16px;
  }
  .admin-context {
    display: none;
  }
  .admin-brand .admin-mark {
    width: 40px;
    height: 40px;
  }
  .admin-brand strong {
    font-size: 11px;
  }
  .admin-brand small {
    font-size: 11px;
  }
  .admin {
    width: calc(100% - 24px);
  }
  .admin-login-copy h1 {
    font-size: 38px;
  }
  .admin-login-form {
    padding: 28px 22px;
  }
  .admin-dashboard-head,
  .admin-actions,
  .admin-actions .button {
    width: 100%;
  }
  .admin-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  .admin-actions .button:last-child {
    grid-column: 1 / -1;
  }
  .admin-tabs {
    overflow-x: auto;
  }
  .admin-tabs button {
    flex: 1 0 auto;
  }
  .admin-kpis {
    grid-template-columns: 1fr 1fr;
  }
  .admin-kpis > div,
  .admin-kpis > div:nth-child(3) {
    border-right: 1px solid var(--admin-line);
    border-bottom: 1px solid var(--admin-line);
  }
  .admin-kpis > div:nth-child(even) {
    border-right: 0;
  }
  .admin-kpis > div:nth-last-child(-n + 2) {
    border-bottom: 0;
  }
  .admin-kpis dd {
    font-size: 27px;
  }
  .admin-insights,
  .admin-card {
    padding: 20px;
  }
  .admin-card-head {
    display: block;
  }
  .admin-card-head > p {
    margin-top: 8px;
    text-align: left;
  }
  .admin-ranking li {
    grid-template-columns: 30px minmax(0, 1fr) 45px;
    padding: 12px 0;
  }
  .admin-ranking .admin-meter {
    grid-column: 2 / -1;
  }
  .admin-unit-list li {
    grid-template-columns: minmax(0, 1fr) 42px;
    padding: 10px 0;
  }
  .admin-unit-list .admin-meter {
    grid-column: 1 / -1;
  }
  .admin-funnel li {
    grid-template-columns: minmax(0, 1fr) 44px 56px;
  }
  .admin-funnel .admin-meter {
    grid-column: 1 / -1;
  }
  .admin-filters {
    grid-template-columns: 1fr;
    padding: 18px;
  }
  .admin-search {
    grid-column: auto;
  }
  .admin-clear {
    width: 100%;
  }
  .admin-pagination {
    align-items: stretch;
    flex-direction: column;
  }
  .admin-pagination > div {
    justify-content: space-between;
  }
  .admin-pagination .button {
    flex: 1;
  }
  .admin-dialog {
    width: calc(100% - 16px);
    max-height: calc(100dvh - 16px);
  }
  .admin-dialog-head,
  .admin-decisions {
    padding-inline: 20px;
  }
  .admin-dialog-head {
    flex-direction: column;
  }
  .admin-dialog-meta {
    grid-template-columns: 1fr;
    padding-inline: 20px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .admin-page .button {
    transition: none;
  }
}