:root {
  /* controles del navegador (barras de desplazamiento, campos) en su versión oscura */
  color-scheme: dark;
  --line: rgba(120, 170, 255, 0.14);
  --line-strong: rgba(140, 190, 255, 0.3);
  --panel: rgba(8, 24, 58, 0.62);
  --ink: #eaf2ff;
  --dim: #9db4d8;
  --faint: #6982ad;
  --blue: #5fa3ff;
  --blue-soft: #9ac8ff;
  --green: #7ee0b0;
  --orange: #ffb37a;
  --red: #ff9aa8;
  --font: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html, body { margin: 0; min-height: 100%; }

body {
  background:
    radial-gradient(1100px 560px at 85% -12%, rgba(38, 104, 224, 0.3), transparent 62%),
    linear-gradient(160deg, #07204f 0%, #041333 45%, #01060f 100%) fixed;
  color: var(--ink);
  font-family: var(--font);
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
}

.shell {
  max-width: 1480px;
  margin: 0 auto;
  padding: 28px clamp(16px, 3vw, 40px) 60px;
}

/* ------------------------------------------------------------- botones */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 18px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: linear-gradient(100deg, #1428a0, #2f7bff);
  color: #fff;
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition: filter 0.25s ease, opacity 0.25s ease;
}
.btn:hover { filter: brightness(1.15); }
.btn:disabled { opacity: 0.5; cursor: wait; }
.btn svg { width: 16px; height: 16px; }
.btn.is-disabled { opacity: 0.4; pointer-events: none; }
.btn--ghost {
  border-color: var(--line-strong);
  background: rgba(8, 24, 58, 0.5);
  color: var(--dim);
}
.btn--wide { width: 100%; padding: 14px 18px; font-size: 14px; }

/* -------------------------------------------------------------- acceso */

.login {
  max-width: 380px;
  margin: 12vh auto 0;
  padding: 36px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--panel);
  backdrop-filter: blur(16px);
}
.login__logo { height: 22px; margin-bottom: 28px; }
.login__title { margin: 0 0 6px; font-size: 24px; font-weight: 600; letter-spacing: -0.01em; }
.login__text { margin: 0 0 26px; color: var(--dim); font-weight: 300; }
.login__label {
  display: block;
  margin-bottom: 8px;
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--faint);
}
.login__input {
  width: 100%;
  padding: 14px 16px;
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  background: rgba(6, 20, 48, 0.7);
  color: var(--ink);
  font: inherit;
  font-size: 15px;
  outline: none;
}
.login__input:focus { border-color: var(--blue); box-shadow: 0 0 0 4px rgba(47, 123, 255, 0.16); }
.login__error { min-height: 18px; margin: 10px 0 12px; font-size: 12.5px; color: var(--red); }

/* ---------------------------------------------------------------- panel */

.board__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 24px;
}
.board__brand { display: flex; align-items: center; gap: 16px; }
.board__brand img { height: 20px; }
.board__brand span {
  padding-left: 16px;
  border-left: 1px solid var(--line-strong);
  font-size: 15px;
  font-weight: 500;
}
.board__actions { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; }
.board__sync { font-size: 12px; color: var(--faint); }
.board__sync.is-error { color: var(--orange); }

.stats {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}
@media (max-width: 900px) {
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.stat {
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--panel);
}
.stat__k {
  display: block;
  margin-bottom: 8px;
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--faint);
}
.stat__v { font-family: var(--mono); font-size: 24px; font-weight: 500; }
.stat__v--warn { color: var(--orange); }
.stat__v--text { display: block; font-family: var(--font); font-size: 14px; font-weight: 400; line-height: 1.45; color: var(--dim); }

.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--panel);
}
.grid { width: 100%; min-width: 1270px; border-collapse: collapse; }
.grid th,
.grid td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}
.grid thead th {
  background: rgba(7, 24, 60, 0.7);
  font-size: 11.5px;
  font-weight: 500;
  color: var(--dim);
  white-space: nowrap;
}
.grid tbody tr:last-child > * { border-bottom: 0; }
.grid tbody tr:hover { background: rgba(60, 120, 240, 0.06); }
/* la prueba final se separa un poco de las cuatro del sendero */
.grid .col-final { border-left: 1px solid var(--line-strong); }
.grid thead .col-final { color: var(--blue-soft); }

