/* ═══════════════════════════════════════════════════════
   pruebas.css — Módulo Ojeador (candidatos / sesiones)
   Mobile-first. Botones grandes para uso en campo.
═══════════════════════════════════════════════════════ */

/* ── Layout base ─────────────────────────────────────── */
.pruebas-wrap {
  max-width: 680px;
  margin: 0 auto;
  padding: 0 16px 80px;
}

.pruebas-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 20px 0 16px;
  border-bottom: 0.5px solid var(--border);
  margin-bottom: 0;
}

.pruebas-title {
  font-family: var(--font-display);
  font-size: clamp(22px, 5vw, 32px);
  letter-spacing: 0.04em;
  color: var(--text1);
  margin: 0;
}

/* ── Tabs ────────────────────────────────────────────── */
.pruebas-tabs {
  display: flex;
  gap: 4px;
  padding: 14px 0 0;
  border-bottom: 0.5px solid var(--border);
  margin-bottom: 20px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.pruebas-tab {
  background: none;
  border: none;
  color: var(--text3);
  font-size: 14px;
  font-weight: 500;
  padding: 10px 16px;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  border-radius: 6px 6px 0 0;
  transition: color .15s, border-color .15s;
}

.pruebas-tab:hover {
  color: var(--text2);
}

.pruebas-tab.active {
  color: var(--teal);
  border-bottom-color: var(--teal);
}

.pruebas-tab:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 2px;
}

.pruebas-pane { display: none }
.pruebas-pane.active { display: block }

/* ── Panel header (título + botón añadir + filtro) ───── */
.pruebas-panel-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.pruebas-panel-header select {
  background: var(--bg2);
  border: 0.5px solid var(--border);
  border-radius: 8px;
  color: var(--text2);
  font-size: 13px;
  padding: 8px 12px;
  cursor: pointer;
}

/* ── Candidatos: cards ───────────────────────────────── */
.trial-card {
  background: var(--bg2);
  border: 0.5px solid var(--border);
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 10px;
  transition: border-color .15s;
}

.trial-card--signed   { opacity: .65 }
.trial-card--discarded { opacity: .45 }

.trial-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 6px;
}

.trial-card__name {
  font-size: 15px;
  font-weight: 600;
  color: var(--text1);
}

.trial-card__badge {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 20px;
  flex-shrink: 0;
}

.trial-card__badge--active    { background: rgba(72,163,140,.15); color: var(--teal) }
.trial-card__badge--signed    { background: rgba(100,180,255,.12); color: #64b4ff }
.trial-card__badge--discarded { background: rgba(255,80,80,.1);   color: var(--red, #e84040) }

.trial-card__meta {
  display: flex;
  gap: 10px;
  font-size: 12px;
  color: var(--text3);
  flex-wrap: wrap;
  margin-bottom: 4px;
}

.trial-card__notes {
  font-size: 12px;
  color: var(--text3);
  line-height: 1.5;
  margin: 6px 0 0;
  padding-top: 8px;
  border-top: 0.5px solid var(--border);
}

.trial-card__actions {
  display: flex;
  gap: 8px;
  margin-top: 12px;
  flex-wrap: wrap;
}

/* ── Sesiones: rows ──────────────────────────────────── */
.sess-row {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 0;
  border-bottom: 0.5px solid var(--border);
}

.sess-row:first-child { border-top: 0.5px solid var(--border) }

.sess-row__left {
  min-width: 0;
}

.sess-row__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 12px;
}

.sess-row__date {
  font-size: 15px;
  font-weight: 600;
  color: var(--text1);
  line-height: 1.3;
}

.sess-row__count {
  font-size: 12px;
  color: var(--teal);
  font-weight: 500;
}

.sess-row__notes {
  font-size: 12px;
  color: var(--text3);
  margin: 4px 0 0;
  line-height: 1.4;
}

/* ── Asistencia: checkboxes ──────────────────────────── */
.att-check-label {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 0.5px solid var(--border);
  cursor: pointer;
  font-size: 14px;
  color: var(--text1);
}

.att-check-label:last-child { border-bottom: none }

.att-check-label input[type="checkbox"] {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  cursor: pointer;
  accent-color: var(--teal);
}

.att-check-pos {
  font-size: 12px;
  color: var(--text3);
  margin-left: auto;
  flex-shrink: 0;
}

/* ── Toast de fichaje (sesión 68) ────────────────────── */
.trial-toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999;
  padding: 16px 20px;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 500;
  max-width: 90vw;
  text-align: center;
  box-shadow: 0 4px 24px rgba(0, 0, 0, .5);
  background: var(--teal);
  color: var(--bg);
  transition: opacity .3s;
}

.trial-toast__line { margin-bottom: 8px }

.trial-toast__codewrap {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: center;
}

.trial-toast__code {
  font-family: var(--font-mono);
  font-size: 16px;
  letter-spacing: 0.1em;
  background: rgba(0, 0, 0, .2);
  padding: 4px 10px;
  border-radius: 6px;
}

.trial-toast__copy {
  background: rgba(0, 0, 0, .2);
  border: none;
  color: inherit;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 12px;
  cursor: pointer;
}

/* ── Botones utilitarios ─────────────────────────────── */
.btn-primary-sm {
  background: var(--teal);
  color: var(--bg);
  border: none;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  padding: 8px 14px;
  cursor: pointer;
  white-space: nowrap;
  transition: opacity .15s;
}

.btn-primary-sm:disabled { opacity: .5; cursor: not-allowed }

/* ── Estados de carga / vacío ────────────────────────── */
.pruebas-loading,
.pruebas-empty {
  font-size: 13px;
  color: var(--text3);
  padding: 24px 0;
  text-align: center;
}

/* ── Responsive ──────────────────────────────────────── */
@media (max-width: 480px) {
  .pruebas-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .trial-card__actions {
    flex-direction: column;
  }

  .trial-card__actions .btn-ghost-sm,
  .trial-card__actions .btn-primary-sm {
    width: 100%;
    text-align: center;
    padding: 12px 16px;
    font-size: 14px;
  }

  .sess-row__actions .btn-ghost-sm,
  .sess-row__actions .btn-primary-sm {
    flex: 1 1 calc(50% - 4px);
    min-width: 9rem;
    text-align: center;
    padding: 12px 14px;
    font-size: 14px;
  }
}

/* ════════════════════════════════════════════════════════════════════
   Fase C · Matriz de habilidades — modales ficha + evaluación
   ════════════════════════════════════════════════════════════════════ */

/* Estilos base de modal — duplicados de admin.css porque pruebas.css ahora
   se carga también en equipo.html (donde admin.css NO está cargado).
   En ojeador.html admin.css ya define lo mismo: la cascada lo deja idéntico.
   Si en el futuro alguien refactoriza modales a style.css, borrar este bloque. */
.modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.75);
  z-index: 300;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
.modal-overlay.open { display: flex; }
/* .modal-box base: style.css */
.modal-close-btn {
  position: absolute; top: 16px; right: 16px;
  background: none; border: none; color: var(--text3);
  font-size: 18px; cursor: pointer; padding: 4px 8px;
  border-radius: 6px; font-family: var(--font-body);
  transition: color 0.15s, background 0.15s;
}
.modal-close-btn:hover { color: var(--text); background: var(--bg3); }
.modal-title-sm {
  font-family: var(--font-display); font-size: 20px;
  letter-spacing: 0.04em; color: var(--text); margin-bottom: 4px;
}

/* Card clicable (ficha del candidato) */
.trial-card--clickable {
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, transform 0.08s;
}
.trial-card--clickable:hover {
  border-color: var(--border2);
  background: var(--bg3);
}
.trial-card--clickable:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 2px;
}

/* Modal más ancho (formularios cortos) — max-width en style.css */

