/* EduTrack — GPA (High School), vista dentro del Campus. Todo va bajo #gpa-view para no
   afectar el resto de app.css. Docs: docs/variados/GPA.md */
#gpa-view { padding: 8px 0 48px; }
#gpa-view .gpa-head h2 { font-size: 22px; font-weight: 700; letter-spacing: -0.4px; }
#gpa-view .gpa-muted, #gpa-view .muted { color: #6a6a6a; font-size: 13px; }
#gpa-view .gpa-head { margin-bottom: 18px; }
#gpa-view .error, #gpa-view .gpa-error { color: #c13515; font-size: 13px; }
#gpa-view .pad { padding: 24px 0; }
#gpa-view .toolbar { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 14px; margin-bottom: 18px; }
#gpa-view .tabs { display: flex; gap: 4px; border-bottom: 1px solid #ddd; }
#gpa-view .tabs button { height: 44px; padding: 0 16px; border: none; background: none; border-bottom: 2px solid transparent;
  font: inherit; font-size: 15px; font-weight: 600; color: #6a6a6a; cursor: pointer; white-space: nowrap; }
#gpa-view .tabs button.on { color: #222; border-bottom-color: #222; }
#gpa-view .filters { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; }
#gpa-view .filters label, #gpa-view .pesos-head label { display: flex; flex-direction: column; gap: 5px; font-size: 11px; font-weight: 700;
  color: #6a6a6a; text-transform: uppercase; letter-spacing: .4px; }
#gpa-view select, #gpa-view input[type="search"], #gpa-view input.peso { font: inherit; font-size: 14px; font-weight: 500; color: #222;
  height: 40px; padding: 0 12px; border: 1px solid #ddd; border-radius: 8px; background: #fff; }
#gpa-view input[type="search"] { min-width: 220px; }
#gpa-view select:focus, #gpa-view input:focus { outline: none; border-color: #222; }
#gpa-view .gpa-btn { height: 40px; padding: 0 16px; border: 1px solid transparent; border-radius: 8px; background: #960e0b; color: #fff;
  font: inherit; font-size: 14px; font-weight: 500; cursor: pointer; }
#gpa-view .gpa-btn:hover { background: #7a0b08; }
#gpa-view .note { background: #fff7e6; border: 1px solid #f0d9a8; color: #6b4e0a; border-radius: 10px; padding: 10px 14px; font-size: 13px; margin-bottom: 14px; }
#gpa-view .tbl-wrap { overflow: auto; border: 1px solid #ddd; border-radius: 12px; background: #fff; margin-bottom: 8px; max-height: 70vh; }
#gpa-view .tbl { border-collapse: separate; border-spacing: 0; font-size: 13px; width: 100%; }
#gpa-view .tbl th, #gpa-view .tbl td { padding: 8px 10px; border-bottom: 1px solid #ebebeb; white-space: nowrap; text-align: left; background: #fff; }
#gpa-view .tbl thead th { position: sticky; top: 0; z-index: 2; background: #fafafa; font-size: 12px; font-weight: 700; color: #6a6a6a;
  border-bottom: 1px solid #ddd; max-width: 120px; overflow: hidden; text-overflow: ellipsis; }
#gpa-view .tbl .num { text-align: right; font-variant-numeric: tabular-nums; }
#gpa-view .tbl td.low { color: #c13515; font-weight: 600; }
#gpa-view .tbl .gpa-col { background: #f6ecec; }
#gpa-view .tbl thead th.gpa-col { background: #f1e0e0; color: #960e0b; }
#gpa-view .tbl tbody tr:hover td { background: #f7f7f7; }
#gpa-view .tbl tbody tr:hover td.gpa-col { background: #f1e0e0; }
#gpa-view .grp { font-size: 15px; font-weight: 700; margin: 22px 0 8px; }
#gpa-view .foot { font-size: 12.5px; }
#gpa-view .pesos-head { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 16px; margin-bottom: 14px; }
#gpa-view input.peso { width: 90px; text-align: right; }
#gpa-view .gpa-toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); background: #222; color: #fff;
  padding: 13px 20px; border-radius: 10px; z-index: 70; box-shadow: rgba(0,0,0,.25) 0 10px 30px; font-size: 14px; }