.col-mesa { width: 220px; }
.mesa-num { display: block; font-family: var(--mono); font-size: 12px; color: var(--blue-soft); }
.mesa-team { display: block; margin: 3px 0 7px; font-size: 14px; font-weight: 500; overflow-wrap: anywhere; }
.mesa-team em { font-style: normal; font-weight: 400; color: var(--faint); }
.mesa-actions { display: flex; flex-wrap: wrap; gap: 12px; font-size: 11.5px; font-weight: 400; }
.mesa-actions a,
.mesa-actions button {
  padding: 0;
  border: 0;
  background: none;
  color: var(--faint);
  font: inherit;
  text-decoration: none;
  cursor: pointer;
}
.mesa-actions a:hover { color: var(--blue-soft); }
.mesa-actions button:hover { color: var(--red); }

.cell { min-width: 150px; }
.cell__time { display: block; font-family: var(--mono); font-size: 18px; font-variant-numeric: tabular-nums; }
.cell__meta { display: block; margin-top: 2px; font-size: 11.5px; color: var(--faint); }
.cell__download {
  display: inline-block;
  margin-top: 8px;
  padding: 5px 10px;
  border: 1px solid rgba(126, 224, 176, 0.35);
  border-radius: 999px;
  color: var(--green);
  font-size: 11.5px;
  text-decoration: none;
}
.cell__download:hover { background: rgba(126, 224, 176, 0.12); }
.cell__versions {
  margin-left: 4px;
  padding: 1px 6px;
  border-radius: 999px;
  background: rgba(255, 179, 122, 0.15);
  color: var(--orange);
  font-size: 10.5px;
}

.cell.is-pending .cell__time { color: var(--faint); }
.cell.is-running .cell__time { color: var(--blue-soft); }
.cell.is-running .cell__meta { color: var(--blue); }
.cell.is-done .cell__time { color: var(--green); }
.cell.is-expired .cell__time {
  font-family: var(--font);
  font-size: 15px;
  font-weight: 500;
  color: var(--orange);
}

.col-progress { width: 120px; }
.progress-count { display: block; margin-bottom: 8px; font-family: var(--mono); font-size: 14px; }
.progress-bar {
  display: block;
  height: 4px;
  border-radius: 2px;
  background: rgba(120, 170, 255, 0.14);
  overflow: hidden;
}
.progress-bar span { display: block; height: 100%; background: linear-gradient(90deg, #1f4fd8, #9ac8ff); }
tr.is-finished .progress-bar span { background: var(--green); }

/* suma de lo puntuado en cada mesa */
.col-points { width: 108px; text-align: right; border-left: 1px solid var(--line); }
.points-total {
  display: block;
  font-family: var(--mono);
  font-size: 22px;
  font-weight: 500;
  color: var(--blue-soft);
}
.points-total.is-empty { font-size: 18px; color: var(--faint); }
.points-note { display: block; margin-top: 3px; font-size: 10.5px; color: var(--faint); }

/* ---------------------------------------------------------- puntuación */

.cell__score { margin-top: 8px; }
.cell__points {
  display: block;
  margin-bottom: 5px;
  font-family: var(--mono);
  font-size: 13px;
  color: var(--blue-soft);
}
.cell__rate {
  padding: 5px 10px;
  border: 1px solid rgba(95, 163, 255, 0.4);
  border-radius: 999px;
  background: rgba(47, 123, 255, 0.12);
  color: var(--blue-soft);
  font: inherit;
  font-size: 11.5px;
  cursor: pointer;
}
.cell__rate:hover { background: rgba(47, 123, 255, 0.24); }

.score {
  position: fixed;
  inset: 0;
  z-index: 30;
  display: grid;
  place-items: center;
  padding: 24px;
}
.score__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(1, 6, 18, 0.74);
  backdrop-filter: blur(6px);
}
.score__box {
  position: relative;
  width: min(560px, 100%);
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  padding: 26px 30px 22px;
  border: 1px solid var(--line-strong);
  border-radius: 20px;
  background:
    radial-gradient(120% 70% at 50% 0%, rgba(38, 96, 210, 0.28) 0%, transparent 62%),
    linear-gradient(168deg, rgba(10, 28, 68, 0.99), rgba(4, 12, 32, 0.99));
  box-shadow: 0 40px 120px rgba(2, 10, 30, 0.7);
}
/* Barra de desplazamiento fina y azul, sin flechas, cuando la ventana no cabe. En Chrome y
   Edge va con las pseudoclases de webkit: si se declara scrollbar-color, Chrome usa la
   barra estándar y vuelve a pintar las flechas. Firefox no tiene flechas y usa la estándar. */
@supports not selector(::-webkit-scrollbar) {
  .score__box { scrollbar-width: thin; scrollbar-color: rgba(120, 170, 255, 0.35) transparent; }
}
.score__box::-webkit-scrollbar { width: 8px; }
.score__box::-webkit-scrollbar-track { background: transparent; }
.score__box::-webkit-scrollbar-thumb { background: rgba(120, 170, 255, 0.3); border-radius: 4px; }
.score__box::-webkit-scrollbar-button { display: none; }
.score__close {
  position: absolute;
  top: 16px;
  right: 16px;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: rgba(10, 28, 66, 0.6);
  color: var(--dim);
  cursor: pointer;
}
.score__close svg { width: 16px; height: 16px; }
.score__eyebrow {
  margin: 0 0 6px;
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--blue-soft);
}
.score__title { margin: 0 0 4px; font-size: 22px; font-weight: 600; }
.score__meta { margin: 0 0 14px; font-size: 12.5px; color: var(--faint); }