/* Ficha + evaluación: vista de página (un solo scroll del documento) */
#pruebas-hub-list.hidden,
#pruebas-candidate-page.hidden,
#cand-detail-eval-section.hidden,
#cand-detail-eval-foot.hidden {
  display: none !important;
}

.pruebas-candidate-page {
  padding-bottom: 24px;
}
.pruebas-candidate-page__nav {
  margin-bottom: 12px;
}
.pruebas-candidate-page__title {
  margin: 0 0 4px;
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 5vw, 2.25rem);
  letter-spacing: 0.04em;
  color: var(--text);
}
.pruebas-candidate-page__foot {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
  background: linear-gradient(to top, var(--bg, #080807) 70%, transparent);
  border-top: 0.5px solid var(--border);
}
.pruebas-candidate-page__foot-inner {
  max-width: 560px;
  margin: 0 auto;
}
body.pruebas-candidate-page-open {
  padding-bottom: calc(88px + env(safe-area-inset-bottom, 0px));
}
body.pruebas-candidate-page-open .pruebas-candidate-page__inner {
  padding-bottom: 8px;
}
.pruebas-candidate-page--eval .cand-detail__history {
  margin-bottom: 8px;
}
.cand-detail__eval {
  margin: 16px 0;
  padding-top: 16px;
  border-top: 0.5px solid var(--border);
}
.cand-detail__eval-heading {
  margin: 0 0 12px;
  font-family: var(--font-display);
  font-size: 1.1rem;
  letter-spacing: 0.04em;
  color: var(--text);
}
.cand-detail__eval-notes-field {
  margin-top: 12px;
}
.cand-detail__eval-foot {
  flex-shrink: 0;
  padding: 12px 0 0;
  margin-top: 8px;
  border-top: 0.5px solid var(--border);
  background: var(--bg, #080807);
}
.cand-detail__eval-err {
  font-size: 12px;
  color: var(--red);
  margin: 0 0 8px;
}
.cand-detail__eval-foot-actions {
  display: flex;
  gap: 10px;
  align-items: stretch;
}
.cand-detail__eval-foot-actions .btn-primary {
  flex: 1;
  min-height: 44px;
}
.cand-detail__eval-foot-actions .btn-ghost-sm {
  min-height: 44px;
  flex-shrink: 0;
}
.pruebas-candidate-page--eval .eval-zones-host:not([hidden]) {
  margin-bottom: 8px;
}

/* ── Ficha del candidato ── */
.skill-detail__meta {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 8px;
  margin-bottom: 12px;
  color: var(--text2);
  font-size: 13px;
}
.skill-detail__meta-text { color: var(--text2); }
.skill-detail__notes {
  font-size: 13px;
  color: var(--text2);
  background: var(--bg2);
  padding: 10px 12px;
  border-radius: 6px;
  margin: 0 0 14px;
  line-height: 1.5;
}
.skill-detail__notes:empty { display: none; }
.skill-detail__actions {
  margin: 0 0 18px;
  display: flex;
  gap: 10px;
}
.skill-detail__history {
  border-top: 0.5px solid var(--border);
  padding-top: 16px;
}
.skill-detail__history-loading,
.skill-detail__history-empty {
  color: var(--text3);
  font-size: 13px;
  text-align: center;
  padding: 18px 0;
}
.skill-detail__history-err {
  color: var(--red);
  font-size: 13px;
  text-align: center;
  padding: 18px 0;
}
.skill-detail__section-title {
  font-family: var(--font-display);
  letter-spacing: 0.04em;
  font-size: 13px;
  color: var(--text3);
  margin: 0 0 10px;
  text-transform: uppercase;
}
.skill-detail__summary { margin-bottom: 18px; }
.skill-detail__axis-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
  gap: 8px;
}
.skill-detail__axis-cell {
  background: var(--bg2);
  border: 0.5px solid var(--border);
  border-radius: 8px;
  padding: 10px 8px;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.skill-detail__axis-label {
  font-size: 11px;
  color: var(--text3);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.skill-detail__axis-value {
  font-family: var(--font-display);
  font-size: 22px;
  color: var(--text);
  line-height: 1;
}
.skill-detail__axis-value.is-empty { color: var(--text3); }

.skill-detail__chrono-row {
  border-top: 0.5px solid var(--border);
  padding: 10px 0;
}
.skill-detail__chrono-row:first-child { border-top: 0; }
.skill-detail__chrono-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 4px;
}
.skill-detail__chrono-date { font-size: 12px; color: var(--text2); }
.skill-detail__chrono-role {
  font-size: 11px;
  color: var(--text3);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.skill-detail__chrono-note {
  font-size: 12px;
  color: var(--text2);
  margin: 0 0 6px;
  line-height: 1.5;
}
.skill-detail__chrono-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.skill-detail__chrono-chip {
  font-size: 11px;
  background: var(--bg3);
  color: var(--text2);
  padding: 3px 8px;
  border-radius: 999px;
  border: 0.5px solid var(--border);
}

/* Histórico anterior collapsable (solo modal del jugador) */
.skill-detail__prev {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 0.5px solid var(--border);
}
.skill-detail__prev-host { margin-top: 12px; }

/* ── Modal evaluación ── */
.eval-view-toggle {
  border: 0;
  padding: 0;
  margin: 12px 0 16px;
  display: flex;
  gap: 8px;
}
.eval-view-toggle__legend {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.eval-view-opt {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: var(--bg2);
  border: 0.5px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px;
  cursor: pointer;
  font-size: 13px;
  color: var(--text2);
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.eval-view-opt input { accent-color: var(--teal); }
.eval-view-opt:has(input:checked) {
  border-color: var(--teal);
  color: var(--text);
  background: var(--bg3);
}

.eval-axes-host {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-height: 50vh;
  overflow-y: auto;
}
.eval-axis {
  background: var(--bg2);
  border: 0.5px solid var(--border);
  border-radius: 10px;
  padding: 12px;
}
.eval-axis__head { margin-bottom: 8px; }
.eval-axis__label {
  font-family: var(--font-display);
  font-size: 14px;
  letter-spacing: 0.04em;
  color: var(--text);
  margin: 0;
  text-transform: uppercase;
}
.eval-attr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 6px 0;
  border-top: 0.5px solid var(--border);
}
.eval-attr:first-of-type { border-top: 0; }
.eval-attr__label {
  font-size: 12px;
  color: var(--text2);
  flex: 1;
  min-width: 0;
  line-height: 1.3;
}

.eval-segmented {
  display: inline-flex;
  gap: 4px;
}
.eval-seg-btn {
  min-width: 38px;
  min-height: 38px;
  font-family: var(--font-display);
  font-size: 15px;
  background: var(--bg3);
  border: 0.5px solid var(--border2);
  color: var(--text2);
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.eval-seg-btn:hover { color: var(--text); background: var(--bg4); }
.eval-seg-btn.is-selected {
  background: var(--teal);
  color: var(--bg);
  border-color: var(--teal);
}
.eval-seg-btn:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 2px;
}

/* Responsive ≤480px */
@media (max-width: 480px) {
  .skill-detail__axis-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .eval-attr {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }
  .eval-segmented { width: 100%; justify-content: space-between; }
  .eval-seg-btn   { flex: 1; }
}

/* ════════════════════════════════════════════════════════════════════
   Sesión 70 · chip sesión vinculada en evaluación / histórico
   - .eval-session-pill        → pill informativa en modal de evaluación
   - .skill-detail__chrono-session → chip en cada fila del histórico
   - .sess-row__actions        → acciones en fila de sesión
   ════════════════════════════════════════════════════════════════════ */

/* Chip pequeño en la cabecera de cada fila cronológica del histórico */
.skill-detail__chrono-session {
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--text2);
  padding: 2px 8px;
  background: rgba(20, 184, 166, 0.12);
  border: 0.5px solid rgba(20, 184, 166, 0.30);
  border-radius: 999px;
  white-space: nowrap;
}

/* ── Pill «Vinculada a sesión X» (modal evaluación, solo ojeador.html) ── */
.eval-session-pill {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 8px 0 14px;
  padding: 8px 12px;
  background: rgba(20, 184, 166, 0.10);
  border: 0.5px solid rgba(20, 184, 166, 0.30);
  border-radius: 8px;
  font-size: 12px;
  color: var(--text2);
}
.eval-session-pill__text {
  flex: 1;
  min-width: 0;
  line-height: 1.3;
}
.eval-session-pill__remove {
  flex-shrink: 0;
  background: transparent;
  border: 0.5px solid var(--border);
  color: var(--text3);
  font-family: var(--font-body);
  font-size: 11px;
  padding: 4px 10px;
  border-radius: 6px;
  cursor: pointer;
  transition: color 0.12s, border-color 0.12s;
}
.eval-session-pill__remove:hover {
  color: var(--text);
  border-color: var(--text3);
}
.eval-session-pill__remove:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 1px;
}

/* ── Wrapper de acciones en cada fila de sesión ── */
.sess-row__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.sess-row__actions .btn-ghost-sm:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 2px;
}

/* ── Botón «Eliminar» en cada fila del histórico de evaluaciones ─────── */
/* Va dentro de .skill-detail__chrono-head; se empuja al final con margin-left:auto. */
.skill-detail__chrono-delete {
  margin-left: auto;
  background: transparent;
  border: 0.5px solid var(--border);
  color: var(--text3);
  font-family: var(--font-body);
  font-size: 11px;
  padding: 3px 10px;
  border-radius: 6px;
  cursor: pointer;
  transition: color 0.12s, border-color 0.12s, background 0.12s;
}
.skill-detail__chrono-delete:hover:not(:disabled) {
  color: var(--red);
  border-color: var(--red);
  background: rgba(220, 53, 69, 0.06);
}
.skill-detail__chrono-delete:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 1px;
}
.skill-detail__chrono-delete:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

/* ── Botones de borrado (sesión 70.B): heredan .btn-ghost-sm pero hover rojo ── */
.sess-row__delete:hover:not(:disabled),
.trial-card__delete:hover:not(:disabled) {
  color: var(--red);
  border-color: var(--red);
  background: rgba(220, 53, 69, 0.06);
}
.sess-row__delete:focus-visible,
.trial-card__delete:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 1px;
}