#gpa-view .gpa-toast.err { background: #c13515; }
@media (max-width: 760px) { #gpa-view input[type="search"] { min-width: 0; width: 100%; } }

/* ---- Pesos por materia ---- */
#gpa-view .pesos-head { align-items: center; margin-bottom: 6px; }
#gpa-view .seg { display: inline-flex; border: 1px solid #ddd; border-radius: 10px; overflow: hidden; background: #fff; }
#gpa-view .seg button { height: 38px; min-width: 52px; padding: 0 14px; border: none; background: none; font: inherit; font-size: 14px;
  font-weight: 600; color: #6a6a6a; cursor: pointer; }
#gpa-view .seg button + button { border-left: 1px solid #ddd; }
#gpa-view .seg button.on { background: #222; color: #fff; }
#gpa-view .peso-resumen { font-size: 13.5px; color: #3f3f3f; }
#gpa-view .peso-ayuda { margin-bottom: 14px; }
#gpa-view .peso-card { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 10px; }
#gpa-view .peso-row { display: flex; align-items: center; gap: 12px; padding: 7px 14px; border: 1px solid #ddd; border-radius: 10px; background: #fff; }
#gpa-view .peso-row.con { background: #f6ecec; border-color: #e6c9c8; }
#gpa-view .peso-mat { flex: 1; min-width: 0; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#gpa-view .peso-row input.peso { width: 76px; height: 34px; padding: 0 10px; flex: none; }
#gpa-view .peso-est { width: 82px; font-size: 12px; color: #9a9a9a; flex: none; }
#gpa-view .peso-est.ok { color: #15803d; font-weight: 600; }

/* Listado y ranking: las tres primeras columnas (grupo/#, código, estudiante) quedan fijas al desplazar. */
#gpa-view .tbl.fijas th:nth-child(-n+3), #gpa-view .tbl.fijas td:nth-child(-n+3) { position: sticky; z-index: 1; }
#gpa-view .tbl.fijas thead th:nth-child(-n+3) { z-index: 4; background: #fafafa; max-width: none; }
#gpa-view .tbl.fijas th:nth-child(1), #gpa-view .tbl.fijas td:nth-child(1) { left: 0; min-width: 60px; width: 60px; max-width: 60px; }
#gpa-view .tbl.fijas th:nth-child(2), #gpa-view .tbl.fijas td:nth-child(2) { left: 60px; min-width: 96px; width: 96px; max-width: 96px; }
#gpa-view .tbl.fijas th:nth-child(3), #gpa-view .tbl.fijas td:nth-child(3) { left: 156px; min-width: 230px; width: 230px; max-width: 230px;
  overflow: hidden; text-overflow: ellipsis; border-right: 1px solid #ddd; }
/* Ranking: también el GPA queda fijo (cuarta columna). */
#gpa-view .tbl.fijas4 th:nth-child(4), #gpa-view .tbl.fijas4 td:nth-child(4) { position: sticky; z-index: 1; left: 386px;
  min-width: 70px; width: 70px; max-width: 70px; border-right: 1px solid #ddd; }
#gpa-view .tbl.fijas4 thead th:nth-child(4) { z-index: 4; max-width: 70px; }
#gpa-view .tbl.fijas4 th:nth-child(3), #gpa-view .tbl.fijas4 td:nth-child(3) { border-right: none; }
/* Campo de peso sin las flechas del input numérico */
#gpa-view input.peso { -moz-appearance: textfield; appearance: textfield; }
#gpa-view input.peso::-webkit-outer-spin-button, #gpa-view input.peso::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
/* Total de créditos del grado */
#gpa-view .total-box { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 4px 12px; margin: 10px 0 6px; padding: 12px 14px;
  border: 1px solid #ddd; border-radius: 10px; background: #fafafa; max-width: 760px; }
#gpa-view .total-box label { display: flex; flex-direction: column; gap: 5px; font-size: 11px; font-weight: 700; color: #6a6a6a;
  text-transform: uppercase; letter-spacing: .4px; }
#gpa-view .total-box input.total { width: 110px; }
#gpa-view .total-box .peso-est { padding-bottom: 10px; }
#gpa-view .total-box p { flex-basis: 100%; }
#gpa-view .peso-dif { color: #b45309; font-weight: 600; }