/* ══════════════════════════════════════════════════════════════════════════
   CONTROL SIMCE · Salón de la Fama & Afiches de Aula
   Estilos de la pantalla. Usa los tokens de pa-simce-v3.css (--s-*, --t-*,
   --sh-*, --r-*) para heredar el sistema físico y el tema claro/oscuro.
   Prefijo .sf- para no colisionar con el resto de la app.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Barra de selección de ensayos ── */
.sf-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  margin-bottom: 16px;
}
.sf-bar-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--t-4);
}
.sf-bar .spacer { margin-left: auto; }
.sf-bar-count { font-size: 12px; font-weight: 600; color: var(--t-3); }

/* ── Chip de ensayo (toggle) ── */
.sf-chip {
  min-height: 36px;
  padding: 0 15px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--t-3);
  background: var(--s-raised);
  border: 1px solid var(--b-hairline);
  border-radius: var(--r-pill);
  box-shadow: var(--sh-flat), var(--hl-top);
  transition: box-shadow var(--tr-fast), transform var(--tr-fast), background var(--tr-fast), color var(--tr-fast);
}
.sf-chip:hover { transform: translateY(-1px); box-shadow: var(--sh-rest), var(--hl-top); }
.sf-chip:active { transform: translateY(1px); box-shadow: var(--sh-inset-deep); }
.sf-chip.is-on {
  color: #fff;
  border-color: #0E74D6;
  background: linear-gradient(180deg, #5FC6F7 0%, #1890FF 55%, #0D6ECB 100%);
  box-shadow: 0 1px 2px rgba(13, 110, 203, .35), 0 10px 20px -10px rgba(24, 144, 255, .7),
              inset 0 1px 0 rgba(255, 255, 255, .4);
}
.sf-chip-dashed {
  border-style: dashed;
  border-color: rgba(24, 144, 255, .45);
  background: rgba(24, 144, 255, .07);
  color: #1074cc;
  box-shadow: none;
}
[data-theme="dark"] .sf-chip-dashed { color: #7CC4FF; background: rgba(24, 144, 255, .12); }

/* ── Segmentado (vista, criterio, identificación) ── */
.sf-seg {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  border-radius: var(--r-pill);
  background: var(--s-sunken);
  border: 1px solid var(--b-hairline);
  box-shadow: var(--sh-inset);
}
.sf-seg > button {
  min-height: 34px;
  padding: 0 16px;
  white-space: nowrap;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--t-3);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  transition: all var(--tr-fast);
}
.sf-seg > button:hover { color: var(--t-1); }
.sf-seg > button.is-on {
  color: var(--pa-purple);
  background: var(--s-raised);
  border-color: var(--b-hairline);
  box-shadow: var(--sh-flat), var(--hl-top);
}
[data-theme="dark"] .sf-seg > button.is-on { color: #A9B6FF; }

/* ── Configuración de ligas ── */
.sf-config { margin-bottom: 16px; overflow: hidden; }
.sf-config-head {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 15px 18px;
  background: none;
  border: 0;
  text-align: left;
  cursor: pointer;
}
.sf-config-ic {
  width: 30px;
  height: 30px;
  flex: none;
  display: grid;
  place-items: center;
  font-size: 14px;
  color: #fff;
  border-radius: 9px;
  background: linear-gradient(160deg, #667eea, #764ba2);
  box-shadow: 0 3px 8px rgba(102, 126, 234, .4), inset 0 1px 0 rgba(255, 255, 255, .4);
}
.sf-config-title { font-weight: 700; font-size: 14.5px; color: var(--t-1); }
.sf-config-sub { font-size: 12px; color: var(--t-4); font-weight: 500; }
.sf-config-toggle { margin-left: auto; font-size: 12px; color: var(--pa-purple); font-weight: 700; }
.sf-config-body { padding: 0 18px 18px; }
.sf-config-hint { font-size: 12px; color: var(--t-3); }

/* ── Fila de rango editable ── */
.sf-ranks { display: grid; gap: 10px; }
.sf-rank {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: var(--r-md);
  background: var(--s-raised);
  border: 1px solid var(--b-hairline);
  box-shadow: var(--sh-flat), var(--hl-top);
}
.sf-rank-badge {
  width: 38px;
  height: 38px;
  flex: none;
  display: grid;
  place-items: center;
  font-size: 17px;
  color: #fff;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, .55);
  text-shadow: 0 1px 2px rgba(0, 0, 0, .35);
}
.sf-rank-meta { display: flex; flex-direction: column; line-height: 1.2; min-width: 118px; }
.sf-rank-name { font-weight: 700; font-size: 14px; color: var(--t-1); }
.sf-rank-count { font-size: 11px; color: var(--t-4); font-weight: 500; }
.sf-rank-inputs { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.sf-rank-inputs .inp { width: 78px; text-align: center; font-weight: 700; }
.sf-rank-dash { color: var(--t-4); }
.sf-rank-unit { font-size: 12px; color: var(--t-4); font-weight: 700; width: 32px; }

/* ── Avisos de validación ── */
.sf-errors {
  margin-top: 12px;
  padding: 12px 14px;
  border-radius: var(--r-sm);
  background: var(--lvl-insuficiente-soft);
  border: 1px solid rgba(239, 68, 68, .3);
}
.sf-errors-title { font-size: 12.5px; font-weight: 700; color: #B91C1C; margin-bottom: 6px; }
.sf-errors ul { margin: 0; padding-left: 18px; }
.sf-errors li { font-size: 12px; color: #B91C1C; line-height: 1.6; }
[data-theme="dark"] .sf-errors-title,
[data-theme="dark"] .sf-errors li { color: #FCA5A5; }

/* ── KPIs por liga ── */
.sf-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(158px, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}
.sf-stat {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-radius: var(--r-lg);
  background: var(--s-raised);
  border: 1px solid var(--b-hairline);
  box-shadow: var(--sh-rest), var(--hl-top);
}
.sf-stat-ic {
  width: 34px;
  height: 34px;
  flex: none;
  display: grid;
  place-items: center;
  font-size: 15px;
  color: #fff;
  border-radius: 11px;
  border: 1px solid rgba(255, 255, 255, .5);
  text-shadow: 0 1px 2px rgba(0, 0, 0, .3);
}
.sf-stat-val { font-size: 21px; font-weight: 800; color: var(--t-1); letter-spacing: -.02em; line-height: 1.15; }
.sf-stat-lbl { font-size: 11px; font-weight: 600; color: var(--t-4); letter-spacing: .04em; text-transform: uppercase; }

/* ── Tarjetas de estudiante ── */
.sf-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(272px, 1fr));
  gap: 16px;
}
.sf-card {
  display: flex;
  flex-direction: column;
  gap: 13px;
  padding: 16px;
  border-radius: var(--r-xl);
  background: var(--s-raised);
  border: 1px solid var(--b-hairline);
  box-shadow: var(--sh-rest), var(--hl-top);
  transition: transform var(--tr), box-shadow var(--tr);
}
.sf-card:hover { transform: translateY(-4px); box-shadow: var(--sh-lift), var(--hl-top); }
.sf-card.is-empty { opacity: .62; }
.sf-card-top { display: flex; align-items: center; gap: 12px; min-width: 0; }
.sf-avatar {
  width: 46px;
  height: 46px;
  flex: none;
  display: grid;
  place-items: center;
  font-size: 15px;
  font-weight: 800;
  color: #fff;
  border-radius: 15px;
  border: 1px solid rgba(255, 255, 255, .55);
  text-shadow: 0 1px 2px rgba(0, 0, 0, .3);
}
.sf-card-name {
  font-weight: 700;
  font-size: 14.5px;
  color: var(--t-1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sf-card-curso { font-size: 11.5px; color: var(--t-4); font-weight: 500; }
.sf-rank-pill {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  gap: 7px;
  padding: 6px 14px 6px 9px;
  border-radius: var(--r-pill);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .3);
  border: 1px solid rgba(255, 255, 255, .5);
}
.sf-card-nums { display: flex; align-items: baseline; gap: 8px; }
.sf-card-pts { font-size: 27px; font-weight: 800; color: var(--t-1); letter-spacing: -.03em; }
.sf-card-unit { font-size: 12px; font-weight: 600; color: var(--t-4); }
.sf-card-pct { margin-left: auto; font-size: 15px; font-weight: 800; color: var(--t-2); }
.sf-track {
  height: 10px;
  border-radius: var(--r-pill);
  background: var(--s-sunken);
  box-shadow: var(--sh-inset);
  overflow: hidden;
}
.sf-track > i {
  display: block;
  height: 100%;
  border-radius: var(--r-pill);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6);
  transition: width 500ms var(--ease-spot);
}
.sf-next { margin: 8px 0 0; font-size: 11.5px; color: var(--t-3); font-weight: 500; }

/* ── Tabla ── */
.sf-table { width: 100%; border-collapse: collapse; }
.sf-table th {
  padding: 13px 18px;
  text-align: left;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--t-4);
  background: var(--s-sunken);
}
.sf-table td { padding: 12px 18px; border-top: 1px solid var(--b-hairline); font-size: 13.5px; color: var(--t-2); }
.sf-table td.sf-td-name { font-weight: 600; color: var(--t-1); }
.sf-table td.sf-td-pts { font-weight: 700; }
.sf-table-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 11px;
  border-radius: var(--r-pill);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  border: 1px solid rgba(255, 255, 255, .5);
}

/* ── Barra flotante de acciones ── */
.sf-dock {
  position: sticky;
  bottom: 14px;
  z-index: 12;
  display: flex;
  justify-content: center;
  margin-top: 22px;
  pointer-events: none;
}
.sf-dock-inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  padding: 10px;
  border-radius: var(--r-pill);
  pointer-events: auto;
  background: var(--s-raised);
  border: 1px solid var(--b-hairline);
  box-shadow: var(--sh-lift), var(--hl-top);
}

/* ── Modal: centro de descarga ── */
.sf-export { display: grid; grid-template-columns: repeat(auto-fit, minmax(292px, 1fr)); gap: 22px; }
.sf-export-col { display: flex; flex-direction: column; gap: 12px; }
.sf-export-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--t-4);
}
.sf-opt {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 14px;
  text-align: left;
  border-radius: var(--r-md);
  background: var(--s-raised);
  border: 1px solid var(--b-hairline);
  box-shadow: var(--sh-flat), var(--hl-top);
  transition: all var(--tr-fast);
  cursor: pointer;
}
.sf-opt.is-on {
  border-color: rgba(102, 126, 234, .45);
  background: color-mix(in srgb, var(--pa-purple) 7%, var(--s-raised));
}
.sf-opt-box {
  flex: none;
  width: 22px;
  height: 22px;
  margin-top: 1px;
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 900;
  border-radius: 7px;
  color: transparent;
  background: var(--s-sunken);
  border: 1px solid var(--b-hairline);
  box-shadow: var(--sh-inset);
}
.sf-opt.is-on .sf-opt-box {
  color: #fff;
  background: linear-gradient(160deg, #7b8cf0, #5348b8);
  border-color: rgba(255, 255, 255, .5);
  box-shadow: 0 3px 8px -2px rgba(91, 99, 214, .6), inset 0 1px 0 rgba(255, 255, 255, .45);
}
.sf-opt-title { font-weight: 700; font-size: 13.5px; color: var(--t-1); }
.sf-opt-desc { font-size: 11.5px; color: var(--t-3); font-weight: 500; line-height: 1.45; }

/* ── Vista previa del afiche ── */
.sf-preview-frame {
  padding: 20px;
  border-radius: var(--r-md);
  background: var(--s-sunken);
  box-shadow: var(--sh-inset);
}
.sf-sheet {
  aspect-ratio: 1 / 1.294;
  padding: 22px 20px;
  border-radius: 5px;
  background: #fffdf8;
  color: #111827;
  box-shadow: 0 16px 34px -10px rgba(15, 23, 42, .35);
  display: flex;
  flex-direction: column;
  gap: 11px;
  overflow: hidden;
}
.sf-sheet-head { text-align: center; border-bottom: 2px solid var(--pa-yellow); padding-bottom: 10px; }
.sf-sheet-eyebrow { font-size: 9px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: #b08800; }
.sf-sheet-title { font-size: 20px; font-weight: 900; letter-spacing: -.01em; color: #111827; margin-top: 3px; }
.sf-sheet-sub { font-size: 10px; font-weight: 600; color: #9ca3af; margin-top: 2px; }
.sf-sheet-row { display: flex; gap: 10px; align-items: flex-start; }
.sf-sheet-badge {
  flex: none;
  width: 74px;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 4px 8px;
  border-radius: var(--r-pill);
  color: #fff;
  font-size: 8.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .05em;
  border: 1px solid rgba(255, 255, 255, .5);
}
.sf-sheet-names { font-size: 10px; line-height: 1.6; color: #374151; font-weight: 600; }
.sf-sheet-foot {
  margin-top: auto;
  text-align: center;
  font-size: 8px;
  color: #9ca3af;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
}

@media (max-width: 640px) {
  .sf-rank-inputs { margin-left: 0; width: 100%; }
  .sf-grid { grid-template-columns: 1fr; }
}

/* ── Vista previa: varias hojas apiladas (afiche · tabla) ── */
.sf-preview-frame { display: flex; flex-direction: column; gap: 14px; }
.sf-preview-frame .sf-sheet { aspect-ratio: auto; min-height: 0; }

/* Miniatura de la tabla de puntajes */
.sf-sheet-table { width: 100%; border-collapse: collapse; }
.sf-sheet-table th {
  padding: 3px 4px;
  font-size: 7.5px;
  font-weight: 800;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: #6b7280;
  border-bottom: 1.2px solid var(--pa-yellow);
}
.sf-sheet-table td {
  padding: 3px 4px;
  font-size: 8.5px;
  text-align: center;
  color: #374151;
  border-bottom: .5px solid #e5e7eb;
}
.sf-sheet-table td.nm { text-align: left; font-weight: 600; color: #111827; }
.sf-sheet-table td.pr { font-weight: 800; color: #111827; }
.sf-sheet-more { margin: 6px 0 0; font-size: 8px; color: #9ca3af; font-weight: 600; text-align: center; }