/* ── Mini-botón «Desvincular» junto al chip de sesión del histórico ─────── */
.skill-detail__chrono-unlink {
  background: transparent;
  border: 0;
  color: var(--text3);
  font-family: var(--font-body);
  font-size: 11px;
  padding: 2px 8px;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-style: dotted;
  border-radius: 4px;
  transition: color 0.12s;
}
.skill-detail__chrono-unlink:hover:not(:disabled) {
  color: var(--text);
}
.skill-detail__chrono-unlink:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 1px;
}
.skill-detail__chrono-unlink:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

/* ── Chip «Sin evaluar / N evaluaciones» en card del listado ─────────── */
.trial-card__eval-count {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  letter-spacing: 0.04em;
  padding: 3px 10px;
  border-radius: 999px;
  border: 0.5px solid var(--border);
  margin: 6px 0 0;
  align-self: flex-start;
  white-space: nowrap;
}
.trial-card__eval-count.is-empty {
  color: var(--text3);
  background: var(--bg2);
}
.trial-card__eval-count.has-evals {
  color: var(--text);
  background: rgba(20, 184, 166, 0.10);
  border-color: rgba(20, 184, 166, 0.30);
}

/* ── Badge inline para no-actives en modal de asistencia ─────────────── */
.att-check-status {
  margin-left: auto;
  font-size: 11px;
  color: var(--text3);
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--bg2);
  border: 0.5px solid var(--border);
  white-space: nowrap;
}

/* Responsive ≤480px (extensión del bloque Fase C de arriba) */
@media (max-width: 480px) {
  .eval-session-pill {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
  .eval-session-pill__remove {
    width: 100%;
  }
  .sess-row__actions {
    width: 100%;
    flex-direction: column;
  }
  .sess-row__actions .btn-ghost-sm,
  .sess-row__actions .btn-primary-sm {
    width: 100%;
    text-align: center;
  }
}

/* ════════════════════════════════════════════════════════════════════
   Sesión 71 · Filter bar del listado de candidatos
   - .pruebas-filterbar              → wrapper (search + selects)
   - .pruebas-filterbar__search-wrap → label envolviendo el input search
   - .pruebas-filterbar__search      → input búsqueda full-width
   - .pruebas-filterbar__selects     → grid de 4 selects (estado/pos/año/sesión)
   - .pruebas-filterbar__clear       → botón «Limpiar filtros» (hidden por defecto)
   ════════════════════════════════════════════════════════════════════ */

.pruebas-filterbar {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0 0 16px;
  padding: 12px;
  background: var(--bg2);
  border: 0.5px solid var(--border);
  border-radius: 10px;
}

.pruebas-filterbar__search-wrap {
  display: block;
  width: 100%;
}

.pruebas-filterbar__search {
  width: 100%;
  background: var(--bg);
  border: 0.5px solid var(--border);
  border-radius: 8px;
  color: var(--text1);
  font-size: 14px;
  padding: 10px 12px;
  font-family: var(--font-body);
  box-sizing: border-box;
  transition: border-color 0.15s, background 0.15s;
}

.pruebas-filterbar__search::placeholder { color: var(--text3); }

.pruebas-filterbar__search:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 1px;
  border-color: var(--teal);
}

/* Selects: grid responsive — 1 col en móvil, 2 cols a partir de 480px,
   4 cols a partir de 720px. Estilos heredan del select genérico de
   .pruebas-panel-header definido más arriba. */
.pruebas-filterbar__selects {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}

.pruebas-filterbar__selects select {
  width: 100%;
  background: var(--bg);
  border: 0.5px solid var(--border);
  border-radius: 8px;
  color: var(--text2);
  font-size: 13px;
  padding: 8px 12px;
  font-family: var(--font-body);
  cursor: pointer;
  box-sizing: border-box;
  transition: border-color 0.15s, color 0.15s;
}

.pruebas-filterbar__selects select:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 1px;
  border-color: var(--teal);
}

.pruebas-filterbar__selects select:hover { color: var(--text1); }

/* Botón «Limpiar filtros» (vive en .pruebas-panel-header con [hidden]). */
.pruebas-filterbar__clear {
  margin-left: auto;
}
.pruebas-filterbar__clear[hidden] { display: none !important; }

.sess-row__shared-badge {
  display: inline-block;
  margin-top: 4px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--teal);
  background: color-mix(in srgb, var(--teal) 14%, transparent);
}

.skill-detail__summary--team {
  margin-bottom: 1.25rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--border);
}

.skill-detail__summary--zones {
  margin-bottom: 1.25rem;
}

.skill-detail__zones-heat {
  margin-top: 0.35rem;
}

.skill-detail__zones-heat-title,
.skill-detail__chrono-zones-label {
  margin: 0 0 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text2);
  letter-spacing: 0.02em;
}

.skill-detail__zones-heat-grid .pitch-zone-picker__hint {
  font-size: 11px;
  margin-bottom: 4px;
}

.skill-detail__chrono-zones {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed var(--border);
}

.skill-detail__zones-heat-list {
  margin: 6px 0 0;
  padding: 0 0 0 1.1rem;
  font-size: 11px;
  color: var(--text3);
  line-height: 1.45;
}