.score__criteria { display: grid; gap: 8px; }
.crit {
  margin: 0;
  padding: 11px 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(6, 20, 48, 0.5);
}
.crit__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  width: 100%;
  padding: 0;
}
.crit__label { font-size: 13.5px; font-weight: 500; }
.crit__help { display: block; margin-top: 2px; font-size: 11.5px; font-weight: 300; color: var(--faint); }
.crit__max { flex: none; font-family: var(--mono); font-size: 11.5px; color: var(--faint); }
.crit__check {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 7px;
  font-size: 13px;
  color: var(--dim);
  cursor: pointer;
}
/* casillas en el estilo del panel: borde azul y, marcadas, check blanco sobre azul */
.crit input[type="checkbox"] {
  flex: none;
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  margin: 0;
  border: 1px solid rgba(95, 163, 255, 0.45);
  border-radius: 5px;
  background: rgba(6, 20, 48, 0.8) center / 12px no-repeat;
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}
.crit input[type="checkbox"]:hover { border-color: var(--blue-soft); }
.crit input[type="checkbox"]:checked {
  border-color: #2f7bff;
  background-color: #2f7bff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 13 4.5 4.5L19 7'/%3E%3C/svg%3E");
}
.crit input[type="checkbox"]:focus-visible { outline: 2px solid var(--blue-soft); outline-offset: 2px; }
.crit--number { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.crit--number .crit__head { display: block; }
.crit__input { display: flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 12.5px; color: var(--faint); white-space: nowrap; }
.crit__input input {
  width: 64px;
  padding: 8px 10px;
  border: 1px solid var(--line-strong);
  border-radius: 9px;
  background: rgba(6, 20, 48, 0.8);
  color: var(--ink);
  font: inherit;
  font-size: 15px;
  text-align: right;
  outline: none;
}
.crit__input input:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(47, 123, 255, 0.16); }
/* sin las flechas del navegador: se suma y resta con los botones − y + */
.crit__input input { -moz-appearance: textfield; appearance: textfield; }
.crit__input input::-webkit-outer-spin-button,
.crit__input input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.step {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 1px solid rgba(95, 163, 255, 0.4);
  border-radius: 50%;
  background: rgba(47, 123, 255, 0.12);
  color: var(--blue-soft);
  font: inherit;
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}
.step:hover { background: rgba(47, 123, 255, 0.3); color: #fff; }
.step:disabled { opacity: 0.35; cursor: default; }
.crit--bonus { display: flex; align-items: center; gap: 10px; cursor: pointer; }
.crit--bonus .crit__label { flex: 1; }

.score__hints {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 8px;
  padding: 11px 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
}
.score__hints-label { display: block; font-size: 13.5px; font-weight: 500; }
.score__hints-note { display: block; margin-top: 2px; font-size: 11.5px; color: var(--faint); }
.segmented { display: flex; border: 1px solid var(--line-strong); border-radius: 999px; overflow: hidden; }
.segmented label { position: relative; cursor: pointer; }
.segmented input { position: absolute; opacity: 0; pointer-events: none; }
.segmented span {
  display: block;
  min-width: 44px;
  padding: 8px 14px;
  font-family: var(--mono);
  font-size: 13px;
  text-align: center;
  color: var(--dim);
}
.segmented input:checked + span { background: linear-gradient(100deg, #1428a0, #2f7bff); color: #fff; }
.segmented input:focus-visible + span { outline: 2px solid var(--blue-soft); outline-offset: -2px; }

.score__total {
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: 8px;
  margin: 12px 4px 0;
  font-size: 13px;
  color: var(--dim);
}
.score__total strong { font-family: var(--mono); font-size: 30px; font-weight: 500; color: var(--ink); }
.score__error { min-height: 18px; margin: 8px 0 4px; font-size: 12.5px; color: var(--red); }
.score__actions { display: flex; justify-content: flex-end; gap: 10px; }

.board__note {
  max-width: 900px;
  margin: 14px 4px 0;
  font-size: 12px;
  line-height: 1.6;
  color: var(--faint);
}