@media (min-width: 480px) {
  .pruebas-filterbar__selects { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 720px) {
  .pruebas-filterbar { padding: 14px; }
  .pruebas-filterbar__selects { grid-template-columns: repeat(4, 1fr); }
}

/* ═══════════════════════════════════════════════════════
   UI polish — ritmo vertical, cards y controles (v19)
═══════════════════════════════════════════════════════ */

.pruebas-hub {
  --pr-gap-xs: 6px;
  --pr-gap-sm: 10px;
  --pr-gap-md: 16px;
  --pr-gap-lg: 24px;
  --pr-radius: 14px;
  --pr-radius-sm: 10px;
}

.pruebas-wrap {
  padding: 0 18px 88px;
}

.pruebas-header {
  padding: 22px 0 18px;
  gap: 14px;
  align-items: flex-end;
}

.pruebas-header__category:not([hidden]) {
  display: block;
  min-width: 9rem;
  background: var(--bg2);
  border: 0.5px solid var(--border);
  border-radius: var(--pr-radius-sm);
  color: var(--text2);
  font-size: 13px;
  padding: 10px 12px;
  cursor: pointer;
  font-family: var(--font-body);
  transition: border-color 0.15s, color 0.15s;
}

.pruebas-header__category:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 2px;
}

.pruebas-tabs {
  gap: 6px;
  padding: 5px;
  margin-bottom: var(--pr-gap-lg);
  border-bottom: none;
  background: var(--bg2);
  border: 0.5px solid var(--border);
  border-radius: var(--pr-radius);
}

.pruebas-tab {
  flex: 1;
  text-align: center;
  padding: 11px 14px;
  border-radius: var(--pr-radius-sm);
  border-bottom: none;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.pruebas-tab.active {
  color: var(--text1);
  background: var(--bg3);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.22);
}

.pruebas-panel-header {
  gap: 12px;
  margin-bottom: var(--pr-gap-md);
  align-items: center;
}

.pruebas-panel-header .btn-sm {
  min-height: 40px;
  padding: 10px 18px;
  font-size: 13px;
  border-radius: var(--pr-radius-sm);
}

.pruebas-panel-header .btn-ghost-sm {
  min-height: 40px;
}

.pruebas-filterbar {
  gap: 12px;
  margin-bottom: var(--pr-gap-lg);
  padding: 14px 16px;
  border-radius: var(--pr-radius);
  background: color-mix(in srgb, var(--bg2) 90%, var(--bg));
}

.pruebas-filterbar__search {
  padding: 11px 14px;
  border-radius: var(--pr-radius-sm);
}

.pruebas-filterbar__selects {
  gap: 10px;
}

.pruebas-filterbar__selects select {
  padding: 10px 12px;
  border-radius: var(--pr-radius-sm);
}

/* Solo sesiones en columna; candidatos usan .oj-card-grid (grid de tarjetas). */
#sess-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.trial-card {
  margin-bottom: 0;
  padding: 16px 18px;
  border-radius: var(--pr-radius);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.03) inset;
}

.trial-card__header {
  margin-bottom: 10px;
}

.trial-card__meta {
  margin-bottom: 10px;
  gap: 12px;
  font-size: 13px;
}

.trial-card__eval-count {
  margin: 0 0 10px;
}

.trial-card__notes {
  margin-top: 10px;
  padding-top: 12px;
  line-height: 1.55;
}

.trial-card__actions {
  margin-top: 14px;
  padding-top: 14px;
  gap: 10px;
}

.sess-row {
  gap: 14px;
  padding: 16px 18px;
  margin-bottom: 0;
  border-bottom: none;
  border: 0.5px solid var(--border);
  border-radius: var(--pr-radius);
  background: var(--bg2);
}

.sess-row:first-child {
  border-top: none;
}

.sess-row__head {
  gap: 8px 14px;
}

.sess-row__notes {
  margin: 6px 0 0;
  line-height: 1.5;
}

.sess-row__actions {
  gap: 10px;
  padding-top: 4px;
}

.sess-row__actions .btn-ghost-sm,
.sess-row__actions .btn-primary-sm {
  min-height: 40px;
  padding: 10px 14px;
}

.pruebas-loading,
.pruebas-empty {
  padding: 32px 16px;
  line-height: 1.5;
}

/* Ficha candidato */
.pruebas-candidate-page__nav {
  margin-bottom: var(--pr-gap-md);
}

.pruebas-candidate-page__back {
  min-height: 40px;
  padding: 10px 14px;
}

.pruebas-candidate-page__title {
  margin: 0 0 14px;
  line-height: 1.05;
}

.skill-detail__meta {
  margin-top: 0;
  margin-bottom: var(--pr-gap-md);
  gap: 12px;
}

.skill-detail__notes {
  margin-bottom: var(--pr-gap-lg);
  padding: 12px 14px;
  border-radius: var(--pr-radius-sm);
  line-height: 1.55;
}

.cand-detail__actions {
  margin-bottom: var(--pr-gap-lg);
}

.cand-detail__actions .btn-primary {
  min-height: 48px;
  padding: 12px 22px;
  font-size: 14px;
  border-radius: var(--pr-radius-sm);
}

.cand-detail__history {
  padding-top: var(--pr-gap-lg);
  margin-top: 4px;
}

.skill-detail__summary {
  margin-bottom: var(--pr-gap-lg);
}

.skill-detail__section-title {
  margin-bottom: 12px;
  font-size: 11px;
  letter-spacing: 0.08em;
}

.skill-detail__chrono-row {
  padding: 18px 0;
}

.skill-detail__chrono-head {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  margin-bottom: 12px;
}

.skill-detail__chrono-top {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px 14px;
}

.skill-detail__chrono-date {
  font-size: 13px;
  font-weight: 500;
  color: var(--text1);
}

.skill-detail__chrono-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.skill-detail__chrono-toolbar {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
  padding-top: 10px;
  border-top: 0.5px solid var(--border);
}

.skill-detail__chrono-toolbar .btn-ghost-sm {
  min-height: 36px;
  padding: 8px 14px;
  font-size: 12px;
}

.skill-detail__chrono-delete {
  margin-left: 0;
  padding: 8px 14px;
  font-size: 12px;
  text-decoration: none;
}

.skill-detail__chrono-unlink {
  padding: 8px 14px;
  font-size: 12px;
  text-decoration: none;
  border: 0.5px solid var(--border);
  border-radius: 8px;
}

.skill-detail__chrono-note {
  margin: 0 0 12px;
  padding: 10px 12px;
  background: var(--bg2);
  border-radius: var(--pr-radius-sm);
  line-height: 1.55;
}

.skill-detail__chrono-chips {
  gap: 6px;
  margin-bottom: 4px;
}

.skill-detail__chrono-chip {
  padding: 5px 10px;
  font-size: 11px;
}

.cand-detail__eval {
  margin: var(--pr-gap-lg) 0;
  padding-top: var(--pr-gap-lg);
}

.cand-detail__eval-heading {
  margin-bottom: 14px;
}

.eval-view-toggle {
  margin: 0 0 18px;
  gap: 10px;
}

.eval-view-opt {
  padding: 12px 14px;
  border-radius: var(--pr-radius-sm);
}

.eval-zones-wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  margin: 18px 0 20px;
}

.eval-zones-wrap .btn-ghost-sm {
  min-height: 40px;
}

.cand-detail__eval-notes-field {
  margin-top: 4px;
}

.cand-detail__eval-notes-field label {
  display: block;
  margin-bottom: 8px;
  font-size: 12px;
  font-weight: 500;
  color: var(--text2);
}

.cand-detail__eval-notes-field textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 11px 12px;
  border-radius: var(--pr-radius-sm);
  line-height: 1.5;
}

.pruebas-candidate-page__foot {
  padding: 14px 18px calc(14px + env(safe-area-inset-bottom, 0px));
  background: color-mix(in srgb, var(--bg, #080807) 88%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-top: 0.5px solid var(--border);
}

.cand-detail__eval-foot {
  padding-top: 14px;
  margin-top: 12px;
}

.cand-detail__eval-foot-actions {
  gap: 12px;
}

.eval-session-pill {
  margin: 0 0 16px;
  padding: 10px 14px;
  border-radius: var(--pr-radius-sm);
  gap: 12px;
}

.eval-session-pill__remove {
  min-height: 36px;
  padding: 8px 12px;
}

/* ═══════════════════════════════════════════════════════
   Ojeador — dashboard y ficha (mock referencia)
═══════════════════════════════════════════════════════ */

.pruebas-hub {
  --oj-lime: #c8f235;
  --oj-lime-dim: color-mix(in srgb, var(--oj-lime) 18%, transparent);
  --oj-surface: #121211;
  --oj-surface-2: #1a1a18;
  --oj-border: color-mix(in srgb, var(--text3) 28%, transparent);
}

/* Modo día: estos tokens eran oscuros fijos (#121211 / #1a1a18) y no cambiaban,
   por eso las tarjetas KPI, buscador, filtros y botones del ojeador quedaban
   negros en tema claro. Mapear a tokens del tema; el lime sin contraste sobre
   claro pasa a verde oscuro del tema (igual que --teal). --oj-border y los
   textos (--text/--text3) ya son adaptativos. */
[data-theme="light"] .pruebas-hub {
  --oj-surface: var(--bg2);
  --oj-surface-2: var(--bg3);
  --oj-lime: var(--teal);
}

[data-theme="light"] .pruebas-candidate-page__foot {
  background: linear-gradient(to top, var(--bg2) 70%, transparent);
}
[data-theme="light"] .cand-detail__eval-foot {
  background: var(--bg2);
}

.pruebas-wrap--hub {
  max-width: 1240px;
  padding: 0 20px 96px;
}

.oj-hero {
  padding: 8px 0 28px;
  border-bottom: 0.5px solid var(--oj-border);
  margin-bottom: 28px;
}

.oj-hero__eyebrow {
  margin: 0 0 12px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text3);
}

.oj-hero__title-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 10px 16px;
  margin-bottom: 14px;
}

.oj-hero__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(2.75rem, 8vw, 4.5rem);
  line-height: 0.95;
  letter-spacing: 0.03em;
  color: var(--text1);
}

.oj-hero__category:not([hidden]) {
  margin-left: auto;
  min-width: 9rem;
  background: var(--oj-surface-2);
  border: 0.5px solid var(--oj-border);
  border-radius: 8px;
  color: var(--text2);
  font-size: 13px;
  padding: 8px 12px;
}

.oj-hero__lead {
  margin: 0;
  max-width: 52rem;
  font-size: 14px;
  line-height: 1.65;
  color: var(--text3);
}

.oj-hero__lead strong {
  color: var(--text1);
  font-weight: 600;
}

.oj-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
  margin-bottom: 32px;
  border: 0.5px solid var(--oj-border);
  border-radius: 10px;
  overflow: hidden;
  background: var(--oj-surface);
}

@media (min-width: 640px) {
  .oj-stats { grid-template-columns: repeat(4, 1fr); }
}

.oj-stat {
  padding: 18px 20px;
  border-right: 0.5px solid var(--oj-border);
  border-bottom: 0.5px solid var(--oj-border);
}

.oj-stat:nth-child(2n) { border-right: none; }

.oj-stat:nth-last-child(-n+2) { border-bottom: none; }

@media (min-width: 640px) {
  .oj-stat { border-bottom: none; }
  .oj-stat:nth-child(2n) { border-right: 0.5px solid var(--oj-border); }
  .oj-stat:last-child { border-right: none; }
}

.oj-stat__label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text3);
  margin-bottom: 4px;
}

.oj-stat__value {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(2rem, 5vw, 2.75rem);
  line-height: 1;
  color: var(--text1);
  letter-spacing: 0.02em;
}

.oj-stat--primary .oj-stat__value,
.oj-stat--primary .oj-stat__hint {
  color: var(--oj-lime);
}

.oj-stat__hint {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  color: var(--text3);
}

.oj-tabs.pruebas-tabs {
  display: flex;
  gap: 28px;
  padding: 0;
  margin-bottom: 28px;
  background: transparent;
  border: none;
  border-bottom: 0.5px solid var(--oj-border);
  border-radius: 0;
}

.oj-tab.pruebas-tab {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 2px 14px;
  margin-bottom: -1px;
  border-radius: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  box-shadow: none;
  color: var(--text3);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.oj-tab.pruebas-tab.active {
  color: var(--text1);
  border-bottom-color: var(--oj-lime);
  background: transparent;
}

.oj-tab__icon {
  display: inline-flex;
  opacity: 0.85;
}

.oj-tab__count {
  font-family: var(--font-mono);
  font-size: 11px;
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--oj-surface-2);
  border: 0.5px solid var(--oj-border);
  color: var(--text2);
}

.oj-tab.active .oj-tab__count {
  color: var(--oj-lime);
  border-color: color-mix(in srgb, var(--oj-lime) 35%, transparent);
  background: var(--oj-lime-dim);
}

.oj-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 16px;
  margin-bottom: 18px;
}

.oj-toolbar__label {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text3);
}

.oj-toolbar__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--oj-lime);
  flex-shrink: 0;
}

.oj-toolbar__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-left: auto;
}

.oj-btn-add {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 10px 18px;
  border-radius: 8px;
  border: 0.5px solid var(--oj-border);
  background: var(--oj-surface-2);
  color: var(--text1);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}

.oj-btn-add:hover {
  border-color: var(--oj-lime);
  color: var(--oj-lime);
}

.oj-btn-add:focus-visible {
  outline: 2px solid var(--oj-lime);
  outline-offset: 2px;
}

.oj-filters.pruebas-filterbar {
  margin-bottom: 22px;
  padding: 0;
  background: transparent;
  border: none;
  gap: 12px;
  display: flex;
  flex-direction: column;
}

.oj-filters__selects.pruebas-filterbar__selects {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  width: 100%;
}

@media (min-width: 720px) {
  .oj-filters__selects.pruebas-filterbar__selects {
    grid-template-columns: repeat(4, 1fr);
  }
}

.oj-tab__text,
.oj-toolbar__label,
.oj-btn-add {
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.oj-stat__label {
  text-transform: uppercase;
}

.oj-search {
  position: relative;
  display: block;
}

.oj-search__icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text3);
  pointer-events: none;
}

.oj-search__input {
  padding-left: 42px !important;
  background: var(--oj-surface) !important;
  border-color: var(--oj-border) !important;
  min-height: 44px;
}

.oj-filters__selects select {
  background: var(--oj-surface) !important;
  border-color: var(--oj-border) !important;
  min-height: 44px;
}

#cand-list.oj-card-grid,
.oj-card-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

@media (min-width: 900px) {
  #cand-list.oj-card-grid,
  .oj-card-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 1100px) {
  #cand-list.oj-card-grid,
  .oj-card-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.trial-card--v2 {
  position: relative;
  margin: 0;
  padding: 14px 14px 12px;
  border-radius: 10px;
  border: 0.5px solid var(--oj-border);
  background: var(--oj-surface);
  box-shadow: none;
  transition: border-color 0.15s, transform 0.1s;
}

.trial-card--v2.trial-card--clickable:hover {
  border-color: color-mix(in srgb, var(--oj-lime) 40%, var(--oj-border));
  background: var(--oj-surface-2);
  transform: translateY(-1px);
}

.trial-card--v2 .trial-card__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 12px;
}

.trial-card--v2 .trial-card__name {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.05rem;
  line-height: 1.15;
  letter-spacing: 0.03em;
  color: var(--text1);
  text-transform: uppercase;
}

.trial-card__grade {
  flex-shrink: 0;
  font-family: var(--font-display);
  font-size: 1.35rem;
  line-height: 1;
  color: var(--oj-lime);
  letter-spacing: 0.02em;
}

.trial-card__meta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
}

.trial-card__pos {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 3px 8px;
  border-radius: 4px;
  background: color-mix(in srgb, #5b8def 22%, transparent);
  color: #8ab4f8;
  border: 0.5px solid color-mix(in srgb, #5b8def 35%, transparent);
}

.trial-card__year {
  font-size: 12px;
  font-weight: 600;
  color: #e8a060;
}

.trial-card__sess {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--text3);
  text-transform: uppercase;
}

.trial-card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-top: 2px;
}

.trial-card__dots {
  display: inline-flex;
  gap: 5px;
}

.trial-card__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--oj-surface-2);
  border: 0.5px solid var(--oj-border);
}

.trial-card__dot.is-on {
  background: var(--oj-lime);
  border-color: var(--oj-lime);
  box-shadow: 0 0 8px color-mix(in srgb, var(--oj-lime) 45%, transparent);
}

.trial-card__track {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.trial-card__track--active { color: var(--oj-lime); }
.trial-card__track--pending { color: #e8a060; }
.trial-card__track--low { color: var(--text3); }
.trial-card__track--signed { color: #8ab4f8; }

.trial-card__more {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  opacity: 0;
  transition: opacity 0.15s;
}

.trial-card--v2:hover .trial-card__more,
.trial-card--v2:focus-within .trial-card__more,
.trial-card__more[open] {
  opacity: 1;
}

.trial-card__more > summary {
  list-style: none;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  border: 0.5px solid transparent;
  color: var(--text3);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
}

.trial-card__more > summary::-webkit-details-marker { display: none; }

.trial-card__more > summary:hover,
.trial-card__more[open] > summary {
  background: var(--oj-surface-2);
  border-color: var(--oj-border);
  color: var(--text1);
}

.trial-card__more-menu {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  min-width: 9.5rem;
  padding: 6px;
  border-radius: 8px;
  border: 0.5px solid var(--oj-border);
  background: var(--bg2);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.trial-card__more-menu .btn-ghost-sm,
.trial-card__more-menu .btn-primary-sm {
  width: 100%;
  justify-content: center;
  min-height: 36px;
}

.oj-sessions-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.sess-card {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 16px 20px;
  margin: 0;
  padding: 16px 44px 16px 18px;
  border-radius: 10px;
  border: 0.5px solid var(--oj-border);
  background: var(--oj-surface);
  transition: border-color 0.15s, background 0.15s;
}

.sess-card--clickable {
  cursor: pointer;
}

.sess-card--clickable:hover,
.sess-card--clickable:focus-visible {
  border-color: color-mix(in srgb, var(--oj-lime) 35%, var(--oj-border));
  background: var(--oj-surface-2);
  outline: none;
}

.sess-card__date-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 52px;
  padding-right: 18px;
  border-right: 0.5px solid var(--oj-border);
}

.sess-card__day {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 4vw, 2.25rem);
  line-height: 1;
  color: var(--text1);
  letter-spacing: 0.02em;
}

.sess-card__month {
  margin-top: 2px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text3);
}

.sess-card__body {
  min-width: 0;
}

.sess-card__title {
  margin: 0 0 4px;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--text1);
}

.sess-card__sub {
  margin: 0;
  font-size: 13px;
  line-height: 1.4;
  color: var(--text3);
}

.sess-card__end {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-shrink: 0;
}

.sess-card__attend {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 6px 12px;
  border-radius: 999px;
  border: 0.5px solid var(--oj-border);
  background: var(--oj-surface-2);
  color: var(--text2);
  white-space: nowrap;
}

.sess-card__arrow {
  font-size: 18px;
  line-height: 1;
  color: var(--text2);
}

.sess-card__more {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  opacity: 0;
  transition: opacity 0.15s;
}

.sess-card:hover .sess-card__more,
.sess-card:focus-within .sess-card__more,
.sess-card__more[open] {
  opacity: 1;
}

.sess-card__more > summary {
  list-style: none;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  color: var(--text3);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
}

.sess-card__more > summary::-webkit-details-marker { display: none; }

.sess-card__more-menu {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  min-width: 10rem;
  padding: 6px;
  border-radius: 8px;
  border: 0.5px solid var(--oj-border);
  background: var(--bg2);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
  display: flex;
  flex-direction: column;
  gap: 4px;
  z-index: 3;
}

.sess-card__more-menu .btn-ghost-sm {
  width: 100%;
  justify-content: center;
  min-height: 36px;
}

.oj-empty {
  padding: 40px 16px;
  text-align: center;
  color: var(--text3);
  font-size: 14px;
}

#cand-loading[hidden],
#cand-empty[hidden],
#cand-list[hidden],
#sess-loading[hidden],
#sess-empty[hidden],
#sess-list[hidden] {
  display: none !important;
}

/* ── Ojeador: skills / evaluación (mismo lenguaje que tarjetas) ── */
.pruebas-hub .pruebas-candidate-page__title {
  font-family: var(--font-display);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.pruebas-hub .skill-detail__section-title,
.pruebas-hub .cand-detail__eval-heading {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text3);
}

.pruebas-hub .skill-detail__section-title::before,
.pruebas-hub .cand-detail__eval-heading::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--oj-lime);
  flex-shrink: 0;
}

.pruebas-hub .skill-detail__notes,
.pruebas-hub .skill-detail__chrono-note {
  background: var(--oj-surface);
  border: 0.5px solid var(--oj-border);
  border-radius: 10px;
  color: var(--text2);
}

.pruebas-hub .skill-detail__history,
.pruebas-hub .cand-detail__history {
  border-top-color: var(--oj-border);
}

.pruebas-hub .skill-detail__axis-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

@media (min-width: 640px) {
  .pruebas-hub .skill-detail__axis-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 900px) {
  .pruebas-hub .skill-detail__axis-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.pruebas-hub .skill-detail__axis-cell {
  background: var(--oj-surface);
  border: 0.5px solid var(--oj-border);
  border-radius: 10px;
  padding: 12px 10px;
}

.pruebas-hub .skill-detail__axis-label {
  color: var(--text3);
  letter-spacing: 0.1em;
}

.pruebas-hub .skill-detail__axis-value:not(.is-empty) {
  color: var(--oj-lime);
}

.pruebas-hub .skill-detail__summary--team,
.pruebas-hub .skill-detail__summary--zones {
  padding: 14px 16px;
  border-radius: 10px;
  border: 0.5px solid var(--oj-border);
  background: var(--oj-surface-2);
}

.pruebas-hub .skill-detail__chrono-row {
  border-top: 0;
  margin-bottom: 10px;
  padding: 14px 16px;
  border-radius: 10px;
  border: 0.5px solid var(--oj-border);
  background: var(--oj-surface);
}

.pruebas-hub .skill-detail__chrono-head {
  margin-bottom: 10px;
}

.pruebas-hub .skill-detail__chrono-toolbar {
  border-top-color: var(--oj-border);
}

.pruebas-hub .skill-detail__chrono-chip {
  background: var(--oj-surface-2);
  border: 0.5px solid var(--oj-border);
  color: var(--text2);
  font-weight: 600;
  letter-spacing: 0.04em;
}

.pruebas-hub .skill-detail__chrono-session {
  background: var(--oj-lime-dim);
  border-color: color-mix(in srgb, var(--oj-lime) 35%, transparent);
  color: var(--oj-lime);
}

.pruebas-hub .eval-view-opt {
  background: var(--oj-surface);
  border-color: var(--oj-border);
  border-radius: 10px;
  color: var(--text3);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.pruebas-hub .eval-view-opt input {
  accent-color: var(--oj-lime);
}

.pruebas-hub .eval-view-opt:has(input:checked) {
  border-color: var(--oj-lime);
  color: var(--text1);
  background: var(--oj-lime-dim);
}

.pruebas-hub .eval-axes-host {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  max-height: none;
}

@media (min-width: 720px) {
  .pruebas-hub .eval-axes-host {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.pruebas-hub .eval-axis {
  background: var(--oj-surface);
  border: 0.5px solid var(--oj-border);
  border-radius: 10px;
  padding: 14px;
  margin: 0;
}

.pruebas-hub .eval-axis__label {
  color: var(--text1);
  font-size: 12px;
  letter-spacing: 0.08em;
}

.pruebas-hub .eval-attr {
  border-top-color: var(--oj-border);
}

.pruebas-hub .eval-seg-btn {
  background: var(--oj-surface-2);
  border-color: var(--oj-border);
  border-radius: 8px;
  color: var(--text2);
}

.pruebas-hub .eval-seg-btn:hover {
  color: var(--text1);
  border-color: color-mix(in srgb, var(--oj-lime) 40%, var(--oj-border));
}

.pruebas-hub .eval-seg-btn.is-selected {
  background: var(--oj-lime);
  border-color: var(--oj-lime);
  color: #121211;
  box-shadow: 0 0 12px color-mix(in srgb, var(--oj-lime) 35%, transparent);
}

.pruebas-hub .eval-seg-btn:focus-visible {
  outline-color: var(--oj-lime);
}

.pruebas-hub .eval-session-pill {
  background: var(--oj-surface);
  border: 0.5px solid var(--oj-border);
  border-radius: 10px;
}

.pruebas-hub .eval-zones-wrap .btn-ghost-sm:hover {
  border-color: var(--oj-lime);
  color: var(--oj-lime);
}

.pruebas-hub .cand-detail__eval-notes-field textarea {
  background: var(--oj-surface);
  border: 0.5px solid var(--oj-border);
  border-radius: 10px;
  color: var(--text1);
}

.pruebas-hub .cand-detail__eval-notes-field textarea:focus {
  border-color: var(--oj-lime);
  outline: none;
  box-shadow: 0 0 0 2px var(--oj-lime-dim);
}

.pruebas-hub #cand-detail-eval-btn.btn-primary,
.pruebas-hub #eval-submit.btn-primary {
  background: var(--oj-lime);
  border-color: var(--oj-lime);
  color: #121211;
}

.pruebas-hub #cand-detail-eval-btn.btn-primary:hover,
.pruebas-hub #eval-submit.btn-primary:hover {
  filter: brightness(1.05);
}

.pruebas-hub .pruebas-candidate-page__foot {
  border-top-color: var(--oj-border);
  background: color-mix(in srgb, var(--oj-surface) 92%, transparent);
}

/* ── Ficha candidato (mock evaluación + historial) ── */
.pruebas-hub .oj-ficha__back {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 11px;
  font-weight: 600;
  color: var(--text3);
}

.pruebas-hub .oj-ficha__eyebrow {
  margin: 0 0 8px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text3);
}

.pruebas-hub .oj-ficha__title {
  margin: 0 0 16px;
  font-family: var(--font-display);
  font-size: clamp(2rem, 6vw, 3.25rem);
  line-height: 0.95;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text1);
}

.pruebas-hub .oj-ficha__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 18px;
}

.pruebas-hub .oj-ficha__tag {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.05em;
  padding: 5px 10px;
  border-radius: 999px;
  border: 0.5px solid var(--oj-border);
  background: var(--oj-surface-2);
  color: var(--text2);
}

.pruebas-hub .oj-ficha__tag--pos {
  color: #8ab4f8;
  border-color: color-mix(in srgb, #5b8def 35%, transparent);
  background: color-mix(in srgb, #5b8def 18%, transparent);
}

.pruebas-hub .oj-ficha__tag--year { color: #e8a060; }

.pruebas-hub .oj-ficha__tag--sess {
  color: var(--text3);
  text-transform: uppercase;
}

.pruebas-hub .oj-ficha__tag--active {
  color: var(--oj-lime);
  border-color: color-mix(in srgb, var(--oj-lime) 40%, transparent);
  background: var(--oj-lime-dim);
}

.pruebas-hub .oj-ficha__tag--pending { color: #e8a060; }
.pruebas-hub .oj-ficha__tag--low { color: var(--text3); }
.pruebas-hub .oj-ficha__tag--signed { color: #8ab4f8; }

.pruebas-hub .oj-ficha__notes-box {
  margin-bottom: 24px;
  padding: 14px 16px;
  border-radius: 10px;
  border: 0.5px solid var(--oj-border);
  background: var(--oj-surface);
}

.pruebas-hub .oj-ficha__notes-label {
  margin: 0 0 8px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text3);
}

.pruebas-hub .oj-ficha__notes-body {
  margin: 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--text2);
}

.pruebas-hub .oj-ficha__eval {
  margin-top: 8px;
  padding-top: 24px;
  border-top: 0.5px solid var(--oj-border);
}

.pruebas-hub .oj-ficha__eval-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px 16px;
  margin-bottom: 16px;
}

.pruebas-hub .oj-ficha__eval-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text1);
}

.pruebas-hub .oj-ficha__eval-meta {
  margin: 0;
  font-size: 12px;
  color: var(--text3);
}

.pruebas-hub .oj-ficha__view-tabs {
  margin-bottom: 20px;
}

.pruebas-hub .oj-ficha__eval-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-bottom: 22px;
}

@media (min-width: 960px) {
  .pruebas-hub .oj-ficha__eval-layout {
    grid-template-columns: minmax(0, 1.15fr) minmax(260px, 0.85fr);
    align-items: start;
  }
}

.pruebas-hub .oj-ficha__axes {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-height: none;
}

.pruebas-hub .oj-axis {
  padding: 14px 16px;
  border-radius: 10px;
  border: 0.5px solid var(--oj-border);
  background: var(--oj-surface);
}

.pruebas-hub .oj-axis--attr {
  padding: 12px 14px;
  background: var(--oj-surface-2);
}

.pruebas-hub .oj-axis__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.pruebas-hub .oj-axis__title {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--text1);
}

.pruebas-hub .oj-axis__subs {
  margin: 4px 0 0;
  font-size: 10px;
  line-height: 1.4;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text3);
}

.pruebas-hub .oj-axis__score {
  flex-shrink: 0;
  font-family: var(--font-display);
  font-size: 1.35rem;
  line-height: 1;
  color: var(--text1);
  white-space: nowrap;
}

.pruebas-hub .oj-axis__bar {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
}

.pruebas-hub .oj-axis__seg {
  min-height: 24px;
  padding: 0;
  border: none;
  border-radius: 3px;
  background: var(--oj-surface-2);
  cursor: pointer;
  transition: background 0.12s, box-shadow 0.12s;
}

.pruebas-hub .oj-axis__seg.is-on {
  background: var(--oj-lime);
  box-shadow: 0 0 10px color-mix(in srgb, var(--oj-lime) 40%, transparent);
}

.pruebas-hub .oj-axis__seg:focus-visible {
  outline: 2px solid var(--oj-lime);
  outline-offset: 2px;
}

.pruebas-hub .oj-ficha__eval-side {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.pruebas-hub .oj-ficha__global-card,
.pruebas-hub .oj-ficha__radar-card {
  padding: 16px;
  border-radius: 10px;
  border: 0.5px solid var(--oj-border);
  background: var(--oj-surface);
}

.pruebas-hub .oj-ficha__card-label,
.pruebas-hub .oj-radar__title {
  margin: 0 0 12px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text3);
}

.pruebas-hub .oj-ficha__global-score {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 6vw, 3.25rem);
  line-height: 1;
  color: var(--text1);
}

.pruebas-hub .oj-ficha__global-grade {
  display: inline-block;
  margin-top: 10px;
  padding: 4px 10px;
  border-radius: 6px;
  border: 0.5px solid color-mix(in srgb, var(--oj-lime) 45%, transparent);
  color: var(--oj-lime);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
}

.pruebas-hub .oj-radar__svg {
  display: block;
  width: 100%;
  max-width: 280px;
  margin: 0 auto;
}

.pruebas-hub .oj-radar__grid {
  fill: none;
  stroke: var(--oj-border);
  stroke-width: 1;
}

.pruebas-hub .oj-radar__axis-line {
  stroke: var(--oj-border);
  stroke-width: 1;
}

.pruebas-hub .oj-radar__poly--cur {
  fill: color-mix(in srgb, var(--oj-lime) 22%, transparent);
  stroke: var(--oj-lime);
  stroke-width: 2;
}

.pruebas-hub .oj-radar__poly--prev {
  fill: none;
  stroke: var(--text3);
  stroke-width: 1.5;
  stroke-dasharray: 4 3;
}

.pruebas-hub .oj-radar__label {
  fill: var(--text3);
  font-size: 9px;
  font-family: var(--font-body);
}

.pruebas-hub .oj-radar__legend {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  margin-top: 10px;
  font-size: 11px;
  color: var(--text3);
}

.pruebas-hub .oj-radar__leg--cur::before {
  content: '';
  display: inline-block;
  width: 12px;
  height: 2px;
  margin-right: 6px;
  vertical-align: middle;
  background: var(--oj-lime);
}

.pruebas-hub .oj-radar__leg--prev::before {
  content: '';
  display: inline-block;
  width: 12px;
  height: 0;
  margin-right: 6px;
  vertical-align: middle;
  border-top: 2px dashed var(--text3);
}

.pruebas-hub .oj-ficha__zones-toggle {
  width: 100%;
  justify-content: flex-start;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 11px;
  font-weight: 600;
  color: var(--text3);
  border: none;
  background: transparent;
  padding: 8px 0;
}

.pruebas-hub .oj-ficha__zones-toggle:hover {
  color: var(--oj-lime);
}

.pruebas-hub .oj-ficha__history {
  margin-top: 32px;
  padding-top: 28px;
  border-top: 0.5px solid var(--oj-border);
}

.pruebas-hub .skill-detail__summary:not(.skill-detail__summary--team):not(.skill-detail__summary--zones) {
  display: none;
}

.pruebas-hub .oj-hist__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px 16px;
  margin-bottom: 18px;
}

.pruebas-hub .oj-hist__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3vw, 2rem);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text1);
}

.pruebas-hub .oj-hist__sub {
  margin: 0;
  font-size: 12px;
  color: var(--text3);
}

.pruebas-hub .oj-hist__list {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.pruebas-hub .oj-hist-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 16px 20px;
  padding: 16px 0;
  border-bottom: 0.5px solid var(--oj-border);
}

.pruebas-hub .oj-hist-row__date {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 52px;
}

.pruebas-hub .oj-hist-row__day {
  font-family: var(--font-display);
  font-size: 1.75rem;
  line-height: 1;
  color: var(--text1);
}

.pruebas-hub .oj-hist-row__month {
  margin-top: 2px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text3);
}

.pruebas-hub .oj-hist-bars {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 10px;
  min-height: 72px;
}

.pruebas-hub .oj-hist-bar-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.pruebas-hub .oj-hist-bar-track {
  display: flex;
  align-items: flex-end;
  width: 22px;
  height: 56px;
  background: var(--oj-surface-2);
  border-radius: 4px;
  overflow: hidden;
}

.pruebas-hub .oj-hist-bar-fill {
  display: block;
  width: 100%;
  background: var(--oj-lime);
  border-radius: 3px 3px 0 0;
  transition: height 0.15s;
}

.pruebas-hub .oj-hist-bar-lbl {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--text3);
}

.pruebas-hub .oj-hist-row__end {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  min-width: 56px;
}

.pruebas-hub .oj-hist-row__score {
  font-family: var(--font-display);
  font-size: 1.75rem;
  line-height: 1;
  color: var(--text1);
}

.pruebas-hub .oj-hist-row__trend {
  font-size: 11px;
  font-weight: 600;
  color: var(--text3);
}

.pruebas-hub .oj-hist-row__trend.is-up { color: var(--oj-lime); }
.pruebas-hub .oj-hist-row__trend.is-down { color: #e8a060; }

.pruebas-hub .oj-hist-row__actions {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.pruebas-hub .oj-hist-row__note {
  grid-column: 1 / -1;
  margin: 0;
  padding: 10px 12px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--text2);
  background: var(--oj-surface-2);
  border-radius: 8px;
}

/* ═══════════════════════════════════════════════════════
   Ojeador hub — móvil 360/390 (sesión 94)
═══════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  .pruebas-hub {
    overflow-x: clip;
  }

  .pruebas-wrap--hub,
  .pruebas-hub .pruebas-wrap,
  .pruebas-hub .oj-ficha__inner.pruebas-wrap {
    padding-left: 0;
    padding-right: 0;
  }

  .pruebas-candidate-page__foot {
    padding-left: max(12px, env(safe-area-inset-left, 0px));
    padding-right: max(12px, env(safe-area-inset-right, 0px));
  }
}

@media (max-width: 580px) {
  .pruebas-wrap--hub {
    padding-bottom: 72px;
  }

  .oj-hero {
    padding-bottom: 20px;
    margin-bottom: 22px;
  }

  .oj-hero__title-row {
    flex-direction: column;
    align-items: flex-start;
  }

  .oj-hero__category:not([hidden]) {
    margin-left: 0;
    width: 100%;
    min-width: 0;
  }

  .oj-stats {
    margin-bottom: 24px;
  }

  .oj-stat {
    padding: 14px 16px;
  }

  .oj-tabs.pruebas-tabs {
    gap: 20px;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }

  .oj-tab.pruebas-tab {
    flex: 0 0 auto;
    min-width: max-content;
  }

  .oj-toolbar {
    flex-direction: column;
    align-items: stretch;
  }

  .oj-toolbar__actions {
    margin-left: 0;
    width: 100%;
  }

  .oj-toolbar__actions .oj-btn-add,
  .oj-toolbar > .oj-btn-add {
    flex: 1 1 100%;
    width: 100%;
  }

  .oj-filters__selects.pruebas-filterbar__selects {
    grid-template-columns: 1fr;
  }

  #cand-list.oj-card-grid,
  .oj-card-grid {
    grid-template-columns: 1fr;
  }

  .sess-card {
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    padding: 14px 40px 14px 14px;
    gap: 10px 12px;
  }

  .sess-card__end {
    grid-column: 1 / -1;
    flex-wrap: wrap;
    justify-content: flex-start;
  }

  .sess-card__attend {
    white-space: normal;
  }

  .pruebas-hub .oj-ficha__tags {
    flex-wrap: wrap;
    gap: 8px;
  }

  .pruebas-hub .oj-ficha__view-tabs.eval-view-toggle {
    flex-direction: column;
  }

  .pruebas-hub .eval-view-opt {
    width: 100%;
  }

  .pruebas-hub .oj-axis__head {
    flex-wrap: wrap;
  }

  .pruebas-hub .oj-hist-row {
    grid-template-columns: auto 1fr;
    gap: 10px 12px;
    padding: 14px 0;
  }

  .pruebas-hub .oj-hist-row__end {
    grid-column: 2;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
  }

  .pruebas-hub .oj-hist-bars {
    grid-column: 1 / -1;
    justify-content: flex-start;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4px;
  }

  .cand-detail__actions .btn-primary {
    width: 100%;
    box-sizing: border-box;
  }

  .cand-detail__eval-foot-actions {
    flex-direction: column;
  }

  .cand-detail__eval-foot-actions .btn-primary,
  .cand-detail__eval-foot-actions .btn-ghost-sm {
    width: 100%;
    flex: none;
  }
}

@media (max-width: 480px) {
  .oj-stat__value {
    font-size: clamp(1.75rem, 8vw, 2.25rem);
  }

  .pruebas-hub .oj-axis__bar {
    gap: 4px;
  }

  .pruebas-hub .oj-axis__seg {
    min-height: 28px;
  }
}